@wf-financing/ui 0.1.0 → 1.0.0

package/global.d.ts

@@ -0,0 +1,8 @@
+import { IWayflyerUiCtaSdkConstructor, IHeadlessWayflyerCtaSdkConstructor } from '@wf-financing/embedded-types';
+
+declare global {
+  interface Window {
+    WayflyerUiCtaSdk: IWayflyerUiCtaSdkConstructor;
+    WayflyerHeadlessSdk: IHeadlessWayflyerCtaSdkConstructor;
+  }
+}

package/index.ts

@@ -1,18 +1,7 @@
-import type { Themes } from '@wayflyer/flyui';
+import { WayflyerUiCtaSdk } from './sdk';
 
-import { mountToTarget } from './src/main';
-
-export const mount = (
-  targetId: string,
-  partnerDesignId: Themes,
-  companyToken: string,
-  isMockedMode?: boolean,
-) => {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () =>
-      mountToTarget(targetId, partnerDesignId, companyToken, isMockedMode),
-    );
-  } else {
-    mountToTarget(targetId, partnerDesignId, companyToken, isMockedMode);
-  }
+const addHeadlessSdkToWindow = () => {
+  window.WayflyerUiCtaSdk = WayflyerUiCtaSdk;
 };
+
+addHeadlessSdkToWindow();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -11,19 +11,34 @@
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
+    "@rollup/plugin-inject": "^5.0.5",
+    "@storybook/addon-a11y": "^9.0.15",
+    "@storybook/addon-vitest": "^9.0.15",
+    "@storybook/builder-vite": "^9.0.15",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
+    "@storybook/testing-library": "^0.2.2",
+    "@vitest/browser": "^3.2.4",
+    "chromatic": "^13.1.2",
+    "eslint-plugin-storybook": "^9.0.15",
+    "playwright": "^1.53.2",
+    "storybook": "^9.0.15",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.4.0"
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^3.4.0",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@wayflyer/flyui": "188.3.0",
-    "@wayflyer/flyui-icons": "1.3.2",
     "@tanstack/react-query": "5.81.5",
+    "@wayflyer/flyui": "196.0.0",
+    "@wayflyer/flyui-icons": "1.3.2",
     "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.1.3"
+    "@wf-financing/embedded-types": "0.2.4"
   },
   "publishConfig": {
     "access": "public"
@@ -33,6 +48,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "publish-sdk-cta-ui": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks"
+    "publish-sdk-cta-ui": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
   }
 }

package/sdk/index.ts

@@ -0,0 +1,36 @@
+import type { Themes } from '@wayflyer/flyui';
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
+
+import { mountToTarget } from '../src/main';
+
+export class WayflyerUiCtaSdk {
+  private targetId: string;
+  private partnerDesignId: Themes;
+  private partnerCallback: PartnerCallbackType;
+  private companyToken: string;
+  private mockedMode?: MockedModeType;
+
+  constructor(
+    targetId: string,
+    partnerDesignId: Themes,
+    partnerCallback: PartnerCallbackType,
+    companyToken: string,
+    mockedMode?: MockedModeType,
+  ) {
+    this.targetId = targetId;
+    this.partnerDesignId = partnerDesignId;
+    this.partnerCallback = partnerCallback;
+    this.companyToken = companyToken;
+    this.mockedMode = mockedMode;
+  }
+
+  mountCta() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () =>
+        mountToTarget(this.targetId, this.partnerDesignId, this.partnerCallback, this.companyToken, this.mockedMode),
+      );
+    } else {
+      mountToTarget(this.targetId, this.partnerDesignId, this.partnerCallback, this.companyToken, this.mockedMode);
+    }
+  }
+}

package/src/App.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FlyUIProvider, Themes } from '@wayflyer/flyui';
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
 import { CtaWidget } from './CtaWidget';
@@ -9,7 +10,8 @@ import { PartnerContext } from './utils/partnerContext';
 type AppPropsType = {
   partnerDesignId: Themes;
   companyToken: string;
-  isMockedMode?: boolean;
+  mockedMode?: MockedModeType;
+  partnerCallback: PartnerCallbackType;
 };
 
 const queryClient = new QueryClient();
@@ -17,7 +19,7 @@ const messages = {
   en: enMessages,
 };
 
