@wf-financing/ui 3.10.0 → 3.12.0

package/src/components/modal/FundingSteps.tsx

@@ -1,23 +1,31 @@
 import { Flex, Text } from '@wayflyer/flyui';
-import { useIntl } from 'react-intl';
 
 import { useDetectSmallScreen } from '../../hooks';
-import { MODAL_ITEMS } from '../../constants';
+import { getModalItems } from '../../utils';
 
-export const FundingSteps = () => {
-  const { formatMessage } = useIntl();
+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">
-      {MODAL_ITEMS.map(({ id, title, subtitle, Icon }) => (
-        <Flex key={id} direction="row" align="center" 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">
-              {formatMessage(title)}
+              {title}
             </Text>
-            <Text color="placeholder">{formatMessage(subtitle)}</Text>
+            <Text color="placeholder">{description}</Text>
           </Flex>
         </Flex>
       ))}

package/src/components/modal/ModalFooter.tsx

@@ -1,20 +1,27 @@
-import { Button, Flex, Link, Text, useDetectDeviceSize } from '@wayflyer/flyui';
+import { Button, Flex, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
-import { FormattedMessage } from 'react-intl';
+import { Logger } from '@wf-financing/logger';
 
+import { TemplateWithUrl } from './TemplateWithUrl';
 import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
 
-type ModalFooterType = {
+type ModalFooterProps = {
+  buttons: {
+    accept: string;
+    close: string;
+  };
+  termsAndConditions: string;
   setOpen: (isOpen: boolean) => void;
 };
 
-export const ModalFooter = ({ setOpen }: ModalFooterType) => {
+export const ModalFooter = ({ setOpen, buttons, termsAndConditions }: ModalFooterProps) => {
   const { isMobile } = useDetectDeviceSize();
   const { mutate, isPending: isLoading } = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
 
   const handleStartApplication = () => {
+    Logger.logEvent('cta_start_hosted_application');
     mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
@@ -22,32 +29,23 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
         window.open(next);
       },
       onError: (error) => {
-        console.error('Failed to start application', error);
+        Logger.logError(`Failed to start application ${error.message}`);
       },
     });
   };
 
-  const handleOpenExternalLink = () => {
-    window.open('https://wayflyer.com/en/privacy-notice', '_blank', 'noopener,noreferrer');
-  };
-
   return (
     <Flex direction="column" gap="3">
       <Flex gap="2" direction={isSmallScreen || isMobile ? 'column' : 'row'}>
         <Button fullWidth onClick={handleStartApplication} loading={isLoading} variant="Primary" external>
-          <FormattedMessage id="ctaModal.action" />
+          {buttons.accept}
           {!isLoading && <IconArrowOnSquareUpRight16Line />}
         </Button>
         <Button fullWidth variant="Secondary" onClick={() => setOpen(false)}>
-          <FormattedMessage id="common.cancel" />
+          {buttons.close}
         </Button>
       </Flex>
-      <Text size="sm" lineHeight="normal">
-        <FormattedMessage id="ctaModal.consent" />
-        <Link onClick={handleOpenExternalLink}>
-          <FormattedMessage id="ctaModal.consent.privacy_policy" />
-        </Link>
-      </Text>
+      <TemplateWithUrl templateString={termsAndConditions} />
     </Flex>
   );
 };

package/src/components/modal/TemplateWithUrl.tsx

@@ -0,0 +1,30 @@
+import ReactMarkdown from 'react-markdown';
+import { Link, Text } from '@wayflyer/flyui';
+import { Logger } from '@wf-financing/logger';
+
+import { injectUrlInTemplate } from '../../utils';
+
+type TemplateWithUrlProps = {
+  templateString: string;
+};
+
+export const TemplateWithUrl = ({ templateString }: TemplateWithUrlProps) => {
+  const termsUrl = 'https://wayflyer.com/en/privacy-notice';
+  const text = injectUrlInTemplate(templateString, termsUrl, 'termsUrl');
+
+  const handleOpenExternalLink = () => {
+    Logger.logEvent('cta_open_privacy_note');
+    window.open('https://wayflyer.com/en/privacy-notice', '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <ReactMarkdown
+      components={{
+        a: ({ children }) => <Link onClick={handleOpenExternalLink} children={children} />,
+        p: ({ children }) => <Text size="sm" lineHeight="normal" children={children} />,
+      }}
+    >
+      {text}
+    </ReactMarkdown>
+  );
+};

package/src/config/applicationVersion.ts

@@ -0,0 +1 @@
+export const APPLICATION_VERSION: string = import.meta.env.VITE_APP_VERSION;

package/src/config/index.ts

@@ -6,3 +6,4 @@ export { HEADLESS_SDK_URL } from './url';
 export { WHITELISTED_PARTNER_IDS } from './whitelistedPartnerIds';
 export type { PartnerId, PartnerTheme } from './whitelistedPartnerIds';
 export { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL, MODAL_LOGO_IMAGE_URL } from './staticUrls';
+export { APPLICATION_VERSION } from './applicationVersion';

package/src/hooks/index.ts

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

package/src/hooks/useCopy.ts

@@ -0,0 +1,30 @@
+import { SdkOptionsType } from '@wf-financing/embedded-types';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
+import { loadAndConfigureCopy } from '@wf-financing/ui-assets';
+
+import { usePartnerContext } from './usePartnerContext.ts';
+import { APPLICATION_VERSION } from '../config';
+import { getPartnerIdFromToken } from '../utils';
+
+type Options = SdkOptionsType & {
+  language?: string;
+  cohort?: string;
+};
+
+export const useCopy = () => {
+  const { options, companyToken } = usePartnerContext();
+
+  const partnerId = getPartnerIdFromToken(companyToken);
+  // TODO: remove after extension of SdkOptionType
+  const copyOptions = options as Options;
+
+  return useQuery({
+    queryKey: ['partnerCopy'],
+    queryFn: () => loadAndConfigureCopy({ version: APPLICATION_VERSION, partnerId, options: copyOptions }),
+    placeholderData: keepPreviousData,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    staleTime: 10 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};

package/src/main.tsx

@@ -1,4 +1,5 @@
 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';
 
@@ -24,10 +25,14 @@ 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' }) as ShadowRoot);
 
+  // TODO: remove font loading from SDK
   try {
     applyStyles({ shadow });
     await applyFont(shadow, partnerTheme);
@@ -61,4 +66,6 @@ export const mountToTarget = async (
       />
     </StyleSheetManager>,
   );
+
+  Logger.logEvent('cta_mounted_to_target');
 };

package/src/utils/buildBannerConfig.ts

@@ -0,0 +1,26 @@
+import { replacePlaceholdersForMainText } from './replacePlaceholdersForMainText.ts';
+
+type CopySection = {
+  mainText: string;
+  buttonText: string;
+  bulletPoints?: string[];
+};
+
+export type BannerConfig = CopySection & {
+  buttonAction: () => void;
+};
+
+type BuildBannerConfig = (
+  copySection: CopySection,
+  buttonAction: () => void,
+  offer?: { currency: string; amount: number },
+) => BannerConfig;
+
+export const buildBannerConfig: BuildBannerConfig = (copySection, buttonAction, offer) => ({
+  mainText: offer
+    ? replacePlaceholdersForMainText(offer.currency, offer.amount, copySection.mainText)
+    : copySection.mainText,
+  bulletPoints: copySection.bulletPoints,
+  buttonText: copySection.buttonText,
+  buttonAction: buttonAction,
+});

package/src/utils/getBannerConfig.ts

@@ -0,0 +1,44 @@
+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);
+      }
+  }
+};

