@wf-financing/ui 3.8.1 → 3.9.1

package/package.json

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

package/src/CtaWidget.tsx

@@ -1,14 +1,14 @@
 import { AnimatePresence } from 'framer-motion';
-
 import { useState } from 'react';
+
 import { AnimationWrapper } from './components/banner/AnimationWrapper';
 import { CtaBanner } from './components/banner/CtaBanner';
 import { useCtaBanner, usePartnerContext } from './hooks';
 
 export const CtaWidget = () => {
-  const { isLoading, data, isSuccess } = useCtaBanner();
-  const [skipAnimation] = useState(() => isSuccess);
-  const { onWidgetClose, isWidgetDismissed } = usePartnerContext();
+  const { isLoading, data } = useCtaBanner();
+  const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
+  const [skipAnimation] = useState(() => !!options?.skipAnimations);
 
   const showBanner = !isLoading && data && !isWidgetDismissed;
 

package/src/components/banner/ProceedFundingButton.tsx

@@ -8,7 +8,7 @@ import {
 } from '@wf-financing/embedded-types';
 import { useState } from 'react';
 
-import { useCtaBanner, useContinueHostedApplication, useInvalidateCta } from '../../hooks';
+import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
 import { ConsentModal } from '../modal/ConsentModal';
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
@@ -18,7 +18,6 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
   const { mutate, isPending: isLoading } = useContinueHostedApplication();
-  const invalidateCta = useInvalidateCta();
 
   if (!sdk) return null;
 
@@ -34,7 +33,6 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
-            invalidateCta();
           },
           onError: (error) => {
             console.error('Failed to continue application', error);

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, useInvalidateCta } from '../../hooks';
+import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
 
 type ModalFooterType = {
   setOpen: (isOpen: boolean) => void;
@@ -13,7 +13,6 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const { isMobile } = useDetectDeviceSize();
   const { mutate, isPending: isLoading } = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
-  const invalidateCta = useInvalidateCta();
 
   const handleStartApplication = () => {
     mutate(undefined, {
@@ -21,7 +20,6 @@ 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/hooks/index.ts

@@ -6,4 +6,3 @@ 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

@@ -9,9 +9,8 @@ export const useCtaBanner = () => {
   return useQuery({
     queryKey: ['cta', companyToken],
     queryFn: () => fetchCtaBanner(companyToken, options),
-    staleTime: Infinity,
-    refetchOnWindowFocus: false,
-    placeholderData: keepPreviousData,
     enabled: !!companyToken,
+    placeholderData: keepPreviousData,
+    refetchOnMount: false,
   });
 };

package/src/hooks/useDismissCta.ts

@@ -2,16 +2,13 @@ import { useMutation } from '@tanstack/react-query';
 
 import { dismissCta } from '../api';
 import { usePartnerContext } from './usePartnerContext';
-import { useInvalidateCta } from './useInvalidateCta';
 
 export const useDismissCta = () => {
   const { companyToken, options } = usePartnerContext();
-  const invalidateCta = useInvalidateCta();
 
   return useMutation({
     mutationFn: async () => {
       await dismissCta(companyToken, options);
-      await invalidateCta();
     },
   });
 };

package/src/main.tsx

@@ -7,6 +7,9 @@ import { App } from './App';
 import { PartnerTheme } from './config';
 import { applyFont, createRoots } from './utils';
 
+let root: ReactDOM.Root | undefined;
+let savedTargetId: string | undefined;
+
 export const mountToTarget = async (
   targetId: string,
   partnerTheme: PartnerTheme,
@@ -14,8 +17,14 @@ export const mountToTarget = async (
   companyToken: string,
   options?: SdkOptionsType,
 ): Promise<void> => {
-  const hostEl = document.getElementById(targetId);
-  if (!hostEl) throw new Error(`Target element with id "${targetId}" not found.`);
+  const isNewTargetId = targetId !== savedTargetId;
+
+  if (isNewTargetId) {
+    savedTargetId = targetId;
+  }
+
+  const hostEl = document.getElementById(savedTargetId as string);
+  if (!hostEl) throw new Error(`Target element with id "${savedTargetId}" not found.`);
 
   const shadow = hostEl.shadowRoot ?? hostEl.attachShadow({ mode: 'open' });
 
@@ -26,11 +35,15 @@ export const mountToTarget = async (
   }
 
   const { styledComponentsStyleRoot, portalRoot, bannerRoot } = createRoots(shadow);
-  const root = ReactDOM.createRoot(bannerRoot);
+
+  if (isNewTargetId || !root) {
+    root = ReactDOM.createRoot(bannerRoot);
+  }
 
   const handleCloseWidget = () => {
     if (!root) throw new Error('Root is not found');
     root.unmount();
+    root = undefined;
   };
 
   MotionGlobalConfig.skipAnimations = options?.skipAnimations;

package/src/hooks/useInvalidateCta.ts

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