@tap-payments/auth-jsconnect 2.7.11-test → 2.7.11

package/build/features/connectExpress/screens/{IdentityOTP/OTP.js → VerifyMobileAuthOTP/VerifyMobileAuthOTP.js}

@@ -15,17 +15,17 @@ import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Text from '../../../../components/Text';
-import { clearError, connectExpressSelector, verifyMobileOtpAsync, resetOTPValue, verifyNIDOtpLeadIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
+import { clearError, connectExpressSelector, verifyAuthMobileOtpAsync, resetVerifyAuthOTPValue } from '../../../app/connectExpress/connectExpressStore';
 import Button from '../../../shared/Button';
 import { ScreenContainer } from '../../../shared/Containers';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useSanitizedTranslation } from '../../../../hooks';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import { useLanguage } from '../../../../hooks';
-import { AuthForType } from '../../../../@types';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Form from '../../../../components/Form';
-import { maskPhone, maskID, deepCopy } from '../../../../utils';
+import { maskPhone, deepCopy } from '../../../../utils';
+import { AuthForScreen } from '../../../../@types';
 import { OTPValidation } from './validation';
 import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
@@ -47,41 +47,42 @@ var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-var OTP = function () {
-    var _a;
+var VerifyMobileAuthOTP = function () {
+    var _a, _b, _c, _d, _e, _f;
     var dispatch = useAppDispatch();
-    var _b = useAppSelector(connectExpressSelector), data = _b.data, loading = _b.loading, error = _b.error;
+    var _g = useAppSelector(connectExpressSelector), data = _g.data, loading = _g.loading, error = _g.error;
     var t = useTranslation().t;
+    var st = useSanitizedTranslation();
     var isAr = useLanguage().isAr;
     var methods = useForm({
         resolver: yupResolver(OTPValidation),
-        defaultValues: data.otpData,
+        defaultValues: data.verifyAuthOtpData,
         mode: 'onChange'
     });
-    var isNidAuth = data.otpData.authFor === AuthForType.NATIONAL_ID_MISSED;
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
     React.useEffect(function () {
         return function () {
-            dispatch(resetOTPValue());
+            dispatch(resetVerifyAuthOTPValue());
         };
     }, []);
     var onSubmit = function (formData) {
-        if (isNidAuth) {
-            dispatch(verifyNIDOtpLeadIdentityAsync(deepCopy(formData)));
-            return;
-        }
-        dispatch(verifyMobileOtpAsync(deepCopy(formData)));
+        dispatch(verifyAuthMobileOtpAsync(deepCopy(formData)));
     };
     var onBack = function () {
-        dispatch(handlePrevScreenStep());
+        var authFor = data.verifyAuthOtpData.authFor;
+        var step_name = 'CONNECT_EXPRESS_COLLECT_INDIVIDUAL_INFO_STEP';
+        if (authFor === AuthForScreen.DOB)
+            step_name = 'CONNECT_EXPRESS_COLLECT_DOB_INFO_STEP';
+        else if (authFor === AuthForScreen.MOBILE_OWNERSHIP)
+            step_name = 'COLLECT_MOBILE_OWNERSHIP';
+        dispatch(handlePrevScreenStep(step_name));
     };
     var disabled = !methods.formState.isValid;
-    var phone = ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + (data.mobileData.mobile || '');
-    var idNumber = data.nidData.nid;
-    var title = isNidAuth ? t('opt_nid_sent_title', { provider: 'ABSHER' }) : t('ide_opt_sent_title');
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: isNidAuth ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    var phone = ((_c = (_b = (_a = data.responseData) === null || _a === void 0 ? void 0 : _a.verifyAuthMobile) === null || _b === void 0 ? void 0 : _b.verification_by) === null || _c === void 0 ? void 0 : _c.sent_to) ? (_f = (_e = (_d = data.responseData) === null || _d === void 0 ? void 0 : _d.verifyAuthMobile) === null || _e === void 0 ? void 0 : _e.verification_by) === null || _f === void 0 ? void 0 : _f.sent_to : '';
+    var title = t('ide_opt_sent_title');
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? st('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: st(error || '') }, { children: t('next') }))] })) })) }));
 };
-export default React.memo(OTP);
+export default React.memo(VerifyMobileAuthOTP);

package/build/features/connectExpress/screens/VerifyMobileAuthOTP/index.d.ts

@@ -0,0 +1,3 @@
+import VerifyMobileAuthOTP, { VerifyMobileAuthOTPProps } from './VerifyMobileAuthOTP';
+export type { VerifyMobileAuthOTPProps };
+export default VerifyMobileAuthOTP;

package/build/features/connectExpress/screens/VerifyMobileAuthOTP/index.js

@@ -0,0 +1,2 @@
+import VerifyMobileAuthOTP from './VerifyMobileAuthOTP';
+export default VerifyMobileAuthOTP;

package/build/features/connectExpress/screens/VerifyNafath/VerifyNafath.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface VerifyNafathProps {
+}
+declare const _default: React.MemoExoticComponent<() => JSX.Element | null>;
+export default _default;

package/build/features/connectExpress/screens/VerifyNafath/VerifyNafath.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { connectExpressSelector, verifyNafathAsync } from '../../../app/connectExpress/connectExpressStore';
+import NafathVerification from '../../../shared/NafathVerification';
+import { handlePrevScreenStep } from '../../../../app/settings';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import GenericPrepareDataLoading from '../GenericPrepareDataLoading';
+var VerifyNafath = function () {
+    var _a = React.useState(false), success = _a[0], setSuccess = _a[1];
+    var _b = React.useState(false), failed = _b[0], setFailed = _b[1];
+    var _c = React.useState(false), isReady = _c[0], setIsReady = _c[1];
+    var _d = React.useState(false), showLoadingScreen = _d[0], setShowLoadingScreen = _d[1];
+    var dispatch = useAppDispatch();
+    var data = useAppSelector(connectExpressSelector).data;
+    var authData = (data.responseData || {}).authData;
+    var _e = authData || {}, expiry = _e.expiry, app_url_android = _e.app_url_android, app_url_ios = _e.app_url_ios, random = _e.random;
+    React.useEffect(function () {
+        if (authData && !isReady) {
+            setIsReady(true);
+        }
+    }, [authData]);
+    React.useEffect(function () {
+        if (!isReady)
+            return;
+        var promise = dispatch(verifyNafathAsync({
+            onSuccess: function () { return setSuccess(true); },
+            onFailure: function () { return setFailed(true); },
+            showLoadingScreenAfterNafathSuccess: function () { return setShowLoadingScreen(true); }
+        }));
+        return function () {
+            promise === null || promise === void 0 ? void 0 : promise.abort();
+        };
+    }, [isReady]);
+    var onBack = React.useCallback(function () {
+        dispatch(handlePrevScreenStep());
+    }, []);
+    if (!isReady)
+        return null;
+    return showLoadingScreen ? (_jsx(GenericPrepareDataLoading, {})) : (_jsx(NafathVerification, { randomNumber: random, expiryInSeconds: expiry, success: success, failed: failed, urls: { android: app_url_android, ios: app_url_ios }, onFinish: function () { return onBack(); } }));
+};
+export default React.memo(VerifyNafath);

package/build/features/connectExpress/screens/VerifyNafath/index.d.ts

@@ -0,0 +1,3 @@
+import VerifyNafath, { VerifyNafathProps } from './VerifyNafath';
+export type { VerifyNafathProps };
+export default VerifyNafath;

package/build/features/connectExpress/screens/VerifyNafath/index.js

@@ -0,0 +1,2 @@
+import VerifyNafath from './VerifyNafath';
+export default VerifyNafath;

package/build/features/entity/Entity.d.ts

@@ -5,7 +5,10 @@ export interface EntityLibProps extends LibConfig {
     configToken?: string;
     loaderColor?: string;
 }
-export declare function EntityElement(props: EntityLibProps): JSX.Element;
+export interface EntityLibFullProps extends EntityLibProps {
+    unmount?: () => void;
+}
+export declare function EntityElement(props: EntityLibFullProps): JSX.Element;
 export declare function renderEntityLib(config: EntityLibProps, elementId: string): {
     unmount: () => void;
 };

package/build/features/entity/Entity.js

@@ -23,27 +23,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { memo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken } from '../../hooks';
-import { settingsSelector } from '../../app/settings';
+import { useAppTheme, useAppSelector, useAppConfig, useErrorListener, useStepStartedListener, useVerifyToken, useAppDispatch } from '../../hooks';
+import { handleOpen, settingsSelector } from '../../app/settings';
 import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { findOrCreateElementAndInject, sendPageView } from '../../utils';
+import { findOrCreateElementAndInject, initializeGTM, sendPageView } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
 import { ENTITY_SCREENS_NAVIGATION } from '../../constants';
 import { entityFeatureScreens } from '../featuresScreens';
 import { entitySelector, verifyLeadToken } from '../app/entity/entityStore';
 import Background from '../shared/Background';
 var Entity = memo(function (_a) {
+    var _b, _c, _d;
     var configToken = _a.configToken, verifyToken = _a.verifyToken, loaderColor = _a.loaderColor, props = __rest(_a, ["configToken", "verifyToken", "loaderColor"]);
     var theme = useAppTheme().theme;
-    var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
-    var _c = useAppSelector(entitySelector), customLoading = _c.customLoading, entityError = _c.error, loading = _c.loading;
+    var dispatch = useAppDispatch();
+    var _e = useAppSelector(settingsSelector), data = _e.data, error = _e.error, settingLoading = _e.loading;
+    var _f = useAppSelector(entitySelector), customLoading = _f.customLoading, entityError = _f.error, loading = _f.loading;
     useAppConfig(__assign(__assign({ navigation: ENTITY_SCREENS_NAVIGATION }, props), { disableSettingFetching: props.mode === 'content' ? false : !!verifyToken || !!configToken }));
     useErrorListener(entityError || error);
     useStepStartedListener();
-    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress;
+    var activeScreen = data.activeScreen, isTapOrigin = data.isTapOrigin, open = data.open, featureScreensNavigation = data.featureScreensNavigation, merchant = data.merchant, isMaturityExpress = data.isMaturityExpress, appConfig = data.appConfig;
+    var animationDirection = open ? (_b = appConfig.features) === null || _b === void 0 ? void 0 : _b.dialogStartTransition : (_c = appConfig.features) === null || _c === void 0 ? void 0 : _c.dialogEndTransition;
     useVerifyToken({
         verify: verifyLeadToken,
         loadingScreenName: 'ENTITY_LOADING_DATA_STEP',
@@ -51,15 +54,25 @@ var Entity = memo(function (_a) {
         open: open,
         mode: props.mode,
         internalToken: verifyToken,
-        settingLoading: settingLoading
+        settingLoading: settingLoading,
+        operatorErrorScreenName: 'ENTITY_OPERATOR_ERROR_STEP',
+        isValidOperator: data.isValidOperator
     });
     React.useEffect(function () {
+        initializeGTM();
         sendPageView({
             title: 'Entity'
         });
     }, []);
+    var handleDialogClose = function () {
+        dispatch(handleOpen(false));
+        setTimeout(function () {
+            var _a;
+            (_a = props.unmount) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, 1100);
+    };
     var initialLoading = verifyToken && props.mode !== 'content' ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: entityFeatureScreens.map(function (_a, index) {
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ mode: props.mode, open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, onClose: ((_d = appConfig.features) === null || _d === void 0 ? void 0 : _d.closeButton) ? handleDialogClose : undefined, animationDirection: animationDirection, open: open, error: error, loading: initialLoading, loaderColor: loaderColor, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: entityFeatureScreens.map(function (_a, index) {
                         var Element = _a.element, name = _a.name;
                         var isActive = activeScreen.name === name;
                         return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
@@ -71,7 +84,7 @@ export function EntityElement(props) {
 export function renderEntityLib(config, elementId) {
     var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
-    root.render(_jsx(EntityElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };
+    root.render(_jsx(EntityElement, __assign({}, config, { unmount: unmount })));
     return { unmount: unmount };
 }

package/build/features/entity/screens/EntityCapital/ActivityList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -11,12 +11,12 @@ export declare const NameContainer: import("@emotion/styled").StyledComponent<im
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("left" | "right" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSelected?: boolean | undefined;
     isAr?: boolean | undefined;
 }, {}, {}>;
 export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -27,7 +27,7 @@ export declare const InputLabelStyled: import("@emotion/styled").StyledComponent
     variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("left" | "right" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "bottom" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const MandatoryStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 interface ActivityListProps {
     onListOpen?: () => void;

package/build/features/entity/screens/EntityCapital/CapitalPaid.js

@@ -14,16 +14,18 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { settingsSelector } from '../../../../app/settings';
 import { formatNumberAsCurrency, removeAllCharsFromNumber } from '../../../../utils';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import { clearError, entitySelector } from '../../../app/entity/entityStore';
+import { clearError } from '../../../app/entity/entityStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
+import TextWithCurrency from '../../../../components/TextWithCurrency';
 var CapitalPaid = function (_a) {
     var _b;
     var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var data = useAppSelector(entitySelector).data;
+    var settingsData = useAppSelector(settingsSelector).data;
     var control = useFormContext().control;
     var dispatch = useAppDispatch();
     var handleChange = function (_a) {
@@ -36,8 +38,6 @@ var CapitalPaid = function (_a) {
     var capitalPaidControl = useController({ control: control, name: 'capitalPaid' });
     var capitalPaidValue = capitalPaidControl.field.value;
     var error = (_b = capitalPaidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('capital_paid_label', {
-                currency: t(data.currency)
-            }), required: true, onChange: handleChange, value: capitalPaidValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_paid_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalPaidValue, isVerified: isVerified }) }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: _jsx(TextWithCurrency, { text: t('capital_paid_input_label'), countryCode: settingsData.businessCountry.iso2 }), required: true, onChange: handleChange, value: capitalPaidValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_paid_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalPaidValue, isVerified: isVerified }) }) })));
 };
 export default React.memo(CapitalPaid);

package/build/features/entity/screens/EntityCapital/CapitalShareValue.js

@@ -15,15 +15,17 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { formatNumberAsCurrency, removeAllCharsFromNumber } from '../../../../utils';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { settingsSelector } from '../../../../app/settings';
 import { ScreenContainer } from '../../../shared/Containers';
 import Input from '../../../shared/Input';
-import { clearError, entitySelector } from '../../../app/entity/entityStore';
+import { clearError } from '../../../app/entity/entityStore';
 import { EndAdornment } from '../../../shared/EndAdornment';
+import TextWithCurrency from '../../../../components/TextWithCurrency';
 var CapitalShareValue = function (_a) {
     var _b;
     var readOnly = _a.readOnly, isVerified = _a.isVerified;
     var t = useTranslation().t;
-    var data = useAppSelector(entitySelector).data;
+    var settingsData = useAppSelector(settingsSelector).data;
     var control = useFormContext().control;
     var dispatch = useAppDispatch();
     var handleChange = function (_a) {
@@ -36,8 +38,6 @@ var CapitalShareValue = function (_a) {
     var capitalShareValueControl = useController({ control: control, name: 'capitalShareValue' });
     var capitalShareValueValue = capitalShareValueControl.field.value;
     var error = (_b = capitalShareValueControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: t('capital_share_value_label', {
-                currency: t(data.currency)
-            }), required: true, onChange: handleChange, value: capitalShareValueValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalShareValueValue, isVerified: isVerified }) }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: _jsx(Input, { readOnly: readOnly, label: _jsx(TextWithCurrency, { text: t('capital_share_value_input_label'), countryCode: settingsData.businessCountry.iso2 }), required: true, onChange: handleChange, value: capitalShareValueValue, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, placeholder: t('capital_share_value_hint'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: capitalShareValueValue, isVerified: isVerified }) }) })));
 };
 export default React.memo(CapitalShareValue);

package/build/features/entity/screens/EntityCapital/EntityCapital.js

@@ -15,11 +15,11 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
-import { useAppDispatch, useAppSelector, useDataNoneEditable, useFormReadOnly, useLanguage, useSetFromDefaultValues, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
-import { deepCopy, removeAllCharsFromNumber } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useDataNoneEditable, useFormReadOnly, useLanguage, useSetFromDefaultValues, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified, useFormDirtyCheck } from '../../../../hooks';
+import { deepCopy, formatNumberAsCurrency, removeAllCharsFromNumber, sendCustomEventToGTM } from '../../../../utils';
 import { clearError, entitySelector, updateEntityCapital } from '../../../app/entity/entityStore';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { ScreenContainer } from '../../../shared/Containers';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
@@ -39,21 +39,36 @@ var EntityCapital = function (_a) {
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
+    var settingsData = useAppSelector(settingsSelector).data;
     var _k = data.entityCapitalData, responseBody = _k.responseBody, capitalPaid = _k.capitalPaid, capitalShareCount = _k.capitalShareCount, capitalShareValue = _k.capitalShareValue, activities = _k.activities;
     var entity = (data.verify.responseBody || {}).entity;
-    var _l = entity || {}, data_verification = _l.data_verification, capital = _l.capital;
+    var _l = entity || {}, data_verification = _l.data_verification, capital = _l.capital, resActivities = _l.activities;
+    var resCapitalPaidValue = (_b = capital === null || capital === void 0 ? void 0 : capital.paid) === null || _b === void 0 ? void 0 : _b.toString();
+    var resCapitalShareCount = (_d = (_c = capital === null || capital === void 0 ? void 0 : capital.shares) === null || _c === void 0 ? void 0 : _c.count) === null || _d === void 0 ? void 0 : _d.toString();
+    var resCapitalShareValue = (_f = (_e = capital === null || capital === void 0 ? void 0 : capital.shares) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.toString();
     var methods = useForm({
         resolver: yupResolver(EntityCapitalValidationSchema()),
         defaultValues: {
             activities: activities,
             capitalPaid: capitalPaid,
-            capitalShareCount: capitalShareCount,
+            capitalShareCount: capitalShareCount === null || capitalShareCount === void 0 ? void 0 : capitalShareCount.toString(),
             capitalShareValue: capitalShareValue
         },
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.entityCapitalData, true);
     var watch = methods.watch;
+    var isDirty = useFormDirtyCheck(methods, {
+        activities: resActivities,
+        capitalPaid: resCapitalPaidValue && formatNumberAsCurrency(resCapitalPaidValue),
+        capitalShareCount: resCapitalShareCount,
+        capitalShareValue: resCapitalShareValue && formatNumberAsCurrency(resCapitalShareValue)
+    }, [
+        {
+            name: 'activities',
+            keys: ['id']
+        }
+    ]).isDirty;
     var originalReadOnly = useFormReadOnly(methods);
     var noneEditable = useDataNoneEditable(entity === null || entity === void 0 ? void 0 : entity.data_status, [
         'activities',
@@ -64,11 +79,20 @@ var EntityCapital = function (_a) {
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly, noneEditable);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
     var dataVerified = useDataVerified(data_verification, ['capital.paid', 'capital.shares.count', 'capital.shares.value']);
-    var isCapitalPaidVerified = dataVerified['capital.paid'] && ((_b = capital === null || capital === void 0 ? void 0 : capital.paid) === null || _b === void 0 ? void 0 : _b.toString()) === removeAllCharsFromNumber(watch('capitalPaid'));
-    var isCapitalShareCountVerified = dataVerified['capital.shares.count'] && ((_d = (_c = capital === null || capital === void 0 ? void 0 : capital.shares) === null || _c === void 0 ? void 0 : _c.count) === null || _d === void 0 ? void 0 : _d.toString()) === ((_e = watch('capitalShareCount')) === null || _e === void 0 ? void 0 : _e.toString());
-    var isCapitalShareValueVerified = dataVerified['capital.shares.value'] && ((_g = (_f = capital === null || capital === void 0 ? void 0 : capital.shares) === null || _f === void 0 ? void 0 : _f.value) === null || _g === void 0 ? void 0 : _g.toString()) === removeAllCharsFromNumber(watch('capitalShareValue'));
+    var isCapitalPaidVerified = dataVerified['capital.paid'] && resCapitalPaidValue === removeAllCharsFromNumber(watch('capitalPaid'));
+    var isCapitalShareCountVerified = dataVerified['capital.shares.count'] && resCapitalShareCount === ((_g = watch('capitalShareCount')) === null || _g === void 0 ? void 0 : _g.toString());
+    var isCapitalShareValueVerified = dataVerified['capital.shares.value'] && resCapitalShareValue === removeAllCharsFromNumber(watch('capitalShareValue'));
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Entity',
+            event_action: 'Entity Activities and Capital Details Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     var onSubmit = function (data) {
-        dispatch(updateEntityCapital(deepCopy(getFelids(data))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(data))), { isDirty: isDirty });
+        dispatch(updateEntityCapital(formData));
     };
     var onBack = function () {
         dispatch(handlePrevScreenStep());

package/build/features/entity/screens/EntityName/EntityName.js

@@ -15,9 +15,9 @@ import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { styled } from '@mui/material/styles';
-import { useAppDispatch, useAppSelector, useDataNoneEditable, useFormReadOnly, useLanguage, useSetFromDefaultValues, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useDataNoneEditable, useFormReadOnly, useLanguage, useSetFromDefaultValues, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified, useFormDirtyCheck } from '../../../../hooks';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
-import { convertToEnglishDateFormat, deepCopy, getFileDetailsFromDocument, isKW, isSA } from '../../../../utils';
+import { convertToEnglishDateFormat, deepCopy, getFileDetailsFromDocument, isKW, isSA, sendCustomEventToGTM } from '../../../../utils';
 import { BusinessType, DocumentPurpose } from '../../../../@types';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
@@ -38,22 +38,22 @@ var FormStyled = styled(Form)(function () { return ({
     flexDirection: 'column'
 }); });
 var EntityName = function (_a) {
-    var _b;
-    var _c = React.useState(false), issueAnchorEl = _c[0], setIssueAnchorEl = _c[1];
-    var _d = React.useState(false), expiryAnchorEl = _d[0], setExpiryAnchorEl = _d[1];
-    var _e = React.useState(false), entityTypeAnchorEl = _e[0], setEntityTypeAnchorEl = _e[1];
-    var _f = useAppSelector(entitySelector), data = _f.data, loading = _f.loading, error = _f.error, uploading = _f.uploading, uploadingArticle = _f.uploadingArticle;
+    var _b, _c;
+    var _d = React.useState(false), issueAnchorEl = _d[0], setIssueAnchorEl = _d[1];
+    var _e = React.useState(false), expiryAnchorEl = _e[0], setExpiryAnchorEl = _e[1];
+    var _f = React.useState(false), entityTypeAnchorEl = _f[0], setEntityTypeAnchorEl = _f[1];
+    var _g = useAppSelector(entitySelector), data = _g.data, loading = _g.loading, error = _g.error, uploading = _g.uploading, uploadingArticle = _g.uploadingArticle;
     var settingsData = useAppSelector(settingsSelector).data;
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
-    var _g = data.entityNameData, legalName = _g.legalName, licenseNumber = _g.licenseNumber, licenseType = _g.licenseType, entityType = _g.entityType, issuingDate = _g.issuingDate, expiryDate = _g.expiryDate, unifiedNumber = _g.unifiedNumber, certificateId = _g.certificateId, articleId = _g.articleId;
+    var _h = data.entityNameData, legalName = _h.legalName, licenseNumber = _h.licenseNumber, licenseType = _h.licenseType, entityType = _h.entityType, issuingDate = _h.issuingDate, expiryDate = _h.expiryDate, unifiedNumber = _h.unifiedNumber, certificateId = _h.certificateId, articleId = _h.articleId;
     var country_code = settingsData.businessCountry.iso2;
     var isSACountry = React.useMemo(function () { return isSA(country_code); }, [country_code]);
     var isKWCountry = React.useMemo(function () { return isKW(country_code); }, [country_code]);
     var isCR = licenseType === BusinessType.CR;
-    var _h = data.verify.responseBody || {}, entity = _h.entity, flows = _h.flows;
-    var _j = entity || {}, AOA_file = _j.AOA_file, id = _j.id, documents = _j.documents, data_status = _j.data_status, data_verification = _j.data_verification, legal_name = _j.legal_name, type = _j.type, license = _j.license;
+    var _j = data.verify.responseBody || {}, entity = _j.entity, flows = _j.flows, entityTypes = _j.entityTypes;
+    var _k = entity || {}, AOA_file = _k.AOA_file, id = _k.id, documents = _k.documents, data_status = _k.data_status, data_verification = _k.data_verification, legal_name = _k.legal_name, type = _k.type, license = _k.license;
     var getSchema = function () {
         if (isSACountry)
             return EntityNameValidationSchema();
@@ -80,6 +80,18 @@ var EntityName = function (_a) {
     useSetFromDefaultValues(methods, data.entityNameData, true);
     var defaultCertificateFiles = React.useMemo(function () { return getFileDetailsFromDocument(documents, DocumentPurpose.CR); }, [documents]);
     var defaultArticleFile = React.useMemo(function () { return AOA_file && __assign(__assign({}, AOA_file), { docId: id }); }, [AOA_file]);
+    var issueDateRes = (license === null || license === void 0 ? void 0 : license.issuing_date) && convertToEnglishDateFormat(new Date(license.issuing_date));
+    var expDateRes = (license === null || license === void 0 ? void 0 : license.expiry_date) && convertToEnglishDateFormat(new Date(license.expiry_date));
+    var isDirty = useFormDirtyCheck(methods, {
+        legalName: (legal_name === null || legal_name === void 0 ? void 0 : legal_name.en) || (legal_name === null || legal_name === void 0 ? void 0 : legal_name.ar),
+        licenseNumber: license === null || license === void 0 ? void 0 : license.number,
+        licenseType: (license === null || license === void 0 ? void 0 : license.type) === 'freelance' ? BusinessType.FL : BusinessType.CR,
+        entityType: type || (entityTypes === null || entityTypes === void 0 ? void 0 : entityTypes[0]),
+        issuingDate: issueDateRes,
+        expiryDate: expDateRes,
+        unifiedNumber: (_b = license === null || license === void 0 ? void 0 : license.additional_info) === null || _b === void 0 ? void 0 : _b.unified_number,
+        articleId: defaultArticleFile === null || defaultArticleFile === void 0 ? void 0 : defaultArticleFile.id
+    }).isDirty;
     var originalReadOnly = useFormReadOnly(methods, { certificateId: defaultCertificateFiles, articleId: defaultArticleFile });
     var noneEditable = useDataNoneEditable(data_status, [
         'legal_name.en',
@@ -104,17 +116,16 @@ var EntityName = function (_a) {
         'license.expiry_date',
         'AOA_file_id'
     ]);
-    var issueDateRes = (license === null || license === void 0 ? void 0 : license.issuing_date) && convertToEnglishDateFormat(new Date(license.issuing_date));
-    var expDateRes = (license === null || license === void 0 ? void 0 : license.expiry_date) && convertToEnglishDateFormat(new Date(license.expiry_date));
     var isLegalNameVerified = dataVerified['legal_name.en'] && dataVerified['legal_name.ar'] && ((legal_name === null || legal_name === void 0 ? void 0 : legal_name.en) === watch('legalName') || (legal_name === null || legal_name === void 0 ? void 0 : legal_name.ar) === watch('legalName'));
     var isEntityTypeVerified = dataVerified['type'] && type === watch('entityType');
     var isLicenseNumberVerified = dataVerified['license.number'] && (license === null || license === void 0 ? void 0 : license.number) === watch('licenseNumber');
-    var isUnifiedNumberVerified = dataVerified['license.additional_info'] && ((_b = license === null || license === void 0 ? void 0 : license.additional_info) === null || _b === void 0 ? void 0 : _b.unified_number) === watch('unifiedNumber');
+    var isUnifiedNumberVerified = dataVerified['license.additional_info'] && ((_c = license === null || license === void 0 ? void 0 : license.additional_info) === null || _c === void 0 ? void 0 : _c.unified_number) === watch('unifiedNumber');
     var isIssuingDateVerified = dataVerified['license.issuing_date'] && issueDateRes === watch('issuingDate');
     var isExpiryDateVerified = dataVerified['license.expiry_date'] && expDateRes === watch('expiryDate');
     var isArticleIdVerified = dataVerified['AOA_file_id'];
     var onSubmit = function (data) {
-        dispatch(updateEntityName(deepCopy(getFelids(data))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(data))), { isDirty: isDirty });
+        dispatch(updateEntityName(formData));
     };
     var handleIssueDateOpenClose = function (flag) {
         setIssueAnchorEl(flag);
@@ -126,6 +137,12 @@ var EntityName = function (_a) {
         setEntityTypeAnchorEl(flag);
     };
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Entity',
+            event_action: 'Entity Details Back button',
+            event_label: settingsData.businessCountry.iso2
+        });
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0) {
             dispatch(handlePrevScreenStep());
             return;