@wf-financing/ui 3.13.5 → 4.0.0

package/src/hooks/usePreloadImage.ts

@@ -1,20 +1,40 @@
 import { useEffect } from 'react';
+import type { Copy } from '@wf-financing/ui-assets';
 
-export function usePreloadImage(src: string) {
+export const usePreloadImage = (copy?: Copy) => {
   useEffect(() => {
     const head = document.head;
 
-    if (!src) return;
+    if (!copy) return;
 
-    const imageLink = document.createElement('link');
-    imageLink.rel = 'preload';
-    imageLink.as = 'image';
-    imageLink.href = src;
+    const consentModal = copy.consentModal;
+    const logoUrl = consentModal.logoUrl;
+    const partnerTemplate = copy?.partnerTemplate;
+    const partnerLogoUrl = partnerTemplate?.partnerLogoUrl;
 
-    head.appendChild(imageLink);
+    const imageUrls = [logoUrl, partnerLogoUrl];
+
+    const imageNodes = imageUrls.map((imageUrl) => {
+      if (imageUrl) {
+        const imageLink = document.createElement('link');
+        imageLink.rel = 'preload';
+        imageLink.as = 'image';
+        imageLink.href = imageUrl;
+
+        head.appendChild(imageLink);
+
+        return imageLink;
+      }
+
+      return null;
+    });
 
     return () => {
-      head.removeChild(imageLink);
+      imageNodes.forEach((imageUrl) => {
+        if (imageUrl) {
+          head.removeChild(imageUrl);
+        }
+      });
     };
-  }, [src]);
-}
+  }, [copy]);
+};

package/src/hooks/useStartHostedApplication.ts

@@ -5,8 +5,9 @@ import { usePartnerContext } from './usePartnerContext';
 
 export const useStartHostedApplication = () => {
   const { companyToken, options, partnerCallback } = usePartnerContext();
+  const headlessOptions = { isSandbox: options?.isSandbox };
 
   return useMutation({
-    mutationFn: () => startHostedApplication(companyToken, partnerCallback, options),
+    mutationFn: () => startHostedApplication(companyToken, partnerCallback, headlessOptions),
   });
 };

package/src/main.tsx

@@ -1,4 +1,4 @@
-import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, UiSdkOptions } from '@wf-financing/embedded-types';
 import { Logger } from '@wf-financing/logger';
 import ReactDOM from 'react-dom/client';
 import { StyleSheetManager } from 'styled-components';
