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

package/build/features/connectExpress/screens/CivilIDMissed/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 { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
-import Text from '../../../../components/Text';
 import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
 import { CIVIL_ID_NUMBER_LENGTH } from '../../../../constants';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
 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;
@@ -49,6 +34,6 @@ 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', label: t('enter_civil_id'), type: 'text', 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/connectExpress/screens/CollectBusinessInfo/BrandName.js

@@ -45,60 +45,23 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-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 { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { debounce } from 'lodash-es';
 import axios from 'axios';
-import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
-import InfoIcon from '@mui/icons-material/Info';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
-import Text from '../../../../components/Text';
-import Tooltip from '../../../../components/Tooltip';
 import Collapse from '../../../../components/Collapse';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { EndAdornment } from '../../../shared/EndAdornment';
 import { ScreenContainer } from '../../../shared/Containers';
 import { checkBrandNameAvailabilityAsync, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
-var LabelContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'space-between',
-        padding: theme.spacing(0, 2.5, 1, 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 InfoOutlinedIconStyled = styled(InfoOutlinedIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
-        cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
-    });
-});
-var InfoIconStyled = styled(InfoIcon)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        width: theme.spacing(2.75),
-        height: theme.spacing(2.125),
-        cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
-    });
-});
 var cancelToken = null;
 var BrandName = function (_a) {
     var _b;
     var show = _a.show, brandNameChecking = _a.brandNameChecking, fetchingBrandName = _a.fetchingBrandName, readOnly = _a.readOnly;
     var dispatch = useAppDispatch();
-    var _c = React.useState(false), isHovered = _c[0], setIsHovered = _c[1];
     var t = useTranslation().t;
     var data = useAppSelector(connectExpressSelector).data;
     var control = useFormContext().control;
@@ -133,6 +96,8 @@ var BrandName = function (_a) {
     var clearBrandName = function () {
         brandControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 2.5 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, readOnly: readOnly, value: brandNameValue || '', placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: brandNameValue, loading: brandNameChecking, error: error, onClear: clearBrandName }) })] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 1.5 } }, { children: _jsx(Input, { label: t('brand_name_hint'), onChange: handleBrandNameChange, InputProps: { endAdornment: _jsx(EndAdornment, { value: brandNameValue, loading: brandNameChecking, error: error, onClear: clearBrandName }) }, inputProps: {
+                    readOnly: readOnly
+                }, value: brandNameValue || '', placeholder: t('signup_brand_name_placeholder'), helperText: error && t(error) }) })) })));
 };
 export default React.memo(BrandName);

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

@@ -16,10 +16,11 @@ import { useTranslation } from 'react-i18next';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useAppDispatch, useAppSelector, useSetFromDefaultValues, useLanguage, useFormReadOnly, useFormErrorAndUpdateReadOnly, useExcludeReadOnlyFelids } from '../../../../hooks';
 import { deepCopy, isSA } from '../../../../utils';
+import { DropDownMode } from '../../../../@types';
 import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings';
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { connectExpressSelector, clearError, updateLeadBusinessDataAsync } from '../../../app/connectExpress/connectExpressStore';
 import Button from '../../../shared/Button';
 import { KWBusinessDataSchema, BusinessDataSchema } from './validation';
