@wf-financing/ui 3.13.4 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.13.4",
+  "version": "4.0.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -37,9 +37,9 @@
     "react-intl": "^6.2.5",
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.7.1",
-    "@wf-financing/ui-assets": "0.3.4",
-    "@wf-financing/logger": "1.1.3"
+    "@wf-financing/embedded-types": "1.0.0",
+    "@wf-financing/ui-assets": "1.0.0",
+    "@wf-financing/logger": "2.0.0"
   },
   "publishConfig": {
     "access": "public"

package/sdk/index.ts

@@ -1,4 +1,4 @@
-import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, UiSdkOptions } from '@wf-financing/embedded-types';
 
 import { PartnerTheme } from '../src/config';
 import { mountToTarget } from '../src/main';
@@ -9,7 +9,7 @@ export class WayflyerUiSdk {
 
   constructor(
     readonly companyToken: string,
-    readonly options?: SdkOptionsType,
+    readonly options?: UiSdkOptions,
   ) {
     const partnerId = getPartnerIdFromToken(companyToken);
     this.partnerTheme = getPartnerThemeById(partnerId);

package/src/App.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FlyUIProvider } from '@wayflyer/flyui';
-import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, UiSdkOptions } from '@wf-financing/embedded-types';
 import { Logger } from '@wf-financing/logger';
 import { useState } from 'react';
 import { createIntl, createIntlCache, IntlShape } from 'react-intl';
