@tap-payments/auth-jsconnect 2.1.41-test → 2.1.42-test

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

@@ -21,13 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { connectSelector } from '../../../app/connect/connectStore';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFormContext, useController } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useAppSelector, useLanguage } from '../../../../hooks';
+import { useLanguage } from '../../../../hooks';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import Input from '../../../shared/Input';
 import CheckIcon from '../../../shared/CheckIcon';
@@ -53,9 +52,7 @@ var BrandList = function (_a) {
     var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    var data = useAppSelector(connectSelector).data;
-    var _c = data.individualData.responseBody || {}, segments_list = _c.segments_list, team_size_list = _c.team_size_list;
-    var _d = useFormContext(), control = _d.control, setValue = _d.setValue;
+    var _c = useFormContext(), control = _c.control, setValue = _c.setValue;
     var selectedBrandControl = useController({ control: control, name: 'selectedBrandItem' });
     var selectedBrand = selectedBrandControl.field.value;
     var onOpenBrandList = function (event) {
@@ -87,16 +84,6 @@ var BrandList = function (_a) {
             setValue('salesChannels', [], { shouldValidate: true });
             setValue('brandName', '');
         }
-        setValue('segment', segments_list.find(function (_a) {
-            var _b;
-            var id = _a.id;
-            return ((_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.type) === id;
-        }), { shouldValidate: true });
-        setValue('teamSize', team_size_list.find(function (_a) {
-            var _b;
-            var id = _a.id;
-            return ((_b = brand === null || brand === void 0 ? void 0 : brand.segment) === null || _b === void 0 ? void 0 : _b.team) === id;
-        }), { shouldValidate: true });
         onCloseBrandList();
     };
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('select_brand_label'), readOnly: true, onClick: !!anchorEl ? onCloseBrandList : onOpenBrandList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_brand'), value: t(getBrandName(selectedBrand)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'id', list: list, onSelectItem: onSelectItem, renderItem: function (item) {

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

@@ -10,7 +10,6 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import TeamSize from '../../../connect/screens/Merchant/TeamSize';
 import * as React from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -28,47 +27,34 @@ import BrandName from './BrandName';
 import TAC from './TAC';
 import BrandList from './BrandList';
 import SalesChannels from './SalesChannels';
-import Segments from './Segments';
-var ListType;
-(function (ListType) {
-    ListType["SegmentsList"] = "SegmentsList";
-    ListType["TeamSizeList"] = "TeamSizeList";
-})(ListType || (ListType = {}));
 var Merchant = function (_a) {
     var _b;
     var _c = React.useState(false), brandNameChecking = _c[0], setBrandNameChecking = _c[1];
     var _d = React.useState(false), isBrandListOpen = _d[0], setIsBrandListOpen = _d[1];
     var _e = React.useState(false), isRequiredNewBrand = _e[0], setIsRequiredNewBrand = _e[1];
     var _f = useAppSelector(connectSelector), data = _f.data, loading = _f.loading, error = _f.error;
-    var _g = data.brandData, brandName = _g.brandName, selectedBrandItem = _g.selectedBrandItem, termAndConditionChecked = _g.termAndConditionChecked, responseBody = _g.responseBody, salesChannels = _g.salesChannels, segment = _g.segment, teamSize = _g.teamSize;
+    var _g = data.brandData, brandName = _g.brandName, selectedBrandItem = _g.selectedBrandItem, termAndConditionChecked = _g.termAndConditionChecked, responseBody = _g.responseBody, salesChannels = _g.salesChannels;
     var brandList = (responseBody || {}).brand_list;
-    var _h = React.useState(), listActive = _h[0], setListActive = _h[1];
     var methods = useForm({
         resolver: yupResolver(MerchantValidationSchema(isRequiredNewBrand)),
         defaultValues: {
             brandName: brandName,
             selectedBrandItem: selectedBrandItem,
             termAndConditionChecked: termAndConditionChecked,
-            salesChannels: salesChannels,
-            segment: segment,
-            teamSize: teamSize
+            salesChannels: salesChannels
         },
         mode: 'onChange'
     });
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var brandListItem = methods.getValues('selectedBrandItem');
+    var brandListItem = methods.watch('selectedBrandItem');
     var onSubmit = function (formData) {
         dispatch(updateLeadBrand(__assign(__assign({}, formData), { isNewBrand: isRequiredNewBrand })));
     };
     var onBack = function () {
         dispatch(handlePrevScreenStep('CONNECT_INDIVIDUAL_STEP'));
     };
-    React.useEffect(function () {
-        methods.setValue('segment', segment, { shouldValidate: true });
-        methods.setValue('teamSize', teamSize, { shouldValidate: true });
-    }, [segment, teamSize]);
     React.useEffect(function () {
         if (error)
             dispatch(clearError());
@@ -81,7 +67,7 @@ var Merchant = function (_a) {
         if (termAndConditionChecked === true)
             methods.setValue('termAndConditionChecked', termAndConditionChecked);
     }, [termAndConditionChecked]);
-    var brandErrChecks = !!Object.entries(methods.formState.errors).length || !!error;
+    var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
     var disabled = brandErrChecks || brandNameChecking || ((_b = data.brandData.responseBody) === null || _b === void 0 ? void 0 : _b.response_code) === '5';
     var hasBrandList = (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0;
     var isOtherBrand = (brandListItem === null || brandListItem === void 0 ? void 0 : brandListItem.id) === 'other' && hasBrandList;
@@ -89,11 +75,6 @@ var Merchant = function (_a) {
     React.useEffect(function () {
         setIsRequiredNewBrand(isOtherBrand || isNewBrand);
     }, [isOtherBrand, isNewBrand]);
-    var handleMenuClick = function (flag) {
-        setListActive(flag);
-    };
-    var isSegmentsListActive = listActive === ListType.SegmentsList;
-    var isTeamSizeListActive = listActive === ListType.TeamSizeList;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: !(isOtherBrand || isNewBrand), list: brandList, onListOpen: function () { return setIsBrandListOpen(true); }, onListClose: function () { return setIsBrandListOpen(false); } }), _jsx(BrandName, { show: (isNewBrand || isOtherBrand) && !isBrandListOpen, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(Segments, { show: !isTeamSizeListActive, onListOpen: function () { return handleMenuClick(ListType.SegmentsList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(TeamSize, { show: !isSegmentsListActive, onListOpen: function () { return handleMenuClick(ListType.TeamSizeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(Collapse, __assign({ in: !isBrandListOpen }, { children: _jsx(SalesChannels, {}) })), _jsx(TAC, { show: (isNewBrand || isOtherBrand) && !isBrandListOpen }), _jsx(Collapse, __assign({ in: !isBrandListOpen, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: !(isOtherBrand || isNewBrand), list: brandList, onListOpen: function () { return setIsBrandListOpen(true); }, onListClose: function () { return setIsBrandListOpen(false); } }), _jsx(BrandName, { show: (isNewBrand || isOtherBrand) && !isBrandListOpen, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(Collapse, __assign({ in: !isBrandListOpen }, { children: _jsx(SalesChannels, {}) })), _jsx(TAC, { show: (isNewBrand || isOtherBrand) && !isBrandListOpen }), _jsx(Collapse, __assign({ in: !isBrandListOpen, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(Merchant);

package/build/features/connect/screens/Merchant/validation.d.ts

@@ -9,8 +9,6 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
-    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
-    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     salesChannels: import("yup/lib/array").RequiredArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
@@ -21,8 +19,6 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
-    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
-    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     salesChannels: import("yup/lib/array").RequiredArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
@@ -33,6 +29,4 @@ export declare const MerchantValidationSchema: (isNewBrand?: boolean) => yup.Obj
     }>>>, import("yup/lib/types").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
     }>>[] | undefined>;
-    segment: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
-    teamSize: import("yup/lib/object").RequiredObjectSchema<import("yup/lib/object").ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").ObjectShape>>;
 }>>>;

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

@@ -86,8 +86,6 @@ export var MerchantValidationSchema = function (isNewBrand) {
             })
                 .required('enter_brand_name_english_chars_numbers_space'),
             termAndConditionChecked: yup.boolean().isTrue('check_terms_cond').required('check_terms_cond'),
-            segment: yup.object().required('alert_choose_segment'),
-            teamSize: yup.object().required('alert_choose_teamSize'),
             salesChannels: yup
                 .array()
                 .min(1, 'choose_atleast_one_channel')
@@ -127,8 +125,6 @@ export var MerchantValidationSchema = function (isNewBrand) {
                 return this.createError({ message: result });
             }
         })
-            .required('choose_atleast_one_channel'),
-        segment: yup.object().required('alert_choose_segment'),
-        teamSize: yup.object().required('alert_choose_teamSize')
+            .required('choose_atleast_one_channel')
     });
 };

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

@@ -48,27 +48,14 @@ var AdditionalIndividualInfo = function (_a) {
     var settingsData = useAppSelector(settingsSelector).data;
     var countries = settingsData.countries;
     var user = (data.verify.responseBody || {}).user;
-    var _c = data.individualData, occupation = _c.occupation, sourceIncome = _c.sourceIncome, monthlyIncome = _c.monthlyIncome, employerName = _c.employerName, employerLocation = _c.employerLocation, isPEP = _c.isPEP, isInfluencer = _c.isInfluencer, civilID = _c.civilID, signatureFileId = _c.signatureFileId, civilIDUploading = _c.civilIDUploading, signatureFileUploading = _c.signatureFileUploading;
     var methods = useForm({
         resolver: yupResolver(IndividualInfoValidationSchema),
-        defaultValues: {
-            occupation: occupation,
-            sourceIncome: sourceIncome,
-            monthlyIncome: monthlyIncome,
-            employerName: employerName,
-            employerLocation: employerLocation,
-            isPEP: isPEP,
-            isInfluencer: isInfluencer,
-            civilID: civilID,
-            signatureFileId: signatureFileId,
-            civilIDUploading: civilIDUploading,
-            signatureFileUploading: signatureFileUploading
-        },
+        defaultValues: data.individualData,
         mode: 'onChange'
     });
     useSetFromDefaultValues(methods, data.individualData, true);
-    var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
-    var _e = React.useState(false), employerFieldsActive = _e[0], setEmployerFieldsActive = _e[1];
+    var _c = React.useState(), listActive = _c[0], setListActive = _c[1];
+    var _d = React.useState(false), employerFieldsActive = _d[0], setEmployerFieldsActive = _d[1];
     React.useEffect(function () {
         var _a, _b;
         if (((_b = (_a = methods.getValues('sourceIncome')) === null || _a === void 0 ? void 0 : _a.name.en) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'salary')
@@ -89,8 +76,7 @@ var AdditionalIndividualInfo = function (_a) {
     var isEmployerLocationListActive = listActive === ListType.EmployerLocationList;
     var isMonthlyIncomeListActive = listActive === ListType.MonthlyIncomeList;
     var isOccupationListActive = listActive === ListType.OccupationList;
-    var disabled = !methods.formState.isValid || civilIDUploading || signatureFileUploading;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { show: !isEmployerLocationListActive && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EmployerName, { show: false }), _jsx(EmployerLocation, { show: !isSourceOfIncomeListActive && employerFieldsActive && !isMonthlyIncomeListActive && !isOccupationListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.EmployerLocationList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, {}), _jsx(SignatureFile, { show: user === null || user === void 0 ? void 0 : user.is_authorized })] })), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Occupation, { onListOpen: function () { return handleMenuClick(ListType.OccupationList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isSourceOfIncomeListActive }), _jsx(SourceOfIncome, { onListOpen: function () { return handleMenuClick(ListType.SourceOfIncomeList); }, onListClose: function () { return handleMenuClick(); }, show: !isEmployerLocationListActive && !isMonthlyIncomeListActive && !isOccupationListActive }), _jsx(MonthlyIncome, { show: !isEmployerLocationListActive && !isSourceOfIncomeListActive && !isOccupationListActive, onListOpen: function () { return handleMenuClick(ListType.MonthlyIncomeList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EmployerName, { show: false }), _jsx(EmployerLocation, { show: !isSourceOfIncomeListActive && employerFieldsActive && !isMonthlyIncomeListActive && !isOccupationListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.EmployerLocationList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: [_jsx(CivilIDFile, {}), _jsx(SignatureFile, { show: user === null || user === void 0 ? void 0 : user.is_authorized })] })), _jsx(PEPSwitch, { show: !listActive }), _jsx(InfluencerSwitch, { show: !listActive })] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: !methods.formState.isValid, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(AdditionalIndividualInfo);
 AdditionalIndividualInfo.defaultProps = {};

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { ScreenContainer } from '../../../../features/shared/Containers';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import { civilIDUploadingStatus, individualSelector } from '../../../app/individual/individualStore';
-import UploadMultipleFile from '../../../shared/UploadMultipleFile';
+import { individualSelector, uploadCivilIdFile } from '../../../../features/app/individual/individualStore';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
+import UploadFile from '../../../../features/shared/UploadFile';
+import { maskFileName } from '../../../../utils';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -13,18 +16,66 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var CivilIDFile = function () {
-    var _a;
+    var _a, _b;
+    var _c = React.useState(0), progress = _c[0], setProgress = _c[1];
     var t = useTranslation().t;
-    var dispatch = useAppDispatch();
-    var control = useFormContext().control;
+    var _d = useFormContext(), control = _d.control, setError = _d.setError, clearErrors = _d.clearErrors, setValue = _d.setValue;
+    var civilIDFileControl = useController({ name: 'civilIDFile', control: control });
     var civilIDFileIdControl = useController({ name: 'civilID', control: control });
-    var _b = useAppSelector(individualSelector), loading = _b.loading, data = _b.data;
-    var handleCivilIDChange = function (ids) {
-        civilIDFileIdControl.field.onChange(ids);
+    var _e = useAppSelector(individualSelector), data = _e.data, loading = _e.loading, sysError = _e.error;
+    var _f = data.attachmentsData, civilIDUploading = _f.civilIDUploading, civilIDFile = _f.civilIDFile, civilID = _f.civilID;
+    var dispatch = useAppDispatch();
+    var civilIDValue = civilIDFileControl.field.value;
+    var error = ((_a = civilIDFileControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message) || ((_b = civilIDFileIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message);
+    var handleCivilIDChange = function (files) {
+        var _a;
+        var file = files === null || files === void 0 ? void 0 : files[0];
+        if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
+            setError('civilIDFile', { message: 'file_not_supported_alert' });
+        }
+        else if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
+            setError('civilIDFile', { message: 'file_size_alert' });
+        }
+        else {
+            civilIDFileControl.field.onChange(file);
+            dispatch(uploadCivilIdFile({
+                file: file,
+                onProgress: function (value) {
+                    setProgress(value);
+                },
+                title: (_a = data.verify.responseBody) === null || _a === void 0 ? void 0 : _a.merchant_id
+            }));
+        }
     };
-    var handleReset = function (ids) {
-        civilIDFileIdControl.field.onChange(ids);
+    var handleReset = function () {
+        civilIDFileControl.field.onChange(null);
+        civilIDFileIdControl.field.onChange('');
+        setProgress(0);
     };
-    return (_jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, fileTitle: (_a = data.verify.responseBody) === null || _a === void 0 ? void 0 : _a.merchant_id, purpose: 'identity_document', fileUploadingStatus: function (uploading) { return dispatch(civilIDUploadingStatus(uploading)); } }) }));
+    React.useEffect(function () {
+        if (!!civilIDFile) {
+            setValue('civilIDFile', civilIDFile);
+            setValue('civilID', civilID);
+        }
+    }, [civilIDFile, civilID]);
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('civilIDFileId', { message: sysError });
+            civilIDFileControl.field.onChange(null);
+            setProgress(0);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((civilIDFileControl.formState.isValid || !!civilIDValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [civilIDFileControl.formState.isValid, civilIDValue]);
+    React.useEffect(function () {
+        if (!!civilIDFile) {
+            civilIDFileControl.field.onChange(civilIDFile);
+            civilIDFileIdControl.field.onChange(civilID);
+        }
+    }, []);
+    var fileName = civilIDValue ? maskFileName(civilIDValue === null || civilIDValue === void 0 ? void 0 : civilIDValue.name) : '';
+    return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_civil_id'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_civilID'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_civil_id'), onFileUploaded: handleCivilIDChange, isFileUploaded: !civilIDUploading && !!civilIDValue, isSubmitting: loading, isUploading: civilIDUploading, progress: progress, onReset: handleReset, initialFileName: fileName, error: error && t(error) }) }));
 };
 export default CivilIDFile;

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

@@ -10,14 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ScreenContainer } from '../../../../features/shared/Containers';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import UploadMultipleFile from '../../../shared/UploadMultipleFile';
-import { ScreenContainer } from '../../../shared/Containers';
-import { individualSelector, signatureFileUploadingStatus } from '../../../app/individual/individualStore';
+import { individualSelector, uploadSignatureFile } from '../../../../features/app/individual/individualStore';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
+import UploadFile from '../../../../features/shared/UploadFile';
 import Collapse from '../../../../components/Collapse';
+import { maskFileName } from '../../../../utils';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -25,18 +28,63 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var SignatureFile = function (_a) {
+    var _b, _c;
     var show = _a.show;
+    var _d = React.useState(0), progress = _d[0], setProgress = _d[1];
     var t = useTranslation().t;
-    var control = useFormContext().control;
+    var _e = useFormContext(), control = _e.control, setError = _e.setError, clearErrors = _e.clearErrors, setValue = _e.setValue;
+    var signatureFileControl = useController({ name: 'signatureFile', control: control });
     var signatureFileIdControl = useController({ name: 'signatureFileId', control: control });
-    var loading = useAppSelector(individualSelector).loading;
+    var _f = useAppSelector(individualSelector), data = _f.data, loading = _f.loading, sysError = _f.error;
+    var _g = data.attachmentsData, signatureFileUploading = _g.signatureFileUploading, signatureFile = _g.signatureFile, signatureFileId = _g.signatureFileId;
     var dispatch = useAppDispatch();
-    var handleSignatureChange = function (ids) {
-        signatureFileIdControl.field.onChange(ids);
+    var signatureValue = signatureFileControl.field.value;
+    var error = ((_b = signatureFileControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message) || ((_c = signatureFileIdControl.fieldState.error) === null || _c === void 0 ? void 0 : _c.message);
+    var handleSignatureChange = function (files) {
+        var file = files === null || files === void 0 ? void 0 : files[0];
+        if (!VALID_FILE_FORMATS.includes(file === null || file === void 0 ? void 0 : file.type)) {
+            setError('signatureFile', { message: 'file_not_supported_alert' });
+        }
+        else if ((file === null || file === void 0 ? void 0 : file.size) > MAX_FILE_SIZE) {
+            setError('signatureFile', { message: 'file_size_alert' });
+        }
+        else {
+            signatureFileControl.field.onChange(file);
+            dispatch(uploadSignatureFile({
+                file: file,
+                onProgress: function (value) {
+                    setProgress(value);
+                }
+            }));
+        }
     };
-    var handleReset = function (ids) {
-        signatureFileIdControl.field.onChange(ids);
+    var handleReset = function () {
+        signatureFileControl.field.onChange(null);
+        signatureFileIdControl.field.onChange('');
+        setProgress(0);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadMultipleFile, { label: t('title_signature_file'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_signature'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_signature_file'), onFileUploaded: handleSignatureChange, isSubmitting: loading, onDeleteFile: handleReset, maxLimit: 4, purpose: 'customer_signature', fileTitle: 'Merchant Signature', fileUploadingStatus: function (uploading) { return dispatch(signatureFileUploadingStatus(uploading)); } }) }) })));
+    React.useEffect(function () {
+        if (sysError === 'file_upload_error') {
+            setError('signatureFileId', { message: sysError });
+            signatureFileControl.field.onChange(null);
+            setProgress(0);
+        }
+    }, [sysError]);
+    React.useEffect(function () {
+        if ((signatureFileControl.formState.isValid || !!signatureValue) && error != 'file_upload_error')
+            clearErrors();
+    }, [signatureFileControl.formState.isValid, signatureValue]);
+    React.useEffect(function () {
+        if (!!signatureFile) {
+            setValue('signatureFile', signatureFile);
+            setValue('signatureFileId', signatureFileId);
+        }
+    }, [signatureFile, signatureFileId]);
+    React.useEffect(function () {
+        if (!!signatureValue)
+            signatureFileControl.field.onChange(signatureFile);
+    }, []);
+    var fileName = signatureValue ? maskFileName(signatureValue === null || signatureValue === void 0 ? void 0 : signatureValue.name) : '';
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_signature_file'), title: t('drag_and_drop'), subTitle: t('subtitle_drop'), dragDescription: t('desc_drag_and_drop_signature'), uploadingTitle: t('file_uploading_title'), successTitle: t('success_upload_signature_file'), onFileUploaded: handleSignatureChange, isFileUploaded: !signatureFileUploading && !!signatureValue, isSubmitting: loading, initialFileName: fileName, isUploading: signatureFileUploading, progress: progress, onReset: handleReset, error: error && t(error) }) }) })));
 };
 export default SignatureFile;

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

@@ -6,8 +6,10 @@ export declare const IndividualInfoValidationSchema: yup.ObjectSchema<import("yu
     sourceIncome: import("yup/lib/object").RequiredObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     monthlyIncome: import("yup/lib/object").OptionalObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     employerLocation: import("yup/lib/object").OptionalObjectSchema<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>>>;
-    civilID: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
-    signatureFileId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    civilID: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    civilIDFile: any;
+    signatureFileId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    signatureFile: any;
     isPEP: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
     isInfluencer: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<ObjectShape, {
@@ -15,8 +17,10 @@ export declare const IndividualInfoValidationSchema: yup.ObjectSchema<import("yu
     sourceIncome: import("yup/lib/object").RequiredObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     monthlyIncome: import("yup/lib/object").OptionalObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     employerLocation: import("yup/lib/object").OptionalObjectSchema<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>>>;
-    civilID: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
-    signatureFileId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    civilID: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    civilIDFile: any;
+    signatureFileId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    signatureFile: any;
     isPEP: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
     isInfluencer: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<ObjectShape, {
@@ -24,8 +28,10 @@ export declare const IndividualInfoValidationSchema: yup.ObjectSchema<import("yu
     sourceIncome: import("yup/lib/object").RequiredObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     monthlyIncome: import("yup/lib/object").OptionalObjectSchema<ObjectShape, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<ObjectShape>>;
     employerLocation: import("yup/lib/object").OptionalObjectSchema<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Partial<Record<keyof CountryCode, yup.AnySchema<any, any, any> | import("yup/lib/Reference").default<unknown> | import("yup/lib/Lazy").default<any, any>>>>>;
-    civilID: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
-    signatureFileId: yup.ArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined, any[] | undefined>;
+    civilID: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    civilIDFile: any;
+    signatureFileId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
+    signatureFile: any;
     isPEP: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
     isInfluencer: import("yup/lib/boolean").RequiredBooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject>;
 }>>>;

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

@@ -1,4 +1,5 @@
 import * as yup from 'yup';
+import { MAX_FILE_SIZE, VALID_FILE_FORMATS } from '../../../../constants';
 export var IndividualInfoValidationSchema = yup.object().shape({
     occupation: yup.object().required('alert_choose_occupation'),
     sourceIncome: yup.object().required('choose_any_source_of_income'),
@@ -19,8 +20,28 @@ export var IndividualInfoValidationSchema = yup.object().shape({
             return yup.object().optional();
         }
     }),
-    civilID: yup.array().optional(),
-    signatureFileId: yup.array().optional(),
+    civilID: yup.string().optional(),
+    civilIDFile: yup
+        .mixed()
+        .test({
+        test: function (value) {
+            if (!!value)
+                return VALID_FILE_FORMATS.includes(value === null || value === void 0 ? void 0 : value.type) && (value === null || value === void 0 ? void 0 : value.size) < MAX_FILE_SIZE ? true : this.createError({ message: 'alert_file_upload' });
+            return true;
+        }
+    })
+        .optional(),
+    signatureFileId: yup.string().optional(),
+    signatureFile: yup
+        .mixed()
+        .test({
+        test: function (value) {
+            if (!!value)
+                return VALID_FILE_FORMATS.includes(value === null || value === void 0 ? void 0 : value.type) && (value === null || value === void 0 ? void 0 : value.size) < MAX_FILE_SIZE ? true : this.createError({ message: 'alert_file_upload' });
+            return true;
+        }
+    })
+        .optional(),
     isPEP: yup.boolean().required('please_choose_relative_pep'),
     isInfluencer: yup.boolean().required('please_choose_are_you_influncer')
 });

package/build/features/shared/UploadFile/UploadFile.js

@@ -86,6 +86,6 @@ var UploadFile = function (_a) {
         else
             setShowFile(false);
     }, [isFileUploaded]);
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile || !!error }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: progress, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error, multiple: multiple }) }) })), _jsx(Collapse, __assign({ in: showFile && !error, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: progress, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error, multiple: multiple }) }) })), _jsx(Collapse, __assign({ in: showFile, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
 };
 export default UploadFile;

package/build/theme/typography.js

@@ -27,5 +27,5 @@ export var typography = {
     body2: { fontSize: '0.875rem' },
     button: { fontSize: '0.875rem' },
     caption: { fontSize: '0.75rem' },
-    overline: { fontSize: '0.5rem' }
+    overline: { fontSize: '0.75rem' }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.1.41-test",
+	"version": "2.1.42-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",

package/build/api/file.d.ts

@@ -1,13 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-export declare type UploadFileBody = {
-    file_link_create: boolean;
-    file?: File;
-    title: string | undefined;
-    purpose: string;
-    type?: string;
-};
-declare const fileService: {
-    uploadFile: (data: UploadFileBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
-    uploadFileInfo: (data: UploadFileBody, config?: AxiosRequestConfig) => Promise<any>;
-};
-export { fileService };

package/build/api/file.js

@@ -1,24 +0,0 @@
-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 { ENDPOINT_PATHS } from '../constants';
-import instance, { httpClient } from './axios';
-var uploadFileInfo = function (data, config) {
-    return httpClient(__assign({ method: 'post', url: "".concat(ENDPOINT_PATHS.FILES_PATH), data: data, headers: { 'Content-Type': 'multipart/form-data' } }, config));
-};
-var uploadFile = function (data, config) {
-    return instance.post("".concat(ENDPOINT_PATHS.FILES_PATH), data, __assign({ headers: { 'Content-Type': 'multipart/form-data' } }, config));
-};
-var fileService = {
-    uploadFile: uploadFile,
-    uploadFileInfo: uploadFileInfo
-};
-export { fileService };

package/build/features/connect/screens/Merchant/Segments.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-interface SegmentsProps {
-    show: boolean;
-    onListOpen?: () => void;
-    onListClose?: () => void;
-}
-declare const Segments: ({ show, onListOpen, onListClose }: SegmentsProps) => JSX.Element;
-export default Segments;