@@ -16,7 +16,7 @@ export const mountToTarget = async (
   partnerTheme: PartnerTheme,
   partnerCallback: PartnerCallbackType,
   companyToken: string,
-  options?: SdkOptionsType,
+  options?: UiSdkOptions,
 ): Promise<void> => {
   const isNewTargetId = targetId !== savedTargetId;
 

package/src/utils/index.ts

@@ -1,4 +1,3 @@
-export { applyFont } from './applyFont';
 export { applyStyles } from './applyStyles';
 export { createRoots } from './createRoots';
 export { getPartnerIdFromToken } from './getPartnerIdFromToken';

package/src/utils/initializeHeadlessSdk.ts

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

package/src/utils/loadScriptAndInitializeSdk.ts

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

package/src/utils/partnerContext.ts

@@ -1,10 +1,10 @@
-import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, UiSdkOptions } from '@wf-financing/embedded-types';
 import { createContext } from 'react';
 
 export type PartnerContextType = {
   companyToken: string;
   partnerCallback: PartnerCallbackType;
-  options?: SdkOptionsType;
+  options?: UiSdkOptions;
   onWidgetClose: () => void;
   onWidgetDismiss: () => void;
   isWidgetDismissed: boolean;

package/src/components/modal/FundingSteps.tsx

@@ -1,34 +0,0 @@
-import { Flex, Text } from '@wayflyer/flyui';
-
-import { useDetectSmallScreen } from '../../hooks';
-import { getModalItems } from '../../utils';
-
-type ModalDescriptions = {
-  title: string;
-  description: string;
-};
-
-type FundingStepsProps = {
-  descriptions: ModalDescriptions[];
-};
-
-export const FundingSteps = ({ descriptions }: FundingStepsProps) => {
-  const isSmallScreen = useDetectSmallScreen();
-  const modalDescriptions = getModalItems(descriptions);
-
-  return (
-    <Flex direction="column" gap="2">
-      {modalDescriptions.map(({ title, description, Icon }) => (
-        <Flex key={title} direction="row" align="center" gap="2">
-          {!isSmallScreen && <Icon />}
-          <Flex direction="column">
-            <Text color="default" fontWeight="medium">
-              {title}
-            </Text>
-            <Text color="placeholder">{description}</Text>
-          </Flex>
-        </Flex>
-      ))}
-    </Flex>
-  );
-};

package/src/config/fontParameters.ts

@@ -1,31 +0,0 @@
-import { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL, MONTSERRAT_URL } from './staticUrls';
-
-export type FontParamsType = {
-  fontFamily: string;
-  fontUrl: string;
-  fallbackFontUrl: string;
-};
-
-const dmSansParams = {
-  fontFamily: 'DM Sans',
-  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: `${STATIC_BASE_URL}${MERRION_SANS_URL}`,
-  fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
-};
-
-const montserratParams = {
-  fontFamily: 'Montserrat',
-  fontUrl: `${STATIC_BASE_URL}${MONTSERRAT_URL}`,
-  fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/montserrat/Montserrat-VariableFont_wght.ttf',
-};
-
-export const FONT_PARAMS: Record<string, FontParamsType> = {
-  dmSansParams,
-  merrionSansParams,
-  montserratParams,
-};

package/src/config/staticUrls.ts

@@ -1,5 +0,0 @@
-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/merrion-sans/Merrion_Sans-Regular.woff2';
-export const MONTSERRAT_URL = '/fonts/montserrat/Montserrat-VariableFont_wght.ttf';
-export const MODAL_LOGO_IMAGE_URL = '/logos/wayflyer-ef.png';

package/src/utils/applyFont.ts

@@ -1,22 +0,0 @@
-import { FONT_PARAMS, PartnerTheme } from '../config';
-import { loadFont } from './loadFont';
-
-type ApplyFontsType = (shadow: ShadowRoot, partnerTheme: PartnerTheme) => Promise<void>;
-
-export const applyFont: ApplyFontsType = async (shadow, partnerTheme) => {
-  const { dmSansParams, merrionSansParams, montserratParams } = FONT_PARAMS;
-
-  switch (partnerTheme) {
-    case 'whiteLabel':
-      await loadFont(shadow, dmSansParams);
-      break;
-    case 'athena':
-      await loadFont(shadow, montserratParams);
-      break;
-    case 'wayflyer':
-      await loadFont(shadow, merrionSansParams);
-      break;
-    default:
-      await loadFont(shadow, merrionSansParams);
-  }
-};

package/src/utils/loadFont.ts

@@ -1,33 +0,0 @@
-import { FontParamsType } from 'src/config';
-
-type LoadFontType = (shadow: ShadowRoot, fontParams: FontParamsType) => Promise<void>;
-
-export const loadFont: LoadFontType = async (shadow, fontParams) => {
-  const { fontFamily, fontUrl, fallbackFontUrl } = fontParams;
-  const fontStylesId = 'font-styles';
-
-  let font: FontFace;
-
-  try {
-    font = new FontFace(fontFamily, `url(${fontUrl})`);
-    await font.load();
-  } catch {
-    font = new FontFace(fontFamily, `url(${fallbackFontUrl})`);
-    await font.load();
-  } finally {
-    document.fonts.add(font!);
-  }
-
-  let fontStyles = shadow.getElementById(fontStylesId);
-
-  if (!fontStyles) {
-    fontStyles = document.createElement('style');
-    fontStyles.id = fontStylesId;
-    fontStyles.textContent = `
-      :host { font-family: "${fontFamily}", sans-serif; background-color: transparent !important; overflow: visible !important; }
-      ::slotted(*) { font-family: inherit; }
-    `;
-
-    shadow.appendChild(fontStyles);
-  }
-};