@wf-financing/ui 3.0.0 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -22,7 +22,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@vitest/browser": "^3.2.4",
     "chromatic": "^13.1.2",
-    "eslint-plugin-storybook": "^9.0.15",
+    "eslint-plugin-storybook": "^9.1.10",
     "playwright": "^1.53.2",
     "storybook": "^9.0.15",
     "typescript": "^5.0.0",
@@ -32,16 +32,12 @@
   },
   "dependencies": {
     "@tanstack/react-query": "5.81.5",
-    "@wayflyer/flyui-icons": "1.6.0",
     "framer-motion": "^12.23.0",
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
     "@wf-financing/embedded-types": "0.4.1"
   },
-  "peerDependencies": {
-    "@wayflyer/flyui": "204.4.1"
-  },
   "publishConfig": {
     "access": "public"
   },

package/src/components/banner/BannerActionsDesktop.tsx

@@ -3,11 +3,11 @@ import { Flex } from '@wayflyer/flyui';
 import { CloseButton } from './CloseButton';
 import { ProceedFundingButton } from './ProceedFundingButton';
 
-export const BannerActionsDesktop = () => {
+export const BannerActionsDesktop = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   return (
     <Flex gap="4">
-      <ProceedFundingButton />
-      <CloseButton />
+      <ProceedFundingButton isOnDarkTheme={isOnDarkTheme} />
+      <CloseButton isOnDarkTheme={isOnDarkTheme} />
     </Flex>
   );
 };

package/src/components/banner/BulletList.tsx

@@ -1,12 +1,20 @@
-import { Flex, Text } from '@wayflyer/flyui';
+import { Flex, Text, Icon } from '@wayflyer/flyui';
 import { IconCheck12Line } from '@wayflyer/flyui-icons/12/line';
 
