@wf-financing/ui 1.0.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -38,7 +38,7 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.2.4"
+    "@wf-financing/embedded-types": "0.2.5"
   },
   "publishConfig": {
     "access": "public"

package/src/App.tsx

@@ -5,13 +5,14 @@ import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
 import { CtaWidget } from './CtaWidget';
 import enMessages from './locales/en.json';
-import { PartnerContext } from './utils/partnerContext';
+import { PartnerContext } from './utils';
 
 type AppPropsType = {
   partnerDesignId: Themes;
   companyToken: string;
   mockedMode?: MockedModeType;
   partnerCallback: PartnerCallbackType;
+  onWidgetClose: () => void;
 };
 
 const queryClient = new QueryClient();
@@ -19,7 +20,7 @@ const messages = {
   en: enMessages,
 };
 
-export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback }: AppPropsType) => {
+export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback, onWidgetClose }: AppPropsType) => {
   const locale = 'en';
 
   const intl: IntlShape = createIntl(
@@ -32,7 +33,7 @@ export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback
 
   return (
     <QueryClientProvider client={queryClient}>
-      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback }}>
+      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback, onWidgetClose }}>
         <FlyUIProvider theme={partnerDesignId} intl={intl}>
           <CtaWidget />
         </FlyUIProvider>

package/src/CtaWidget.tsx

@@ -1,8 +1,19 @@
+import { useEffect } from 'react';
+
 import { CtaBanner } from './components/banner/CtaBanner';
-import { useCtaBanner } from './hooks/useCtaBanner';
+import { useCtaBanner, usePartnerContext } from './hooks';
 
 export const CtaWidget = () => {
   const banner = useCtaBanner();
+  const partnerContext = usePartnerContext();
+
+  useEffect(() => {
+    if (!banner.isLoading && !banner.data) {
+      requestAnimationFrame(() => {
+        partnerContext.onWidgetClose();
+      });
+    }
+  }, [banner.data]);
 
-  return <>{!banner.isLoading && <CtaBanner />}</>;
+  return <>{!banner.isLoading && banner.data && <CtaBanner />}</>;
 };

package/src/api/getHeadlessSdkInstance.ts