@@ -13,7 +13,7 @@ import { PartnerContext } from './utils';
 type AppPropsType = {
   theme: PartnerTheme;
   companyToken: string;
-  options?: SdkOptionsType;
+  options?: UiSdkOptions;
   partnerCallback: PartnerCallbackType;
   onWidgetClose: () => void;
   portalContainer: HTMLElement;

package/src/CtaWidget.tsx

@@ -5,7 +5,7 @@ import { ContinueHostedApplicationResponseType } from '@wf-financing/embedded-ty
 import { AnimationWrapper } from './components/banner/AnimationWrapper';
 import { CtaBanner } from './components/banner/CtaBanner';
 import { ConsentModal } from './components/modal/ConsentModal.tsx';
-import { useCopy, useCtaBanner, usePartnerContext, useContinueHostedApplication } from './hooks';
+import { useCopy, useCtaBanner, usePartnerContext, useContinueHostedApplication, usePreloadImage } from './hooks';
 import { getBannerConfig } from './utils';
 
 export const CtaWidget = () => {
@@ -15,6 +15,7 @@ export const CtaWidget = () => {
   const [skipAnimation] = useState(() => !!options?.skipAnimations || !isLoading);
   const { mutate: continueHostedApplicationMutaion } = useContinueHostedApplication();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  usePreloadImage(copy);
 
   const showBanner = cta && copy && !isWidgetDismissed;
 

package/src/api/continueHostedApplication.ts

@@ -1,10 +1,10 @@
-import { ContinueHostedApplicationResponseType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { ContinueHostedApplicationResponseType, HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
 export const continueHostedApplication = async (
   companyToken: string,
-  options?: SdkOptionsType,
+  options?: HeadlessSdkOptions,
 ): Promise<ContinueHostedApplicationResponseType> => {
   const sdk = await getHeadlessSdkInstance(companyToken, options);
 

package/src/api/ctaBanner.ts

@@ -1,8 +1,8 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
+import { HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
-export const fetchCtaBanner = async (companyToken: string, options?: SdkOptionsType) => {
+export const fetchCtaBanner = async (companyToken: string, options?: HeadlessSdkOptions) => {
   const sdk = await getHeadlessSdkInstance(companyToken, options);
 
   return await sdk.getCta();

package/src/api/dismissCta.ts

@@ -1,8 +1,8 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
+import { HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
-export const dismissCta = async (companyToken: string, options?: SdkOptionsType) => {
+export const dismissCta = async (companyToken: string, options?: HeadlessSdkOptions) => {
   const sdk = await getHeadlessSdkInstance(companyToken, options);
 
   await sdk.dismissCta();

package/src/api/fetchCtaBanner.test.ts

@@ -1,4 +1,3 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
 import { afterEach, describe, expect, test, vi } from 'vitest';
 
 import { fetchCtaBanner } from './ctaBanner';
@@ -22,7 +21,7 @@ describe('fetchCtaBanner', () => {
     const mockCta = { banner: 'hello' };
     (getHeadlessSdkInstance as any).mockResolvedValueOnce(fakeSdk);
     fakeSdk.getCta.mockResolvedValueOnce(mockCta);
-    const options: SdkOptionsType = {
+    const options = {
       isSandbox: true,
     };
 

package/src/api/getHeadlessSdkInstance.test.ts

@@ -1,4 +1,3 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
 import { afterEach, describe, expect, Mock, test, vi } from 'vitest';
 
 vi.mock('./getHeadlessSdkInstance', () => ({
@@ -13,7 +12,7 @@ const fakeSdk = {
   startHostedApplication: vi.fn(),
 };
 
-const options: SdkOptionsType = {
+const options = {
   isSandbox: true,
 };
 

package/src/api/getHeadlessSdkInstance.ts

@@ -1,4 +1,4 @@
-import { IWayflyerHeadlessSdk, SdkOptionsType } from '@wf-financing/embedded-types';
+import { IWayflyerHeadlessSdk, HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 import { Logger } from '@wf-financing/logger';
 import { HEADLESS_SDK_URL, WAYFLYER_HEADLESS_SDK_ID } from '../config';
@@ -6,7 +6,7 @@ import { initializeHeadlessSdk, loadScriptAndInitializeSdk } from '../utils';
 
 let cachedSdkInstance: IWayflyerHeadlessSdk | null = null;
 
-export const getHeadlessSdkInstance = async (companyToken: string, options?: SdkOptionsType) => {
+export const getHeadlessSdkInstance = async (companyToken: string, options?: HeadlessSdkOptions) => {
   try {
     if (cachedSdkInstance) {
       cachedSdkInstance.setCompanyToken(companyToken);

package/src/api/startHostedApplication.test.ts

@@ -1,4 +1,3 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
 import { afterEach, describe, expect, test, vi } from 'vitest';
 
 vi.mock('./getHeadlessSdkInstance', () => ({
@@ -25,7 +24,7 @@ describe('startHostedApplication', () => {
 
     (getHeadlessSdkInstance as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(fakeSdk);
     fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
-    const options: SdkOptionsType = {
+    const options = {
       isSandbox: true,
     };
 

package/src/api/startHostedApplication.ts

@@ -1,11 +1,11 @@
-import { PartnerCallbackType, SdkOptionsType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, HeadlessSdkOptions } from '@wf-financing/embedded-types';
 
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
 export const startHostedApplication = async (
   companyToken: string,
   partnerCallback: PartnerCallbackType,
-  options?: SdkOptionsType,
+  options?: HeadlessSdkOptions,
 ) => {
   let partnerData = await partnerCallback();
   const sdk = await getHeadlessSdkInstance(companyToken, options);

package/src/components/banner/CtaBanner.tsx

@@ -3,8 +3,7 @@ import { getThemeFlags, type ThemeOverrides } from '@wayflyer/flyui-tokens';
 import { motion, MotionProps } from 'framer-motion';
 import { css, styled } from 'styled-components';
 
-import { MODAL_LOGO_IMAGE_URL, STATIC_BASE_URL } from '../../config';
-import { usePartnerContext, usePreloadImage } from '../../hooks';
+import { usePartnerContext } from '../../hooks';
 import { BannerActions } from './BannerActions';
 import { CtaMainText } from './CtaMainText';
 import { CloseButton } from './CloseButton';
@@ -64,8 +63,6 @@ type Props = {
 
 export const CtaBanner = ({ bannerConfig, skipAnimation }: Props) => {
   const { isMobile } = useDetectDeviceSize();
-  const logoImageUrl = `${STATIC_BASE_URL}${MODAL_LOGO_IMAGE_URL}`;
-  usePreloadImage(logoImageUrl);
   const { portalContainer } = usePartnerContext();
   const { cta: themeFlags } = getThemeFlags({ rootElement: portalContainer });
 

package/src/components/modal/BulletList.tsx

@@ -0,0 +1,24 @@
+import { Flex, Divider, Text } from '@wayflyer/flyui';
+import { IconCheck16Line } from '@wayflyer/flyui-icons/16/line';
+
+type BulletListProps = {
+  bulletPoints: string[];
+};
+
+export const BulletList = ({ bulletPoints }: BulletListProps) => {
+  return (
+    <Flex direction="column" gap="3">
+      {bulletPoints.map((point, index) => (
+        <>
+          {index !== 0 && <Divider />}
+          <Flex direction="row" align="center" gap="2">
+            <IconCheck16Line color="#7F8592" />
+            <Text fontWeight="regular" fontStyle="regular" lineHeight="tight" size="sm">
+              {point}
+            </Text>
+          </Flex>
+        </>
+      ))}
+    </Flex>
+  );
+};

package/src/components/modal/ConsentModal.snapshot.stories.tsx

@@ -35,26 +35,14 @@ export const ConsentModal: Story = {
     isModalOpen: true,
     setIsModalOpen: fn,
     title: 'Fuel your growth with capital from Wayflyer',
-    buttons: {
-      accept: 'Continue to Wayflyer',
-      close: 'Cancel',
-    },
-    imageUrl: 'https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png',
+    button: 'Continue to Wayflyer',
+    logoUrl: 'https://static.wayflyer.com/flyui-assets/favicons/white-logo-with-background.png',
     termsAndConditions:
       'By proceeding, you consent to us sharing your information with Wayflyer so they can assess your eligibility for financing, in accordance with the [Wayflyer Privacy Policy]({termsUrl}).',
-    descriptions: [
-      {
-        title: 'Built for businesses like yours',
-        description: '$5B+ deployed to 5,000+ companies',
-      },
-      {
-        title: 'Your growth, your way',
-        description: 'Flexible terms that fit your business',
-      },
-      {
-        title: 'Quick to get started',
-        description: 'Apply in minutes and get capital in hours',
-      },
+    bulletPoints: [
+      '$5B deployed with 4.9 stars on Trustpilot',
+      'Apply in minutes and get capital in hours',
+      'Flexible offers designed to fit your business',
     ],
   },
   render: (args) => (

package/src/components/modal/ConsentModal.tsx

@@ -11,17 +11,20 @@ type ConsentModalProps = {
 export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
   const { data: copy } = useCopy();
   const consentModal = copy?.consentModal;
+  const partnerTemplate = copy?.partnerTemplate;
 
   if (!consentModal) return null;
 
-  const { imageUrl, buttons, termsAndConditions, descriptions, title } = consentModal;
+  const { logoUrl, button, termsAndConditions, bulletPoints, title } = consentModal;
+  const partnerLogoUrl = partnerTemplate?.partnerLogoUrl;
 
   return (
     <ConsentModalContent
-      imageUrl={imageUrl}
+      logoUrl={logoUrl}
+      partnerLogoUrl={partnerLogoUrl}
       title={title}
-      descriptions={descriptions}
-      buttons={buttons}
+      bulletPoints={bulletPoints}
+      button={button}
       termsAndConditions={termsAndConditions}
       setIsModalOpen={setIsModalOpen}
       isModalOpen={isModalOpen}

package/src/components/modal/ConsentModalContent.tsx

@@ -1,63 +1,36 @@
 import type { Dispatch, SetStateAction } from 'react';
-import { Flex, Image, Text, useDetectDeviceSize } from '@wayflyer/flyui';
 
-import { useDetectSmallScreen } from '../../hooks';
-import { FundingSteps } from './FundingSteps.tsx';
 import { ModalFooter } from './ModalFooter.tsx';
+import { ModalHeader } from './ModalHeader.tsx';
+import { BulletList } from './BulletList';
 import { Modal } from './Modal.tsx';
-import { styled } from 'styled-components';
-
-type ModalDescriptions = {
-  title: string;
-  description: string;
-};
-
-type Buttons = {
-  accept: string;
-  close: string;
-};
 
 type ConsentModalContentProps = {
-  imageUrl: string;
+  logoUrl: string;
+  partnerLogoUrl?: string;
   title: string;
-  descriptions: ModalDescriptions[];
-  buttons: Buttons;
+  bulletPoints: string[];
+  button: string;
   termsAndConditions: string;
   setIsModalOpen: Dispatch<SetStateAction<boolean>>;
   isModalOpen: boolean;
 };
 
-const ImageContainer = styled(Image)`
-  width: 100%;
-  max-width: none;
-`;
-
 export const ConsentModalContent = ({
-  imageUrl,
   title,
-  descriptions,
+  bulletPoints,
   termsAndConditions,
-  buttons,
+  button,
+  logoUrl,
+  partnerLogoUrl,
   setIsModalOpen,
   isModalOpen,
 }: ConsentModalContentProps) => {
-  const isSmallScreen = useDetectSmallScreen();
-  const { isMobile } = useDetectDeviceSize();
-
-  const isReducedSpacing = isSmallScreen || isMobile;
-
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      {!isSmallScreen && <ImageContainer src={imageUrl} />}
-      <Flex direction="column" gap="8" padding={isReducedSpacing ? '4' : '6'}>
-        <Flex direction="column" gap="6">
-          <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
-            {title}
-          </Text>
-          <FundingSteps descriptions={descriptions} />
-        </Flex>
-        <ModalFooter setOpen={setIsModalOpen} buttons={buttons} termsAndConditions={termsAndConditions} />
-      </Flex>
+      <ModalHeader title={title} logoUrl={logoUrl} partnerLogoUrl={partnerLogoUrl} />
+      <BulletList bulletPoints={bulletPoints} />
+      <ModalFooter setIsModalOpen={setIsModalOpen} button={button} termsAndConditions={termsAndConditions} />
     </Modal>
   );
 };

package/src/components/modal/Modal.tsx

@@ -1,12 +1,12 @@
-import { Dialog } from '@wayflyer/flyui';
+import { Button, Dialog, Flex, useDetectDeviceSize } from '@wayflyer/flyui';
+import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 import { AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
 import { ReactNode, useId, useRef } from 'react';
 import { UNSAFE_PortalProvider as PortalProvider } from 'react-aria';
-import { usePartnerContext } from '../../hooks';
-import { DialogBody } from './modalEnhancements';
 
+import { usePartnerContext, useRemoveInerted } from '../../hooks';
+import { DialogBody } from './modalEnhancements';
 import { MotionModalOverlay, MotionModalPrimitive, fullSize, opaque, small, transparent } from './modalEnhancements';
-import { useRemoveInerted } from '../../hooks';
 
 type ModalProps = {
   isModalOpen: boolean;
@@ -18,6 +18,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
   const modalId = useId();
   const { portalContainer } = usePartnerContext();
   const scrollableElRef = useRef(null);
+  const { isMobile } = useDetectDeviceSize();
 
   useRemoveInerted(isModalOpen, portalContainer);
 
@@ -36,7 +37,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
               animate={fullSize}
               exit={small}
               transition={{ duration: 0.2 }}
-              style={{ width: '438px', border: 'none', maxWidth: '90vw', maxHeight: '100vh' }}
+              style={{ width: '420px', border: 'none', maxWidth: '90vw', maxHeight: '100vh' }}
             >
               <MotionModalOverlay
                 data-id="modal-mask"
@@ -47,7 +48,14 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
                 transition={{ duration: 0.2 }}
               />
               <Dialog role="dialog" aria-labelledby={modalId}>
-                <DialogBody ref={scrollableElRef} data-testid="modal-body">
+                <div style={{ position: 'absolute', right: '10px', top: '10px' }}>
+                  <Button variant="Tertiary" onClick={() => setIsModalOpen(false)}>
+                    <Flex padding="2">
+                      <IconX16Line />
+                    </Flex>
+                  </Button>
+                </div>
+                <DialogBody $isMobile={isMobile} ref={scrollableElRef} data-testid="modal-body">
                   {children}
                 </DialogBody>
               </Dialog>

package/src/components/modal/ModalFooter.tsx

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react';
 import { Button, Flex, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
@@ -7,15 +8,12 @@ import { TemplateWithUrl } from './TemplateWithUrl';
 import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
 
 type ModalFooterProps = {
-  buttons: {
-    accept: string;
-    close: string;
-  };
+  button: string;
   termsAndConditions: string;
-  setOpen: (isOpen: boolean) => void;
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export const ModalFooter = ({ setOpen, buttons, termsAndConditions }: ModalFooterProps) => {
+export const ModalFooter = ({ button, termsAndConditions, setIsModalOpen }: ModalFooterProps) => {
   const { isMobile } = useDetectDeviceSize();
   const { mutate, isPending: isLoading } = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
@@ -25,8 +23,8 @@ export const ModalFooter = ({ setOpen, buttons, termsAndConditions }: ModalFoote
     mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
-        setOpen(false);
         window.open(next);
+        setIsModalOpen(false);
       },
       onError: (error) => {
         Logger.logError(`Failed to start application ${error.message}`);
@@ -38,12 +36,9 @@ export const ModalFooter = ({ setOpen, buttons, termsAndConditions }: ModalFoote
     <Flex direction="column" gap="3">
       <Flex gap="2" direction={isSmallScreen || isMobile ? 'column' : 'row'}>
         <Button fullWidth onClick={handleStartApplication} loading={isLoading} variant="Primary" external>
-          {buttons.accept}
+          {button}
           {!isLoading && <IconArrowOnSquareUpRight16Line />}
         </Button>
-        <Button fullWidth variant="Secondary" onClick={() => setOpen(false)}>
-          {buttons.close}
-        </Button>
       </Flex>
       <TemplateWithUrl templateString={termsAndConditions} />
     </Flex>

package/src/components/modal/ModalHeader.tsx

@@ -0,0 +1,21 @@
+import { Flex, Heading, Image } from '@wayflyer/flyui';
+
+type ModalHeaderProps = {
+  title: string;
+  logoUrl: string;
+  partnerLogoUrl?: string;
+};
+
+export const ModalHeader = ({ title, logoUrl, partnerLogoUrl }: ModalHeaderProps) => {
+  return (
+    <Flex direction="column" gap="6">
+      <Flex direction="row" align="center" justify="center" gap="2">
+        <Image src={logoUrl} height={64} width={64} />
+        {partnerLogoUrl && <Image src={partnerLogoUrl} height={64} width={64} />}
+      </Flex>
+      <Heading align="center" fontWeight="medium" lineHeight="tight" size="2xl">
+        {title}
+      </Heading>
+    </Flex>
+  );
+};

package/src/components/modal/TemplateWithUrl.tsx

@@ -21,7 +21,7 @@ export const TemplateWithUrl = ({ templateString }: TemplateWithUrlProps) => {
     <ReactMarkdown
       components={{
         a: ({ children }) => <Link onClick={handleOpenExternalLink} children={children} />,
-        p: ({ children }) => <Text size="sm" lineHeight="normal" children={children} />,
+        p: ({ children }) => <Text color="placeholder" size="xs" lineHeight="normal" children={children} />,
       }}
     >
       {text}

package/src/components/modal/modalEnhancements.ts

@@ -1,6 +1,6 @@
 import { ModalOverlay as OriginalModalOverlay, ModalPrimitive as OriginalModalPrimitive } from '@wayflyer/flyui';
 import { m } from 'framer-motion';
-import styled from 'styled-components';
+import { styled, css } from 'styled-components';
 
 export const MotionModalOverlay = m(OriginalModalOverlay);
 export const MotionModalPrimitive = m(OriginalModalPrimitive);
@@ -14,15 +14,30 @@ export const opaque = {
   opacity: 0.6,
 };
 
-export const DialogBody = styled.div`
+export const DialogBody = styled.div<{ $isMobile: boolean }>`
   scrollbar-width: thin;
   scrollbar-color: var(--palette-border-neutral-subtle);
   flex-shrink: 1;
   overflow-y: auto;
   background-color: var(--palette-bg-neutral-base);
-  border-radius: var(--sizes-radius-md);
+  border-radius: var(--sizes-radius-lg);
   max-height: 80vh;
-  padding-bottom: 10px;
+  padding: ${({ $isMobile }) => {
+    if ($isMobile) {
+      return css`var(--sizes-spacing-8) var(--sizes-spacing-4)`;
+    }
+
+    return css`var(--sizes-spacing-8)`;
+  }};
+  gap: ${({ $isMobile }) => {
+    if ($isMobile) {
+      return css`var(--sizes-spacing-8)`;
+    }
+
+    return css`var(--sizes-spacing-10)`;
+  }};
+  display: flex;
+  flex-direction: column;
 
   &::-webkit-scrollbar {
     width: 12px;
@@ -34,6 +49,6 @@ export const DialogBody = styled.div`
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--palette-border-neutral-subtle);
-    border-radius: var(--sizes-radius-sm);
+    border-radius: var(--sizes-radius-lg);
   }
 `;

package/src/config/index.ts

@@ -1,9 +1,6 @@
-export { FONT_PARAMS } from './fontParameters';
-export type { FontParamsType } from './fontParameters';
 export { ROOTS_CONFIG } from './rootsParameters';
 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';
 export { APPLICATION_VERSION } from './applicationVersion';

package/src/hooks/useContinueHostedApplication.ts

@@ -5,8 +5,9 @@ import { usePartnerContext } from './usePartnerContext';
 
 export const useContinueHostedApplication = () => {
   const { companyToken, options } = usePartnerContext();
+  const headlessOptions = { isSandbox: options?.isSandbox };
 
   return useMutation({
-    mutationFn: () => continueHostedApplication(companyToken, options),
+    mutationFn: () => continueHostedApplication(companyToken, headlessOptions),
   });
 };

package/src/hooks/useCopy.ts

@@ -1,4 +1,3 @@
-import { SdkOptionsType } from '@wf-financing/embedded-types';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { loadAndConfigureCopy } from '@wf-financing/ui-assets';
 
@@ -6,25 +5,20 @@ import { usePartnerContext } from './usePartnerContext.ts';
 import { APPLICATION_VERSION } from '../config';
 import { getPartnerIdFromToken } from '../utils';
 
-type Options = SdkOptionsType & {
-  language?: string;
-  cohort?: string;
-};
-
 export const useCopy = () => {
   const { options, companyToken } = usePartnerContext();
+  const language = options?.language;
 
   const partnerId = getPartnerIdFromToken(companyToken);
-  // TODO: remove after extension of SdkOptionType
-  const copyOptions = options as Options;
 
   return useQuery({
-    queryKey: ['partnerCopy'],
-    queryFn: () => loadAndConfigureCopy({ version: APPLICATION_VERSION, partnerId, options: copyOptions }),
+    queryKey: ['partnerCopy', language],
+    queryFn: () => loadAndConfigureCopy({ version: APPLICATION_VERSION, partnerId, options: options }),
     placeholderData: keepPreviousData,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
     staleTime: 10 * 60 * 1000,
     gcTime: 10 * 60 * 1000,
+    retry: 1,
   });
 };

package/src/hooks/useCtaBanner.ts

@@ -5,10 +5,11 @@ import { usePartnerContext } from './usePartnerContext';
 
 export const useCtaBanner = () => {
   const { companyToken, options } = usePartnerContext();
+  const headlessOptions = { isSandbox: options?.isSandbox };
 
   return useQuery({
     queryKey: ['cta', companyToken],
-    queryFn: () => fetchCtaBanner(companyToken, options),
+    queryFn: () => fetchCtaBanner(companyToken, headlessOptions),
     enabled: !!companyToken,
     placeholderData: keepPreviousData,
     refetchOnMount: false,

package/src/hooks/useDismissCta.ts

@@ -5,10 +5,11 @@ import { usePartnerContext } from './usePartnerContext';
 
 export const useDismissCta = () => {
   const { companyToken, options } = usePartnerContext();
+  const headlessOptions = { isSandbox: options?.isSandbox };
 
   return useMutation({
     mutationFn: async () => {
-      await dismissCta(companyToken, options);
+      await dismissCta(companyToken, headlessOptions);
     },
   });
 };