@tap-payments/auth-jsconnect 2.0.45 → 2.0.46

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

@@ -16,7 +16,7 @@ import { brandSelector } from '../../../app/brand/brandStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(brandSelector).data;
-    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, 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 || [] }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/business/Business.js

@@ -20,7 +20,7 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { getParameterByName, createElementAndInject } from '../../utils';
+import { getParameterByName, findOrCreateElementAndInject } from '../../utils';
 import { BUSINESS_SCREENS_NAVIGATION } from '../../constants';
 import { businessFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
@@ -57,7 +57,7 @@ export function BusinessElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Business, __assign({}, props)) })));
 }
 export function renderBusinessLib(config, elementId) {
-    var element = createElementAndInject(elementId);
+    var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
     root.render(_jsx(BusinessElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };

package/build/features/business/screens/Activities/ActivitiesList.d.ts

@@ -20,7 +20,7 @@ export declare const InputStyled: import("@emotion/styled").StyledComponent<Pick
 export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -34,7 +34,7 @@ export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledCom
 export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -56,7 +56,7 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

package/build/features/business/screens/BusinessType/LicenseCertificate.js

@@ -13,6 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { DocumentPurpose } from '../../../../@types';
 import { styled } from '@mui/material/styles';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -37,6 +38,6 @@ var LicenseCertificate = function (_a) {
     var handleReset = function (ids) {
         certificateIdControl.field.onChange(ids);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, purpose: 'commercial_registration', fileUploadingStatus: function (uploading) { return dispatch(uploadingStatus(uploading)); } }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { id: 'certificateId', control: control, label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, purpose: DocumentPurpose.CR, fileUploadingStatus: function (uploading) { return dispatch(uploadingStatus(uploading)); } }) }) })));
 };
 export default LicenseCertificate;

package/build/features/business/screens/BusinessType/LicenseType.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -16,7 +16,7 @@ export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
 export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

package/build/features/business/screens/Customers/CustomerLocations.d.ts

@@ -48,7 +48,7 @@ export declare const NameContainer: import("@emotion/styled").StyledComponent<im
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -62,7 +62,7 @@ export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<
 export declare const RemainingCheck: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

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

@@ -16,7 +16,7 @@ import { businessSelector } from '../../../app/business/businessStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(businessSelector).data;
-    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/connect/Connect.js

@@ -20,7 +20,7 @@ import { store } from '../../app/store';
 import { connectSelector, setDefaultCountryCode } from '../app/connect/connectStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, createElementAndInject } from '../../utils';
