Load from formsort.app rather than flow.formsort.com (#121)

* Load from formsort.app rather than flow.formsort.com * Remove DEFAULT_FLOW_ORIGIN * Update tests to assert formsort.app
formsort · Nov 29, 2023 · 9df5c4d · 9df5c4d
1 parent 91f6b62
commit 9df5c4d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/packages/web-embed-api/src/index.test.ts b/packages/web-embed-api/src/index.test.ts
@@ -3,7 +3,7 @@ import FormsortWebEmbed, { SupportedAnalyticsEvent } from '.';
 
 type MessageListener = (msg: MessageEvent) => any;
 
-const DEFAULT_FLOW_ORIGIN = 'https://flow.formsort.com';
+const DEFAULT_FLOW_ORIGIN = 'https://testclient.formsort.app';
 const EMBEDDING_WINDOW_ORIGIN = 'https://test-origin.formsort.com';
 
 const clientLabel = 'test-client';
@@ -118,7 +118,7 @@ describe('FormsortWebEmbed', () => {
 
     const iframe = iframes[0];
     expect(iframe.src).toBe(
-      `https://flow.formsort.com/client/${clientLabel}/flow/${flowLabel}`
+      `https://testclient.formsort.app/flow/${flowLabel}`
     );
   });
 
@@ -162,8 +162,8 @@ describe('FormsortWebEmbed', () => {
 
     const iframe = iframes[0];
     expect(iframe.src).toBe(
-      `https://flow.formsort.com` +
-        `/client/${clientLabel}/flow/${flowLabel}/variant/${variantLabel}`
+      `https://testclient.formsort.app` +
+        `/flow/${flowLabel}/variant/${variantLabel}`
     );
   });
 
@@ -183,8 +183,8 @@ describe('FormsortWebEmbed', () => {
 
     const iframe = iframes[0];
     expect(iframe.src).toBe(
-      `https://flow.formsort.com` +
-        `/client/${clientLabel}/flow/${flowLabel}` +
+      `https://testclient.formsort.app` +
+        `/flow/${flowLabel}` +
         `?${queryParamA}=${queryValueA}&${queryParamB}=${queryValueB}`
     );
   });
@@ -239,12 +239,12 @@ describe('FormsortWebEmbed', () => {
 
     const firstFlowIframe = iframes[0];
     expect(firstFlowIframe.src).toBe(
-      `https://flow.formsort.com/client/${clientLabel}/flow/${flowLabel}`
+      `https://testclient.formsort.app/flow/${flowLabel}`
     );
 
     const secondFlowIframe = iframes[1];
     expect(secondFlowIframe.src).toBe(
-      `https://flow.formsort.com/client/${clientLabel}/flow/${secondFlowLabel}`
+      `https://testclient.formsort.app/flow/${secondFlowLabel}`
     );
 
     const firstFlowFinalized = jest.fn();

diff --git a/packages/web-embed-api/src/index.ts b/packages/web-embed-api/src/index.ts
@@ -4,8 +4,6 @@ import EmbedMessagingManager, {
 } from '@formsort/embed-messaging-manager';
 import { getMessageSender } from './iframe-utils';
 
-const DEFAULT_FLOW_ORIGIN = 'https://flow.formsort.com';
-
 interface IFormsortWebEmbed {
   loadFlow: (
     clientLabel: string,
@@ -31,7 +29,6 @@ interface IFormsortWebEmbedConfig extends IFormsortEmbedConfig {
 
 const DEFAULT_CONFIG: IFormsortWebEmbedConfig = {
   useHistoryAPI: false,
-  origin: DEFAULT_FLOW_ORIGIN,
 };
 
 const FormsortWebEmbed = (
@@ -40,7 +37,7 @@ const FormsortWebEmbed = (
 ): IFormsortWebEmbed => {
   const iframeEl = document.createElement('iframe');
   const { style } = config;
-  const formsortOrigin = config.origin || DEFAULT_FLOW_ORIGIN;
+  let loadedOrigin: string;
   iframeEl.style.border = 'none';
   if (style) {
     const { width = '', height = '' } = style;
@@ -90,7 +87,7 @@ const FormsortWebEmbed = (
       return;
     }
 
-    if (msgOrigin !== formsortOrigin) {
+    if (msgOrigin !== loadedOrigin) {
       return;
     }
 
@@ -111,7 +108,19 @@ const FormsortWebEmbed = (
     variantLabel?: string,
     queryParams?: Array<[string, string]>
   ) => {
-    let url = `${formsortOrigin}/client/${clientLabel}/flow/${flowLabel}`;
+    let urlBase: string;
+    if (config.origin) {
+      loadedOrigin = config.origin;
+      urlBase = `${config.origin}/client/${clientLabel}`;
+    } else {
+      const subdomain = clientLabel
+        .toLowerCase()
+        .replace(/[^0-9a-z]/g, '') // Remove non-alphanumerics
+        .replace(/^[0-9]+/, ''); // Remove leading numbers
+      loadedOrigin = urlBase = `https://${subdomain}.formsort.app`;
+    }
+
+    let url = `${urlBase}/flow/${flowLabel}`;
     if (variantLabel) {
       url += `/variant/${variantLabel}`;
     }