@tap-payments/auth-jsconnect 1.0.10 → 1.0.14

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

@@ -38,6 +38,7 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     activities: yup.ArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: yup.NumberSchema<number | undefined, import("yup/lib/types").AnyObject, number | undefined>;
@@ -77,6 +78,7 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     activities: yup.ArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: yup.NumberSchema<number | undefined, import("yup/lib/types").AnyObject, number | undefined>;
@@ -116,4 +118,5 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;

package/build/features/business/screens/Activities/validation.js

@@ -7,11 +7,12 @@ export var ActivitiesValidationSchema = yup.object().shape({
     })),
     salesChannels: yup
         .array()
-        .min(1)
+        .min(1, 'choose_atleast_one_channel')
         .of(yup.object().shape({
         id: yup.number(),
         name: yup.string(),
         nameEn: yup.string()
     }))
-        .required('Is required')
+        .required('choose_atleast_one_channel'),
+    operationStartDate: yup.string().required('choose_any_business_date')
 });

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

@@ -69,11 +69,11 @@ var BusinessType = function (_a) {
     };
     var flList = [];
     var crList = CR_LIST;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SelectType, { show: !listActive, onSwitchToCR: function () { return setIsCR(true); }, onSwitchToFL: function () { return setIsCR(false); } }), _jsx(FreelanceLicense, { show: !isCR, list: flList, onListOpen: function () {
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(InputsContainerStyled, __assign({ listActive: listActive }, { children: [_jsx(SelectType, { show: !listActive, onSwitchToCR: function () { return setIsCR(true); }, onSwitchToFL: function () { return setIsCR(false); } }), _jsx(CompanyLicense, { show: isCR, list: crList, onListOpen: function () {
                                     setListActive(true);
                                 }, onListClose: function () {
                                     setListActive(false);
-                                } }), _jsx(CompanyLicense, { show: isCR, list: crList, onListOpen: function () {
+                                } }), _jsx(FreelanceLicense, { show: !isCR, list: flList, onListOpen: function () {
                                     setListActive(true);
                                 }, onListClose: function () {
                                     setListActive(false);

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

@@ -35,6 +35,6 @@ var CRNumber = function (_a) {
         crNumberControl.field.onChange('');
     };
     var crNumberValue = crNumberControl.field.value;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('cr_number_label'), onChange: handleFLNumberChange, inputProps: { maxLength: CR_NUMBER_LENGTH }, value: crNumberValue, endAdornment: (crNumberValue === null || crNumberValue === void 0 ? void 0 : crNumberValue.length) === CR_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (crNumberValue && _jsx(ClearIcon, { onClick: clearCRNumber })), placeholder: '0123456789', warningType: 'alert', warningMessage: (_b = crNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_commercial_register_no'), onChange: handleFLNumberChange, inputProps: { maxLength: CR_NUMBER_LENGTH }, value: crNumberValue, endAdornment: (crNumberValue === null || crNumberValue === void 0 ? void 0 : crNumberValue.length) === CR_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (crNumberValue && _jsx(ClearIcon, { onClick: clearCRNumber })), placeholder: '0123456789', warningType: 'alert', warningMessage: (_b = crNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) }) })));
 };
 export default React.memo(CRNumber);

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

@@ -98,7 +98,7 @@ var CompanyLicense = function (_a) {
     };
     var hasList = (licenseList === null || licenseList === void 0 ? void 0 : licenseList.length) > 0;
     var showCRNumber = !anchorEl;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('business_country_placeholder'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('company_license_placeholder'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleList, { searchKeyPath: 'crNumber', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('enter_commercial_register_no'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'crNumber', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
                                     return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selectedLicense) }, { children: isOtherLicense(item)
                                                         ? t(getLicenseNumber(item))
                                                         : isAr

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

@@ -35,6 +35,6 @@ var FLNumber = function (_a) {
         flNumberControl.field.onChange('');
     };
     var flNumberValue = flNumberControl.field.value;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('fl_number_label'), onChange: handleFLNumberChange, inputProps: { maxLength: FL_NUMBER_LENGTH }, value: flNumberValue, endAdornment: (flNumberValue === null || flNumberValue === void 0 ? void 0 : flNumberValue.length) === FL_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (flNumberValue && _jsx(ClearIcon, { onClick: clearFLNumber })), placeholder: '12345678', warningType: 'alert', warningMessage: (_b = flNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_license_no'), onChange: handleFLNumberChange, inputProps: { maxLength: FL_NUMBER_LENGTH }, value: flNumberValue, endAdornment: (flNumberValue === null || flNumberValue === void 0 ? void 0 : flNumberValue.length) === FL_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (flNumberValue && _jsx(ClearIcon, { onClick: clearFLNumber })), placeholder: '12345678', warningType: 'alert', warningMessage: (_b = flNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message }) }) })));
 };
 export default React.memo(FLNumber);

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

@@ -101,7 +101,7 @@ var FreelanceLicense = function (_a) {
     };
     var hasList = (licenseList === null || licenseList === void 0 ? void 0 : licenseList.length) > 0;
     var showFLNumber = !anchorEl;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('freelance_license_label'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('freelance_license_placeholder'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleList, { searchKeyPath: 'license_specialities[0].speciality.name_en', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('enter_freelance_license'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_fl'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'license_specialities[0].speciality.name_en', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
                                     return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selectedLicense) }, { children: isOtherLicense(item)
                                                         ? t(getLicenseNumber(item))
                                                         : isAr

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

@@ -101,6 +101,6 @@ var SelectType = function (_a) {
     var FLActive = type === BusinessType.FL;
     var CRActive = type === BusinessType.CR;
     var isAnyTypeActive = FLActive || CRActive;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !isAnyTypeActive }, { children: _jsx(TitleStyled, { children: t('select_your_business_type') }) })), _jsxs(RadioGroupStyled, __assign({ "aria-labelledby": 'business-type', name: 'business-type' }, { children: [_jsx(BTypeSwitch, { value: BusinessType.FL, control: _jsx(RadioStyled, { color: 'primary', onClick: handleSwitchToFL }), label: _jsx(FLIconStyled, { src: FLActive ? ICONS_NAMES.FL_ACTIVE_ICON : ICONS_NAMES.FL_ICON }), active: FLActive }), _jsx(BTypeSwitch, { value: BusinessType.CR, control: _jsx(RadioStyled, { color: 'primary', onClick: handleSwitchToCR }), label: _jsx(CRIconStyled, { src: CRActive ? ICONS_NAMES.CR_ACTIVE_ICON : ICONS_NAMES.CR_ICON }), active: CRActive })] })), _jsx(Collapse, __assign({ in: !isAnyTypeActive }, { children: _jsxs(TextBoxStyled, { children: [_jsx(TextStyled, __assign({ onClick: handleSwitchToFL, active: FLActive }, { children: t('freelancer_reg') })), _jsx(TextStyled, __assign({ onClick: handleSwitchToCR, active: CRActive }, { children: t('commercial_reg') }))] }) }))] }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !isAnyTypeActive }, { children: _jsx(TitleStyled, { children: t('signup_business_type_label') }) })), _jsxs(RadioGroupStyled, __assign({ "aria-labelledby": 'business-type', name: 'business-type' }, { children: [_jsx(BTypeSwitch, { value: BusinessType.FL, control: _jsx(RadioStyled, { color: 'primary', onClick: handleSwitchToFL }), label: _jsx(FLIconStyled, { src: FLActive ? ICONS_NAMES.FL_ACTIVE_ICON : ICONS_NAMES.FL_ICON }), active: FLActive }), _jsx(BTypeSwitch, { value: BusinessType.CR, control: _jsx(RadioStyled, { color: 'primary', onClick: handleSwitchToCR }), label: _jsx(CRIconStyled, { src: CRActive ? ICONS_NAMES.CR_ACTIVE_ICON : ICONS_NAMES.CR_ICON }), active: CRActive })] })), _jsx(Collapse, __assign({ in: !isAnyTypeActive }, { children: _jsxs(TextBoxStyled, { children: [_jsx(TextStyled, __assign({ onClick: handleSwitchToFL, active: FLActive }, { children: t('freelancer_reg') })), _jsx(TextStyled, __assign({ onClick: handleSwitchToCR, active: CRActive }, { children: t('commercial_reg') }))] }) }))] }) })));
 };
 export default React.memo(SelectType);

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

@@ -48,6 +48,6 @@ var Confirm = function () {
         defaultValues: defaultValues,
         mode: 'onChange'
     });
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputStyled, { label: t(isCR ? 'confirm_business_cr_label' : 'confirm_business_fl_label'), value: defaultValues.licenseNumber, disabled: true }), _jsx(InputStyled, { label: t('confirm_brand_name_label'), value: defaultValues.brandName, disabled: true }), _jsx(InputStyled, { label: t('confirm_legal_name_label'), value: defaultValues.legalName, disabled: true }), _jsx(Button, __assign({ isAr: isAr }, { children: t('confirm') }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputStyled, { label: t(isCR ? 'signup_business_cr_info_title' : 'signup_business_fl_info_title'), value: defaultValues.licenseNumber, disabled: true }), _jsx(InputStyled, { label: t('signup_brand_name_label'), value: defaultValues.brandName, disabled: true }), _jsx(InputStyled, { label: t('signup_legal_name_label'), value: defaultValues.legalName, disabled: true }), _jsx(Button, __assign({ isAr: isAr }, { children: t('confirm') }))] })) })) }));
 };
 export default React.memo(Confirm);

