feat onboarding (#526)

apps/api/src/app/column/commands/add-column.command.ts

@@ -16,7 +16,7 @@ export class AddColumnCommand extends BaseCommand {
   @IsArray()
   @IsOptional()
   @Type(() => Array<string>)
-  alternateKeys: string[];
+  alternateKeys? = [];
 
   @IsBoolean()
   @IsOptional()
@@ -31,25 +31,25 @@ export class AddColumnCommand extends BaseCommand {
 
   @IsString()
   @IsOptional()
-  regex: string;
+  regex?: string;
 
   @IsString()
   @IsOptional()
-  regexDescription: string;
+  regexDescription?: string;
 
   @IsArray()
   @IsOptional()
   @Type(() => Array<string>)
-  selectValues: string[];
+  selectValues?: string[];
 
   @IsArray()
   @IsOptional()
   @Type(() => Array<string>)
-  dateFormats: string[];
+  dateFormats?: string[];
 
   @IsNumber()
   @IsOptional()
-  sequence: number;
+  sequence?: number;
 
   @IsDefined()
   @IsMongoId()

apps/api/src/app/project/dtos/create-project-request.dto.ts

@@ -1,5 +1,5 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { IsDefined, IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsDefined, IsOptional, IsString } from 'class-validator';
 export class CreateProjectRequestDto {
   @ApiProperty({
     description: 'Name of the project',
@@ -14,4 +14,11 @@ export class CreateProjectRequestDto {
   @IsString()
   @IsOptional()
   authHeaderName: string;
+
+  @ApiPropertyOptional({
+    description: 'Is this project created during onboarding?',
+  })
+  @IsBoolean()
+  @IsOptional()
+  onboarding = false;
 }

apps/api/src/app/project/project.controller.ts

@@ -117,7 +117,7 @@ export class ProjectController {
   ): Promise<{ project: ProjectResponseDto; environment: EnvironmentResponseDto }> {
     const projectWithEnvironment = await this.createProjectUsecase.execute(
       CreateProjectCommand.create({
-        name: body.name,
+        ...body,
         _userId: user._id,
       })
     );

apps/api/src/app/project/usecases/create-project/create-project.command.ts

@@ -1,8 +1,12 @@
-import { IsDefined, IsString } from 'class-validator';
+import { IsBoolean, IsDefined, IsString } from 'class-validator';
 import { AuthenticatedCommand } from '@shared/commands/authenticated.command';
 
 export class CreateProjectCommand extends AuthenticatedCommand {
   @IsDefined()
   @IsString()
   name: string;
+
+  @IsBoolean()
+  @IsDefined()
+  onboarding: boolean;
 }

apps/api/src/app/project/usecases/create-project/create-project.usecase.ts

@@ -1,11 +1,19 @@
 import { Injectable } from '@nestjs/common';
 import { ProjectRepository } from '@impler/dal';
+import { ColumnTypesEnum } from '@impler/shared';
+
 import { CreateProjectCommand } from './create-project.command';
-import { CreateEnvironment } from 'app/environment/usecases/create-environment/create-environment.usecase';
+import { CreateEnvironment } from 'app/environment/usecases';
+import { CreateTemplate, UpdateTemplateColumns } from 'app/template/usecases';
 
 @Injectable()
 export class CreateProject {
-  constructor(private projectRepository: ProjectRepository, private readonly createEnvironment: CreateEnvironment) {}
+  constructor(
+    private projectRepository: ProjectRepository,
+    private readonly createEnvironment: CreateEnvironment,
+    private readonly createTemplate: CreateTemplate,
+    private readonly updateTemplateColumns: UpdateTemplateColumns
+  ) {}
 
   async execute(command: CreateProjectCommand) {
     const project = await this.projectRepository.create(command);
@@ -15,9 +23,100 @@ export class CreateProject {
       _userId: command._userId,
     });
 
+    if (command.onboarding) {
+      await this.createSampleImport(project._id);
+    }
+
     return {
       project,
       environment,
     };
   }
+
+  async createSampleImport(_projectId: string) {
+    const template = await this.createTemplate.execute({
+      _projectId,
+      chunkSize: 100,
+      name: 'Sales Data Import',
+    });
+    await this.updateTemplateColumns.execute(
+      [
+        {
+          _templateId: template._id,
+          name: 'Date',
+          key: 'Date *',
+          type: ColumnTypesEnum.DATE,
+          isRequired: true,
+          dateFormats: ['DD/MM/YYYY'],
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Product Name/ID',
+          key: 'Product Name/ID *',
+          type: ColumnTypesEnum.STRING,
+          isRequired: true,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Quantity',
+          key: 'Quantity *',
+          type: ColumnTypesEnum.NUMBER,
+          isRequired: true,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Total Price',
+          key: 'Total Price',
+          type: ColumnTypesEnum.NUMBER,
+          isRequired: false,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Customer Name/ID',
+          key: 'Customer Name/ID *',
+          type: ColumnTypesEnum.STRING,
+          isRequired: true,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Payment Method',
+          key: 'Payment Method *',
+          type: ColumnTypesEnum.SELECT,
+          selectValues: ['credit card', 'cash', 'check'],
+          isRequired: true,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Transaction ID',
+          key: 'Transaction ID * (unique)',
+          type: ColumnTypesEnum.STRING,
+          isRequired: true,
+          isUnique: true,
+        },
+        {
+          _templateId: template._id,
+          name: 'Salesperson Name/ID',
+          key: 'Salesperson Name/ID',
+          type: ColumnTypesEnum.STRING,
+          isRequired: false,
+          isUnique: false,
+        },
+        {
+          _templateId: template._id,
+          name: 'Notes/Comments',
+          key: 'Notes/Comments',
+          type: ColumnTypesEnum.STRING,
+          isRequired: false,
+          isUnique: false,
+        },
+      ],
+      template._id
+    );
+  }
 }

apps/api/src/app/project/usecases/index.ts

@@ -8,6 +8,9 @@ import { DeleteProject } from './delete-project/delete-project.usecase';
 import { GetTemplates } from './get-templates/get-templates.usecase';
 import { GetEnvironment } from './get-environment/get-environment.usecase';
 
+import { CreateTemplate, UpdateTemplateColumns } from 'app/template/usecases';
+import { SaveSampleFile } from '@shared/usecases/save-sample-file/save-sample-file.usecase';
+
 export const USE_CASES = [
   GetProjects,
   CreateProject,
@@ -16,6 +19,9 @@ export const USE_CASES = [
   GetTemplates,
   GetImports,
   GetEnvironment,
+  CreateTemplate,
+  SaveSampleFile,
+  UpdateTemplateColumns,
   //
 ];
 

apps/web/components/common/Support.tsx

@@ -16,8 +16,9 @@ if (publicRuntimeConfig.NEXT_PUBLIC_OPENREPLAY_KEY) {
   tracker = new Tracker({
     __DISABLE_SECURE_MODE: true,
     projectKey: publicRuntimeConfig.NEXT_PUBLIC_OPENREPLAY_KEY,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     network: {
-      sessionTokenHeader: 'X-OpenReplay-Session-Token',
       failuresOnly: true,
       ignoreHeaders: ['Cookie'],
       captureInIframes: true,
@@ -39,11 +40,13 @@ export function Support({ profile }: SupportProps) {
         tracker.setMetadata('lastname', profile.lastName);
         tracker.setMetadata('firstname', profile.firstName);
       }
-      twakRef.current?.setAttributes({
-        id: profile._id,
-        name: profile.firstName,
-        email: profile.email,
-      });
+      /*
+       * twakRef.current?.setAttributes({
+       *   id: profile._id,
+       *   name: profile.firstName,
+       *   email: profile.email,
+       * });
+       */
     }
   }, [profile]);
 

apps/web/components/imports/schema/ColumnsTable.tsx

@@ -53,6 +53,7 @@ export function ColumnsTable({ templateId }: ColumnsTableProps) {
         handleSubmit();
         SelectRef.current = false;
       }}
+      id="columns"
     >
       <DraggableTable<IColumn>
         emptyDataText='No columns found click on "+" to add new column'
@@ -208,7 +209,12 @@ export function ColumnsTable({ templateId }: ColumnsTableProps) {
             ) : (
               <td colSpan={5}>
                 <Tooltip label="Add new column" withArrow position="top-start">
-                  <ActionIcon bg={colors.yellow} variant="transparent" onClick={() => setShowAddRow(true)}>
+                  <ActionIcon
+                    id="add-column"
+                    bg={colors.yellow}
+                    variant="transparent"
+                    onClick={() => setShowAddRow(true)}
+                  >
                     <AddIcon color={colors.white} />
                   </ActionIcon>
                 </Tooltip>

apps/web/components/signin/CreateProjectForm.tsx

@@ -26,24 +26,28 @@ export default function CreateProjectForm() {
     IErrorObject,
     ICreateProjectData,
     string[]
-  >([API_KEYS.PROJECT_CREATE], (data) => commonApi(API_KEYS.PROJECT_CREATE as any, { body: data }), {
-    onSuccess: (data) => {
-      if (profileInfo) {
-        setProfileInfo({
-          ...profileInfo,
-          _projectId: data.project._id,
-          accessToken: data.environment.apiKeys[VARIABLES.ZERO].key,
+  >(
+    [API_KEYS.PROJECT_CREATE],
+    (data) => commonApi(API_KEYS.PROJECT_CREATE as any, { body: { ...data, onboarding: true } }),
+    {
+      onSuccess: (data) => {
+        if (profileInfo) {
+          setProfileInfo({
+            ...profileInfo,
+            _projectId: data.project._id,
+            accessToken: data.environment.apiKeys[VARIABLES.ZERO].key,
+          });
+        }
+        track({
+          name: 'PROJECT CREATE',
+          properties: {
+            duringOnboard: true,
+          },
         });
-      }
-      track({
-        name: 'PROJECT CREATE',
-        properties: {
-          duringOnboard: true,
-        },
-      });
-      push('/');
-    },
-  });
+        push('/');
+      },
+    }
+  );
 
   const onProjectFormSubmit = (data: ICreateProjectData) => {
     createProject(data);

apps/web/design-system/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@ import { Tabs as MantineTabs } from '@mantine/core';
 import useStyles from './Tabs.styles';
 
 interface TabItem {
+  id?: string;
   value: string;
   title: string;
   icon?: React.ReactNode;
@@ -28,7 +29,7 @@ export function Tabs({ items, keepMounted, allowTabDeactivation, defaultValue }:
     >
       <MantineTabs.List>
         {items.map((item) => (
-          <MantineTabs.Tab key={item.value} value={item.value} icon={item.icon}>
+          <MantineTabs.Tab data-id={item.id} key={item.value} value={item.value} icon={item.icon}>
             {item.title}
           </MantineTabs.Tab>
         ))}

apps/web/design-system/import-card/ImportCard.tsx

@@ -7,6 +7,7 @@ import { IconButton } from '@ui/icon-button';
 import { CopyIcon } from '@assets/icons/Copy.icon';
 
 interface ImportCardProps {
+  id?: string;
   href: string;
   title: string;
   imports: number;
@@ -15,11 +16,19 @@ interface ImportCardProps {
   onDuplicateClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 
-export function ImportCard({ title, imports, totalRecords, errorRecords, onDuplicateClick, href }: ImportCardProps) {
+export function ImportCard({
+  id,
+  title,
+  imports,
+  totalRecords,
+  errorRecords,
+  onDuplicateClick,
+  href,
+}: ImportCardProps) {
   const { classes } = useStyles();
 
   return (
-    <Link href={href} className={classes.root}>
+    <Link id={id} href={href} className={classes.root}>
       <Flex justify="space-between">
         <Text size="xl" className={`title ${classes.name}`}>
           {title}

apps/web/hooks/useApp.tsx

@@ -17,6 +17,9 @@ export function useApp() {
     () => commonApi<IProfileData>(API_KEYS.ME as any, {}),
     {
       onSuccess(profileData) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        window.usetifulTags = { userId: profileData?._id };
         setProfileInfo(profileData);
       },
     }