@wf-financing/ui 4.4.0 → 4.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -38,8 +38,8 @@
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
     "@wf-financing/embedded-types": "1.1.0",
-    "@wf-financing/logger": "2.1.0",
-    "@wf-financing/ui-assets": "1.0.2"
+    "@wf-financing/ui-assets": "1.0.2",
+    "@wf-financing/logger": "2.1.0"
   },
   "publishConfig": {
     "access": "public"

package/src/App.tsx

@@ -5,10 +5,8 @@ import { Logger } from '@wf-financing/logger';
 import { fetchThemeOverrides } from '@wayflyer/flyui-tokens';
 import { getPartnerIdFromToken } from './utils';
 import { useState } from 'react';
-import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
-import { CtaWidget } from './CtaWidget';
-import enMessages from './locales/en.json';
+import { CtaWidgetContainer } from './CtaWidgetContainer.tsx';
 import { PartnerContext } from './utils';
 
 type AppPropsType = {
@@ -21,9 +19,6 @@ type AppPropsType = {
 };
 
 const queryClient = new QueryClient();
-const messages = {
-  en: enMessages,
-};
 
 export const App = ({
   companyToken,
@@ -36,16 +31,6 @@ export const App = ({
   const [isThemeLoaded, setIsThemeLoaded] = useState(false);
   const [isWidgetDismissed, setIsWidgetDismissed] = useState(false);
 
-  const locale = 'en';
-
-  const intl: IntlShape = createIntl(
-    {
-      locale,
-      messages: messages[locale],
-    },
-    createIntlCache(),
-  );
-
   const onWidgetDismiss = () => {
     setIsWidgetDismissed(true);
     Logger.logEvent('ui_sdk_banner_dismissed');
@@ -73,13 +58,12 @@ export const App = ({
               Logger.logError(`Error while loading theme overridesfor partner: ${companyToken}`);
             },
           })}
-          intl={intl}
           onThemeLoad={() => setIsThemeLoaded(true)}
           onThemeLoadError={() => {
             Logger.logError(`Error while loading theme for partner: ${companyToken}`);
           }}
         >
-          {isThemeLoaded && <CtaWidget />}
+          {isThemeLoaded && <CtaWidgetContainer />}
         </FlyUIProvider>
       </PartnerContext.Provider>
     </QueryClientProvider>

package/src/CtaWidget.snapshot.stories.tsx

@@ -0,0 +1,276 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  type CtaGenericOfferType,
+  type CtaIndicativeOfferType,
+  type CtaContinueFundingType,
+  CtaStateType,
+  ApplicationRequiredActions,
+} from '@wf-financing/embedded-types';
+import type { Copy } from '@wf-financing/ui-assets';
+
+import { PartnerContext, EventContext, type PartnerContextType } from './utils';
+import { CtaWidget } from './CtaWidget.tsx';
+
+const portalContainer = document.createElement('div');
+document.body.append(portalContainer);
+const partnerContextValue: PartnerContextType = {
+  companyToken: 'demo-token',
+  partnerCallback: () => {},
+  onWidgetClose: () => {},
+  onWidgetDismiss: () => {},
+  isWidgetDismissed: false,
+  mountToTargetTimestamp: 10,
+  portalContainer,
+};
+const eventContextValue = {
+  logEvent: () => {},
+};
+
+const genericOfferCta: CtaGenericOfferType = {
+  state: CtaStateType.GENERIC_OFFER,
+  data: {
+    config: {
+      text: 'Business financing made easy. Unlock your next stage of growth with Wayflyer today.',
+      bullet_points: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
+      button_label: 'Get funding',
+    },
+  },
+  dismissal_key: 'generic_offer|0',
+};
+const indicativeOfferCta: CtaIndicativeOfferType = {
+  state: CtaStateType.INDICATIVE_OFFER,
+  data: {
+    offer: {
+      id: 'id',
+      amount: 100000,
+      currency: 'USD',
+    },
+    config: {
+      text: "You've pre-qualified for up to $100,000 in financing with Wayflyer. Unlock your next stage of growth.",
+      bullet_points: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
+      button_label: 'Get funding',
+    },
+  },
+  dismissal_key: 'indicative_offer|0',
+};
+const completeApplicationCta: CtaContinueFundingType = {
+  state: CtaStateType.CONTINUE_APPLICATION,
+  data: {
+    config: {
+      text: 'Almost there! Continue your application for financing with Wayflyer.',
+      bullet_points: [],
+      button_label: 'Continue applying',
+      required_action: ApplicationRequiredActions.COMPLETE_APPLICATION,
+    },
+  },
+  dismissal_key: 'continue_application|1c0020f7-5c01-403d-8b9d-d65d27606c08|complete_application',
+};
+const provideAdditionalInfoCta: CtaContinueFundingType = {
+  state: CtaStateType.CONTINUE_APPLICATION,
+  data: {
+    config: {
+      text: 'Your Wayflyer financing application needs additional information to proceed.',
+      bullet_points: [],
+      button_label: 'Login to Wayflyer',
+      required_action: ApplicationRequiredActions.PROVIDE_ADDITIONAL_INFO,
+    },
+  },
+  dismissal_key: 'continue_application|10a2c08f-d4ff-4e7f-b4ca-37a7f6d442ae|provide_additional_info',
+};
+const selectOfferCta: CtaContinueFundingType = {
+  state: CtaStateType.CONTINUE_APPLICATION,
+  data: {
+    offer: {
+      id: '1',
+      amount: 100000,
+      currency: 'USD',
+    },
+    config: {
+      text: "You've been approved for Wayflyer financing up to $100000! Choose your offer.",
+      bullet_points: [],
+      button_label: 'View offer',
+      required_action: ApplicationRequiredActions.SELECT_OFFER,
+    },
+  },
+  dismissal_key: 'continue_application|1c0020f7-5c01-403d-8b9d-d65d27606c08|select_offer',
+};
+const completeKycCta: CtaContinueFundingType = {
+  state: CtaStateType.CONTINUE_APPLICATION,
+  data: {
+    config: {
+      text: 'Almost there. Wayflyer just needs a few more details to unlock your financing.',
+      bullet_points: [],
+      button_label: 'Continue application',
+      required_action: ApplicationRequiredActions.COMPLETE_KYC,
+    },
+  },
+  dismissal_key: 'continue_application|10a2c08f-d4ff-4e7f-b4ca-37a7f6d442ae|complete_kyc',
+};
+const signContractCta: CtaContinueFundingType = {
+  state: CtaStateType.CONTINUE_APPLICATION,
+  data: {
+    config: {
+      text: 'Almost there! Review and sign your Wayflyer contract to receive funds.',
+      bullet_points: [],
+      button_label: 'View contract',
+      required_action: ApplicationRequiredActions.COMPLETE_KYC,
+    },
+  },
+  dismissal_key: 'continue_application|10a2c08f-d4ff-4e7f-b4ca-37a7f6d442ae|sign_contract',
+};
+const copy: Copy = {
+  genericOffer: {
+    type: 'genericOffer',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'Business financing made easy. Unlock your next stage of growth with Wayflyer today.',
+    bulletPoints: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
+    buttonText: 'Get financing',
+  },
+  indicativeOffer: {
+    type: 'indicativeOffer',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'You’ve pre-qualified for up to {amount} in financing with Wayflyer. Unlock your growth.',
+    bulletPoints: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
+    buttonText: 'Get financing',
+  },
+  selectOffer: {
+    type: 'selectOffer',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: "You've been approved for Wayflyer financing up to {amount}! Choose your offer.",
+    buttonText: 'View offer',
+  },
+  completeKyc: {
+    type: 'completeKyc',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'Almost there. Wayflyer just needs a few more details to unlock your financing.',
+    buttonText: 'Continue application',
+  },
+  signContract: {
+    type: 'signContract',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'Almost there! Review and sign your Wayflyer contract to receive funds.',
+    buttonText: 'View contract',
+  },
+  provideAdditionalInfo: {
+    type: 'provideAdditionalInfo',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'Your Wayflyer financing application needs additional information to proceed.',
+    buttonText: 'Continue application',
+  },
+  completeApplication: {
+    type: 'completeApplication',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    mainText: 'Almost there! Complete your application to access capital with Wayflyer.',
+    buttonText: 'Continue application',
+  },
+  consentModal: {
+    type: 'consentModal',
+    version: '1.0',
+    language: 'en',
+    cohort: 'default',
+    logoUrl: 'https://static.wayflyer.com/flyui-assets/logos/wayflyer-icon-logo-v3.svg',
+    title: 'Fuel your growth with capital from Wayflyer',
+    bulletPoints: [
+      '$5B deployed with 4.9 stars on Trustpilot',
+      'Apply in minutes and get capital in hours',
+      'Flexible offers designed to fit your business',
+    ],
+    button: 'Continue to Wayflyer',
+    termsAndConditions:
+      'By proceeding, you consent to us sharing your information with Wayflyer in accordance with Wayflyer’s [Privacy Policy]({termsUrl}).',
+  },
+};
+
+const meta = {
+  title: 'CtaWidget',
+  component: CtaWidget,
+  decorators: [
+    (Story, context) => (
+      <EventContext.Provider value={eventContextValue}>
+        <PartnerContext.Provider value={partnerContextValue}>
+          <Story {...context.args} />
+        </PartnerContext.Provider>
+      </EventContext.Provider>
+    ),
+  ],
+} satisfies Meta<typeof CtaWidget>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const GenericOffer: Story = {
+  name: 'Generic Offer',
+  args: {
+    skipAnimation: false,
+    cta: genericOfferCta,
+    copy,
+  },
+};
+
+export const IndicativeOffer: Story = {
+  name: 'Indicative Offer',
+  args: {
+    skipAnimation: false,
+    cta: indicativeOfferCta,
+    copy,
+  },
+};
+
+export const CompleteApplication: Story = {
+  name: 'Complete Application',
+  args: {
+    skipAnimation: false,
+    cta: completeApplicationCta,
+    copy,
+  },
+};
+
+export const ProvideAdditionalInfo: Story = {
+  name: 'Provide Additional Info',
+  args: {
+    skipAnimation: false,
+    cta: provideAdditionalInfoCta,
+    copy,
+  },
+};
+
+export const SelectOffer: Story = {
+  name: 'Select Offer',
+  args: {
+    skipAnimation: false,
+    cta: selectOfferCta,
+    copy,
+  },
+};
+
+export const CompleteKyc: Story = {
+  name: 'Complete Kyc',
+  args: {
+    skipAnimation: false,
+    cta: completeKycCta,
+    copy,
+  },
+};
+
+export const SignContract: Story = {
+  name: 'Sign Contract',
+  args: {
+    skipAnimation: false,
+    cta: signContractCta,
+    copy,
+  },
+};

package/src/CtaWidget.tsx

@@ -1,43 +1,26 @@
-import { AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
-import { ContinueHostedApplicationResponseType } from '@wf-financing/embedded-types';
+import type { CtaResponseType, ContinueHostedApplicationResponseType } from '@wf-financing/embedded-types';
+import type { Copy } from '@wf-financing/ui-assets';
 
-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,
-  useNotificationOnRender,
-} from './hooks';
-import { getBannerConfig } from './utils';
+import { buildCtaUiProps } from './utils';
+import { useContinueHostedApplication, useNotificationOnRender } from './hooks';
 
-export const CtaWidget = () => {
-  const { isLoading, data: cta } = useCtaBanner();
-  const { data: copy } = useCopy();
-  const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
-  const [skipAnimation] = useState(() => !!options?.skipAnimations || !isLoading);
-  const { mutate: continueHostedApplicationMutaion } = useContinueHostedApplication();
+type CtaWidgetProps = {
+  cta: Exclude<CtaResponseType, null>;
+  copy: Copy;
+  skipAnimation: boolean;
+};
+
+export const CtaWidget = ({ cta, copy, skipAnimation }: CtaWidgetProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  usePreloadImage(copy);
+  const { mutate: continueHostedApplicationMutation } = useContinueHostedApplication();
   const sendNotification = useNotificationOnRender();
 
-  const showBanner = !!cta && !!copy && !isWidgetDismissed;
-
-  if (!showBanner) return null;
-
-  const handleExitComplete = () => {
-    if ((!isLoading && !cta) || isWidgetDismissed) {
-      onWidgetClose();
-    }
-  };
-
-  const handleIsModalOpen = () => setIsModalOpen((isModalOpen) => !isModalOpen);
+  const handleIsModalOpen = () => setIsModalOpen(() => !isModalOpen);
   const handleContinueHostedApplication = () => {
-    continueHostedApplicationMutaion(undefined, {
+    continueHostedApplicationMutation(undefined, {
       onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
         const { next } = nextUrl;
         window.open(next);
@@ -48,15 +31,19 @@ export const CtaWidget = () => {
     });
   };
 
-  const bannerConfig = getBannerConfig(cta, copy, handleIsModalOpen, handleContinueHostedApplication);
-  sendNotification(cta, bannerConfig);
+  const { bannerProps, consentModalProps, partnerTemplateProps } = buildCtaUiProps(
+    cta,
+    copy,
+    handleIsModalOpen,
+    handleContinueHostedApplication,
+  );
+
+  sendNotification(cta, bannerProps);
 
   return (
-    <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>
-      <AnimationWrapper skipAnimation={skipAnimation}>
-        <CtaBanner bannerConfig={bannerConfig} skipAnimation={skipAnimation} />
-        <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
-      </AnimationWrapper>
-    </AnimatePresence>
+    <>
+      <CtaBanner skipAnimation={skipAnimation} {...bannerProps} />
+      {consentModalProps && <ConsentModal {...consentModalProps} {...partnerTemplateProps} isModalOpen={isModalOpen} />}
+    </>
   );
 };

package/src/CtaWidgetContainer.tsx

@@ -0,0 +1,32 @@
+import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
+import { AnimationWrapper } from './components/banner/AnimationWrapper';
+import { CtaWidget } from './CtaWidget.tsx';
+import { useCopy, useCtaBanner, usePartnerContext, usePreloadImage } from './hooks';
+
+export const CtaWidgetContainer = () => {
+  const { isLoading, data: cta } = useCtaBanner();
+  const { data: copy } = useCopy();
+  const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
+  const [skipAnimation] = useState(() => !!options?.skipAnimations || !isLoading);
+  usePreloadImage(copy);
+
+  const showBanner = !!cta && !!copy && !isWidgetDismissed;
+
+  if (!showBanner) return null;
+
+  const handleExitComplete = () => {
+    if ((!isLoading && !cta) || isWidgetDismissed) {
+      onWidgetClose();
+    }
+  };
+
+  return (
+    <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>
+      <AnimationWrapper skipAnimation={skipAnimation}>
+        <CtaWidget cta={cta} copy={copy} skipAnimation={skipAnimation} />
+      </AnimationWrapper>
+    </AnimatePresence>
+  );
+};

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

@@ -6,7 +6,7 @@ import { CtaBanner } from './CtaBanner';
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);
 
-const bannerConfig = {
+const bannerProps = {
   mainText: 'Business financing made easy. Unlock your next stage of growth with Wayflyer today.',
   bulletPoints: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
   buttonText: 'Get funding',
@@ -24,7 +24,12 @@ const defaultArgs = {
   skipAnimation: false,
   bannerState: 'test',
   mountToTargetTimestamp: 10,
-  bannerConfig,
+  mainText: 'Business financing made easy. Unlock your next stage of growth with Wayflyer today.',
+  bulletPoints: ['Funds in 24 hours', 'No personal guarantees', '$5B+ in funding delivered'],
+  buttonText: 'Get funding',
+  buttonAction: () => {},
+  version: '1.0.0',
+  type: 'genericOffer',
   portalContainer,
 };
 
@@ -32,7 +37,7 @@ type CtaBannerStoryArgs = typeof defaultArgs;
 
 const Template = (args: CtaBannerStoryArgs) => (
   <PartnerContext.Provider value={{ ...args }}>
-    <CtaBanner bannerConfig={bannerConfig} skipAnimation={false} />
+    <CtaBanner {...bannerProps} skipAnimation={false} />
   </PartnerContext.Provider>
 );
 

package/src/components/banner/CtaBanner.tsx

@@ -7,7 +7,7 @@ import { usePartnerContext } from '../../hooks';
 import { BannerActions } from './BannerActions';
 import { CtaMainText } from './CtaMainText';
 import { CloseButton } from './CloseButton';
-import type { BannerConfig } from '../../utils';
+import type { BannerProps } from '../../utils';
 import { BulletList } from './BulletList.tsx';
 
 const BannerContainer = styled(motion.aside)<{ $bgVariant: ThemeOverrides['cta']['surface'] }>`
@@ -56,19 +56,14 @@ const bannerAnimationProps: MotionProps = {
   },
 };
 
-type Props = {
-  skipAnimation: boolean;
-  bannerConfig: BannerConfig;
-};
+type CtaBannerProps = BannerProps & { skipAnimation: boolean };
 
-export const CtaBanner = ({ bannerConfig, skipAnimation }: Props) => {
+export const CtaBanner = ({ buttonAction, buttonText, mainText, bulletPoints, skipAnimation }: CtaBannerProps) => {
   const { isMobile } = useDetectDeviceSize();
   const { portalContainer } = usePartnerContext();
 
   const { cta: themeFlags } = getThemeFlags({ rootElement: portalContainer });
 
-  const { buttonAction, buttonText, mainText, bulletPoints } = bannerConfig;
-
   const isOnDarkTheme = themeFlags.content === 'onDark';
 
   return (

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { PartnerContext } from '../../utils';
-import { ConsentModalContent } from './ConsentModalContent.tsx';
+import { ConsentModal } from './ConsentModal.tsx';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);
@@ -18,23 +18,23 @@ const appArgs = {
 
 const fn = (): void => {};
 
-const meta: Meta<typeof ConsentModalContent> = {
+const meta: Meta<typeof ConsentModal> = {
   title: 'ConsentModal',
-  component: ConsentModalContent,
+  component: ConsentModal,
   argTypes: {
     isModalOpen: { control: 'boolean', defaultValue: true },
-    setIsModalOpen: { action: 'setIsModalOpen' },
+    onModalStateChange: { action: 'setIsModalOpen' },
   },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof ConsentModalContent>;
+type Story = StoryObj<typeof ConsentModal>;
 
-export const ConsentModal: Story = {
+export const ConsentModalStory: Story = {
   args: {
     isModalOpen: true,
-    setIsModalOpen: fn,
+    onModalStateChange: fn,
     title: 'Fuel your growth with capital from Wayflyer',
     button: 'Continue to Wayflyer',
     logoUrl: 'https://static.wayflyer.com/flyui-assets/logos/wayflyer-icon-logo-v3.svg',
@@ -49,7 +49,7 @@ export const ConsentModal: Story = {
   render: (args) => (
     <>
       <PartnerContext.Provider value={{ ...appArgs }}>
-        <ConsentModalContent {...args} />
+        <ConsentModal {...args} />
       </PartnerContext.Provider>
     </>
   ),

package/src/components/modal/ConsentModal.tsx

@@ -1,33 +1,26 @@
-import type { Dispatch, SetStateAction } from 'react';
+import type { ConsentModalProps as ModalProps } from '../../utils';
+import { ModalHeader } from './ModalHeader.tsx';
+import { BulletList } from './BulletList.tsx';
+import { ModalFooter } from './ModalFooter.tsx';
+import { Modal } from './Modal.tsx';
 
-import { useCopy } from '../../hooks';
-import { ConsentModalContent } from './ConsentModalContent';
-
-type ConsentModalProps = {
-  isModalOpen: boolean;
-  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
-  const { data: copy } = useCopy();
-  const consentModal = copy?.consentModal;
-  const partnerTemplate = copy?.partnerTemplate;
-
-  if (!consentModal) return null;
-
-  const { logoUrl, button, termsAndConditions, bulletPoints, title } = consentModal;
-  const partnerLogoUrl = partnerTemplate?.partnerLogoUrl;
+type ConsentModalProps = ModalProps & { isModalOpen: boolean; partnerLogoUrl?: string };
 
+export const ConsentModal = ({
+  isModalOpen,
+  logoUrl,
+  button,
+  termsAndConditions,
+  bulletPoints,
+  title,
+  onModalStateChange,
+  partnerLogoUrl,
+}: ConsentModalProps) => {
   return (
-    <ConsentModalContent
-      logoUrl={logoUrl}
-      partnerLogoUrl={partnerLogoUrl}
-      title={title}
-      bulletPoints={bulletPoints}
-      button={button}
-      termsAndConditions={termsAndConditions}
-      setIsModalOpen={setIsModalOpen}
-      isModalOpen={isModalOpen}
-    />
+    <Modal isModalOpen={isModalOpen} setIsModalOpen={onModalStateChange}>
+      <ModalHeader title={title} logoUrl={logoUrl} partnerLogoUrl={partnerLogoUrl} />
+      <BulletList bulletPoints={bulletPoints} />
+      <ModalFooter setIsModalOpen={onModalStateChange} button={button} termsAndConditions={termsAndConditions} />
+    </Modal>
   );
 };

package/src/hooks/useNotificationOnRender.ts

@@ -2,23 +2,23 @@ import { CtaResponseType, CtaStateType } from '@wf-financing/embedded-types';
 
 import { useEventContext } from './useEventContext';
 import { usePartnerContext } from './usePartnerContext';
-import { type BannerConfig } from '../utils';
+import { type BannerProps } from '../utils';
 
 export const useNotificationOnRender = () => {
   const { logEvent } = useEventContext();
   const { mountToTargetTimestamp } = usePartnerContext();
 
-  return (cta: CtaResponseType, bannerConfig: BannerConfig) => {
-    if (!cta || !bannerConfig) return;
+  return (cta: CtaResponseType, bannerProps: BannerProps) => {
+    if (!cta || !bannerProps) 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_copy_version: bannerProps.version,
       banner_rendering_latency: bannerRenderingLatency,
-      copy_type: bannerConfig.type,
+      copy_type: bannerProps.type,
     };
 
     if (state === CtaStateType.CONTINUE_APPLICATION) {