@wf-financing/ui 3.7.1 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -36,7 +36,7 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.4.2"
+    "@wf-financing/embedded-types": "0.5.0"
   },
   "publishConfig": {
     "access": "public"

package/src/App.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FlyUIProvider } from '@wayflyer/flyui';
 import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { useState } from 'react';
 import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
 import { PartnerTheme } from './config';
@@ -32,6 +32,7 @@ export const App = ({
   portalContainer,
 }: AppPropsType) => {
   const [isThemeLoaded, setIsThemeLoaded] = useState(false);
+  const [isWidgetDismissed, setIsWidgetDismissed] = useState(false);
 
   const locale = 'en';
 
@@ -43,9 +44,23 @@ export const App = ({
     createIntlCache(),
   );
 
+  const onWidgetDismiss = () => {
+    setIsWidgetDismissed(true);
+  };
+
   return (
     <QueryClientProvider client={queryClient}>
-      <PartnerContext.Provider value={{ companyToken, options, partnerCallback, onWidgetClose, portalContainer }}>
+      <PartnerContext.Provider
+        value={{
+          companyToken,
+          options,
+          partnerCallback,
+          onWidgetClose,
+          portalContainer,
+          isWidgetDismissed,
+          onWidgetDismiss,
+        }}
+      >
         <FlyUIProvider
           theme={theme}
           intl={intl}

package/src/CtaWidget.tsx

@@ -1,19 +1,30 @@
-import { useEffect } from 'react';
+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 banner = useCtaBanner();
-  const partnerContext = usePartnerContext();
+  const { isLoading, data } = useCtaBanner();
+  const { onWidgetClose, isWidgetDismissed, options } = usePartnerContext();
+  const [skipAnimation] = useState(() => !!options?.skipAnimations);
 
-  useEffect(() => {
-    if (!banner.isLoading && !banner.data) {
-      requestAnimationFrame(() => {
-        partnerContext.onWidgetClose();
-      });
+  const showBanner = !isLoading && data && !isWidgetDismissed;
+
+  const handleExitComplete = () => {
+    if ((!isLoading && !data) || isWidgetDismissed) {
+      onWidgetClose();
     }
-  }, [banner.data]);
+  };
 
-  return <>{!banner.isLoading && banner.data && <CtaBanner />}</>;
+  return (
+    <AnimatePresence mode="wait" onExitComplete={handleExitComplete}>
+      {showBanner && (
+        <AnimationWrapper skipAnimation={skipAnimation}>
+          <CtaBanner skipAnimation={skipAnimation} />
+        </AnimationWrapper>
+      )}
+    </AnimatePresence>
+  );
 };

package/src/components/banner/AnimationWrapper.tsx

@@ -0,0 +1,37 @@
+import { motion, MotionProps } from 'framer-motion';
+import { PropsWithChildren } from 'react';
+
+type Props = {
+  skipAnimation: boolean;
+};
+
+const animationProps: MotionProps = {
+  initial: { height: 0, overflow: 'hidden' },
+  animate: {
+    height: 'auto',
+    overflow: 'visible',
+    transition: {
+      duration: 0.4,
+      ease: [0.33, 1, 0.68, 1],
+    },
+  },
+  exit: {
+    height: 0,
+    overflow: 'hidden',
+    transition: {
+      duration: 0.4,
+      ease: [0.33, 1, 0.68, 1],
+      delay: 0.1,
+    },
+  },
+};
+
+export const AnimationWrapper = ({ children, skipAnimation }: PropsWithChildren<Props>) => {
+  const initial = skipAnimation ? animationProps.animate : animationProps.initial;
+
+  return (
+    <motion.div key="cta-banner-wrapper" {...animationProps} initial={initial}>
+      {children}
+    </motion.div>
+  );
+};

package/src/components/banner/CloseButton.tsx

@@ -1,14 +1,15 @@
 import { Button, Flex } from '@wayflyer/flyui';
 import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
-import { usePartnerContext, useDismissCta } from '../../hooks';
+import { useDismissCta, usePartnerContext } from '../../hooks';
 
 export const CloseButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
-  const { onWidgetClose: closeWidget } = usePartnerContext();
+  const { onWidgetDismiss } = usePartnerContext();
   const dismissCta = useDismissCta();
 
   const handleCloseWidget = () => {
-    closeWidget();
+    onWidgetDismiss();
+
     dismissCta.mutate(undefined, {
       onError: (error) => {
         console.error('Failed to dismiss CTA', error);

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

@@ -9,6 +9,9 @@ const defaultArgs = {
   companyToken: 'demo-token',
   partnerCallback: () => {},
   onWidgetClose: () => {},
+  onWidgetDismiss: () => {},
+  isWidgetDismissed: false,
+  skipAnimation: false,
   portalContainer,
 };
 
@@ -16,7 +19,7 @@ type CtaBannerStoryArgs = typeof defaultArgs;
 
 const Template = (args: CtaBannerStoryArgs) => (
   <PartnerContext.Provider value={{ ...args }}>
-    <CtaBanner />
+    <CtaBanner skipAnimation={false} />
   </PartnerContext.Provider>
 );
 

package/src/components/banner/CtaBanner.tsx

@@ -1,17 +1,18 @@
 import { Flex, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
-import { styled, css } from 'styled-components';
+import { motion, MotionProps } from 'framer-motion';
+import { css, styled } from 'styled-components';
 
+import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
+import { usePreloadImage } from '../../hooks';
 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';
 
 const ON_DARK_THEMES = ['athena'];
 const LIGHT_BG_THEMES = ['conjura', 'rocketFuel'];
 const TERTIARY_THEMES = ['reveni'];
 
-const BannerContainer = styled.aside<{ $isLightBgTheme: boolean; $isTertiaryTheme: boolean }>`
+const BannerContainer = styled(motion.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);
@@ -27,6 +28,8 @@ const BannerContainer = styled.aside<{ $isLightBgTheme: boolean; $isTertiaryThem
     return $isLightBgTheme ? css`var(--palette-layout-containerSurface)` : css`var(--palette-utility-primaryBrand)`;
   }};
 
+  transform-origin: top center;
+
   @media (max-width: 640px) {
     padding: var(--sizes-spacing-3) var(--sizes-spacing-3) var(--sizes-spacing-3) var(--sizes-spacing-4);
     flex-direction: column;
@@ -34,7 +37,32 @@ const BannerContainer = styled.aside<{ $isLightBgTheme: boolean; $isTertiaryThem
   }
 `;
 
-export const CtaBanner = () => {
+const bannerAnimationProps: MotionProps = {
+  initial: { opacity: 0, scale: 0.8 },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delay: 0.1,
+      duration: 0.4,
+      ease: [0.33, 1, 0.68, 1],
+    },
+  },
+  exit: {
+    opacity: 0,
+    scaleY: 0.8,
+    transition: {
+      duration: 0.2,
+      ease: [0.12, 0, 0.39, 0],
+    },
+  },
+};
+
+type Props = {
+  skipAnimation: boolean;
+};
+
+export const CtaBanner = ({ skipAnimation }: Props) => {
   const { isMobile, isTablet } = useDetectDeviceSize();
   const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
   const { themeName } = useTheme();
@@ -44,8 +72,13 @@ export const CtaBanner = () => {
   usePreloadImage(logoImageUrl);
 
   return (
-    <BannerContainer $isLightBgTheme={isLightBgTheme} $isTertiaryTheme={isTertiaryTheme}>
-      <Flex gap="4" align="center" justify="space-between" width="100%">
+    <BannerContainer
+      $isLightBgTheme={isLightBgTheme}
+      $isTertiaryTheme={isTertiaryTheme}
+      {...bannerAnimationProps}
+      initial={skipAnimation ? bannerAnimationProps.animate : bannerAnimationProps.initial}
+    >
+      <Flex gap="4" align={isMobile ? 'flex-start' : 'center'} justify="space-between" width="100%">
         <CtaBannerContent isMobile={isMobile} isTablet={isTablet} isOnDarkTheme={isOnDarkTheme} />
         <HeaderActions isOnDarkTheme={isOnDarkTheme} />
       </Flex>

package/src/components/banner/HeaderActions.tsx

@@ -1,12 +1,20 @@
 import { useDetectDeviceSize } from '@wayflyer/flyui';
+import styled from 'styled-components';
 import { BannerActionsDesktop } from './BannerActionsDesktop';
 import { CloseButton } from './CloseButton';
 
+const MobileButtonContainer = styled.div`
+  margin-top: calc(0px - var(--sizes-spacing-3));
+  margin-right: calc(0px - var(--sizes-spacing-2));
+`;
+
 export const HeaderActions = ({ isOnDarkTheme }: { isOnDarkTheme: boolean }) => {
   const { isMobile } = useDetectDeviceSize();
 
   return isMobile ? (
-    <CloseButton isOnDarkTheme={isOnDarkTheme} />
+    <MobileButtonContainer>
+      <CloseButton isOnDarkTheme={isOnDarkTheme} />
+    </MobileButtonContainer>
   ) : (
     <BannerActionsDesktop isOnDarkTheme={isOnDarkTheme} />
   );

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/ConsentModal.snapshot.stories.tsx

@@ -10,6 +10,8 @@ const appArgs = {
   companyToken: 'demo-token',
   partnerCallback: () => {},
   onWidgetClose: () => {},
+  onWidgetDismiss: () => {},
+  isWidgetDismissed: false,
   portalContainer,
 };
 

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,9 @@ export const useCtaBanner = () => {
   return useQuery({
     queryKey: ['cta', companyToken],
     queryFn: () => fetchCtaBanner(companyToken, options),
-    staleTime: Infinity,
-    refetchOnWindowFocus: false,
-    placeholderData: keepPreviousData,
     enabled: !!companyToken,
+    placeholderData: keepPreviousData,
+    refetchOnMount: false,
+    refetchOnWindowFocus: 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

@@ -2,10 +2,14 @@ import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-type
 import ReactDOM from 'react-dom/client';
 import { StyleSheetManager } from 'styled-components';
 
+import { MotionGlobalConfig } from 'framer-motion';
 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,
@@ -13,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' });
 
@@ -25,13 +35,19 @@ 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;
+
   root.render(
     <StyleSheetManager target={styledComponentsStyleRoot}>
       <App

package/src/utils/loadFont.ts

@@ -24,7 +24,7 @@ export const loadFont: LoadFontType = async (shadow, fontParams) => {
     fontStyles = document.createElement('style');
     fontStyles.id = fontStylesId;
     fontStyles.textContent = `
-      :host { font-family: "${fontFamily}", sans-serif; }
+      :host { font-family: "${fontFamily}", sans-serif; background-color: transparent !important; overflow: visible !important; }
       ::slotted(*) { font-family: inherit; }
     `;
 

package/src/utils/partnerContext.ts

@@ -6,6 +6,8 @@ export type PartnerContextType = {
   partnerCallback: PartnerCallbackType;
   options?: SdkOptionsType;
   onWidgetClose: () => void;
+  onWidgetDismiss: () => void;
+  isWidgetDismissed: boolean;
   portalContainer: HTMLElement;
 };
 

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