@wf-financing/ui 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -32,14 +32,16 @@
   },
   "dependencies": {
     "@tanstack/react-query": "5.81.5",
-    "@wayflyer/flyui": "196.0.0",
-    "@wayflyer/flyui-icons": "1.3.2",
+    "@wayflyer/flyui-icons": "1.5.0",
     "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.2.6"
   },
+  "peerDependencies": {
+    "@wayflyer/flyui": "202.1.0"
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/App.tsx

@@ -13,6 +13,7 @@ type AppPropsType = {
   mockedMode?: MockedModeType;
   partnerCallback: PartnerCallbackType;
   onWidgetClose: () => void;
+  portalContainer: HTMLElement;
 };
 
 const queryClient = new QueryClient();
@@ -20,7 +21,14 @@ const messages = {
   en: enMessages,
 };
 
-export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback, onWidgetClose }: AppPropsType) => {
+export const App = ({
+  partnerDesignId,
+  companyToken,
+  mockedMode,
+  partnerCallback,
+  onWidgetClose,
+  portalContainer,
+}: AppPropsType) => {
   const locale = 'en';
 
   const intl: IntlShape = createIntl(
@@ -33,7 +41,7 @@ export const App = ({ partnerDesignId, companyToken, mockedMode, partnerCallback
 
   return (
     <QueryClientProvider client={queryClient}>
-      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback, onWidgetClose }}>
+      <PartnerContext.Provider value={{ companyToken, mockedMode, partnerCallback, onWidgetClose, portalContainer }}>
         <FlyUIProvider theme={partnerDesignId} intl={intl}>
           <CtaWidget />
         </FlyUIProvider>

package/src/components/banner/BulletList.tsx

@@ -1,17 +1,15 @@
 import { Flex, Text } from '@wayflyer/flyui';
-import { IconCheck16Line } from '@wayflyer/flyui-icons/16/line';
+import { IconCheck12Line } from '@wayflyer/flyui-icons/12/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="medium" fontStyle="regular" lineHeight="tight">
-            {bullet_point}
-          </Text>
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
+export const BulletList = ({ items }: { items: string[] }) => (
+  <Flex gap="4">
+    {items.map((bullet_point: string) => (
+      <Flex key={bullet_point} gap="1" align="center">
+        <IconCheck12Line />
+        <Text size="sm" fontWeight="medium" fontStyle="regular" lineHeight="tight">
+          {bullet_point}
+        </Text>
+      </Flex>
+    ))}
+  </Flex>
+);

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

@@ -4,11 +4,15 @@ import { SdkScenarios, MockedModeType } from '@wf-financing/embedded-types';
 import { App } from '../../App';
 import { CtaBanner } from './CtaBanner';
 
+const portalContainer = document.createElement('div');
+document.body.append(portalContainer);
+
 const defaultArgs = {
   partnerDesignId: 'whiteLabel' as Themes,
   companyToken: 'demo-token',
   partnerCallback: () => {},
   onWidgetClose: () => {},
+  portalContainer,
 };
 
 type CtaBannerStoryArgs = typeof defaultArgs & { mockedMode: MockedModeType };

package/src/components/banner/CtaBanner.tsx

@@ -7,16 +7,16 @@ import { HeaderActions } from './HeaderActions';
 
 type BannerContainerPropTypes = {
   theme: Theme;
-  isMobile: boolean;
+  $isMobile: boolean;
 };
 
 const BannerContainer = styled.aside<BannerContainerPropTypes>`
-  padding: ${({ theme, isMobile }) => theme.spacing(isMobile ? ['3', '3', '3', '4'] : ['4', '4', '4', '6'])};
+  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')};
+  flex-direction: ${({ $isMobile }) => ($isMobile ? 'column' : 'row')};
+  gap: ${({ $isMobile, theme }) => ($isMobile ? theme.spacing(['4']) : '0')};
   background-color: ${({ theme }) => theme.palette.utility.primaryBrand};
 `;
 
@@ -25,7 +25,7 @@ export const CtaBanner = () => {
   const theme = useTheme();
 
   return (
-    <BannerContainer isMobile={isMobile} theme={theme}>
+    <BannerContainer $isMobile={isMobile} theme={theme}>
       <Flex gap="4" align="center" justify="space-between" width="100%">
         <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
         <HeaderActions />

package/src/components/banner/CtaBannerContent.tsx

@@ -17,7 +17,7 @@ export const CtaBannerContent = ({ isMobile, isTablet }: CtaBannerContentProps)
     <>
       {!sdk.isLoading && (
         <Flex direction="column" gap="1">
-          <Text size={isMobile ? 'lg' : 'xl'} fontStyle="regular" fontWeight="medium" lineHeight="normal">
+          <Text size={isMobile ? 'base' : 'lg'} fontStyle="regular" fontWeight="medium" lineHeight="normal">
             {ctaData?.data?.config?.text}
           </Text>
           {!(isTablet || isMobile) && ctaData?.data?.config?.bullet_points && (

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

@@ -1,5 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { ConsentModal } from './ConsentModal';
+import { PartnerContext } from '../../utils';
+import { Themes } from '@wayflyer/flyui';
+
+const portalContainer = document.createElement('div');
+document.body.append(portalContainer);
+
+const appArgs = {
+  partnerDesignId: 'whiteLabel' as Themes,
+  companyToken: 'demo-token',
+  partnerCallback: () => {},
+  onWidgetClose: () => {},
+  portalContainer,
+};
 
 const fn = (): void => {};
 
@@ -21,7 +35,11 @@ export const Default: Story = {
     isModalOpen: true,
     setIsModalOpen: fn,
   },
-  render: (args) => <ConsentModal {...args} />,
+  render: (args) => (
+    <PartnerContext.Provider value={{ ...appArgs }}>
+      <ConsentModal {...args} />
+    </PartnerContext.Provider>
+  ),
 };
 
 export const WithContent: Story = {
@@ -30,13 +48,17 @@ export const WithContent: Story = {
     setIsModalOpen: fn,
   },
   render: (args) => (
-    <ConsentModal {...args}>
-      <div style={{ padding: '20px', background: 'white' }}>
-        <h2>Consent Agreement</h2>
-        <p>Please agree to the terms to proceed.</p>
-        <button>Continue to Wayflyer</button>
-        <button>Cancel</button>
-      </div>
-    </ConsentModal>
+    <>
+      <PartnerContext.Provider value={{ ...appArgs }}>
+        <ConsentModal {...args}>
+          <div style={{ padding: '20px', background: 'white' }}>
+            <h2>Consent Agreement</h2>
+            <p>Please agree to the terms to proceed.</p>
+            <button>Continue to Wayflyer</button>
+            <button>Cancel</button>
+          </div>
+        </ConsentModal>
+      </PartnerContext.Provider>
+    </>
   ),
 };

package/src/components/modal/ConsentModal.tsx

@@ -1,25 +1,33 @@
 import { Flex, Image, Text, useDetectDeviceSize } from '@wayflyer/flyui';
 import { useIntl } from 'react-intl';
 
+import { styled } from 'styled-components';
+import { useDetectSmallScreen } from '../../hooks';
 import { FundingSteps } from './FundingSteps';
 import { Modal } from './Modal';
 import { ModalFooter } from './ModalFooter';
-import { useDetectSmallScreen } from '../../hooks';
 
 type ConsentModalProps = {
   isModalOpen: boolean;
   setIsModalOpen: (isOpen: boolean) => void;
 };
 
+const ImageContainer = styled(Image)`
+  width: 100%;
+  max-width: none;
+`;
+
 export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
   const { formatMessage } = useIntl();
   const isSmallScreen = useDetectSmallScreen();
   const { isMobile } = useDetectDeviceSize();
 
+  const isReducedSpacing = isSmallScreen || isMobile;
+
   return (
     <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen}>
-      {!isSmallScreen && <Image src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />}
-      <Flex direction="column" gap="8" padding={isSmallScreen || isMobile ? '4' : '6'}>
+      {!isSmallScreen && <ImageContainer src="https://static.wayflyer.com/flyui-assets/logos/wayflyer-ef.png" />}
+      <Flex direction="column" gap="8" padding={isReducedSpacing ? '4' : '6'}>
         <Flex direction="column" gap="6">
           <Text fontStyle="regular" fontWeight="medium" lineHeight="tight" size="2xl">
             {formatMessage({ id: 'ctaModal.title' })}

package/src/components/modal/FundingSteps.tsx

@@ -7,7 +7,7 @@ export const FundingSteps = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <Flex direction="column" gap="3">
+    <Flex direction="column" gap="2">
       {MODAL_ITEMS.map(({ id, title, subtitle }) => (
         <Flex key={id} direction="column">
           <Text fontWeight="medium">{formatMessage(title)}</Text>

package/src/components/modal/Modal.tsx

@@ -2,9 +2,11 @@ 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 { usePartnerContext } from '../../hooks';
 import { DialogBody } from './modalEnhancements';
 
 import { MotionModalOverlay, MotionModalPrimitive, fullSize, opaque, small, transparent } from './modalEnhancements';
+import { useRemoveInerted } from '../../hooks';
 
 type ModalProps = {
   isModalOpen: boolean;
@@ -14,13 +16,16 @@ type ModalProps = {
 
 export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) => {
   const modalId = useId();
+  const { portalContainer } = usePartnerContext();
   const scrollableElRef = useRef(null);
 
+  useRemoveInerted(isModalOpen, portalContainer);
+
   return (
     <LazyMotion features={domAnimation}>
       <AnimatePresence>
         {isModalOpen && (
-          <PortalProvider getContainer={() => document.getElementById('app-container') ?? document.body}>
+          <PortalProvider getContainer={() => portalContainer}>
             <MotionModalPrimitive
               isDismissable
               shouldCloseOnInteractOutside={(e) => e.getAttribute('data-id') === 'modal-mask'}
@@ -31,7 +36,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
               animate={fullSize}
               exit={small}
               transition={{ duration: 0.3 }}
-              style={{ width: '438px', border: 'none', maxWidth: '90vw', maxHeight: '90vh' }}
+              style={{ width: '438px', border: 'none', maxWidth: '90vw', maxHeight: '100vh' }}
             >
               <MotionModalOverlay
                 data-id="modal-mask"

package/src/components/modal/ModalFooter.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Link, Text } from '@wayflyer/flyui';
+import { Button, Flex, Link, Text, useDetectDeviceSize } from '@wayflyer/flyui';
 import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
 import { FormattedMessage } from 'react-intl';
@@ -10,6 +10,7 @@ type ModalFooterType = {
 };
 
 export const ModalFooter = ({ setOpen }: ModalFooterType) => {
+  const { isMobile } = useDetectDeviceSize();
   const startHostedAppMutation = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
 
@@ -31,7 +32,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
 
   return (
     <Flex direction="column" gap="3">
-      <Flex gap="2" direction={isSmallScreen ? 'column' : 'row'}>
+      <Flex gap="2" direction={isSmallScreen || isMobile ? 'column' : 'row'}>
         <Button fullWidth onClick={handleStartApplication} variant="Primary" external>
           <FormattedMessage id="ctaModal.action" />
           <IconArrowOnSquareUpRight16Line />

package/src/config/fontParameters.ts

@@ -0,0 +1,18 @@
+const dmSansParams = {
+  fontFamily: 'DM Sans',
+  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
+};
+const sourceSansParams = {
+  fontFamily: 'Source Sans Pro',
+  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/source-sans/SourceSans3-VariableFont_wght.ttf',
+};
+const merrionSansParams = {
+  fontFamily: 'Merrion Sans',
+  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
+};
+
+export const FONT_PARAMS = {
+  dmSansParams,
+  sourceSansParams,
+  merrionSansParams,
+};

package/src/config/index.ts

@@ -1,2 +1,4 @@
 export { WAYFLYER_HEADLESS_SDK_ID } from './scriptId';
 export { HEADLESS_SDK_URL } from './url';
+export { ROOTS_CONFIG } from './rootsParameters';
+export { FONT_PARAMS } from './fontParameters';

package/src/config/rootsParameters.ts

@@ -0,0 +1,19 @@
+const STYLED_COMPONENTS_STYLES_ROOT_PARAMS = {
+  rootName: 'styledComponentsStyleRoot',
+  rootElement: 'div',
+  rootElementId: 'styled-component-style-target',
+};
+
+const PORTAL_ROOT_PARAMS = {
+  rootName: 'portalRoot',
+  rootElement: 'div',
+  rootElementId: 'portal-root',
+};
+
+const BANNER_ROOT_PARAMS = {
+  rootName: 'bannerRoot',
+  rootElement: 'div',
+  rootElementId: 'banner-root',
+};
+
+export const ROOTS_CONFIG = [STYLED_COMPONENTS_STYLES_ROOT_PARAMS, PORTAL_ROOT_PARAMS, BANNER_ROOT_PARAMS];

package/src/hooks/index.ts

@@ -3,3 +3,4 @@ export { useCtaBanner } from './useCtaBanner';
 export { useStartHostedApplication } from './useStartHostedApplication';
 export { useDetectSmallScreen } from './useDetectSmallScreen';
 export { useContinueHostedApplication } from './useContinueHostedApplication';
+export { useRemoveInerted } from './useRemoveInerted';

package/src/hooks/useRemoveInerted.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export const useRemoveInerted = (isModalOpen: boolean, portalContainer: HTMLElement) => {
+  const inertedElements = useRef<HTMLElement[]>([]);
+
+  useEffect(() => {
+    if (!isModalOpen || !portalContainer) return;
+
+    inertedElements.current = [];
+    let hostElement: HTMLElement | null = (portalContainer.getRootNode() as ShadowRoot)?.host as HTMLElement;
+    while (hostElement) {
+      if (hostElement.hasAttribute?.('inert')) {
+        inertedElements.current.push(hostElement);
+        hostElement.removeAttribute('inert');
+      }
+      hostElement = hostElement.parentElement;
+    }
+
+    return () => {
+      inertedElements.current.forEach((el) => el.setAttribute('inert', ''));
+      inertedElements.current = [];
+    };
+  }, [isModalOpen, portalContainer]);
+};

package/src/main.tsx

@@ -1,36 +1,48 @@
 import type { Themes } from '@wayflyer/flyui';
 import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 import ReactDOM from 'react-dom/client';
+import { StyleSheetManager } from 'styled-components';
 
 import { App } from './App';
+import { createRoots } from './utils';
 
 let root: ReactDOM.Root | undefined = undefined;
 
-export const mountToTarget = (
+export const mountToTarget = async (
   targetId: string,
   partnerDesignId: Themes,
   partnerCallback: PartnerCallbackType,
   companyToken: string,
   mockedMode?: MockedModeType,
-) => {
-  const targetElement = document.getElementById(targetId);
-  if (!targetElement) throw new Error(`Target element with id "${targetId}" not found.`);
+): Promise<void> => {
+  const hostEl = document.getElementById(targetId);
+  if (!hostEl) throw new Error(`Target element with id "${targetId}" not found.`);
 
-  if (!root) root = ReactDOM.createRoot(targetElement);
+  const shadow = hostEl.shadowRoot ?? hostEl.attachShadow({ mode: 'open' });
 
-  function handleCloseWidget() {
+  // TODO remove after resolving an issue with CORS
+  // await applyFont(shadow, partnerDesignId);
+
+  const { styledComponentsStyleRoot, portalRoot, bannerRoot } = createRoots(shadow);
+
+  if (!root) root = ReactDOM.createRoot(bannerRoot);
+
+  const handleCloseWidget = () => {
     if (!root) throw new Error('Root is not found');
     root.unmount();
     root = undefined;
-  }
+  };
 
   root.render(
-    <App
-      partnerDesignId={partnerDesignId}
-      companyToken={companyToken}
-      mockedMode={mockedMode}
-      partnerCallback={partnerCallback}
-      onWidgetClose={handleCloseWidget}
-    />,
+    <StyleSheetManager target={styledComponentsStyleRoot}>
+      <App
+        partnerDesignId={partnerDesignId}
+        companyToken={companyToken}
+        mockedMode={mockedMode}
+        partnerCallback={partnerCallback}
+        onWidgetClose={handleCloseWidget}
+        portalContainer={portalRoot}
+      />
+    </StyleSheetManager>,
   );
 };

package/src/utils/applyFont.ts

@@ -0,0 +1,26 @@
+import type { Themes } from '@wayflyer/flyui';
+
+import { loadFont } from './loadFont';
+import { FONT_PARAMS } from '../config';
+
+type ApplyFontsType = (shadow: ShadowRoot, partnerDesignId: Themes) => Promise<void>;
+
+export const applyFont: ApplyFontsType = async (shadow, partnerDesignId) => {
+  const { dmSansParams, sourceSansParams, merrionSansParams } = FONT_PARAMS;
+
+  switch (partnerDesignId) {
+    case 'whiteLabel':
+      await loadFont(shadow, dmSansParams);
+      break;
+    case 'bigCommerce':
+      await loadFont(shadow, sourceSansParams);
+      break;
+    case 'wayflyer':
+    case 'staff':
+    case 'defaultTheme':
+      await loadFont(shadow, merrionSansParams);
+      break;
+    default:
+      await loadFont(shadow, merrionSansParams);
+  }
+};

package/src/utils/createRoots.ts

@@ -0,0 +1,27 @@
+import { ROOTS_CONFIG } from '../config';
+
+type CreateRootsReturnType = {
+  styledComponentsStyleRoot: HTMLElement;
+  portalRoot: HTMLElement;
+  bannerRoot: HTMLElement;
+};
+
+type CreateRootsType = (shadow: ShadowRoot) => CreateRootsReturnType;
+
+export const createRoots: CreateRootsType = (shadow) => {
+  return ROOTS_CONFIG.reduce((acc, element) => {
+    const { rootElement, rootElementId, rootName } = element;
+    let root = shadow.getElementById(rootElementId);
+
+    if (!root) {
+      root = document.createElement(rootElement);
+      root.id = rootElementId;
+      shadow.appendChild(root);
+    }
+
+    return {
+      ...acc,
+      [rootName]: root,
+    };
+  }, {}) as CreateRootsReturnType;
+};

package/src/utils/index.ts

@@ -1,3 +1,5 @@
 export { initializeHeadlessSdk } from './initializeHeadlessSdk';
 export { loadScriptAndInitializeSdk } from './loadScriptAndInitializeSdk';
 export { PartnerContext, type PartnerContextType } from './partnerContext';
+export { createRoots } from './createRoots';
+export { applyFont } from './applyFont';

package/src/utils/loadFont.ts

@@ -0,0 +1,28 @@
+type FontParamsType = {
+  fontFamily: string;
+  fontUrl: string;
+};
+
+type LoadFontType = (shadow: ShadowRoot, fontParams: FontParamsType) => Promise<void>;
+
+export const loadFont: LoadFontType = async (shadow, fontParams) => {
+  const { fontFamily, fontUrl } = fontParams;
+  const fontStylesId = 'font-styles';
+
+  const font = new FontFace(fontFamily, `url(${fontUrl})`);
+
+  await font.load();
+  document.fonts.add(font);
+
+  let fontStyles = shadow.getElementById(fontStylesId);
+  if (!fontStyles) {
+    fontStyles = document.createElement('style');
+    fontStyles.id = fontStylesId;
+    fontStyles.textContent = `
+      :host { font-family: "${fontFamily}", sans-serif; }
+      ::slotted(*) { font-family: inherit; }
+    `;
+
+    shadow.appendChild(fontStyles);
+  }
+};

package/src/utils/partnerContext.ts

@@ -7,6 +7,7 @@ export type PartnerContextType = {
   partnerCallback: PartnerCallbackType;
   mockedMode?: MockedModeType;
   onWidgetClose: () => void;
+  portalContainer: HTMLElement;
 };
 
 type PartnerContextWithDefaultType = PartnerContextType | null;

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

@@ -1,31 +0,0 @@
-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} />,
-};