feat: wip import resource UI

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

@@ -1,32 +1,36 @@
 import { useMemo } from 'react';
 import clsx from 'classnames';
+import { Button, Intent } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
 import { FSelect, Group } from '@/components';
 import { ImportFileMappingForm } from './ImportFileMappingForm';
 import { useImportFileContext } from './ImportFileProvider';
-import styles from './ImportFileMapping.module.scss';
 import { CLASSES } from '@/constants';
-import { Button, Intent } from '@blueprintjs/core';
-import { useFormikContext } from 'formik';
+import { ImportFileContainer } from './ImportFileContainer';
+import styles from './ImportFileMapping.module.scss';
+import { ImportStepperStep } from './_types';
 
 export function ImportFileMapping() {
   return (
     <ImportFileMappingForm>
-      <p>
-        Review and map the column headers in your csv/xlsx file with the
-        Bigcapital fields.
-      </p>
+      <ImportFileContainer>
+        <p>
+          Review and map the column headers in your csv/xlsx file with the
+          Bigcapital fields.
+        </p>
 
-      <table className={clsx('bp4-html-table', styles.table)}>
-        <thead>
-          <tr>
-            <th className={'label'}>Bigcapital Fields</th>
-            <th className={'field'}>Sheet Column Headers</th>
-          </tr>
-        </thead>
-        <tbody>
-          <ImportFileMappingFields />
-        </tbody>
-      </table>
+        <table className={clsx('bp4-html-table', styles.table)}>
+          <thead>
+            <tr>
+              <th className={styles.label}>Bigcapital Fields</th>
+              <th className={styles.field}>Sheet Column Headers</th>
+            </tr>
+          </thead>
+          <tbody>
+            <ImportFileMappingFields />
+          </tbody>
+        </table>
+      </ImportFileContainer>
 
       <ImportFileMappingFloatingActions />
     </ImportFileMappingForm>
@@ -43,14 +47,14 @@ function ImportFileMappingFields() {
 
   const columns = entityColumns.map((column, index) => (
     <tr key={index}>
-      <td className={'label'}>{column.name}</td>
-      <td className={'field'}>
+      <td className={styles.label}>{column.name}</td>
+      <td className={styles.field}>
         <FSelect
           name={column.key}
           items={items}
-          fill
-          popoverProps={{ minimal: false }}
-          minimal={false}
+          popoverProps={{ minimal: true }}
+          minimal={true}
+          fill={true}
         />
       </td>
     </tr>
@@ -60,14 +64,19 @@ function ImportFileMappingFields() {
 
 function ImportFileMappingFloatingActions() {
   const { isSubmitting } = useFormikContext();
+  const { setStep } = useImportFileContext();
+
+  const handleCancelBtnClick = () => {
+    setStep(ImportStepperStep.Upload);
+  };
 
   return (
     <div className={clsx(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Group>
+      <Group spacing={10}>
+        <Button onClick={handleCancelBtnClick}>Cancel</Button>
         <Button type="submit" intent={Intent.PRIMARY} loading={isSubmitting}>
           Next
         </Button>
-        <Button>Cancel</Button>
       </Group>
     </div>
   );