@wf-financing/ui 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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,7 +5,7 @@ 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;

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;
 

package/src/components/banner/{CtaBanner.stories.tsx → CtaBanner.snapshot.stories.tsx}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Themes } from '@wayflyer/flyui';
-import { CtaResponseTypes, MockedModeType } from '@wf-financing/embedded-types';
+import { SdkScenarios, MockedModeType } from '@wf-financing/embedded-types';
 import { App } from '../../App';
 import { CtaBanner } from './CtaBanner';
 
@@ -31,10 +31,10 @@ const meta: Meta<typeof CtaBanner> = {
     ...defaultArgs,
     mockedMode: {
       isMockedMode: true,
-      sdkScenario: CtaResponseTypes.GENERIC_OFFER,
+      sdkScenario: SdkScenarios.GENERIC_NEW_APPLICATION,
     },
   },
-  decorators: [(Story, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
+  decorators: [(_, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
 };
 
 export default meta;
@@ -45,7 +45,27 @@ export const GenericOffer: Story = {
   args: {
     mockedMode: {
       isMockedMode: true,
-      sdkScenario: CtaResponseTypes.GENERIC_OFFER,
+      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/modal/{ConsentModal.stories.tsx → ConsentModal.snapshot.stories.tsx}

@@ -34,7 +34,7 @@ export const WithContent: Story = {
       <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>Continue to Wayflyer</button>
         <button>Cancel</button>
       </div>
     </ConsentModal>

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', maxWidth: '100vw' }}
+              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/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

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

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/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.action": "Continue with Wayflyer",
+  "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": "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/components/banner/BulletList.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BulletList } from './BulletList';
-
-const meta: Meta<typeof BulletList> = {
-  title: 'BulletList',
-  component: BulletList,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BulletList>;
-
-export const Default: Story = {
-  render: () => <BulletList items={['Item 1', 'Item 2', 'Item 3']} />,
-};