@wf-financing/ui 3.9.2 → 3.11.0

package/global.d.ts

@@ -1,4 +1,4 @@
-import { IWayflyerUiSdkConstructor, IWayflyerHeadlessSdkConstructor } from '@wf-financing/embedded-types';
+import { IWayflyerHeadlessSdkConstructor, IWayflyerUiSdkConstructor } from '@wf-financing/embedded-types';
 
 declare global {
   interface Window {

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.9.2",
+  "version": "3.11.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -36,7 +36,8 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.6.0"
+    "@wf-financing/embedded-types": "0.6.0",
+    "@wf-financing/logger": "1.1.0"
   },
   "publishConfig": {
     "access": "public"

package/src/App.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FlyUIProvider } from '@wayflyer/flyui';
 import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { Logger } from '@wf-financing/logger';
 import { useState } from 'react';
 import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
@@ -46,6 +47,7 @@ export const App = ({
 
   const onWidgetDismiss = () => {
     setIsWidgetDismissed(true);
+    Logger.logEvent('ui_sdk_banner_dismissed');
   };
 
   return (
@@ -65,8 +67,9 @@ export const App = ({
           theme={theme}
           intl={intl}
           onThemeLoad={() => setIsThemeLoaded(true)}
-          // TODO: implement error notification event after required BE endpoints become available
-          onThemeLoadError={() => console.error('Error while loading theme')}
+          onThemeLoadError={() => {
+            Logger.logError(`Error while loading theme: ${theme}`);
+          }}
         >
           {isThemeLoaded && <CtaWidget />}
         </FlyUIProvider>

package/src/CtaWidget.tsx

@@ -22,7 +22,7 @@ export const CtaWidget = () => {
     <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>
       {showBanner && (
         <AnimationWrapper skipAnimation={skipAnimation}>
-          <CtaBanner skipAnimation={skipAnimation} />
+          <CtaBanner skipAnimation={skipAnimation} bannerState={data.state} />
         </AnimationWrapper>
       )}
     </AnimatePresence>

package/src/api/getHeadlessSdkInstance.ts

@@ -1,5 +1,6 @@
 import { IWayflyerHeadlessSdk, SdkOptionsType } 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';
 
@@ -28,14 +29,15 @@ export const getHeadlessSdkInstance = async (companyToken: string, options?: Sdk
     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 (error) {
-    console.error('Error in loading headless SDK:', error);
+  } catch {
+    Logger.logError('Error in loading headless SDK');
     throw new Error('Failed to load script');
   }
 };

package/src/components/banner/CloseButton.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex } from '@wayflyer/flyui';
 import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
+import { Logger } from '@wf-financing/logger';
 import { useDismissCta, usePartnerContext } from '../../hooks';
 
 export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
@@ -12,7 +13,7 @@ export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
 
     dismissCta.mutate(undefined, {
       onError: (error) => {
-        console.error('Failed to dismiss CTA', error);
+        Logger.logError(`Failed to dismiss CTA ${error.message}`);
       },
     });
   };

package/src/components/banner/CtaBanner.snapshot.stories.tsx

@@ -12,6 +12,7 @@ const defaultArgs = {
   onWidgetDismiss: () => {},
   isWidgetDismissed: false,
   skipAnimation: false,
+  bannerState: 'test',
   portalContainer,
 };
 
@@ -19,7 +20,7 @@ type CtaBannerStoryArgs = typeof defaultArgs;
 
 const Template = (args: CtaBannerStoryArgs) => (
   <PartnerContext.Provider value={{ ...args }}>
-    <CtaBanner skipAnimation={false} />
+    <CtaBanner skipAnimation={false} bannerState="test" />
   </PartnerContext.Provider>
 );
 

package/src/components/banner/CtaBanner.tsx

@@ -2,6 +2,8 @@ import { Flex, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
 import { motion, MotionProps } from 'framer-motion';
 import { css, styled } from 'styled-components';
 
+import { Logger } from '@wf-financing/logger';
+import { useEffect } from 'react';
 import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
 import { usePreloadImage } from '../../hooks';
 import { CtaBannerContent } from './CtaBannerContent';
@@ -60,9 +62,10 @@ const bannerAnimationProps: MotionProps = {
 
 type Props = {
   skipAnimation: boolean;
+  bannerState: string;
 };
 
-export const CtaBanner = ({ skipAnimation }: Props) => {
+export const CtaBanner = ({ skipAnimation, bannerState }: Props) => {
   const { isMobile, isTablet } = useDetectDeviceSize();
   const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
   const { themeName } = useTheme();
@@ -71,6 +74,10 @@ export const CtaBanner = ({ skipAnimation }: Props) => {
   const isTertiaryTheme = TERTIARY_THEMES.includes(themeName);
   usePreloadImage(logoImageUrl);
 
+  useEffect(() => {
+    Logger.logEvent('banner_cta_visible', { bannerState });
+  }, []);
+
   return (
     <BannerContainer
       $isLightBgTheme={isLightBgTheme}

package/src/components/banner/ProceedFundingButton.tsx

@@ -1,14 +1,15 @@
 import { Button } from '@wayflyer/flyui';
 import {
+  ContinueHostedApplicationResponseType,
   CtaContinueFundingType,
   CtaGenericOfferType,
   CtaIndicativeOfferType,
   CtaStateType,
-  ContinueHostedApplicationResponseType,
 } from '@wf-financing/embedded-types';
+import { Logger } from '@wf-financing/logger';
 import { useState } from 'react';
 
-import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
+import { useContinueHostedApplication, useCtaBanner } from '../../hooks';
 import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
@@ -29,13 +30,14 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const handleContinueHostedApplication = () => {
     switch (state) {
       case CtaStateType.CONTINUE_APPLICATION:
+        Logger.logEvent('cta_continue_hosted_application');
         mutate(undefined, {
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
           },
           onError: (error) => {
-            console.error('Failed to continue application', error);
+            Logger.logError(`Failed to continue application ${error.message}`);
           },
         });
         break;

package/src/components/modal/ModalFooter.tsx

@@ -1,6 +1,7 @@
 import { Button, Flex, Link, Text, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
+import { Logger } from '@wf-financing/logger';
 import { FormattedMessage } from 'react-intl';
 
 import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
@@ -15,6 +16,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const isSmallScreen = useDetectSmallScreen();
 
   const handleStartApplication = () => {
+    Logger.logEvent('cta_start_hosted_application');
     mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
@@ -22,12 +24,13 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
         window.open(next);
       },
       onError: (error) => {
-        console.error('Failed to start application', error);
+        Logger.logError(`Failed to continue application ${error.message}`);
       },
     });
   };
 
   const handleOpenExternalLink = () => {
+    Logger.logEvent('cta_open_privacy_note');
     window.open('https://wayflyer.com/en/privacy-notice', '_blank', 'noopener,noreferrer');
   };
 

package/src/main.tsx

@@ -1,11 +1,12 @@
 import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { Logger } from '@wf-financing/logger';
 import ReactDOM from 'react-dom/client';
 import { StyleSheetManager } from 'styled-components';
 
 import { MotionGlobalConfig } from 'framer-motion';
 import { App } from './App';
 import { PartnerTheme } from './config';
-import { applyFont, createRoots } from './utils';
+import { applyFont, applyStyles, createRoots } from './utils';
 
 let root: ReactDOM.Root | undefined;
 let savedTargetId: string | undefined;
@@ -24,11 +25,16 @@ export const mountToTarget = async (
   }
 
   const hostEl = document.getElementById(savedTargetId as string);
-  if (!hostEl) throw new Error(`Target element with id "${savedTargetId}" not found.`);
+  if (!hostEl) {
+    Logger.logError(`Target element with id "${savedTargetId}" not found.`);
+    throw new Error(`Target element with id "${savedTargetId}" not found.`);
+  }
 
-  const shadow = hostEl.shadowRoot ?? hostEl.attachShadow({ mode: 'open' });
+  const shadow = hostEl.shadowRoot ?? (hostEl.attachShadow({ mode: 'open' }) as ShadowRoot);
 
+  // TODO: remove font loading from SDK
   try {
+    applyStyles({ shadow });
     await applyFont(shadow, partnerTheme);
   } catch (error) {
     console.error(error);
@@ -60,4 +66,6 @@ export const mountToTarget = async (
       />
     </StyleSheetManager>,
   );
+
+  Logger.logEvent('cta_mounted_to_target');
 };

package/src/utils/applyStyles.ts

@@ -0,0 +1,41 @@
+import assetsManifest from '@wayflyer/flyui/manifest.json';
+
+const LINK_TAG_ID = 'wf-flyui-styles';
+
+type ApplyFontsType = ({
+  shadow,
+  onStylesLoad,
+  onStylesLoadError,
+}: {
+  shadow: ShadowRoot;
+  onStylesLoad?: () => void;
+  onStylesLoadError?: (error: unknown) => void;
+}) => void;
+
+export const applyStyles: ApplyFontsType = async ({ shadow, onStylesLoad, onStylesLoadError }) => {
+  if (!assetsManifest || !('styles' in assetsManifest)) {
+    return onStylesLoadError?.('Style manifest not found');
+  }
+
+  const stylesUrl = assetsManifest.styles as string;
+
+  const linkTag = document.createElement('link');
+  linkTag.href = stylesUrl;
+  linkTag.rel = 'stylesheet';
+  linkTag.id = LINK_TAG_ID;
+
+  linkTag.onload = () => {
+    onStylesLoad?.();
+  };
+
+  linkTag.onerror = (error) => {
+    onStylesLoadError?.(error);
+  };
+
+  const existingLinkTag = document.getElementById(LINK_TAG_ID);
+  if (existingLinkTag) {
+    existingLinkTag.replaceWith(linkTag);
+  } else {
+    shadow.prepend(linkTag);
+  }
+};

package/src/utils/index.ts

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

package/src/utils/parseJwt.ts

@@ -1,3 +1,5 @@
+import { Logger } from '@wf-financing/logger';
+
 type CompanyToken = {
   sub: string;
 };
@@ -5,8 +7,8 @@ type CompanyToken = {
 export const parseJwt = (token: string): CompanyToken | null => {
   try {
     return JSON.parse(atob(token.split('.')[1]));
-  } catch (error) {
-    console.error('Error parsing a company token:', error);
+  } catch {
+    Logger.logError('Error parsing a company token');
     return null;
   }
 };