package/src/utils/getModalItems.ts

@@ -0,0 +1,19 @@
+import {
+  IconArrowsCwHorizontal24Line,
+  IconCheckCircle24Line,
+  IconPersonCircle24Line,
+} from '@wayflyer/flyui-icons/24/line';
+
+type ModalDescriptions = {
+  title: string;
+  description: string;
+};
+
+export const getModalItems = (consentModalDescription: ModalDescriptions[]) => {
+  const modalIcons = [IconPersonCircle24Line, IconArrowsCwHorizontal24Line, IconCheckCircle24Line];
+
+  return consentModalDescription.map((description, id) => ({
+    ...description,
+    Icon: modalIcons[id],
+  }));
+};

package/src/utils/index.ts

@@ -6,3 +6,8 @@ export { getPartnerThemeById } from './getPartnerThemeById';
 export { initializeHeadlessSdk } from './initializeHeadlessSdk';
 export { loadScriptAndInitializeSdk } from './loadScriptAndInitializeSdk';
 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';

package/src/utils/injectUrlInTemplate.ts

@@ -0,0 +1,6 @@
+export const injectUrlInTemplate = (template: string, url: string, placeholder: string) => {
+  const escaped = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`\\(\\{${escaped}\\}\\)`, 'g');
+
+  return template.replace(regex, `(${url})`);
+};

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;
   }
 };

