feat: headless setup (#821)

* fix: remove dependency from current customer token (#757) * fix: remove dependency from current customer token * fix: remove storefrontLoginToken * fix: make loginData required (#759) * fix: detect if current customer token is present (#761) * fix: detect if current customer token is present * fix: handle errors properly * feat: add headless function to get quote button info (#800) * feat: add compatibility with local env * feat(BUN-1630): use new format for storeBasicInfo query (#806)
bigcommerce · Nov 16, 2023 · 21856ef · 21856ef
1 parent 5f6ef1d
commit 21856ef
Show file tree

Hide file tree

Showing 20 changed files with 136 additions and 158 deletions.
diff --git a/apps/storefront/src/components/HeadlessController.tsx b/apps/storefront/src/components/HeadlessController.tsx
@@ -12,6 +12,7 @@ import {
   addProductsToDraftQuote,
 } from '@/hooks/dom/utils'
 import { addProductsToShoppingList } from '@/pages/pdp/PDP'
+import { CustomStyleContext } from '@/shared/customStyleButtton'
 import { GlobaledContext } from '@/shared/global'
 import { superAdminCompanies } from '@/shared/service/b2b'
 import B3Request from '@/shared/service/request/b3Fetch'
@@ -132,6 +133,9 @@ export default function HeadlessController({
       registerEnabled,
     },
   } = useContext(GlobaledContext)
+  const {
+    state: { addQuoteBtn },
+  } = useContext(CustomStyleContext)
   const { addToQuote: addProductFromPageToQuote } =
     addProductFromProductPageToQuote(setOpenPage)
   const { addToQuote: addProductsFromCart } =
@@ -189,6 +193,7 @@ export default function HeadlessController({
           addProductsFromCart: () => addProductsFromCart(),
           addProducts: (items) => addProductsToDraftQuote(items, setOpenPage),
           getCurrent: getDraftQuote,
+          getButtonInfo: () => addQuoteBtn,
         },
         user: {
           getProfile: () => ({ ...customerRef.current, role }),
@@ -222,18 +227,12 @@ export default function HeadlessController({
               salesRepCompanyId: salesRepCompanyIdRef.current,
               B3UserId: B3UserIdRef.current,
             }),
-          logInWithStorefrontToken: (customerJWTToken: string) =>
-            getCurrentCustomerInfo(dispatch, customerJWTToken),
           graphqlBCProxy: B3Request.graphqlBCProxy,
           loginWithB2BStorefrontToken: async (
             b2bStorefrontJWTToken: string
           ) => {
             B3SStorage.set('B2BToken', b2bStorefrontJWTToken)
-            await getCurrentCustomerInfo(
-              dispatch,
-              undefined,
-              b2bStorefrontJWTToken
-            )
+            await getCurrentCustomerInfo(dispatch, b2bStorefrontJWTToken)
           },
         },
         shoppingList: {

diff --git a/apps/storefront/src/index.d.ts b/apps/storefront/src/index.d.ts
@@ -22,6 +22,7 @@ declare interface Window {
         getCurrent: () => {
           productList: import('@/components').FormatedQuoteItem[]
         }
+        getButtonInfo: () => import('@/shared/customStyleButtton/context/config').AddQuoteBtnProperties
       }
       user: {
         getProfile: () => Record<string, string | number>
@@ -32,9 +33,6 @@ declare interface Window {
         getB2BToken: () => string
         setMasqueradeCompany: (companyId: number) => Promise<void>
         endMasquerade: () => Promise<void>
-        logInWithStorefrontToken: (
-          customerJWTToken: string
-        ) => Promise<{ role: number; userType: string } | undefined>
         graphqlBCProxy: typeof import('@/shared/service/request/b3Fetch').default.graphqlBCProxy
         loginWithB2BStorefrontToken: (
           b2bStorefrontJWTToken: string

diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -19,8 +19,12 @@ import {
   getBCForcePasswordReset,
   superAdminEndMasquerade,
 } from '@/shared/service/b2b'
-import { bcLogin } from '@/shared/service/bc'
-import { B3SStorage, getCurrentCustomerInfo } from '@/utils'
+import { b2bLogin, customerLoginAPI } from '@/shared/service/bc'
+import {
+  B3SStorage,
+  getCurrentCustomerInfo,
+  storeHash,
+} from '@/utils'
 
 import LoginWidget from './component/LoginWidget'
 import {
@@ -64,6 +68,7 @@ export default function Login(props: RegisteredProps) {
   const [flag, setLoginFlag] = useState<string>('')
   const [loginAccount, setLoginAccount] = useState<LoginConfig>({
     emailAddress: '',
+    password: '',
   })
   const location = useLocation()
 
@@ -249,21 +254,23 @@ export default function Login(props: RegisteredProps) {
       }
     } else {
       try {
-        const getBCFieldsValue = {
+        const loginData = {
           email: data.emailAddress,
-          pass: data.password,
+          password: data.password,
+          storeHash: storeHash as string,
+          channelId: B3SStorage.get('B3channelId'),
         }
-        const { data: bcData, errors } = await bcLogin(getBCFieldsValue)
+        const {
+          login: {
+            result: { token, storefrontLoginToken },
+            errors,
+          },
+        } = await b2bLogin({ loginData })
 
-        if (bcData?.login?.customer) {
-          B3SStorage.set('loginCustomer', {
-            emailAddress: bcData.login.customer.email,
-            phoneNumber: bcData.login.customer.phone,
-            ...bcData.login.customer,
-          })
-        }
+        B3SStorage.set('B2BToken', token)
+        customerLoginAPI(storefrontLoginToken)
 
-        if (errors?.length || !bcData) {
+        if (errors?.length || !token) {
           if (errors?.length) {
             const { message } = errors[0]
             if (
@@ -277,7 +284,7 @@ export default function Login(props: RegisteredProps) {
           }
           getforcePasswordReset(data.emailAddress)
         } else {
-          const info = await getCurrentCustomerInfo(dispatch)
+          const info = await getCurrentCustomerInfo(dispatch, token)
 
           if (info?.userType === 3 && info?.role === 3) {
             navigate('/dashboard')

diff --git a/apps/storefront/src/pages/login/config.ts b/apps/storefront/src/pages/login/config.ts
@@ -9,7 +9,7 @@ export interface QuoteConfig {
 
 export type LoginConfig = {
   emailAddress: string
-  password?: string
+  password: string
 }
 
 export interface LoginInfoInit {

diff --git a/apps/storefront/src/shared/customStyleButtton/context/config.ts b/apps/storefront/src/shared/customStyleButtton/context/config.ts
@@ -2,7 +2,6 @@ import { Dispatch, ReactNode } from 'react'
 
 type BtnKeys =
   | 'masqueradeButton'
-  | 'addQuoteBtn'
   | 'floatingAction'
   | 'addToAllQuoteBtn'
   | 'shoppingListBtn'
@@ -42,8 +41,18 @@ interface BtnStyle {
   css?: string
 }
 
+export interface AddQuoteBtnProperties {
+  classSelector: string
+  color: string
+  customCss: string
+  enabled: boolean
+  locationSelector: string
+  text: string
+}
+
 export interface CustomStyleButtonState
   extends Record<BtnKeys, Partial<BtnStyle>> {
+  addQuoteBtn: AddQuoteBtnProperties
   globalButtonBackgroundColor: string
 }
 

diff --git a/apps/storefront/src/shared/service/b2b/graphql/accountSetting.ts b/apps/storefront/src/shared/service/b2b/graphql/accountSetting.ts
@@ -62,7 +62,7 @@ export const updateB2BAccountSettings = (
 export const updateBCAccountSettings = (
   data: CustomFieldItems
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: updateCustomerAccountSettings(data),
   })
 
@@ -74,6 +74,6 @@ export const getB2BAccountSettings = (
   })
 
 export const getBCAccountSettings = (): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: customerAccountSettings(),
   })
diff --git a/apps/storefront/src/shared/service/b2b/graphql/address.ts b/apps/storefront/src/shared/service/b2b/graphql/address.ts
@@ -269,7 +269,7 @@ export const getB2BAddressConfig = (): CustomFieldItems =>
 export const getBCCustomerAddress = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getCustomerAddress(data),
   })
 
@@ -283,7 +283,7 @@ export const deleteB2BAddress = (
 export const deleteBCCustomerAddress = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: deleteCustomerAddress(data),
   })
 
@@ -304,12 +304,12 @@ export const createB2BAddress = (
 export const createBcAddress = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: createCustomerAddress(data),
   })
 export const updateBcAddress = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: updateCustomerAddress(data),
   })
diff --git a/apps/storefront/src/shared/service/b2b/graphql/orders.ts b/apps/storefront/src/shared/service/b2b/graphql/orders.ts
@@ -198,7 +198,7 @@ export const getB2BAllOrders = (data: CustomFieldItems): CustomFieldItems =>
   })
 
 export const getBCAllOrders = (data: CustomFieldItems): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: allOrders(data, 'customerOrders'),
   })
 
@@ -208,7 +208,7 @@ export const getB2BOrderDetails = (id: number): CustomFieldItems =>
   })
 
 export const getBCOrderDetails = (id: number): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: orderDetail(id, 'customerOrder'),
   })
 
@@ -218,7 +218,7 @@ export const getOrderStatusType = (): CustomFieldItems =>
   })
 
 export const getBcOrderStatusType = (): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getOrderStatusTypeQl('bcOrderStatuses'),
   })
 

