@wf-financing/ui 0.1.1 → 1.1.0

package/src/components/banner/CtaBannerContent.tsx

@@ -1,26 +1,30 @@
-import { Flex, TextHeading } from '@wayflyer/flyui';
+import { Flex, Text } from '@wayflyer/flyui';
 import type { CtaResponseType } from '@wf-financing/embedded-types';
 
 import { useCtaBanner } from '../../hooks/useCtaBanner';
 import { BulletList } from './BulletList';
 
-type CtaBannerContent = {
+type CtaBannerContentProps = {
   isMobile: boolean;
   isTablet: boolean;
 };
 
-export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContent) => {
+export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContentProps) => {
   const sdk = useCtaBanner();
   const ctaData = sdk.data as CtaResponseType;
 
   return (
-    <Flex direction="column" gap="1">
-      <TextHeading element="p" size={isMobile ? 'lg' : 'xl'} lineHeight="tight">
-        {ctaData?.data?.config?.text}
-      </TextHeading>
-      {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
-        <BulletList items={ctaData?.data?.config?.bullet_points} />
+    <>
+      {!sdk.isLoading && (
+        <Flex direction="column" gap="1">
+          <Text size={isMobile ? 'lg' : 'xl'} fontStyle="regular" fontWeight="medium" lineHeight="normal">
+            {ctaData?.data?.config?.text}
+          </Text>
+          {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
+            <BulletList items={ctaData?.data?.config?.bullet_points} />
+          )}
+        </Flex>
       )}
-    </Flex>
+    </>
   );
 };

package/src/components/banner/FooterActions.tsx

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

package/src/components/banner/HeaderActions.tsx

@@ -0,0 +1,9 @@
+import { useDetectDeviceSize } from '@wayflyer/flyui';
+import { BannerActionsDesktop } from './BannerActionsDesktop';
+import { CloseButton } from './CloseButton';
+
+export const HeaderActions = () => {
+  const { isMobile } = useDetectDeviceSize();
+
+  return isMobile ? <CloseButton /> : <BannerActionsDesktop />;
+};

package/src/components/banner/ProceedFundingButton.tsx

@@ -1,5 +1,10 @@
 import { Button } from '@wayflyer/flyui';
-import { CtaContinueFundingType, CtaGenericOfferType, CtaIndicativeOfferType, CtaStateType } from '@wf-financing/embedded-types';
+import {
+  CtaContinueFundingType,
+  CtaGenericOfferType,
+  CtaIndicativeOfferType,
+  CtaStateType,
+} from '@wf-financing/embedded-types';
 import { useState } from 'react';
 
 import { useCtaBanner } from '../../hooks/useCtaBanner';
@@ -10,8 +15,14 @@ type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinu
 export const ProceedFundingButton = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const sdkResponse = useCtaBanner();
