Implementation Phase 2

apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx

@@ -9,6 +9,7 @@ import useStyles from './Styles';
 import { Footer } from 'components/Common/Footer';
 import { usePhase1 } from '@hooks/Phase1/usePhase1';
 import { Controller } from 'react-hook-form';
+import { PhasesEum } from '@types';
 
 interface IPhase1Props {
   onNextClick: () => void;
@@ -85,7 +86,12 @@ export function Phase1(props: IPhase1Props) {
         )}
       />
 
-      <Footer primaryButtonLoading={isUploadLoading} onNextClick={onSubmit} onPrevClick={() => {}} active={1} />
+      <Footer
+        primaryButtonLoading={isUploadLoading}
+        onNextClick={onSubmit}
+        onPrevClick={() => {}}
+        active={PhasesEum.UPLOAD}
+      />
     </>
   );
 }

apps/widget/src/components/widget/Phases/Phase2/MappingHeading/MappingHeading.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TEXTS } from '@config';
+import useStyles from './Styles';
+import { Group, Text } from '@mantine/core';
+
+export const MappingHeading = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
+  const { classes } = useStyles();
+
+  return (
+    <Group style={{ justifyContent: 'space-between' }} noWrap ref={ref}>
+      <Group className={classes.textWrapper} align="stretch" noWrap>
+        <Text color="dimmed" style={{ width: '50%' }}>
+          {TEXTS.PHASE2.NAME_IN_SCHEMA_TITLE}
+        </Text>
+        <Text color="dimmed" style={{ width: '50%' }}>
+          {TEXTS.PHASE2.NAME_IN_SHEET_TITLE}
+        </Text>
+      </Group>
+    </Group>
+  );
+});

apps/widget/src/components/widget/Phases/Phase2/MappingHeading/Styles.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+import { createStyles, MantineTheme } from '@mantine/core';
+
+export const getTextWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
+  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
+    width: '100%',
+  },
+  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
+    width: '70%',
+  },
+});
+
+export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
+  return {
+    textWrapper: getTextWrapperStyles(theme),
+  };
+});

apps/widget/src/components/widget/Phases/Phase2/MappingHeading/index.ts

@@ -0,0 +1 @@
+export * from './MappingHeading';

apps/widget/src/components/widget/Phases/Phase2/Phase2.tsx

@@ -1,32 +1,25 @@
-import { Group, Text } from '@mantine/core';
 import { MappingItem } from '@ui/MappingItem';
-import { TEXTS } from '@config';
 import { Footer } from 'components/Common/Footer';
 import useStyles from './Styles';
 import { useEffect, useRef, useState } from 'react';
+import { usePhase2 } from '@hooks/Phase2/usePhase2';
+import { PhasesEum } from '@types';
+import { Controller } from 'react-hook-form';
+import { MappingHeading } from './MappingHeading';
 
 interface IPhase2Props {
   onPrevClick: () => void;
   onNextClick: () => void;
 }
 
