@wf-financing/ui 0.1.0

package/index.ts

@@ -0,0 +1,18 @@
+import type { Themes } from '@wayflyer/flyui';
+
+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);
+  }
+};

package/module-types/embedded-sdk-cta-module.d.ts

@@ -0,0 +1,4 @@
+declare module 'https://unpkg.com/@wf-financing/headless/dist/index.es.js' {
+  const HeadlessWayflyerCtaSdk: any;
+  export = HeadlessWayflyerCtaSdk;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@wf-financing/ui",
+  "version": "0.1.0",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.4.0"
+  },
+  "dependencies": {
+    "@wayflyer/flyui": "188.3.0",
+    "@wayflyer/flyui-icons": "1.3.2",
+    "@tanstack/react-query": "5.81.5",
+    "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "publish-sdk-cta-ui": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,40 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { FlyUIProvider, Themes } from '@wayflyer/flyui';
+import { createIntl, createIntlCache, IntlShape } from 'react-intl';
+
+import { CtaWidget } from './CtaWidget';
+import enMessages from './locales/en.json';
+import { PartnerContext } from './utils/partnerContext';
+
+type AppPropsType = {
+  partnerDesignId: Themes;
+  companyToken: string;
+  isMockedMode?: boolean;
+};
+
+const queryClient = new QueryClient();
+const messages = {
+  en: enMessages,
+};
+
+export const App = ({ partnerDesignId, companyToken, isMockedMode }: AppPropsType) => {
+  const locale = 'en';
+
+  const intl: IntlShape = createIntl(
+    {
+      locale,
+      messages: messages[locale],
+    },
+    createIntlCache()
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <PartnerContext.Provider value={{ companyToken, isMockedMode }}>
+        <FlyUIProvider theme={partnerDesignId} intl={intl}>
+          <CtaWidget />
+        </FlyUIProvider>
+      </PartnerContext.Provider>
+    </QueryClientProvider>
+  );
+};

package/src/CtaWidget.tsx

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

package/src/api/ctaBanner.ts

@@ -0,0 +1,8 @@
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+
+export const fetchCtaBanner = async (companyToken: string, isMockedMode: boolean) => {
+  const sdk = await getHeadlessSdkInstance(companyToken, isMockedMode);
+  const cta = await sdk.getCta();
+
+  return cta;
+}

package/src/api/getHeadlessSdkInstance.ts

@@ -0,0 +1,13 @@
+import { IHeadlessWayflyerCtaSdk } from '@wf-financing/embedded-types';
+
+let cachedSdkInstance: IHeadlessWayflyerCtaSdk | null = null;
+
+export const getHeadlessSdkInstance = async (companyToken: string, isMockedMode: boolean) => {
+  if (cachedSdkInstance) return cachedSdkInstance;
+
+  const module = await import('https://unpkg.com/@wf-financing/headless/dist/index.es.js');
+  const sdk: IHeadlessWayflyerCtaSdk = new module.HeadlessSdk(companyToken, isMockedMode);
+
+  cachedSdkInstance = sdk;
+  return sdk;
+};

package/src/api/startHostedApplication.ts

@@ -0,0 +1,10 @@
+import { StartHostedApplicationRequestType } 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);
+  const nextUrl = await sdk.startHostedApplication(partnerData);
+
+  return nextUrl;
+}

package/src/components/banner/BulletList.tsx

@@ -0,0 +1,17 @@
+import { Flex, Text } from '@wayflyer/flyui';
+import { IconCheck16Line } from '@wayflyer/flyui-icons/16/line';
+
+export const BulletList = ({ items }: { items: string[] }) => {
+  return (
+    <Flex gap="4">
+      {items.map((bullet_point: string) => (
+        <Flex key={bullet_point} gap="1" align="center">
+          <IconCheck16Line />
+          <Text size="sm" fontWeight="semiBold" lineHeight="tight" textWrap="nowrap">
+            {bullet_point}
+          </Text>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

package/src/components/banner/CtaBanner.tsx

@@ -0,0 +1,34 @@
+import {
+  Flex,
+  useDetectDeviceSize,
+  useTheme,
+} from '@wayflyer/flyui';
+import { styled } from 'styled-components';
+
+import { CtaBannerActions } from './CtaBannerActions';
+import { CtaBannerContent } from './CtaBannerContent';
+import { ProceedFundingButton } from './ProceedFundingButton';
+
+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>
+  );
+};

package/src/components/banner/CtaBannerActions.tsx

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

package/src/components/banner/CtaBannerContent.tsx

@@ -0,0 +1,26 @@
+import { Flex, TextHeading } from '@wayflyer/flyui';
+import type { CtaResponseType } from '@wf-financing/embedded-types';
+
+import { useCtaBanner } from '../../hooks/useCtaBanner';
+import { BulletList } from './BulletList';
+
+type CtaBannerContent = {
+  isMobile: boolean;
+  isTablet: boolean;
+};
+
+export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContent) => {
+  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} />
+      )}
+    </Flex>
+  );
+};