package/build/features/business/screens/Customers/CustomerLocations.js

@@ -115,7 +115,7 @@ var customerLocations = function (_a) {
     };
     var customerLocationsValue = customerLocationsControl.field.value;
     var customerLocationSelected = customerLocationsValue[customerLocationsValue.length - 1];
-    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, { children: t('select_customer_locations') }), _jsx(InputStyled, { readOnly: true, value: isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.nameAR : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: customerLocationsList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, { children: t('select_customer_base') }), _jsx(InputStyled, { readOnly: true, value: isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.nameAR : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: customerLocationsList, placeholder: 'choose_customer_base', onSelectItem: onSelectItem, renderItem: function (item) {
                         return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (customerLocationsValue === null || customerLocationsValue === void 0 ? void 0 : customerLocationsValue.id) }, { children: isAr ? item.nameAR : item.name })) })), item.id === (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(CheckIconStyled, {}), checkRemainingCondition(item) && item.id != (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(RemainingCheck, {})] }));
                     } }) }))] }));
 };

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

@@ -10,20 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import Icon from '../../../../components/Icon';
 import { useAppDispatch } from '../../../../hooks';
 import { handleNextScreenStep } from '../../../../app/settings';
 import { CustomerInfoValidation } from './validation';
 import Form from '../../../../components/Form';
