@wf-financing/ui 2.0.1 → 3.1.0

package/global.d.ts

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

package/index.ts

@@ -1,7 +1,7 @@
-import { WayflyerUiCtaSdk } from './sdk';
+import { WayflyerUiSdk } from './sdk';
 
 const addHeadlessSdkToWindow = () => {
-  window.WayflyerUiCtaSdk = WayflyerUiCtaSdk;
+  window.WayflyerUiSdk = WayflyerUiSdk;
 };
 
 addHeadlessSdkToWindow();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "2.0.1",
+  "version": "3.1.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -37,7 +37,7 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.4.0"
+    "@wf-financing/embedded-types": "0.4.1"
   },
   "peerDependencies": {
     "@wayflyer/flyui": "204.4.1"

package/sdk/index.ts

@@ -4,12 +4,10 @@ import { PartnerTheme } from '../src/config';
 import { mountToTarget } from '../src/main';
 import { getPartnerIdFromToken, getPartnerThemeById } from '../src/utils';
 
-export class WayflyerUiCtaSdk {
+export class WayflyerUiSdk {
   private readonly partnerTheme: PartnerTheme;
 
   constructor(
-    private readonly targetId: string,
-    private readonly partnerCallback: PartnerCallbackType,
     private readonly companyToken: string,
     private readonly options?: SdkOptionsType,
   ) {
@@ -17,13 +15,13 @@ export class WayflyerUiCtaSdk {
     this.partnerTheme = getPartnerThemeById(partnerId);
   }
 
-  mountCta() {
+  mountCta(targetId: string, partnerCallback: PartnerCallbackType) {
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () =>
-        mountToTarget(this.targetId, this.partnerTheme, this.partnerCallback, this.companyToken, this.options),
+        mountToTarget(targetId, this.partnerTheme, partnerCallback, this.companyToken, this.options),
       );
     } else {
-      mountToTarget(this.targetId, this.partnerTheme, this.partnerCallback, this.companyToken, this.options);
+      mountToTarget(targetId, this.partnerTheme, partnerCallback, this.companyToken, this.options);
     }
   }
 }

package/src/api/getHeadlessSdkInstance.ts

@@ -1,9 +1,9 @@
-import { IHeadlessWayflyerSdk, SdkOptionsType } from '@wf-financing/embedded-types';
+import { IWayflyerHeadlessSdk, SdkOptionsType } from '@wf-financing/embedded-types';
 
 import { HEADLESS_SDK_URL, WAYFLYER_HEADLESS_SDK_ID } from '../config';
 import { initializeHeadlessSdk, loadScriptAndInitializeSdk } from '../utils';
 
-let cachedSdkInstance: IHeadlessWayflyerSdk | null = null;
+let cachedSdkInstance: IWayflyerHeadlessSdk | null = null;
 
 export const getHeadlessSdkInstance = async (companyToken: string, options?: SdkOptionsType) => {
   try {
@@ -30,7 +30,7 @@ export const getHeadlessSdkInstance = async (companyToken: string, options?: Sdk
     script.async = true;
 
     document.head.appendChild(script);
-    const headlessSdk: IHeadlessWayflyerSdk = await loadScriptAndInitializeSdk(script, companyToken, options);
+    const headlessSdk: IWayflyerHeadlessSdk = await loadScriptAndInitializeSdk(script, companyToken, options);
     cachedSdkInstance = headlessSdk;
 
     return headlessSdk;

package/src/components/banner/CtaBanner.tsx

@@ -4,6 +4,8 @@ import { styled } from 'styled-components';
 import { CtaBannerContent } from './CtaBannerContent';
 import { FooterActions } from './FooterActions';
 import { HeaderActions } from './HeaderActions';
+import { usePreloadImage } from '../../hooks';
+import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
 
 type BannerContainerPropTypes = {
   theme: Theme;
@@ -23,6 +25,8 @@ const BannerContainer = styled.aside<BannerContainerPropTypes>`
 export const CtaBanner = () => {
   const { isMobile, isTablet } = useDetectDeviceSize();
   const theme = useTheme();
+  const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
+  usePreloadImage(logoImageUrl);
 
   return (
     <BannerContainer $isMobile={isMobile} theme={theme}>

package/src/components/banner/ProceedFundingButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '@wf-financing/embedded-types';
 import { useState } from 'react';
 
-import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
+import { useCtaBanner, useContinueHostedApplication, useInvalidateCta } from '../../hooks';
 import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
@@ -18,6 +18,7 @@ export const ProceedFundingButton = () => {
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
   const continueHostedApplicationMutation = useContinueHostedApplication();
+  const invalidateCta = useInvalidateCta();
 
   if (!sdk) return null;
 
@@ -33,6 +34,7 @@ export const ProceedFundingButton = () => {
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
+            invalidateCta();
           },
           onError: (error) => {
             console.error('Failed to continue application', error);

package/src/components/modal/ConsentModal.tsx

@@ -6,6 +6,7 @@ import { useDetectSmallScreen } from '../../hooks';
 import { FundingSteps } from './FundingSteps';
 import { Modal } from './Modal';
 import { ModalFooter } from './ModalFooter';
+import { STATIC_BASE_URL, MODAL_LOGO_IMAGE_URL } from '../../config';
 
 type ConsentModalProps = {
   isModalOpen: boolean;
@@ -26,7 +27,7 @@ export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps)
 
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      {!isSmallScreen && <ImageContainer src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />}
+      {!isSmallScreen && <ImageContainer src={`${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`} />}
       <Flex direction="column" gap="8" padding={isReducedSpacing ? '4' : '6'}>
         <Flex direction="column" gap="6">
           <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">

package/src/components/modal/ModalFooter.tsx

@@ -3,7 +3,7 @@ import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
 import { FormattedMessage } from 'react-intl';
 
-import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
+import { useDetectSmallScreen, useStartHostedApplication, useInvalidateCta } from '../../hooks';
 
 type ModalFooterType = {
   setOpen: (isOpen: boolean) => void;
@@ -13,6 +13,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const { isMobile } = useDetectDeviceSize();
   const startHostedAppMutation = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
+  const invalidateCta = useInvalidateCta();
 
   const handleStartApplication = () => {
     startHostedAppMutation.mutate(undefined, {
@@ -20,6 +21,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
         const { next } = nextUrl;
         setOpen(false);
         window.open(next);
+        invalidateCta();
       },
       onError: (error) => {
         console.error('Failed to start application', error);

package/src/config/fontParameters.ts

@@ -1,3 +1,5 @@
+import { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL } from './staticUrls';
+
 export type FontParamsType = {
   fontFamily: string;
   fontUrl: string;
@@ -6,13 +8,13 @@ export type FontParamsType = {
 
 const dmSansParams = {
   fontFamily: 'DM Sans',
-  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
+  fontUrl: `${STATIC_BASE_URL}${DM_SANS_URL}`,
   fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
 };
 
 const merrionSansParams = {
   fontFamily: 'Merrion Sans',
-  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
+  fontUrl: `${STATIC_BASE_URL}${MERRION_SANS_URL}`,
   fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
 };
 

package/src/config/index.ts

@@ -5,3 +5,4 @@ export { WAYFLYER_HEADLESS_SDK_ID } from './scriptId';
 export { HEADLESS_SDK_URL } from './url';
 export { WHITELISTED_PARTNER_IDS } from './whitelistedPartnerIds';
 export type { PartnerId, PartnerTheme } from './whitelistedPartnerIds';
+export { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL, MODAL_LOGO_IMAGE_URL } from './staticUrls';

package/src/config/staticUrls.ts

@@ -0,0 +1,4 @@
+export const STATIC_BASE_URL = 'https://static.wayflyer.com/flyui-assets';
+export const DM_SANS_URL = '/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf';
+export const MERRION_SANS_URL = 'fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf';
+export const MODAL_LOGO_IMAGE_URL = '/logos/wayflyer-ef.png';

package/src/hooks/index.ts

@@ -5,3 +5,5 @@ export { useDetectSmallScreen } from './useDetectSmallScreen';
 export { useContinueHostedApplication } from './useContinueHostedApplication';
 export { useDismissCta } from './useDismissCta';
 export { useRemoveInerted } from './useRemoveInerted';
+export { usePreloadImage } from './usePreloadImage';
+export { useInvalidateCta } from './useInvalidateCta';

package/src/hooks/useCtaBanner.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 
 import { fetchCtaBanner } from '../api';
 import { usePartnerContext } from './usePartnerContext';
@@ -7,8 +7,11 @@ export const useCtaBanner = () => {
   const { companyToken, options } = usePartnerContext();
 
   return useQuery({
-    queryKey: ['cta', companyToken, options],
+    queryKey: ['cta', companyToken],
     queryFn: () => fetchCtaBanner(companyToken, options),
     staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    placeholderData: keepPreviousData,
+    enabled: !!companyToken,
   });
 };

package/src/hooks/useInvalidateCta.ts

@@ -0,0 +1,13 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { usePartnerContext } from './index';
+
+export const useInvalidateCta = () => {
+  const queryClient = useQueryClient();
+  const { companyToken } = usePartnerContext();
+
+  return () =>
+    queryClient.invalidateQueries({
+      queryKey: ['cta', companyToken],
+    });
+};

package/src/hooks/usePreloadImage.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export function usePreloadImage(src: string) {
+  useEffect(() => {
+    if (!src) return;
+
+    const img = new Image();
+    img.decoding = 'async';
+    img.fetchPriority = 'high';
+    img.src = src;
+
+    img.decode();
+  }, [src]);
+}

package/src/utils/initializeHeadlessSdk.ts

@@ -1,6 +1,6 @@
-import { IHeadlessWayflyerSdk, SdkOptionsType } from '@wf-financing/embedded-types';
+import { IWayflyerHeadlessSdk, SdkOptionsType } from '@wf-financing/embedded-types';
 
-export const initializeHeadlessSdk = (companyToken: string, options?: SdkOptionsType): IHeadlessWayflyerSdk => {
+export const initializeHeadlessSdk = (companyToken: string, options?: SdkOptionsType): IWayflyerHeadlessSdk => {
   if (!window.WayflyerHeadlessSdk) {
     throw new Error('Failed to load WayflyerHeadlessSdk from the script.');
   }
@@ -8,9 +8,9 @@ export const initializeHeadlessSdk = (companyToken: string, options?: SdkOptions
   const WayflyerHeadlessSdk = window.WayflyerHeadlessSdk;
 
   if (options) {
-    const wayflyerCtaSdk = new WayflyerHeadlessSdk(companyToken, options);
+    const wayflyerSdk = new WayflyerHeadlessSdk(companyToken, options);
 
-    return wayflyerCtaSdk;
+    return wayflyerSdk;
   }
 
   return new WayflyerHeadlessSdk(companyToken);

package/src/utils/loadScriptAndInitializeSdk.ts

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

package/module-types/embedded-sdk-cta-module.d.ts

@@ -1,4 +0,0 @@
-declare module 'https://unpkg.com/@wf-financing/headless/dist/index.es.js' {
-  const HeadlessWayflyerCtaSdk: any;
-  export = HeadlessWayflyerCtaSdk;
-}