Feature/b2b build hash vars

.env.example

@@ -49,4 +49,18 @@ B2B_API_HOST=https://api-b2b.bigcommerce.com
 B2B_API_TOKEN=
 
 # URL for the local buyer portal instance. Uncomment if developing locally.
-# LOCAL_BUYER_PORTAL_HOST=http://localhost:3001
+# LOCAL_BUYER_PORTAL_HOST=http://localhost:3001
+
+# Base URL for a production build of Buyer Portal. Uncomment if connecting to a deployed custom Buyer Portal.
+#   Example URL format: ${PROD_BUYER_PORTAL_URL}/index.js
+# PROD_BUYER_PORTAL_URL=https://my-b2b-catalyst.com/b2b/20260101
+
+# Hashes for Buyer Portal top-level assets, if hash was included in custom production build
+# Leave these commented out if hash was not included in build files
+#   Example URL formats: 
+#       ${PROD_BUYER_PORTAL_URL}/index.${PROD_BUYER_PORTAL_HASH_INDEX}.js
+#       ${PROD_BUYER_PORTAL_URL}/index-legacy.${PROD_BUYER_PORTAL_HASH_INDEX_LEGACY}.js
+#       ${PROD_BUYER_PORTAL_URL}/polyfills-legacy.${PROD_BUYER_PORTAL_HASH_POLYFILLS}.js
+# PROD_BUYER_PORTAL_HASH_INDEX=
+# PROD_BUYER_PORTAL_HASH_INDEX_LEGACY=
+# PROD_BUYER_PORTAL_HASH_POLYFILLS=

core/b2b/loader.tsx

@@ -4,20 +4,29 @@ import { auth } from '~/auth';
 
 import { ScriptDev } from './script-dev';
 import { ScriptProduction } from './script-production';
+import { ScriptProductionCustom } from './script-production-custom';
 
 const EnvironmentSchema = z.object({
   BIGCOMMERCE_STORE_HASH: z.string({ message: 'BIGCOMMERCE_STORE_HASH is required' }),
   BIGCOMMERCE_CHANNEL_ID: z.string({ message: 'BIGCOMMERCE_CHANNEL_ID is required' }),
   LOCAL_BUYER_PORTAL_HOST: z.string().url().optional(),
+  PROD_BUYER_PORTAL_URL: z.string().url().optional(),
   STAGING_B2B_CDN_ORIGIN: z.string().optional(),
+  PROD_BUYER_PORTAL_HASH_INDEX: z.string().optional(),
+  PROD_BUYER_PORTAL_HASH_INDEX_LEGACY: z.string().optional(),
+  PROD_BUYER_PORTAL_HASH_POLYFILLS: z.string().optional(),
 });
 
 export async function B2BLoader() {
   const {
     BIGCOMMERCE_STORE_HASH,
     BIGCOMMERCE_CHANNEL_ID,
     LOCAL_BUYER_PORTAL_HOST,
+    PROD_BUYER_PORTAL_URL,
     STAGING_B2B_CDN_ORIGIN,
+    PROD_BUYER_PORTAL_HASH_INDEX,
+    PROD_BUYER_PORTAL_HASH_INDEX_LEGACY,
+    PROD_BUYER_PORTAL_HASH_POLYFILLS,
   } = EnvironmentSchema.parse(process.env);
 
   const session = await auth();
@@ -33,6 +42,21 @@ export async function B2BLoader() {
       />
     );
   }
+
+  if (PROD_BUYER_PORTAL_URL) {
+    return (
+      <ScriptProductionCustom
+        cartId={session?.user?.cartId}
+        channelId={BIGCOMMERCE_CHANNEL_ID}
+        storeHash={BIGCOMMERCE_STORE_HASH}
+        token={session?.b2bToken}
+        prodUrl={PROD_BUYER_PORTAL_URL}
+        hashIndex={PROD_BUYER_PORTAL_HASH_INDEX}
+        hashIndexLegacy={PROD_BUYER_PORTAL_HASH_INDEX_LEGACY}
+        hashPolyfills={PROD_BUYER_PORTAL_HASH_POLYFILLS}
+      />
+    );
+  }
 
   const environment = STAGING_B2B_CDN_ORIGIN === 'true' ? 'staging' : 'production';
 

core/b2b/script-production-custom.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Script from 'next/script';
+
+import { useB2BAuth } from './use-b2b-auth';
+import { useB2BCart } from './use-b2b-cart';
+
+interface Props {
+  storeHash: string;
+  channelId: string;
+  token?: string;
+  cartId?: string | null;
+  prodUrl: string;
+  hashIndex?: string;
+  hashIndexLegacy?: string;
+  hashPolyfills?: string;
+}
+
+export function ScriptProductionCustom({ 
+  cartId, 
+  storeHash, 
+  channelId, 
+  token,
+  prodUrl,
+  hashIndex,
+  hashIndexLegacy,
+  hashPolyfills,
+}: Props) {
+  useB2BAuth(token);
+  useB2BCart(cartId);
+
+  return (
+    <>
+      <Script>
+        {`
+        window.b3CheckoutConfig = {
+          routes: {
+            dashboard: '/#/dashboard',
+          },
+        }
+        window.B3 = {
+          setting: {
+            store_hash: '${storeHash}',  
+            channel_id: ${channelId},
+          },
+        }
+        `}
+      </Script>
+      <Script
+        type="module"
+        crossOrigin=""
+        src={`${prodUrl}/index${hashIndex ? `.${hashIndex}` : ''}.js`}
+      ></Script>
+      <Script
+        noModule
+        crossOrigin=""
+        src={`${prodUrl}/polyfills-legacy${hashPolyfills ? `.${hashPolyfills}` : ''}.js`}
+      ></Script>
+      <Script
+        noModule
+        crossOrigin=""
+        src={`${prodUrl}/index-legacy${hashIndexLegacy ? `.${hashIndexLegacy}` : ''}.js`}
+      ></Script>
+    </>
+  );
+}