-import Button from '../../../../components/Button';
-import { ICONS_NAMES } from '../../../../constants/assets';
-import Loader from '../../../../components/Loader';
+import Button from '../../../shared/Button';
 import { useLanguage } from '../../../../hooks';
 import CustomerLocations from './CustomerLocations';
 import ExpectedCustomers from './ExpectedCustomers';
@@ -31,51 +27,19 @@ import ExpectedSales from './ExpectedSalesRange';
 import { CUSTOMER_LOCATIONS, EXPECTED_CUSTOMERS, EXPECTED_SALES_RANGE } from '../../../../constants';
 import RefundPolicy from './RefundPolicy';
 import TransactionPolicy from './TransactionPolicy';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(2.5, 0, 2.5, 0),
-        overflow: 'hidden',
-        direction: theme.direction
-    });
-});
+import { ScreenContainer } from '../../../shared/Containers';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-var ButtonContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(2.5, 2.5, 0, 2.5)
-    });
-});
-var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
-    var theme = _a.theme, isAr = _a.isAr;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        paddingInlineStart: theme.spacing(1.5),
-        paddingInlineEnd: theme.spacing(0.5),
-        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
-    });
-});
-var LoaderStyled = styled(Loader)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginInlineStart: theme.spacing(-6.25),
-        '& .loader-box-container': {
-            marginInlineStart: theme.spacing(2.5)
-        }
-    });
-});
 var Customers = function (_a) {
     var dispatch = useAppDispatch();
     var methods = useForm({
         resolver: yupResolver(CustomerInfoValidation),
         defaultValues: {
             customerLocations: CUSTOMER_LOCATIONS,
-            expectedCustomers: EXPECTED_CUSTOMERS,
-            expectedSalesRange: EXPECTED_SALES_RANGE,
+            expectedCustomers: EXPECTED_CUSTOMERS[EXPECTED_CUSTOMERS.length - 1],
+            expectedSalesRange: EXPECTED_SALES_RANGE[EXPECTED_SALES_RANGE.length - 1],
             refundPolicy: false,
             transactionPolicy: false
         },
@@ -87,6 +51,6 @@ var Customers = function (_a) {
     };
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, {}), _jsx(ExpectedCustomers, {}), _jsx(ExpectedSales, {}), _jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(ButtonContainer, { children: _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', startIcon: _jsx(LoaderStyled, { innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: false }), endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, { children: t('next') })) })] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, {}), _jsx(ExpectedCustomers, {}), _jsx(ExpectedSales, {}), _jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(Button, __assign({ sx: { mt: 2 }, disabled: !methods.formState.isValid, isAr: isAr }, { children: t('next') }))] })) })) }));
 };
 export default React.memo(Customers);

package/build/features/business/screens/Customers/ExpectedCustomers.js

@@ -30,7 +30,7 @@ import { useLanguage } from '../../../../hooks';
 import SimpleList from '../../../../components/SimpleList';
 import { EXPECTED_CUSTOMERS } from '../../../../constants';
 import Collapse from '../../../../components/Collapse';
-import { BoxStyled, CheckIconStyled, ExpandIcon, InputLabelStyled, InputStyled, NameContainer, RemainingCheck } from './CustomerLocations';
+import { BoxStyled, CheckIconStyled, ExpandIcon, InputLabelStyled, InputStyled, NameContainer } from './CustomerLocations';
 var ListItemContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -59,20 +59,14 @@ var ExpectedCustomers = function (_a) {
         setAnchorEl(null);
         (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
     };
-    var checkRemainingCondition = function (item) {
-        return !!expectedCustomersValue.find(function (expectedCustomer) {
-            return expectedCustomer.id === item.id;
-        });
-    };
     var onSelectItem = function (expectedCustomers) {
         onCloseList();
-        var remaining = expectedCustomersList.filter(function (customers) { return customers.id <= expectedCustomers.id; });
-        expectedCustomersControl.field.onChange(remaining);
+        expectedCustomersControl.field.onChange(expectedCustomers);
     };
     var expectedCustomersValue = expectedCustomersControl.field.value;
-    var expectedCustomersSelected = expectedCustomersValue[expectedCustomersValue.length - 1];
+    var expectedCustomersSelected = expectedCustomersValue;
     return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, { children: t('expected_customers_to_serve') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.nameAR : expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedCustomersList, onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedCustomersValue === null || expectedCustomersValue === void 0 ? void 0 : expectedCustomersValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.id) && _jsx(CheckIconStyled, {}), checkRemainingCondition(item) && item.id != (expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.id) && _jsx(RemainingCheck, {})] }));