@@ -31,6 +32,7 @@ var CollectBusinessInfo = function (_a) {
     var settingsData = useAppSelector(settingsSelector).data;
     var responseData = data.responseData, businessData = data.businessData, isLeadIdPassed = data.isLeadIdPassed;
     var isBrandNameAvailable = (responseData || {}).isBrandNameAvailable;
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var selectedLicense = businessData.selectedLicense, licenseNumber = businessData.licenseNumber, brandName = businessData.brandName, termAndConditionChecked = businessData.termAndConditionChecked;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
@@ -74,10 +76,12 @@ var CollectBusinessInfo = function (_a) {
     };
     var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
     var disabled = brandErrChecks || brandNameChecking || isBrandNameAvailable == false;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandName, { readOnly: readOnly['brandName'], show: true, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(LicenseList, { readOnly: readOnly['selectedLicense'], onListOpen: function () {
-                            setListActive(true);
+    return (_jsx(ContainerWithHeader, __assign({ title: t('business_details'), description: 'business_details_description', onBack: function () { return onBack(); } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandName, { readOnly: readOnly['brandName'], show: true, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(LicenseList, { isPopupMode: isPopupMode, readOnly: readOnly['selectedLicense'], onListOpen: function () {
+                            if (!isPopupMode)
+                                setListActive(true);
                         }, onListClose: function () {
-                            setListActive(false);
-                        } }), _jsx(TAC, { show: !isLeadIdPassed, readOnly: readOnly['termAndConditionChecked'] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+                            if (!isPopupMode)
+                                setListActive(false);
+                        } }), _jsx(TAC, { show: !isLeadIdPassed, readOnly: readOnly['termAndConditionChecked'] }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ disableBack: true, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) })));
 };
 export default React.memo(CollectBusinessInfo);

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

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

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

@@ -27,7 +27,7 @@ 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 { isOtherLicense, isSA } from '../../../../utils';
 import { settingsSelector } from '../../../../app/settings';
 import { OTHER_CR_LICENSE, OTHER_FL_LICENSE } from '../../../../constants';
@@ -36,15 +36,16 @@ import Text from '../../../../components/Text';
 import ExpandIcon from '../../../../components/ExpandIcon';
 import Collapse from '../../../../components/Collapse';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import InputSelect from '../../../shared/InputSelect';
+import InputSelect from '../../../shared/TextFieldSelect';
 import CheckIcon from '../../../shared/CheckIcon';
 import { connectExpressSelector, clearError } from '../../../app/connectExpress/connectExpressStore';
+import DropDownStyle from '../../../shared/DropDownStyle';
 import LicenseNumber from './LicenseNumber';
 import LicenseType from './LicenseType';
 var InputStyled = styled(InputSelect)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginBottom: theme.spacing(2.5)
+        marginBottom: theme.spacing(1.5)
     });
 });
 var LicenseContainer = styled(Box)(function () { return ({
@@ -52,10 +53,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 readOnly = _a.readOnly, rest = __rest(_a, ["readOnly"]);
+    var readOnly = _a.readOnly, isPopupMode = _a.isPopupMode, rest = __rest(_a, ["readOnly", "isPopupMode"]);
     var _b = useAppSelector(connectExpressSelector), data = _b.data, error = _b.error;
     var settingsData = useAppSelector(settingsSelector).data;
     var businessData = data.businessData, responseData = data.responseData;
@@ -132,7 +133,11 @@ var LicenseList = function (_a) {
     var licenseReadonly = !isOtherLicense(selected);
     var isCR = (selected === null || selected === void 0 ? void 0 : selected.type) === BusinessType.CR;
     var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : getLicenseNumber(selected);
-    return (_jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: isSACountry }, { children: [_jsx(InputStyled, { label: t('choose_any_license'), readOnly: readOnly, 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 (_jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: isSACountry }, { children: [_jsx(InputStyled, { label: t('choose_any_license'), InputProps: {
+                            endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl })
+                        }, inputProps: {
+                            readOnly: readOnly
+                        }, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, placeholder: t('choose_license_cr'), 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: 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, {})] }));
                             } }) }))] })), _jsx(LicenseType, { show: show && !isSACountry, readOnly: readOnly }), _jsx(LicenseNumber, { show: !isSACountry ? isCR : show, readOnly: licenseReadonly })] }));
 };

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

@@ -18,7 +18,7 @@ import { removeAllOtherThanCharsAndNumber, isSA } from '../../../../utils';
 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';
