Merge pull request #2736 from bigcommerce/fix/staging

fix: include apiOrigin and appOrigin props to Makeswift provider

Author: chanceaclark

.changeset/cool-vans-pay.md

@@ -0,0 +1,12 @@
+---
+"@bigcommerce/catalyst-makeswift": patch
+---
+
+Enable Makeswift builder to work in different environments by adding `apiOrigin` and `appOrigin` props to `ReactRuntimeProvider`.
+
+**Action required:** Add the following environment variables:
+
+- `NEXT_PUBLIC_MAKESWIFT_API_ORIGIN`
+- `NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN`
+
+**Deprecation notice:** `MAKESWIFT_API_ORIGIN` and `MAKESWIFT_APP_ORIGIN` are deprecated and will be removed in v1.4.0. Prefix `MAKESWIFT_API_ORIGIN` and `MAKESWIFT_APP_ORIGIN` with `NEXT_PUBLIC_` to migrate.

core/app/api/makeswift/[...makeswift]/route.ts

@@ -24,8 +24,8 @@ const defaultVariants: Font['variants'] = [
 
 const handler = MakeswiftApiHandler(process.env.MAKESWIFT_SITE_API_KEY, {
   runtime,
-  apiOrigin: process.env.MAKESWIFT_API_ORIGIN,
-  appOrigin: process.env.MAKESWIFT_APP_ORIGIN,
+  apiOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN ?? process.env.MAKESWIFT_API_ORIGIN,
+  appOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN ?? process.env.MAKESWIFT_APP_ORIGIN,
   getFonts() {
     return [
       {

core/lib/content-security-policy.ts

@@ -2,7 +2,10 @@ import builder from 'content-security-policy-builder';
 
 const makeswiftEnabled = !!process.env.MAKESWIFT_SITE_API_KEY;
 
-const makeswiftBaseUrl = process.env.MAKESWIFT_BASE_URL || 'https://app.makeswift.com';
+const makeswiftBaseUrl =
+  process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN ??
+  process.env.MAKESWIFT_APP_ORIGIN ??
+  'https://app.makeswift.com';
 
 const frameAncestors = makeswiftEnabled ? makeswiftBaseUrl : 'none';
 

core/lib/makeswift/client.ts

@@ -11,7 +11,7 @@ strict(process.env.MAKESWIFT_SITE_API_KEY, 'MAKESWIFT_SITE_API_KEY is required')
 
 export const client = new Makeswift(process.env.MAKESWIFT_SITE_API_KEY, {
   runtime,
-  apiOrigin: process.env.MAKESWIFT_API_ORIGIN,
+  apiOrigin: process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN ?? process.env.MAKESWIFT_API_ORIGIN,
 });
 
 export const getPageSnapshot = async ({ path, locale }: { path: string; locale: string }) =>

core/lib/makeswift/provider.tsx

@@ -13,7 +13,12 @@ export function MakeswiftProvider({
   siteVersion: SiteVersion | null;
 }) {
   return (
-    <ReactRuntimeProvider runtime={runtime} siteVersion={siteVersion}>
+    <ReactRuntimeProvider
+      apiOrigin={process.env.NEXT_PUBLIC_MAKESWIFT_API_ORIGIN}
+      appOrigin={process.env.NEXT_PUBLIC_MAKESWIFT_APP_ORIGIN}
+      runtime={runtime}
+      siteVersion={siteVersion}
+    >
       <RootStyleRegistry enableCssReset={false}>{children}</RootStyleRegistry>
     </ReactRuntimeProvider>
   );