diff --git a/apps/storefront/src/shared/service/b2b/graphql/product.ts b/apps/storefront/src/shared/service/b2b/graphql/product.ts
@@ -142,7 +142,7 @@ export const searchBcProducts = (
 export const getBcVariantInfoBySkus = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getVariantInfoBySkus(data),
   })
 
@@ -156,7 +156,7 @@ export const B2BProductsBulkUploadCSV = (
 export const BcProductsBulkUploadCSV = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: productsBulkUploadCSV(data),
   })
 

diff --git a/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts b/apps/storefront/src/shared/service/b2b/graphql/quickorder.ts
@@ -57,6 +57,6 @@ export const getOrderedProducts = (data: CustomFieldItems): CustomFieldItems =>
 export const getBcOrderedProducts = (
   data: CustomFieldItems
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: orderedProducts(data),
   })
diff --git a/apps/storefront/src/shared/service/b2b/graphql/quote.ts b/apps/storefront/src/shared/service/b2b/graphql/quote.ts
@@ -345,7 +345,7 @@ const getCreatedByUser = (companyId: number, module: number, fn: string) => `{
 }`
 
 export const getBCCustomerAddresses = (): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getCustomerAddresses(),
   })
 
@@ -360,7 +360,7 @@ export const getB2BQuotesList = (data: CustomFieldItems): CustomFieldItems =>
   })
 
 export const getBCQuotesList = (data: CustomFieldItems): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getQuotesList(data, 'bc'),
   })
 