+                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedCustomersValue === null || expectedCustomersValue === void 0 ? void 0 : expectedCustomersValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedCustomersSelected === null || expectedCustomersSelected === void 0 ? void 0 : expectedCustomersSelected.id) && _jsx(CheckIconStyled, {})] }));
                     } }) }))] }));
 };
 export default ExpectedCustomers;

package/build/features/business/screens/Customers/ExpectedSalesRange.js

@@ -30,7 +30,7 @@ import { useLanguage } from '../../../../hooks';
 import { EXPECTED_SALES_RANGE } from '../../../../constants';
 import SimpleList from '../../../../components/SimpleList';
 import Collapse from '../../../../components/Collapse';
-import { InputLabelStyled, BoxStyled, CheckIconStyled, ExpandIcon, RemainingCheck, InputStyled, NameContainer } from './CustomerLocations';
+import { InputLabelStyled, BoxStyled, CheckIconStyled, ExpandIcon, InputStyled, NameContainer } from './CustomerLocations';
 var ListItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -62,13 +62,12 @@ var ExpectedSalesRange = function (_a) {
     };
     var onSelectItem = function (expectedSalesRange) {
         onCloseList();
-        var remaining = expectedSalesRangeList.filter(function (saleRange) { return saleRange.id <= expectedSalesRange.id; });
-        expectedSalesRangeControl.field.onChange(remaining);
+        expectedSalesRangeControl.field.onChange(expectedSalesRange);
     };
     var expectedSalesRangeValue = expectedSalesRangeControl.field.value || expectedSalesRangeList;
