fix: set dialogs maxWidth

bigcommerce · Dec 27, 2022 · 32733e5 · 32733e5
1 parent da23f35
commit 32733e5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -43,6 +43,7 @@ interface B3DialogProps<T> {
   isShowBordered?: boolean
   showRightBtn?: boolean
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false
+  fullWidth?: boolean
 }
 
 export const B3Dialog:<T> ({
@@ -59,6 +60,7 @@ export const B3Dialog:<T> ({
   isShowBordered,
   showRightBtn,
   maxWidth,
+  fullWidth,
 }: B3DialogProps<T>) => ReactElement = ({
   customActions,
   isOpen,
@@ -75,6 +77,7 @@ export const B3Dialog:<T> ({
   isShowBordered = false,
   showRightBtn = true,
   maxWidth = 'sm',
+  fullWidth = false,
 }) => {
   const container = useRef<HTMLInputElement | null>(null)
 
@@ -107,6 +110,7 @@ export const B3Dialog:<T> ({
       />
 
       <Dialog
+        fullWidth={fullWidth}
         open={isOpen}
         container={container.current}
         onClose={handleCloseClick}

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -44,6 +44,8 @@ import {
   ShoppingListInfoProps,
   CustomerInfoProps,
   ListItemProps,
+  CurrencyProps,
+  SearchProps,
 } from './shared/config'
 
 import {
@@ -60,14 +62,12 @@ import ShoppingDetailFooter from './components/ShoppingDetailFooter'
 import ShoppingDetailTable from './components/ShoppingDetailTable'
 import ShoppingDetailDeleteItems from './components/ShoppingDetailDeleteItems'
 
+interface TableRefProps extends HTMLInputElement {
+  initSearch: () => void,
+}
+
 // shoppingList status: 0 -- Approved; 20 -- Rejected; 30 -- Draft; 40 -- Ready for approval
 // 0: Admin, 1: Senior buyer, 2: Junior buyer, 3: Super admin
-// const shoppingListStatus = {
-//   0: 'Approved',
-//   20: 'Rejected',
-//   30: 'Draft',
-//   40: 'Ready for approval',
-// }
 
 const ShoppingListDetails = () => {
   const {
@@ -87,9 +87,9 @@ const ShoppingListDetails = () => {
     dispatch,
   } = useContext(ShoppingListDetailsContext)
 
-  const tableRef = useRef<any>(null)
+  const tableRef = useRef<TableRefProps | null>(null)
 
-  const [checkedArr, setCheckedArr] = useState<any>([])
+  const [checkedArr, setCheckedArr] = useState<CustomFieldItems>([])
   const [shoppingListInfo, setShoppingListInfo] = useState<null | ShoppingListInfoProps>(null)
   const [customerInfo, setCustomerInfo] = useState<null | CustomerInfoProps>(null)
   const [selectedSubTotal, setSelectedSubTotal] = useState<number>(0.00)
@@ -107,7 +107,7 @@ const ShoppingListDetails = () => {
         currencies: currencyArr,
       } = currencies
 
-      const defaultCurrency = currencyArr.find((currency: any) => currency.is_default)
+      const defaultCurrency = currencyArr.find((currency: CurrencyProps) => currency.is_default)
 
       return defaultCurrency
     }
@@ -177,7 +177,7 @@ const ShoppingListDetails = () => {
     }
   }
 
-  const getShoppingListDetails = async (params: any) => {
+  const getShoppingListDetails = async (params: SearchProps) => {
     const {
       shoppingList,
       shoppingList: {
@@ -213,7 +213,7 @@ const ShoppingListDetails = () => {
       })
 
       snackbar.success('Shipping list status updated successfully')
-      tableRef.current.initSearch()
+      tableRef.current?.initSearch()
     } finally {
       setIsRequestLoading(false)
     }
@@ -256,14 +256,14 @@ const ShoppingListDetails = () => {
       }
 
       snackbar.success('Product removed from your shopping list')
-      tableRef.current.initSearch()
+      tableRef.current?.initSearch()
     } finally {
       setIsRequestLoading(false)
     }
   }
 
   const updateList = () => {
-    tableRef.current.initSearch()
+    tableRef.current?.initSearch()
   }
 
   useEffect(() => {

diff --git a/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx b/apps/storefront/src/pages/shoppingListDetails/components/ProductListDialog.tsx
@@ -169,6 +169,7 @@ export const ProductListDialog = (props: ProductListDialogProps) => {
 
   return (
     <B3Dialog
+      fullWidth
       isOpen={isOpen}
       handleLeftClick={handleCancelClicked}
       title="Add to list"

diff --git a/apps/storefront/src/pages/shoppingListDetails/shared/config.ts b/apps/storefront/src/pages/shoppingListDetails/shared/config.ts
@@ -53,6 +53,18 @@ export interface ListItemProps {
   node: ProductInfoProps,
 }
 
+export interface CurrencyProps {
+  is_default: boolean,
+  currency_code: string,
+  token: string,
+}
+
+export interface SearchProps {
+  search: string,
+  first?: number,
+  offset?: number,
+}
+
 const fieldTypes: CustomFieldItems = {
   text: 'text',
   numbers_only_text: 'number',