@tap-payments/auth-jsconnect 2.5.22-test → 3.0.0-test

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

@@ -27,9 +27,9 @@ import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
-import { BusinessType } from '../../../../@types';
+import { BusinessType, ThemeMode } from '../../../../@types';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import CheckIcon from '../../../shared/CheckIcon';
 import SimpleList from '../../../../components/SimpleList';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
@@ -39,21 +39,17 @@ import Collapse from '../../../../components/Collapse';
 import { isKW, isOtherLicense } from '../../../../utils';
 import { settingsSelector } from '../../../../app/settings';
 import { OTHER_CR_LICENSE } from '../../../../constants';
-var InputStyled = styled(InputSelect)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginBottom: theme.spacing(2.5)
-    });
-});
+import DropDownStyle from '../../../shared/DropDownStyle';
+var InputStyled = styled(InputSelect)(function () { return ({}); });
 var LicenseContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
 var LicenseNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ display: 'flex', color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ display: 'flex', color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var EntityLicenseList = function (_a) {
-    var rest = __rest(_a, []);
+    var isPopupMode = _a.isPopupMode, rest = __rest(_a, ["isPopupMode"]);
     var _b = useAppSelector(businessSelector), data = _b.data, error = _b.error;
     var settingsData = useAppSelector(settingsSelector).data;
     var businessTypeData = data.businessTypeData;
@@ -122,7 +118,9 @@ var EntityLicenseList = function (_a) {
     var selected = selectedEntityLicenseControl.field.value;
     var isCR = (selected === null || selected === void 0 ? void 0 : selected.type) === BusinessType.CR;
     var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : getLicenseNumber(selected);
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_entity_license'), onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_entity'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: entityLicenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_entity_license'), onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, InputProps: {
+                        endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl })
+                    }, placeholder: t('choose_license_entity'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(DropDownStyle, __assign({ isPopupMode: isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseLicenseList }, { children: _jsx(SimpleList, { isPopupMode: isPopupMode, searchKeyPath: 'legal_name?.en', list: entityLicenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selected) }, { children: isOtherLicense(item) ? t(getLicenseName(item)) : getLicenseFullName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selected) && _jsx(CheckIcon, {})] }));
                         } }) }))] }) })));
 };

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

@@ -19,7 +19,7 @@ import { settingsSelector } from '../../../../app/settings';
 import { isSA, removeAllOtherThanCharsNumbersAndSpace } from '../../../../utils';
 import { useAppSelector } from '../../../../hooks';
 import Collapse from '../../../../components/Collapse';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var BoxStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -29,7 +29,8 @@ var BoxStyled = styled(Box)(function (_a) {
         direction: theme.direction,
         fontFamily: theme.typography.fontFamily,
         overflow: 'hidden',
-        paddingBlockEnd: theme.spacing(2.5)
+        paddingBlockEnd: theme.spacing(1.5),
+        marginTop: theme.spacing(1.5)
     });
 });
 var EntityName = function (_a) {
@@ -50,6 +51,8 @@ var EntityName = function (_a) {
     var clearEntityName = function () {
         entityNameControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(BoxStyled, { children: _jsx(Input, { label: t('entity_legal_name_title'), onChange: handleChange, value: entityNameValue, required: !isSACountry, endAdornment: _jsx(EndAdornment, { value: entityNameValue, error: error, onClear: clearEntityName }), placeholder: t('entity_legal_name_placeholder'), warningType: 'alert', warningMessage: error && t(error) }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(BoxStyled, { children: _jsx(Input, { label: t('entity_legal_name_title'), onChange: handleChange, value: entityNameValue, required: !isSACountry, InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: entityNameValue, error: error, onClear: clearEntityName })
+                }, placeholder: t('entity_legal_name_placeholder'), helperText: error && t(error) }) }) })));
 };
 export default EntityName;

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

@@ -4,6 +4,7 @@ interface LicenseListProps {
     onSelectLicense?: (number: string) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
+    isPopupMode: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ ...rest }: LicenseListProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isPopupMode, ...rest }: LicenseListProps) => JSX.Element>;
 export default _default;

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

@@ -27,9 +27,9 @@ import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { useAppDispatch, useLanguage, useAppSelector } from '../../../../hooks';
-import { BusinessType } from '../../../../@types';
+import { BusinessType, ThemeMode } from '../../../../@types';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import CheckIcon from '../../../shared/CheckIcon';
 import SimpleList from '../../../../components/SimpleList';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
