@wf-financing/ui 4.4.0 → 4.5.1

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) {

package/src/utils/{buildBannerConfig.ts → buildBannerProps.ts}

@@ -8,17 +8,17 @@ type CopySection = {
   type: string;
 };
 
-export type BannerConfig = CopySection & {
+export type BannerProps = CopySection & {
   buttonAction: () => void;
 };
 
-type BuildBannerConfig = (
+type BuildBannerProps = (
   copySection: CopySection,
   buttonAction: () => void,
   offer?: { currency: string; amount: number },
-) => BannerConfig;
+) => BannerProps;
 
-export const buildBannerConfig: BuildBannerConfig = (copySection, buttonAction, offer) => ({
+export const buildBannerProps: BuildBannerProps = (copySection, buttonAction, offer) => ({
   mainText: offer
     ? replacePlaceholdersForMainText(offer.currency, offer.amount, copySection.mainText)
     : copySection.mainText,

package/src/utils/buildCtaUiProps.ts

@@ -0,0 +1,81 @@
+import type { Copy, ConsentModal, PartnerTemplate } from '@wf-financing/ui-assets';
+import { CtaStateType, ApplicationRequiredActions, CtaResponseType } from '@wf-financing/embedded-types';
+
+import { buildBannerProps, type BannerProps } from './buildBannerProps.ts';
+
+export type ConsentModalProps = ConsentModal & {
+  onModalStateChange: () => void;
+};
+
+export type CtaUiProps = {
+  bannerProps: BannerProps;
+  consentModalProps?: ConsentModalProps;
+  partnerTemplateProps?: PartnerTemplate;
+};
+
+type BuildCtaUiProps = (
+  cta: Exclude<CtaResponseType, null>,
+  copy: Copy,
+  onModalStateChange: () => void,
+  onContinueApplication: () => void,
+) => CtaUiProps;
+
+export const buildCtaUiProps: BuildCtaUiProps = (cta, copy, onModalStateChange, onContinueApplication) => {
+  const { state, data } = cta;
+  const {
+    genericOffer,
+    indicativeOffer,
+    completeApplication,
+    selectOffer,
+    completeKyc,
+    signContract,
+    provideAdditionalInfo,
+    consentModal,
+    partnerTemplate,
+  } = copy;
+
+  const continueApplicationMap: Record<ApplicationRequiredActions, () => ReturnType<BuildCtaUiProps>> = {
+    [ApplicationRequiredActions.COMPLETE_APPLICATION]: () => ({
+      bannerProps: buildBannerProps(completeApplication, onContinueApplication),
+    }),
+
+    [ApplicationRequiredActions.SELECT_OFFER]: () => {
+      const offer = 'offer' in data ? data.offer : undefined;
+
+      return {
+        bannerProps: buildBannerProps(selectOffer, onContinueApplication, offer),
+      };
+    },
+
+    [ApplicationRequiredActions.COMPLETE_KYC]: () => ({
+      bannerProps: buildBannerProps(completeKyc, onContinueApplication),
+    }),
+
+    [ApplicationRequiredActions.SIGN_CONTRACT]: () => ({
+      bannerProps: buildBannerProps(signContract, onContinueApplication),
+    }),
+
+    [ApplicationRequiredActions.PROVIDE_ADDITIONAL_INFO]: () => ({
+      bannerProps: buildBannerProps(provideAdditionalInfo, onContinueApplication),
+    }),
+  };
+
+  switch (state) {
+    case CtaStateType.GENERIC_OFFER:
+      return {
+        bannerProps: buildBannerProps(genericOffer, onModalStateChange),
+        consentModalProps: { ...consentModal, onModalStateChange },
+        partnerTemplateProps: partnerTemplate,
+      };
+
+    case CtaStateType.INDICATIVE_OFFER:
+      return {
+        bannerProps: buildBannerProps(indicativeOffer, onModalStateChange, data.offer),
+        consentModalProps: { ...consentModal, onModalStateChange },
+        partnerTemplateProps: partnerTemplate,
+      };
+
+    case CtaStateType.CONTINUE_APPLICATION:
+      return continueApplicationMap[data.config.required_action]?.();
+  }
+};

package/src/utils/index.ts

@@ -7,6 +7,6 @@ export { PartnerContext, type PartnerContextType } from './partnerContext';
 export { replacePlaceholdersForMainText } from './replacePlaceholdersForMainText.ts';
 export { getModalItems } from './getModalItems';
 export { injectUrlInTemplate } from './injectUrlInTemplate';
-export { buildBannerConfig, type BannerConfig } from './buildBannerConfig';
-export { getBannerConfig } from './getBannerConfig';
+export { buildBannerProps, type BannerProps } from './buildBannerProps.ts';
+export { buildCtaUiProps, type CtaUiProps, type ConsentModalProps } from './buildCtaUiProps.ts';
 export { EventContext, type EventContextValue, type EventAttributes } from './eventContext';

package/src/components/modal/ConsentModalContent.tsx

@@ -1,36 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-
-import { ModalFooter } from './ModalFooter.tsx';
-import { ModalHeader } from './ModalHeader.tsx';
-import { BulletList } from './BulletList';
-import { Modal } from './Modal.tsx';
-
-type ConsentModalContentProps = {
-  logoUrl: string;
-  partnerLogoUrl?: string;
-  title: string;
-  bulletPoints: string[];
-  button: string;
-  termsAndConditions: string;
-  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
-  isModalOpen: boolean;
-};
-
-export const ConsentModalContent = ({
-  title,
-  bulletPoints,
-  termsAndConditions,
-  button,
-  logoUrl,
-  partnerLogoUrl,
-  setIsModalOpen,
-  isModalOpen,
-}: ConsentModalContentProps) => {
-  return (
-    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      <ModalHeader title={title} logoUrl={logoUrl} partnerLogoUrl={partnerLogoUrl} />
-      <BulletList bulletPoints={bulletPoints} />
-      <ModalFooter setIsModalOpen={setIsModalOpen} button={button} termsAndConditions={termsAndConditions} />
-    </Modal>
-  );
-};

package/src/locales/en.json

@@ -1,17 +0,0 @@
-{
-  "common.cancel": "Cancel",
-  "common.dismiss": "Dismiss",
-  "ctaModal.call": "Get funded",
-  "ctaModal.title": "Fuel your growth with capital from Wayflyer",
-  "ctaModal.action": "Continue to Wayflyer",
-  "ctaModal.consent": "By proceeding, you consent to us sharing your information with Wayflyer so they can assess your eligibility for financing, in accordance with the Wayflyer ",
-  "ctaModal.consent.privacy_policy": "Privacy Policy.",
-  "ctaModal.step1.title": "Built for businesses like yours",
-  "ctaModal.step1.subtitle": "$5B deployed to 5,000+ companies",
-  "ctaModal.step1.time": "2 mins",
-  "ctaModal.step2.title": "Your growth, your way",
-  "ctaModal.step2.subtitle": "Flexible terms that fit your business",
-  "ctaModal.step2.time": "10 mins",
-  "ctaModal.step3.title": "Quick to get started",
-  "ctaModal.step3.subtitle": "Apply in minutes and get capital in hours"
-}

package/src/utils/getBannerConfig.ts

@@ -1,44 +0,0 @@
-import type { Copy } from '@wf-financing/ui-assets';
-import { CtaStateType, ApplicationRequiredActions, CtaResponseType } from '@wf-financing/embedded-types';
-
-import { buildBannerConfig, type BannerConfig } from './buildBannerConfig.ts';
-
-type GetBannerConfig = (
-  cta: Exclude<CtaResponseType, null>,
-  copy: Copy,
-  handleIsModalOpen: () => void,
-  handleContinueHostedApplication: () => void,
-) => BannerConfig;
-
-export const getBannerConfig: GetBannerConfig = (cta, copy, handleIsModalOpen, handleContinueHostedApplication) => {
-  const { state, data } = cta;
-  const {
-    genericOffer,
-    indicativeOffer,
-    completeApplication,
-    selectOffer,
-    completeKyc,
-    signContract,
-    provideAdditionalInfo,
-  } = copy;
-
-  switch (state) {
-    case CtaStateType.GENERIC_OFFER:
-      return buildBannerConfig(genericOffer, handleIsModalOpen);
-    case CtaStateType.INDICATIVE_OFFER:
-      return buildBannerConfig(indicativeOffer, handleIsModalOpen, data.offer);
-    case CtaStateType.CONTINUE_APPLICATION:
-      switch (cta.data.config.required_action) {
-        case ApplicationRequiredActions.COMPLETE_APPLICATION:
-          return buildBannerConfig(completeApplication, handleContinueHostedApplication);
-        case ApplicationRequiredActions.SELECT_OFFER:
-          return buildBannerConfig(selectOffer, handleContinueHostedApplication, data.offer);
-        case ApplicationRequiredActions.COMPLETE_KYC:
-          return buildBannerConfig(completeKyc, handleContinueHostedApplication);
-        case ApplicationRequiredActions.SIGN_CONTRACT:
-          return buildBannerConfig(signContract, handleContinueHostedApplication);
-        case ApplicationRequiredActions.PROVIDE_ADDITIONAL_INFO:
-          return buildBannerConfig(provideAdditionalInfo, handleContinueHostedApplication);
-      }
-  }
-};