fix: import accounts issue

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

@@ -23,9 +23,14 @@
     }
 
     tr td{
-      :global(.bp4-popover-target .bp4-button){
+      :global(.bp4-popover-target .bp4-button),
+      :global(.bp4-popover-wrapper){
         max-width: 250px;
       }
     }
   }
+}
+
+.requiredSign{
+  color: rgb(250, 82, 82);
 }

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

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import clsx from 'classnames';
-import { Button, Intent } from '@blueprintjs/core';
+import { Button, Intent, Position } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FSelect, Group } from '@/components';
+import { FSelect, Group, Hint } from '@/components';
 import { ImportFileMappingForm } from './ImportFileMappingForm';
-import { useImportFileContext } from './ImportFileProvider';
+import { EntityColumn, useImportFileContext } from './ImportFileProvider';
 import { CLASSES } from '@/constants';
 import { ImportFileContainer } from './ImportFileContainer';
 import styles from './ImportFileMapping.module.scss';
@@ -44,21 +44,29 @@ function ImportFileMappingFields() {
     () => sheetColumns.map((column) => ({ value: column, text: column })),
     [sheetColumns],
   );
-
-  const columns = entityColumns.map((column, index) => (
+  const columnMapper = (column: EntityColumn, index: number) => (
     <tr key={index}>
-      <td className={styles.label}>{column.name}</td>
+      <td className={styles.label}>
+        {column.name}{' '}
+        {column.required && <span className={styles.requiredSign}>*</span>}
+      </td>
       <td className={styles.field}>
-        <FSelect
-          name={column.key}
-          items={items}
-          popoverProps={{ minimal: true }}
-          minimal={true}
-          fill={true}
-        />
+        <Group spacing={4}>
+          <FSelect
+            name={column.key}
+            items={items}
+            popoverProps={{ minimal: true }}
+            minimal={true}
+            fill={true}
+          />
+          {column.hint && (
+            <Hint content={column.hint} position={Position.BOTTOM} />
+          )}
+        </Group>
       </td>
     </tr>
-  ));
+  );
+  const columns = entityColumns.map(columnMapper);
   return <>{columns}</>;
 }
 

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

@@ -4,7 +4,7 @@ import { useImportFileMapping } from '@/hooks/query/import';
 import { Form, Formik, FormikHelpers } from 'formik';
 import { useImportFileContext } from './ImportFileProvider';
 import { useMemo } from 'react';
-import { isEmpty } from 'lodash';
+import { isEmpty, lowerCase } from 'lodash';
 import { AppToaster } from '@/components';
 
 interface ImportFileMappingFormProps {
@@ -34,21 +34,18 @@ export function ImportFileMappingForm({
         setStep(2);
       })
       .catch(({ response: { data } }) => {
-        if (data.errors.find(e => e.type === "DUPLICATED_FROM_MAP_ATTR")) {
+        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
-          })
+            intent: Intent.DANGER,
+          });
         }
         setSubmitting(false);
       });
   };
 
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-    >
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       <Form>{children}</Form>
     </Formik>
   );
@@ -62,14 +59,20 @@ const transformValueToReq = (value: ImportFileMappingFormValues) => {
 };
 
 const useImportFileMappingInitialValues = () => {
-  const { entityColumns } = useImportFileContext();
+  const { entityColumns, sheetColumns } = useImportFileContext();
 
   return useMemo(
     () =>
       entityColumns.reduce((acc, { key, name }) => {
-        acc[key] = '';
+        const _name = lowerCase(name);
+        const _matched = sheetColumns.find(
+          (column) => lowerCase(column) === _name,
+        );
+        // Match the default column name the same field name
+        // if matched one of sheet columns has the same field name.
+        acc[key] = _matched ? _matched : '';
         return acc;
       }, {}),
-    [entityColumns],
+    [entityColumns, sheetColumns],
   );
 };

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

@@ -83,6 +83,9 @@ function ImportFilePreviewImported() {
 function ImportFilePreviewSkipped() {
   const { importPreview } = useImportFilePreviewBootContext();
 
+  // Can't continue if there's no skipped items.
+  if (importPreview.skippedCount <= 0) return null;
+
   return (
     <Section
       collapseProps={{ defaultIsOpen: false }}
@@ -120,6 +123,9 @@ function ImportFilePreviewSkipped() {
 function ImportFilePreviewUnmapped() {
   const { importPreview } = useImportFilePreviewBootContext();
 
+  // Can't continue if there's no unmapped columns.
+  if (importPreview?.unmappedColumnsCount <= 0) return null;
+
   return (
     <Section
       collapseProps={{ defaultIsOpen: false }}

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

@@ -1,6 +1,7 @@
-import { useImportFilePreview } from '@/hooks/query/import';
-import { transformToCamelCase } from '@/utils';
+import { Spinner } from '@blueprintjs/core';
 import React, { createContext, useContext } from 'react';
+import { Box } from '@/components';
+import { useImportFilePreview } from '@/hooks/query/import';
 
 interface ImportFilePreviewBootContextValue {}
 
@@ -46,7 +47,13 @@ export const ImportFilePreviewBootProvider = ({
   };
   return (
     <ImportFilePreviewBootContext.Provider value={value}>
-      {isImportPreviewLoading ? 'loading' : <>{children}</>}
+      {isImportPreviewLoading ? (
+        <Box style={{ padding: '2rem', textAlign: 'center' }}>
+          <Spinner size={26} />
+        </Box>
+      ) : (
+        <>{children}</>
+      )}
     </ImportFilePreviewBootContext.Provider>
   );
 };

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

@@ -7,9 +7,14 @@ import React, {
   useState,
 } from 'react';
 
-type EntityColumn = { key: string; name: string };
-type SheetColumn = string;
-type SheetMap = { from: string; to: string };
+export type EntityColumn = {
+  key: string;
+  name: string;
+  required?: boolean;
+  hint?: string;
+};
+export type SheetColumn = string;
+export type SheetMap = { from: string; to: string };
 
 interface ImportFileContextValue {
   sheetColumns: SheetColumn[];