From a0ef3cafc6ca7e9f660821ca0aef2604a19aac6f Mon Sep 17 00:00:00 2001
From: "Brian.Jiang2021" <brian.jiang@bundleb2b.net>
Date: Thu, 2 Feb 2023 16:01:18 +0800
Subject: [PATCH] feat: quote deatil checkout and download pdf func

---
 apps/storefront/src/pages/pdp/PDP.tsx         | 12 +---
 .../src/pages/quote/QuoteDetail.tsx           |  5 +-
 .../storefront/src/pages/quote/QuoteDraft.tsx | 25 +-------
 .../quote/components/QuoteDetailFooter.tsx    | 45 +++++++++++---
 .../quote/components/QuoteDetailTable.tsx     | 60 ++++++++++++++++---
 .../ShoppingListDetails.tsx                   | 16 +----
 .../src/shared/global/context/config.ts       | 30 ++++++++++
 .../src/shared/service/b2b/graphql/quote.ts   | 27 +++++++++
 .../src/shared/service/b2b/index.ts           |  6 ++
 apps/storefront/src/utils/currencyUtils.ts    | 35 +++++++++++
 apps/storefront/src/utils/index.ts            |  5 ++
 apps/storefront/src/utils/loginInfo.ts        | 11 +++-
 12 files changed, 207 insertions(+), 70 deletions(-)
 create mode 100644 apps/storefront/src/utils/currencyUtils.ts

diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
index 87ba6d9a..97f1b2b5 100644
--- 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
index 2784c72a..8d8829c8 100644
--- 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
index 9c3f27e2..68c8bc91 100644
--- 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
index 7771652f..c4d574e2 100644
--- 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
index ca13c1e0..8d0991e4 100644
--- 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
index 509a3a83..8a2ad94d 100644
--- a/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
+++ b/apps/storefront/src/pages/shoppingListDetails/ShoppingListDetails.tsx
@@ -36,7 +36,7 @@ import {
 
 import {
   snackbar,
-  B3SStorage,
+  getDefaultCurrencyInfo,
 } from '@/utils'
 
 import {
@@ -44,7 +44,6 @@ import {
   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
index 41a275a9..59fd81c9 100644
--- 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
index edc0ea1c..8a290e55 100644
--- 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),
+})
diff --git a/apps/storefront/src/shared/service/b2b/index.ts b/apps/storefront/src/shared/service/b2b/index.ts
index 4c7e1743..cbd246b2 100644
--- a/apps/storefront/src/shared/service/b2b/index.ts
+++ b/apps/storefront/src/shared/service/b2b/index.ts
@@ -47,7 +47,10 @@ import {
   createBCQuote,
   getB2BQuoteDetail,
   exportB2BQuotePdf,
+  exportBcQuotePdf,
   getBcQuoteDetail,
+  b2bQuoteCheckout,
+  bcQuoteCheckout,
 } from './graphql/quote'
 
 import {
@@ -172,4 +175,7 @@ export {
   exportB2BQuotePdf,
   createBCQuote,
   getBcQuoteDetail,
+  b2bQuoteCheckout,
+  exportBcQuotePdf,
+  bcQuoteCheckout,
 }
diff --git a/apps/storefront/src/utils/currencyUtils.ts b/apps/storefront/src/utils/currencyUtils.ts
new file mode 100644
index 00000000..f470da91
--- /dev/null
+++ b/apps/storefront/src/utils/currencyUtils.ts
@@ -0,0 +1,35 @@
+import {
+  B3SStorage,
+} from '@/utils'
+
+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 const getDefaultCurrencyInfo = () => {
+  const currencies = B3SStorage.get('currencies')
+  if (currencies) {
+    const {
+      currencies: currencyArr,
+    } = currencies
+
+    const defaultCurrency = currencyArr.find((currency: currencyProps) => currency.is_default)
+
+    return defaultCurrency
+  }
+}
diff --git a/apps/storefront/src/utils/index.ts b/apps/storefront/src/utils/index.ts
index ca78856b..03b9355b 100644
--- a/apps/storefront/src/utils/index.ts
+++ b/apps/storefront/src/utils/index.ts
@@ -58,6 +58,10 @@ import {
   getProductOptionList,
 } from './b3AddToShoppingList'
 
+import {
+  getDefaultCurrencyInfo,
+} from './currencyUtils'
+
 export {
   addQuoteDraftProduce,
 } from './b3Product'
@@ -89,4 +93,5 @@ export {
   QuoteGlobalTip,
   getQuoteEnabled,
   getSearchVal,
+  getDefaultCurrencyInfo,
 }
diff --git a/apps/storefront/src/utils/loginInfo.ts b/apps/storefront/src/utils/loginInfo.ts
index 8cef6ee0..eed096ef 100644
--- a/apps/storefront/src/utils/loginInfo.ts
+++ b/apps/storefront/src/utils/loginInfo.ts
@@ -108,13 +108,20 @@ export const loginInfo = async () => {
   B3SStorage.set('BcToken', token)
 }
 
-export const getCurrenciesInfo = async () => {
+export const getCurrenciesInfo = async (dispatch: DispatchProps) => {
   const channelId = B3SStorage.get('B3channelId')
 
   const {
     currencies,
   } = await getCurrencies(channelId)
 
+  dispatch({
+    type: 'common',
+    payload: {
+      currencies,
+    },
+  })
+
   B3SStorage.set('currencies', currencies)
 }
 
@@ -231,7 +238,7 @@ export const getCurrentAgentInfo = async (customerId: number, role: number) => {
 
 export const getCurrentCustomerInfo = async (dispatch: DispatchProps) => {
   try {
-    await getCurrenciesInfo()
+    await getCurrenciesInfo(dispatch)
 
     const {
       data: {