feat: add shippingLists

apps/storefront/src/App.tsx

@@ -103,6 +103,21 @@ export default function App() {
     })
   }
 
+  const setStorefrontConfig = async () => {
+    const {
+      storefrontConfig: {
+        config: storefrontConfig,
+      },
+    } = await getStorefrontConfig()
+
+    dispatch({
+      type: 'common',
+      payload: {
+        storefrontConfig,
+      },
+    })
+  }
+
   useEffect(() => {
     const {
       pathname,
@@ -158,6 +173,7 @@ export default function App() {
         await loginInfo()
       }
       await setLogo()
+      await setStorefrontConfig()
       if (!customerId) {
         const data = await getCurrentCustomerInfo(dispatch)
         if (data) gotoPage(data.role)
@@ -168,25 +184,6 @@ export default function App() {
     init()
   }, [])
 
-  useEffect(() => {
-    const init = async () => {
-      const {
-        storefrontConfig: {
-          config: storefrontConfig,
-        },
-      } = await getStorefrontConfig()
-
-      dispatch({
-        type: 'common',
-        payload: {
-          storefrontConfig,
-        },
-      })
-    }
-
-    init()
-  }, [])
-
   const createConvertB2BNavNode = () => {
     const convertB2BNavNode = document.createElement('li')
     convertB2BNavNode.className = 'navUser-item navUser-convert-b2b'

apps/storefront/src/components/index.ts

@@ -29,6 +29,10 @@ export {
   B3Table,
 } from './table/B3Table'
 
+export {
+  B3PaginationTable,
+} from './table/B3PaginationTable'
+
 export {
   B3Dialog,
 } from './B3Dialog'

apps/storefront/src/components/table/B3PaginationTable.tsx

@@ -25,11 +25,10 @@ export interface TableColumnItem<T> {
   render?: (item: T, index: number) => ReactNode,
 }
 
-interface B3PaginationTableProps<T, Y, K> {
+interface B3PaginationTableProps<T, Y> {
   tableFixed?: boolean,
   tableHeaderHide?: boolean,
-  columnItems: TableColumnItem<T>[],
-  listItems: Array<any>,
+  columnItems?: TableColumnItem<T>[],
   itemSpacing?: number,
   itemXs?: number,
   pagination?: TablePagination,
@@ -43,12 +42,13 @@ interface B3PaginationTableProps<T, Y, K> {
   infiniteScrollHeight?: string,
   noDataText?: string,
   tableKey?: string,
-  getRequestList: (params: Y) => Promise<any>,
+  getRequestList: (params: Y) => CustomFieldItems,
   searchParams: Y,
-  arr: K
+  requestKey: string,
+  requestLoading?: (bool: boolean) => void,
 }
 
-export const B3PaginationTable:<T, Y, K>(props: B3PaginationTableProps<T, Y, K>) => ReactElement = ({
+export const B3PaginationTable:<T, Y>(props: B3PaginationTableProps<T, Y>) => ReactElement = ({
   columnItems,
   isCustomRender = false,
   tableKey,
@@ -65,6 +65,8 @@ export const B3PaginationTable:<T, Y, K>(props: B3PaginationTableProps<T, Y, K>)
   infiniteScrollHeight,
   getRequestList,
   searchParams,
+  requestKey,
+  requestLoading,
 }) => {
   const initPagination = {
     offset: 0,
@@ -77,22 +79,23 @@ export const B3PaginationTable:<T, Y, K>(props: B3PaginationTableProps<T, Y, K>)
 
   const [count, setAllCount] = useState<number>(0)
 
-  const [list, setList] = useState<any>([])
+  const [list, setList] = useState<any[]>([])
 
   const [isMobile] = useMobile()
 
   const fetchList = async (isInitPagination = false) => {
     try {
       setLoading(true)
+      if (requestLoading) requestLoading(true)
       const params = {
         ...searchParams,
         first: pagination.first,
         offset: isInitPagination ? 0 : pagination.offset,
       }
-
+      const requestList = await getRequestList(params)
       const {
         edges, totalCount,
-      } = await getRequestList(params)
+      } = requestList[requestKey]
 
       if (isMobile) {
         const newList = pagination.offset > 0 ? [...list, ...edges] : [...edges]
@@ -104,6 +107,7 @@ export const B3PaginationTable:<T, Y, K>(props: B3PaginationTableProps<T, Y, K>)
       setAllCount(totalCount)
     } finally {
       setLoading(false)
+      if (requestLoading) requestLoading(false)
     }
   }
 
@@ -126,7 +130,7 @@ export const B3PaginationTable:<T, Y, K>(props: B3PaginationTableProps<T, Y, K>)
 
   return (
     <B3Table
-      columnItems={columnItems}
+      columnItems={columnItems || []}
       listItems={list}
       pagination={tablePagination}
       rowsPerPageOptions={rowsPerPageOptions}

apps/storefront/src/pages/accountSetting/AccountSetting.tsx

@@ -0,0 +1,70 @@
+import {
+  Box,
+  Button,
+} from '@mui/material'
+
+import {
+  useForm,
+} from 'react-hook-form'
+
+import {
+  B3CustomForm,
+} from '@/components'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+// import {
+//   snackbar,
+// } from '@/utils'
+
+import {
+  getAccountSettingFiles,
+} from './config'
+
+const AccountSetting = () => {
+  const {
+    control,
+    handleSubmit,
+    getValues,
+    formState: {
+      errors,
+    },
+    setValue,
+  } = useForm({
+    mode: 'onSubmit',
+  })
+
+  const [isMobile] = useMobile()
+
+  const handleAddUserClick = () => {
+    handleSubmit(async (data) => {
+      console.log(data)
+    })()
+  }
+
+  const xs = isMobile ? 12 : 6
+
+  const accountSettingFiles = getAccountSettingFiles(xs, true)
+  return (
+    <Box>
+      <B3CustomForm
+        formFields={accountSettingFiles}
+        errors={errors}
+        control={control}
+        getValues={getValues}
+        setValue={setValue}
+      />
+
+      <Button
+        onClick={handleAddUserClick}
+        variant="contained"
+      >
+        update details
+      </Button>
+    </Box>
+  )
+}
+
+export default AccountSetting

apps/storefront/src/pages/accountSetting/config.ts

@@ -0,0 +1,135 @@
+interface ShippingListStatusProps {
+  label: string
+  value: number
+}
+
+export interface GetFilterMoreListProps {
+  options?: Array<ShippingListStatusProps>
+  rows?: string | number,
+  name: string
+  label: string
+  required: boolean
+  default: string
+  fieldType: string
+  xs: number
+  variant: string
+  size: string
+}
+
+export const getAccountSettingFiles = (xs: number, isB2BUser?: boolean): GetFilterMoreListProps[] => {
+  const accountFormFields = [
+    {
+      name: 'firstName',
+      label: 'First Name',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'lastName',
+      label: 'Last Name',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'company',
+      label: 'Company',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'phoneNumber',
+      label: 'Phone Number',
+      required: false,
+      default: '',
+      fieldType: 'text',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'role',
+      label: 'Role',
+      required: false,
+      default: '',
+      fieldType: 'dropdown',
+      options: [
+        {
+          label: 'Admin',
+          value: 0,
+        },
+        {
+          label: 'Senior buyer',
+          value: 1,
+        },
+        {
+          label: 'Junior buyer',
+          value: 2,
+        },
+        {
+          label: 'Super admin',
+          value: 3,
+        },
+      ],
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'email',
+      label: 'Email Address',
+      required: true,
+      default: '',
+      fieldType: 'text',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'currentPassword',
+      label: 'Current Password',
+      required: false,
+      default: '',
+      fieldType: 'password',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'password',
+      label: 'Password',
+      required: false,
+      default: '',
+      fieldType: 'password',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+    {
+      name: 'confirmPassword',
+      label: 'Confirm Password',
+      required: false,
+      default: '',
+      fieldType: 'password',
+      xs,
+      variant: 'filled',
+      size: 'small',
+    },
+  ]
+
+  if (!isB2BUser) {
+    return accountFormFields.filter((item:GetFilterMoreListProps) => item.name !== 'role')
+  }
+  return accountFormFields
+}