-    var expectedSalesRangeSelected = expectedSalesRangeValue[expectedSalesRangeValue.length - 1];
-    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, { children: t('expected_sales_range') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.nameAR : expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 100 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedSalesRangeList, onSelectItem: onSelectItem, renderItem: function (item) {
-                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.id) && _jsx(CheckIconStyled, {}), checkRemainingCondition(item) && item.id != (expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.id) && _jsx(RemainingCheck, {})] }));
+    var expectedSalesRangeSelected = expectedSalesRangeValue;
+    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, { children: t('expected_sales_yearly') }), _jsx(InputStyled, { readOnly: true, value: isAr ? expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.nameAR : expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.name, onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, placeholder: t('choose_expected_sales'), endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: expectedSalesRangeList, onSelectItem: onSelectItem, renderItem: function (item) {
+                        return (_jsxs(_Fragment, { children: [_jsx(ListItemContainer, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === (expectedSalesRangeValue === null || expectedSalesRangeValue === void 0 ? void 0 : expectedSalesRangeValue.id) }, { children: isAr ? item.nameAR : item.name })) }), item.id === (expectedSalesRangeSelected === null || expectedSalesRangeSelected === void 0 ? void 0 : expectedSalesRangeSelected.id) && _jsx(CheckIconStyled, {})] }));
                     } }) }))] }));
 };
 export default ExpectedSalesRange;

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

@@ -1,12 +1,4 @@
 import * as React from 'react';
-export declare const BoxStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    children?: React.ReactNode;
-    component?: React.ElementType<any> | undefined;
-    ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("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") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;

package/build/features/business/screens/Customers/RefundPolicy.js

@@ -21,15 +21,7 @@ import Text from '../../../../components/Text';
 import Link from '@mui/material/Link';
 import Warning from '../../../../components/Warning';
 import { EXTERNAL_LINKS } from '../../../../constants';