@@ -7,7 +7,13 @@ let cachedSdkInstance: IHeadlessWayflyerCtaSdk | null = null;
 
 export const getHeadlessSdkInstance = async (companyToken: string, mockedMode?: MockedModeType) => {
   try {
-    if (cachedSdkInstance) return cachedSdkInstance;
+    if (cachedSdkInstance) {
+      if (mockedMode) {
+        cachedSdkInstance.setSdkScenario(mockedMode.sdkScenario);
+      }
+
+      return cachedSdkInstance;
+    }
 
     const existingScript = document.getElementById(WAYFLYER_HEADLESS_SDK_ID) as HTMLScriptElement;
 
@@ -25,6 +31,7 @@ export const getHeadlessSdkInstance = async (companyToken: string, mockedMode?:
     script.id = WAYFLYER_HEADLESS_SDK_ID;
     script.async = true;
 
+    console.log(script, 'script');
     document.head.appendChild(script);
 
     const headlessSdk: IHeadlessWayflyerCtaSdk = await loadScriptAndInitializeSdk(script, companyToken, mockedMode);

package/src/components/banner/BannerActionsDesktop.tsx

@@ -1,13 +1,13 @@
-import { Button, Flex } from '@wayflyer/flyui';
-import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
+import { Flex } from '@wayflyer/flyui';
 
+import { CloseButton } from './CloseButton';
 import { ProceedFundingButton } from './ProceedFundingButton';
 
-export const BannerActionsDesktop = () => (
-  <Flex gap="4">
-    <ProceedFundingButton />
-    <Button variant="Tertiary">
-      <IconX16Line />
-    </Button>
-  </Flex>
-);
+export const BannerActionsDesktop = () => {
+  return (
+    <Flex gap="4">
+      <ProceedFundingButton />
+      <CloseButton />
+    </Flex>
+  );
+};

package/src/components/banner/CloseButton.tsx

@@ -0,0 +1,16 @@
+import { Button, Flex } from '@wayflyer/flyui';
+import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
+
+import { usePartnerContext } from '../../hooks';
+
+export const CloseButton = () => {
+  const { onWidgetClose: closeWidget } = usePartnerContext();
+
+  return (
+    <Button onClick={closeWidget} variant="Tertiary">
+      <Flex padding="2">
+        <IconX16Line />
+      </Flex>
+    </Button>
+  );
+};

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

@@ -1,14 +1,71 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Themes } from '@wayflyer/flyui';
+import { SdkScenarios, MockedModeType } from '@wf-financing/embedded-types';
+import { App } from '../../App';
 import { CtaBanner } from './CtaBanner';
 
+const defaultArgs = {
+  partnerDesignId: 'whiteLabel' as Themes,
+  companyToken: 'demo-token',
+  partnerCallback: () => {},
+  onWidgetClose: () => {},
+};
+
+type CtaBannerStoryArgs = typeof defaultArgs & { mockedMode: MockedModeType };
+
+const Template = (args: CtaBannerStoryArgs) => (
+  <App {...args}>
+    <CtaBanner />
+  </App>
+);
+
 const meta: Meta<typeof CtaBanner> = {
   title: 'CtaBanner',
   component: CtaBanner,
+  argTypes: {
+    mockedMode: {
+      control: { type: 'object' },
+    },
+  },
+  args: {
+    ...defaultArgs,
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
+    },
+  },
+  decorators: [(Story, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
 };
 
 export default meta;
 type Story = StoryObj<typeof CtaBanner>;
 
-export const Default: Story = {
-  render: () => <CtaBanner />,
+export const GenericOffer: Story = {
+  name: 'Generic Offer',
+  args: {
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
+    },
+  },
+};
+
+export const IndicativeOffer: Story = {
+  name: 'Indicative Offer',
+  args: {
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.INDICATIVE_NEW_APPLICATION,
+    },
+  },
+};
+
+export const ContinueApplication: Story = {
+  name: 'Continue Application',
+  args: {
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.CONTINUE_APPLICATION,
+    },
+  },
 };

package/src/components/banner/CtaBanner.tsx

@@ -1,9 +1,9 @@
 import { Flex, Theme, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
 import { styled } from 'styled-components';
 
-import { BannerActionsDesktop } from './BannerActionsDesktop';
-import { BannerActionsMobile } from './BannerActionsMobile';
 import { CtaBannerContent } from './CtaBannerContent';
+import { FooterActions } from './FooterActions';
+import { HeaderActions } from './HeaderActions';
 
 type BannerContainerPropTypes = {
   theme: Theme;
@@ -28,9 +28,9 @@ export const CtaBanner = () => {
     <BannerContainer isMobile={isMobile} theme={theme}>
       <Flex gap="4" align="center" justify="space-between" width="100%">
         <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
-        {!isMobile && <BannerActionsDesktop />}
+        <HeaderActions />
       </Flex>
-      {isMobile && <BannerActionsMobile />}
+      <FooterActions />
     </BannerContainer>
   );
 };

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/modal/ConsentModal.tsx

@@ -1,9 +1,10 @@
-import { Flex, Image, Text } from '@wayflyer/flyui';
+import { Flex, Image, Text, useDetectDeviceSize } from '@wayflyer/flyui';
 import { useIntl } from 'react-intl';
 
 import { FundingSteps } from './FundingSteps';
 import { Modal } from './Modal';
 import { ModalFooter } from './ModalFooter';
+import { useDetectSmallScreen } from '../../hooks';
 
 type ConsentModalProps = {
   isModalOpen: boolean;
@@ -12,11 +13,13 @@ type ConsentModalProps = {
 
 export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
   const { formatMessage } = useIntl();
+  const isSmallScreen = useDetectSmallScreen();
+  const { isMobile } = useDetectDeviceSize();
 
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      <Image src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />
-      <Flex margin={['6']} direction="column" gap="10">
+      {!isSmallScreen && <Image src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />}
+      <Flex direction="column" gap="8" padding={isSmallScreen || isMobile ? '4' : '6'}>
         <Flex direction="column" gap="6">
           <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
             {formatMessage({ id: 'ctaModal.title' })}

package/src/components/modal/FundingSteps.tsx

@@ -1,24 +1,17 @@
-import { Badge, Flex, Text, useTheme } from '@wayflyer/flyui';
+import { Flex, Text } from '@wayflyer/flyui';
 import { useIntl } from 'react-intl';
 
 import { MODAL_ITEMS } from '../../constants';
 
 export const FundingSteps = () => {
   const { formatMessage } = useIntl();
-  const theme = useTheme();
 
   return (
-    <Flex direction="column" gap="4">
-      {MODAL_ITEMS.map(({ id, title, subtitle, Icon, time }) => (
-        <Flex key={id} direction="column" gap="1">
-          <Flex gap="2" direction="row" align="center">
-            <Icon />
-            <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>
-          </div>
+    <Flex direction="column" gap="3">
+      {MODAL_ITEMS.map(({ id, title, subtitle }) => (
+        <Flex key={id} direction="column">
+          <Text fontWeight="medium">{formatMessage(title)}</Text>
+          <Text color="placeholder">{formatMessage(subtitle)}</Text>
         </Flex>
       ))}
     </Flex>

package/src/components/modal/Modal.tsx

@@ -31,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: '90vw', maxHeight: '90vh' }}
             >
               <MotionModalOverlay
                 data-id="modal-mask"

package/src/components/modal/ModalFooter.tsx

@@ -3,7 +3,7 @@ import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
 import { FormattedMessage } from 'react-intl';
 
-import { useStartHostedApplication } from '../../hooks/useStartHostedApplication';
+import { useStartHostedApplication, useDetectSmallScreen } from '../../hooks';
 
 type ModalFooterType = {
   setOpen: (isOpen: boolean) => void;
@@ -11,6 +11,7 @@ type ModalFooterType = {
 
 export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const startHostedAppMutation = useStartHostedApplication();
+  const isSmallScreen = useDetectSmallScreen();
 
   const handleStartApplication = () => {
     startHostedAppMutation.mutate(undefined, {
@@ -30,7 +31,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
 
   return (
     <Flex direction="column" gap="3">
-      <Flex gap="2">
+      <Flex gap="2" direction={isSmallScreen ? 'column' : 'row'}>
         <Button fullWidth onClick={handleStartApplication} variant="Primary" external>
           <FormattedMessage id="ctaModal.action" />
           <IconArrowOnSquareUpRight16Line />

package/src/components/modal/modalEnhancements.ts

@@ -21,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/constants/modalItems.ts

@@ -1,29 +1,17 @@
-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,
-    time: { id: 'ctaModal.step1.time' },
   },
   {
     id: 'step2',
     title: { id: 'ctaModal.step2.title' },
     subtitle: { id: 'ctaModal.step2.subtitle' },
-    Icon: IconArrowsCwHorizontal24Line,
-    time: { id: 'ctaModal.step2.time' },
   },
   {
     id: 'step3',
     title: { id: 'ctaModal.step3.title' },
     subtitle: { id: 'ctaModal.step3.subtitle' },
-    Icon: IconCheckCircle24Line,
-    time: { id: 'ctaModal.step3.time' },
   },
 ];

package/src/hooks/index.ts

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

package/src/hooks/useCtaBanner.ts

@@ -1,17 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
-import { useContext } from 'react';
-import { MockedModeType } from '@wf-financing/embedded-types';
 
 import { fetchCtaBanner } from '../api/ctaBanner';
-import { PartnerContext } from '../utils/partnerContext';
-
-type PartnerDataType = {
-  companyToken: string;
-  mockedMode?: MockedModeType;
-};
+import { usePartnerContext } from './usePartnerContext';
 
 export const useCtaBanner = () => {
-  const { companyToken, mockedMode } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode } = usePartnerContext();
 
   return useQuery({
     queryKey: ['cta', companyToken, mockedMode],

package/src/hooks/useDetectSmallScreen.ts

@@ -0,0 +1,7 @@
+import { useMediaQuery } from '@wayflyer/flyui';
+
+export const useDetectSmallScreen = (): boolean => {
+  const query = useMediaQuery();
+
+  return query('xxs').windowLte;
+};

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,19 +1,10 @@
-import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
-import { useContext } from 'react';
-
-import { PartnerContext } from '../utils/partnerContext';
-
-type PartnerDataType = {
-  companyToken: string;
-  mockedMode?: MockedModeType;
-  partnerCallback: PartnerCallbackType;
-};
-
 import { useMutation } from '@tanstack/react-query';
+
 import { startHostedApplication } from '../api/startHostedApplication';
+import { usePartnerContext } from './usePartnerContext';
 
 export const useStartHostedApplication = () => {
-  const { companyToken, mockedMode, partnerCallback } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode, partnerCallback } = usePartnerContext();
 
   return useMutation({
     mutationFn: () => startHostedApplication(companyToken, partnerCallback, mockedMode),

package/src/locales/en.json

@@ -2,17 +2,16 @@
   "common.cancel": "Cancel",
   "common.dismiss": "Dismiss",
   "ctaModal.call": "Get funded",
-  "ctaModal.title": "We work with Wayflyer to provide you capital",
+  "ctaModal.title": "Fuel your growth with capital from Wayflyer",
   "ctaModal.action": "Continue 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.title": "Built for businesses like yours",
+  "ctaModal.step1.subtitle": "$5B+ deployed to 5,000+ companies since 2019",
   "ctaModal.step1.time": "2 mins",
-  "ctaModal.step2.title": "Connect your platforms and apply",
-  "ctaModal.step2.subtitle": "We’ll analyze your business performance",
+  "ctaModal.step2.title": "Your growth, your way",
+  "ctaModal.step2.subtitle": "Flexible products with terms that fit your business",
   "ctaModal.step2.time": "10 mins",
-  "ctaModal.step3.title": "Accept and receive funds",
-  "ctaModal.step3.subtitle": "Once approved, funds can be deployed in 24h",
-  "ctaModal.step3.time": "24 hrs"
+  "ctaModal.step3.title": "Quick to get started",
+  "ctaModal.step3.subtitle": "Apply in minutes and get capital in hours"
 }

package/src/main.tsx

@@ -4,7 +4,7 @@ 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,
@@ -14,17 +14,14 @@ export const mountToTarget = (
   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(
@@ -33,6 +30,7 @@ export const mountToTarget = (
       companyToken={companyToken}
       mockedMode={mockedMode}
       partnerCallback={partnerCallback}
+      onWidgetClose={handleCloseWidget}
     />,
   );
 };

package/src/utils/index.ts

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

package/src/utils/partnerContext.ts

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

package/src/components/banner/BannerActions.stories.tsx

@@ -1,22 +0,0 @@
-import { BannerActionsDesktop } from './BannerActionsDesktop';
-import { BannerActionsMobile } from './BannerActionsMobile';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Banner/BannerActions',
-  component: BannerActionsDesktop,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const Desktop: StoryObj = {
-  render: () => <BannerActionsDesktop />,
-  name: 'Desktop Actions',
-};
-
-export const Mobile: StoryObj = {
-  render: () => <BannerActionsMobile />,
-  name: 'Mobile Actions',
-};

package/src/components/banner/BannerActionsMobile.tsx

@@ -1,12 +0,0 @@
-import { Button, Flex } from '@wayflyer/flyui';
-
-import { ProceedFundingButton } from './ProceedFundingButton';
-
-export const BannerActionsMobile = () => (
-  <Flex gap="2" align="center" width="100%" justify="space-around">
-    <ProceedFundingButton />
-    <Button fullWidth title="Dismiss" variant="Secondary">
-      Dismiss
-    </Button>
-  </Flex>
-);