@wf-financing/ui 3.0.0 → 3.1.0

package/package.json

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

package/src/components/banner/CtaBanner.tsx

@@ -4,6 +4,8 @@ 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;
@@ -23,6 +25,8 @@ const BannerContainer = styled.aside<BannerContainerPropTypes>`
 export const CtaBanner = () => {
   const { isMobile, isTablet } = useDetectDeviceSize();
   const theme = useTheme();
+  const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
+  usePreloadImage(logoImageUrl);
 
   return (
     <BannerContainer $isMobile={isMobile} theme={theme}>

package/src/components/banner/ProceedFundingButton.tsx

@@ -8,7 +8,7 @@ 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;
@@ -18,6 +18,7 @@ export const ProceedFundingButton = () => {
   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);

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 } from './staticUrls';
+
 export type FontParamsType = {
   fontFamily: string;
   fontUrl: string;
@@ -6,13 +8,13 @@ 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',
 };
 

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,4 @@
+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 MODAL_LOGO_IMAGE_URL = '/logos/wayflyer-ef.png';

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]);
+}