@wf-financing/ui 4.7.0 → 4.7.2

package/global.d.ts

@@ -4,5 +4,7 @@ declare global {
   interface Window {
     WayflyerUiSdk: IWayflyerUiSdkConstructor;
     WayflyerHeadlessSdk: IWayflyerHeadlessSdkConstructor;
+
+    WayflyerHostedCapitalBaseUrl: string;
   }
 }

package/index.ts

@@ -5,7 +5,8 @@ const addUiSdkToWindow = () => {
 
   window.WayflyerUiSdk = WayflyerUiSdk;
   /**
-   * Trigger event handler in entry point that notifies it that the SDK is ready to use. See packages/ui-sdk-entry/utils/loadUiSdkScript.ts
+   * Trigger event handler in entry point that notifies it that the SDK is ready to use.
+   * See packages/ui-sdk-entry/utils/loadUiSdkScript.ts
    */
   window.dispatchEvent(new CustomEvent(UI_SDK_READY_EVENT));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -38,6 +38,7 @@
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
     "@wf-financing/embedded-types": "1.1.1",
+    "@wf-financing/headless": "3.3.3",
     "@wf-financing/logger": "2.2.2",
     "@wf-financing/ui-assets": "1.1.3",
     "@wf-financing/embedded-journey": "0.2.0"

package/src/CtaWidget.tsx

@@ -1,11 +1,11 @@
-import { useState, lazy, Suspense, ComponentProps } from 'react';
+import { useState } from 'react';
 import type { CtaResponseType, ContinueHostedApplicationResponseType } from '@wf-financing/embedded-types';
 import type { Copy } from '@wf-financing/ui-assets';
 
 import { CtaBanner } from './components/banner/CtaBanner';
 import { buildCtaUiProps } from './utils';
-import { useContinueHostedApplication, useNotificationOnRender, usePartnerContext } from './hooks';
-import { IS_EMBEDDED_JOURNEY } from './config';
+import { useContinueHostedApplication, useNotificationOnRender } from './hooks';
+import ConsentModal from './components/modal/ConsentModal.tsx';
 
 type CtaWidgetProps = {
   cta: Exclude<CtaResponseType, null>;
@@ -13,14 +13,10 @@ type CtaWidgetProps = {
   skipAnimation: boolean;
 };
 
-const EmbeddedJourneyPanel = lazy(() => import('@wf-financing/embedded-journey/embedded-journey-panel'));
-const ConsentModal = lazy(() => import('./components/modal/ConsentModal'));
-
 export const CtaWidget = ({ cta, copy, skipAnimation }: CtaWidgetProps) => {
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
   const { mutate: continueHostedApplicationMutation } = useContinueHostedApplication();
   const sendNotification = useNotificationOnRender();
-  const { portalContainer } = usePartnerContext();
 
   const toggleIsWidgetOpen = () => setIsWidgetOpen((isOpen) => !isOpen);
   const handleContinueHostedApplication = () => {
@@ -44,24 +40,12 @@ export const CtaWidget = ({ cta, copy, skipAnimation }: CtaWidgetProps) => {
 
   sendNotification(cta, bannerProps);
 
-  const embeddedJourneyPanelProps: ComponentProps<typeof EmbeddedJourneyPanel> = {
-    portalContainer,
-    isOpen: isWidgetOpen,
-    closePanel: () => toggleIsWidgetOpen(),
-  };
-
   return (
     <>
       <CtaBanner skipAnimation={skipAnimation} {...bannerProps} />
-      <Suspense fallback={null}>
-        {IS_EMBEDDED_JOURNEY ? (
-          <EmbeddedJourneyPanel {...embeddedJourneyPanelProps} />
-        ) : (
-          consentModalProps && (
-            <ConsentModal {...consentModalProps} {...partnerTemplateProps} isModalOpen={isWidgetOpen} />
-          )
-        )}
-      </Suspense>
+      {consentModalProps && (
+        <ConsentModal {...consentModalProps} {...partnerTemplateProps} isModalOpen={isWidgetOpen} />
+      )}
     </>
   );
 };

package/src/api/getHeadlessSdkInstance.test.ts

@@ -1,52 +1,47 @@
-import { afterEach, describe, expect, Mock, test, vi } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
-vi.mock('./getHeadlessSdkInstance', () => ({
-  getHeadlessSdkInstance: vi.fn(),
+const mockSetCompanyToken = vi.fn();
+const MockHeadlessSdk = vi.fn(() => ({
+  setCompanyToken: mockSetCompanyToken,
 }));
 
-import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
-import { startHostedApplication } from './startHostedApplication';
-
-const fakeSdk = {
-  getCta: vi.fn(),
-  startHostedApplication: vi.fn(),
-};
-
-const options = {
-  isSandbox: true,
-};
+vi.mock('@wf-financing/headless/sdk', () => ({
+  HeadlessSdk: MockHeadlessSdk,
+}));
 
-describe('startHostedApplication', () => {
-  afterEach(() => {
+describe('getHeadlessSdkInstance', () => {
+  beforeEach(() => {
     vi.clearAllMocks();
+    vi.resetModules();
   });
 
-  test('calls sdk.startHostedApplication with partnerData and returns nextUrl', async () => {
-    const fakePartnerData = { foo: 1 };
-    const fakeNextUrl = '/next-url';
-    const partnerCallback = vi.fn().mockResolvedValue(fakePartnerData);
-
-    (getHeadlessSdkInstance as unknown as Mock).mockResolvedValueOnce(fakeSdk);
-    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+  test('creates a new HeadlessSdk instance on first call', async () => {
+    const { getHeadlessSdkInstance } = await import('./getHeadlessSdkInstance');
 
-    const result = await startHostedApplication('TOKEN', partnerCallback, options);
+    const sdk = await getHeadlessSdkInstance('TOKEN_1');
 
-    expect(getHeadlessSdkInstance).toHaveBeenCalledWith('TOKEN', options);
-    expect(partnerCallback).toHaveBeenCalled();
-    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith(fakePartnerData);
-    expect(result).toBe(fakeNextUrl);
+    expect(MockHeadlessSdk).toHaveBeenCalledWith('TOKEN_1', undefined);
+    expect(sdk).toEqual(expect.objectContaining({ setCompanyToken: expect.any(Function) }));
   });
 
-  test('calls sdk.startHostedApplication with empty object if partnerCallback returns falsy', async () => {
-    const partnerCallback = vi.fn().mockResolvedValue(undefined);
-    const fakeNextUrl = '/next-url';
+  test('creates a new HeadlessSdk instance with options', async () => {
+    const { getHeadlessSdkInstance } = await import('./getHeadlessSdkInstance');
+    const options = { isSandbox: true };
+
+    const sdk = await getHeadlessSdkInstance('TOKEN_1', options);
+
+    expect(MockHeadlessSdk).toHaveBeenCalledWith('TOKEN_1', options);
+    expect(sdk).toEqual(expect.objectContaining({ setCompanyToken: expect.any(Function) }));
+  });
 
-    (getHeadlessSdkInstance as unknown as Mock).mockResolvedValueOnce(fakeSdk);
-    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+  test('returns cached instance and calls setCompanyToken on subsequent calls', async () => {
+    const { getHeadlessSdkInstance } = await import('./getHeadlessSdkInstance');
 
-    const result = await startHostedApplication('TOKEN', partnerCallback);
+    const firstSdk = await getHeadlessSdkInstance('TOKEN_1');
+    const secondSdk = await getHeadlessSdkInstance('TOKEN_2');
 
-    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith({});
-    expect(result).toBe(fakeNextUrl);
+    expect(MockHeadlessSdk).toHaveBeenCalledTimes(1);
+    expect(firstSdk).toBe(secondSdk);
+    expect(mockSetCompanyToken).toHaveBeenCalledWith('TOKEN_2');
   });
 });

package/src/api/getHeadlessSdkInstance.ts

@@ -1,43 +1,17 @@
-import { IWayflyerHeadlessSdk, HeadlessSdkOptions } from '@wf-financing/embedded-types';
-
-import { Logger } from '@wf-financing/logger';
-import { HEADLESS_SDK_URL, WAYFLYER_HEADLESS_SDK_ID } from '../config';
-import { initializeHeadlessSdk, loadScriptAndInitializeSdk } from '../utils';
+import { HeadlessSdk } from '@wf-financing/headless/sdk';
+import type { IWayflyerHeadlessSdk, HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 let cachedSdkInstance: IWayflyerHeadlessSdk | null = null;
 
-export const getHeadlessSdkInstance = async (companyToken: string, options?: HeadlessSdkOptions) => {
-  try {
-    if (cachedSdkInstance) {
-      cachedSdkInstance.setCompanyToken(companyToken);
-
-      return cachedSdkInstance;
-    }
-
-    const existingScript = document.getElementById(WAYFLYER_HEADLESS_SDK_ID) as HTMLScriptElement;
-
-    if (window.WayflyerHeadlessSdk) {
-      return initializeHeadlessSdk(companyToken, options);
-    }
-
-    if (existingScript) {
-      return loadScriptAndInitializeSdk(existingScript, companyToken, options);
-    }
-
-    const script = document.createElement('script');
-    script.src = HEADLESS_SDK_URL;
-    script.type = 'module';
-    script.id = WAYFLYER_HEADLESS_SDK_ID;
-    script.async = true;
-    script.onerror = () => Logger.logError('Error in loading headless SDK script');
-
-    document.head.appendChild(script);
-    const headlessSdk: IWayflyerHeadlessSdk = await loadScriptAndInitializeSdk(script, companyToken, options);
-    cachedSdkInstance = headlessSdk;
-
-    return headlessSdk;
-  } catch {
-    Logger.logError('Error in loading headless SDK');
-    throw new Error('Failed to load script');
+export const getHeadlessSdkInstance = async (
+  companyToken: string,
+  options?: HeadlessSdkOptions,
+): Promise<IWayflyerHeadlessSdk> => {
+  if (cachedSdkInstance) {
+    cachedSdkInstance.setCompanyToken(companyToken);
+    return cachedSdkInstance;
   }
+
+  cachedSdkInstance = new HeadlessSdk(companyToken, options);
+  return cachedSdkInstance;
 };

package/src/config/index.ts

@@ -1,5 +1,3 @@
 export { ROOTS_CONFIG } from './rootsParameters';
-export { WAYFLYER_HEADLESS_SDK_ID } from './scriptId';
-export { HEADLESS_SDK_URL } from './url';
 export { APPLICATION_VERSION } from './applicationVersion';
 export { IS_EMBEDDED_JOURNEY } from './isEmbeddedJourney';

package/src/utils/index.ts

@@ -1,8 +1,6 @@
 export { applyStyles } from './applyStyles';
 export { createRoots } from './createRoots';
 export { getPartnerIdFromToken } from './getPartnerIdFromToken';
-export { initializeHeadlessSdk } from './initializeHeadlessSdk';
-export { loadScriptAndInitializeSdk } from './loadScriptAndInitializeSdk';
 export { PartnerContext, type PartnerContextType } from './partnerContext';
 export { replacePlaceholdersForMainText } from './replacePlaceholdersForMainText.ts';
 export { getModalItems } from './getModalItems';