feat: add Credit Availability

https://bigc-b2b.atlassian.net/browse/BUN-1295

apps/storefront/src/components/CompanyCredit.tsx

@@ -0,0 +1,62 @@
+import { useContext, useEffect, useState } from 'react'
+import { useB3Lang } from '@b3/lang'
+import { Alert, Box } from '@mui/material'
+
+import { GlobaledContext } from '@/shared/global'
+import { getCompanyCreditConfig } from '@/shared/service/b2b'
+import { B3SStorage } from '@/utils'
+
+function CompanyCredit() {
+  const {
+    state: { role, isAgenting },
+  } = useContext(GlobaledContext)
+
+  const permissionRoles = [0, 1, 2]
+
+  const [isEnabled, setEnabled] = useState<boolean>(false)
+
+  const b3Lang = useB3Lang()
+
+  useEffect(() => {
+    const init = async () => {
+      const isCloseCompanyCredit = B3SStorage.get('isCloseCompanyCredit')
+
+      if (isCloseCompanyCredit) return
+
+      if (permissionRoles.includes(+role) || (+role === 3 && isAgenting)) {
+        const {
+          companyCreditConfig: { creditHold, creditEnabled },
+        } = await getCompanyCreditConfig()
+
+        setEnabled(creditHold && creditEnabled)
+      }
+    }
+
+    init()
+  }, [role, isAgenting])
+
+  const handleCompanyCreditCloseClick = () => {
+    B3SStorage.set('isCloseCompanyCredit', true)
+    setEnabled(false)
+  }
+
+  if (!isEnabled) return null
+
+  return (
+    <Box
+      sx={{
+        margin: '1rem 0',
+      }}
+    >
+      <Alert
+        variant="filled"
+        onClose={() => handleCompanyCreditCloseClick()}
+        severity="warning"
+      >
+        {b3Lang('global.companyCredit.alert')}
+      </Alert>
+    </Box>
+  )
+}
+
+export default CompanyCredit

apps/storefront/src/components/layout/B3Layout.tsx

@@ -10,6 +10,7 @@ import { routes } from '@/shared/routes'
 import { getIsTokenGotoPage, RouteItem } from '@/shared/routes/routes'
 
 import B3Dialog from '../B3Dialog'
+import CompanyCredit from '../CompanyCredit'
 
 import B3Logo from './B3Logo'
 import B3Mainheader from './B3Mainheader'
@@ -152,6 +153,7 @@ export default function B3Layout({ children }: { children: ReactNode }) {
             }}
           >
             <B3Mainheader title={title} />
+            <CompanyCredit />
             <Box
               component="main"
               sx={

apps/storefront/src/components/layout/B3MobileLayout.tsx

@@ -6,6 +6,7 @@ import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { store } from '@/store'
 
+import CompanyCredit from '../CompanyCredit'
 import { getContrastColor } from '../outSideComponents/utils/b3CustomStyles'
 
 import B3AccountInfo from './B3AccountInfo'
@@ -105,6 +106,7 @@ export default function B3MobileLayout({
       >
         {title}
       </Box>
+      <CompanyCredit />
       <Box
         sx={{
           flex: 1,

apps/storefront/src/shared/service/b2b/graphql/global.ts

@@ -187,6 +187,17 @@ const storefrontDefaultLanguage = (channelId: number) => `{
 	}
 }`
 
+const companyCreditConfig = () => `{
+	companyCreditConfig{
+    limitPurchases
+    creditCurrency
+    creditHold
+    creditEnabled
+    availableCredit
+    currency
+  }
+}`
+
 export const getB2BToken = (
   currentCustomerJWTToken: string,
   channelId = 1
@@ -262,3 +273,8 @@ export const getStorefrontDefaultLanguages = (
   B3Request.graphqlB2B({
     query: storefrontDefaultLanguage(channelId),
   })
+
+export const getCompanyCreditConfig = (): CustomFieldItems =>
+  B3Request.graphqlB2B({
+    query: companyCreditConfig(),
+  })

apps/storefront/src/shared/service/b2b/index.ts

@@ -23,6 +23,7 @@ import {
   getAgentInfo,
   getB2BToken,
   getBcCurrencies,
+  getCompanyCreditConfig,
   getCurrencies,
   getStorefrontConfig,
   getStorefrontConfigs,
@@ -194,6 +195,7 @@ export {
   getBcShoppingListDetails,
   getBCStoreChannelId,
   getBcVariantInfoBySkus,
+  getCompanyCreditConfig,
   getCurrencies,
   getOrdersCreatedByUser,
   getOrderStatusType,

packages/lang/locales/en.json

@@ -109,6 +109,7 @@
   "global.customStyles.addToAllQuoteBtn": "Add All To Quote",
   "global.customStyles.shoppingListBtn": "Add to Shopping List",
   "global.masquerade.youAreMasqueradeAs": "You are masquerade as",
+  "global.companyCredit.alert": "Your account does not currently allow purchasing due to a credit hold. Please contact us to reconcile.",
 
   "dashboard.company": "Company",
   "dashboard.admin": "Admin",