@wf-financing/ui 3.6.1 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",

package/src/components/banner/CtaBanner.tsx

@@ -9,8 +9,9 @@ import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
 
 const ON_DARK_THEMES = ['athena'];
 const LIGHT_BG_THEMES = ['conjura', 'rocketFuel'];
+const TERTIARY_THEMES = ['reveni'];
 
-const BannerContainer = styled.aside<{ $isLightBgTheme: boolean }>`
+const BannerContainer = styled.aside<{ $isLightBgTheme: boolean; $isTertiaryTheme: boolean }>`
   padding: var(--sizes-spacing-4) var(--sizes-spacing-4) var(--sizes-spacing-4) var(--sizes-spacing-6);
   box-shadow: var(--effects-shadow);
   border-radius: var(--sizes-radius-md);
@@ -18,8 +19,13 @@ const BannerContainer = styled.aside<{ $isLightBgTheme: boolean }>`
 
   border: ${({ $isLightBgTheme }) => ($isLightBgTheme ? css`1px solid var(--palette-utility-divider)` : 'none')};
 
-  background-color: ${({ $isLightBgTheme }) =>
-    $isLightBgTheme ? css`var(--palette-layout-containerSurface)` : css`var(--palette-utility-primaryBrand)`};
+  background-color: ${({ $isLightBgTheme, $isTertiaryTheme }) => {
+    if ($isTertiaryTheme) {
+      return css`var(--palette-utility-tertiaryBrand)`;
+    }
+
+    return $isLightBgTheme ? css`var(--palette-layout-containerSurface)` : css`var(--palette-utility-primaryBrand)`;
+  }};
 
   @media (max-width: 640px) {
     padding: var(--sizes-spacing-3) var(--sizes-spacing-3) var(--sizes-spacing-3) var(--sizes-spacing-4);
@@ -34,10 +40,11 @@ export const CtaBanner = () => {
   const { themeName } = useTheme();
   const isOnDarkTheme = ON_DARK_THEMES.includes(themeName);
   const isLightBgTheme = LIGHT_BG_THEMES.includes(themeName);
+  const isTertiaryTheme = TERTIARY_THEMES.includes(themeName);
   usePreloadImage(logoImageUrl);
 
   return (
-    <BannerContainer $isLightBgTheme={isLightBgTheme}>
+    <BannerContainer $isLightBgTheme={isLightBgTheme} $isTertiaryTheme={isTertiaryTheme}>
       <Flex gap="4" align="center" justify="space-between" width="100%">
         <CtaBannerContent isMobile={isMobile} isTablet={isTablet} isOnDarkTheme={isOnDarkTheme} />
         <HeaderActions isOnDarkTheme={isOnDarkTheme} />

package/src/components/modal/FundingSteps.tsx

@@ -1,17 +1,24 @@
 import { Flex, Text } from '@wayflyer/flyui';
 import { useIntl } from 'react-intl';
 
+import { useDetectSmallScreen } from '../../hooks';
 import { MODAL_ITEMS } from '../../constants';
 
 export const FundingSteps = () => {
   const { formatMessage } = useIntl();
+  const isSmallScreen = useDetectSmallScreen();
 
   return (
     <Flex direction="column" gap="2">
-      {MODAL_ITEMS.map(({ id, title, subtitle }) => (
-        <Flex key={id} direction="column">
-          <Text fontWeight="medium">{formatMessage(title)}</Text>
-          <Text color="placeholder">{formatMessage(subtitle)}</Text>
+      {MODAL_ITEMS.map(({ id, title, subtitle, Icon }) => (
+        <Flex key={id} direction="row" align="center" gap="2">
+          {!isSmallScreen && <Icon />}
+          <Flex direction="column">
+            <Text color="default" fontWeight="medium">
+              {formatMessage(title)}
+            </Text>
+            <Text color="placeholder">{formatMessage(subtitle)}</Text>
+          </Flex>
         </Flex>
       ))}
     </Flex>

package/src/config/whitelistedPartnerIds.ts

@@ -19,4 +19,7 @@ export const WHITELISTED_PARTNER_IDS = {
 
   'c7fcea8c-ae5b-433a-bf79-ae3214627cf2': 'rocketFuel',
   '8124d71d-1de6-4a39-8cff-dd2ce96c8363': 'rocketFuel',
+
+  '0e553c21-13a7-461f-bf4d-5a92fad4a403': 'reveni',
+  'bb9f8122-66ff-41bd-a8c0-52a9af0b3b4f': 'reveni',
 } as const satisfies Record<string, PartnerTheme>;

package/src/constants/modalItems.ts

@@ -1,17 +1,26 @@
+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,
   },
 ];

package/src/locales/en.json

@@ -7,10 +7,10 @@
   "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": "Built for businesses like yours",
-  "ctaModal.step1.subtitle": "$5B+ deployed to 5,000+ companies since 2019",
+  "ctaModal.step1.subtitle": "$5B deployed to 5,000+ companies",
   "ctaModal.step1.time": "2 mins",
   "ctaModal.step2.title": "Your growth, your way",
-  "ctaModal.step2.subtitle": "Flexible products with terms that fit your business",
+  "ctaModal.step2.subtitle": "Flexible terms that fit your business",
   "ctaModal.step2.time": "10 mins",
   "ctaModal.step3.title": "Quick to get started",
   "ctaModal.step3.subtitle": "Apply in minutes and get capital in hours"