@@ -373,7 +373,7 @@ export const createQuote = (data: CustomFieldItems): CustomFieldItems =>
   )
 
 export const createBCQuote = (data: CustomFieldItems): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken(
+  B3Request.graphqlB2B(
     {
       query: quoteCreate(data),
     },
@@ -386,7 +386,7 @@ export const updateB2BQuote = (data: CustomFieldItems): CustomFieldItems =>
   })
 
 export const updateBCQuote = (data: CustomFieldItems): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: quoteUpdate(data),
   })
 

diff --git a/apps/storefront/src/shared/service/b2b/graphql/register.ts b/apps/storefront/src/shared/service/b2b/graphql/register.ts
@@ -175,12 +175,6 @@ query getStoreBasicInfo($storeHash: String!, $bcChannelId: Int) {
   }
 }`
 
-// const getB2bLogin = () => `mutation Login() {
-//   login(email: $email, password: $pass) {
-//     result
-//   }
-// }`
-
 export const getB2BAccountFormFields = (type: number): CustomFieldItems =>
   B3Request.graphqlB2B({
     query: getAccountFormFields(type),

diff --git a/apps/storefront/src/shared/service/b2b/graphql/shoppingList.ts b/apps/storefront/src/shared/service/b2b/graphql/shoppingList.ts
@@ -482,14 +482,14 @@ export const deleteB2BShoppingListItem = (
 export const getBcShoppingList = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getCustomerShoppingLists(data),
   })
 
 export const createBcShoppingList = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: createOrUpdateCustomerShoppingList(
       'customerShoppingListsCreate',
       data
@@ -499,7 +499,7 @@ export const createBcShoppingList = (
 export const updateBcShoppingList = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: createOrUpdateCustomerShoppingList(
       'customerShoppingListsUpdate',
       data
@@ -509,43 +509,43 @@ export const updateBcShoppingList = (
 export const duplicateBcShoppingList = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: createOrUpdateCustomerShoppingList(
       'customerShoppingListsDuplicate',
       data
     ),
   })
 
 export const deleteBcShoppingList = (id: number): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: deleteCustomerShoppingList(id),
   })
 
 export const getBcShoppingListDetails = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: getCustomerShoppingListDetails(data),
   })
 
 export const addProductToBcShoppingList = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: addItemsToBcShoppingList(data),
   })
 
 export const updateBcShoppingListsItem = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: updateCustomerShoppingListsItem(data),
   })
 
 export const deleteBcShoppingListItem = (
   data: CustomFieldItems = {}
 ): CustomFieldItems =>
-  B3Request.graphqlB2BWithBCCustomerToken({
+  B3Request.graphqlB2B({
     query: deleteCustomerShoppingListItem(data),
   })