@wf-financing/ui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",

package/src/App.tsx

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

package/src/CtaWidget.tsx

@@ -1,8 +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/components/banner/BannerActionsDesktop.tsx

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

@@ -1,14 +1,51 @@
-import type { Meta, StoryObj } from '@storybook/react';
+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 Default: Story = {
-  render: () => <CtaBanner />,
+export const GenericOffer: Story = {
+  name: 'Generic Offer',
+  args: {
+    mockedMode: {
+      isMockedMode: true,
+      sdkScenario: CtaResponseTypes.GENERIC_OFFER,
+    },
+  },
 };

package/src/components/banner/CtaBanner.tsx

@@ -1,9 +1,9 @@
 import { Flex, Theme, useDetectDeviceSize, useTheme } from '@wayflyer/flyui';
 import { styled } from 'styled-components';
 
-import { BannerActionsDesktop } from './BannerActionsDesktop';
-import { BannerActionsMobile } from './BannerActionsMobile';
 import { CtaBannerContent } from './CtaBannerContent';
+import { FooterActions } from './FooterActions';
+import { HeaderActions } from './HeaderActions';
 
 type BannerContainerPropTypes = {
   theme: Theme;
@@ -28,9 +28,9 @@ export const CtaBanner = () => {
     <BannerContainer isMobile={isMobile} theme={theme}>
       <Flex gap="4" align="center" justify="space-between" width="100%">
         <CtaBannerContent isMobile={isMobile} isTablet={isTablet} />
-        {!isMobile && <BannerActionsDesktop />}
+        <HeaderActions />
       </Flex>
-      {isMobile && <BannerActionsMobile />}
+      <FooterActions />
     </BannerContainer>
   );
 };

package/src/components/banner/FooterActions.tsx

@@ -0,0 +1,8 @@
+import { useDetectDeviceSize } from '@wayflyer/flyui';
+import { ProceedFundingButton } from './ProceedFundingButton';
+
+export const FooterActions = () => {
+  const { isMobile } = useDetectDeviceSize();
+
+  return isMobile ? <ProceedFundingButton /> : null;
+};

package/src/components/banner/HeaderActions.tsx

@@ -0,0 +1,9 @@
+import { useDetectDeviceSize } from '@wayflyer/flyui';
+import { BannerActionsDesktop } from './BannerActionsDesktop';
+import { CloseButton } from './CloseButton';
+
+export const HeaderActions = () => {
+  const { isMobile } = useDetectDeviceSize();
+
+  return isMobile ? <CloseButton /> : <BannerActionsDesktop />;
+};

package/src/components/modal/Modal.tsx

@@ -31,7 +31,7 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
               animate={fullSize}
               exit={small}
               transition={{ duration: 0.3 }}
-              style={{ width: '438px', border: 'none' }}
+              style={{ width: '438px', border: 'none', maxWidth: '100vw' }}
             >
               <MotionModalOverlay
                 data-id="modal-mask"

package/src/components/modal/modalEnhancements.ts

@@ -21,6 +21,8 @@ export const DialogBody = styled.div`
   overflow-y: auto;
   background-color: var(--palette-modal-surface);
   border-radius: var(--sizes-radius-md);
+  max-height: 80vh;
+  padding-bottom: 10px;
 
   &::-webkit-scrollbar {
     width: 12px;

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { usePartnerContext } from './usePartnerContext';
+export { useCtaBanner } from './useCtaBanner';
+export { useStartHostedApplication } from './useStartHostedApplication';

package/src/hooks/useCtaBanner.ts

@@ -1,17 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
-import { useContext } from 'react';
-import { MockedModeType } from '@wf-financing/embedded-types';
 
 import { fetchCtaBanner } from '../api/ctaBanner';
-import { PartnerContext } from '../utils/partnerContext';
-
-type PartnerDataType = {
-  companyToken: string;
-  mockedMode?: MockedModeType;
-};
+import { usePartnerContext } from './usePartnerContext';
 
 export const useCtaBanner = () => {
-  const { companyToken, mockedMode } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode } = usePartnerContext();
 
   return useQuery({
     queryKey: ['cta', companyToken, mockedMode],

package/src/hooks/usePartnerContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { PartnerContext, type PartnerContextType } from '../utils';
+
+export const usePartnerContext = () => {
+  return useContext(PartnerContext) as PartnerContextType;
+};

package/src/hooks/useStartHostedApplication.ts

@@ -1,19 +1,10 @@
-import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
-import { useContext } from 'react';
-
-import { PartnerContext } from '../utils/partnerContext';
-
-type PartnerDataType = {
-  companyToken: string;
-  mockedMode?: MockedModeType;
-  partnerCallback: PartnerCallbackType;
-};
-
 import { useMutation } from '@tanstack/react-query';
+
 import { startHostedApplication } from '../api/startHostedApplication';
+import { usePartnerContext } from './usePartnerContext';
 
 export const useStartHostedApplication = () => {
-  const { companyToken, mockedMode, partnerCallback } = useContext(PartnerContext) as PartnerDataType;
+  const { companyToken, mockedMode, partnerCallback } = usePartnerContext();
 
   return useMutation({
     mutationFn: () => startHostedApplication(companyToken, partnerCallback, mockedMode),

package/src/main.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client';
 
 import { App } from './App';
 
-const roots = new Map<HTMLElement, ReactDOM.Root>();
+let root: ReactDOM.Root | undefined = undefined;
 
 export const mountToTarget = (
   targetId: string,
@@ -14,17 +14,14 @@ export const mountToTarget = (
   mockedMode?: MockedModeType,
 ) => {
   const targetElement = document.getElementById(targetId);
+  if (!targetElement) throw new Error(`Target element with id "${targetId}" not found.`);
 
-  if (!targetElement) {
-    console.warn(`Target element with id "${targetId}" not found.`);
-    return;
-  }
-
-  let root = roots.get(targetElement);
+  if (!root) root = ReactDOM.createRoot(targetElement);
 
-  if (!root) {
-    root = ReactDOM.createRoot(targetElement);
-    roots.set(targetElement, root);
+  function handleCloseWidget() {
+    if (!root) throw new Error('Root is not found');
+    root.unmount();
+    root = undefined;
   }
 
   root.render(
@@ -33,6 +30,7 @@ export const mountToTarget = (
       companyToken={companyToken}
       mockedMode={mockedMode}
       partnerCallback={partnerCallback}
+      onWidgetClose={handleCloseWidget}
     />,
   );
 };

package/src/utils/index.ts

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

package/src/utils/partnerContext.ts

@@ -1,11 +1,14 @@
 import { PartnerCallbackType, MockedModeType } from '@wf-financing/embedded-types';
 import { createContext } from 'react';
 
-type PartnerContextType = {
+export type PartnerContextType = {
   companyToken: string;
   isMockedMode?: boolean;
   partnerCallback: PartnerCallbackType;
   mockedMode?: MockedModeType;
-} | null;
+  onWidgetClose: () => void;
+};
 
-export const PartnerContext = createContext<PartnerContextType>(null);
+type PartnerContextWithDefaultType = PartnerContextType | null;
+
+export const PartnerContext = createContext<PartnerContextWithDefaultType>(null);

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

@@ -1,22 +0,0 @@
-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/BannerActionsMobile.tsx

@@ -1,12 +0,0 @@
-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>
-);