Confirm businessId before loading gdp (#1228)

* check session businessId existance

* add businessId to checkout session query

* add missing url to session query

* add changeset

Author: pbennett1-godaddy

.changeset/nine-cooks-carry.md

@@ -0,0 +1,5 @@
+---
+"@godaddy/react": patch
+---
+
+Fix bug where GDP tries to load before having session values

packages/react/src/components/checkout/payment/checkout-buttons/express/godaddy.tsx

@@ -336,6 +336,7 @@ export function ExpressCheckoutButton() {
     if (
       !collect.current &&
       godaddyPaymentsConfig &&
+      (godaddyPaymentsConfig?.businessId || session?.businessId) &&
       isPoyntLoaded &&
       isCollectLoading &&
       !hasMounted.current &&
@@ -404,7 +405,8 @@ export function ExpressCheckoutButton() {
       !godaddyPaymentsConfig ||
       !isCollectLoading ||
       !collect.current ||
-      hasMounted.current
+      hasMounted.current ||
+      (!godaddyPaymentsConfig?.businessId && !session?.businessId)
     )
       return;
 
@@ -456,6 +458,7 @@ export function ExpressCheckoutButton() {
     godaddyPaymentsConfig,
     isCollectLoading,
     handleExpressPayClick,
+    session?.businessId,
   ]);
 
   // Function to convert shipping address to shippingLines format for price adjustments

packages/react/src/components/checkout/payment/checkout-buttons/paze/godaddy.tsx

@@ -100,6 +100,7 @@ export function PazeCheckoutButton() {
     if (
       !collect.current &&
       godaddyPaymentsConfig &&
+      (godaddyPaymentsConfig?.businessId || session?.businessId) &&
       isCollectLoading &&
       isPoyntLoaded &&
       !hasMounted.current
@@ -132,6 +133,7 @@ export function PazeCheckoutButton() {
     if (
       !isPoyntLoaded ||
       !godaddyPaymentsConfig ||
+      (!godaddyPaymentsConfig?.businessId && !session?.businessId) ||
       !isCollectLoading ||
       !collect.current ||
       hasMounted.current

packages/react/src/components/checkout/payment/payment-form.tsx

@@ -149,6 +149,7 @@ export function PaymentForm(
     if (
       !collect.current &&
       godaddyPaymentsConfig &&
+      (godaddyPaymentsConfig?.businessId || session?.businessId) &&
       isPoyntLoaded &&
       countryCode &&
       currencyCode &&

packages/react/src/components/checkout/payment/payment-methods/credit-card/godaddy.tsx

@@ -187,7 +187,13 @@ export function GoDaddyCreditCardForm() {
   const collect = useRef<TokenizeJs | null>(null);
 
   useLayoutEffect(() => {
-    if (!isPoyntLoaded || !godaddyPaymentsConfig || collect.current) return;
+    if (
+      !isPoyntLoaded ||
+      !godaddyPaymentsConfig ||
+      collect.current ||
+      (!godaddyPaymentsConfig?.businessId && !session?.businessId)
+    )
+      return;
 
     collect.current = new (window as any).TokenizeJs(
       godaddyPaymentsConfig?.businessId || session?.businessId,

packages/react/src/components/checkout/payment/utils/use-load-poynt-collect.ts

@@ -9,6 +9,7 @@ const listeners = new Set<(loaded: boolean) => void>();
 // load collect.js globally so it can be used for card component and Apple/G Pay buttons
 export function useLoadPoyntCollect() {
   const { godaddyPaymentsConfig } = useCheckoutContext();
+  const { session } = useCheckoutContext();
   const collectCDN = useGetPoyntCollectCdn();
   const [loaded, setLoaded] = useState(isPoyntLoaded);
 
@@ -32,7 +33,8 @@ export function useLoadPoyntCollect() {
       isPoyntCDNLoaded ||
       isPoyntLoaded ||
       !godaddyPaymentsConfig ||
-      !collectCDN
+      !collectCDN ||
+      (!session?.businessId && !godaddyPaymentsConfig?.businessId)
     ) {
       return;
     }
@@ -48,7 +50,7 @@ export function useLoadPoyntCollect() {
     };
 
     document?.body?.appendChild(script);
-  }, [godaddyPaymentsConfig, collectCDN]);
+  }, [godaddyPaymentsConfig, collectCDN, session?.businessId]);
 
   return { isPoyntLoaded: loaded };
 }

packages/react/src/lib/godaddy/checkout-queries.ts

@@ -5,11 +5,13 @@ export const GetCheckoutSessionQuery = graphql(`
         checkoutSession {
             id
             token
+            url
             sourceApp
             returnUrl
             successUrl
             storeId
             channelId
+            businessId
             customerId
             storeName
             environment