package/src/utils/replacePlaceholdersForMainText.ts

@@ -0,0 +1,29 @@
+export const replacePlaceholdersForMainText = (currency: string, amount: number, templateString: string): string => {
+  const currencies = [
+    { code: 'USD', icon: '$', position: 'before' },
+    { code: 'GBP', icon: '£', position: 'before' },
+    { code: 'EUR', icon: '€', position: 'after' },
+    { code: 'SEK', icon: 'kr', position: 'after' },
+    { code: 'DKK', icon: 'kr', position: 'after' },
+    { code: 'AUD', icon: 'A$', position: 'before' },
+    { code: 'CAD', icon: 'C$', position: 'before' },
+  ];
+  const currencyWithIcon = currencies.find(({ code }) => currency === code);
+
+  const getConvertedAmount = () => {
+    if (!currencyWithIcon) return `${amount}${currency}`;
+
+    const { position, icon } = currencyWithIcon;
+
+    switch (position) {
+      case 'before':
+        return `${icon}${amount}`;
+      case 'after':
+        return `${amount}${icon}`;
+      default:
+        return `${icon}${amount}`;
+    }
+  };
+
+  return templateString.replace('{amount}', getConvertedAmount());
+};

package/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "rootDir": ".",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "resolveJsonModule": true
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["dist", "tests", "playground", "node_modules"]

package/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/vite.config.mts

@@ -4,6 +4,8 @@ import { defineConfig, type ConfigEnv, type UserConfig, type PluginOption } from
 import { visualizer } from 'rollup-plugin-visualizer';
 import inject from '@rollup/plugin-inject';
 
+import pkg from './package.json';
+
 const visualizerOptions = {
   'analyze-html': { emitFile: true, filename: `bundle-stats/index.html`, gzipSize: true },
   'analyze-json': { emitFile: true, filename: `bundle-stats/stats.json`, template: 'raw-data', gzipSize: true },
@@ -18,6 +20,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     define: {
       'process.env': {},
       'process.env.NODE_ENV': JSON.stringify(mode),
+      'import.meta.env.VITE_APP_VERSION': JSON.stringify(pkg.version),
     },
     server: {
       host: true,

package/src/components/banner/BannerActionsDesktop.tsx

@@ -1,13 +0,0 @@
-import { Flex } from '@wayflyer/flyui';
-
-import { CloseButton } from './CloseButton';
-import { ProceedFundingButton } from './ProceedFundingButton';
-
-export const BannerActionsDesktop = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
-  return (
-    <Flex gap="4">
-      <ProceedFundingButton isOnDarkTheme={isOnDarkTheme} />
-      <CloseButton isOnDarkTheme={isOnDarkTheme} />
-    </Flex>
-  );
-};

package/src/components/banner/CtaBannerContent.tsx

@@ -1,37 +0,0 @@
-import { Flex, Text, Heading } from '@wayflyer/flyui';
-import type { CtaResponseType } from '@wf-financing/embedded-types';
-
-import { useCtaBanner } from '../../hooks';
-import { BulletList } from './BulletList';
-
-type CtaBannerContentProps = {
-  isMobile: boolean;
-  isTablet: boolean;
-  isOnDarkTheme: boolean;
-};
-
-export const CtaBannerContent = ({ isMobile, isTablet, isOnDarkTheme }: CtaBannerContentProps) => {
-  const sdk = useCtaBanner();
-  const ctaData = sdk.data as CtaResponseType;
-  const TextComponent = isMobile ? Text : Heading;
-
-  return (
-    <>
-      {!sdk.isLoading && (
-        <Flex direction="column" gap="1">
-          <TextComponent
-            size={isMobile ? 'base' : 'lg'}
-            fontWeight="medium"
-            lineHeight="normal"
-            color={isOnDarkTheme ? 'onDark' : 'default'}
-          >
-            {ctaData?.data?.config?.text}
-          </TextComponent>
-          {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
-            <BulletList items={ctaData?.data?.config?.bullet_points} isOnDarkTheme={isOnDarkTheme} />
-          )}
-        </Flex>
-      )}
-    </>
-  );
-};