-export var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: theme.direction,
-        display: 'flex',
-        flexDirection: 'column',
-        marginBlockStart: theme.spacing(2.75)
-    });
-});
+import { ScreenContainer } from '../../../shared/Containers';
 export var ContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -81,6 +73,6 @@ var RefundPolicy = function () {
     var handleRefundCheckedChange = function (event, checked) {
         refundControl.field.onChange(checked);
     };
-    return (_jsxs(BoxStyled, { children: [_jsxs(ContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: refundChecked, onChange: handleRefundCheckedChange }), _jsxs(TextStyled, { children: [t('agree_on_refund_policy'), _jsx(LinkStyled, __assign({ href: isAr ? EXTERNAL_LINKS.REFUND_AR : EXTERNAL_LINKS.REFUND_EN, target: '_blank', underline: 'always' }, { children: t('refund_policy_compliance') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage })) }))] }));
+    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 2.75 } }, { children: [_jsxs(ContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: refundChecked, onChange: handleRefundCheckedChange }), _jsxs(TextStyled, { children: [t('agree_on_refund_policy'), _jsx(LinkStyled, __assign({ href: isAr ? EXTERNAL_LINKS.REFUND_AR : EXTERNAL_LINKS.REFUND_EN, target: '_blank', underline: 'always' }, { children: t('refund_policy_compliance') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] })));
 };
 export default RefundPolicy;

package/build/features/business/screens/Customers/TransactionPolicy.js

@@ -17,7 +17,8 @@ import { useLanguage } from '../../../../hooks';
 import { useController, useFormContext } from 'react-hook-form';
 import Warning from '../../../../components/Warning';
 import { EXTERNAL_LINKS } from '../../../../constants';
-import { BoxStyled, ContainerStyled, CheckboxStyled, TextStyled, LinkStyled } from './RefundPolicy';
+import { ContainerStyled, CheckboxStyled, TextStyled, LinkStyled } from './RefundPolicy';
+import { ScreenContainer } from '../../../shared/Containers';
 var CollapseStyled = styled(Collapse)(function () { return ({
     width: '100%'
 }); });
@@ -32,6 +33,6 @@ var TransactionPolicy = function () {
     var handleTransactionCheckedChange = function (event, checked) {
         transactionControl.field.onChange(checked);
     };
-    return (_jsxs(BoxStyled, { children: [_jsxs(ContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: transactionChecked, onChange: handleTransactionCheckedChange }), _jsxs(TextStyled, { children: [t('agree_on_transaction_policy'), _jsx(LinkStyled, __assign({ href: isAr ? EXTERNAL_LINKS.TRANSACTION_AR : EXTERNAL_LINKS.TRANSACTION_EN, target: '_blank', underline: 'always' }, { children: t('transaction_policy') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsxs(ContainerStyled, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: transactionChecked, onChange: handleTransactionCheckedChange }), _jsxs(TextStyled, { children: [t('agree_on_chargeback_policy'), _jsx(LinkStyled, __assign({ href: isAr ? EXTERNAL_LINKS.TRANSACTION_AR : EXTERNAL_LINKS.TRANSACTION_EN, target: '_blank', underline: 'always' }, { children: t('chargeback_policy') }))] })] }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] }));
 };
 export default TransactionPolicy;

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

@@ -1,20 +1,20 @@
 import * as yup from 'yup';
 export declare const CustomerInfoValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     customerLocations: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedCustomers: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedSalesRange: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
+    expectedCustomers: any;
+    expectedSalesRange: any;
     refundPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
     transactionPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     customerLocations: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedCustomers: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedSalesRange: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
+    expectedCustomers: any;
+    expectedSalesRange: any;
     refundPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
     transactionPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     customerLocations: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedCustomers: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
-    expectedSalesRange: import("yup/lib/array").RequiredArraySchema<yup.AnySchema<any, any, any>, import("yup/lib/types").AnyObject, any[] | undefined>;
+    expectedCustomers: any;
+    expectedSalesRange: any;
     refundPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
     transactionPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
 }>>>;

package/build/features/business/screens/Customers/validation.js

@@ -1,8 +1,13 @@
 import * as yup from 'yup';
+var objectElements = {
+    id: yup.number(),
+    name: yup.string(),
+    nameAR: yup.string()
+};
 export var CustomerInfoValidation = yup.object().shape({
-    customerLocations: yup.array().required(''),
-    expectedCustomers: yup.array().required(''),
-    expectedSalesRange: yup.array().required(''),
-    refundPolicy: yup.boolean().required().isTrue('Please accept the refund policy'),
-    transactionPolicy: yup.boolean().required().isTrue('Please accept the transaction policy')
+    customerLocations: yup.array().required('please_choose_base'),
+    expectedCustomers: yup.object().shape(objectElements).required(''),
+    expectedSalesRange: yup.object().shape(objectElements).required('select_expected_sales'),
+    refundPolicy: yup.boolean().required().isTrue('refund_policy_error'),
+    transactionPolicy: yup.boolean().required().isTrue('transaction_policy_error')
 });

package/build/features/business/screens/IDBOD/DOB.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 interface BODProps {
+    onDateClicked?: (flag: boolean) => void;
 }
-declare const _default: React.MemoExoticComponent<({}: BODProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateClicked }: BODProps) => JSX.Element>;
 export default _default;

package/build/features/business/screens/IDBOD/DOB.js

@@ -30,15 +30,18 @@ var InputLabelStyled = styled(Text)(function (_a) {
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption), { cursor: 'pointer' }));
 });
 var BOD = function (_a) {
+    var _b;
+    var onDateClicked = _a.onDateClicked;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var dobControl = useController({ control: control, name: 'dob' });
     var handleBirthDateChange = function (data) {
         dobControl.field.onChange(data);
     };
+    var dateValue = (_b = dobControl === null || dobControl === void 0 ? void 0 : dobControl.field) === null || _b === void 0 ? void 0 : _b.value;
     return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { defaultValue: new Date('2000-01-01'), readOnly: true, locale: 'en', onDateChange: handleBirthDateChange })] }));
+                    } } }, { children: t('date_of_birth') })), _jsx(DatePicker, { readOnly: true, defaultValue: dateValue ? new Date(dateValue) : new Date(), dir: 'ltr', locale: 'en', onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); }, onDateChange: handleBirthDateChange })] }));
 };
 export default React.memo(BOD);

package/build/features/business/screens/IDBOD/ID.js

