@wf-financing/ui 0.1.1 → 1.1.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,20 +1,7 @@
-import type { Themes } from '@wayflyer/flyui';
-import { PartnerCallbackType } from '@wf-financing/embedded-types';
+import { WayflyerUiCtaSdk } from './sdk';
 
-import { mountToTarget } from './src/main';
-
-export const mount = (
-  targetId: string,
-  partnerDesignId: Themes,
-  partnerCallback: PartnerCallbackType,
-  companyToken: string,
-  isMockedMode?: boolean,
-) => {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () =>
-      mountToTarget(targetId, partnerDesignId, partnerCallback, companyToken, isMockedMode),
-    );
-  } else {
-    mountToTarget(targetId, partnerDesignId, partnerCallback, companyToken, isMockedMode);
-  }
+const addHeadlessSdkToWindow = () => {
+  window.WayflyerUiCtaSdk = WayflyerUiCtaSdk;
 };
+
+addHeadlessSdkToWindow();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "0.1.1",
+  "version": "1.1.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.4"
+    "@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,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { FlyUIProvider, Themes } from '@wayflyer/flyui';
-import { PartnerCallbackType } from '@wf-financing/embedded-types';
+import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 import { createIntl, createIntlCache, IntlShape } from 'react-intl';
 
 import { CtaWidget } from './CtaWidget';
@@ -10,8 +10,9 @@ import { PartnerContext } from './utils/partnerContext';
 type AppPropsType = {
   partnerDesignId: Themes;
   companyToken: string;
-  isMockedMode?: boolean;
-  partnerCallback: PartnerCallbackType,
+  mockedMode?: MockedModeType;
+  partnerCallback: PartnerCallbackType;
+  onWidgetClose: () => void;
 };
 
 const queryClient = new QueryClient();
@@ -19,7 +20,7 @@ const messages = {
   en: enMessages,
 };
 
-export const App = ({ partnerDesignId, companyToken, isMockedMode, partnerCallback }: AppPropsType) => {
+export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback, onWidgetClose }: AppPropsType) => {
   const locale = 'en';
 
   const intl: IntlShape = createIntl(
@@ -27,12 +28,12 @@ export const App = ({ partnerDesignId, companyToken, isMockedMode, partnerCallba
       locale,
       messages: messages[locale],
     },
-    createIntlCache()
+    createIntlCache(),
   );
 
   return (
     <QueryClientProvider client={queryClient}>
-      <PartnerContext.Provider value={{ companyToken, isMockedMode, partnerCallback }}>
+      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback, onWidgetClose }}>
         <FlyUIProvider theme={partnerDesignId} intl={intl}>
           <CtaWidget />
         </FlyUIProvider>

package/src/CtaWidget.tsx

@@ -1,14 +1,19 @@
+import { useEffect } from 'react';
+
 import { CtaBanner } from './components/banner/CtaBanner';
-import { useCtaBanner } from './hooks/useCtaBanner';
+import { useCtaBanner, usePartnerContext } from './hooks';
 
 export const CtaWidget = () => {
   const banner = useCtaBanner();
+  const partnerContext = usePartnerContext();
+
+  useEffect(() => {
+    if (!banner.isLoading && !banner.data) {
+      requestAnimationFrame(() => {
+        partnerContext.onWidgetClose();
+      });
+    }
+  }, [banner.data]);
 
-  return (
-    <>
-      {!banner.isLoading && (
-          <CtaBanner />
-      )}
-    </>
-  );
+  return <>{!banner.isLoading && banner.data && <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,14 +1,14 @@
-import { PartnerCallbackType } 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,
   partnerCallback: PartnerCallbackType,
+  mockedMode?: MockedModeType,
 ) => {
   let partnerData = await partnerCallback();
-  const sdk = await getHeadlessSdkInstance(companyToken, isMockedMode);
+  const sdk = await getHeadlessSdkInstance(companyToken, mockedMode);
 
   if (!partnerData) {
     partnerData = {};
@@ -17,4 +17,4 @@ export const startHostedApplication = async (
   const nextUrl = await sdk.startHostedApplication(partnerData);
 
   return nextUrl;
-}
+};

package/src/components/banner/BannerActionsDesktop.tsx

@@ -0,0 +1,13 @@
+import { Flex } from '@wayflyer/flyui';
+
+import { CloseButton } from './CloseButton';
+import { ProceedFundingButton } from './ProceedFundingButton';
+
+export const BannerActionsDesktop = () => {
+  return (
+    <Flex gap="4">
+      <ProceedFundingButton />
+      <CloseButton />
+    </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/CloseButton.tsx

@@ -0,0 +1,16 @@
+import { Button, Flex } from '@wayflyer/flyui';
+import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
+
+import { usePartnerContext } from '../../hooks';
+
+export const CloseButton = () => {
+  const { onWidgetClose: closeWidget } = usePartnerContext();
+
+  return (
+    <Button onClick={closeWidget} variant="Tertiary">
+      <Flex padding="2">
+        <IconX16Line />
+      </Flex>
+    </Button>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Themes } from '@wayflyer/flyui';
+import { CtaResponseTypes, MockedModeType } from '@wf-financing/embedded-types';
+import { App } from '../../App';
+import { CtaBanner } from './CtaBanner';
+
+const defaultArgs = {
+  partnerDesignId: 'whiteLabel' as Themes,
+  companyToken: 'demo-token',
+  partnerCallback: () => {},
+  onWidgetClose: () => {},
+};
+
+type CtaBannerStoryArgs = typeof defaultArgs & { mockedMode: MockedModeType };
+
+const Template = (args: CtaBannerStoryArgs) => (
+  <App {...args}>
+    <CtaBanner />
+  </App>
+);
+
+const meta: Meta<typeof CtaBanner> = {
+  title: 'CtaBanner',
+  component: CtaBanner,
+  argTypes: {
+    mockedMode: {
+      control: { type: 'object' },
+    },
+  },
+  args: {
+    ...defaultArgs,
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: CtaResponseTypes.GENERIC_OFFER,
+    },
+  },
+  decorators: [(Story, context) => <Template {...(context.args as CtaBannerStoryArgs)} />],
+};
+
+export default meta;
+type Story = StoryObj<typeof CtaBanner>;
+
+export const GenericOffer: Story = {
+  name: 'Generic Offer',
+  args: {
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: CtaResponseTypes.GENERIC_OFFER,
+    },
+  },
+};

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 { CtaBannerContent } from './CtaBannerContent';
-import { ProceedFundingButton } from './ProceedFundingButton';
+import { FooterActions } from './FooterActions';
+import { HeaderActions } from './HeaderActions';
+
+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} />
+        <HeaderActions />
+      </Flex>
+      <FooterActions />
     </BannerContainer>
   );
 };