+import { isKW, findOrCreateElementAndInject } from '../../utils';
 import { CONNECT_SCREENS_NAVIGATION } from '../../constants';
 import { connectFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
@@ -59,7 +59,7 @@ export function ConnectElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Connect, __assign({}, props)) })));
 }
 export function renderConnectLib(config, elementId) {
-    var element = createElementAndInject(elementId);
+    var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
     root.render(_jsx(ConnectElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };

package/build/features/connect/screens/Merchant/BrandList.js

@@ -88,14 +88,14 @@ var BrandList = function (_a) {
             setValue('brandName', '');
         }
         setValue('segment', segments_list.find(function (_a) {
-            var _b;
+            var _b, _c;
             var id = _a.id;
-            return ((_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.type) === id;
+            return ((_c = (_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) === id;
         }), { shouldValidate: true });
         setValue('teamSize', team_size_list.find(function (_a) {
-            var _b;
+            var _b, _c;
             var id = _a.id;
-            return ((_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.team) === id;
+            return ((_c = (_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.team) === null || _c === void 0 ? void 0 : _c.id) === id;
         }), { shouldValidate: true });
         onCloseBrandList();
     };

package/build/features/connect/screens/Merchant/BrandName.js

@@ -61,7 +61,6 @@ import Input from '../../../shared/Input';
 import ClearIcon from '../../../shared/ClearIcon';
 import Tooltip from '../../../../components/Tooltip';
 import Collapse from '../../../../components/Collapse';
-import { removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
 import CheckIcon from '../../../shared/CheckIcon';
 import { checkBrandNameAvailability, connectSelector } from '../../../app/connect/connectStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
@@ -104,7 +103,7 @@ var BrandName = function (_a) {
     var _c = React.useState(false), isHovered = _c[0], setIsHovered = _c[1];
     var t = useTranslation().t;
     var data = useAppSelector(connectSelector).data;
-    var control = useFormContext().control;
+    var _d = useFormContext(), control = _d.control, getValues = _d.getValues;
     var brandControl = useController({ control: control, name: 'brandName' });
     var brandNameValue = brandControl.field.value;
     var error = (_b = brandControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
@@ -122,14 +121,16 @@ var BrandName = function (_a) {
     }); }, 500);
     var handleBrandNameChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
-        brandControl.field.onChange(value);
+        brandControl.field.onChange(target.value);
     };
     React.useEffect(function () {
         var _a, _b, _c;
+        var brandList = (data.brandData.responseBody || {}).brand_list;
+        var brandListItem = getValues('selectedBrandItem');
+        var isOtherBrand = (brandList || []).length > 0 ? (brandListItem === null || brandListItem === void 0 ? void 0 : brandListItem.id) === 'other' : true;
         var isValid = brandNameValue && !error && brandNameValue.length > 2;
         var brand = (_c = (_b = (_a = data.otpData.responseBody) === null || _a === void 0 ? void 0 : _a.brand) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.en;
-        if (isValid && (brandNameValue === null || brandNameValue === void 0 ? void 0 : brandNameValue.toLowerCase()) != brand) {
+        if (isValid && (brandNameValue === null || brandNameValue === void 0 ? void 0 : brandNameValue.toLowerCase()) != brand && isOtherBrand) {
             fetchingBrandName(true);
             checkBrand(brandNameValue);
         }

package/build/features/connect/screens/Merchant/validation.js

@@ -7,7 +7,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { REGEX_WEBSITE, REGEX_BRAND_NAME, LINKEDIN_URL, SOCIAL_USERNAME, DIGITS_ONLY, REGEX_ALPHANUMERIC } from '../../../../constants';
+import { REGEX_WEBSITE, LINKEDIN_URL, SOCIAL_USERNAME, DIGITS_ONLY, REGEX_ALPHANUMERIC } from '../../../../constants';
 import * as yup from 'yup';
 var validationSalesChannels = function (channels) {
     if (channels === void 0) { channels = []; }
@@ -79,7 +79,7 @@ export var MerchantValidationSchema = function (isNewBrand) {
                 test: function (value) {
                     if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                         return true;
-                    if (value && value.length >= 3 && (value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
+                    if (value && value.length >= 3)
                         return true;
                     return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
                 }

package/build/features/connectExpress/ConnectExpress.js

@@ -31,7 +31,7 @@ import { store } from '../../app/store';
 import { connectExpressSelector, setIsLeadIdPassed, setPostUrl, setLeadId, retrieveLeadIdentityByIdAsync, setShowBoard } from '../app/connectExpress/connectExpressStore';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { isKW, createElementAndInject } from '../../utils';
+import { isKW, findOrCreateElementAndInject } from '../../utils';
 import { CONNECT_EXPRESS_SCREENS_NAVIGATION } from '../../constants';
 import { connectExpressFeatureScreens } from '../featuresScreens';
 import CustomFooter from '../shared/Footer';
@@ -76,7 +76,7 @@ export function ConnectExpressElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(ConnectExpress, __assign({}, props)) })));
 }
 export function renderConnectExpressLib(config, elementId) {
-    var el = createElementAndInject(elementId);
+    var el = findOrCreateElementAndInject(elementId);
     var root = createRoot(el);
     root.render(_jsx(ConnectExpressElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };

package/build/features/connectExpress/screens/CollectBusinessInfo/BrandName.js

@@ -57,7 +57,6 @@ import InfoIcon from '@mui/icons-material/Info';
 import CircularProgress from '@mui/material/CircularProgress';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { ScreenContainer } from '../../../shared/Containers';
-import { removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import Text from '../../../../components/Text';
 import Tooltip from '../../../../components/Tooltip';
@@ -122,8 +121,7 @@ var BrandName = function (_a) {
     }); }, 500);
     var handleBrandNameChange = function (_a) {
         var target = _a.target;
-        var value = removeAllOtherThanCharsNumbersAndSpace(target.value);
-        brandControl.field.onChange(value);
+        brandControl.field.onChange(target.value);
     };
     React.useEffect(function () {
         var _a, _b, _c, _d;

package/build/features/connectExpress/screens/CollectBusinessInfo/LicenseType.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -16,7 +16,7 @@ export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
 export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

package/build/features/connectExpress/screens/CollectBusinessInfo/validation.js

@@ -1,5 +1,5 @@
 import * as yup from 'yup';
-import { REGEX_BRAND_NAME, KW_MIN_LICENSE_LENGTH, FL_MIN_LICENSE_LENGTH, CR_MIN_LICENSE_LENGTH } from '../../../../constants';
+import { KW_MIN_LICENSE_LENGTH, FL_MIN_LICENSE_LENGTH, CR_MIN_LICENSE_LENGTH } from '../../../../constants';
 import { BusinessType } from '../../../../@types';
 var objectElements = {
     legal_name: yup.object().shape({
@@ -20,7 +20,7 @@ export var BusinessDataSchema = function (isLeadIdPassed) {
                 test: function (value) {
                     if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                         return true;
-                    if (value && value.length >= 3 && (value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
+                    if (value && value.length >= 3)
                         return true;
                     return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
                 }
@@ -53,7 +53,7 @@ export var BusinessDataSchema = function (isLeadIdPassed) {
             test: function (value) {
                 if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                     return true;
-                if (value && value.length >= 3 && (value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
+                if (value && value.length >= 3)
                     return true;
                 return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
             }
@@ -87,7 +87,7 @@ export var KWBusinessDataSchema = function (isLeadIdPassed) {
                 test: function (value) {
                     if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                         return true;
-                    if (value && value.length >= 3 && (value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
+                    if (value && value.length >= 3)
                         return true;
                     return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
                 }
@@ -124,7 +124,7 @@ export var KWBusinessDataSchema = function (isLeadIdPassed) {
             test: function (value) {
                 if ((value === null || value === void 0 ? void 0 : value.length) === 0)
                     return true;
-                if (value && value.length >= 3 && (value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME)))
+                if (value && value.length >= 3)
                     return true;
                 return this.createError({ message: 'enter_brand_name_english_chars_numbers_space' });
             }

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

@@ -1,14 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { useTranslation } from 'react-i18next';
+import { isNetworkError } from '../../../../utils';
+import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
 import { connectExpressSelector, createAccountAsync } from '../../../app/connectExpress/connectExpressStore';
 import CreateAccountLoading from '../../../shared/CreateAccountLoading';
+import Button from '../../../shared/Button';
 var CreateAccountLoader = function (_a) {
     var dispatch = useAppDispatch();
-    var error = useAppSelector(connectExpressSelector).error;
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    var _b = useAppSelector(connectExpressSelector), error = _b.error, loading = _b.loading;
     React.useEffect(function () {
         dispatch(createAccountAsync());
     }, []);
-    return _jsx(CreateAccountLoading, { error: error });
+    var onReTry = function () {
+        dispatch(createAccountAsync());
+    };
+    var isNE = React.useMemo(function () { return isNetworkError(error); }, [error]);
+    return (_jsx(CreateAccountLoading, __assign({ error: error }, { children: isNE && (_jsx(Button, __assign({ onClick: onReTry, disableBack: true, isAr: isAr, loading: loading }, { children: t('try_again') }))) })));
 };
 export default React.memo(CreateAccountLoader);

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

@@ -18,8 +18,8 @@ import { FlowsTypes } from '../../../../@types';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(connectExpressSelector).data;
     var _a = data.responseData || {}, boardData = _a.boardData, leadData = _a.leadData, boardInfo = _a.boardInfo;
-    var _b = leadData || {}, brand = _b.brand, entity = _b.entity, name = _b.name;
-    var _c = boardData || {}, business = _c.business, merchant = _c.merchant, bank = _c.bank_account, user = _c.user;
+    var name = (leadData || {}).name;
+    var _b = boardData || {}, business = _b.business, merchant = _b.merchant, bank = _b.bank_account, user = _b.user, individuals = _b.individuals, entity = _b.entity, brand = _b.brand;
     var flows = (boardInfo || {}).info;
     var boardInfoId = boardInfo === null || boardInfo === void 0 ? void 0 : boardInfo.id;
     var boardId = boardData === null || boardData === void 0 ? void 0 : boardData.id;
@@ -27,6 +27,6 @@ var SuccessWithFlowButtons = function () {
         var name = _a.name;
         return name !== FlowsTypes.PASSWORD;
     }); }, [flows]);
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, boardId: boardId, boardInfoId: boardInfoId, brand: brand, business: business, entity: entity, flows: filteredFlows || [], merchant: merchant, user: __assign({ names: { en: name } }, user) }));
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, boardId: boardId, boardInfoId: boardInfoId, brand: brand, business: business, entity: entity, flows: filteredFlows || [], merchant: merchant, individuals: individuals, user: __assign({ names: { en: name } }, user) }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/entity/Entity.js

@@ -29,7 +29,7 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { createElementAndInject } from '../../utils';
+import { findOrCreateElementAndInject } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
 import { ENTITY_SCREENS_NAVIGATION } from '../../constants';
 import { entityFeatureScreens } from '../featuresScreens';
@@ -64,7 +64,7 @@ export function EntityElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Entity, __assign({}, props)) })));
 }
 export function renderEntityLib(config, elementId) {
-    var element = createElementAndInject(elementId);
+    var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
     root.render(_jsx(EntityElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };

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

@@ -20,7 +20,7 @@ export declare const InputStyled: import("@emotion/styled").StyledComponent<Pick
 export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -34,7 +34,7 @@ export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledCom
 export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -56,7 +56,7 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

package/build/features/entity/screens/EntityName/EntityTypeList.d.ts

@@ -20,7 +20,7 @@ export declare const InputStyled: import("@emotion/styled").StyledComponent<Pick
 export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -34,7 +34,7 @@ export declare const InfoOutlinedIconStyled: import("@emotion/styled").StyledCom
 export declare const InfoIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;
@@ -56,7 +56,7 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
 export declare const CheckIconStyled: import("@emotion/styled").StyledComponent<{
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
-    color?: "inherit" | "disabled" | "error" | "success" | "info" | "primary" | "secondary" | "action" | "warning" | undefined;
+    color?: "inherit" | "disabled" | "error" | "info" | "success" | "primary" | "secondary" | "action" | "warning" | undefined;
     fontSize?: "small" | "inherit" | "medium" | "large" | undefined;
     htmlColor?: string | undefined;
     inheritViewBox?: boolean | undefined;

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

@@ -10,11 +10,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { styled } from '@mui/material/styles';
 import Collapse from '../../../../components/Collapse';
+import { DocumentPurpose } from '../../../../@types';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { getRecentDocumentFiles } from '../../../../utils';
 import { ScreenContainer } from '../../../shared/Containers';
 import { entitySelector, uploadingStatus } from '../../../app/entity/entityStore';
 import UploadMultipleFile from '../../../shared/UploadMultipleFile';
@@ -25,18 +28,21 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var LicenseCertificate = function (_a) {
+    var _b;
     var show = _a.show;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var dispatch = useAppDispatch();
     var certificateIdControl = useController({ name: 'certificateId', control: control });
-    var loading = useAppSelector(entitySelector).loading;
+    var _c = useAppSelector(entitySelector), loading = _c.loading, data = _c.data;
+    var documents = (((_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.entity) || {}).documents;
     var handleLicenseCertificateChange = function (ids) {
         certificateIdControl.field.onChange(ids);
     };
     var handleReset = function (ids) {
         certificateIdControl.field.onChange(ids);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, purpose: 'commercial_registration', fileUploadingStatus: function (uploading) { return dispatch(uploadingStatus(uploading)); } }) }) })));
+    var defaultFiles = React.useMemo(function () { return getRecentDocumentFiles(documents, DocumentPurpose.CR); }, [documents]);
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { id: 'certificateId', control: control, label: t('title_license_certificate'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_certificate'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_bank_statement'), onFileUploaded: handleLicenseCertificateChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, defaultFiles: defaultFiles, purpose: DocumentPurpose.CR, fileUploadingStatus: function (uploading) { return dispatch(uploadingStatus(uploading)); } }) }) })));
 };
 export default LicenseCertificate;

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

