@tap-payments/auth-jsconnect 2.8.45-test → 2.8.49-development

package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.js

@@ -17,9 +17,9 @@ import { useTranslation } from 'react-i18next';
 import { handleCurrentActiveScreen, settingsSelector } from '../../../../app/settings';
 import Box from '@mui/material/Box';
 import { alpha, styled } from '@mui/material/styles';
-import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
+import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified, useFormDirtyCheck } from '../../../../hooks';
 import { DocumentPurpose, IndividualType } from '../../../../@types';
-import { deepCopy, getIndividualType, isKW, isKWOrSA } from '../../../../utils';
+import { deepCopy, getIndividualType, isKW, isKWOrSA, sendCustomEventToGTM } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
@@ -53,16 +53,16 @@ var ListType;
     ListType["OccupationList"] = "OccupationList";
 })(ListType || (ListType = {}));
 var AdditionalIndividualInfo = function (_a) {
-    var _b;
+    var _b, _c, _d, _e;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var _c = useAppSelector(individualSelector), data = _c.data, loading = _c.loading, error = _c.error;
+    var _f = useAppSelector(individualSelector), data = _f.data, loading = _f.loading, error = _f.error;
     var settingsData = useAppSelector(settingsSelector).data;
     var verify = data.verify;
     var user = (verify.responseBody || {}).user;
-    var _d = data.individualData, occupation = _d.occupation, sourceIncome = _d.sourceIncome, monthlyIncome = _d.monthlyIncome, employerName = _d.employerName, isPEP = _d.isPEP, isInfluencer = _d.isInfluencer, civilID = _d.civilID, signatureFileId = _d.signatureFileId, civilIDUploading = _d.civilIDUploading, signatureFileUploading = _d.signatureFileUploading, shareCount = _d.shareCount, shareValue = _d.shareValue, isAuthorized = _d.isAuthorized;
-    var _e = user || {}, documents = _e.documents, is_authorized = _e.is_authorized, data_status = _e.data_status, data_verification = _e.data_verification, names = _e.names, role = _e.role, occupationRes = _e.occupation, is_relative_PEP = _e.is_relative_PEP, is_influencer = _e.is_influencer, objects = _e.objects;
+    var _g = data.individualData, occupation = _g.occupation, sourceIncome = _g.sourceIncome, monthlyIncome = _g.monthlyIncome, employerName = _g.employerName, isPEP = _g.isPEP, isInfluencer = _g.isInfluencer, civilID = _g.civilID, signatureFileId = _g.signatureFileId, civilIDUploading = _g.civilIDUploading, signatureFileUploading = _g.signatureFileUploading, shareCount = _g.shareCount, shareValue = _g.shareValue, isAuthorized = _g.isAuthorized;
+    var _h = user || {}, documents = _h.documents, is_authorized = _h.is_authorized, data_status = _h.data_status, data_verification = _h.data_verification, names = _h.names, role = _h.role, occupationRes = _h.occupation, source_income = _h.source_income, monthly_income = _h.monthly_income, shares = _h.shares, is_relative_PEP = _h.is_relative_PEP, is_influencer = _h.is_influencer, objects = _h.objects;
     var isKWCountry = React.useMemo(function () { return isKW(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var isOtherThanKWAndSa = React.useMemo(function () { return !isKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var showIsAuthorized = isOtherThanKWAndSa;
@@ -95,6 +95,30 @@ var AdditionalIndividualInfo = function (_a) {
         civilID: defaultCivilIdFiles,
         signatureFileId: defaultSignatureFiles
     });
+    var isDirty = useFormDirtyCheck(methods, {
+        occupation: ((_b = occupationRes === null || occupationRes === void 0 ? void 0 : occupationRes.chapter) === null || _b === void 0 ? void 0 : _b.id) && { id: occupationRes.chapter.id },
+        sourceIncome: source_income === null || source_income === void 0 ? void 0 : source_income[0],
+        monthlyIncome: monthly_income,
+        employerName: '',
+        isPEP: is_relative_PEP,
+        isInfluencer: is_influencer,
+        shareCount: (_c = shares === null || shares === void 0 ? void 0 : shares.count) === null || _c === void 0 ? void 0 : _c.toString(),
+        shareValue: (_d = shares === null || shares === void 0 ? void 0 : shares.value) === null || _d === void 0 ? void 0 : _d.toString(),
+        isAuthorized: is_authorized
+    }, [
+        {
+            name: 'occupation',
+            keys: ['id']
+        },
+        {
+            name: 'sourceIncome',
+            keys: ['id']
+        },
+        {
+            name: 'monthlyIncome',
+            keys: ['id']
+        }
+    ]).isDirty;
     var noneEditable = useDataNoneEditable(data_status, [
         'occupation',
         'source_of_income',
@@ -106,13 +130,22 @@ var AdditionalIndividualInfo = function (_a) {
     var readOnly = useFormErrorAndUpdateReadOnly(methods, originalReadOnly, noneEditable);
     var getFelids = useExcludeReadOnlyFelids(methods, readOnly).getFelids;
     var dataVerified = useDataVerified(data_verification, ['occupation', 'is_relative_PEP', 'is_influencer']);
-    var isOccupationVerified = dataVerified['occupation'] && (occupationRes === null || occupationRes === void 0 ? void 0 : occupationRes.id) === ((_b = watch('occupation')) === null || _b === void 0 ? void 0 : _b.id);
+    var isOccupationVerified = dataVerified['occupation'] && (occupationRes === null || occupationRes === void 0 ? void 0 : occupationRes.id) === ((_e = watch('occupation')) === null || _e === void 0 ? void 0 : _e.id);
     var isPEPSwitchVerified = dataVerified['is_relative_PEP'] && is_relative_PEP === watch('isPEP');
     var isInfluencerSwitchVerified = dataVerified['is_influencer'] && is_influencer === watch('isInfluencer');
     var isAuthorizedSwitchVerified = dataVerified['is_authorized'] && is_authorized === watch('isAuthorized');
-    var _f = React.useState(), listActive = _f[0], setListActive = _f[1];
+    var _j = React.useState(), listActive = _j[0], setListActive = _j[1];
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Individual',
+            event_action: 'Income Details Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     var onSubmit = function (data) {
-        dispatch(updateIndividualInfo(deepCopy(getFelids(__assign(__assign({}, data), { signatureFileUploading: signatureFileUploading, civilIDUploading: civilIDUploading })))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(__assign(__assign({}, data), { signatureFileUploading: signatureFileUploading, civilIDUploading: civilIDUploading })))), { isDirty: isDirty });
+        dispatch(updateIndividualInfo(formData));
     };
     var onBack = function () {
         dispatch(handleCurrentActiveScreen('INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP'));
@@ -137,7 +170,7 @@ var AdditionalIndividualInfo = function (_a) {
             return t('type_board_member');
         return t('type_user');
     };
-    var _g = React.useMemo(function () { return getIndividualType(objects); }, [objects]), isUser = _g.isUser, isShareholder = _g.isShareholder, isBoardMember = _g.isBoardMember, isBuyer = _g.isBuyer;
+    var _k = React.useMemo(function () { return getIndividualType(objects); }, [objects]), isUser = _k.isUser, isShareholder = _k.isShareholder, isBoardMember = _k.isBoardMember, isBuyer = _k.isBuyer;
     var isUserORBuyerType = isUser || isBuyer;
     var isUserORBoardMemberType = isUser || isBoardMember;
     var isAuthorizedValue = watch('isAuthorized');

package/build/features/individual/screens/IndividualList/IndividualList.js

@@ -20,6 +20,7 @@ import Collapse from '../../../../components/Collapse';
 import Warning from '../../../../components/Warning';
 import Button from '../../../../components/Button';
 import Loader from '../../../../components/Loader';
+import { sendCustomEventToGTM } from '../../../../utils';
 import { ScreenContainer } from '../../../shared/Containers';
 import { individualSelector, retrieveBoardStatus } from '../../../app/individual/individualStore';
 import UserList from './UserList';
@@ -54,6 +55,12 @@ var IndividualList = function () {
     var settingsData = useAppSelector(settingsSelector).data;
     var flows = (data.verify.responseBody || {}).flows;
     var onBack = function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Individual',
+            event_action: 'Individual Details Back Button',
+            event_label: settingsData.businessCountry.iso2
+        });
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0) {
             dispatch(handlePrevScreenStep());
             return;

package/build/features/individual/screens/IndividualPersonalInfo/IndividualPersonalInfo.js

@@ -17,8 +17,8 @@ import { useTranslation } from 'react-i18next';
 import { handleCurrentActiveScreen, handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Box from '@mui/material/Box';
 import { alpha, styled } from '@mui/material/styles';
-import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified } from '../../../../hooks';
-import { convertToEnglishDateFormat, deepCopy, getUserName, isKWOrSA, isOtherThanKWOrSA } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useDataNoneEditable, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids, useDataVerified, useFormDirtyCheck } from '../../../../hooks';
+import { convertToEnglishDateFormat, deepCopy, findCountryByIddPrefix, findCountryByIso2, getUserName, isKWOrSA, isOtherThanKWOrSA, sendCustomEventToGTM } from '../../../../utils';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import Text from '../../../../components/Text';
@@ -50,17 +50,17 @@ var ListType;
     ListType["NationalityList"] = "NationalityList";
 })(ListType || (ListType = {}));
 var IndividualPersonalInfo = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var _l = useAppSelector(individualSelector), data = _l.data, loading = _l.loading, error = _l.error, cityLoading = _l.cityLoading;
+    var _p = useAppSelector(individualSelector), data = _p.data, loading = _p.loading, error = _p.error, cityLoading = _p.cityLoading;
     var settingsData = useAppSelector(settingsSelector).data;
     var countries = settingsData.countries;
     var verify = data.verify, individualPersonalData = data.individualPersonalData;
-    var _m = verify.responseBody || {}, user = _m.user, flows = _m.flows;
+    var _q = verify.responseBody || {}, user = _q.user, flows = _q.flows;
     var name = individualPersonalData.name, email = individualPersonalData.email, mobile = individualPersonalData.mobile, countryCode = individualPersonalData.countryCode, gender = individualPersonalData.gender, nid = individualPersonalData.nid, issuedCountry = individualPersonalData.issuedCountry, expiryDate = individualPersonalData.expiryDate, dob = individualPersonalData.dob, placeOfBirthCountry = individualPersonalData.placeOfBirthCountry, placeOfBirthCity = individualPersonalData.placeOfBirthCity, nationality = individualPersonalData.nationality;
-    var _o = user || {}, data_status = _o.data_status, is_authorized = _o.is_authorized, data_verification = _o.data_verification, contact = _o.contact, genderRes = _o.gender, identification = _o.identification, birth = _o.birth, nationalityRes = _o.nationality;
+    var _r = user || {}, data_status = _r.data_status, is_authorized = _r.is_authorized, data_verification = _r.data_verification, contact = _r.contact, genderRes = _r.gender, identification = _r.identification, birth = _r.birth, nationalityRes = _r.nationality;
     var isOtherCountry = React.useMemo(function () { return isOtherThanKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var methods = useForm({
         resolver: yupResolver(IndividualInfoValidationSchema(isOtherCountry)),
@@ -82,9 +82,51 @@ var IndividualPersonalInfo = function (_a) {
     });
     var watch = methods.watch;
     useSetFromDefaultValues(methods, data.individualPersonalData);
-    var _p = React.useState(), listActive = _p[0], setListActive = _p[1];
-    var _q = React.useState(false), dobActive = _q[0], setDobActive = _q[1];
-    var _r = React.useState(false), expiryDateActive = _r[0], setExpiryDateActive = _r[1];
+    var _s = React.useState(), listActive = _s[0], setListActive = _s[1];
+    var _t = React.useState(false), dobActive = _t[0], setDobActive = _t[1];
+    var _u = React.useState(false), expiryDateActive = _u[0], setExpiryDateActive = _u[1];
+    var expDateRes = (identification === null || identification === void 0 ? void 0 : identification.expiry) && convertToEnglishDateFormat(new Date(identification === null || identification === void 0 ? void 0 : identification.expiry));
+    var dobDateRes = (birth === null || birth === void 0 ? void 0 : birth.date) && convertToEnglishDateFormat(new Date(birth === null || birth === void 0 ? void 0 : birth.date));
+    var resCountryCode = React.useMemo(function () {
+        var _a;
+        if (!((_a = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _a === void 0 ? void 0 : _a.country_code))
+            return {};
+        return findCountryByIddPrefix(countries, contact.phone.country_code) || {};
+    }, [(_b = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _b === void 0 ? void 0 : _b.country_code]);
+    var resIssuedCountry = React.useMemo(function () {
+        if (!(identification === null || identification === void 0 ? void 0 : identification.issued_country_code))
+            return;
+        return findCountryByIso2(countries, identification.issued_country_code);
+    }, [identification === null || identification === void 0 ? void 0 : identification.issued_country_code]);
+    var resPlaceOfBirthCountry = React.useMemo(function () {
+        if (!(birth === null || birth === void 0 ? void 0 : birth.country))
+            return;
+        return findCountryByIso2(countries, birth.country);
+    }, [birth === null || birth === void 0 ? void 0 : birth.country]);
+    var resNationality = React.useMemo(function () {
+        if (!nationalityRes)
+            return;
+        return findCountryByIso2(countries, nationalityRes);
+    }, [nationalityRes]);
+    var isDirty = useFormDirtyCheck(methods, {
+        name: getUserName(user, false),
+        email: contact === null || contact === void 0 ? void 0 : contact.email,
+        mobile: (_c = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _c === void 0 ? void 0 : _c.number,
+        countryCode: resCountryCode,
+        gender: genderRes === null || genderRes === void 0 ? void 0 : genderRes.toLowerCase(),
+        nid: identification === null || identification === void 0 ? void 0 : identification.id,
+        issuedCountry: resIssuedCountry,
+        expiryDate: expDateRes,
+        dob: dobDateRes,
+        placeOfBirthCountry: resPlaceOfBirthCountry,
+        placeOfBirthCity: ((_d = birth === null || birth === void 0 ? void 0 : birth.city) === null || _d === void 0 ? void 0 : _d.cityId) && { id: birth.city.cityId },
+        nationality: resNationality
+    }, [
+        {
+            name: 'placeOfBirthCity',
+            keys: ['id']
+        }
+    ]).isDirty;
     var originalReadOnly = useFormReadOnly(methods);
     var noneEditable = useDataNoneEditable(data_status, [
         'name.en',
@@ -120,30 +162,37 @@ var IndividualPersonalInfo = function (_a) {
         'nationality',
         'gender'
     ]);
-    var expDateRes = (identification === null || identification === void 0 ? void 0 : identification.expiry) && convertToEnglishDateFormat(new Date(identification === null || identification === void 0 ? void 0 : identification.expiry));
-    var dobDateRes = (birth === null || birth === void 0 ? void 0 : birth.date) && convertToEnglishDateFormat(new Date(birth === null || birth === void 0 ? void 0 : birth.date));
     var isNameVerified = dataVerified['name.en'] && dataVerified['name.ar'] && getUserName(user, isAr) === watch('name');
     var isPhoneNumberVerified = dataVerified['contact.phone.number'] &&
         dataVerified['contact.phone.country_code'] &&
-        ((_b = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _b === void 0 ? void 0 : _b.number) === watch('mobile') &&
-        ((_c = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _c === void 0 ? void 0 : _c.country_code) === ((_e = (_d = watch('countryCode')) === null || _d === void 0 ? void 0 : _d.idd_prefix) === null || _e === void 0 ? void 0 : _e.toString());
+        ((_e = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _e === void 0 ? void 0 : _e.number) === watch('mobile') &&
+        ((_f = contact === null || contact === void 0 ? void 0 : contact.phone) === null || _f === void 0 ? void 0 : _f.country_code) === ((_h = (_g = watch('countryCode')) === null || _g === void 0 ? void 0 : _g.idd_prefix) === null || _h === void 0 ? void 0 : _h.toString());
     var isEmailVerified = dataVerified['contact.email'] && (contact === null || contact === void 0 ? void 0 : contact.email) === watch('email');
     var isGenderVerified = dataVerified['gender'] && genderRes === watch('gender');
     var isIDVerified = dataVerified['identification.id'] && (identification === null || identification === void 0 ? void 0 : identification.id) === watch('nid');
-    var isIssuedCountryVerified = dataVerified['identification.issuer_country'] && (identification === null || identification === void 0 ? void 0 : identification.issued_country_code) === ((_f = watch('issuedCountry')) === null || _f === void 0 ? void 0 : _f.iso2);
+    var isIssuedCountryVerified = dataVerified['identification.issuer_country'] && (identification === null || identification === void 0 ? void 0 : identification.issued_country_code) === ((_j = watch('issuedCountry')) === null || _j === void 0 ? void 0 : _j.iso2);
     var isExpiryDateVerified = dataVerified['identification.expiry'] && expDateRes === watch('expiryDate');
     var isDOBVerified = dataVerified['birth.date'] && dobDateRes === watch('dob');
-    var isBirthCountryVerified = dataVerified['birth.country'] && (birth === null || birth === void 0 ? void 0 : birth.country) === ((_g = watch('placeOfBirthCountry')) === null || _g === void 0 ? void 0 : _g.iso2);
-    var isBirthCityVerified = dataVerified['birth.city'] && ((_h = birth === null || birth === void 0 ? void 0 : birth.city) === null || _h === void 0 ? void 0 : _h.cityId) === ((_j = watch('placeOfBirthCity')) === null || _j === void 0 ? void 0 : _j.id);
-    var isNationalityVerified = dataVerified['nationality'] && nationalityRes === ((_k = watch('nationality')) === null || _k === void 0 ? void 0 : _k.iso2);
+    var isBirthCountryVerified = dataVerified['birth.country'] && (birth === null || birth === void 0 ? void 0 : birth.country) === ((_k = watch('placeOfBirthCountry')) === null || _k === void 0 ? void 0 : _k.iso2);
+    var isBirthCityVerified = dataVerified['birth.city'] && ((_l = birth === null || birth === void 0 ? void 0 : birth.city) === null || _l === void 0 ? void 0 : _l.cityId) === ((_m = watch('placeOfBirthCity')) === null || _m === void 0 ? void 0 : _m.id);
+    var isNationalityVerified = dataVerified['nationality'] && nationalityRes === ((_o = watch('nationality')) === null || _o === void 0 ? void 0 : _o.iso2);
     var isKWOrSaCountry = React.useMemo(function () { return isKWOrSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var onSubmit = function (data) {
-        dispatch(updateIndividualPersonalInfo(deepCopy(getFelids(data))));
+        var formData = __assign(__assign({}, deepCopy(getFelids(data))), { isDirty: isDirty });
+        dispatch(updateIndividualPersonalInfo(formData));
     };
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
     }, [methods.formState.isValid]);
+    React.useEffect(function () {
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Individual',
+            event_action: 'Update Personal Data Page',
+            event_label: settingsData.businessCountry.iso2
+        });
+    }, []);
     var onBack = function () {
         if (error)
             dispatch(clearError());
@@ -151,6 +200,12 @@ var IndividualPersonalInfo = function (_a) {
             dispatch(handleCurrentActiveScreen('INDIVIDUAL_LIST_STEP'));
             return;
         }
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: 'Board Flows - Individual',
+            event_action: 'Individual Details Back Button',
+            event_label: settingsData.businessCountry.iso2
+        });
         if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0) {
             dispatch(handlePrevScreenStep('INDIVIDUAL_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
             return;

package/build/features/shared/Button/FlowsButtons.js

@@ -48,6 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { capitalize } from 'lodash-es';
 import Button from '../../../components/Button';
 import { Button as SharedButton } from '../../shared/Button';
 import { alpha, styled } from '@mui/material/styles';
@@ -57,7 +58,8 @@ import { ICONS_NAMES } from '../../../constants';
 import CheckIcon from '@mui/icons-material/Check';
 import { useAppDispatch, useAppSelector, useLanguage } from '../../../hooks';
 import { handleOpen, handleCurrentActiveScreen, handleNextScreenStep, settingsSelector } from '../../../app/settings';
-import { dangerousMessage, getScreenNameBasedOnFlow, isKWOrSA } from '../../../utils';
+import { FlowsTypes } from '../../../@types';
+import { dangerousMessage, getScreenNameBasedOnFlow, isKWOrSA, sendCustomEventToGTM } from '../../../utils';
 import API from '../../../api';
 import Text from '../../../components/Text';
 import Dot from '../Dot';
@@ -160,6 +162,13 @@ export default function FlowsButtons(_a) {
     var onRedirect = function (item) {
         if (!item.href)
             return;
+        var name = flowName === FlowsTypes.BANK ? 'Wallet' : capitalize(flowName);
+        sendCustomEventToGTM({
+            event: 'Send Event',
+            event_category: "Board Flows - ".concat(name),
+            event_action: "".concat(name, " Kit Click"),
+            event_label: settingsData.businessCountry.iso2
+        });
         if (flowName === item.name && !isResetPassword(item.name, item.status)) {
             var isOtherThanSAOrKWCountry = !isKWOrSA(settingsData.businessCountry.iso2);
             dispatch(handleCurrentActiveScreen(getScreenNameBasedOnFlow(item.name, isAuthorizedUser, isOtherThanSAOrKWCountry)));

package/build/hooks/useFormDirtyCheck.d.ts

@@ -2,5 +2,9 @@ import { FieldValues, UseFormReturn } from 'react-hook-form';
 type UseFormWithDirtyCheck = {
     isDirty: boolean;
 };
-export declare const useFormDirtyCheck: <TFieldValues extends FieldValues>(method: UseFormReturn<TFieldValues, any, undefined>, backendData: TFieldValues) => UseFormWithDirtyCheck;
+type CustomAttrProps = {
+    name: string;
+    keys: string[];
+};
+export declare const useFormDirtyCheck: <TFieldValues extends FieldValues>(method: UseFormReturn<TFieldValues, any, undefined>, backendData: TFieldValues, customAttrs?: CustomAttrProps[]) => UseFormWithDirtyCheck;
 export {};

package/build/hooks/useFormDirtyCheck.js

@@ -1,28 +1,65 @@
 import React from 'react';
 import _ from 'lodash';
-export var useFormDirtyCheck = function (method, backendData) {
+export var useFormDirtyCheck = function (method, backendData, customAttrs) {
     var _a = React.useState(false), isDirty = _a[0], setIsDirty = _a[1];
     var data = method.watch();
-    var isValidData = function (data, backendData) {
-        if (data === undefined)
+    var isValidData = function (formValue, backendValue) {
+        if (_.isUndefined(formValue))
             return false;
-        if (Array.isArray(data) && !data.length)
+        if (_.isArray(formValue) && formValue.length === 0)
             return false;
-        if (data === '' && !backendData)
+        if (_.isObject(formValue) && _.isEmpty(formValue))
+            return false;
+        if (formValue === '' && !backendValue)
             return false;
         return true;
     };
-    var deepComparison = function (data, backendData) {
-        for (var key in backendData) {
+    var isArray = function (data, backendData) {
+        return backendData && data && _.isArray(backendData) && _.isArray(data);
+    };
+    var isObject = function (data, backendData) {
+        return backendData && data && _.isObject(data) && _.isObject(backendData);
+    };
+    var mapArrayOfObjectWithKeys = function (items, keys) {
+        return _.map(items, function (item) { return _.pick(item, keys); });
+    };
+    var mapObjectWithKeys = function (item, keys) {
+        return _.pick(item, keys);
+    };
+    var deepComparison = function (data, backendData, customAttrs) {
+        var _loop_1 = function (key) {
             var formValue = data === null || data === void 0 ? void 0 : data[key];
             var backEndValue = backendData === null || backendData === void 0 ? void 0 : backendData[key];
-            if (isValidData(formValue, backEndValue) && !_.isEqual(formValue, backEndValue))
-                return true;
+            if (!isValidData(formValue, backEndValue))
+                return "continue";
+            var customAttr = customAttrs === null || customAttrs === void 0 ? void 0 : customAttrs.find(function (el) { return el.name === key; });
+            if (customAttr) {
+                var keys = customAttr.keys;
+                if (isArray(formValue, backEndValue)) {
+                    formValue = mapArrayOfObjectWithKeys(formValue, keys);
+                    backEndValue = mapArrayOfObjectWithKeys(backEndValue, keys);
+                    if (formValue.length !== backEndValue.length)
+                        return { value: true };
+                    if (_.differenceWith(formValue, backEndValue, _.isEqual).length > 0)
+                        return { value: true };
+                }
+                if (isObject(formValue, backEndValue)) {
+                    formValue = mapObjectWithKeys(formValue, keys);
+                    backEndValue = mapObjectWithKeys(backEndValue, keys);
+                }
+            }
+            if (!_.isEqual(formValue, backEndValue))
+                return { value: true };
+        };
+        for (var key in backendData) {
+            var state_1 = _loop_1(key);
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
         return false;
     };
     React.useEffect(function () {
-        var isDirty = deepComparison(data, backendData);
+        var isDirty = deepComparison(data, backendData, customAttrs);
         setIsDirty(isDirty);
     }, [data, backendData]);
     return { isDirty: isDirty };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.8.45-test",
+	"version": "2.8.49-development",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",
@@ -21,7 +21,7 @@
 		"copy:files": "copyfiles -u 1 src/**/*.css build/",
 		"tsc:alias": "tsc-alias -p tsconfig.json",
 		"ts:build": "rm -rf build && tsc -p tsconfig.json && tsc-alias -p tsconfig.json && yarn copy:files",
-		"push": "npm publish --access public --tag test"
+		"push": "npm publish --access public --tag development"
 	},
 	"keywords": [],
 	"author": {