@wf-financing/ui 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -37,9 +37,9 @@
     "react-intl": "^6.2.5",
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "1.0.0",
-    "@wf-financing/ui-assets": "1.0.0",
-    "@wf-financing/logger": "2.0.0"
+    "@wf-financing/embedded-types": "1.1.0",
+    "@wf-financing/ui-assets": "1.0.1",
+    "@wf-financing/logger": "2.1.0"
   },
   "publishConfig": {
     "access": "public"

package/sdk/index.ts

@@ -1,10 +1,11 @@
 import { PartnerCallbackType, UiSdkOptions } from '@wf-financing/embedded-types';
 
-import { PartnerTheme } from '../src/config';
+import { PartnerTheme, APPLICATION_VERSION } from '../src/config';
 import { mountToTarget } from '../src/main';
 import { getPartnerIdFromToken, getPartnerThemeById } from '../src/utils';
 
 export class WayflyerUiSdk {
+  readonly sdkVersion = APPLICATION_VERSION;
   private readonly partnerTheme: PartnerTheme;
 
   constructor(

package/src/App.tsx

@@ -17,6 +17,7 @@ type AppPropsType = {
   partnerCallback: PartnerCallbackType;
   onWidgetClose: () => void;
   portalContainer: HTMLElement;
+  mountToTargetTimestamp: number;
 };
 
 const queryClient = new QueryClient();
@@ -31,6 +32,7 @@ export const App = ({
   partnerCallback,
   onWidgetClose,
   portalContainer,
+  mountToTargetTimestamp,
 }: AppPropsType) => {
   const [isThemeLoaded, setIsThemeLoaded] = useState(false);
   const [isWidgetDismissed, setIsWidgetDismissed] = useState(false);
@@ -61,6 +63,7 @@ export const App = ({
           portalContainer,
           isWidgetDismissed,
           onWidgetDismiss,
+          mountToTargetTimestamp,
         }}
       >
         <FlyUIProvider

package/src/CtaWidget.tsx

@@ -5,7 +5,14 @@ import { ContinueHostedApplicationResponseType } from '@wf-financing/embedded-ty
 import { AnimationWrapper } from './components/banner/AnimationWrapper';
 import { CtaBanner } from './components/banner/CtaBanner';
 import { ConsentModal } from './components/modal/ConsentModal.tsx';
-import { useCopy, useCtaBanner, usePartnerContext, useContinueHostedApplication, usePreloadImage } from './hooks';
+import {
+  useCopy,
+  useCtaBanner,
+  usePartnerContext,
+  useContinueHostedApplication,
+  usePreloadImage,
+  useNotificationOnRender,
+} from './hooks';
 import { getBannerConfig } from './utils';
 
 export const CtaWidget = () => {
@@ -16,8 +23,9 @@ export const CtaWidget = () => {
   const { mutate: continueHostedApplicationMutaion } = useContinueHostedApplication();
   const [isModalOpen, setIsModalOpen] = useState(false);
   usePreloadImage(copy);
+  const sendNotification = useNotificationOnRender();
 
-  const showBanner = cta && copy && !isWidgetDismissed;
+  const showBanner = !!cta && !!copy && !isWidgetDismissed;
 
   if (!showBanner) return null;
 
@@ -41,6 +49,7 @@ export const CtaWidget = () => {
   };
 
   const bannerConfig = getBannerConfig(cta, copy, handleIsModalOpen, handleContinueHostedApplication);
+  sendNotification(cta, bannerConfig);
 
   return (
     <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>

package/src/EventProvider.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { Logger } from '@wf-financing/logger';
+
+import { APPLICATION_VERSION } from './config';
+import { EventContext, type EventAttributes } from './utils';
+
+type EventProviderProps = {
+  children: ReactNode;
+};
+
+export const EventProvider = ({ children }: EventProviderProps) => {
+  const logEvent = (name: string, attributes: Partial<EventAttributes> = {}) => {
+    const payload = {
+      ...attributes,
+      sdk_version: APPLICATION_VERSION,
+    };
+
+    Logger.logEvent(name, payload);
+  };
+
+  return <EventContext.Provider value={{ logEvent }}>{children}</EventContext.Provider>;
+};

package/src/components/banner/BulletList.tsx

@@ -15,7 +15,7 @@ export const BulletList = ({ isOnDarkTheme, bulletPoints }: BulletListProps) =>
         <Flex gap="4">
           {bulletPoints.map((bulletPoint: string) => (
             <Flex key={bulletPoint} gap="1" align="center">
-              <Icon color={isOnDarkTheme ? 'white' : 'default'}>
+              <Icon color={isOnDarkTheme ? 'onDark' : 'default'}>
                 <IconCheck12Line />
               </Icon>
               <Text

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

@@ -11,6 +11,8 @@ const bannerConfig = {
   bulletPoints: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
   buttonText: 'Get funding',
   buttonAction: () => {},
+  version: '1.0.0',
+  type: 'genericOffer',
 };
 
 const defaultArgs = {
@@ -21,6 +23,7 @@ const defaultArgs = {
   isWidgetDismissed: false,
   skipAnimation: false,
   bannerState: 'test',
+  mountToTargetTimestamp: 10,
   bannerConfig,
   portalContainer,
 };

package/src/components/modal/ConsentModal.snapshot.stories.tsx

@@ -13,6 +13,7 @@ const appArgs = {
   onWidgetDismiss: () => {},
   isWidgetDismissed: false,
   portalContainer,
+  mountToTargetTimestamp: 10,
 };
 
 const fn = (): void => {};

package/src/config/whitelistedPartnerIds.ts

@@ -22,4 +22,7 @@ export const WHITELISTED_PARTNER_IDS = {
 
   '0e553c21-13a7-461f-bf4d-5a92fad4a403': 'reveni',
   'bb9f8122-66ff-41bd-a8c0-52a9af0b3b4f': 'reveni',
+
+  '9f21c2f7-fd67-4557-82df-8e2f4783c66a': 'linkMyBooks',
+  '01aba3d9-21d6-4a40-b6d2-a9f0c8628b0f': 'linkMyBooks',
 } as const satisfies Record<string, PartnerTheme>;

package/src/hooks/index.ts

@@ -6,4 +6,5 @@ export { useContinueHostedApplication } from './useContinueHostedApplication';
 export { useDismissCta } from './useDismissCta';
 export { useRemoveInerted } from './useRemoveInerted';
 export { usePreloadImage } from './usePreloadImage';
-export { useCopy } from './useCopy.ts';
+export { useCopy } from './useCopy';
+export { useNotificationOnRender } from './useNotificationOnRender';

package/src/hooks/useEventContext.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { EventContext } from '../utils';
+
+export const useEventContext = () => {
+  const eventContext = useContext(EventContext);
+
+  if (!eventContext) {
+    throw new Error('useEventContext must be used within an EventProvider');
+  }
+
+  return eventContext;
+};

package/src/hooks/useNotificationOnRender.ts

@@ -0,0 +1,30 @@
+import { CtaResponseType, CtaStateType } from '@wf-financing/embedded-types';
+
+import { useEventContext } from './useEventContext';
+import { usePartnerContext } from './usePartnerContext';
+import { type BannerConfig } from '../utils';
+
+export const useNotificationOnRender = () => {
+  const { logEvent } = useEventContext();
+  const { mountToTargetTimestamp } = usePartnerContext();
+
+  return (cta: CtaResponseType, bannerConfig: BannerConfig) => {
+    if (!cta || !bannerConfig) return;
+
+    const bannerRenderingLatency = Date.now() - mountToTargetTimestamp;
+
+    const { state, data } = cta;
+    const attrs: Record<string, string | number> = {
+      cta_state: state,
+      banner_copy_version: bannerConfig.version,
+      banner_rendering_latency: bannerRenderingLatency,
+      copy_type: bannerConfig.type,
+    };
+
+    if (state === CtaStateType.CONTINUE_APPLICATION) {
+      attrs.required_action = data.config.required_action;
+    }
+
+    logEvent('cta_mounted_to_target', attrs);
+  };
+};

package/src/main.tsx

@@ -1,10 +1,10 @@
 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';
 
 import { MotionGlobalConfig } from 'framer-motion';
 import { App } from './App';
+import { EventProvider } from './EventProvider';
 import { PartnerTheme } from './config';
 import { applyStyles, createRoots } from './utils';
 
@@ -18,6 +18,7 @@ export const mountToTarget = async (
   companyToken: string,
   options?: UiSdkOptions,
 ): Promise<void> => {
+  const mountToTargetTimestamp = Date.now();
   const isNewTargetId = targetId !== savedTargetId;
 
   if (isNewTargetId) {
@@ -53,16 +54,17 @@ export const mountToTarget = async (
 
   root.render(
     <StyleSheetManager target={styledComponentsStyleRoot}>
-      <App
-        theme={partnerTheme}
-        companyToken={companyToken}
-        options={options}
-        partnerCallback={partnerCallback}
-        onWidgetClose={handleCloseWidget}
-        portalContainer={portalRoot}
-      />
+      <EventProvider>
+        <App
+          theme={partnerTheme}
+          companyToken={companyToken}
+          options={options}
+          partnerCallback={partnerCallback}
+          onWidgetClose={handleCloseWidget}
+          portalContainer={portalRoot}
+          mountToTargetTimestamp={mountToTargetTimestamp}
+        />
+      </EventProvider>
     </StyleSheetManager>,
   );
-
-  Logger.logEvent('cta_mounted_to_target');
 };

package/src/utils/buildBannerConfig.ts

@@ -4,6 +4,8 @@ type CopySection = {
   mainText: string;
   buttonText: string;
   bulletPoints?: string[];
+  version: string;
+  type: string;
 };
 
 export type BannerConfig = CopySection & {
@@ -23,4 +25,6 @@ export const buildBannerConfig: BuildBannerConfig = (copySection, buttonAction,
   bulletPoints: copySection.bulletPoints,
   buttonText: copySection.buttonText,
   buttonAction: buttonAction,
+  version: copySection.version,
+  type: copySection.type,
 });

package/src/utils/eventContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export type EventAttributes = Record<string, string | number | boolean | null | undefined>;
+export type EventContextValue = {
+  logEvent: (name: string, extraAttributes?: Partial<EventAttributes>) => void;
+};
+
+export const EventContext = createContext<EventContextValue | null>(null);

package/src/utils/index.ts

@@ -10,3 +10,4 @@ export { getModalItems } from './getModalItems';
 export { injectUrlInTemplate } from './injectUrlInTemplate';
 export { buildBannerConfig, type BannerConfig } from './buildBannerConfig';
 export { getBannerConfig } from './getBannerConfig';
+export { EventContext, type EventContextValue, type EventAttributes } from './eventContext';

package/src/utils/partnerContext.ts

@@ -9,6 +9,7 @@ export type PartnerContextType = {
   onWidgetDismiss: () => void;
   isWidgetDismissed: boolean;
   portalContainer: HTMLElement;
+  mountToTargetTimestamp: number;
 };
 
 type PartnerContextWithDefaultType = PartnerContextType | null;