@wf-financing/ui 3.10.0 → 3.12.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.10.0",
+  "version": "3.12.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -35,8 +35,11 @@
     "framer-motion": "^12.23.0",
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
+    "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.6.0"
+    "@wf-financing/embedded-types": "0.7.0",
+    "@wf-financing/ui-assets": "0.2.0",
+    "@wf-financing/logger": "1.1.1"
   },
   "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

@@ -1,30 +1,52 @@
 import { AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
+import { ContinueHostedApplicationResponseType } from '@wf-financing/embedded-types';
 
 import { AnimationWrapper } from './components/banner/AnimationWrapper';
 import { CtaBanner } from './components/banner/CtaBanner';
-import { useCtaBanner, usePartnerContext } from './hooks';
+import { ConsentModal } from './components/modal/ConsentModal.tsx';
+import { useCopy, useCtaBanner, usePartnerContext, useContinueHostedApplication } from './hooks';
+import { getBannerConfig } from './utils';
 
 export const CtaWidget = () => {
-  const { isLoading, data } = useCtaBanner();
+  const { isLoading, data: cta } = useCtaBanner();
+  const { data: copy } = useCopy();
   const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
   const [skipAnimation] = useState(() => !!options?.skipAnimations);
+  const { mutate: continueHostedApplicationMutaion } = useContinueHostedApplication();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const showBanner = !isLoading && data && !isWidgetDismissed;
+  const showBanner = cta && copy && !isWidgetDismissed;
+
+  if (!showBanner) return null;
 
   const handleExitComplete = () => {
-    if ((!isLoading && !data) || isWidgetDismissed) {
+    if ((!isLoading && !cta) || isWidgetDismissed) {
       onWidgetClose();
     }
   };
 
+  const handleIsModalOpen = () => setIsModalOpen((isModalOpen) => !isModalOpen);
+  const handleContinueHostedApplication = () => {
+    continueHostedApplicationMutaion(undefined, {
+      onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
+        const { next } = nextUrl;
+        window.open(next);
+      },
+      onError: (error) => {
+        console.error('Failed to continue application', error);
+      },
+    });
+  };
+
+  const bannerConfig = getBannerConfig(cta, copy, handleIsModalOpen, handleContinueHostedApplication);
+
   return (
     <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>
-      {showBanner && (
-        <AnimationWrapper skipAnimation={skipAnimation}>
-          <CtaBanner skipAnimation={skipAnimation} />
-        </AnimationWrapper>
-      )}
+      <AnimationWrapper skipAnimation={skipAnimation}>
+        <CtaBanner bannerConfig={bannerConfig} skipAnimation={skipAnimation} />
+        <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      </AnimationWrapper>
     </AnimatePresence>
   );
 };

package/src/api/ctaBanner.ts

@@ -4,7 +4,6 @@ import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
 export const fetchCtaBanner = async (companyToken: string, options?: SdkOptionsType) => {
   const sdk = await getHeadlessSdkInstance(companyToken, options);
-  const cta = await sdk.getCta();
 
-  return cta;
+  return await sdk.getCta();
 };

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/BannerActions.tsx

@@ -0,0 +1,26 @@
+import { Button, Flex, useDetectDeviceSize } from '@wayflyer/flyui';
+
+type BannerActionsProps = {
+  isOnDarkTheme: boolean;
+  buttonText: string;
+  buttonAction: () => void;
+};
+
+export const BannerActions = ({ isOnDarkTheme, buttonAction, buttonText }: BannerActionsProps) => {
+  const { isMobile } = useDetectDeviceSize();
+
+  if (isMobile)
+    return (
+      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={buttonAction}>
+        {buttonText}
+      </Button>
+    );
+
+  return (
+    <Flex gap="4">
+      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={buttonAction}>
+        {buttonText}
+      </Button>
+    </Flex>
+  );
+};

package/src/components/banner/BulletList.tsx

@@ -1,23 +1,36 @@
-import { Flex, Text, Icon } from '@wayflyer/flyui';
+import { Flex, Text, Icon, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconCheck12Line } from '@wayflyer/flyui-icons/12/line';
 
-export const BulletList = ({ items, isOnDarkTheme }: { items: string[]; isOnDarkTheme: boolean }) => (
-  <Flex gap="4">
-    {items.map((bullet_point: string) => (
-      <Flex key={bullet_point} gap="1" align="center">
-        <Icon color={isOnDarkTheme ? 'onDark' : 'default'}>
-          <IconCheck12Line />
-        </Icon>
-        <Text
-          size="sm"
-          fontWeight="medium"
-          fontStyle="regular"
-          lineHeight="tight"
-          color={isOnDarkTheme ? 'onDark' : 'default'}
-        >
-          {bullet_point}
-        </Text>
-      </Flex>
-    ))}
-  </Flex>
-);
+type BulletListProps = {
+  isOnDarkTheme: boolean;
+  bulletPoints?: string[];
+};
+
+export const BulletList = ({ isOnDarkTheme, bulletPoints }: BulletListProps) => {
+  const { isMobile, isTablet } = useDetectDeviceSize();
+
+  return (
+    <>
+      {!(isTablet || isMobile) && bulletPoints && (
+        <Flex gap="4">
+          {bulletPoints.map((bulletPoint: string) => (
+            <Flex key={bulletPoint} gap="1" align="center">
+              <Icon color={isOnDarkTheme ? 'onDark' : 'default'}>
+                <IconCheck12Line />
+              </Icon>
+              <Text
+                size="sm"
+                fontWeight="medium"
+                fontStyle="regular"
+                lineHeight="tight"
+                color={isOnDarkTheme ? 'onDark' : 'default'}
+              >
+                {bulletPoint}
+              </Text>
+            </Flex>
+          ))}
+        </Flex>
+      )}
+    </>
+  );
+};

package/src/components/banner/CloseButton.tsx

@@ -1,10 +1,18 @@
-import { Button, Flex } from '@wayflyer/flyui';
+import { Button, Flex, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
+import { Logger } from '@wf-financing/logger';
 import { useDismissCta, usePartnerContext } from '../../hooks';
+import styled from 'styled-components';
+
+const MobileCloseContainer = styled.div`
+  margin-top: calc(0px - var(--sizes-spacing-3));
+  margin-right: calc(0px - var(--sizes-spacing-2));
+`;
 
 export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   const { onWidgetDismiss } = usePartnerContext();
+  const { isMobile } = useDetectDeviceSize();
   const dismissCta = useDismissCta();
 
   const handleCloseWidget = () => {
@@ -12,11 +20,23 @@ 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}`);
       },
     });
   };
 
+  if (isMobile) {
+    return (
+      <MobileCloseContainer>
+        <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnDark' : 'Tertiary'}>
+          <Flex padding="2">
+            <IconX16Line />
+          </Flex>
+        </Button>
+      </MobileCloseContainer>
+    );
+  }
+
   return (
     <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnDark' : 'Tertiary'}>
       <Flex padding="2">

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

@@ -1,10 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import { PartnerContext } from '../../utils';
 import { CtaBanner } from './CtaBanner';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);
 
+const 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: () => {},
+};
+
 const defaultArgs = {
   companyToken: 'demo-token',
   partnerCallback: () => {},
@@ -12,6 +20,8 @@ const defaultArgs = {
   onWidgetDismiss: () => {},
   isWidgetDismissed: false,
   skipAnimation: false,
+  bannerState: 'test',
+  bannerConfig,
   portalContainer,
 };
 
@@ -19,7 +29,7 @@ type CtaBannerStoryArgs = typeof defaultArgs;
 
 const Template = (args: CtaBannerStoryArgs) => (
   <PartnerContext.Provider value={{ ...args }}>
-    <CtaBanner skipAnimation={false} />
+    <CtaBanner bannerConfig={bannerConfig} skipAnimation={false} />
   </PartnerContext.Provider>
 );
 

package/src/components/banner/CtaBanner.tsx

@@ -4,9 +4,11 @@ import { css, styled } from 'styled-components';
 
 import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
 import { usePreloadImage } from '../../hooks';
-import { CtaBannerContent } from './CtaBannerContent';
-import { FooterActions } from './FooterActions';
-import { HeaderActions } from './HeaderActions';
+import { BannerActions } from './BannerActions';
+import { CtaMainText } from './CtaMainText';
+import { CloseButton } from './CloseButton';
+import type { BannerConfig } from '../../utils';
+import { BulletList } from './BulletList.tsx';
 
 const ON_DARK_THEMES = ['athena'];
 const LIGHT_BG_THEMES = ['conjura', 'rocketFuel'];
@@ -60,10 +62,11 @@ const bannerAnimationProps: MotionProps = {
 
 type Props = {
   skipAnimation: boolean;
+  bannerConfig: BannerConfig;
 };
 
-export const CtaBanner = ({ skipAnimation }: Props) => {
-  const { isMobile, isTablet } = useDetectDeviceSize();
+export const CtaBanner = ({ bannerConfig, skipAnimation }: Props) => {
+  const { isMobile } = useDetectDeviceSize();
   const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
   const { themeName } = useTheme();
   const isOnDarkTheme = ON_DARK_THEMES.includes(themeName);
@@ -71,6 +74,8 @@ export const CtaBanner = ({ skipAnimation }: Props) => {
   const isTertiaryTheme = TERTIARY_THEMES.includes(themeName);
   usePreloadImage(logoImageUrl);
 
+  const { buttonAction, buttonText, mainText, bulletPoints } = bannerConfig;
+
   return (
     <BannerContainer
       $isLightBgTheme={isLightBgTheme}
@@ -79,10 +84,20 @@ export const CtaBanner = ({ skipAnimation }: Props) => {
       initial={skipAnimation ? bannerAnimationProps.animate : bannerAnimationProps.initial}
     >
       <Flex gap="4" align={isMobile ? 'flex-start' : 'center'} justify="space-between" width="100%">
-        <CtaBannerContent isMobile={isMobile} isTablet={isTablet} isOnDarkTheme={isOnDarkTheme} />
-        <HeaderActions isOnDarkTheme={isOnDarkTheme} />
+        <Flex direction="column" gap="1">
+          <CtaMainText mainText={mainText} isOnDarkTheme={isOnDarkTheme} />
+          <BulletList isOnDarkTheme={isOnDarkTheme} bulletPoints={bulletPoints} />
+        </Flex>
+        {!isMobile ? (
+          <Flex gap="4">
+            <BannerActions isOnDarkTheme={isOnDarkTheme} buttonText={buttonText} buttonAction={buttonAction} />
+            <CloseButton isOnDarkTheme={isOnDarkTheme} />
+          </Flex>
+        ) : (
+          <CloseButton isOnDarkTheme={isOnDarkTheme} />
+        )}
       </Flex>
-      <FooterActions isOnDarkTheme={isOnDarkTheme} />
+      {isMobile && <BannerActions isOnDarkTheme={isOnDarkTheme} buttonText={buttonText} buttonAction={buttonAction} />}
     </BannerContainer>
   );
 };

package/src/components/banner/CtaMainText.tsx

@@ -0,0 +1,23 @@
+import { Text, Heading, useDetectDeviceSize } from '@wayflyer/flyui';
+
+type CtaMainTextProps = {
+  mainText: string;
+  isOnDarkTheme: boolean;
+};
+
+export const CtaMainText = ({ mainText, isOnDarkTheme }: CtaMainTextProps) => {
+  const { isMobile } = useDetectDeviceSize();
+
+  const TextComponent = isMobile ? Text : Heading;
+
+  return (
+    <TextComponent
+      size={isMobile ? 'base' : 'lg'}
+      fontWeight="medium"
+      lineHeight="normal"
+      color={isOnDarkTheme ? 'onDark' : 'default'}
+    >
+      {mainText}
+    </TextComponent>
+  );
+};

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { PartnerContext } from '../../utils';
-import { ConsentModal } from './ConsentModal';
+import { ConsentModalContent } from './ConsentModalContent.tsx';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);
@@ -17,9 +17,9 @@ const appArgs = {
 
 const fn = (): void => {};
 
-const meta: Meta<typeof ConsentModal> = {
+const meta: Meta<typeof ConsentModalContent> = {
   title: 'ConsentModal',
-  component: ConsentModal,
+  component: ConsentModalContent,
   argTypes: {
     isModalOpen: { control: 'boolean', defaultValue: true },
     setIsModalOpen: { action: 'setIsModalOpen' },
@@ -28,36 +28,39 @@ const meta: Meta<typeof ConsentModal> = {
 
 export default meta;
 
-type Story = StoryObj<typeof ConsentModal>;
+type Story = StoryObj<typeof ConsentModalContent>;
 
-export const Default: Story = {
-  args: {
-    isModalOpen: true,
-    setIsModalOpen: fn,
-  },
-  render: (args) => (
-    <PartnerContext.Provider value={{ ...appArgs }}>
-      <ConsentModal {...args} />
-    </PartnerContext.Provider>
-  ),
-};
-
-export const WithContent: Story = {
+export const ConsentModal: Story = {
   args: {
     isModalOpen: true,
     setIsModalOpen: fn,
+    title: 'Fuel your growth with capital from Wayflyer',
+    buttons: {
+      accept: 'Continue to Wayflyer',
+      close: 'Cancel',
+    },
+    imageUrl: 'https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png',
+    termsAndConditions:
+      'By proceeding, you consent to us sharing your information with Wayflyer so they can assess your eligibility for financing, in accordance with the [Wayflyer Privacy Policy]({termsUrl}).',
+    descriptions: [
+      {
+        title: 'Built for businesses like yours',
+        description: '$5B+ deployed to 5,000+ companies',
+      },
+      {
+        title: 'Your growth, your way',
+        description: 'Flexible terms that fit your business',
+      },
+      {
+        title: 'Quick to get started',
+        description: 'Apply in minutes and get capital in hours',
+      },
+    ],
   },
   render: (args) => (
     <>
       <PartnerContext.Provider value={{ ...appArgs }}>
-        <ConsentModal {...args}>
-          <div style={{ padding: '20px', background: 'white' }}>
-            <h2>Consent Agreement</h2>
-            <p>Please agree to the terms to proceed.</p>
-            <button>Continue to Wayflyer</button>
-            <button>Cancel</button>
-          </div>
-        </ConsentModal>
+        <ConsentModalContent {...args} />
       </PartnerContext.Provider>
     </>
   ),

package/src/components/modal/ConsentModal.tsx

@@ -1,42 +1,30 @@
-import { Flex, Image, Text, useDetectDeviceSize } from '@wayflyer/flyui';
-import { useIntl } from 'react-intl';
+import type { Dispatch, SetStateAction } from 'react';
 
-import { styled } from 'styled-components';
-import { useDetectSmallScreen } from '../../hooks';
-import { FundingSteps } from './FundingSteps';
-import { Modal } from './Modal';
-import { ModalFooter } from './ModalFooter';
-import { STATIC_BASE_URL, MODAL_LOGO_IMAGE_URL } from '../../config';
+import { useCopy } from '../../hooks';
+import { ConsentModalContent } from './ConsentModalContent';
 
 type ConsentModalProps = {
   isModalOpen: boolean;
-  setIsModalOpen: (isOpen: boolean) => void;
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-const ImageContainer = styled(Image)`
-  width: 100%;
-  max-width: none;
-`;
-
 export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
-  const { formatMessage } = useIntl();
-  const isSmallScreen = useDetectSmallScreen();
-  const { isMobile } = useDetectDeviceSize();
+  const { data: copy } = useCopy();
+  const consentModal = copy?.consentModal;
+
+  if (!consentModal) return null;
 
-  const isReducedSpacing = isSmallScreen || isMobile;
+  const { imageUrl, buttons, termsAndConditions, descriptions, title } = consentModal;
 
   return (
-    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      {!isSmallScreen && <ImageContainer src={`${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`} />}
-      <Flex direction="column" gap="8" padding={isReducedSpacing ? '4' : '6'}>
-        <Flex direction="column" gap="6">
-          <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
-            {formatMessage({ id: 'ctaModal.title' })}
-          </Text>
-          <FundingSteps />
-        </Flex>
-        <ModalFooter setOpen={setIsModalOpen} />
-      </Flex>
-    </Modal>
+    <ConsentModalContent
+      imageUrl={imageUrl}
+      title={title}
+      descriptions={descriptions}
+      buttons={buttons}
+      termsAndConditions={termsAndConditions}
+      setIsModalOpen={setIsModalOpen}
+      isModalOpen={isModalOpen}
+    />
   );
 };

package/src/components/modal/ConsentModalContent.tsx

@@ -0,0 +1,63 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { Flex, Image, Text, useDetectDeviceSize } from '@wayflyer/flyui';
+
+import { useDetectSmallScreen } from '../../hooks';
+import { FundingSteps } from './FundingSteps.tsx';
+import { ModalFooter } from './ModalFooter.tsx';
+import { Modal } from './Modal.tsx';
+import { styled } from 'styled-components';
+
+type ModalDescriptions = {
+  title: string;
+  description: string;
+};
+
+type Buttons = {
+  accept: string;
+  close: string;
+};
+
+type ConsentModalContentProps = {
+  imageUrl: string;
+  title: string;
+  descriptions: ModalDescriptions[];
+  buttons: Buttons;
+  termsAndConditions: string;
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+  isModalOpen: boolean;
+};
+
+const ImageContainer = styled(Image)`
+  width: 100%;
+  max-width: none;
+`;
+
+export const ConsentModalContent = ({
+  imageUrl,
+  title,
+  descriptions,
+  termsAndConditions,
+  buttons,
+  setIsModalOpen,
+  isModalOpen,
+}: ConsentModalContentProps) => {
+  const isSmallScreen = useDetectSmallScreen();
+  const { isMobile } = useDetectDeviceSize();
+
+  const isReducedSpacing = isSmallScreen || isMobile;
+
+  return (
+    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
+      {!isSmallScreen && <ImageContainer src={imageUrl} />}
+      <Flex direction="column" gap="8" padding={isReducedSpacing ? '4' : '6'}>
+        <Flex direction="column" gap="6">
+          <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
+            {title}
+          </Text>
+          <FundingSteps descriptions={descriptions} />
+        </Flex>
+        <ModalFooter setOpen={setIsModalOpen} buttons={buttons} termsAndConditions={termsAndConditions} />
+      </Flex>
+    </Modal>
+  );
+};