package/src/components/banner/FooterActions.tsx

@@ -1,8 +0,0 @@
-import { useDetectDeviceSize } from '@wayflyer/flyui';
-import { ProceedFundingButton } from './ProceedFundingButton';
-
-export const FooterActions = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
-  const { isMobile } = useDetectDeviceSize();
-
-  return isMobile ? <ProceedFundingButton isOnDarkTheme={isOnDarkTheme} /> : null;
-};

package/src/components/banner/HeaderActions.tsx

@@ -1,21 +0,0 @@
-import { useDetectDeviceSize } from '@wayflyer/flyui';
-import styled from 'styled-components';
-import { BannerActionsDesktop } from './BannerActionsDesktop';
-import { CloseButton } from './CloseButton';
-
-const MobileButtonContainer = styled.div`
-  margin-top: calc(0px - var(--sizes-spacing-3));
-  margin-right: calc(0px - var(--sizes-spacing-2));
-`;
-
-export const HeaderActions = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
-  const { isMobile } = useDetectDeviceSize();
-
-  return isMobile ? (
-    <MobileButtonContainer>
-      <CloseButton isOnDarkTheme={isOnDarkTheme} />
-    </MobileButtonContainer>
-  ) : (
-    <BannerActionsDesktop isOnDarkTheme={isOnDarkTheme} />
-  );
-};

package/src/components/banner/ProceedFundingButton.tsx

@@ -1,61 +0,0 @@
-import { Button } from '@wayflyer/flyui';
-import {
-  CtaContinueFundingType,
-  CtaGenericOfferType,
-  CtaIndicativeOfferType,
-  CtaStateType,
-  ContinueHostedApplicationResponseType,
-} from '@wf-financing/embedded-types';
-import { useState } from 'react';
-
-import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
-import { ConsentModal } from '../modal/ConsentModal';
-
-type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
-
-export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const sdkResponse = useCtaBanner();
-  const sdk = sdkResponse.data as CtaResponseType;
-  const { mutate, isPending: isLoading } = useContinueHostedApplication();
-
-  if (!sdk) return null;
-
-  const {
-    state,
-    data: { config },
-  } = sdk;
-
-  const handleContinueHostedApplication = () => {
-    switch (state) {
-      case CtaStateType.CONTINUE_APPLICATION:
-        mutate(undefined, {
-          onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
-            const { next } = nextUrl;
-            window.open(next);
-          },
-          onError: (error) => {
-            console.error('Failed to continue application', error);
-          },
-        });
-        break;
-      default:
-        setIsModalOpen(true);
-        break;
-    }
-  };
-
-  return (
-    <>
-      <Button
-        variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'}
-        fullWidth
-        onClick={handleContinueHostedApplication}
-        loading={isLoading}
-      >
-        {config?.button_label}
-      </Button>
-      <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
-    </>
-  );
-};

package/src/constants/index.ts

@@ -1 +0,0 @@
-export { MODAL_ITEMS } from './modalItems';

package/src/constants/modalItems.ts

@@ -1,26 +0,0 @@
-import {
-  IconArrowsCwHorizontal24Line,
-  IconCheckCircle24Line,
-  IconPersonCircle24Line,
-} from '@wayflyer/flyui-icons/24/line';
-
-export const MODAL_ITEMS = [
-  {
-    id: 'step1',
-    title: { id: 'ctaModal.step1.title' },
-    subtitle: { id: 'ctaModal.step1.subtitle' },
-    Icon: IconPersonCircle24Line,
-  },
-  {
-    id: 'step2',
-    title: { id: 'ctaModal.step2.title' },
-    subtitle: { id: 'ctaModal.step2.subtitle' },
-    Icon: IconArrowsCwHorizontal24Line,
-  },
-  {
-    id: 'step3',
-    title: { id: 'ctaModal.step3.title' },
-    subtitle: { id: 'ctaModal.step3.subtitle' },
-    Icon: IconCheckCircle24Line,
-  },
-];