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

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 } 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,25 +162,24 @@ 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)

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.48-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": {