@tap-payments/auth-jsconnect 2.8.59-beta → 2.8.59-sandbox

package/build/features/bank/Bank.js

@@ -36,7 +36,7 @@ import { bankFeatureScreens } from '../featuresScreens';
 import { bankSelector, verifyLeadToken } from '../app/bank/bankStore';
 import Background from '../shared/Background';
 var Bank = memo(function (_a) {
-    var verifyToken = _a.verifyToken, configToken = _a.configToken, props = __rest(_a, ["verifyToken", "configToken"]);
+    var verifyToken = _a.verifyToken, configToken = _a.configToken, loaderColor = _a.loaderColor, props = __rest(_a, ["verifyToken", "configToken", "loaderColor"]);
     var theme = useAppTheme().theme;
     var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
     var _c = useAppSelector(bankSelector), customLoading = _c.customLoading, loading = _c.loading, bankError = _c.error;
@@ -55,11 +55,14 @@ var Bank = memo(function (_a) {
         loadingScreenName: 'BANK_LOADING_DATA_STEP',
         navigation: featureScreensNavigation,
         open: open,
+        mode: props.mode,
         internalToken: verifyToken,
-        settingLoading: settingLoading
+        settingLoading: settingLoading,
+        operatorErrorScreenName: 'BANK_OPERATOR_ERROR_STEP',
+        isValidOperator: data.isValidOperator
     });
-    var initialLoading = verifyToken ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, error: error, open: open, 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({ isMaturityExpress: isMaturityExpress }, { children: bankFeatureScreens.map(function (_a, index) {
+    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, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, loaderColor: loaderColor, 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: bankFeatureScreens.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));

package/build/features/bank/screens/BankDetails/BankDetails.js

@@ -16,7 +16,7 @@ import Beneficiary from './Beneficiary';
 import IBAN from './IBAN';
 import BankName from './BankName';
 import Button from '../../../shared/Button';
-import { useAppDispatch, useAppSelector, useFormReadOnly, useSetFromDefaultValues, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useFormReadOnly, useSetFromDefaultValues, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified, useFormDirtyCheck } from '../../../../hooks';
 import { BankKWFLValidation, BankValidation } from './validation';
 import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -29,7 +29,7 @@ import Form from '../../../../components/Form';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import ConfirmPolicy from './ConfirmPolicy';
 import BankStatement from './BankStatement';
-import { deepCopy, getFileDetailsFromDocument, isKW, isStringHasOneAsterisk } from '../../../../utils';
+import { deepCopy, getFileDetailsFromDocument, isKW, isStringHasOneAsterisk, sendCustomEventToGTM } from '../../../../utils';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column',
@@ -50,7 +50,7 @@ var BankDetails = function () {
     var _e = data.bankData, iban = _e.iban, beneficiaryName = _e.beneficiaryName, bankName = _e.bankName, bankStatementId = _e.bankStatementId, bankStatementUploading = _e.uploading, confirmPolicy = _e.confirmPolicy;
     var verify = data.verify;
     var _f = verify.responseBody || {}, bank_account = _f.bank_account, entity = _f.entity, flows = _f.flows;
-    var _g = bank_account || {}, document = _g.document, data_status = _g.data_status, data_verification = _g.data_verification, beneficiary_name = _g.beneficiary_name, resIban = _g.iban, bank_name = _g.bank_name;
+    var _g = bank_account || {}, document = _g.document, data_status = _g.data_status, data_verification = _g.data_verification, beneficiary_name = _g.beneficiary_name, resIban = _g.iban, bank_name = _g.bank_name, is_acknowledged = _g.is_acknowledged;
     var isKWCountry = React.useMemo(function () { return isKW(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var isFL = ((_a = entity === null || entity === void 0 ? void 0 : entity.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === BusinessType.FL ? true : false;
     var bankHasDocument = ((_b = document === null || document === void 0 ? void 0 : document.file_details) === null || _b === void 0 ? void 0 : _b.length) > 0;
@@ -71,13 +71,19 @@ var BankDetails = function () {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Wallet',
+            event_action: 'Wallet Details Back button',
+            event_label: settingsData.businessCountry.iso2
+        });
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0) {
             dispatch(handlePrevScreenStep());
             return;
         }
         dispatch(retrieveBoardStatus());
     };
-    var disabled = ibanChecking || !methods.formState.isValid || !!error || bankStatementUploading;
+    var disabled = ibanChecking || !methods.formState.isValid || bankStatementUploading;
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -101,9 +107,16 @@ var BankDetails = function () {
     var isBeneficiaryNameVerified = dataVerified['beneficiary_name'] && beneficiary_name === methods.watch('beneficiaryName');
     var isIBANVerified = dataVerified['iban'] && resIban === methods.watch('iban');
     var isBankNameVerified = dataVerified['bank_name'] && bank_name === methods.watch('bankName');
+    var isDirty = useFormDirtyCheck(methods, {
+        iban: resIban,
+        beneficiaryName: beneficiary_name,
+        bankName: bank_name,
+        confirmPolicy: is_acknowledged
+    }).isDirty;
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
     var onSubmit = function (data) {
-        dispatch(createBankAccount(deepCopy(getFelids(data))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(data))), { isDirty: isDirty });
+        dispatch(createBankAccount(formData));
     };
     var disableBack = settingsData.appConfig.mode === 'content';
     return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, { readOnly: readOnly['beneficiaryName'] || noneEditable['beneficiary_name'], isVerified: isBeneficiaryNameVerified }), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking, readOnly: readOnly['iban'] || noneEditable['iban'], isVerified: isIBANVerified }), _jsx(BankName, { readOnly: readOnly['bankName'] || noneEditable['bank_name'], isVerified: isBankNameVerified }), _jsx(BankStatement, { isVerified: dataVerified['document'], required: isKWCountry && isFL && !bankHasDocument, defaultFiles: defaultBankFiles, readOnly: readOnly['bankStatementId'] || noneEditable['bank_statement_file_id'] }), _jsx(ConfirmPolicy, { readOnly: readOnly['confirmPolicy'] || noneEditable['is_acknowledged'] }), _jsx(ButtonStyled, __assign({ disableBack: disableBack, onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));

package/build/features/bank/screens/OperatorError/OperatorError.d.ts

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

package/build/features/bank/screens/OperatorError/OperatorError.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import GenericError from '../../../shared/GenericError';
+var OperatorError = function (_a) {
+    var t = useTranslation().t;
+    return _jsx(GenericError, { error: t('operator_is_invalid'), errorTitle: t('oops') });
+};
+export default React.memo(OperatorError);

package/build/features/bank/screens/OperatorError/index.d.ts

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

package/build/features/bank/screens/OperatorError/index.js

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

package/build/features/bank/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -25,6 +25,6 @@ var SuccessWithFlowButtons = function () {
     var onClose = function () {
         dispatch(onCloseCompleteBank());
     };
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined, status: board_status }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined, recipient: recipient, status: board_status }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/bank/screens/Verify/Verify.js

@@ -46,9 +46,9 @@ var FormStyled = styled(Form)(function () { return ({
     flexDirection: 'column'
 }); });
 var VerifyNumber = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var dispatch = useAppDispatch();
-    var _e = useAppSelector(bankSelector), data = _e.data, loading = _e.loading, error = _e.error;
+    var _d = useAppSelector(bankSelector), data = _d.data, loading = _d.loading, error = _d.error;
     var methods = useForm({
         resolver: yupResolver(OTPValidation),
         defaultValues: data.otpData,
@@ -56,8 +56,8 @@ var VerifyNumber = function (_a) {
     });
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var _f = React.useState(false), resendLoading = _f[0], setResendLoading = _f[1];
-    var phone = (_d = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.contact) === null || _c === void 0 ? void 0 : _c.phone) === null || _d === void 0 ? void 0 : _d.number;
+    var _e = React.useState(false), resendLoading = _e[0], setResendLoading = _e[1];
+    var phone = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.verification_by) === null || _c === void 0 ? void 0 : _c.sent_to;
     React.useEffect(function () {
         if (error && methods.formState.isValid && phone)
             dispatch(clearError());
@@ -68,7 +68,7 @@ var VerifyNumber = function (_a) {
     var onSubmit = function (formData) {
         dispatch(verifyBankLeadOTP(deepCopy(formData)));
     };
-    var disabled = !methods.formState.isValid || !!error || !phone || resendLoading;
+    var disabled = !methods.formState.isValid || !phone || resendLoading;
     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') : t('ide_opt_sent_title'), !loading && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, { loading: resendLoading, setLoading: setResendLoading }), _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(VerifyNumber);

package/build/features/board/Board.js

@@ -52,11 +52,15 @@ var Board = memo(function (_a) {
         });
     }, []);
     React.useEffect(function () {
-        if (data.isValidOperator && props.open && !settingLoading) {
-            dispatch(createVerifyTokenBy(boardId));
-            if (props.mode === 'content')
-                dispatch(handleCurrentActiveScreen('BOARD_SUCCESS_FLOWS_BUTTONS_STEP'));
+        if (settingLoading || !props.open)
+            return;
+        if (!data.isValidOperator) {
+            dispatch(handleCurrentActiveScreen('BOARD_OPERATOR_ERROR_STEP'));
+            return;
         }
+        dispatch(createVerifyTokenBy(boardId));
+        if (props.mode === 'content')
+            dispatch(handleCurrentActiveScreen('BOARD_SUCCESS_FLOWS_BUTTONS_STEP'));
     }, [data.isValidOperator, settingLoading]);
     var initialLoading = 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, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: !isTapDomain(props.merchantDomain), loaderColor: loaderColor, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ isMaturityExpress: !isTapDomain(props.merchantDomain) }, { children: boardFeatureScreens.map(function (_a, index) {

package/build/features/board/screens/OperatorError/OperatorError.d.ts

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

package/build/features/board/screens/OperatorError/OperatorError.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import GenericError from '../../../shared/GenericError';
+var OperatorError = function (_a) {
+    var t = useTranslation().t;
+    return _jsx(GenericError, { error: t('operator_is_invalid'), errorTitle: t('oops') });
+};
+export default React.memo(OperatorError);

package/build/features/board/screens/OperatorError/index.d.ts

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

package/build/features/board/screens/OperatorError/index.js

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

package/build/features/board/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js

@@ -12,16 +12,15 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { settingsSelector } from '../../../../app/settings';
-import { useAppSelector, useAppDispatch } from '../../../../hooks';
+import { useAppSelector } from '../../../../hooks';
 import { SCOPE_AUTH } from '../../../../constants';
 import { boardSelector } from '../../../app/board/boardStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
-    var dispatch = useAppDispatch();
     var _a = useAppSelector(boardSelector), data = _a.data, loading = _a.loading;
     var settingsData = useAppSelector(settingsSelector).data;
     var isScopeAuthentication = settingsData.appConfig.scope === SCOPE_AUTH;
-    var _b = data.verify.responseBody || {}, flows = _b.flows, entity = _b.entity, brand = _b.brand, bank = _b.bank_account, merchant = _b.merchant, user = _b.user, business = _b.business, board_id = _b.board_id, board_info_id = _b.board_info_id, name = _b.name, individuals = _b.individuals, board_status = _b.board_status;
+    var _b = data.verify.responseBody || {}, flows = _b.flows, entity = _b.entity, brand = _b.brand, bank = _b.bank_account, merchant = _b.merchant, user = _b.user, business = _b.business, board_id = _b.board_id, board_info_id = _b.board_info_id, name = _b.name, individuals = _b.individuals, recipient = _b.recipient, board_status = _b.board_status;
     var onClose = function () {
         var url = settingsData.appConfig.redirectUrl;
         if (!url)
@@ -30,6 +29,6 @@ var SuccessWithFlowButtons = function () {
         newUrl.searchParams.append('action', 'close');
         window.open("".concat(newUrl), '_self', '_blank');
     };
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined, status: board_status }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, loading: loading, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, individuals: individuals, flows: flows || [], onClose: isScopeAuthentication ? onClose : undefined, recipient: recipient, status: board_status }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/brand/Brand.d.ts

@@ -2,6 +2,7 @@ import { LibConfig } from '../../@types';
 export interface BrandLibProps extends LibConfig {
     verifyToken?: string;
     configToken?: string;
+    loaderColor?: string;
 }
 export declare function BrandElement(props: BrandLibProps): import("react/jsx-runtime").JSX.Element;
 export declare function renderBrandLib(config: BrandLibProps, elementId: string): {

package/build/features/brand/Brand.js

@@ -36,7 +36,7 @@ import { brandFeatureScreens } from '../featuresScreens';
 import { brandSelector, verifyLeadToken } from '../app/brand/brandStore';
 import Background from '../shared/Background';
 var Brand = memo(function (_a) {
-    var verifyToken = _a.verifyToken, configToken = _a.configToken, props = __rest(_a, ["verifyToken", "configToken"]);
+    var verifyToken = _a.verifyToken, configToken = _a.configToken, loaderColor = _a.loaderColor, props = __rest(_a, ["verifyToken", "configToken", "loaderColor"]);
     var theme = useAppTheme().theme;
     var _b = useAppSelector(settingsSelector), data = _b.data, error = _b.error, settingLoading = _b.loading;
     var _c = useAppSelector(brandSelector), customLoading = _c.customLoading, loading = _c.loading, brandError = _c.error;
@@ -55,11 +55,14 @@ var Brand = memo(function (_a) {
         loadingScreenName: 'BRAND_LOADING_DATA_STEP',
         navigation: featureScreensNavigation,
         open: open,
+        mode: props.mode,
         internalToken: verifyToken,
-        settingLoading: settingLoading
+        settingLoading: settingLoading,
+        operatorErrorScreenName: 'BRAND_OPERATOR_ERROR_STEP',
+        isValidOperator: data.isValidOperator
     });
-    var initialLoading = verifyToken ? settingLoading : settingLoading || customLoading;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Background, __assign({ open: open, isTapOrigin: isTapOrigin, loading: initialLoading }, { children: _jsx(AnimationFlow, __assign({ pointerEvents: loading ? 'none' : 'auto', isTapOrigin: isTapOrigin, loading: initialLoading, error: error, open: open, 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({ isMaturityExpress: isMaturityExpress }, { children: brandFeatureScreens.map(function (_a, index) {
+    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, loading: initialLoading, error: error, open: open, breakpoint: 'sm', screenId: activeScreen.name, merchantInfo: merchant, isMaturityExpress: isMaturityExpress, loaderColor: loaderColor, type: props.mode === 'content' ? 'CONTENT' : undefined, dialogEdgeFormat: data.appConfig.dialogEdgeFormat, features: appConfig.features }, { children: _jsx(FeatureContainer, __assign({ mode: props.mode, isMaturityExpress: isMaturityExpress }, { children: brandFeatureScreens.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));

package/build/features/brand/screens/BrandActivities/ActivitiesList.d.ts

@@ -1,49 +1,22 @@
 import * as React from 'react';
 export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & 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>, {}>;
-export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "info" | "success" | "action" | "primary" | "secondary" | "warning" | undefined;
-    fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "info" | "success" | "action" | "primary" | "secondary" | "warning" | undefined;
-    fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
-    htmlColor?: string | undefined;
-    inheritViewBox?: boolean | undefined;
-    shapeRendering?: string | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    titleAccess?: string | undefined;
-    viewBox?: string | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const LabelContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    children?: React.ReactNode;
-    component?: React.ElementType<any> | undefined;
-    ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "className" | "style" | "classes" | "color" | "fontSize" | "shapeRendering" | "children" | "sx" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LabelContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, ("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" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSelected: boolean;

package/build/features/brand/screens/BrandActivities/BrandActivities.js

@@ -15,13 +15,13 @@ import { ScreenContainer } from '../../../shared/Containers';
 import { FormProvider, useForm } from 'react-hook-form';
 import Form from '../../../../components/Form';
 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 { yupResolver } from '@hookform/resolvers/yup';
 import { BrandActivitiesValidationSchema } from './validation';
 import Button from '../../../shared/Button';
 import { brandSelector, updateBrandActivities } from '../../../app/brand/brandStore';
-import { handlePrevScreenStep } from '../../../../app/settings';
-import { deepCopy } from '../../../../utils';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
+import { deepCopy, sendCustomEventToGTM } from '../../../../utils';
 import { useTranslation } from 'react-i18next';
 import ActivitiesList from './ActivitiesList';
 import CustomerBase from './CustomerBase';
@@ -36,11 +36,12 @@ var FormStyled = styled(Form)(function () { return ({
     flexDirection: 'column'
 }); });
 var BrandActivities = function (_a) {
-    var _b, _c, _d, _e, _f;
-    var _g = React.useState(), listActive = _g[0], setListActive = _g[1];
+    var _b, _c, _d, _e;
+    var _f = React.useState(), listActive = _f[0], setListActive = _f[1];
     var dispatch = useAppDispatch();
-    var _h = useAppSelector(brandSelector), data = _h.data, loading = _h.loading, error = _h.error;
-    var _j = data.brandActivities, activities = _j.activities, customerLocations = _j.customerLocations, expectedCustomer = _j.expectedCustomer, expectedSale = _j.expectedSale, termAndConditionChecked = _j.termAndConditionChecked, refundPolicy = _j.refundPolicy, transactionPolicy = _j.transactionPolicy;
+    var settingsData = useAppSelector(settingsSelector).data;
+    var _g = useAppSelector(brandSelector), data = _g.data, loading = _g.loading, error = _g.error;
+    var _h = data.brandActivities, activities = _h.activities, customerLocations = _h.customerLocations, expectedCustomer = _h.expectedCustomer, expectedSale = _h.expectedSale, termAndConditionChecked = _h.termAndConditionChecked, refundPolicy = _h.refundPolicy, transactionPolicy = _h.transactionPolicy;
     var ListType;
     (function (ListType) {
         ListType["ActivitiesList"] = "ActivitiesList";
@@ -48,6 +49,14 @@ var BrandActivities = function (_a) {
         ListType["ExpectedCustomerList"] = "ExpectedCustomerList";
         ListType["ExpectedSalesList"] = "ExpectedSalesList";
     })(ListType || (ListType = {}));
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Brand',
+            event_action: 'Update Brand Activities Details Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     var methods = useForm({
         resolver: yupResolver(BrandActivitiesValidationSchema()),
         defaultValues: {
@@ -62,7 +71,8 @@ var BrandActivities = function (_a) {
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.brandActivities, true);
-    var _k = ((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.brand) || {}, data_status = _k.data_status, data_verification = _k.data_verification, operations = _k.operations;
+    var _j = data.verify.responseBody || {}, activitiesDefaultValues = _j.activitiesDefaultValues, brand = _j.brand;
+    var _k = brand || {}, data_status = _k.data_status, data_verification = _k.data_verification, operations = _k.operations;
     var originalReadOnly = useFormReadOnly(methods);
     var noneEditable = useDataNoneEditable(data_status, [
         'activities',
@@ -78,6 +88,32 @@ var BrandActivities = function (_a) {
         'operations.sales_range'
     ]);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
+    var isDirty = useFormDirtyCheck(methods, {
+        activities: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.activities,
+        customerLocations: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.customerLocations,
+        expectedCustomer: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.expectedCustomer,
+        expectedSale: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.expectedSale,
+        termAndConditionChecked: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.termAndConditionChecked,
+        refundPolicy: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.transactionPolicy,
+        transactionPolicy: activitiesDefaultValues === null || activitiesDefaultValues === void 0 ? void 0 : activitiesDefaultValues.refundPolicy
+    }, [
+        {
+            name: 'activities',
+            keys: ['id']
+        },
+        {
+            name: 'customerLocations',
+            keys: ['id']
+        },
+        {
+            name: 'expectedCustomer',
+            keys: ['id']
+        },
+        {
+            name: 'expectedSale',
+            keys: ['id']
+        }
+    ]).isDirty;
     var locations = methods.watch('customerLocations');
     var isCustomerLocationsHasVerifiedValue = React.useMemo(function () {
         var _a, _b;
@@ -92,10 +128,11 @@ var BrandActivities = function (_a) {
         return (locationIds === null || locationIds === void 0 ? void 0 : locationIds.length) === (Ids === null || Ids === void 0 ? void 0 : Ids.length) && locationIds.every(function (locationId) { return Ids.includes(locationId); });
     }, [locations, operations]);
     var isCustomerLocationsVerified = dataVerified['operations.customer_base_location'] && isCustomerLocationsHasVerifiedValue;
-    var isExpectedSalesRangeVerified = dataVerified['operations.sales_range'] && ((_c = operations === null || operations === void 0 ? void 0 : operations.sales) === null || _c === void 0 ? void 0 : _c.id) === ((_d = methods.watch('expectedSale')) === null || _d === void 0 ? void 0 : _d.id);
-    var isExpectedCustomersVerified = dataVerified['operations.customer_base'] && ((_e = operations === null || operations === void 0 ? void 0 : operations.customer_base) === null || _e === void 0 ? void 0 : _e.id) === ((_f = methods.watch('expectedCustomer')) === null || _f === void 0 ? void 0 : _f.id);
+    var isExpectedSalesRangeVerified = dataVerified['operations.sales_range'] && ((_b = operations === null || operations === void 0 ? void 0 : operations.sales) === null || _b === void 0 ? void 0 : _b.id) === ((_c = methods.watch('expectedSale')) === null || _c === void 0 ? void 0 : _c.id);
+    var isExpectedCustomersVerified = dataVerified['operations.customer_base'] && ((_d = operations === null || operations === void 0 ? void 0 : operations.customer_base) === null || _d === void 0 ? void 0 : _d.id) === ((_e = methods.watch('expectedCustomer')) === null || _e === void 0 ? void 0 : _e.id);
     var onSubmit = function (data) {
-        dispatch(updateBrandActivities(deepCopy(getFelids(data))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(data))), { isDirty: isDirty });
+        dispatch(updateBrandActivities(formData));
     };
     var onBack = function () {
         dispatch(handlePrevScreenStep());
@@ -105,7 +142,7 @@ var BrandActivities = function (_a) {
     };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var disabled = !methods.formState.isValid || !!error;
+    var disabled = !methods.formState.isValid;
     var isActivitiesListActive = listActive === ListType.ActivitiesList;
     var isCustomerBaseListActive = listActive === ListType.CustomerBaseList;
     var isExpectedCustomerListActive = listActive === ListType.ExpectedCustomerList;

package/build/features/brand/screens/BrandActivities/CustomerBase.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const BaseLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "classes" | "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"> & {
+}, "className" | "style" | "classes" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: React.ElementType<any> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSelected?: boolean | undefined;

package/build/features/brand/screens/BrandActivities/ExpectedSalesRange.js

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { isExist } from '../../../../utils';
+import { getCurrencyByCountryIso2, isExist } from '../../../../utils';
 import { useLanguage, useAppSelector, useAppDispatch } from '../../../../hooks';
 import { settingsSelector } from '../../../../app/settings';
 import SimpleList from '../../../../components/SimpleList';
@@ -68,7 +68,7 @@ var ExpectedSalesRange = function (_a) {
     var expectedSaleControl = useController({ name: 'expectedSale', control: control });
     var _g = useAppSelector(brandSelector), data = _g.data, error = _g.error;
     var settingsData = useAppSelector(settingsSelector).data;
-    var brandActivities = data.brandActivities, currency = data.currency;
+    var brandActivities = data.brandActivities;
     var expectedSales = (brandActivities.responseBody || {}).expectedSales;
     var expectedSalesRangeValue = expectedSaleControl.field.value;
     var countryCode = settingsData.businessCountry;
@@ -95,6 +95,9 @@ var ExpectedSalesRange = function (_a) {
     var handleCloseSubMenu = function () {
         setSubIndex('');
     };
+    var getCurrency = React.useMemo(function () {
+        return t(getCurrencyByCountryIso2(countryCode.iso2));
+    }, [countryCode.iso2]);
     React.useEffect(function () {
         if ((expectedSales === null || expectedSales === void 0 ? void 0 : expectedSales.length) > 0) {
             setExpectedSalesRangeList(expectedSales);
@@ -124,7 +127,7 @@ var ExpectedSalesRange = function (_a) {
             setSubIndex(item.id);
     }, [anchorEl, expectedSalesRangeValue]);
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(InputLabelStyled, { children: [t('expected_sales_monthly', {
-                            currency: t(currency)
+                            currency: getCurrency
                         }), _jsx(MandatoryStyled, { children: "*" })] }), _jsx(InputStyled, { readOnly: readOnly, value: isAr ? (_b = expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.name.ar) !== null && _b !== void 0 ? _b : '' : (_c = expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.name.en) !== null && _c !== void 0 ? _c : '', onClick: !!anchorEl ? handleCloseMainMenu : handleOpenMainMenu, placeholder: t('choose_expected_sales'), endAdornment: _jsx(EndAdornmentExpanded, { anchorEl: anchorEl, isVerified: isVerified }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { sx: { maxHeight: '350px', paddingTop: 0 }, list: expectedSalesRangeList, listItemProps: { sx: { padding: 0 } }, onSelectItem: function (item) {
                                 var isOnlyOneItem = !item.sub || item.sub.length === 1;
                                 if (isOnlyOneItem)