diff --git a/packages/web-embed-api/src/index.test.ts b/packages/web-embed-api/src/index.test.ts index 94de492..4bcd1e7 100644 --- 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 index a48f4aa..98b3d7a 100644 --- 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}`; }