@@ -16,7 +16,7 @@ import { entitySelector } from '../../../app/entity/entityStore';
 import SuccessFlowButtons from '../../../shared/SuccessFlowButtons';
 var SuccessWithFlowButtons = function () {
     var data = useAppSelector(entitySelector).data;
-    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name;
-    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, boardInfoId: board_info_id, flows: flows || [] }));
+    var _a = data.verify.responseBody || {}, flows = _a.flows, entity = _a.entity, brand = _a.brand, bank = _a.bank_account, merchant = _a.merchant, user = _a.user, business = _a.business, board_id = _a.board_id, board_info_id = _a.board_info_id, name = _a.name, individuals = _a.individuals;
+    return (_jsx(SuccessFlowButtons, { flowName: data.flowName, bank: bank, brand: brand, entity: entity, merchant: merchant, user: __assign({ names: { en: name } }, user), business: business, boardId: board_id, individuals: individuals, boardInfoId: board_info_id, flows: flows || [] }));
 };
 export default memo(SuccessWithFlowButtons);

package/build/features/featuresScreens.js

@@ -38,6 +38,8 @@ import SuccessPasswordPage from './password/screens/Success';
 import PasswordSuccessWithFlowPage from './password/screens/SuccessWithFlowButtons';
 import PasswordResetPasswordSuccessPage from './password/screens/ResetPasswordSuccess';
 import IndividualVerifyPage from './individual/screens/Verify';