@@ -46,7 +46,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 || (readOnly && licenseNumberValue) ? _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, { children: _jsx(Input, { label: t(label), required: !isSACountry, onChange: handleFLNumberChange, InputProps: {
+                    endAdornment: showCheckIcon || (readOnly && licenseNumberValue) ? _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/connectExpress/screens/CollectBusinessInfo/TAC.js

@@ -14,7 +14,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Link from '@mui/material/Link';
 import { settingsSelector } from '../../../../app/settings';
 import { EXTERNAL_LINKS, TAP_WEBSITE } from '../../../../constants';
@@ -25,37 +25,29 @@ import Warning from '../../../../components/Warning';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
 export var TACContainerStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
-    var theme = _a.theme, readOnly = _a.readOnly;
-    return (__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingInlineStart: theme.spacing(2.5) }, (readOnly && {
+    var readOnly = _a.readOnly;
+    return (__assign({ display: 'flex', flexDirection: 'row', alignItems: 'center' }, (readOnly && {
         opacity: '0.6'
     })));
 });
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign({ color: alpha(theme.palette.text.primary, 0.4), fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre-line', height: 'fit-content' }, theme.typography.body2));
+    return (__assign({ color: theme.palette.secondary.main, fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'pre-line', height: 'fit-content' }, theme.typography.caption));
 });
 var LinkStyled = styled(Link)(function (_a) {
     var theme = _a.theme;
     return ({
         color: theme.palette.primary.main,
         fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: theme.spacing(0)
+        letterSpacing: theme.spacing(0),
+        textDecorationColor: theme.palette.primary.main,
+        textDecorationThickness: theme.spacing(0.125)
     });
 });
 var CheckboxStyled = styled(CheckBox)(function (_a) {
     var theme = _a.theme;
     return ({
-        margin: theme.spacing(0),
-        padding: theme.spacing(0),
-        marginInlineEnd: theme.spacing(1.5),
-        color: theme.palette.primary.main,
-        '& .MuiSvgIcon-root': {
-            fontSize: theme.spacing(3.75)
-        },
-        '&.Mui-checked': {
-            color: theme.palette.text.primary,
-            borderRadius: theme.spacing(2.5)
-        }
+        marginInlineStart: theme.spacing(-1.125)
     });
 });
 var CollapseStyled = styled(Collapse)(function () { return ({
@@ -77,6 +69,6 @@ var TAC = function (_a) {
             return;
         tacControl.field.onChange(checked);
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsxs(TACContainerStyled, __assign({ readOnly: readOnly }, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] })), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, ml: 3, mr: 3 } }, { children: [_jsxs(TACContainerStyled, __assign({ readOnly: readOnly }, { children: [_jsx(CheckboxStyled, { disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: tacChecked, onChange: handleTACCheckedChange }), _jsxs(TextStyled, { children: [t('read_agree_terms_and_conditions_message'), _jsx(LinkStyled, __assign({ href: isAr ? TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_AR : TAP_WEBSITE + countryCode + EXTERNAL_LINKS.TOS_EN, target: '_blank', underline: 'always' }, { children: t('terms_and_conditions_link_title') }))] })] })), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage && t(warningMessage) })) }))] })) })));
 };
 export default React.memo(TAC);

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

@@ -16,7 +16,7 @@ import { useForm, FormProvider } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector, useExcludeReadOnlyFelids, useFormErrorAndUpdateReadOnly, useFormReadOnly, useSetFromDefaultValues } from '../../../../hooks';
-import { AuthForType } from '../../../../@types';
+import { AuthForType, DropDownMode } from '../../../../@types';
 import { useLanguage } from '../../../../hooks';
 import { deepCopy, isKW } from '../../../../utils';
 import { countriesCode } from '../../../../constants';
@@ -24,7 +24,7 @@ import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import Button from '../../../shared/Button';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { clearError, connectExpressSelector, resetIndividualScreen, updateLeadIndividualAsync } from '../../../app/connectExpress/connectExpressStore';
 import MobileNumber from './MobileNumber';
 import Email from './Email';
