From b179535b6615ba32872d93593c524db829349a46 Mon Sep 17 00:00:00 2001 From: Chris Nanninga Date: Tue, 30 Sep 2025 13:19:56 -0500 Subject: [PATCH 1/2] Add support for deployed custom B2B Buyer Portal based on env vars --- .env.example | 6 ++- core/b2b/loader.tsx | 15 ++++++ core/b2b/script-production-custom.tsx | 67 +++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 core/b2b/script-production-custom.tsx diff --git a/.env.example b/.env.example index c540804870..06ecdeb438 100644 --- a/.env.example +++ b/.env.example @@ -49,4 +49,8 @@ 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 \ No newline at end of file +# 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 diff --git a/core/b2b/loader.tsx b/core/b2b/loader.tsx index 58db961435..362508d3f6 100644 --- a/core/b2b/loader.tsx +++ b/core/b2b/loader.tsx @@ -4,11 +4,13 @@ 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(), }); @@ -17,6 +19,7 @@ export async function B2BLoader() { BIGCOMMERCE_STORE_HASH, BIGCOMMERCE_CHANNEL_ID, LOCAL_BUYER_PORTAL_HOST, + PROD_BUYER_PORTAL_URL, STAGING_B2B_CDN_ORIGIN, } = EnvironmentSchema.parse(process.env); @@ -33,6 +36,18 @@ export async function B2BLoader() { /> ); } + + if (PROD_BUYER_PORTAL_URL) { + return ( + + ); + } const environment = STAGING_B2B_CDN_ORIGIN === 'true' ? 'staging' : 'production'; diff --git a/core/b2b/script-production-custom.tsx b/core/b2b/script-production-custom.tsx new file mode 100644 index 0000000000..38081335fa --- /dev/null +++ b/core/b2b/script-production-custom.tsx @@ -0,0 +1,67 @@ +'use client'; + +import Script from 'next/script'; + +import { useB2BAuth } from './use-b2b-auth'; +import { useB2BCart } from './use-b2b-cart'; + +/** + * Use these vars if using build hashes in B2B Buyer Portal files. + */ +const hashIndex = undefined; +const hashIndexLegacy = undefined; +const hashPolyfills = undefined; + +interface Props { + storeHash: string; + channelId: string; + token?: string; + cartId?: string | null; + prodUrl: string; +} + +export function ScriptProductionCustom({ + cartId, + storeHash, + channelId, + token, + prodUrl, +}: Props) { + useB2BAuth(token); + useB2BCart(cartId); + + return ( + <> + + + + + + ); +} From d1d6af5ad86dc0e6d0ecb9bd206b794d1008e553 Mon Sep 17 00:00:00 2001 From: Chris Nanninga Date: Tue, 30 Sep 2025 13:24:18 -0500 Subject: [PATCH 2/2] Env vars for B2B Buyer Portal build hashes --- .env.example | 10 ++++++++++ core/b2b/loader.tsx | 9 +++++++++ core/b2b/script-production-custom.tsx | 13 ++++++------- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.env.example b/.env.example index 06ecdeb438..6c873b71f1 100644 --- a/.env.example +++ b/.env.example @@ -54,3 +54,13 @@ B2B_API_TOKEN= # 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= diff --git a/core/b2b/loader.tsx b/core/b2b/loader.tsx index 362508d3f6..2b8befcb5b 100644 --- a/core/b2b/loader.tsx +++ b/core/b2b/loader.tsx @@ -12,6 +12,9 @@ const EnvironmentSchema = z.object({ 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() { @@ -21,6 +24,9 @@ export async function B2BLoader() { 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(); @@ -45,6 +51,9 @@ export async function B2BLoader() { 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} /> ); } diff --git a/core/b2b/script-production-custom.tsx b/core/b2b/script-production-custom.tsx index 38081335fa..0bffa5e207 100644 --- a/core/b2b/script-production-custom.tsx +++ b/core/b2b/script-production-custom.tsx @@ -5,19 +5,15 @@ import Script from 'next/script'; import { useB2BAuth } from './use-b2b-auth'; import { useB2BCart } from './use-b2b-cart'; -/** - * Use these vars if using build hashes in B2B Buyer Portal files. - */ -const hashIndex = undefined; -const hashIndexLegacy = undefined; -const hashPolyfills = undefined; - interface Props { storeHash: string; channelId: string; token?: string; cartId?: string | null; prodUrl: string; + hashIndex?: string; + hashIndexLegacy?: string; + hashPolyfills?: string; } export function ScriptProductionCustom({ @@ -26,6 +22,9 @@ export function ScriptProductionCustom({ channelId, token, prodUrl, + hashIndex, + hashIndexLegacy, + hashPolyfills, }: Props) { useB2BAuth(token); useB2BCart(cartId);