-export const App = ({ partnerDesignId, companyToken, isMockedMode }: AppPropsType) => {
+export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback }: AppPropsType) => {
   const locale = 'en';
 
   const intl: IntlShape = createIntl(
@@ -25,12 +27,12 @@ export const App = ({ partnerDesignId, companyToken, isMockedMode }: AppPropsTyp
       locale,
       messages: messages[locale],
     },
-    createIntlCache()
+    createIntlCache(),
   );
 
   return (
     <QueryClientProvider client={queryClient}>
-      <PartnerContext.Provider value={{ companyToken, isMockedMode }}>
+      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback }}>
         <FlyUIProvider theme={partnerDesignId} intl={intl}>
           <CtaWidget />
         </FlyUIProvider>

package/src/CtaWidget.tsx

@@ -3,13 +3,6 @@ import { useCtaBanner } from './hooks/useCtaBanner';
 
 export const CtaWidget = () => {
   const banner = useCtaBanner();
-  const handleCloseWidget = () => console.log('close widget');
 
-  return (
-    <>
-      {!banner.isLoading && (
-          <CtaBanner closeWidget={handleCloseWidget} />
-      )}
-    </>
-  );
+  return <>{!banner.isLoading && <CtaBanner />}</>;
 };

package/src/api/ctaBanner.ts

@@ -1,8 +1,10 @@
+import { MockedModeType } from '@wf-financing/embedded-types';
+
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
-export const fetchCtaBanner = async (companyToken: string, isMockedMode: boolean) => {
-  const sdk = await getHeadlessSdkInstance(companyToken, isMockedMode);
+export const fetchCtaBanner = async (companyToken: string, mockedMode?: MockedModeType) => {
+  const sdk = await getHeadlessSdkInstance(companyToken, mockedMode);
   const cta = await sdk.getCta();
 
   return cta;
-}
+};

package/src/api/fetchCtaBanner.test.ts

@@ -0,0 +1,36 @@
+import { SdkScenarios, MockedModeType } from '@wf-financing/embedded-types';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+import { fetchCtaBanner } from './ctaBanner';
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+
+vi.mock('./getHeadlessSdkInstance', () => ({
+  getHeadlessSdkInstance: vi.fn(),
+}));
+
+const fakeSdk = {
+  getCta: vi.fn(),
+  startHostedApplication: vi.fn(),
+};
+
+describe('fetchCtaBanner', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('calls sdk.getCta and returns data', async () => {
+    const mockCta = { banner: 'hello' };
+    (getHeadlessSdkInstance as any).mockResolvedValueOnce(fakeSdk);
+    fakeSdk.getCta.mockResolvedValueOnce(mockCta);
+    const mockedMode: MockedModeType = {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.NEW_APPLICATION,
+    };
+
+    const result = await fetchCtaBanner('TOKEN', mockedMode);
+
+    expect(getHeadlessSdkInstance).toHaveBeenCalledWith('TOKEN', mockedMode);
+    expect(fakeSdk.getCta).toHaveBeenCalled();
+    expect(result).toBe(mockCta);
+  });
+});

package/src/api/getHeadlessSdkInstance.test.ts

@@ -0,0 +1,54 @@
+import { MockedModeType, SdkScenarios } from '@wf-financing/embedded-types';
+import { afterEach, describe, expect, Mock, test, vi } from 'vitest';
+
+vi.mock('./getHeadlessSdkInstance', () => ({
+  getHeadlessSdkInstance: vi.fn(),
+}));
+
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+import { startHostedApplication } from './startHostedApplication';
+
+const fakeSdk = {
+  getCta: vi.fn(),
+  startHostedApplication: vi.fn(),
+};
+
+const mockedMode: MockedModeType = {
+  isMockedMode: true,
+  sdkScenario: SdkScenarios.NEW_APPLICATION,
+};
+
+describe('startHostedApplication', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('calls sdk.startHostedApplication with partnerData and returns nextUrl', async () => {
+    const fakePartnerData = { foo: 1 };
+    const fakeNextUrl = '/next-url';
+    const partnerCallback = vi.fn().mockResolvedValue(fakePartnerData);
+
+    (getHeadlessSdkInstance as unknown as Mock).mockResolvedValueOnce(fakeSdk);
+    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+
+    const result = await startHostedApplication('TOKEN', partnerCallback, mockedMode);
+
+    expect(getHeadlessSdkInstance).toHaveBeenCalledWith('TOKEN', mockedMode);
+    expect(partnerCallback).toHaveBeenCalled();
+    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith(fakePartnerData);
+    expect(result).toBe(fakeNextUrl);
+  });
+
+  test('calls sdk.startHostedApplication with empty object if partnerCallback returns falsy', async () => {
+    const partnerCallback = vi.fn().mockResolvedValue(undefined);
+    const fakeNextUrl = '/next-url';
+
+    (getHeadlessSdkInstance as unknown as Mock).mockResolvedValueOnce(fakeSdk);
+    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+
+    const result = await startHostedApplication('TOKEN', partnerCallback, mockedMode);
+
+    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith({});
+    expect(result).toBe(fakeNextUrl);
+  });
+});

