@wf-financing/ui 3.3.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -46,6 +46,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "analyze": "vite build --mode analyze-html && npx http-server dist/bundle-stats -p 8083",
     "publish-sdk-cta-ui": "pnpm clean && pnpm build && pnpm publish --access public --no-git-checks",
     "test": "vitest",
     "test:coverage": "vitest --coverage"

package/sdk/index.ts

@@ -8,8 +8,8 @@ export class WayflyerUiSdk {
   private readonly partnerTheme: PartnerTheme;
 
   constructor(
-    private readonly companyToken: string,
-    private readonly options?: SdkOptionsType,
+    readonly companyToken: string,
+    readonly options?: SdkOptionsType,
   ) {
     const partnerId = getPartnerIdFromToken(companyToken);
     this.partnerTheme = getPartnerThemeById(partnerId);

package/src/components/banner/ProceedFundingButton.tsx

@@ -17,7 +17,7 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const [isModalOpen, setIsModalOpen] = useState(false);
   const sdkResponse = useCtaBanner();
   const sdk = sdkResponse.data as CtaResponseType;
-  const continueHostedApplicationMutation = useContinueHostedApplication();
+  const { mutate, isPending: isLoading } = useContinueHostedApplication();
   const invalidateCta = useInvalidateCta();
 
   if (!sdk) return null;
@@ -30,7 +30,7 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
   const handleContinueHostedApplication = () => {
     switch (state) {
       case CtaStateType.CONTINUE_APPLICATION:
-        continueHostedApplicationMutation.mutate(undefined, {
+        mutate(undefined, {
           onSuccess: (nextUrl: ContinueHostedApplicationResponseType) => {
             const { next } = nextUrl;
             window.open(next);
@@ -49,7 +49,12 @@ export const ProceedFundingButton = ({ isOnDarkTheme }: { isOnDarkTheme: boolean
 
   return (
     <>
-      <Button variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'} fullWidth onClick={handleContinueHostedApplication}>
+      <Button
+        variant={isOnDarkTheme ? 'PrimaryOnDark' : 'Primary'}
+        fullWidth
+        onClick={handleContinueHostedApplication}
+        loading={isLoading}
+      >
         {config?.button_label}
       </Button>
       <ConsentModal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />

package/src/components/modal/ModalFooter.tsx

@@ -11,12 +11,12 @@ type ModalFooterType = {
 
 export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   const { isMobile } = useDetectDeviceSize();
-  const startHostedAppMutation = useStartHostedApplication();
+  const { mutate, isPending: isLoading } = useStartHostedApplication();
   const isSmallScreen = useDetectSmallScreen();
   const invalidateCta = useInvalidateCta();
 
   const handleStartApplication = () => {
-    startHostedAppMutation.mutate(undefined, {
+    mutate(undefined, {
       onSuccess: (nextUrl: StartHostedApplicationResponseType) => {
         const { next } = nextUrl;
         setOpen(false);
@@ -36,9 +36,9 @@ export const ModalFooter = ({ setOpen }: ModalFooterType) => {
   return (
     <Flex direction="column" gap="3">
       <Flex gap="2" direction={isSmallScreen || isMobile ? 'column' : 'row'}>
-        <Button fullWidth onClick={handleStartApplication} variant="Primary" external>
+        <Button fullWidth onClick={handleStartApplication} loading={isLoading} variant="Primary" external>
           <FormattedMessage id="ctaModal.action" />
-          <IconArrowOnSquareUpRight16Line />
+          {!isLoading && <IconArrowOnSquareUpRight16Line />}
         </Button>
         <Button fullWidth variant="Secondary" onClick={() => setOpen(false)}>
           <FormattedMessage id="common.cancel" />

package/src/config/whitelistedPartnerIds.ts

@@ -1,15 +1,17 @@
 import { Themes } from '@wayflyer/flyui';
 
 export type PartnerTheme = Exclude<Themes, 'staff'>;
-export type PartnerId = (typeof WHITELISTED_PARTNER_IDS)[PartnerTheme];
+export type PartnerId = keyof typeof WHITELISTED_PARTNER_IDS;
 
 /**
  * List of partner IDs that are allowed to use custom CTA themes
  * when embedded into their platform.
  */
 export const WHITELISTED_PARTNER_IDS = {
-  whiteLabel: '2416e2af-c9f7-40ac-a2f0-f37dcfe59674',
-  wayflyer: '1f309265-5324-4f8b-88d7-9b0d5c77a27c',
-  athena: '970df87a-e7d5-4942-9450-a77cf771dca3',
+  '2416e2af-c9f7-40ac-a2f0-f37dcfe59674': 'whiteLabel',
+  '1f309265-5324-4f8b-88d7-9b0d5c77a27c': 'wayflyer',
+  '970df87a-e7d5-4942-9450-a77cf771dca3': 'athena',
+  '01756129-a8a8-4314-8813-97057195dcfa': 'athena',
+
   defaultTheme: 'defaultTheme',
-} as const satisfies Record<PartnerTheme, string>;
+} as const satisfies Record<string, PartnerTheme>;

package/src/utils/getPartnerThemeById.ts

@@ -1,9 +1,5 @@
 import { PartnerId, PartnerTheme, WHITELISTED_PARTNER_IDS } from '../config';
 
-const PARTNER_BY_VALUE: Record<PartnerId, PartnerTheme> = Object.fromEntries(
-  Object.entries(WHITELISTED_PARTNER_IDS).map(([k, v]) => [v, k]),
-) as Record<PartnerId, PartnerTheme>;
-
 export const getPartnerThemeById = (value: PartnerId): PartnerTheme => {
-  return PARTNER_BY_VALUE[value] || 'whiteLabel';
+  return WHITELISTED_PARTNER_IDS[value] || 'whiteLabel';
 };

package/vite.config.mts

@@ -0,0 +1,44 @@
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig, type ConfigEnv, type UserConfig, type PluginOption } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+import inject from '@rollup/plugin-inject';
+
+const visualizerOptions = {
+  'analyze-html': { emitFile: true, filename: `bundle-stats/index.html`, gzipSize: true },
+  'analyze-json': { emitFile: true, filename: `bundle-stats/stats.json`, template: 'raw-data', gzipSize: true },
+};
+
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+  return {
+    plugins: [react(), ...(mode?.includes('analyze') ? [visualizer(visualizerOptions[mode])] : [])] as PluginOption[],
+    optimizeDeps: {
+      exclude: ['@wayflyer/*'],
+    },
+    define: {
+      'process.env': {},
+      'process.env.NODE_ENV': JSON.stringify(mode),
+    },
+    server: {
+      host: true,
+      port: 5176,
+      strictPort: true,
+    },
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, 'index.ts'),
+        name: 'sdkCtaUiComponents',
+        fileName: (format) => `index.${format}.js`,
+        formats: ['es'],
+      },
+      rollupOptions: {
+        external: [],
+        plugins: [
+          inject({
+            process: 'process',
+          }),
+        ],
+      },
+    },
+  };
+});

package/vite.config.ts

@@ -1,37 +0,0 @@
-/// <reference types="vitest/config" />
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import { defineConfig } from 'vite';
-import inject from '@rollup/plugin-inject';
-
-export default defineConfig(({ mode }) => ({
-  plugins: [react()],
-  optimizeDeps: {
-    exclude: ['@wayflyer/*'],
-  },
-  define: {
-    'process.env': {},
-    'process.env.NODE_ENV': JSON.stringify(mode),
-  },
-  server: {
-    host: true,
-    port: 5176,
-    strictPort: true,
-  },
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'index.ts'),
-      name: 'sdkCtaUiComponents',
-      fileName: (format) => `index.${format}.js`,
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: [],
-      plugins: [
-        inject({
-          process: 'process',
-        }),
-      ],
-    },
-  },
-}));