@@ -50,6 +50,7 @@ var CollectIndividualInfo = function (_a) {
     var contact = ((responseData === null || responseData === void 0 ? void 0 : responseData.leadData) || {}).contact;
     var countryCode = individualData.countryCode;
     var isEmailAvailable = (responseData || {}).isEmailAvailable;
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var methods = useForm({
         resolver: yupResolver(CollectIndividualInfoValidation),
         defaultValues: individualData,
@@ -78,7 +79,8 @@ var CollectIndividualInfo = function (_a) {
             dispatch(clearError());
     }, [methods.formState.isValid]);
     var handleMenuListClick = function () {
-        setListActive(!listActive);
+        if (!isPopupMode)
+            setListActive(!listActive);
     };
     React.useEffect(function () {
         if (isEmailAvailable === false)
@@ -89,6 +91,6 @@ var CollectIndividualInfo = function (_a) {
     var emailErrChecks = !methods.formState.isValid || !!methods.formState.errors.email || !!error;
     var disabled = emailErrChecks || emailChecking || !isEmailValid;
     var emailReadOnly = readOnly['email'] && !((_b = methods.getFieldState('email').error) === null || _b === void 0 ? void 0 : _b.message) && !methods.getFieldState('email').isDirty;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { readOnly: readOnly['name'], show: !listActive }), _jsx(MobileNumber, { readOnly: readOnly['mobile'], show: true, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { readOnly: emailReadOnly, show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: "".concat(t('hi'), ", ").concat(methods.watch('name')), description: 'individual_info_description', onBack: function () { return onBack(); } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { readOnly: readOnly['name'], show: !listActive }), _jsx(MobileNumber, { isPopupMode: isPopupMode, readOnly: readOnly['mobile'], show: true, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { readOnly: emailReadOnly, show: !listActive, fetchingEmail: function (v) { return setEmailChecking(v); }, emailChecking: emailChecking }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) })));
 };
 export default React.memo(CollectIndividualInfo);

package/build/features/connectExpress/screens/CollectIndividualInfo/Email.js

@@ -55,7 +55,7 @@ import { styled } from '@mui/material/styles';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { EndAdornment } from '../../../shared/EndAdornment';
 import { checkEmailAvailabilityAsync, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
 var InputStyled = styled(Input)(function () { return ({
@@ -100,6 +100,10 @@ var Email = function (_a) {
     var clearNumber = function () {
         emailControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(InputStyled, { label: t('signup_email_lable'), value: emailValue, readOnly: readOnly, onEnterPressed: function (e) { return e.preventDefault(); }, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: emailValue, loading: emailChecking, error: error, onClear: clearNumber }) }) }) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(InputStyled, { label: t('signup_email_lable'), value: emailValue, InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: emailValue, loading: emailChecking, error: error, onClear: clearNumber })
+                }, inputProps: {
+                    readOnly: readOnly
+                }, onEnterPressed: function (e) { return e.preventDefault(); }, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), helperText: error && t(error) }) }) })));
 };
 export default React.memo(Email);

package/build/features/connectExpress/screens/CollectIndividualInfo/MobileNumber.d.ts

@@ -6,6 +6,7 @@ interface MobileNumberProps {
     onListOpen?: () => void;
     onListClose?: () => void;
     readOnly?: boolean;
+    isPopupMode: boolean;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MobileNumberProps & React.RefAttributes<unknown>>>;
 export default _default;

package/build/features/connectExpress/screens/CollectIndividualInfo/MobileNumber.js

@@ -25,9 +25,10 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
 import SimpleList from '../../../../components/SimpleList';
@@ -35,16 +36,9 @@ import ExpandIcon from '../../../../components/ExpandIcon';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
 import ScreenContainer from '../../../shared/Containers/ScreenContainer';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import Search from '../../../shared/Search';
-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)
-    });
-});
+import DropDownStyle from '../../../shared/DropDownStyle';
 var CountryItemContainer = styled(Box)(function () { return ({
     display: 'flex'
 }); });
@@ -52,35 +46,42 @@ var CountryCodeText = 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), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { width: theme.spacing(10), textAlign: 'start', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight }));
 });
 var CountryNameText = 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) }));
+    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 CountryCodeStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ cursor: 'pointer' }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75) }));
+var CountryCodeStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly;
+    return (__assign(__assign({ cursor: readOnly ? 'auto' : 'pointer', color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.body2), { fontWeight: theme.typography.fontWeightRegular, display: 'flex', alignItems: 'center', minWidth: theme.spacing(8.75), position: 'relative', bottom: theme.spacing(-1.125) }));
 });
-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 ExpandIconStyled = styled(ExpandIcon, { shouldForwardProp: function (prop) { return prop !== 'readOnly'; } })(function (_a) {
+    var theme = _a.theme, readOnly = _a.readOnly;
+    return ({
+        cursor: readOnly ? 'auto' : 'pointer',
+        marginInlineStart: theme.spacing(1)
+    });
 });
-var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
+var CodeExpandIconStyled = styled(ExpandIconStyled)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginInlineStart: theme.spacing(1)
+        width: theme.spacing(0.875),
+        height: theme.spacing(0.875)
     });
 });
 var InputStyled = styled(Input)(function () { return ({
     direction: 'ltr',
     '& .MuiInputBase-input': {
         cursor: 'auto'
+    },
+    label: {
+        transformOrigin: 'top left'
     }
 }); });
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var countries = _a.countries, readOnly = _a.readOnly, rest = __rest(_a, ["countries", "readOnly"]);
+    var countries = _a.countries, readOnly = _a.readOnly, isPopupMode = _a.isPopupMode, rest = __rest(_a, ["countries", "readOnly", "isPopupMode"]);
     var _e = React.useState(countries || []), countriesCode = _e[0], setCountries = _e[1];
     var _f = React.useState(null), anchorEl = _f[0], setAnchorEl = _f[1];
     var t = useTranslation().t;