@@ -39,10 +39,11 @@ import Collapse from '../../../../components/Collapse';
 import { isOtherLicense, isSA } from '../../../../utils';
 import { OTHER_CR_LICENSE, OTHER_FL_LICENSE } from '../../../../constants';
 import { settingsSelector } from '../../../../app/settings';
+import DropDownStyle from '../../../shared/DropDownStyle';
 var InputStyled = styled(InputSelect)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginBottom: theme.spacing(2.5)
+        marginTop: theme.spacing(1.5)
     });
 });
 var LicenseContainer = styled(Box)(function () { return ({
@@ -50,10 +51,10 @@ var LicenseContainer = styled(Box)(function () { return ({
 }); });
 var LicenseNameText = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ display: 'flex', color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ display: 'flex', color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var LicenseList = function (_a) {
-    var rest = __rest(_a, []);
+    var isPopupMode = _a.isPopupMode, rest = __rest(_a, ["isPopupMode"]);
     var _b = useAppSelector(businessSelector), data = _b.data, error = _b.error;
     var settingsData = useAppSelector(settingsSelector).data;
     var businessTypeData = data.businessTypeData;
@@ -126,7 +127,9 @@ var LicenseList = function (_a) {
     var selected = selectedLicenseControl.field.value;
     var isCR = (selected === null || selected === void 0 ? void 0 : selected.type) === BusinessType.CR;
     var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : getLicenseNumber(selected);
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_any_license'), onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_any_license'), onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, InputProps: {
+                        endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl })
+                    }, placeholder: t('choose_license_cr'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(DropDownStyle, __assign({ isPopupMode: isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseLicenseList }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
                             return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selected) }, { children: isOtherLicense(item) ? t(getLicenseName(item)) : getLicenseFullName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selected) && _jsx(CheckIcon, {})] }));
                         } }) }))] }) })));
 };

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

@@ -18,7 +18,7 @@ import { removeAllOtherThanCharsAndNumber, isSA, isOtherLicense } from '../../..
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import Collapse from '../../../../components/Collapse';
 import { BusinessType } from '../../../../@types';
 import { useAppSelector } from '../../../../hooks';
@@ -48,7 +48,12 @@ var LicenseNumber = function (_a) {
     var length = !isSACountry ? KW_MAX_LICENSE_LENGTH : isCR ? CR_NUMBER_MAX_LENGTH : FL_NUMBER_MAX_LENGTH;
     var minLength = !isSACountry ? KW_MIN_LICENSE_LENGTH : isCR ? CR_MIN_LICENSE_LENGTH : FL_MIN_LICENSE_LENGTH;
     var label = isCR ? 'cr_number' : 'fl_number';
-    var showCheckIcon = !isSACountry ? (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) >= minLength : (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) === length;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t(label), required: !isSACountry, onChange: handleFLNumberChange, inputProps: { maxLength: length }, value: licenseNumberValue, endAdornment: showCheckIcon ? _jsx(CheckIcon, {}) : licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber }), placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), warningType: 'alert', warningMessage: error && t(error, { length: minLength }) }) }) })));
+    var showCheckIcon = (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) >= minLength;
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(Input, { label: t(label), required: !isSACountry, onChange: handleFLNumberChange, InputProps: {
+                    endAdornment: showCheckIcon ? _jsx(CheckIcon, {}) : licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber })
+                }, inputProps: {
+                    maxLength: length,
+                    readOnly: readOnly
+                }, value: licenseNumberValue, placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), helperText: error && t(error, { length: minLength }) }) })) })));
 };
 export default React.memo(LicenseNumber);

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

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import InfoIcon from '@mui/icons-material/Info';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import Collapse from '../../../../components/Collapse';
@@ -29,10 +29,11 @@ import { OTHER_CR_LICENSE, OTHER_FL_LICENSE } from '../../../../constants';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { isKW } from '../../../../utils';
+import { ThemeMode } from '../../../../@types';
 import { settingsSelector } from '../../../../app/settings';
 var LabelTextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.caption), { color: alpha(theme.palette.text.primary, 0.6), marginBlockEnd: theme.spacing(0.625) }));
+    return (__assign(__assign({}, theme.typography.caption), { color: theme.palette.text.secondary, marginBlockEnd: theme.spacing(0.625) }));
 });
 var RadioGroupStyled = styled(RadioGroup)(function (_a) {
     var theme = _a.theme;
@@ -50,27 +51,31 @@ var RadioStyled = styled(Radio)(function (_a) {
         }
     });
 });