+import IndividualListPage from './individual/screens/IndividualList';
+import IndividualPersonalInfo from './individual/screens/IndividualPersonalInfo';
 import AdditionalIndividualInfoPage from './individual/screens/AdditionalIndividualInfo';
 import SuccessOwnerPage from './individual/screens/Success';
 import IndividualSuccessWithFlowPage from './individual/screens/SuccessWithFlowButtons';
@@ -234,6 +236,14 @@ export var individualFeatureScreens = [
         name: 'INDIVIDUAL_LOADING_DATA_STEP',
         element: IndividualDataLoadingPage
     },
+    {
+        name: 'INDIVIDUAL_LIST_STEP',
+        element: IndividualListPage
+    },
+    {
+        name: 'INDIVIDUAL_PERSONAL_INDIVIDUAL_INFO_STEP',
+        element: IndividualPersonalInfo
+    },
     {
         name: 'INDIVIDUAL_ADDITIONAL_INDIVIDUAL_INFO_STEP',
         element: AdditionalIndividualInfoPage

package/build/features/individual/Individual.js

@@ -29,7 +29,7 @@ import AnimationFlow from '../../components/AnimationFlow';
 import { store } from '../../app/store';
 import { ReduxProvider, ThemeProvider } from '../../components/Providers';
 import Collapse from '../../components/Collapse';
-import { createElementAndInject } from '../../utils';
+import { findOrCreateElementAndInject } from '../../utils';
 import { FeatureContainer } from '../shared/Containers';
 import { INDIVIDUAL_SCREENS_NAVIGATION } from '../../constants';
 import { individualFeatureScreens } from '../featuresScreens';
@@ -64,7 +64,7 @@ export function IndividualElement(props) {
     return (_jsx(ReduxProvider, __assign({ store: store }, { children: _jsx(Individual, __assign({}, props)) })));
 }
 export function renderIndividualLib(config, elementId) {
-    var element = createElementAndInject(elementId);
+    var element = findOrCreateElementAndInject(elementId);
     var root = createRoot(element);
     root.render(_jsx(IndividualElement, __assign({}, config)));
     var unmount = function () { return root.unmount(); };

package/build/features/individual/screens/AdditionalIndividualInfo/AdditionalIndividualInfo.d.ts

@@ -1,4 +1,17 @@
 import * as React from 'react';
+export declare const RoleTextStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "right" | "left" | "center" | "inherit" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, ("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" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export interface AdditionalIndividualInfoProps {
 }
 declare const _default: React.MemoExoticComponent<{