@wf-financing/ui 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "5.81.5",
-    "@wayflyer/flyui-icons": "1.5.0",
+    "@wayflyer/flyui-icons": "1.6.0",
     "framer-motion": "^12.23.0",
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
@@ -40,7 +40,7 @@
     "@wf-financing/embedded-types": "0.3.0"
   },
   "peerDependencies": {
-    "@wayflyer/flyui": "202.1.0"
+    "@wayflyer/flyui": "204.4.1"
   },
   "publishConfig": {
     "access": "public"

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/src/config/fontParameters.ts

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

package/src/config/index.ts

@@ -1,4 +1,5 @@
+export { FONT_PARAMS } from './fontParameters';
+export type { FontParamsType } from './fontParameters';
+export { ROOTS_CONFIG } from './rootsParameters';
 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/utils/applyFont.ts

@@ -1,20 +1,17 @@
 import type { Themes } from '@wayflyer/flyui';
 
-import { loadFont } from './loadFont';
 import { FONT_PARAMS } from '../config';
+import { loadFont } from './loadFont';
 
 type ApplyFontsType = (shadow: ShadowRoot, partnerDesignId: Themes) => Promise<void>;
 
 export const applyFont: ApplyFontsType = async (shadow, partnerDesignId) => {
-  const { dmSansParams, sourceSansParams, merrionSansParams } = FONT_PARAMS;
+  const { dmSansParams, 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':

package/src/utils/loadFont.ts

@@ -1,20 +1,25 @@
-type FontParamsType = {
-  fontFamily: string;
-  fontUrl: string;
-};
+import { FontParamsType } from 'src/config';
 
 type LoadFontType = (shadow: ShadowRoot, fontParams: FontParamsType) => Promise<void>;
 
 export const loadFont: LoadFontType = async (shadow, fontParams) => {
-  const { fontFamily, fontUrl } = fontParams;
+  const { fontFamily, fontUrl, fallbackFontUrl } = fontParams;
   const fontStylesId = 'font-styles';
 
-  const font = new FontFace(fontFamily, `url(${fontUrl})`);
+  let font: FontFace;
 
-  await font.load();
-  document.fonts.add(font);
+  try {
+    font = new FontFace(fontFamily, `url(${fontUrl})`);
+    await font.load();
+  } catch {
+    font = new FontFace(fontFamily, `url(${fallbackFontUrl})`);
+    await font.load();
+  } finally {
+    document.fonts.add(font!);
+  }
 
   let fontStyles = shadow.getElementById(fontStylesId);
+
   if (!fontStyles) {
     fontStyles = document.createElement('style');
     fontStyles.id = fontStylesId;

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: [],
-    },
   },
-});
+}));