feat: quote deatil checkout and download pdf func

bigcommerce · Feb 3, 2023 · a0ef3ca · a0ef3ca
1 parent 6525445
commit a0ef3ca
Show file tree

Hide file tree

Showing 12 changed files with 207 additions and 70 deletions.
diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
@@ -22,6 +22,7 @@ import {
   B3SStorage,
   snackbar,
   isAllRequiredOptionFilled,
+  getDefaultCurrencyInfo,
 } from '@/utils'
 
 import {
@@ -173,17 +174,6 @@ const PDP = ({
       const sku = (document.querySelector('[data-product-sku]')?.innerHTML ?? '').trim()
       const form = document.querySelector('form[data-cart-item-add]')
 
-      const getDefaultCurrencyInfo = () => {
-        const currencies = B3SStorage.get('currencies')
-        if (currencies) {
-          const {
-            currencies: currencyArr,
-          } = currencies
-          const defaultCurrency = currencyArr.find((currency: any) => currency.is_default)
-          return defaultCurrency
-        }
-      }
-
       const {
         currency_code: currencyCode,
       } = getDefaultCurrencyInfo()

diff --git a/apps/storefront/src/pages/quote/QuoteDetail.tsx b/apps/storefront/src/pages/quote/QuoteDetail.tsx
@@ -25,6 +25,7 @@ import {
   getB2BQuoteDetail,
   getBcQuoteDetail,
   exportB2BQuotePdf,
+  exportBcQuotePdf,
 } from '@/shared/service/b2b'
 
 import {
@@ -139,8 +140,9 @@ const QuoteDetail = () => {
         },
       }
 
-      const quotePdf = await exportB2BQuotePdf(data)
+      const fn = +role === 99 ? exportBcQuotePdf : exportB2BQuotePdf
 
+      const quotePdf = await fn(data)
       if (quotePdf) {
         window.open(`${quotePdf.quotePdfExport.url}`, '_blank')
       }
@@ -346,6 +348,7 @@ const QuoteDetail = () => {
             <QuoteDetailFooter
               quoteId={quoteDetail.id}
               quoteDate={quoteDetail?.createdAt?.toString()}
+              role={role}
             />
           )
         }

diff --git a/apps/storefront/src/pages/quote/QuoteDraft.tsx b/apps/storefront/src/pages/quote/QuoteDraft.tsx
@@ -42,6 +42,7 @@ import {
   storeHash,
   addQuoteDraftProduce,
   snackbar,
+  getDefaultCurrencyInfo,
 } from '@/utils'
 
 import {
@@ -305,19 +306,6 @@ const QuoteDraft = ({
     setEdit(true)
   }
 
-  const getDefaultCurrencyInfo = () => {
-    const currencies = B3SStorage.get('currencies')
-    if (currencies) {
-      const {
-        currencies: currencyArr,
-      } = currencies
-
-      const defaultCurrency = currencyArr.find((currency: CustomFieldItems) => currency.is_default)
-
-      return defaultCurrency
-    }
-  }
-
   const {
     token: currencyToken,
   } = getDefaultCurrencyInfo()
@@ -467,17 +455,6 @@ const QuoteDraft = ({
         return items
       })
 
-      const getDefaultCurrencyInfo = () => {
-        const currencies = B3SStorage.get('currencies')
-        if (currencies) {
-          const {
-            currencies: currencyArr,
-          } = currencies
-          const defaultCurrency = currencyArr.find((currency: any) => currency.is_default)
-          return defaultCurrency
-        }
-      }
-
       const currency = getDefaultCurrencyInfo()
 
       const data = {

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailFooter.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailFooter.tsx
@@ -1,6 +1,3 @@
-import {
-  useNavigate,
-} from 'react-router-dom'
 import {
   Box,
   Button,
@@ -10,18 +7,28 @@ import {
   useMobile,
 } from '@/hooks'
 
+import {
+  b2bQuoteCheckout,
+  bcQuoteCheckout,
+} from '@/shared/service/b2b'
+
+import {
+  snackbar,
+} from '@/utils'
+
 interface QuoteDetailFooterProps {
   quoteId: string,
   quoteDate: string,
+  role: string | number,
 }
 
 const QuoteDetailFooter = (props: QuoteDetailFooterProps) => {
   const {
     quoteId,
     quoteDate,
+    role,
   } = props
   const [isMobile] = useMobile()
-  const navigate = useNavigate()
 
   const containerStyle = isMobile ? {
     alignItems: 'flex-end',
@@ -30,6 +37,30 @@ const QuoteDetailFooter = (props: QuoteDetailFooterProps) => {
     alignItems: 'center',
   }
 
+  const handleQuoteCheckout = async () => {
+    try {
+      const fn = +role === 99 ? bcQuoteCheckout : b2bQuoteCheckout
+
+      const res = await fn({
+        id: +quoteId,
+      })
+
+      const {
+        quoteCheckout: {
+          quoteCheckout: {
+            checkoutUrl,
+          },
+        },
+      } = res
+      localStorage.setItem('quoteCheckoutId', quoteId)
+      localStorage.setItem('quoteDate', quoteDate)
+
+      window.location.href = checkoutUrl
+    } catch (err: any) {
+      snackbar.error(err)
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -41,7 +72,7 @@ const QuoteDetailFooter = (props: QuoteDetailFooterProps) => {
         padding: '0.8rem 1rem',
         height: 'auto',
         display: 'flex',
-        zIndex: '10',
+        zIndex: '999',
         justifyContent: isMobile ? 'center' : 'flex-end',
         displayPrint: 'none',
         ...containerStyle,
@@ -50,9 +81,7 @@ const QuoteDetailFooter = (props: QuoteDetailFooterProps) => {
       <Button
         variant="contained"
         onClick={() => {
-          navigate('/checkout')
-          localStorage.setItem('quoteCheckoutId', quoteId)
-          localStorage.setItem('quoteDate', quoteDate)
+          handleQuoteCheckout()
         }}
         sx={{
           width: isMobile ? '100%' : 'auto',

diff --git a/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx b/apps/storefront/src/pages/quote/components/QuoteDetailTable.tsx
@@ -185,16 +185,40 @@ const QuoteDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) =>
       key: 'Price',
       title: 'Price',
       render: (row) => {
-        const price = +row.basePrice
+        const {
+          basePrice,
+          discount,
+        } = row
+
+        const price = +basePrice
+        const isDiscount = +discount > 0
+        const offeredPrice = +basePrice - +discount
 
         return (
-          <Typography
-            sx={{
-              padding: '12px 0',
-            }}
-          >
-            {`${currencyToken}${price.toFixed(2)}`}
-          </Typography>
+          <>
+            {
+              isDiscount && (
+                <Typography
+                  sx={{
+                    padding: '12px 0',
+                    textDecoration: 'line-through',
+                  }}
+                >
+                  {`${currencyToken}${price.toFixed(2)}`}
+                </Typography>
+              )
+            }
+
+            <Typography
+              sx={{
+                padding: '12px 0',
+                color: isDiscount ? '#2E7D32' : '#212121',
+              }}
+            >
+              {`${currencyToken}${offeredPrice.toFixed(2)}`}
+            </Typography>
+
+          </>
         )
       },
       width: '15%',
@@ -220,17 +244,35 @@ const QuoteDetailTable = (props: ShoppingDetailTableProps, ref: Ref<unknown>) =>
         const {
           basePrice,
           quantity,
+          discount,
         } = row
         const total = +basePrice * +quantity
+        const offeredPrice = +basePrice - +discount
+
+        const isDiscount = +discount > 0
+        const totalWithDiscount = +offeredPrice * +quantity
 
         return (
           <Box>
+            {
+              isDiscount && (
+                <Typography
+                  sx={{
+                    padding: '12px 0',
+                    textDecoration: 'line-through',
+                  }}
+                >
+                  {`${currencyToken}${total.toFixed(2)}`}
+                </Typography>
+              )
+            }
             <Typography
               sx={{
                 padding: '12px 0',
+                color: isDiscount ? '#2E7D32' : '#212121',
               }}
             >
-              {`${currencyToken}${total.toFixed(2)}`}
+              {`${currencyToken}${totalWithDiscount.toFixed(2)}`}
             </Typography>
           </Box>
         )

diff --git a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -36,15 +36,14 @@ import {
 
 import {
   snackbar,
-  B3SStorage,
+  getDefaultCurrencyInfo,
 } from '@/utils'
 
 import {
   conversionProductsList,
   ShoppingListInfoProps,
   CustomerInfoProps,
   ListItemProps,
-  CurrencyProps,
   SearchProps,
   ProductsProps,
 } from './shared/config'
@@ -108,19 +107,6 @@ const ShoppingListDetails = () => {
 
   const isReadForApprove = shoppingListInfo?.status === 40 || shoppingListInfo?.status === 20
 
-  const getDefaultCurrencyInfo = () => {
-    const currencies = B3SStorage.get('currencies')
-    if (currencies) {
-      const {
-        currencies: currencyArr,
-      } = currencies
-
-      const defaultCurrency = currencyArr.find((currency: CurrencyProps) => currency.is_default)
-
-      return defaultCurrency
-    }
-  }
-
   const {
     currency_code: currencyCode,
     token: currencyToken,

diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
@@ -42,6 +42,31 @@ export interface Country {
   states: State[]
 }
 
+export interface channelCurrenciesProps {
+  channel_id: number,
+  default_currency: string,
+  enabled_currencies: Array<string>,
+}
+
+export interface currencyProps {
+  auto_update: boolean,
+  country_iso2: string,
+  currency_code: string,
+  currency_exchange_rate: string,
+  decimal_places: number,
+  decimal_token: string,
+  default_for_country_codes: Array<string>,
+  enabled: boolean,
+  id: string,
+  is_default: boolean,
+  is_transactional: boolean,
+  last_updated: string,
+  name: string,
+  thousands_token: string,
+  token: string,
+  token_location: string,
+}
+
 export interface GlobalState {
   isCheckout: boolean,
   isCloseGotoBCHome: boolean,
@@ -99,6 +124,10 @@ export interface GlobalState {
     saveText?: string,
     saveFn?: () => void,
   },
+  currencies: {
+    channelCurrencies: channelCurrenciesProps,
+    currencies: currencyProps,
+  },
 }
 
 const role = B3SStorage.get('B3Role')
@@ -151,6 +180,7 @@ export const initState = {
     message: '',
     cancelText: 'Cancel',
   },
+  currencies: B3SStorage.get('currencies') || {},
 }
 
 export interface GlobalAction {

diff --git a/apps/storefront/src/shared/service/b2b/graphql/quote.ts b/apps/storefront/src/shared/service/b2b/graphql/quote.ts
@@ -282,6 +282,21 @@ const exportQuotePdf = (data: {
   }
 }`
 
+const quoteCheckout = (data: {
+  id: number,
+}) => `mutation{
+  quoteCheckout(
+    id: ${data.id},
+    storeHash: "${storeHash}",
+  ) {
+    quoteCheckout {
+      checkoutUrl,
+      cartId,
+      cartUrl,
+    }
+  }
+}`
+
 export const getBCCustomerAddresses = (): CustomFieldItems => B3Request.graphqlProxyBC({
   query: getCustomerAddresses(),
 })
@@ -317,3 +332,15 @@ export const getBcQuoteDetail = (data: { id: number, date: string }): CustomFiel
 export const exportB2BQuotePdf = (data: { quoteId: number, currency: object }): CustomFieldItems => B3Request.graphqlB2B({
   query: exportQuotePdf(data),
 })
+
+export const exportBcQuotePdf = (data: { quoteId: number, currency: object }): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: exportQuotePdf(data),
+})
+
+export const b2bQuoteCheckout = (data: { id: number }): CustomFieldItems => B3Request.graphqlB2B({
+  query: quoteCheckout(data),
+})
+
+export const bcQuoteCheckout = (data: { id: number }): CustomFieldItems => B3Request.graphqlProxyBC({
+  query: quoteCheckout(data),
+})