@@ -1,52 +1,13 @@
-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, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import { styled, alpha } from '@mui/material/styles';
-import Text from '../../../../components/Text';
-import Input from '../../../../components/Input';
-import ClearIcon from '@mui/icons-material/Clear';
+import { ScreenContainer } from '../../../shared/Containers';
+import Input from '../../../shared/Input';
+import ClearIcon from '../../../shared/ClearIcon';
+import CheckIcon from '../../../shared/CheckIcon';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { ID_NUMBER_LENGTH } from '../../../../constants';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        direction: theme.direction
-    });
-});
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
-});
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        padding: theme.spacing(0, 2, 0, 0)
-    });
-});
-var ClearIconStyled = styled(ClearIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-        cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
-    });
-});
 var IDNumber = function (_a) {
     var _b;
     var t = useTranslation().t;
@@ -61,9 +22,7 @@ var IDNumber = function (_a) {
         nidControl.field.onChange('');
     };
     var nidValue = nidControl.field.value;
-    return (_jsxs(BoxStyled, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
-                        var spacing = _a.spacing;
-                        return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('id_number_label') })), _jsx(InputStyled, { inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: nidValue && _jsx(ClearIconStyled, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message })] }));
+    var error = (_b = nidControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
+    return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_national_id'), inputProps: { maxLength: ID_NUMBER_LENGTH }, onChange: handleIdChange, value: nidValue, endAdornment: !error && nidValue ? _jsx(CheckIcon, {}) : nidValue && _jsx(ClearIcon, { onClick: clearIdNumber }), placeholder: '0000000000', warningType: 'alert', warningMessage: error && t(error, { number: '1' }) }) }));
 };
 export default React.memo(IDNumber);

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

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import ID from './ID';
@@ -19,52 +18,18 @@ import DOB from './DOB';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { NIDValidationSchema } from './validation';
-import Loader from '../../../../components/Loader';
-import { ICONS_NAMES } from '../../../../constants';
-import Button from '../../../../components/Button';
 import { useAppDispatch, useLanguage } from '../../../../hooks';
 import { handleNextScreenStep } from '../../../../app/settings';
-import Icon from '../../../../components/Icon';
 import Form from '../../../../components/Form';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        direction: theme.direction,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden'
-    });
-});
-var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
-    var theme = _a.theme, isAr = _a.isAr;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        paddingInlineStart: theme.spacing(1.5),
-        paddingInlineEnd: theme.spacing(0.5),
-        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
-    });
-});
-var ButtonContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(5, 2.5, 2.5, 2.5)
-    });
-});
-var LoaderStyled = styled(Loader)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginInlineStart: theme.spacing(-6.25),
-        '& .loader-box-container': {
-            marginInlineStart: theme.spacing(2.5)
-        }
-    });
-});
+import Button from '../../../shared/Button';
+import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
 var IDBOD = function (_a) {
+    var _b = React.useState(false), collapse = _b[0], setCollapse = _b[1];
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var t = useTranslation().t;
@@ -72,7 +37,7 @@ var IDBOD = function (_a) {
         resolver: yupResolver(NIDValidationSchema),
         defaultValues: {
             nid: '',
-            dob: ''
+            dob: '1998-08-22'
         },
         mode: 'onChange'
     });
@@ -80,6 +45,9 @@ var IDBOD = function (_a) {
         console.log('data', data);
         dispatch(handleNextScreenStep());
     };
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(ID, {}), _jsx(DOB, {}), _jsx(ButtonContainer, { children: _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', startIcon: _jsx(LoaderStyled, { innerColor: 'white', outerColor: 'white', size: 30 }), endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, { children: t('next') })) })] })) })) }));
+    var handleCollapseOpenClose = function (flag) {
+        setCollapse(flag);
+    };
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(ID, {}) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ sx: { mt: 6 }, isAr: isAr, disabled: !methods.formState.isValid }, { children: t('next') })) }))] })) })) }));
 };
 export default React.memo(IDBOD);

package/build/features/business/screens/IDBOD/validation.js

@@ -1,5 +1,9 @@
 import * as yup from 'yup';
 export var NIDValidationSchema = yup.object().shape({
-    dob: yup.string().min(5).required('DOB is required'),
-    nid: yup.string().min(8).max(10).required('NID is required')
+    dob: yup.string().min(5).required('enter_valid_birth_date'),
+    nid: yup
+        .string()
+        .min(8, 'signup_invalid_national_id_format')
+        .max(10, 'signup_invalid_national_id_format')
+        .required('signup_invalid_national_id')
 });