@wf-financing/ui 4.7.4 → 4.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wf-financing/ui",
-  "version": "4.7.4",
+  "version": "4.7.6",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
@@ -37,10 +37,10 @@
     "react-intl": "^6.2.5",
     "react-markdown": "^10.1.0",
     "styled-components": "^6.1.19",
-    "@wf-financing/headless": "3.3.3",
-    "@wf-financing/embedded-types": "1.1.1",
-    "@wf-financing/logger": "2.2.2",
-    "@wf-financing/ui-assets": "1.1.3"
+    "@wf-financing/headless": "3.3.4",
+    "@wf-financing/logger": "2.2.3",
+    "@wf-financing/ui-assets": "1.1.4",
+    "@wf-financing/embedded-types": "1.1.1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/modal/Modal.tsx

@@ -3,6 +3,7 @@ import { IconXmark16Line } from '@wayflyer/flyui-icons/16/line';
 import { AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
 import { ReactNode, useId, useRef } from 'react';
 import { UNSAFE_PortalProvider as PortalProvider } from 'react-aria';
+import { Logger } from '@wf-financing/logger';
 
 import { usePartnerContext, useRemoveInerted } from '../../hooks';
 import { DialogBody } from './modalEnhancements';
@@ -51,7 +52,13 @@ export const Modal = ({ isModalOpen, setIsModalOpen, children }: ModalProps) =>
               />
               <Dialog role="dialog" aria-labelledby={modalId}>
                 <div style={{ position: 'absolute', right: '10px', top: '10px' }}>
-                  <Button variant="Tertiary" onClick={() => setIsModalOpen(false)}>
+                  <Button
+                    variant="Tertiary"
+                    onClick={() => {
+                      setIsModalOpen(false);
+                      Logger.logEvent('modal_window_closed');
+                    }}
+                  >
                     <Flex padding="2">
                       <IconXmark16Line />
                     </Flex>

package/src/utils/buildCtaUiProps.ts

@@ -1,5 +1,6 @@
 import type { Copy, ConsentModal, PartnerTemplate } from '@wf-financing/ui-assets';
 import { CtaStateType, ApplicationRequiredActions, CtaResponseType } from '@wf-financing/embedded-types';
+import { Logger } from '@wf-financing/logger';
 
 import { buildBannerProps, type BannerProps } from './buildBannerProps.ts';
 
@@ -34,43 +35,68 @@ export const buildCtaUiProps: BuildCtaUiProps = (cta, copy, onModalStateChange,
     partnerTemplate,
   } = copy;
 
+  const logClickOnBannerWrapper = (actionDescription: string, action: () => void) => {
+    const eventMessage = `${actionDescription}_clicked`;
+
+    action();
+    Logger.logEvent(eventMessage);
+  };
+
   const continueApplicationMap: Record<ApplicationRequiredActions, () => ReturnType<BuildCtaUiProps>> = {
     [ApplicationRequiredActions.COMPLETE_APPLICATION]: () => ({
-      bannerProps: buildBannerProps(completeApplication, onContinueApplication),
+      bannerProps: buildBannerProps(completeApplication, () =>
+        logClickOnBannerWrapper(ApplicationRequiredActions.COMPLETE_APPLICATION, onContinueApplication),
+      ),
     }),
 
     [ApplicationRequiredActions.SELECT_OFFER]: () => {
       const offer = 'offer' in data ? data.offer : undefined;
 
       return {
-        bannerProps: buildBannerProps(selectOffer, onContinueApplication, offer),
+        bannerProps: buildBannerProps(
+          selectOffer,
+          () => logClickOnBannerWrapper(ApplicationRequiredActions.SELECT_OFFER, onContinueApplication),
+          offer,
+        ),
       };
     },
 
     [ApplicationRequiredActions.COMPLETE_KYC]: () => ({
-      bannerProps: buildBannerProps(completeKyc, onContinueApplication),
+      bannerProps: buildBannerProps(completeKyc, () =>
+        logClickOnBannerWrapper(ApplicationRequiredActions.COMPLETE_KYC, onContinueApplication),
+      ),
     }),
 
     [ApplicationRequiredActions.SIGN_CONTRACT]: () => ({
-      bannerProps: buildBannerProps(signContract, onContinueApplication),
+      bannerProps: buildBannerProps(signContract, () =>
+        logClickOnBannerWrapper(ApplicationRequiredActions.SIGN_CONTRACT, onContinueApplication),
+      ),
     }),
 
     [ApplicationRequiredActions.PROVIDE_ADDITIONAL_INFO]: () => ({
-      bannerProps: buildBannerProps(provideAdditionalInfo, onContinueApplication),
+      bannerProps: buildBannerProps(provideAdditionalInfo, () =>
+        logClickOnBannerWrapper(ApplicationRequiredActions.PROVIDE_ADDITIONAL_INFO, onContinueApplication),
+      ),
     }),
   };
 
   switch (state) {
     case CtaStateType.GENERIC_OFFER:
       return {
-        bannerProps: buildBannerProps(genericOffer, onModalStateChange),
+        bannerProps: buildBannerProps(genericOffer, () =>
+          logClickOnBannerWrapper(`${CtaStateType.GENERIC_OFFER}_modal_opened`, onModalStateChange),
+        ),
         consentModalProps: { ...consentModal, onModalStateChange },
         partnerTemplateProps: partnerTemplate,
       };
 
     case CtaStateType.INDICATIVE_OFFER:
       return {
-        bannerProps: buildBannerProps(indicativeOffer, onModalStateChange, data.offer),
+        bannerProps: buildBannerProps(
+          indicativeOffer,
+          () => logClickOnBannerWrapper(`${CtaStateType.INDICATIVE_OFFER}_modal_opened`, onModalStateChange),
+          data.offer,
+        ),
         consentModalProps: { ...consentModal, onModalStateChange },
         partnerTemplateProps: partnerTemplate,
       };