-var LabelStyled = styled('span')(function () { return ({
-    display: 'inline-flex',
-    alignItems: 'center'
-}); });
+var LabelStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ display: 'inline-flex', alignItems: 'center' }, theme.typography.subtitle2));
+});
 export var InfoIconStyled = styled(InfoIcon)(function (_a) {
     var theme = _a.theme;
     return ({
+        position: 'relative',
+        top: theme.spacing(0.125),
         width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
+        height: theme.spacing(1.75),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4),
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.primary.contrastText,
         display: 'inline-flex'
     });
 });
 export var InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
     var theme = _a.theme;
     return ({
+        position: 'relative',
+        top: theme.spacing(0.125),
         width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
+        height: theme.spacing(1.75),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4),
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.disabled : theme.palette.primary.contrastText,
         display: 'inline-flex'
     });
 });
@@ -98,6 +103,6 @@ var LicenseType = function (_a) {
     };
     var selectedLicenseValue = selectedLicenseControl.field.value;
     var isFL = (selectedLicenseValue === null || selectedLicenseValue === void 0 ? void 0 : selectedLicenseValue.type) === BusinessType.FL;
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: isFL ? 9.5 : 1.5, pl: 2.5, pr: 2.5 } }, { children: [_jsxs(LabelTextStyled, { children: [t('signup_business_type_label'), _jsx(Mandatory, {})] }), _jsxs(RadioGroupStyled, __assign({ value: selectedLicenseValue != null ? ((selectedLicenseValue === null || selectedLicenseValue === void 0 ? void 0 : selectedLicenseValue.type) === BusinessType.FL ? BusinessType.FL : BusinessType.CR) : false, onChange: handleOnChange }, { children: [_jsx(RadioLabel, { value: BusinessType.FL, label: _jsxs(LabelStyled, { children: [t('homemaker_reg'), _jsx(Tooltip, __assign({ title: t('homemaker_reg_hint'), onMouseOver: function () { return setIsFLHovered(true); }, onMouseLeave: function () { return setIsFLHovered(false); }, onTouchStartCapture: function () { return setIsFLHovered(true); } }, { children: isFLHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) }), _jsx(RadioLabel, { value: BusinessType.CR, sx: { marginInlineEnd: '0px' }, label: _jsxs(LabelStyled, { children: [t('commercial_reg'), _jsx(Tooltip, __assign({ title: t('commercial_reg_hint'), onMouseOver: function () { return setIsCRHovered(true); }, onMouseLeave: function () { return setIsCRHovered(false); }, onTouchStartCapture: function () { return setIsCRHovered(true); } }, { children: isCRHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) })] }))] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { pb: isFL ? 9.5 : 2.5, pl: 3, pr: 3 } }, { children: [_jsxs(LabelTextStyled, { children: [t('signup_business_type_label'), _jsx(Mandatory, {})] }), _jsxs(RadioGroupStyled, __assign({ value: selectedLicenseValue != null ? ((selectedLicenseValue === null || selectedLicenseValue === void 0 ? void 0 : selectedLicenseValue.type) === BusinessType.FL ? BusinessType.FL : BusinessType.CR) : false, onChange: handleOnChange }, { children: [_jsx(RadioLabel, { value: BusinessType.FL, label: _jsxs(LabelStyled, { children: [t('homemaker_reg'), _jsx(Tooltip, __assign({ title: t('homemaker_reg_hint'), onMouseOver: function () { return setIsFLHovered(true); }, onMouseLeave: function () { return setIsFLHovered(false); }, onTouchStartCapture: function () { return setIsFLHovered(true); } }, { children: isFLHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) }), _jsx(RadioLabel, { value: BusinessType.CR, sx: { marginInlineEnd: '0px' }, label: _jsxs(LabelStyled, { children: [t('commercial_reg'), _jsx(Tooltip, __assign({ title: t('commercial_reg_hint'), onMouseOver: function () { return setIsCRHovered(true); }, onMouseLeave: function () { return setIsCRHovered(false); }, onTouchStartCapture: function () { return setIsCRHovered(true); } }, { children: isCRHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), control: _jsx(RadioStyled, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }) })] }))] })) })));
 };
 export default LicenseType;

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

@@ -9,17 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -32,7 +21,7 @@ import { settingsSelector } from '../../../../app/settings';
 import { clearError, businessSelector, createCivilIdAuth } from '../../../app/business/businessStore';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { deepCopy } from '../../../../utils';
 import IDNumber from './IDNumber';
 var FormStyled = styled(Form)(function () { return ({
@@ -45,13 +34,16 @@ var CivilID = function (_a) {
     var t = useTranslation().t;
     var _b = useAppSelector(businessSelector), data = _b.data, loading = _b.loading, error = _b.error;
     var settingsStore = useAppSelector(settingsSelector);
-    var _c = data.civilIdData, responseBody = _c.responseBody, defaultValues = __rest(_c, ["responseBody"]);
+    var _c = data.civilIdData, civilId = _c.civilId, termAndConditionChecked = _c.termAndConditionChecked;
     var methods = useForm({
         resolver: yupResolver(civilIDValidationSchema),
-        defaultValues: defaultValues,
+        defaultValues: {
+            civilId: civilId,
+            termAndConditionChecked: termAndConditionChecked
+        },
         mode: 'onChange'
     });
-    useSetFromDefaultValues(methods, defaultValues);
+    useSetFromDefaultValues(methods, data.civilIdData);
     React.useEffect(function () {
         handleClearError();
     }, [methods.formState.isValid]);
@@ -63,6 +55,6 @@ var CivilID = function (_a) {
             dispatch(clearError());
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, { sx: { mb: 7.5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'civil_id_title', description: 'civil_id_description' }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(IDNumber, { sx: { mb: 7.5, transition: 'mb 0.3s' } }), _jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') }))] })) })) })));
 };
 export default React.memo(CivilID);

package/build/features/business/screens/CivilID/IDNumber.js

@@ -9,30 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     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 '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import { CIVIL_ID_NUMBER_LENGTH } from '../../../../constants';
 import { EndAdornment } from '../../../shared/EndAdornment';
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1.25, 2.5)
-    });
-});
-var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
-});
 var IDNumber = React.forwardRef(function (_a, ref) {
     var _b;
     var sx = _a.sx;
@@ -53,6 +38,8 @@ var IDNumber = React.forwardRef(function (_a, ref) {
     };
     var idValue = civilIdControl.field.value;
     var error = (_b = civilIdControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
-    return (_jsxs(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('enter_civil_id') }) }), _jsx(Input, { dir: 'ltr', type: 'text', inputProps: { maxLength: CIVIL_ID_NUMBER_LENGTH }, onChange: handleIdChange, value: idValue, endAdornment: _jsx(EndAdornment, { value: idValue, error: error, onClear: clearIdNumber }), placeholder: t('civil_id_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true })] })));
+    return (_jsx(ScreenContainer, __assign({ ref: ref, sx: sx }, { children: _jsx(Input, { dir: 'ltr', type: 'text', label: t('enter_civil_id'), InputProps: {
+                endAdornment: _jsx(EndAdornment, { value: idValue, error: error, onClear: clearIdNumber })
+            }, inputProps: { maxLength: CIVIL_ID_NUMBER_LENGTH }, onChange: handleIdChange, value: idValue, placeholder: t('civil_id_placeholder'), helperText: error && t(error), required: true }) })));
 });
 export default React.memo(IDNumber);

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

@@ -35,19 +35,6 @@ export declare const LabelContainerStyled: import("@emotion/styled").StyledCompo
 } & 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") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, 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") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const BaseLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
     align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
     children?: React.ReactNode;
@@ -76,14 +63,11 @@ export declare const NameContainer: import("@emotion/styled").StyledComponent<im
 }, 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") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isSelected?: boolean | undefined;
 }, {}, {}>;
-export declare const RemainingCheck: import("@emotion/styled").StyledComponent<{
-    isVerified?: boolean | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 interface CustomerLocationsProps {
     show: boolean;
     onListOpen?: () => void;
     onListClose?: () => void;
+    isPopupMode: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ ...rest }: CustomerLocationsProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isPopupMode, ...rest }: CustomerLocationsProps) => JSX.Element>;
 export default _default;

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

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
@@ -32,13 +32,14 @@ import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import CheckIcon from '../../../shared/CheckIcon';
 import ExpandIcon from '../../../../components/ExpandIcon';
-import InputSelect from '../../../shared/InputSelect';
-import Tooltip from '../../../../components/Tooltip';
+import InputSelect from '../../../shared/TextFieldSelect';
 import SimpleList from '../../../../components/SimpleList';
 import { ScreenContainer } from '../../../shared/Containers';
 import { useLanguage, useAppSelector, useAppDispatch } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
 import Search from '../../../shared/Search';
+import DropDownStyle from '../../../shared/DropDownStyle';
 export var InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -65,37 +66,20 @@ export var LabelContainerStyled = styled(Box)(function (_a) {
         margin: theme.spacing(2.5, 2.5, 1.5, 2.5)
     });
 });
-export var InputLabelStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign({ margin: theme.spacing(2.5, 2.5, 1.5, 2.5), color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
-});
 export var BaseLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
 });
-var InputStyled = styled(InputSelect)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        paddingInlineEnd: theme.spacing(2.5)
-    });
-});
+var InputStyled = styled(InputSelect)(function () { return ({}); });
 export var NameContainer = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
     var theme = _a.theme, isSelected = _a.isSelected;
-    return (__assign(__assign({ color: theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
-});
-export var RemainingCheck = styled(CheckIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        color: theme.palette.success.dark,
-        display: 'flex',
-        alignItems: 'flex-end'
-    });
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25) }));
 });
 var SimpleListStyled = styled((SimpleList))(function () { return ({
     height: 'fit-content'
 }); });
 var customerLocations = function (_a) {
-    var rest = __rest(_a, []);
+    var isPopupMode = _a.isPopupMode, rest = __rest(_a, ["isPopupMode"]);
     var _b = React.useState([]), customerLocationsList = _b[0], setCustomerLocationsList = _b[1];
     var _c = React.useState(null), anchorEl = _c[0], setAnchorEl = _c[1];
     var t = useTranslation().t;
@@ -104,7 +88,6 @@ var customerLocations = function (_a) {
     var dispatch = useAppDispatch();
     var customerLocationsControl = useController({ name: 'customerLocations', control: control });
     var _d = useAppSelector(businessSelector), data = _d.data, error = _d.error;
-    var _e = React.useState(false), isHovered = _e[0], setIsHovered = _e[1];
     var activitiesData = data.activitiesData;
     var response = activitiesData.responseBody;
     var onOpenList = function (event) {
@@ -152,8 +135,10 @@ var customerLocations = function (_a) {
     };
     var customerLocationsValue = customerLocationsControl.field.value;
     var customerLocationSelected = customerLocationsValue === null || customerLocationsValue === void 0 ? void 0 : customerLocationsValue[0];
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(BaseLabelStyled, { children: t('select_customer_base') }), _jsx(Tooltip, __assign({ title: t('customer_base_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(InputStyled, { placeholder: t('choose_expected_sales'), value: (isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name.ar : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name.en) || '', onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsxs(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { searchKeyPath: 'name.en', list: customerLocationsList, placeholder: 'choose_customer_base', onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 1.5 } }, { children: [_jsx(InputStyled, { label: t('select_customer_base'), placeholder: t('choose_expected_sales'), InputProps: {
+                        endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl })
+                    }, value: (isAr ? customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name.ar : customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.name.en) || '', onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList }), _jsxs(DropDownStyle, __assign({ isPopupMode: isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseList }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { isPopupMode: isPopupMode, searchKeyPath: 'name.en', 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.name.ar : item.name.en })) })), item.id === (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(CheckIcon, {}), checkRemainingCondition(item) && item.id != (customerLocationSelected === null || customerLocationSelected === void 0 ? void 0 : customerLocationSelected.id) && _jsx(CheckIcon, {})] }));
-                            } })] }))] }) })));
+                            } })] }))] })) })));
 };
 export default React.memo(customerLocations);

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