-export const BulletList = ({ items }: { items: string[] }) => (
+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">
-        <IconCheck12Line />
-        <Text size="sm" fontWeight="medium" fontStyle="regular" lineHeight="tight">
+        <Icon color={isOnDarkTheme ? 'onDark' : 'default'}>
+          <IconCheck12Line />
+        </Icon>
+        <Text
+          size="sm"
+          fontWeight="medium"
+          fontStyle="regular"
+          lineHeight="tight"
+          color={isOnDarkTheme ? 'onDark' : 'default'}
+        >
           {bullet_point}
         </Text>
       </Flex>

package/src/components/banner/CloseButton.tsx

@@ -3,7 +3,7 @@ import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
 import { usePartnerContext, useDismissCta } from '../../hooks';
 
-export const CloseButton = () => {
+export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   const { onWidgetClose: closeWidget } = usePartnerContext();
   const dismissCta = useDismissCta();
 
@@ -17,7 +17,7 @@ export const CloseButton = () => {
   };
 
   return (
-    <Button onClick={handleCloseWidget} variant="Tertiary">
+    <Button onClick={handleCloseWidget} variant={isOnDarkTheme ? 'TertiaryOnDark' : 'Tertiary'}>
       <Flex padding="2">
         <IconX16Line />
       </Flex>

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

@@ -1,13 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PartnerTheme } from '../../config';
-import { App } from '../../App';
 import { CtaBanner } from './CtaBanner';
+import { PartnerContext } from '../../utils';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);
 
 const defaultArgs = {
-  theme: 'whiteLabel' as PartnerTheme,
   companyToken: 'demo-token',
   partnerCallback: () => {},
   onWidgetClose: () => {},
@@ -20,9 +18,9 @@ const defaultArgs = {
 type CtaBannerStoryArgs = typeof defaultArgs;
 
 const Template = (args: CtaBannerStoryArgs) => (
-  <App {...args}>
+  <PartnerContext.Provider value={{ ...args }}>
     <CtaBanner />
-  </App>
+  </PartnerContext.Provider>
 );
 
 const meta: Meta<typeof CtaBanner> = {

package/src/components/banner/CtaBanner.tsx

@@ -1,36 +1,42 @@
-import { Flex, Theme, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
+import { Flex, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
 import { styled } from 'styled-components';
 
 import { CtaBannerContent } from './CtaBannerContent';
 import { FooterActions } from './FooterActions';
 import { HeaderActions } from './HeaderActions';
+import { usePreloadImage } from '../../hooks';
+import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
 
-type BannerContainerPropTypes = {
-  theme: Theme;
-  $isMobile: boolean;
-};
+const ON_DARK_THEMES = ['athena'];
 
-const BannerContainer = styled.aside<BannerContainerPropTypes>`
-  padding: ${({ theme, $isMobile }) => theme.spacing($isMobile ? ['3', '3', '3', '4'] : ['4', '4', '4', '6'])};
-  box-shadow: ${({ theme }) => theme.effects.shadow};
-  border-radius: ${({ theme }) => theme.borderRadius(['md'])};
+const BannerContainer = styled.aside`
+  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);
   display: flex;
-  flex-direction: ${({ $isMobile }) => ($isMobile ? 'column' : 'row')};
-  gap: ${({ $isMobile, theme }) => ($isMobile ? theme.spacing(['4']) : '0')};
-  background-color: ${({ theme }) => theme.palette.utility.primaryBrand};
+  background-color: 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);
+    flex-direction: column;
+    gap: var(--sizes-spacing-4);
+  }
 `;
 
 export const CtaBanner = () => {
   const { isMobile, isTablet } = useDetectDeviceSize();
-  const theme = useTheme();
+  const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
+  const { themeName } = useTheme();
+  const isOnDarkTheme = ON_DARK_THEMES.includes(themeName);
+  usePreloadImage(logoImageUrl);
 
   return (
-    <BannerContainer $isMobile={isMobile} theme={theme}>
+    <BannerContainer>
       <Flex gap="4" align="center" justify="space-between" width="100%">
-        <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
-        <HeaderActions />
+        <CtaBannerContent isMobile={isMobile} isTablet={isTablet} isOnDarkTheme={isOnDarkTheme} />
+        <HeaderActions isOnDarkTheme={isOnDarkTheme} />
       </Flex>
-      <FooterActions />
+      <FooterActions isOnDarkTheme={isOnDarkTheme} />
     </BannerContainer>
   );
 };

package/src/components/banner/CtaBannerContent.tsx

@@ -1,4 +1,4 @@
-import { Flex, Text } from '@wayflyer/flyui';
+import { Flex, Text, Heading } from '@wayflyer/flyui';
 import type { CtaResponseType } from '@wf-financing/embedded-types';
 
 import { useCtaBanner } from '../../hooks';
@@ -7,21 +7,28 @@ import { BulletList } from './BulletList';
 type CtaBannerContentProps = {
   isMobile: boolean;
   isTablet: boolean;
+  isOnDarkTheme: boolean;
 };
 
-export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContentProps) => {
+export const CtaBannerContent = ({ isMobile, isTablet, isOnDarkTheme }: CtaBannerContentProps) => {
   const sdk = useCtaBanner();
   const ctaData = sdk.data as CtaResponseType;
+  const TextComponent = isMobile ? Text : Heading;
 
   return (
     <>
       {!sdk.isLoading && (
         <Flex direction="column" gap="1">
-          <Text size={isMobile ? 'base' : 'lg'} fontStyle="regular" fontWeight="medium" lineHeight="normal">
+          <TextComponent
+            size={isMobile ? 'base' : 'lg'}
+            fontWeight="medium"
+            lineHeight="normal"
+            color={isOnDarkTheme ? 'onDark' : 'default'}
+          >
             {ctaData?.data?.config?.text}
-          </Text>
+          </TextComponent>
           {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
-            <BulletList items={ctaData?.data?.config?.bullet_points} />
+            <BulletList items={ctaData?.data?.config?.bullet_points} isOnDarkTheme={isOnDarkTheme} />
           )}
         </Flex>
       )}

package/src/components/banner/FooterActions.tsx

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

package/src/components/banner/HeaderActions.tsx

@@ -2,8 +2,12 @@ import { useDetectDeviceSize } from '@wayflyer/flyui';
 import { BannerActionsDesktop } from './BannerActionsDesktop';
 import { CloseButton } from './CloseButton';
 
-export const HeaderActions = () => {
+export const HeaderActions = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   const { isMobile } = useDetectDeviceSize();
 
-  return isMobile ? <CloseButton /> : <BannerActionsDesktop />;
+  return isMobile ? (
+    <CloseButton isOnDarkTheme={isOnDarkTheme} />
+  ) : (
+    <BannerActionsDesktop isOnDarkTheme={isOnDarkTheme} />
+  );
 };

package/src/components/banner/ProceedFundingButton.tsx

@@ -8,16 +8,17 @@ import {
 } from '@wf-financing/embedded-types';
 import { useState } from 'react';
 
-import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
+import { useCtaBanner, useContinueHostedApplication, useInvalidateCta } from '../../hooks';
 import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
 
-export const ProceedFundingButton = () => {
+export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
   const continueHostedApplicationMutation = useContinueHostedApplication();
+  const invalidateCta = useInvalidateCta();
 
   if (!sdk) return null;
 
@@ -33,6 +34,7 @@ export const ProceedFundingButton = () => {
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
+            invalidateCta();
           },
           onError: (error) => {
             console.error('Failed to continue application', error);
@@ -47,7 +49,7 @@ export const ProceedFundingButton = () => {
 
   return (
     <>
-      <Button variant="Primary" fullWidth onClick={handleContinueHostedApplication}>
+      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={handleContinueHostedApplication}>
         {config?.button_label}
       </Button>
       <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

package/src/components/modal/ConsentModal.tsx

@@ -6,6 +6,7 @@ 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';
 
 type ConsentModalProps = {
   isModalOpen: boolean;
@@ -26,7 +27,7 @@ export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps)
 
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      {!isSmallScreen && <ImageContainer src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />}
+      {!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">

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 { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
+import { useDetectSmallScreen, useStartHostedApplication, useInvalidateCta } from '../../hooks';
 
 type ModalFooterType = {
   setOpen: (isOpen: boolean) => void;
@@ -13,6 +13,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const { isMobile } = useDetectDeviceSize();
   const startHostedAppMutation = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
+  const invalidateCta = useInvalidateCta();
 
   const handleStartApplication = () => {
     startHostedAppMutation.mutate(undefined, {
@@ -20,6 +21,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
         const { next } = nextUrl;
         setOpen(false);
         window.open(next);
+        invalidateCta();
       },
       onError: (error) => {
         console.error('Failed to start application', error);

package/src/config/fontParameters.ts

@@ -1,3 +1,5 @@
+import { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL, MONTSERRAT_URL } from './staticUrls';
+
 export type FontParamsType = {
   fontFamily: string;
   fontUrl: string;
@@ -6,17 +8,24 @@ export type FontParamsType = {
 
 const dmSansParams = {
   fontFamily: 'DM Sans',
-  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
+  fontUrl: `${STATIC_BASE_URL}${DM_SANS_URL}`,
   fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
 };
 
 const merrionSansParams = {
   fontFamily: 'Merrion Sans',
-  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
+  fontUrl: `${STATIC_BASE_URL}${MERRION_SANS_URL}`,
   fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
 };
 
+const montserratParams = {
+  fontFamily: 'Montserrat',
+  fontUrl: `${STATIC_BASE_URL}${MONTSERRAT_URL}`,
+  fallbackFontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/montserrat/Montserrat-VariableFont_wght.ttf',
+};
+
 export const FONT_PARAMS: Record<string, FontParamsType> = {
   dmSansParams,
   merrionSansParams,
+  montserratParams,
 };

package/src/config/index.ts

@@ -5,3 +5,4 @@ export { WAYFLYER_HEADLESS_SDK_ID } from './scriptId';
 export { HEADLESS_SDK_URL } from './url';
 export { WHITELISTED_PARTNER_IDS } from './whitelistedPartnerIds';
 export type { PartnerId, PartnerTheme } from './whitelistedPartnerIds';
+export { STATIC_BASE_URL, DM_SANS_URL, MERRION_SANS_URL, MODAL_LOGO_IMAGE_URL } from './staticUrls';

package/src/config/staticUrls.ts

@@ -0,0 +1,5 @@
+export const STATIC_BASE_URL = 'https://static.wayflyer.com/flyui-assets';
+export const DM_SANS_URL = '/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf';
+export const MERRION_SANS_URL = 'fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf';
+export const MONTSERRAT_URL = 'fonts/montserrat/Montserrat-VariableFont_wght.ttf';
+export const MODAL_LOGO_IMAGE_URL = '/logos/wayflyer-ef.png';

package/src/config/whitelistedPartnerIds.ts

@@ -10,5 +10,6 @@ export type PartnerId = (typeof WHITELISTED_PARTNER_IDS)[PartnerTheme];
 export const WHITELISTED_PARTNER_IDS = {
   whiteLabel: '2416e2af-c9f7-40ac-a2f0-f37dcfe59674',
   wayflyer: '1f309265-5324-4f8b-88d7-9b0d5c77a27c',
+  athena: '970df87a-e7d5-4942-9450-a77cf771dca3',
   defaultTheme: 'defaultTheme',
 } as const satisfies Record<PartnerTheme, string>;

package/src/hooks/index.ts

@@ -5,3 +5,5 @@ export { useDetectSmallScreen } from './useDetectSmallScreen';
 export { useContinueHostedApplication } from './useContinueHostedApplication';
 export { useDismissCta } from './useDismissCta';
 export { useRemoveInerted } from './useRemoveInerted';
+export { usePreloadImage } from './usePreloadImage';
+export { useInvalidateCta } from './useInvalidateCta';

package/src/hooks/useCtaBanner.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 
 import { fetchCtaBanner } from '../api';
 import { usePartnerContext } from './usePartnerContext';
@@ -7,8 +7,11 @@ export const useCtaBanner = () => {
   const { companyToken, options } = usePartnerContext();
 
   return useQuery({
-    queryKey: ['cta', companyToken, options],
+    queryKey: ['cta', companyToken],
     queryFn: () => fetchCtaBanner(companyToken, options),
     staleTime: Infinity,
+    refetchOnWindowFocus: false,
+    placeholderData: keepPreviousData,
+    enabled: !!companyToken,
   });
 };

package/src/hooks/useInvalidateCta.ts

@@ -0,0 +1,13 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { usePartnerContext } from './index';
+
+export const useInvalidateCta = () => {
+  const queryClient = useQueryClient();
+  const { companyToken } = usePartnerContext();
+
+  return () =>
+    queryClient.invalidateQueries({
+      queryKey: ['cta', companyToken],
+    });
+};

package/src/hooks/usePreloadImage.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+export function usePreloadImage(src: string) {
+  useEffect(() => {
+    if (!src) return;
+
+    const img = new Image();
+    img.decoding = 'async';
+    img.fetchPriority = 'high';
+    img.src = src;
+
+    img.decode();
+  }, [src]);
+}

package/src/utils/applyFont.ts

@@ -4,12 +4,15 @@ import { loadFont } from './loadFont';
 type ApplyFontsType = (shadow: ShadowRoot, partnerTheme: PartnerTheme) => Promise<void>;
 
 export const applyFont: ApplyFontsType = async (shadow, partnerTheme) => {
-  const { dmSansParams, merrionSansParams } = FONT_PARAMS;
+  const { dmSansParams, merrionSansParams, montserratParams } = FONT_PARAMS;
 
   switch (partnerTheme) {
     case 'whiteLabel':
       await loadFont(shadow, dmSansParams);
       break;
+    case 'athena':
+      await loadFont(shadow, montserratParams);
+      break;
     case 'wayflyer':
     case 'defaultTheme':
       await loadFont(shadow, merrionSansParams);

package/vite.config.ts

@@ -5,6 +5,9 @@ import { defineConfig } from 'vite';
 
 export default defineConfig(({ mode }) => ({
   plugins: [react()],
+  optimizeDeps: {
+    exclude: ['@wayflyer/*'],
+  },
   define: {
     'process.env': {},
     'process.env.NODE_ENV': JSON.stringify(mode),