package/src/api/getHeadlessSdkInstance.ts

@@ -1,13 +1,38 @@
-import { IHeadlessWayflyerCtaSdk } from '@wf-financing/embedded-types';
+import { IHeadlessWayflyerCtaSdk, MockedModeType } from '@wf-financing/embedded-types';
+
+import { HEADLESS_SDK_URL, WAYFLYER_HEADLESS_SDK_ID } from '../config';
+import { initializeHeadlessSdk, loadScriptAndInitializeSdk } from '../utils';
 
 let cachedSdkInstance: IHeadlessWayflyerCtaSdk | null = null;
 
-export const getHeadlessSdkInstance = async (companyToken: string, isMockedMode: boolean) => {
-  if (cachedSdkInstance) return cachedSdkInstance;
+export const getHeadlessSdkInstance = async (companyToken: string, mockedMode?: MockedModeType) => {
+  try {
+    if (cachedSdkInstance) return cachedSdkInstance;
+
+    const existingScript = document.getElementById(WAYFLYER_HEADLESS_SDK_ID) as HTMLScriptElement;
+
+    if (window.WayflyerHeadlessSdk) {
+      return initializeHeadlessSdk(companyToken, mockedMode);
+    }
+
+    if (existingScript) {
+      return loadScriptAndInitializeSdk(existingScript, companyToken, mockedMode);
+    }
+
+    const script = document.createElement('script');
+    script.src = HEADLESS_SDK_URL;
+    script.type = 'module';
+    script.id = WAYFLYER_HEADLESS_SDK_ID;
+    script.async = true;
+
+    document.head.appendChild(script);
 
-  const module = await import('https://unpkg.com/@wf-financing/headless/dist/index.es.js');
-  const sdk: IHeadlessWayflyerCtaSdk = new module.HeadlessSdk(companyToken, isMockedMode);
+    const headlessSdk: IHeadlessWayflyerCtaSdk = await loadScriptAndInitializeSdk(script, companyToken, mockedMode);
+    cachedSdkInstance = headlessSdk;
 
-  cachedSdkInstance = sdk;
-  return sdk;
+    return headlessSdk;
+  } catch (error) {
+    console.error('Error in loading headless SDK:', error);
+    throw new Error('Failed to load script');
+  }
 };

package/src/api/startHostedApplication.test.ts

@@ -0,0 +1,53 @@
+import { MockedModeType, SdkScenarios } from '@wf-financing/embedded-types';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+vi.mock('./getHeadlessSdkInstance', () => ({
+  getHeadlessSdkInstance: vi.fn(),
+}));
+
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+import { startHostedApplication } from './startHostedApplication';
+
+const fakeSdk = {
+  getCta: vi.fn(),
+  startHostedApplication: vi.fn(),
+};
+
+describe('startHostedApplication', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('calls sdk.startHostedApplication with partnerData and returns nextUrl', async () => {
+    const fakePartnerData = { foo: 1 };
+    const fakeNextUrl = '/next-url';
+    const partnerCallback = vi.fn().mockResolvedValue(fakePartnerData);
+
+    (getHeadlessSdkInstance as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(fakeSdk);
+    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+    const mockedMode: MockedModeType = {
+      isMockedMode: true,
+      sdkScenario: SdkScenarios.NEW_APPLICATION,
+    };
+
+    const result = await startHostedApplication('TOKEN', partnerCallback, mockedMode);
+
+    expect(getHeadlessSdkInstance).toHaveBeenCalledWith('TOKEN', mockedMode);
+    expect(partnerCallback).toHaveBeenCalled();
+    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith(fakePartnerData);
+    expect(result).toBe(fakeNextUrl);
+  });
+
+  test('calls sdk.startHostedApplication with empty object if partnerCallback returns falsy', async () => {
+    const partnerCallback = vi.fn().mockResolvedValue(undefined);
+    const fakeNextUrl = '/next-url';
+
+    (getHeadlessSdkInstance as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce(fakeSdk);
+    fakeSdk.startHostedApplication.mockResolvedValueOnce(fakeNextUrl);
+
+    const result = await startHostedApplication('TOKEN', partnerCallback);
+
+    expect(fakeSdk.startHostedApplication).toHaveBeenCalledWith({});
+    expect(result).toBe(fakeNextUrl);
+  });
+});

package/src/api/startHostedApplication.ts

@@ -1,10 +1,20 @@
-import { StartHostedApplicationRequestType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 
 import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
 
-export const startHostedApplication = async (companyToken: string, isMockedMode: boolean, partnerData: StartHostedApplicationRequestType) => {
-  const sdk = await getHeadlessSdkInstance(companyToken, isMockedMode);
+export const startHostedApplication = async (
+  companyToken: string,
+  partnerCallback: PartnerCallbackType,
+  mockedMode?: MockedModeType,
+) => {
+  let partnerData = await partnerCallback();
+  const sdk = await getHeadlessSdkInstance(companyToken, mockedMode);
+
+  if (!partnerData) {
+    partnerData = {};
+  }
+
   const nextUrl = await sdk.startHostedApplication(partnerData);
 
   return nextUrl;
-}
+};

package/src/components/banner/BannerActions.stories.tsx

@@ -0,0 +1,22 @@
+import { BannerActionsDesktop } from './BannerActionsDesktop';
+import { BannerActionsMobile } from './BannerActionsMobile';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'Banner/BannerActions',
+  component: BannerActionsDesktop,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Desktop: StoryObj = {
+  render: () => <BannerActionsDesktop />,
+  name: 'Desktop Actions',
+};
+
+export const Mobile: StoryObj = {
+  render: () => <BannerActionsMobile />,
+  name: 'Mobile Actions',
+};

package/src/components/banner/{CtaBannerActions.tsx → BannerActionsDesktop.tsx}

@@ -3,15 +3,9 @@ import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
 import { ProceedFundingButton } from './ProceedFundingButton';
 
-type CtaBannerActionsType = {
-  isMobile: boolean;
-};
-
-export const CtaBannerActions = ({ isMobile }: CtaBannerActionsType) => (
+export const BannerActionsDesktop = () => (
   <Flex gap="4">
-    {!isMobile && (
-      <ProceedFundingButton />
-    )}
+    <ProceedFundingButton />
     <Button variant="Tertiary">
       <IconX16Line />
     </Button>

package/src/components/banner/BannerActionsMobile.tsx

@@ -0,0 +1,12 @@
+import { Button, Flex } from '@wayflyer/flyui';
+
+import { ProceedFundingButton } from './ProceedFundingButton';
+
+export const BannerActionsMobile = () => (
+  <Flex gap="2" align="center" width="100%" justify="space-around">
+    <ProceedFundingButton />
+    <Button fullWidth title="Dismiss" variant="Secondary">
+      Dismiss
+    </Button>
+  </Flex>
+);

package/src/components/banner/BannerContent.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CtaBannerContent } from './CtaBannerContent';
+
+const meta: Meta<typeof CtaBannerContent> = {
+  title: 'BannerContent',
+  component: CtaBannerContent,
+  argTypes: {
+    isMobile: {
+      control: 'boolean',
+      description: 'Render mobile version',
+      defaultValue: false,
+    },
+    isTablet: {
+      control: 'boolean',
+      description: 'Render tablet version',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CtaBannerContent>;
+
+export const Default: Story = {
+  args: {
+    isMobile: false,
+    isTablet: false,
+  },
+  render: (args) => <CtaBannerContent {...args} />,
+};

package/src/components/banner/BulletList.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BulletList } from './BulletList';
+
+const meta: Meta<typeof BulletList> = {
+  title: 'BulletList',
+  component: BulletList,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BulletList>;
+
+export const Default: Story = {
+  render: () => <BulletList items={['Item 1', 'Item 2', 'Item 3']} />,
+};

package/src/components/banner/BulletList.tsx

@@ -7,7 +7,7 @@ export const BulletList = ({ items }: { items: string[] }) => {
       {items.map((bullet_point: string) => (
         <Flex key={bullet_point} gap="1" align="center">
           <IconCheck16Line />
-          <Text size="sm" fontWeight="semiBold" lineHeight="tight" textWrap="nowrap">
+          <Text size="sm" fontWeight="medium" fontStyle="regular" lineHeight="tight">
             {bullet_point}
           </Text>
         </Flex>

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CtaBanner } from './CtaBanner';
+
+const meta: Meta<typeof CtaBanner> = {
+  title: 'CtaBanner',
+  component: CtaBanner,
+};
+
+export default meta;
+type Story = StoryObj<typeof CtaBanner>;
+
+export const Default: Story = {
+  render: () => <CtaBanner />,
+};

package/src/components/banner/CtaBanner.tsx

@@ -1,34 +1,36 @@
-import {
-  Flex,
-  useDetectDeviceSize,
-  useTheme,
-} from '@wayflyer/flyui';
+import { Flex, Theme, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
 import { styled } from 'styled-components';
 
-import { CtaBannerActions } from './CtaBannerActions';
+import { BannerActionsDesktop } from './BannerActionsDesktop';
+import { BannerActionsMobile } from './BannerActionsMobile';
 import { CtaBannerContent } from './CtaBannerContent';
-import { ProceedFundingButton } from './ProceedFundingButton';
+
+type BannerContainerPropTypes = {
+  theme: Theme;
+  isMobile: boolean;
+};
+
+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'])};
+  display: flex;
+  flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
+  gap: ${({ isMobile, theme }) => (isMobile ? theme.spacing(['4']) : '0')};
+  background-color: ${({ theme }) => theme.palette.utility.primaryBrand};
+`;
 
 export const CtaBanner = () => {
   const { isMobile, isTablet } = useDetectDeviceSize();
   const theme = useTheme();
 
-  const BannerContainer = styled.aside`
-      padding: ${theme.spacing(isMobile ? ['3', '3', '3', '4'] : ['4', '4', '4', '6'])};
-      box-shadow: ${theme.effects.shadow};
-      border-radius: ${theme.borderRadius(['md'])};
-      display: flex;
-      flex-direction: ${isMobile ? 'column' : 'row'};
-      gap: ${isMobile ? theme.spacing(['4']) : '0'};
-  `;
-
   return (
-    <BannerContainer>
-        <Flex gap="4" align="center" justify="space-between" width="100%">
-          <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
-          <CtaBannerActions isMobile={isMobile} />
-        </Flex>
-        {isMobile && <ProceedFundingButton />}
+    <BannerContainer isMobile={isMobile} theme={theme}>
+      <Flex gap="4" align="center" justify="space-between" width="100%">
+        <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
+        {!isMobile && <BannerActionsDesktop />}
+      </Flex>
+      {isMobile && <BannerActionsMobile />}
     </BannerContainer>
   );
 };

package/src/components/banner/CtaBannerContent.tsx

@@ -1,26 +1,30 @@
-import { Flex, TextHeading } from '@wayflyer/flyui';
+import { Flex, Text } from '@wayflyer/flyui';
 import type { CtaResponseType } from '@wf-financing/embedded-types';
 
 import { useCtaBanner } from '../../hooks/useCtaBanner';
 import { BulletList } from './BulletList';
 
-type CtaBannerContent = {
+type CtaBannerContentProps = {
   isMobile: boolean;
   isTablet: boolean;
 };
 
-export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContent) => {
+export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContentProps) => {
   const sdk = useCtaBanner();
   const ctaData = sdk.data as CtaResponseType;
 
   return (
-    <Flex direction="column" gap="1">
-      <TextHeading element="p" size={isMobile ? 'lg' : 'xl'} lineHeight="tight">
-        {ctaData?.data?.config?.text}
-      </TextHeading>
-      {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
-        <BulletList items={ctaData?.data?.config?.bullet_points} />
+    <>
+      {!sdk.isLoading && (
+        <Flex direction="column" gap="1">
+          <Text size={isMobile ? 'lg' : 'xl'} fontStyle="regular" fontWeight="medium" lineHeight="normal">
+            {ctaData?.data?.config?.text}
+          </Text>
+          {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (
+            <BulletList items={ctaData?.data?.config?.bullet_points} />
+          )}
+        </Flex>
       )}
-    </Flex>
+    </>
   );
 };