@@ -17,17 +17,18 @@ import { useTranslation } from 'react-i18next';
 import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector, useSetFromDefaultValues } from '../../../../hooks';
-import { handlePrevScreenStep } from '../../../../app/settings';
+import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import { CustomerInfoValidation } from './validation';
 import Form from '../../../../components/Form';
 import Button from '../../../shared/Button';
 import { useLanguage } from '../../../../hooks';
 import CustomerLocations from './CustomerLocations';
 import ExpectedCustomers from './ExpectedCustomers';
-import ExpectedSales from './ExpectedSalesRange';
+import ExpectedSaleField from './ExpectedSaleField';
+import { DropDownMode } from '../../../../@types';
 import RefundPolicy from './RefundPolicy';
 import TransactionPolicy from './TransactionPolicy';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import Collapse from '../../../../components/Collapse';
 import { businessSelector, clearError, updateCustomersInfo } from '../../../app/business/businessStore';
 import { deepCopy } from '../../../../utils';
@@ -39,15 +40,16 @@ var ListType;
 (function (ListType) {
     ListType["CustomerLocationsList"] = "CustomerLocationsList";
     ListType["ExpectedCustomersList"] = "ExpectedCustomersList";
-    ListType["ExpectedSalesList"] = "ExpectedSalesList";
 })(ListType || (ListType = {}));
 var Customers = function (_a) {
     var _b, _c;
     var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
     var dispatch = useAppDispatch();
+    var settingsData = useAppSelector(settingsSelector).data;
     var _e = useAppSelector(businessSelector), data = _e.data, loading = _e.loading, error = _e.error;
     var _f = data.customersData, customerLocations = _f.customerLocations, expectedCustomer = _f.expectedCustomer, expectedSale = _f.expectedSale, refundPolicy = _f.refundPolicy, transactionPolicy = _f.transactionPolicy;
     var terms = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.brand) === null || _c === void 0 ? void 0 : _c.terms;
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var methods = useForm({
         resolver: yupResolver(CustomerInfoValidation),
         defaultValues: {
@@ -83,7 +85,8 @@ var Customers = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var handleMenuClick = function (flag) {
-        setListActive(flag);
+        if (!isPopupMode)
+            setListActive(flag);
     };
     React.useEffect(function () {
         if (error)
@@ -91,12 +94,11 @@ var Customers = function (_a) {
     }, [methods.formState.isValid]);
     var isCustomerLocationsListActive = listActive === ListType.CustomerLocationsList;
     var isExpectedCustomersListActive = listActive === ListType.ExpectedCustomersList;
-    var isExpectedSalesListActive = listActive === ListType.ExpectedSalesList;
-    var whenNotSelectCustomersLocation = !isExpectedCustomersListActive && !isExpectedSalesListActive;
-    var whenNotSelectExpectedCustomers = !isCustomerLocationsListActive && !isExpectedSalesListActive;
+    var whenNotSelectCustomersLocation = !isExpectedCustomersListActive;
+    var whenNotSelectExpectedCustomers = !isCustomerLocationsListActive;
     var whenNotSelectExpectedSales = !isCustomerLocationsListActive && !isExpectedCustomersListActive;
-    var isAnyListSelected = !isExpectedCustomersListActive && !isCustomerLocationsListActive && !isExpectedSalesListActive;
+    var isAnyListSelected = !isExpectedCustomersListActive && !isCustomerLocationsListActive;
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, { show: whenNotSelectCustomersLocation, onListOpen: function () { return handleMenuClick(ListType.CustomerLocationsList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedCustomers, { show: whenNotSelectExpectedCustomers, onListOpen: function () { return handleMenuClick(ListType.ExpectedCustomersList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedSales, { show: whenNotSelectExpectedSales, onListOpen: function () { return handleMenuClick(ListType.ExpectedSalesList); }, onListClose: function () { return handleMenuClick(); } }), _jsxs(Collapse, __assign({ in: isAnyListSelected }, { children: [_jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(Box, __assign({ sx: { mt: 2 } }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'one_last_step', description: 'business_customer_description', onBack: function () { return onBack(); } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(CustomerLocations, { isPopupMode: isPopupMode, show: whenNotSelectCustomersLocation, onListOpen: function () { return handleMenuClick(ListType.CustomerLocationsList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedCustomers, { isPopupMode: isPopupMode, show: whenNotSelectExpectedCustomers, onListOpen: function () { return handleMenuClick(ListType.ExpectedCustomersList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(ExpectedSaleField, { show: whenNotSelectExpectedSales }), _jsxs(Collapse, __assign({ in: isAnyListSelected }, { children: [_jsx(RefundPolicy, {}), _jsx(TransactionPolicy, {}), _jsx(Box, __assign({ sx: { mt: 2 } }, { children: _jsx(Button, __assign({ disableBack: true, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] }))] })) })) })));
 };
 export default React.memo(Customers);

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

@@ -3,6 +3,7 @@ interface ExpectedCustomersProps {
     show: boolean;
     onListOpen?: () => void;
     onListClose?: () => void;
+    isPopupMode: boolean;
 }
-declare const ExpectedCustomers: ({ ...rest }: ExpectedCustomersProps) => JSX.Element;
+declare const ExpectedCustomers: ({ isPopupMode, ...rest }: ExpectedCustomersProps) => JSX.Element;
 export default ExpectedCustomers;