+const defaulWrappertHeight = 200;
 export function Phase2(props: IPhase2Props) {
-  const defaulWrappertHeight = 200;
-  const wrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
-  const titlesRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
-  const [wrapperHeight, setWrapperHeight] = useState(defaulWrappertHeight);
   const { classes } = useStyles();
   const { onPrevClick, onNextClick } = props;
-  const options = [
-    {
-      label: 'Firstname',
-      value: '1',
-    },
-    {
-      label: 'Lastname',
-      value: '2',
-    },
-  ];
+  const [wrapperHeight, setWrapperHeight] = useState(defaulWrappertHeight);
+  const { headings, mappings, control, onSubmit } = usePhase2({ goNext: onNextClick });
+  const wrapperRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+  const titlesRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
 
   useEffect(() => {
     // setting wrapper height
@@ -39,30 +32,36 @@ export function Phase2(props: IPhase2Props) {
     <>
       <div style={{ flexGrow: 1 }} ref={wrapperRef}>
         {/* Heading */}
-        <Group style={{ justifyContent: 'space-between' }} noWrap ref={titlesRef}>
-          <Group className={classes.textWrapper} align="stretch" noWrap>
-            <Text color="dimmed" style={{ width: '50%' }}>
-              {TEXTS.PHASE2.NAME_IN_SCHEMA_TITLE}
-            </Text>
-            <Text color="dimmed" style={{ width: '50%' }}>
-              {TEXTS.PHASE2.NAME_IN_SHEET_TITLE}
-            </Text>
-          </Group>
-        </Group>
+        <MappingHeading ref={titlesRef} />
         {/* Mapping Items */}
         <div
           className={classes.mappingWrapper}
           style={{
             height: wrapperHeight,
           }}
         >
-          {Array.from({ length: 10 }).map((value, index) => (
-            <MappingItem key={index} options={options} heading="First Name" />
-          ))}
+          {Array.isArray(mappings) &&
+            mappings.map((mappingItem, index) => (
+              <Controller
+                key={mappingItem._id}
+                name={`mappings.${index}.columnHeading`}
+                control={control}
+                render={({ field }) => (
+                  <MappingItem
+                    key={mappingItem._id}
+                    options={headings}
+                    heading={mappingItem.column.name}
+                    value={field.value}
+                    onChange={field.onChange}
+                    ref={field.ref}
+                  />
+                )}
+              />
+            ))}
         </div>
       </div>
 
-      <Footer active={2} onNextClick={onNextClick} onPrevClick={onPrevClick} />
+      <Footer active={PhasesEum.MAPPING} onNextClick={onSubmit} onPrevClick={onPrevClick} />
     </>
   );
 }

apps/widget/src/components/widget/Phases/Phase2/Styles.tsx

@@ -1,15 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 import { createStyles, MantineTheme } from '@mantine/core';
 
-export const getTextWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
-  [`@media (max-width: ${theme.breakpoints.md}px)`]: {
-    width: '100%',
-  },
-  [`@media (min-width: ${theme.breakpoints.md}px)`]: {
-    width: '70%',
-  },
-});
-
 export const getMappingWrapperStyles = (theme: MantineTheme): React.CSSProperties => ({
   overflowY: 'auto',
   display: 'flex',
@@ -20,7 +11,6 @@ export const getMappingWrapperStyles = (theme: MantineTheme): React.CSSPropertie
 
 export default createStyles((theme: MantineTheme, params, getRef): Record<string, any> => {
   return {
-    textWrapper: getTextWrapperStyles(theme),
     mappingWrapper: getMappingWrapperStyles(theme),
   };
 });

apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx

@@ -1,6 +1,7 @@
 import { colors, TEXTS } from '@config';
 import { Download, Warning } from '@icons';
 import { Group, Text } from '@mantine/core';
+import { PhasesEum } from '@types';
 import { Button } from '@ui/Button';
 import { Pagination } from '@ui/Pagination';
 import { Table } from '@ui/Table';
@@ -95,7 +96,7 @@ export function Phase3(props: IPhase3Props) {
       </div>
       <Pagination page={1} total={10} />
 
-      <Footer active={3} onNextClick={onNextClick} onPrevClick={onPrevClick} />
+      <Footer active={PhasesEum.REVIEW} onNextClick={onNextClick} onPrevClick={onPrevClick} />
     </>
   );
 }

apps/widget/src/components/widget/Phases/Phase4/Phase4.tsx

@@ -3,6 +3,7 @@ import { colors, TEXTS } from '@config';
 import { CheckIcon } from '@icons';
 import { Footer } from 'components/Common/Footer';
 import useStyles from './Styles';
+import { PhasesEum } from '@types';
 
 interface IPhase4Props {
   onUploadAgainClick: () => void;
@@ -25,7 +26,7 @@ export function Phase4(props: IPhase4Props) {
         </Text>
       </Group>
 
-      <Footer active={4} onNextClick={onUploadAgainClick} onPrevClick={() => {}} />
+      <Footer active={PhasesEum.CONFIRMATION} onNextClick={onUploadAgainClick} onPrevClick={() => {}} />
     </>
   );
 }

apps/widget/src/design-system/MappingItem/MappingItem.tsx

@@ -1,5 +1,5 @@
 import { Group, Select, Text } from '@mantine/core';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import useStyles from './MappingItem.style';
 import { ChevronDown, GreenCheck } from '../../icons';
 
@@ -11,21 +11,23 @@ interface IOption {
 interface IMappingItem {
   heading: string;
   required?: boolean;
-  options: IOption[];
+  options: IOption[] | string[];
   value?: string;
   placeholder?: string;
   size?: 'sm' | 'md';
   searchable?: boolean;
   mappingSucceedText?: string;
   mappingFailedText?: string;
+  onChange?: (value: any) => void;
 }
 
-export function MappingItem(props: IMappingItem) {
+export const MappingItem = React.forwardRef<HTMLInputElement, IMappingItem>((props: IMappingItem, ref) => {
   const {
     heading,
     options,
     required,
     value,
+    onChange,
     placeholder = 'Select field',
     size = 'sm',
     searchable = true,
@@ -58,6 +60,8 @@ export function MappingItem(props: IMappingItem) {
           size={size}
           searchable={searchable}
           dropdownComponent="div"
+          onChange={(selectedValue) => onChange && onChange(selectedValue)}
+          ref={ref}
         />
       </Group>
       <Text size={size} color={value ? 'black' : 'gray'} className={classes.statusText}>
@@ -66,4 +70,4 @@ export function MappingItem(props: IMappingItem) {
       </Text>
     </Group>
   );
-}
+});

apps/widget/src/hooks/Phase2/usePhase2.ts

@@ -0,0 +1,55 @@
+import { IMapping, IErrorObject, IMappingFinalize, IUpload } from '@impler/shared';
+import { useAPIState } from '@store/api.context';
+import { useAppState } from '@store/app.context';
+import { useQuery, useMutation } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+
+interface IUsePhase2Props {
+  goNext: () => void;
+}
+
+export function usePhase2({ goNext }: IUsePhase2Props) {
+  const { api } = useAPIState();
+  const { uploadInfo, setUploadInfo } = useAppState();
+  const { control, reset, handleSubmit } = useForm<{ mappings: IMappingFinalize[] }>();
+  const { data: mappings } = useQuery<IMapping[], IErrorObject, IMapping[], string[]>(
+    [`mapping:${uploadInfo._id}`],
+    () => api.getMappings(uploadInfo._id),
+    {
+      onSuccess(mappingsResponse) {
+        reset({
+          mappings: mappingsResponse.map((mapping) => ({
+            _columnId: mapping.column._columnId,
+            columnHeading: mapping.columnHeading,
+          })),
+        });
+      },
+    }
+  );
+  const { isLoading: isMappingFinalizing, mutate: finalizeMapping } = useMutation<
+    IUpload,
+    IErrorObject,
+    IMappingFinalize[],
+    any
+  >(
+    [`mapping:${uploadInfo._id}-finalize`],
+    (finalizedMappings) => api.finalizeMappings(uploadInfo._id, finalizedMappings),
+    {
+      onSuccess(updatedUploadInfo) {
+        setUploadInfo(updatedUploadInfo);
+        goNext();
+      },
+    }
+  );
+  const onFinalizeMapping = (data: { mappings: IMappingFinalize[] }) => {
+    finalizeMapping(data.mappings);
+  };
+
+  return {
+    control,
+    mappings,
+    isMappingFinalizing,
+    headings: uploadInfo.headings,
+    onSubmit: handleSubmit(onFinalizeMapping),
+  };
+}

apps/widget/src/icons/green-check.icon.tsx

@@ -16,7 +16,7 @@ export function GreenCheck(props: IIcon) {
         transform="translate(-3.282 -5.625)"
         fill="#199c4d"
         stroke="#199c4d"
-        stroke-width="0.5"
+        strokeWidth="0.5"
       />
     </svg>
   );

apps/widget/src/store/app.context.tsx

@@ -7,7 +7,7 @@ type AppContextProviderProps = React.PropsWithChildren;
 const AppContext = createContext<IAppStore | null>(null);
 
 const AppContextProvider = ({ children }: AppContextProviderProps) => {
-  const [uploadInfo, setUploadInfo] = useState<IUpload>();
+  const [uploadInfo, setUploadInfo] = useState<IUpload>({} as IUpload);
 
   return <AppContext.Provider value={{ uploadInfo, setUploadInfo }}>{children}</AppContext.Provider>;
 };

apps/widget/src/types/store.types.ts

@@ -14,6 +14,6 @@ export interface IApiStore {
 }
 
 export interface IAppStore {
-  uploadInfo?: IUpload;
+  uploadInfo: IUpload;
   setUploadInfo: (uploadInfo: IUpload) => void;
 }

libs/shared/src/entities/Mapping/Mapping.interface.ts

@@ -0,0 +1,14 @@
+export class IMapping {
+  _id: string;
+  column: {
+    _columnId: string;
+    name: string;
+    sequence: number;
+  };
+  columnHeading?: string;
+}
+
+export class IMappingFinalize {
+  _columnId: string;
+  columnHeading: string;
+}

libs/shared/src/entities/Mapping/index.ts

@@ -0,0 +1 @@
+export * from './Mapping.interface';

libs/shared/src/entities/index.ts

@@ -1,2 +1,3 @@
 export * from './Upload';
 export * from './Template';
+export * from './Mapping';

packages/client/src/api/api.service.ts

@@ -1,4 +1,10 @@
-import { HttpClient, ITemplate, IUpload } from '@impler/shared';
+import {
+  HttpClient,
+  ITemplate,
+  IUpload,
+  IMapping,
+  IMappingFinalize,
+} from '@impler/shared';
 
 export class ApiService {
   private httpClient: HttpClient;
@@ -47,4 +53,15 @@ export class ApiService {
       ITemplate[]
     >;
   }
+
+  async getMappings(uploadId: string): Promise<IMapping[]> {
+    return this.httpClient.get(`/mapping/${uploadId}`) as Promise<IMapping[]>;
+  }
+
+  async finalizeMappings(uploadId: string, mappings: IMappingFinalize[]) {
+    return this.httpClient.post(
+      `/mapping/${uploadId}/finalize`,
+      mappings
+    ) as Promise<IUpload>;
+  }
 }