package/src/components/banner/ProceedFundingButton.tsx

@@ -0,0 +1,35 @@
+import { Button } from '@wayflyer/flyui';
+import { CtaContinueFundingType, CtaGenericOfferType, CtaIndicativeOfferType, CtaStateType } from '@wf-financing/embedded-types';
+import { useState } from 'react';
+
+import { useCtaBanner } from '../../hooks/useCtaBanner';
+import { ConsentModal } from '../modal/ConsentModal';
+
+type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
+
+export const ProceedFundingButton = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const sdkResponse = useCtaBanner();
+  const sdk = sdkResponse.data as CtaResponseType
+  const { state, data: { config } } = sdk;
+
+  const handleButtonClick = () => {
+    switch (state) {
+      case CtaStateType.CONTINUE_APPLICATION:
+        window.open(config?.redirect_url, '_blank');
+        break;
+      default:
+        setIsModalOpen(true);
+        break;
+    }
+    };
+
+  return (
+    <>
+      <Button variant="Primary" onClick={handleButtonClick}>
+        {config.button_label}
+      </Button>
+      <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+    </>
+  );
+};

package/src/components/modal/ConsentModal.tsx

@@ -0,0 +1,30 @@
+import { Flex, Image, Text } from '@wayflyer/flyui';
+import { useIntl } from 'react-intl';
+
+import { FundingSteps } from './FundingSteps';
+import { Modal } from './Modal';
+import { ModalFooter } from './ModalFooter';
+
+type ConsentModalProps = {
+  isModalOpen: boolean;
+  setIsModalOpen: (isOpen: boolean) => void;
+};
+
+export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
+      <Image src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />
+      <Flex margin={['6', '8', '6', '8']} direction="column" gap="10">
+        <Flex direction="column" gap="6">
+          <Text fontWeight="semiBold" size="2xl">
+            {formatMessage({ id: 'ctaModal.title' })}
+          </Text>
+          <FundingSteps />
+        </Flex>
+        <ModalFooter setOpen={setIsModalOpen} />
+      </Flex>
+    </Modal>
+  );
+};

package/src/components/modal/FundingSteps.tsx

