@wf-financing/ui 1.1.1 → 1.2.0

package/global.d.ts

@@ -1,8 +1,8 @@
-import { IWayflyerUiCtaSdkConstructor, IHeadlessWayflyerCtaSdkConstructor } from '@wf-financing/embedded-types';
+import { IWayflyerUiCtaSdkConstructor, IHeadlessWayflyerSdkConstructor } from '@wf-financing/embedded-types';
 
 declare global {
   interface Window {
     WayflyerUiCtaSdk: IWayflyerUiCtaSdkConstructor;
-    WayflyerHeadlessSdk: IHeadlessWayflyerCtaSdkConstructor;
+    WayflyerHeadlessSdk: IHeadlessWayflyerSdkConstructor;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -38,7 +38,7 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.2.5"
+    "@wf-financing/embedded-types": "0.2.6"
   },
   "publishConfig": {
     "access": "public"

package/src/api/continueHostedApplication.ts

@@ -0,0 +1,12 @@
+import { ContinueHostedApplicationResponseType, MockedModeType } from '@wf-financing/embedded-types';
+
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+
+export const continueHostedApplication = async (
+  companyToken: string,
+  mockedMode?: MockedModeType,
+): Promise<ContinueHostedApplicationResponseType> => {
+  const sdk = await getHeadlessSdkInstance(companyToken, mockedMode);
+
+  return await sdk.continueHostedApplication();
+};

package/src/api/getHeadlessSdkInstance.ts

@@ -1,9 +1,9 @@
-import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+import { IHeadlessWayflyerSdk, MockedModeType } from '@wf-financing/embedded-types';
 
 import { HEADLESS_SDK_URL, WAYFLYER_HEADLESS_SDK_ID } from '../config';
 import { initializeHeadlessSdk, loadScriptAndInitializeSdk } from '../utils';
 
-let cachedSdkInstance: IHeadlessWayflyerCtaSdk | null = null;
+let cachedSdkInstance: IHeadlessWayflyerSdk | null = null;
 
 export const getHeadlessSdkInstance = async (companyToken: string, mockedMode?: MockedModeType) => {
   try {
@@ -31,10 +31,9 @@ export const getHeadlessSdkInstance = async (companyToken: string, mockedMode?:
     script.id = WAYFLYER_HEADLESS_SDK_ID;
     script.async = true;
 
-    console.log(script, 'script');
     document.head.appendChild(script);
 
-    const headlessSdk: IHeadlessWayflyerCtaSdk = await loadScriptAndInitializeSdk(script, companyToken, mockedMode);
+    const headlessSdk: IHeadlessWayflyerSdk = await loadScriptAndInitializeSdk(script, companyToken, mockedMode);
     cachedSdkInstance = headlessSdk;
 
     return headlessSdk;

package/src/components/banner/{CtaBanner.stories.tsx → CtaBanner.snapshot.stories.tsx}

@@ -34,7 +34,7 @@ const meta: Meta<typeof CtaBanner> = {
       sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
     },
   },
-  decorators: [(Story, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
+  decorators: [(_, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
 };
 
 export default meta;

package/src/components/banner/CtaBannerContent.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from '@wayflyer/flyui';
 import type { CtaResponseType } from '@wf-financing/embedded-types';
 
-import { useCtaBanner } from '../../hooks/useCtaBanner';
+import { useCtaBanner } from '../../hooks';
 import { BulletList } from './BulletList';
 
 type CtaBannerContentProps = {

package/src/components/banner/ProceedFundingButton.tsx

@@ -4,10 +4,11 @@ import {
   CtaGenericOfferType,
   CtaIndicativeOfferType,
   CtaStateType,
+  ContinueHostedApplicationResponseType,
 } from '@wf-financing/embedded-types';
 import { useState } from 'react';
 
-import { useCtaBanner } from '../../hooks/useCtaBanner';
+import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
 import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
@@ -16,6 +17,7 @@ export const ProceedFundingButton = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
+  const continueHostedApplicationMutation = useContinueHostedApplication();
 
   if (!sdk) return null;
 
@@ -24,10 +26,18 @@ export const ProceedFundingButton = () => {
     data: { config },
   } = sdk;
 
-  const handleButtonClick = () => {
+  const handleContinueHostedApplication = () => {
     switch (state) {
       case CtaStateType.CONTINUE_APPLICATION:
-        window.open(config?.redirect_url, '_blank');
+        continueHostedApplicationMutation.mutate(undefined, {
+          onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
+            const { next } = nextUrl;
+            window.open(next);
+          },
+          onError: (error) => {
+            console.error('Failed to continue application', error);
+          },
+        });
         break;
       default:
         setIsModalOpen(true);
@@ -37,7 +47,7 @@ export const ProceedFundingButton = () => {
 
   return (
     <>
-      <Button variant="Primary" fullWidth onClick={handleButtonClick}>
+      <Button variant="Primary" fullWidth onClick={handleContinueHostedApplication}>
         {config?.button_label}
       </Button>
       <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

package/src/components/modal/{ConsentModal.stories.tsx → ConsentModal.snapshot.stories.tsx}

@@ -34,7 +34,7 @@ export const WithContent: Story = {
       <div style={{ padding: '20px', background: 'white' }}>
         <h2>Consent Agreement</h2>
         <p>Please agree to the terms to proceed.</p>
-        <button>Continue with Wayflyer</button>
+        <button>Continue to Wayflyer</button>
         <button>Cancel</button>
       </div>
     </ConsentModal>

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export { usePartnerContext } from './usePartnerContext';
 export { useCtaBanner } from './useCtaBanner';
 export { useStartHostedApplication } from './useStartHostedApplication';
 export { useDetectSmallScreen } from './useDetectSmallScreen';
+export { useContinueHostedApplication } from './useContinueHostedApplication';

package/src/hooks/useContinueHostedApplication.ts

@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { continueHostedApplication } from '../api/continueHostedApplication';
+import { usePartnerContext } from './usePartnerContext';
+
+export const useContinueHostedApplication = () => {
+  const { companyToken, mockedMode } = usePartnerContext();
+
+  return useMutation({
+    mutationFn: () => continueHostedApplication(companyToken, mockedMode),
+  });
+};

package/src/locales/en.json

@@ -3,7 +3,7 @@
   "common.dismiss": "Dismiss",
   "ctaModal.call": "Get funded",
   "ctaModal.title": "Fuel your growth with capital from Wayflyer",
-  "ctaModal.action": "Continue with Wayflyer",
+  "ctaModal.action": "Continue to Wayflyer",
   "ctaModal.consent": "By proceeding, you consent to us sharing your information with Wayflyer so they can assess your eligibility for financing, in accordance with the Wayflyer ",
   "ctaModal.consent.privacy_policy": "Privacy Policy.",
   "ctaModal.step1.title": "Built for businesses like yours",

package/src/utils/initializeHeadlessSdk.ts

@@ -1,6 +1,6 @@
-import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+import { IHeadlessWayflyerSdk, MockedModeType } from '@wf-financing/embedded-types';
 
-export const initializeHeadlessSdk = (companyToken: string, mockedMode?: MockedModeType): IHeadlessWayflyerCtaSdk => {
+export const initializeHeadlessSdk = (companyToken: string, mockedMode?: MockedModeType): IHeadlessWayflyerSdk => {
   if (!window.WayflyerHeadlessSdk) {
     throw new Error('Failed to load WayflyerHeadlessSdk from the script.');
   }

package/src/utils/loadScriptAndInitializeSdk.ts

@@ -1,4 +1,4 @@
-import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+import { IHeadlessWayflyerSdk, MockedModeType } from '@wf-financing/embedded-types';
 
 import { initializeHeadlessSdk } from './initializeHeadlessSdk';
 
@@ -6,8 +6,8 @@ export const loadScriptAndInitializeSdk = (
   script: HTMLScriptElement,
   companyToken: string,
   mockedMode?: MockedModeType,
-): Promise<IHeadlessWayflyerCtaSdk> => {
-  return new Promise<IHeadlessWayflyerCtaSdk>((resolve, reject) => {
+): Promise<IHeadlessWayflyerSdk> => {
+  return new Promise<IHeadlessWayflyerSdk>((resolve, reject) => {
     script.onload = () => {
       try {
         resolve(initializeHeadlessSdk(companyToken, mockedMode));

package/src/components/banner/BulletList.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BulletList } from './BulletList';
-
-const meta: Meta<typeof BulletList> = {
-  title: 'BulletList',
-  component: BulletList,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BulletList>;
-
-export const Default: Story = {
-  render: () => <BulletList items={['Item 1', 'Item 2', 'Item 3']} />,
-};