feat(webapp): import preview page

packages/webapp/src/containers/Import/ImportFileMappingForm.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
+import { Intent } from '@blueprintjs/core';
 import { useImportFileMapping } from '@/hooks/query/import';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { useImportFileContext } from './ImportFileProvider';
 import { useMemo } from 'react';
 import { isEmpty } from 'lodash';
-
-const validationSchema = null;
+import { AppToaster } from '@/components';
 
 interface ImportFileMappingFormProps {
   children: React.ReactNode;
@@ -33,7 +33,13 @@ export function ImportFileMappingForm({
         setSubmitting(false);
         setStep(2);
       })
-      .catch((error) => {
+      .catch(({ response: { data } }) => {
+        if (data.errors.find(e => e.type === "DUPLICATED_FROM_MAP_ATTR")) {
+          AppToaster.show({
+            message: 'Selected the same sheet columns to multiple fields.',
+            intent: Intent.DANGER
+          })
+        }
         setSubmitting(false);
       });
   };
@@ -42,7 +48,6 @@ export function ImportFileMappingForm({
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
-      // validationSchema={validationSchema}
     >
       <Form>{children}</Form>
     </Formik>

packages/webapp/src/containers/Import/ImportFilePreview.module.scss

@@ -0,0 +1,42 @@
+
+.previewList {
+  list-style: none;
+  margin-top: 14px;
+
+  :global(li) {
+    border-top: 1px solid #d9d9da;
+    padding: 6px 0;
+
+    &:last-child{ 
+      padding-bottom: 0;
+    }
+  }
+}
+
+.unmappedList {
+  padding-left: 2rem;
+}
+
+.skippedTable {
+  width: 100%;
+  
+  thead{
+    th{
+      padding-top: 0;
+      padding-bottom: 8px;
+      color: #738091;
+      font-weight: 500;
+    }
+  }
+  
+  tbody{
+    tr td {
+      vertical-align: middle;
+      padding: 7px;
+    }
+
+    tr:hover td{
+      background: #F6F7F9;
+    }
+  }
+}

packages/webapp/src/containers/Import/ImportFilePreview.tsx

@@ -7,10 +7,13 @@ import {
   useImportFilePreviewBootContext,
 } from './ImportFilePreviewBoot';
 import { useImportFileContext } from './ImportFileProvider';
-import { AppToaster, Card, Group } from '@/components';
 import { useImportFileProcess } from '@/hooks/query/import';
+import { AppToaster, Box, Group, Stack } from '@/components';
 import { CLASSES } from '@/constants';
 import { ImportStepperStep } from './_types';
+import { ImportFileContainer } from './ImportFileContainer';
+import { SectionCard, Section } from '@/components/Section';
+import styles from './ImportFilePreview.module.scss';
 
 export function ImportFilePreview() {
   const { importId } = useImportFileContext();
@@ -26,23 +29,68 @@ function ImportFilePreviewContent() {
   const { importPreview } = useImportFilePreviewBootContext();
 
   return (
-    <div>
-      <Callout>
-        {importPreview.createdCount} of {importPreview.totalCount} Items in your
-        file are ready to be imported.
-      </Callout>
+    <Box>
+      <ImportFileContainer>
+        <Stack spacing={20}>
+          <Callout
+            intent={
+              importPreview.createdCount <= 0 ? Intent.DANGER : Intent.NONE
+            }
+          >
+            {importPreview.createdCount} of {importPreview.totalCount} Items in
+            your file are ready to be imported.
+          </Callout>
 
-      <Card>
+          <ImportFilePreviewImported />
+          <ImportFilePreviewSkipped />
+          <ImportFilePreviewUnmapped />
+        </Stack>
+      </ImportFileContainer>
+      <ImportFilePreviewFloatingActions />
+    </Box>
+  );
+}
+
+function ImportFilePreviewImported() {
+  const { importPreview } = useImportFilePreviewBootContext();
+
+  return (
+    <Section
+      collapseProps={{ defaultIsOpen: false }}
+      defaultIsOpen={true}
+      title={`(${importPreview.createdCount}) Items are ready to import`}
+    >
+      <SectionCard padded={true}>
         <Text>
           Items that are ready to be imported - {importPreview.createdCount}
         </Text>
-        <ul>
-          <li>Items to be created: ({importPreview.createdCount})</li>
-          <li>Items to be skipped: ({importPreview.skippedCount})</li>
-          <li>Items have errors: ({importPreview.errorsCount})</li>
+        <ul className={styles.previewList}>
+          <li>
+            Items to be created: <span>({importPreview.createdCount})</span>
+          </li>
+          <li>
+            Items to be skipped: <span>({importPreview.skippedCount})</span>
+          </li>
+          <li>
+            Items have errors: <span>({importPreview.errorsCount})</span>
+          </li>
         </ul>
+      </SectionCard>
+    </Section>
+  );
+}
 
-        <table className={clsx('bp4-html-table')}>
+function ImportFilePreviewSkipped() {
+  const { importPreview } = useImportFilePreviewBootContext();
+
+  return (
+    <Section
+      collapseProps={{ defaultIsOpen: false }}
+      collapsible={true}
+      title={`(${importPreview.skippedCount}) Items are skipped`}
+    >
+      <SectionCard padded={true}>
+        <table className={clsx('bp4-html-table', styles.skippedTable)}>
           <thead>
             <tr>
               <th className={'number'}>#</th>
@@ -64,20 +112,28 @@ function ImportFilePreviewContent() {
             ))}
           </tbody>
         </table>
+      </SectionCard>
+    </Section>
+  );
+}
 
-        <Text>
-          Unmapped Sheet Columns - ({importPreview?.unmappedColumnsCount})
-        </Text>
+function ImportFilePreviewUnmapped() {
+  const { importPreview } = useImportFilePreviewBootContext();
 
-        <ul>
+  return (
+    <Section
+      collapseProps={{ defaultIsOpen: false }}
+      collapsible={true}
+      title={`(${importPreview?.unmappedColumnsCount}) Unmapped Columns`}
+    >
+      <SectionCard padded={true}>
+        <ul className={styles.unmappedList}>
           {importPreview.unmappedColumns?.map((column, key) => (
             <li key={key}>{column}</li>
           ))}
         </ul>
-      </Card>
-
-      <ImportFilePreviewFloatingActions />
-    </div>
+      </SectionCard>
+    </Section>
   );
 }
 

packages/webapp/src/containers/Import/ImportFileUploadStep.module.scss

@@ -5,6 +5,7 @@
 .content {
   flex: 1;
   padding: 32px 20px;
+  padding-bottom: 80px;
   min-width: 660px;
   max-width: 760px;
   width: 75%;