B2B-2150 fix types and simplify getFilterMoreList within ShippingLists (

#249)
bigcommerce · Feb 24, 2025 · 5d91986 · 5d91986
1 parent 10c2cc1
commit 5d91986
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 141 deletions.
diff --git a/apps/storefront/src/pages/ShoppingLists/ShoppingStatus.tsx b/apps/storefront/src/pages/ShoppingLists/ShoppingStatus.tsx
@@ -1,53 +1,47 @@
-import { useB3Lang } from '@b3/lang';
-
 import { B3Tag } from '@/components';
 import { rolePermissionSelector, useAppSelector } from '@/store';
 
-import { getFilterShoppingListStatus } from './config';
+import { useGetFilterShoppingListStatus } from './config';
 
-interface NewStatusProps {
-  label: string;
-  value: string | number;
-  color: string;
-  textColor: string;
-  idLang: string;
-}
+export const useGetStatus = () => {
+  const getFilterShoppingListStatus = useGetFilterShoppingListStatus();
 
-export const getStatus = (submitShoppingListPermission: boolean) => {
-  const statusArr = getFilterShoppingListStatus(submitShoppingListPermission);
+  return (submitShoppingListPermission: boolean) => {
+    const statusArr = getFilterShoppingListStatus(submitShoppingListPermission);
 
-  const newStatus: Array<NewStatusProps> = statusArr.map((item) => {
-    if (Number(item.value) === 0) {
-      return {
-        color: '#C4DD6C',
-        textColor: 'black',
-        ...item,
-      };
-    }
+    const newStatus = statusArr.map((item) => {
+      if (Number(item.value) === 0) {
+        return {
+          color: '#C4DD6C',
+          textColor: 'black',
+          ...item,
+        };
+      }
 
-    if (Number(item.value) === 40) {
-      return {
-        color: '#F4CC46',
-        textColor: 'black',
-        ...item,
-      };
-    }
+      if (Number(item.value) === 40) {
+        return {
+          color: '#F4CC46',
+          textColor: 'black',
+          ...item,
+        };
+      }
 
-    if (Number(item.value) === 30) {
+      if (Number(item.value) === 30) {
+        return {
+          color: '#899193',
+          textColor: '#FFFFFF',
+          ...item,
+        };
+      }
       return {
-        color: '#899193',
+        color: '#7A6041',
         textColor: '#FFFFFF',
         ...item,
       };
-    }
-    return {
-      color: '#7A6041',
-      textColor: '#FFFFFF',
-      ...item,
-    };
-  });
+    });
 
-  return newStatus;
+    return newStatus;
+  };
 };
 
 interface ShoppingStatusProps {
@@ -56,17 +50,15 @@ interface ShoppingStatusProps {
 
 export function ShoppingStatus({ status }: ShoppingStatusProps) {
   const { submitShoppingListPermission } = useAppSelector(rolePermissionSelector);
+  const getStatus = useGetStatus();
 
-  const b3Lang = useB3Lang();
   const statusList = getStatus(submitShoppingListPermission);
-  const statusItem = statusList.find(
-    (item: NewStatusProps) => Number(item.value) === Number(status),
-  );
+  const statusItem = statusList.find((item) => Number(item.value) === Number(status));
 
   if (statusItem) {
     return (
       <B3Tag color={statusItem.color} textColor={statusItem.textColor}>
-        {b3Lang(statusItem.idLang)}
+        {statusItem.label}
       </B3Tag>
     );
   }

diff --git a/apps/storefront/src/pages/ShoppingLists/config.ts b/apps/storefront/src/pages/ShoppingLists/config.ts
@@ -1,4 +1,4 @@
-import { LangFormatFunction } from '@b3/lang';
+import { LangFormatFunction, useB3Lang } from '@b3/lang';
 
 import { CompanyInfoTypes } from '@/types';
 
@@ -57,86 +57,68 @@ export interface GetFilterMoreListProps {
   idLang?: string;
 }
 
-export const getFilterShoppingListStatus = (
-  submitShoppingListPermission: boolean,
-): Array<ShoppingListStatusProps> => {
-  const shoppingListStatus: Array<ShoppingListStatusProps> = [
-    {
-      label: 'All',
-      value: 99,
-      idLang: 'global.shoppingLists.status.all',
-    },
-    {
-      label: 'Approved',
-      value: 0,
-      idLang: 'global.shoppingLists.status.approved',
-    },
-    {
-      label: 'Draft',
-      value: 30,
-      idLang: 'global.shoppingLists.status.draft',
-    },
-    {
-      label: 'Ready for approval',
-      value: 40,
-      idLang: 'global.shoppingLists.status.readyForApproval',
-    },
-    {
-      label: 'Rejected',
-      value: 20,
-      idLang: 'global.shoppingLists.status.rejected',
-    },
-  ];
+export const useGetFilterShoppingListStatus = () => {
+  const b3Lang = useB3Lang();
 
-  const getShoppingListStatus = !submitShoppingListPermission
-    ? shoppingListStatus.filter(
-        (item: ShoppingListStatusProps) => item.value !== 30 && item.value !== 20,
-      )
-    : shoppingListStatus;
+  return (submitShoppingListPermission: boolean) => {
+    const draftStatus = { value: 30, label: b3Lang('global.shoppingLists.status.draft') };
+    const rejectedStatus = { value: 20, label: b3Lang('global.shoppingLists.status.rejected') };
 
-  return getShoppingListStatus;
+    return [
+      { value: 99, label: b3Lang('global.shoppingLists.status.all') },
+      { value: 0, label: b3Lang('global.shoppingLists.status.approved') },
+      ...(submitShoppingListPermission ? [draftStatus] : []),
+      { value: 40, label: b3Lang('global.shoppingLists.status.readyForApproval') },
+      ...(submitShoppingListPermission ? [rejectedStatus] : []),
+    ];
+  };
 };
 
-export const getFilterMoreList = (
-  createdByUsers: any,
-  submitShoppingListPermission: boolean,
-): GetFilterMoreListProps[] => {
-  const newCreatedByUsers =
-    createdByUsers?.createdByUser?.results.map((item: any) => ({
-      createdBy: `${item.firstName} ${item.lastName} (${item.email})`,
-    })) || [];
-  const filterMoreList = [
-    {
-      name: 'createdBy',
-      label: 'Created by',
-      required: false,
-      default: '',
-      fieldType: 'dropdown',
-      options: newCreatedByUsers,
-      replaceOptions: {
-        label: 'createdBy',
-        value: 'createdBy',
-      },
-      xs: 12,
-      variant: 'filled',
-      size: 'small',
-      idLang: 'global.shoppingLists.filter.createdBy',
-    },
-    {
-      name: 'status',
-      label: 'Status',
-      required: false,
-      default: '',
-      fieldType: 'dropdown',
-      options: getFilterShoppingListStatus(submitShoppingListPermission),
-      xs: 12,
-      variant: 'filled',
-      size: 'small',
-      idLang: 'global.shoppingLists.filter.status',
-    },
-  ];
+interface CreatedByUsers {
+  createdByUser?: {
+    results: Array<{ firstName: string; lastName: string; email: string }>;
+  };
+}
+
+export const useGetFilterMoreList = () => {
+  const b3Lang = useB3Lang();
+  const getFilterShoppingListStatus = useGetFilterShoppingListStatus();
 
-  return filterMoreList;
+  return (submitShoppingListPermission: boolean, createdByUsers: CreatedByUsers) => {
+    const newCreatedByUsers =
+      createdByUsers?.createdByUser?.results.map((item) => ({
+        createdBy: `${item.firstName} ${item.lastName} (${item.email})`,
+      })) || [];
+
+    return [
+      {
+        name: 'createdBy',
+        required: false,
+        default: '',
+        fieldType: 'dropdown',
+        options: newCreatedByUsers,
+        replaceOptions: {
+          label: 'createdBy',
+          value: 'createdBy',
+        },
+        xs: 12,
+        variant: 'filled',
+        size: 'small',
+        label: b3Lang('global.shoppingLists.filter.createdBy'),
+      },
+      {
+        name: 'status',
+        required: false,
+        default: '',
+        fieldType: 'dropdown',
+        options: getFilterShoppingListStatus(submitShoppingListPermission),
+        xs: 12,
+        variant: 'filled',
+        size: 'small',
+        label: b3Lang('global.shoppingLists.filter.status'),
+      },
+    ];
+  };
 };
 
 export const getCreatedShoppingListFiles = (

diff --git a/apps/storefront/src/pages/ShoppingLists/index.tsx b/apps/storefront/src/pages/ShoppingLists/index.tsx
@@ -19,7 +19,7 @@ import { isB2BUserSelector, rolePermissionSelector, useAppSelector } from '@/sto
 import { channelId, snackbar } from '@/utils';
 
 import AddEditShoppingLists from './AddEditShoppingLists';
-import { getFilterMoreList, ShoppingListSearch, ShoppingListsItemsProps } from './config';
+import { ShoppingListSearch, ShoppingListsItemsProps, useGetFilterMoreList } from './config';
 import ShoppingListsCard from './ShoppingListsCard';
 
 interface RefCurrentProps extends HTMLInputElement {
@@ -54,6 +54,7 @@ function ShoppingLists() {
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const [deleteItem, setDeleteItem] = useState<null | ShoppingListsItemsProps>(null);
   const [filterMoreInfo, setFilterMoreInfo] = useState<Array<any>>([]);
+  const getFilterMoreList = useGetFilterMoreList();
 
   const [isMobile] = useMobile();
   const b3Lang = useB3Lang();
@@ -75,29 +76,9 @@ function ShoppingLists() {
 
   useEffect(() => {
     const initFilter = async () => {
-      const createdByUsers = await getUserShoppingLists();
-
-      const filterInfo = getFilterMoreList(createdByUsers, submitShoppingListPermission);
-
-      const translatedFilterInfo = JSON.parse(JSON.stringify(filterInfo));
-
-      translatedFilterInfo.forEach(
-        (element: { label: string; idLang: any; name: string; options: any[] }) => {
-          const translatedInfo = element;
-          translatedInfo.label = b3Lang(element.idLang);
-          if (element.name === 'status') {
-            element.options?.map((option) => {
-              const elementOption = option;
-              elementOption.label = b3Lang(option.idLang);
-              return option;
-            });
-          }
-
-          return element;
-        },
+      setFilterMoreInfo(
+        getFilterMoreList(submitShoppingListPermission, await getUserShoppingLists()),
       );
-
-      setFilterMoreInfo(translatedFilterInfo);
     };
 
     initFilter();