@@ -0,0 +1,28 @@
+import { Badge, Flex, Text, useTheme } from '@wayflyer/flyui';
+import { useIntl } from 'react-intl';
+
+import { MODAL_ITEMS } from '../../constants';
+
+export const FundingSteps = () => {
+  const { formatMessage } = useIntl();
+  const theme = useTheme();
+
+  return (
+    <Flex direction="column" gap="4">
+      {MODAL_ITEMS.map(({ id, title, subtitle, Icon, time }) => (
+        <Flex key={id} direction="column" gap="1">
+          <Flex gap="2" direction="row" align="center">
+            <Icon />
+            <Text fontWeight="semiBold">
+              {formatMessage(title)}
+            </Text>
+            <Badge>{formatMessage(time)}</Badge>
+          </Flex>
+          <div style={{ paddingLeft: theme.spacing('8') }}>
+            <Text color="placeholder">{formatMessage(subtitle)}</Text>
+          </div>
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

package/src/components/modal/Modal.tsx

@@ -0,0 +1,60 @@
+import {
+  Dialog
+} from '@wayflyer/flyui';
+import { AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
+import { ReactNode, useId, useRef } from 'react';
+import { UNSAFE_PortalProvider as PortalProvider } from 'react-aria';
+import { DialogBody } from './modalEnhancements';
+
+import { MotionModalOverlay, MotionModalPrimitive, fullSize, opaque, small, transparent } from './modalEnhancements';
+
+type ModalProps = {
+  isModalOpen: boolean;
+  setIsModalOpen: (isOpen: boolean) => void;
+  children: ReactNode;
+}
+
+export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) => {
+  const modalId = useId();
+  const scrollableElRef = useRef(null);
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <AnimatePresence>
+        {isModalOpen && (
+          <PortalProvider getContainer={() => document.getElementById('app-container') ?? document.body}>
+            <MotionModalPrimitive
+              isDismissable
+              shouldCloseOnInteractOutside={(e) => e.getAttribute('data-id') === 'modal-mask'}
+              isOpen={isModalOpen}
+              onOpenChange={() => setIsModalOpen(false)}
+              $size="normal"
+              initial={small}
+              animate={fullSize}
+              exit={small}
+              transition={{ duration: 0.3 }}
+              style={{ width: '438px', border: 'none' }}
+            >
+              <MotionModalOverlay
+                data-id="modal-mask"
+                data-testid="modal-mask"
+                initial={transparent}
+                animate={opaque}
+                exit={transparent}
+                transition={{ duration: 0.6 }}
+              />
+              <Dialog
+                role="dialog"
+                aria-labelledby={modalId}
+              >
+                <DialogBody ref={scrollableElRef} data-testid="modal-body">
+                  {children}
+                </DialogBody>
+              </Dialog>
+            </MotionModalPrimitive>
+          </PortalProvider>
+        )}
+      </AnimatePresence>
+    </LazyMotion>
+  );
+};

package/src/components/modal/ModalFooter.tsx

@@ -0,0 +1,47 @@
+import { Button, Flex, Text } from '@wayflyer/flyui';
+import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
+import { useIntl } from 'react-intl';
+
+import { useStartHostedApplication } from '../../hooks/useStartHostedApplication';
+
+type ModalFooterType = {
+  setOpen: (isOpen: boolean) => void;
+};
+
+export const ModalFooter = ({ setOpen }: ModalFooterType) => {
+  const { formatMessage } = useIntl();
+  const startHostedAppMutation = useStartHostedApplication();
+
+  const handleStartApplication = () => {
+    const partnerData = {};
+
+    startHostedAppMutation.mutate({
+      partnerData,
+    }, {
+      onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
+        const { next } = nextUrl;
+
+        window.open(next);
+      },
+      onError: (error) => {
+        console.error('Failed to start application', error);
+      },
+    });
+  };
+
+  return (
+    <Flex direction="column" gap="3">
+      <Flex gap="2">
+        <Button onClick={handleStartApplication} variant="Primary">
+          {formatMessage({ id: 'ctaModal.action' })}
+        </Button>
+        <Button variant="TertiaryAccent" onClick={() => setOpen(false)}>
+          {formatMessage({ id: 'common.cancel' })}
+        </Button>
+      </Flex>
+      <Text size="sm" lineHeight="normal">
+        {formatMessage({ id: 'ctaModal.consent' })}
+      </Text>
+    </Flex>
+  );
+};

package/src/components/modal/modalEnhancements.ts

@@ -0,0 +1,40 @@
+import {
+  ModalOverlay as OriginalModalOverlay,
+  ModalPrimitive as OriginalModalPrimitive
+} from '@wayflyer/flyui';
+import { m } from 'framer-motion';
+import styled from 'styled-components';
+
+export const MotionModalOverlay = m(OriginalModalOverlay);
+export const MotionModalPrimitive = m(OriginalModalPrimitive);
+
+export const small = { transform: 'scale(0.7)', opacity: 0 };
+export const fullSize = { transform: 'scale(1)', opacity: 1 };
+export const transparent = { backgroundColor: 'rgba(0, 0, 0, 0)' };
+export const opaque = {
+  backgroundColor: 'var(--palette-utility-overlay)',
+  backdropFilter: 'blur(var(--effects-blur))',
+  opacity: 0.6,
+};
+
+export const DialogBody = styled.div`
+  scrollbar-width: thin;
+  scrollbar-color: var(--palette-modal-border);
+  flex-shrink: 1;
+  overflow-y: auto;
+  background-color: var(--palette-modal-surface);
+  border-radius: var(--sizes-radius-md);
+
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--palette-modal-border);
+    border-radius: var(--sizes-radius-xs);
+  }
+`;

package/src/constants/index.ts

@@ -0,0 +1 @@
+export { MODAL_ITEMS } from './modalItems';

package/src/constants/modalItems.ts

@@ -0,0 +1,29 @@
+import {
+  IconArrowsCwHorizontal24Line,
+  IconCheckCircle24Line,
+  IconPersonCircle24Line,
+} from '@wayflyer/flyui-icons/24/line';
+
+export const MODAL_ITEMS = [
+  {
+    id: 'step1',
+    title: { id: 'ctaModal.step1.title' },
+    subtitle: { id: 'ctaModal.step1.subtitle' },
+    Icon: IconPersonCircle24Line,
+    time: { id: 'ctaModal.step1.time' },
+  },
+  {
+    id: 'step2',
+    title: { id: 'ctaModal.step2.title' },
+    subtitle: { id: 'ctaModal.step2.subtitle' },
+    Icon: IconArrowsCwHorizontal24Line,
+    time: { id: 'ctaModal.step2.time' },
+  },
+  {
+    id: 'step3',
+    title: { id: 'ctaModal.step3.title' },
+    subtitle: { id: 'ctaModal.step3.subtitle' },
+    Icon: IconCheckCircle24Line,
+    time: { id: 'ctaModal.step3.time' },
+  },
+];

package/src/hooks/useCtaBanner.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { useContext } from 'react';
+
+import { fetchCtaBanner } from '../api/ctaBanner';
+import { PartnerContext } from '../utils/partnerContext';
+
+type PartnerDataType = {
+  companyToken: string;
+  isMockedMode: boolean;
+};
+
+export const useCtaBanner = () => {
+  const { companyToken, isMockedMode } = useContext(PartnerContext) as PartnerDataType;
+
+  return useQuery({
+    queryKey: ['cta', companyToken, isMockedMode],
+    queryFn: () => fetchCtaBanner(companyToken, isMockedMode),
+    staleTime: Infinity,
+  });
+}

package/src/hooks/useStartHostedApplication.ts

@@ -0,0 +1,24 @@
+import { StartHostedApplicationRequestType } from '@wf-financing/embedded-types';
+import { useContext } from "react";
+
+import { PartnerContext } from "../utils/partnerContext";
+
+type PartnerDataType = {
+  companyToken: string;
+  isMockedMode: boolean;
+};
+
+import { useMutation } from '@tanstack/react-query';
+import { startHostedApplication } from '../api/startHostedApplication';
+
+export const useStartHostedApplication = () => {
+  const { companyToken, isMockedMode } = useContext(PartnerContext) as PartnerDataType;
+
+  return useMutation({
+    mutationFn: ({
+      partnerData,
+    }: {
+      partnerData: StartHostedApplicationRequestType;
+    }) => startHostedApplication(companyToken, isMockedMode, partnerData),
+  });
+}

package/src/locales/en.json

@@ -0,0 +1,16 @@
+{
+  "common.cancel": "Cancel",
+  "ctaModal.call": "Get funded",
+  "ctaModal.title": "We work with Wayflyer to provide you capital",
+  "ctaModal.action": "Continue with Wayflyer",
+  "ctaModal.consent": "By proceeding, you consent to sharing your BigCommerce information with Wayflyer.",
+  "ctaModal.step1.title": "Create your account",
+  "ctaModal.step1.subtitle": "Tell us about your business and funding needs",
+  "ctaModal.step1.time": "2 mins",
+  "ctaModal.step2.title": "Connect your platforms and apply",
+  "ctaModal.step2.subtitle": "We’ll analyze your business performance",
+  "ctaModal.step2.time": "10 mins",
+  "ctaModal.step3.title": "Accept and receive funds",
+  "ctaModal.step3.subtitle": "Once approved, funds can be deployed in 24h",
+  "ctaModal.step3.time": "24 hrs"
+}

package/src/main.tsx

@@ -0,0 +1,33 @@
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+const roots = new Map<HTMLElement, ReactDOM.Root>();
+
+export const mountToTarget = (
+  targetId: string,
+  partnerDesignId: 'wayflyer' | 'defaultTheme' | 'staff' | 'whiteLabel' | 'bigCommerce',
+  companyToken: string,
+  isMockedMode?: boolean,
+) => {
+  const targetElement = document.getElementById(targetId);
+
+  if (!targetElement) {
+    console.warn(`Target element with id "${targetId}" not found.`);
+    return;
+  }
+
+  let root = roots.get(targetElement);
+
+  if (!root) {
+    root = ReactDOM.createRoot(targetElement);
+    roots.set(targetElement, root);
+  }
+
+  root.render(
+    <App
+      partnerDesignId={partnerDesignId}
+      companyToken={companyToken}
+      isMockedMode={isMockedMode}
+    />
+  );
+};

package/src/utils/partnerContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+type PartnerContextType = {
+  companyToken: string;
+  isMockedMode?: boolean;
+} | null;
+
+export const PartnerContext = createContext<PartnerContextType>(null);

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+  },
+  "include": ["**/*.ts", "**.ts", "**/*.tsx", "**.tsx"],
+  "exclude": ["dist", "mocks", "tests", "playground"]
+}