@@ -142,11 +143,17 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
         });
         setCountries(filteredCountries);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(InputStyled, { readOnly: readOnly, inputProps: { maxLength: requiredLen }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () {
-                            if (readOnly)
-                                return;
-                            toggleCountryList();
-                        } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { pb: 1.5 } }, { children: [_jsx(InputStyled, { label: t('signup_enter_mobile'), InputProps: {
+                        startAdornment: (_jsxs(CountryCodeStyled, __assign({ readOnly: readOnly, onClick: function () {
+                                if (readOnly)
+                                    return;
+                                toggleCountryList();
+                            } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(CodeExpandIconStyled, { readOnly: readOnly, anchorEl: !!anchorEl })] }))),
+                        endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber }))
+                    }, inputProps: {
+                        maxLength: requiredLen,
+                        readOnly: readOnly
+                    }, type: 'tel', disabled: !!anchorEl, onClick: onCloseCountryList, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, placeholder: "".concat(isSA ? '5' : '0', "00000000"), helperText: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsxs(DropDownStyle, __assign({ isPopupMode: isPopupMode, anchorEl: anchorEl, onClosePopup: onCloseCountryList }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { isPopupMode: isPopupMode, searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
                             } })] }))] })) })));
 });

package/build/features/connectExpress/screens/CollectIndividualInfo/Name.js

@@ -17,7 +17,7 @@ import { styled } from '@mui/material/styles';
 import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
 import Collapse from '../../../../components/Collapse';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { EndAdornment } from '../../../shared/EndAdornment';
 var InputStyled = styled(Input)(function () { return ({
     input: {
@@ -39,6 +39,10 @@ var Name = function (_a) {
     var clearNumber = function () {
         nameControl.field.onChange('');
     };
-    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(InputStyled, { label: t('signup_merchant_name_label'), value: nameValue, readOnly: readOnly, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: _jsx(EndAdornment, { value: nameValue, error: error, onClear: clearNumber }) }) })) })));
+    return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 1.5 } }, { children: _jsx(InputStyled, { label: t('signup_merchant_name_label'), value: nameValue, InputProps: {
+                    endAdornment: _jsx(EndAdornment, { value: nameValue, error: error, onClear: clearNumber })
+                }, inputProps: {
+                    readOnly: readOnly
+                }, onChange: handleNameChange, helperText: error && t(error) }) })) })));
 };
 export default React.memo(Name);

package/build/features/connectExpress/screens/IdentityOTP/OTP.js

@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import Text from '../../../../components/Text';
 import { clearError, connectExpressSelector, verifyMobileOtpAsync, resetOTPValue, verifyNIDOtpLeadIdentityAsync } from '../../../app/connectExpress/connectExpressStore';
 import Button from '../../../shared/Button';
-import { ScreenContainer } from '../../../shared/Containers';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import { useLanguage } from '../../../../hooks';
@@ -31,17 +31,14 @@ import OTPInput from './OTPInput';
 var OTPTitleContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        background: theme.palette.common.white,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
         direction: theme.direction,
-        borderRadius: theme.spacing(0, 0, 1.25, 1.25),
-        marginBottom: theme.spacing(5.75)
+        paddingInline: theme.spacing(3),
+        paddingBottom: theme.spacing(5)
     });
 });
 var OTPTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInline: theme.spacing(2.5), lineHeight: 1.75, whiteSpace: 'pre-line' }));
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.secondary.main, fontWeight: theme.typography.fontWeightRegular, lineHeight: '19px', whiteSpace: 'pre-line' }));
 });
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
@@ -82,6 +79,6 @@ var OTP = function () {
     var phone = ((_a = data.mobileData.countryCode) === null || _a === void 0 ? void 0 : _a.idd_prefix) + (data.mobileData.mobile || '');
     var idNumber = data.nidData.nid;
     var title = isNidAuth ? t('opt_nid_sent_title', { provider: 'ABSHER' }) : t('ide_opt_sent_title');
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: isNidAuth ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'otp_authentication', description: 'otp_authentication_description', onBack: function () { return onBack(); } }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : title, !loading && _jsx("span", __assign({ dir: 'ltr' }, { children: isNidAuth ? maskID(idNumber) : maskPhone(phone) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disableBack: true, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) })));
 };
 export default React.memo(OTP);