@wf-financing/ui 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -37,7 +37,7 @@
     "react-aria": "^3.41.1",
     "react-intl": "^6.2.5",
     "styled-components": "^6.1.19",
-    "@wf-financing/embedded-types": "0.2.6"
+    "@wf-financing/embedded-types": "0.3.0"
   },
   "peerDependencies": {
     "@wayflyer/flyui": "202.1.0"

package/src/api/dismissCta.ts

@@ -0,0 +1,11 @@
+import { MockedModeType } from '@wf-financing/embedded-types';
+
+import { getHeadlessSdkInstance } from './getHeadlessSdkInstance';
+
+export const dismissCta = async (companyToken: string, mockedMode?: MockedModeType) => {
+  const sdk = await getHeadlessSdkInstance(companyToken, mockedMode);
+
+  if (!mockedMode) {
+    await sdk.dismissCta();
+  }
+};

package/src/api/index.ts

@@ -0,0 +1,4 @@
+export { dismissCta } from './dismissCta';
+export { fetchCtaBanner } from './ctaBanner';
+export { startHostedApplication } from './startHostedApplication';
+export { continueHostedApplication } from './continueHostedApplication';

package/src/components/banner/CloseButton.tsx

@@ -1,13 +1,23 @@
 import { Button, Flex } from '@wayflyer/flyui';
 import { IconX16Line } from '@wayflyer/flyui-icons/16/line';
 
-import { usePartnerContext } from '../../hooks';
+import { usePartnerContext, useDismissCta } from '../../hooks';
 
 export const CloseButton = () => {
   const { onWidgetClose: closeWidget } = usePartnerContext();
+  const dismissCta = useDismissCta();
+
+  const handleCloseWidget = () => {
+    closeWidget();
+    dismissCta.mutate(undefined, {
+      onError: (error) => {
+        console.error('Failed to dismiss CTA', error);
+      },
+    });
+  };
 
   return (
-    <Button onClick={closeWidget} variant="Tertiary">
+    <Button onClick={handleCloseWidget} variant="Tertiary">
       <Flex padding="2">
         <IconX16Line />
       </Flex>

package/src/config/fontParameters.ts

@@ -1,14 +1,14 @@
 const dmSansParams = {
   fontFamily: 'DM Sans',
-  fontUrl: 'https://static.wayflyer.com/flyui-assets/fonts/dm-sans/DMSans-VariableFont_opsz,wght.ttf',
+  fontUrl: 'https://app.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',
+  fontUrl: 'https://app.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',
+  fontUrl: 'https://app.wayflyer.com/flyui-assets/fonts/merrion-sans/Merrion_Sans-Medium.woff2',
 };
 
 export const FONT_PARAMS = {

package/src/hooks/index.ts

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

package/src/hooks/useContinueHostedApplication.ts

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { continueHostedApplication } from '../api/continueHostedApplication';
+import { continueHostedApplication } from '../api';
 import { usePartnerContext } from './usePartnerContext';
 
 export const useContinueHostedApplication = () => {

package/src/hooks/useCtaBanner.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { fetchCtaBanner } from '../api/ctaBanner';
+import { fetchCtaBanner } from '../api';
 import { usePartnerContext } from './usePartnerContext';
 
 export const useCtaBanner = () => {

package/src/hooks/useDismissCta.ts

@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { dismissCta } from '../api';
+import { usePartnerContext } from './usePartnerContext';
+
+export const useDismissCta = () => {
+  const { companyToken, mockedMode } = usePartnerContext();
+
+  return useMutation({
+    mutationFn: () => dismissCta(companyToken, mockedMode),
+  });
+};

package/src/hooks/useStartHostedApplication.ts

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { startHostedApplication } from '../api/startHostedApplication';
+import { startHostedApplication } from '../api';
 import { usePartnerContext } from './usePartnerContext';
 
 export const useStartHostedApplication = () => {

package/src/main.tsx

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client';
 import { StyleSheetManager } from 'styled-components';
 
 import { App } from './App';
-import { createRoots } from './utils';
+import { createRoots, applyFont } from './utils';
 
 let root: ReactDOM.Root | undefined = undefined;
 
@@ -20,8 +20,11 @@ export const mountToTarget = async (
 
   const shadow = hostEl.shadowRoot ?? hostEl.attachShadow({ mode: 'open' });
 
-  // TODO remove after resolving an issue with CORS
-  // await applyFont(shadow, partnerDesignId);
+  try {
+    await applyFont(shadow, partnerDesignId);
+  } catch (error) {
+    console.error(error);
+  }
 
   const { styledComponentsStyleRoot, portalRoot, bannerRoot } = createRoots(shadow);