-  const sdk = sdkResponse.data as CtaResponseType
-  const { state, data: { config } } = sdk;
+  const sdk = sdkResponse.data as CtaResponseType;
+
+  if (!sdk) return null;
+
+  const {
+    state,
+    data: { config },
+  } = sdk;
 
   const handleButtonClick = () => {
     switch (state) {
@@ -22,12 +33,12 @@ export const ProceedFundingButton = () => {
         setIsModalOpen(true);
         break;
     }
-    };
+  };
 
   return (
     <>
-      <Button variant="Primary" onClick={handleButtonClick}>
-        {config.button_label}
+      <Button variant="Primary" fullWidth onClick={handleButtonClick}>
+        {config?.button_label}
       </Button>
       <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
     </>

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConsentModal } from './ConsentModal';
+
+const fn = (): void => {};
+
+const meta: Meta<typeof ConsentModal> = {
+  title: 'ConsentModal',
+  component: ConsentModal,
+  argTypes: {
+    isModalOpen: { control: 'boolean', defaultValue: true },
+    setIsModalOpen: { action: 'setIsModalOpen' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ConsentModal>;
+
+export const Default: Story = {
+  args: {
+    isModalOpen: true,
+    setIsModalOpen: fn,
+  },
+  render: (args) => <ConsentModal {...args} />,
+};
+
+export const WithContent: Story = {
+  args: {
+    isModalOpen: true,
+    setIsModalOpen: fn,
+  },
+  render: (args) => (
+    <ConsentModal {...args}>
+      <div style={{ padding: '20px', background: 'white' }}>
+        <h2>Consent Agreement</h2>
+        <p>Please agree to the terms to proceed.</p>
+        <button>Continue with Wayflyer</button>
+        <button>Cancel</button>
+      </div>
+    </ConsentModal>
+  ),
+};

package/src/components/modal/ConsentModal.tsx

@@ -16,9 +16,9 @@ export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps)
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
       <Image src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />
-      <Flex margin={['6', '8', '6', '8']} direction="column" gap="10">
+      <Flex margin={['6']} direction="column" gap="10">
         <Flex direction="column" gap="6">
-          <Text fontWeight="semiBold" size="2xl">
+          <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
             {formatMessage({ id: 'ctaModal.title' })}
           </Text>
           <FundingSteps />

package/src/components/modal/FundingSteps.tsx

@@ -13,10 +13,8 @@ export const FundingSteps = () => {
         <Flex key={id} direction="column" gap="1">
           <Flex gap="2" direction="row" align="center">
             <Icon />
-            <Text fontWeight="semiBold">
-              {formatMessage(title)}
-            </Text>
-            <Badge>{formatMessage(time)}</Badge>
+            <Text fontWeight="medium">{formatMessage(title)}</Text>
+            <Badge size="small">{formatMessage(time)}</Badge>
           </Flex>
           <div style={{ paddingLeft: theme.spacing('8') }}>
             <Text color="placeholder">{formatMessage(subtitle)}</Text>

package/src/components/modal/Modal.tsx

@@ -1,6 +1,4 @@
-import {
-  Dialog
-} from '@wayflyer/flyui';
+import { Dialog } from '@wayflyer/flyui';
 import { AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
 import { ReactNode, useId, useRef } from 'react';
 import { UNSAFE_PortalProvider as PortalProvider } from 'react-aria';
@@ -12,7 +10,7 @@ type ModalProps = {
   isModalOpen: boolean;
   setIsModalOpen: (isOpen: boolean) => void;
   children: ReactNode;
-}
+};
 
 export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) => {
   const modalId = useId();
@@ -33,7 +31,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
               animate={fullSize}
               exit={small}
               transition={{ duration: 0.3 }}
-              style={{ width: '438px', border: 'none' }}
+              style={{ width: '438px', border: 'none', maxWidth: '100vw' }}
             >
               <MotionModalOverlay
                 data-id="modal-mask"
@@ -43,10 +41,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
                 exit={transparent}
                 transition={{ duration: 0.6 }}
               />
-              <Dialog
-                role="dialog"
-                aria-labelledby={modalId}
-              >
+              <Dialog role="dialog" aria-labelledby={modalId}>
                 <DialogBody ref={scrollableElRef} data-testid="modal-body">
                   {children}
                 </DialogBody>

package/src/components/modal/ModalFooter.tsx

@@ -1,6 +1,7 @@
-import { Button, Flex, Text } from '@wayflyer/flyui';
+import { Button, Flex, Link, Text } from '@wayflyer/flyui';
+import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
-import { useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import { useStartHostedApplication } from '../../hooks/useStartHostedApplication';
 
@@ -9,33 +10,40 @@ type ModalFooterType = {
 };
 
 export const ModalFooter = ({ setOpen }: ModalFooterType) => {
-  const { formatMessage } = useIntl();
   const startHostedAppMutation = useStartHostedApplication();
 
   const handleStartApplication = () => {
-  startHostedAppMutation.mutate(undefined, {
-    onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
-      const { next } = nextUrl;
-      window.open(next);
-    },
+    startHostedAppMutation.mutate(undefined, {
+      onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
+        const { next } = nextUrl;
+        window.open(next);
+      },
       onError: (error) => {
         console.error('Failed to start application', error);
       },
     });
   };
 
+  const handleOpenExternalLink = () => {
+    window.open('https://wayflyer.com/en/privacy-notice', '_blank', 'noopener,noreferrer');
+  };
+
   return (
     <Flex direction="column" gap="3">
       <Flex gap="2">
-        <Button onClick={handleStartApplication} variant="Primary">
-          {formatMessage({ id: 'ctaModal.action' })}
+        <Button fullWidth onClick={handleStartApplication} variant="Primary" external>
+          <FormattedMessage id="ctaModal.action" />
+          <IconArrowOnSquareUpRight16Line />
         </Button>
-        <Button variant="TertiaryAccent" onClick={() => setOpen(false)}>
-          {formatMessage({ id: 'common.cancel' })}
+        <Button fullWidth variant="Secondary" onClick={() => setOpen(false)}>
+          <FormattedMessage id="common.cancel" />
         </Button>
       </Flex>
       <Text size="sm" lineHeight="normal">
-        {formatMessage({ id: 'ctaModal.consent' })}
+        <FormattedMessage id="ctaModal.consent" />
+        <Link onClick={handleOpenExternalLink}>
+          <FormattedMessage id="ctaModal.consent.privacy_policy" />
+        </Link>
       </Text>
     </Flex>
   );

package/src/components/modal/modalEnhancements.ts

@@ -1,7 +1,4 @@
-import {
-  ModalOverlay as OriginalModalOverlay,
-  ModalPrimitive as OriginalModalPrimitive
-} from '@wayflyer/flyui';
+import { ModalOverlay as OriginalModalOverlay, ModalPrimitive as OriginalModalPrimitive } from '@wayflyer/flyui';
 import { m } from 'framer-motion';
 import styled from 'styled-components';
 
@@ -24,6 +21,8 @@ export const DialogBody = styled.div`
   overflow-y: auto;
   background-color: var(--palette-modal-surface);
   border-radius: var(--sizes-radius-md);
+  max-height: 80vh;
+  padding-bottom: 10px;
 
   &::-webkit-scrollbar {
     width: 12px;

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export { WAYFLYER_HEADLESS_SDK_ID } from './scriptId';
+export { HEADLESS_SDK_URL } from './url';

package/src/config/scriptId.ts

@@ -0,0 +1 @@
+export const WAYFLYER_HEADLESS_SDK_ID = 'wayflyer-headless-sdk';

package/src/config/url.ts

@@ -0,0 +1 @@
+export const HEADLESS_SDK_URL = 'https://unpkg.com/@wf-financing/headless@1/dist/index.es.js';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { usePartnerContext } from './usePartnerContext';
+export { useCtaBanner } from './useCtaBanner';
+export { useStartHostedApplication } from './useStartHostedApplication';

package/src/hooks/useCtaBanner.ts

@@ -1,20 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { useContext } from 'react';
 
 import { fetchCtaBanner } from '../api/ctaBanner';
-import { PartnerContext } from '../utils/partnerContext';
-
-type PartnerDataType = {
-  companyToken: string;
-  isMockedMode: boolean;
-};
+import { usePartnerContext } from './usePartnerContext';
 
 export const useCtaBanner = () => {
-  const { companyToken, isMockedMode } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode } = usePartnerContext();
 
   return useQuery({
-    queryKey: ['cta', companyToken, isMockedMode],
-    queryFn: () => fetchCtaBanner(companyToken, isMockedMode),
+    queryKey: ['cta', companyToken, mockedMode],
+    queryFn: () => fetchCtaBanner(companyToken, mockedMode),
     staleTime: Infinity,
   });
-}
+};

package/src/hooks/usePartnerContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { PartnerContext, type PartnerContextType } from '../utils';
+
+export const usePartnerContext = () => {
+  return useContext(PartnerContext) as PartnerContextType;
+};

package/src/hooks/useStartHostedApplication.ts

@@ -1,21 +1,12 @@
-import { PartnerCallbackType } from '@wf-financing/embedded-types';
-import { useContext } from "react";
-
-import { PartnerContext } from "../utils/partnerContext";
-
-type PartnerDataType = {
-  companyToken: string;
-  isMockedMode: boolean;
-  partnerCallback: PartnerCallbackType;
-};
-
 import { useMutation } from '@tanstack/react-query';
+
 import { startHostedApplication } from '../api/startHostedApplication';
+import { usePartnerContext } from './usePartnerContext';
 
 export const useStartHostedApplication = () => {
-  const { companyToken, isMockedMode, partnerCallback } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode, partnerCallback } = usePartnerContext();
 
   return useMutation({
-    mutationFn: () => startHostedApplication(companyToken, isMockedMode, partnerCallback),
+    mutationFn: () => startHostedApplication(companyToken, partnerCallback, mockedMode),
   });
 };

package/src/locales/en.json

@@ -1,9 +1,11 @@
 {
   "common.cancel": "Cancel",
+  "common.dismiss": "Dismiss",
   "ctaModal.call": "Get funded",
   "ctaModal.title": "We work with Wayflyer to provide you capital",
   "ctaModal.action": "Continue with Wayflyer",
-  "ctaModal.consent": "By proceeding, you consent to sharing your BigCommerce information with 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": "Create your account",
   "ctaModal.step1.subtitle": "Tell us about your business and funding needs",
   "ctaModal.step1.time": "2 mins",

package/src/main.tsx

@@ -1,38 +1,36 @@
 import type { Themes } from '@wayflyer/flyui';
-import { PartnerCallbackType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 import ReactDOM from 'react-dom/client';
 
 import { App } from './App';
 
-const roots = new Map<HTMLElement, ReactDOM.Root>();
+let root: ReactDOM.Root | undefined = undefined;
 
 export const mountToTarget = (
   targetId: string,
   partnerDesignId: Themes,
   partnerCallback: PartnerCallbackType,
   companyToken: string,
-  isMockedMode?: boolean,
+  mockedMode?: MockedModeType,
 ) => {
   const targetElement = document.getElementById(targetId);
+  if (!targetElement) throw new Error(`Target element with id "${targetId}" not found.`);
 
-  if (!targetElement) {
-    console.warn(`Target element with id "${targetId}" not found.`);
-    return;
-  }
-
-  let root = roots.get(targetElement);
+  if (!root) root = ReactDOM.createRoot(targetElement);
 
-  if (!root) {
-    root = ReactDOM.createRoot(targetElement);
-    roots.set(targetElement, root);
+  function handleCloseWidget() {
+    if (!root) throw new Error('Root is not found');
+    root.unmount();
+    root = undefined;
   }
 
   root.render(
     <App
       partnerDesignId={partnerDesignId}
       companyToken={companyToken}
-      isMockedMode={isMockedMode}
+      mockedMode={mockedMode}
       partnerCallback={partnerCallback}
-    />
+      onWidgetClose={handleCloseWidget}
+    />,
   );
 };

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { initializeHeadlessSdk } from './initializeHeadlessSdk';
+export { loadScriptAndInitializeSdk } from './loadScriptAndInitializeSdk';
+export { PartnerContext, type PartnerContextType } from './partnerContext';

package/src/utils/initializeHeadlessSdk.ts

@@ -0,0 +1,21 @@
+import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+
+export const initializeHeadlessSdk = (companyToken: string, mockedMode?: MockedModeType): IHeadlessWayflyerCtaSdk => {
+  if (!window.WayflyerHeadlessSdk) {
+    throw new Error('Failed to load WayflyerHeadlessSdk from the script.');
+  }
+
+  const WayflyerHeadlessSdk = window.WayflyerHeadlessSdk;
+
+  if (mockedMode) {
+    mockedMode.sdkScenario;
+    const { isMockedMode, sdkScenario } = mockedMode;
+
+    const wayflyerCtaSdk = new WayflyerHeadlessSdk(companyToken, isMockedMode);
+    wayflyerCtaSdk.setSdkScenario(sdkScenario);
+
+    return wayflyerCtaSdk;
+  }
+
+  return new WayflyerHeadlessSdk(companyToken);
+};

package/src/utils/loadScriptAndInitializeSdk.ts

@@ -0,0 +1,19 @@
+import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+
+import { initializeHeadlessSdk } from './initializeHeadlessSdk';
+
+export const loadScriptAndInitializeSdk = (
+  script: HTMLScriptElement,
+  companyToken: string,
+  mockedMode?: MockedModeType,
+): Promise<IHeadlessWayflyerCtaSdk> => {
+  return new Promise<IHeadlessWayflyerCtaSdk>((resolve, reject) => {
+    script.onload = () => {
+      try {
+        resolve(initializeHeadlessSdk(companyToken, mockedMode));
+      } catch (error) {
+        reject(error);
+      }
+    };
+  });
+};

package/src/utils/partnerContext.ts

@@ -1,10 +1,14 @@
-import { PartnerCallbackType } from '@wf-financing/embedded-types';
-import { createContext } from "react";
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+import { createContext } from 'react';
 
-type PartnerContextType = {
+export type PartnerContextType = {
   companyToken: string;
   isMockedMode?: boolean;
-  partnerCallback: PartnerCallbackType,
-} | null;
+  partnerCallback: PartnerCallbackType;
+  mockedMode?: MockedModeType;
+  onWidgetClose: () => void;
+};
 
-export const PartnerContext = createContext<PartnerContextType>(null);
+type PartnerContextWithDefaultType = PartnerContextType | null;
+
+export const PartnerContext = createContext<PartnerContextWithDefaultType>(null);

package/tsconfig.json

@@ -4,6 +4,6 @@
     "rootDir": ".",
     "baseUrl": "."
   },
-  "include": ["**/*.ts", "**.ts", "**/*.tsx", "**.tsx"],
-  "exclude": ["dist", "mocks", "tests", "playground"]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["dist", "tests", "playground", "node_modules"]
 }

package/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest/config" />
 import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
@@ -22,5 +23,5 @@ export default defineConfig({
     rollupOptions: {
       external: [],
     },
-  }
+  },
 });

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />

package/src/components/banner/CtaBannerActions.tsx

@@ -1,19 +0,0 @@
-import { Button, Flex } from '@wayflyer/flyui';
-import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
-
-import { ProceedFundingButton } from './ProceedFundingButton';
-
-type CtaBannerActionsType = {
-  isMobile: boolean;
-};
-
-export const CtaBannerActions = ({ isMobile }: CtaBannerActionsType) => (
-  <Flex gap="4">
-    {!isMobile && (
-      <ProceedFundingButton />
-    )}
-    <Button variant="Tertiary">
-      <IconX16Line />
-    </Button>
-  </Flex>
-);