@wf-financing/ui 1.4.2 → 1.4.3

package/package.json

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

package/src/components/banner/ProceedFundingButton.tsx

@@ -1,15 +1,16 @@
 import { Button } from '@wayflyer/flyui';
 import {
+  ContinueHostedApplicationResponseType,
   CtaContinueFundingType,
   CtaGenericOfferType,
   CtaIndicativeOfferType,
   CtaStateType,
-  ContinueHostedApplicationResponseType,
 } from '@wf-financing/embedded-types';
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
+
+import { useContinueHostedApplication, useCtaBanner } from '../../hooks';
 
-import { useCtaBanner, useContinueHostedApplication } from '../../hooks';
-import { ConsentModal } from '../modal/ConsentModal';
+const ConsentModal = lazy(() => import('../modal/ConsentModal'));
 
 type CtaResponseType = CtaGenericOfferType | CtaIndicativeOfferType | CtaContinueFundingType;
 
@@ -50,7 +51,9 @@ export const ProceedFundingButton = () => {
       <Button variant="Primary" fullWidth onClick={handleContinueHostedApplication}>
         {config?.button_label}
       </Button>
-      <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      <Suspense>
+        <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+      </Suspense>
     </>
   );
 };

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

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ConsentModal } from './ConsentModal';
-import { PartnerContext } from '../../utils';
 import { Themes } from '@wayflyer/flyui';
+import { PartnerContext } from '../../utils';
+import ConsentModal from './ConsentModal';
 
 const portalContainer = document.createElement('div');
 document.body.append(portalContainer);

package/src/components/modal/ConsentModal.tsx

@@ -17,7 +17,7 @@ const ImageContainer = styled(Image)`
   max-width: none;
 `;
 
-export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
+const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps) => {
   const { formatMessage } = useIntl();
   const isSmallScreen = useDetectSmallScreen();
   const { isMobile } = useDetectDeviceSize();
@@ -39,3 +39,5 @@ export const ConsentModal = ({ isModalOpen, setIsModalOpen }: ConsentModalProps)
     </Modal>
   );
 };
+
+export default ConsentModal;

package/src/components/modal/ModalFooter.tsx

@@ -3,7 +3,7 @@ import { IconArrowOnSquareUpRight16Line } from '@wayflyer/flyui-icons/16/line';
 import { StartHostedApplicationResponseType } from '@wf-financing/embedded-types';
 import { FormattedMessage } from 'react-intl';
 
-import { useStartHostedApplication, useDetectSmallScreen } from '../../hooks';
+import { useDetectSmallScreen, useStartHostedApplication } from '../../hooks';
 
 type ModalFooterType = {
   setOpen: (isOpen: boolean) => void;
@@ -18,6 +18,7 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
     startHostedAppMutation.mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
+        setOpen(false);
         window.open(next);
       },
       onError: (error) => {

package/vite.config.ts

@@ -3,10 +3,10 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { defineConfig } from 'vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [react()],
   define: {
-    'process.env': {},
+    'process.env.NODE_ENV': JSON.stringify(mode === 'production' ? 'production' : 'development'),
   },
   server: {
     host: true,
@@ -20,8 +20,5 @@ export default defineConfig({
       fileName: (format) => `index.${format}.js`,
       formats: ['es'],
     },
-    rollupOptions: {
-      external: [],
-    },
   },
-});
+}));