update collect cdn urls (#1224)

* update collect cdn urls

* add changeset

* use apiHost to load poynt cdn

* use apiHost for all env loading

* use businessId from session

* update changeset

* prioritize config businessId

Author: pbennett1-godaddy

.changeset/whole-horses-stare.md

@@ -0,0 +1,8 @@
+---
+"@godaddy/react": patch
+"@godaddy/localizations": patch
+---
+
+- Update collect SDK CDN urls
+- Add localization keys for cart components
+- Optional businessId for GDP config (will pull from store data if not provided)

packages/react/src/components/checkout/checkout.tsx

@@ -65,7 +65,7 @@ export type StripeConfig = {
 };
 
 export type GodaddyPaymentsConfig = {
-  businessId: string;
+  businessId?: string;
   appId: string;
 };
 

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

@@ -367,7 +367,7 @@ export function ExpressCheckoutButton() {
       // 	couponConfig,
       // });
       collect.current = new (window as any).TokenizeJs(
-        godaddyPaymentsConfig?.businessId,
+        godaddyPaymentsConfig?.businessId || session?.businessId,
         godaddyPaymentsConfig?.appId,
         {
           country: countryCode,

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

@@ -106,7 +106,7 @@ export function PazeCheckoutButton() {
     ) {
       // console.log("[poynt collect] Initializing TokenizeJs instance");
       collect.current = new (window as any).TokenizeJs(
-        godaddyPaymentsConfig?.businessId,
+        godaddyPaymentsConfig?.businessId || session?.businessId,
         godaddyPaymentsConfig?.appId,
         {
           country: countryCode,

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

@@ -155,7 +155,7 @@ export function PaymentForm(
       session?.paymentMethods?.paze?.processor === PaymentProvider.GODADDY
     ) {
       collect.current = new (window as any).TokenizeJs(
-        godaddyPaymentsConfig?.businessId,
+        godaddyPaymentsConfig?.businessId || session?.businessId,
         godaddyPaymentsConfig?.appId,
         {
           country: countryCode,
@@ -178,6 +178,7 @@ export function PaymentForm(
     currencyCode,
     session?.paymentMethods?.paze?.processor,
     session?.storeName,
+    session?.businessId,
     isPoyntLoaded,
   ]);
 

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

@@ -16,6 +16,7 @@ import { PaymentMethodType } from '@/types';
 
 export function GoDaddyCreditCardForm() {
   const { t } = useGoDaddyContext();
+  const { session } = useCheckoutContext();
   const { setCollect, setIsLoadingNonce } = usePoyntCollect();
   const { isPoyntLoaded } = useLoadPoyntCollect();
   const { godaddyPaymentsConfig, setCheckoutErrors } = useCheckoutContext();
@@ -189,7 +190,7 @@ export function GoDaddyCreditCardForm() {
     if (!isPoyntLoaded || !godaddyPaymentsConfig || collect.current) return;
 
     collect.current = new (window as any).TokenizeJs(
-      godaddyPaymentsConfig?.businessId,
+      godaddyPaymentsConfig?.businessId || session?.businessId,
       godaddyPaymentsConfig?.appId
     );
 
@@ -240,6 +241,7 @@ export function GoDaddyCreditCardForm() {
     setCheckoutErrors,
     t,
     setIsLoadingNonce,
+    session?.businessId,
   ]);
 
   return (

packages/react/src/components/checkout/payment/utils/conditional-providers.tsx

@@ -26,10 +26,7 @@ export function ConditionalPaymentProviders({
   }
 
   // Only wrap with PoyntCollectProvider (GoDaddy Payments) if configured
-  if (
-    godaddyPaymentsConfig?.businessId?.trim() &&
-    godaddyPaymentsConfig?.appId?.trim()
-  ) {
+  if (godaddyPaymentsConfig?.appId?.trim()) {
     wrappedChildren = (
       <PoyntCollectProvider>{wrappedChildren}</PoyntCollectProvider>
     );

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

@@ -1,18 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useCheckoutContext } from '@/components/checkout/checkout';
-import { useGetEnvFromContext } from '@/components/checkout/utils/use-get-env-from-context.ts';
+import { useGoDaddyContext } from '@/godaddy-provider.tsx';
 
 let isSquareLoaded = false;
 let isSquareCDNLoaded = false;
 const listeners = new Set<(loaded: boolean) => void>();
 
 export function useLoadSquare() {
   const { squareConfig } = useCheckoutContext();
+  const { apiHost } = useGoDaddyContext();
   const [loaded, setLoaded] = useState(isSquareLoaded);
-  const environment = useGetEnvFromContext();
 
   const squareCDN =
-    environment === 'prod'
+    apiHost && !apiHost.includes('test') && !apiHost.includes('dev')
       ? 'https://web.squarecdn.com/v1/square.js'
       : 'https://sandbox.web.squarecdn.com/v1/square.js';
 

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

@@ -1,19 +1,11 @@
 import { useMemo } from 'react';
-import { useGetEnvFromContext } from '@/components/checkout/utils/use-get-env-from-context.ts';
+import { useGoDaddyContext } from '@/godaddy-provider.tsx';
 
 export const useGetPoyntCollectCdn = () => {
-  const environment = useGetEnvFromContext();
+  const { apiHost } = useGoDaddyContext();
+  const HOST = apiHost?.replace('api.', 'collect.commerce.') || '';
 
   return useMemo(() => {
-    switch (environment) {
-      case 'prod':
-        return 'https://cdn.poynt.net/collect.js';
-      case 'test':
-        return 'https://cdn.poynt.net/test/collect-test.js';
-      case 'dev':
-        return 'https://cdn.poynt.net/ci/collect-ci.js';
-      default:
-        return 'https://cdn.poynt.net/collect.js';
-    }
-  }, [environment]);
+    return `https://${HOST}/sdk.js`;
+  }, [apiHost]);
 };