chore: improve the way we supply b2b cdn url

Author: bc-victor

.env.example

@@ -51,4 +51,9 @@ B2B_API_HOST=https://api-b2b.bigcommerce.com
 BIGCOMMERCE_ACCESS_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
+
+# If you don't need local buyer portal but you need to work in a different environment
+# this variable will supply the correct microapps cdn url.
+# It will default to "production". 
+# BUYER_PORTAL_ENVIRONMENT=production

core/b2b/loader.tsx

@@ -9,15 +9,15 @@ 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(),
-  STAGING_B2B_CDN_ORIGIN: z.string().optional(),
+  BUYER_PORTAL_ENVIRONMENT: z.enum(['production', 'staging', 'integration']).optional().default('production'),
 });
 
 export async function B2BLoader() {
   const {
     BIGCOMMERCE_STORE_HASH,
     BIGCOMMERCE_CHANNEL_ID,
     LOCAL_BUYER_PORTAL_HOST,
-    STAGING_B2B_CDN_ORIGIN,
+    BUYER_PORTAL_ENVIRONMENT,
   } = EnvironmentSchema.parse(process.env);
 
   const session = await auth();
@@ -34,13 +34,11 @@ export async function B2BLoader() {
     );
   }
 
-  const environment = STAGING_B2B_CDN_ORIGIN === 'true' ? 'staging' : 'production';
-
   return (
     <ScriptProduction
       cartId={session?.user?.cartId}
       channelId={BIGCOMMERCE_CHANNEL_ID}
-      environment={environment}
+      environment={BUYER_PORTAL_ENVIRONMENT}
       storeHash={BIGCOMMERCE_STORE_HASH}
       token={session?.b2bToken}
     />

core/b2b/script-production.tsx

@@ -9,14 +9,22 @@ interface Props {
   storeHash: string;
   channelId: string;
   token?: string;
-  environment: 'staging' | 'production';
+  environment: 'staging' | 'production' | 'integration';
   cartId?: string | null;
 }
 
+const CDN_BY_ENV: Record<Props['environment'], string> = {
+  production: 'https://microapps.bigcommerce.com',
+  staging: 'https://microapps.staging.zone',
+  integration: 'https://microapps.integration.zone',
+};
+
 export function ScriptProduction({ cartId, storeHash, channelId, token, environment }: Props) {
   useB2BAuth(token);
   useB2BCart(cartId);
 
+  const src = `${CDN_BY_ENV[environment]}/b2b-buyer-portal/headless.js`;
+
   return (
     <>
       <Script id="b2b-config">
@@ -35,7 +43,7 @@ export function ScriptProduction({ cartId, storeHash, channelId, token, environm
         data-channelid={channelId}
         data-environment={environment}
         data-storehash={storeHash}
-        src={'https://microapps.bigcommerce.com/b2b-buyer-portal/headless.js'}
+        src={src}
         type="module"
       />
     </>