@tap-payments/auth-jsconnect 1.0.69 → 1.0.70

package/build/assets/locales/ar.json

@@ -234,5 +234,6 @@
     "password_flow_pending": "Password",
     "business_flow_pending": "Business",
     "business_flow_completed": "Business",
-    "continue": "Continue"
+    "continue": "Continue",
+    "search_placeholder": "البحث..."
 }

package/build/assets/locales/en.json

@@ -248,5 +248,6 @@
     "password_flow_pending": "Password",
     "business_flow_pending": "Business",
     "business_flow_completed": "Business",
-    "continue": "Continue"
+    "continue": "Continue",
+    "search_placeholder": "search.."
 }

package/build/components/SimpleList/SimpleList.js

@@ -69,6 +69,9 @@ var ListItemStyled = styled(ListItem)(function (_a) {
 function SimpleList(_a) {
     var list = _a.list, listItemProps = _a.listItemProps, onSelectItem = _a.onSelectItem, renderItem = _a.renderItem, children = _a.children, searchKeyPath = _a.searchKeyPath, rest = __rest(_a, ["list", "listItemProps", "onSelectItem", "renderItem", "children", "searchKeyPath"]);
     var _b = React.useState(list), items = _b[0], setItems = _b[1];
+    React.useEffect(function () {
+        setItems(list);
+    }, [list]);
     var filterItems = function (arr, searchKey) {
         return arr.filter(function (item) {
             var searchValue = get(item, searchKeyPath || '') || '';

package/build/constants/assets.d.ts

@@ -35,6 +35,7 @@ export declare const ICONS_NAMES: {
     ABSHER_LOGO: string;
     EMAIL_ICON: string;
     MOBILE_ICON: string;
+    SEARCH_ICON: string;
     GMAIL_Filled_ICON: string;
     GMAIL_White_ICON: string;
     outlook_Filled_ICON: string;

package/build/constants/assets.js

@@ -35,6 +35,7 @@ export var ICONS_NAMES = {
     ABSHER_LOGO: 'https://dash.b-cdn.net/icons/menu/Absher.svg',
     EMAIL_ICON: 'https://dash.b-cdn.net/icons/menu/email.png',
     MOBILE_ICON: 'https://dash.b-cdn.net/icons/menu/mobile.svg',
+    SEARCH_ICON: 'https://dash.b-cdn.net/icons/menu/search-icon.svg',
     GMAIL_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-filled.svg',
     GMAIL_White_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-white.svg',
     outlook_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Outlook-filled.svg',

package/build/features/app/business/businessStore.js

@@ -469,7 +469,9 @@ export var businessSlice = createSlice({
             state.error = null;
             state.customLoading = false;
             var _a = action.payload, businessCountry = _a.businessCountry, countries = _a.countries;
-            state.data.countries = countries;
+            state.data.countries = countries
+                .slice()
+                .sort(function (cOne, cTwo) { return cOne.name.english.localeCompare(cTwo.name.english); });
             state.data.businessCountry = businessCountry || defaultCountry;
         })
             .addCase(getCountries.pending, function (state) {

package/build/features/app/connect/connectStore.js

@@ -440,7 +440,9 @@ export var connectSlice = createSlice({
             state.error = null;
             state.customLoading = false;
             var _a = action.payload, countries = _a.countries, businessCountry = _a.businessCountry;
-            state.data.countries = countries;
+            state.data.countries = countries
+                .slice()
+                .sort(function (cOne, cTwo) { return cOne.name.english.localeCompare(cTwo.name.english); });
             state.data.businessCountry = businessCountry || defaultCountry;
             state.data.mobileData.countryCode = businessCountry || defaultCountry;
         })

package/build/features/bank/screens/BankDetails/BankName.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ScreenContainer } from '../../../shared/Containers';
@@ -10,10 +21,11 @@ import CheckIcon from '../../../shared/CheckIcon';
 import { bankSelector } from '../../../app/bank/bankStore';
 import { useAppSelector } from '../../../../hooks';
 import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
+import Collapse from '../../../../components/Collapse';
 var FeatureStyled = styled(ScreenContainer)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginBlockEnd: theme.spacing(3)
+        marginBlockStart: theme.spacing(3)
     });
 });
 var InputStyled = styled(Input)(function () { return ({
@@ -25,22 +37,23 @@ var BankName = function () {
     var _a, _b;
     var t = useTranslation().t;
     var _c = useFormContext(), setValue = _c.setValue, control = _c.control;
-    var _d = useAppSelector(bankSelector), data = _d.data, loading = _d.loading;
+    var data = useAppSelector(bankSelector).data;
     var bankNameControl = useController({ name: 'bankName', control: control });
     var bankNameValue = bankNameControl.field.value;
     var hasError = !!((_a = bankNameControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
-    var bankName = (_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.bank_name;
     var clearValue = function () {
         bankNameControl.field.onChange('');
     };
     React.useEffect(function () {
+        var _a;
+        var bankName = (_a = data.bankData.responseBody) === null || _a === void 0 ? void 0 : _a.bank_name;
         setValue('bankName', bankName);
-    }, []);
+    }, [(_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.bank_name]);
     var handleBankChange = function (_a) {
         var target = _a.target;
         var value = removeAllOtherThanAlphabetAndSpace(target.value);
         bankNameControl.field.onChange(value);
     };
-    return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('enter_bank_name'), placeholder: t('enter_bank_name_placeholder'), onChange: handleBankChange, value: bankNameValue, required: true, disabled: !!bankName, endAdornment: !hasError && bankNameValue ? _jsx(CheckIcon, {}) : bankNameValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(Collapse, __assign({ in: !!bankNameValue }, { children: _jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('enter_bank_name'), placeholder: t('enter_bank_name_placeholder'), onChange: handleBankChange, value: bankNameValue, required: true, readOnly: true, endAdornment: !hasError && bankNameValue ? _jsx(CheckIcon, {}) : bankNameValue && _jsx(ClearIcon, { onClick: clearValue }) }) }) })));
 };
 export default BankName;

package/build/features/bank/screens/BankDetails/IBAN.js

@@ -40,7 +40,6 @@ import Input from '../../../shared/Input';
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
-import { styled } from '@mui/material';
 import { MAX_IBAN_VALUE } from '../../../../constants';
 import { ScreenContainer } from '../../../shared/Containers';
 import { debounce } from 'lodash-es';
@@ -50,12 +49,6 @@ import axios from 'axios';
 import ClearIcon from '../../../shared/ClearIcon';
 import CheckIcon from '../../../shared/CheckIcon';
 import CircularProgress from '@mui/material/CircularProgress';
-var FeatureStyled = styled(ScreenContainer)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginBlockEnd: theme.spacing(3)
-    });
-});
 var cancelToken = null;
 var IBAN = function (_a) {
     var _b;
@@ -93,6 +86,6 @@ var IBAN = function (_a) {
     var clearValue = function () {
         ibanControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: ibanChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && ibanValue ? (_jsx(CheckIcon, {})) : (ibanValue && _jsx(ClearIcon, { onClick: clearValue })) }) }));
+    return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: ibanChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && ibanValue ? (_jsx(CheckIcon, {})) : (ibanValue && _jsx(ClearIcon, { onClick: clearValue })) }) }));
 };
 export default IBAN;

package/build/features/bank/screens/BankDetails/validation.d.ts

@@ -1,14 +1,14 @@
 import * as yup from 'yup';
 export declare const BankValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
-    bankName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
+    bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;

package/build/features/bank/screens/BankDetails/validation.js

@@ -7,7 +7,7 @@ export var BankValidation = yup.object().shape({
         .min(16, 'invalid_iban_format')
         .max(34, 'invalid_iban_format')
         .required('alert_iban'),
-    bankName: yup.string().required('bank_name_required'),
+    bankName: yup.string().optional(),
     beneficiaryName: yup
         .string()
         .matches(REGEX_BENEFICIARY_NAME, 'beneficiary_name_invalid')

package/build/features/connect/screens/Individual/MobileNumber.js

@@ -36,6 +36,7 @@ import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage } from '../../../../hooks';
+import Search from '../../../shared/Search';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -74,11 +75,11 @@ var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
-    var countriesCode = React.useState(countries || [])[0];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    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;
     var isAr = useLanguage().isAr;
-    var _f = useFormContext(), control = _f.control, setValue = _f.setValue;
+    var _g = useFormContext(), control = _g.control, setValue = _g.setValue;
     var phoneControl = useController({ name: 'mobile', control: control });
     var countryCodeControl = useController({ name: 'countryCode', control: control });
     var countryCodeValue = countryCodeControl.field.value;
@@ -108,16 +109,29 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var toggleCountryList = function () {
         var _a, _b;
-        anchorEl ? setAnchorEl(null) : setAnchorEl(true);
-        anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        else {
+            (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+            setAnchorEl(true);
+        }
     };
     var onSelectItem = function (country) {
         onCloseCountryList();
         setValue('mobile', '');
         countryCodeControl.field.onChange(country);
     };
-    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(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { 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' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { 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, {})] }));
-                        } }) }))] })) })));
+    var handleSearch = function (value) {
+        var filteredCountries = countries.filter(function (country) {
+            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.english.toLowerCase().startsWith(value.toLowerCase());
+        });
+        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(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { 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, { 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, {})] }));
+                            } })] }))] })) })));
 });
 export default React.memo(MobileNumber);

package/build/features/connect/screens/Mobile/MobileNumber.js

@@ -36,6 +36,7 @@ import Input from '../../../shared/Input';
 import SimpleList from '../../../../components/SimpleList';
 import { removeAllCharsFromNumber } from '../../../../utils';
 import { useLanguage } from '../../../../hooks';
+import Search from '../../../shared/Search';
 var LabelContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -74,11 +75,11 @@ var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
 var MobileNumber = React.forwardRef(function (_a, ref) {
     var _b, _c, _d;
     var countries = _a.countries, rest = __rest(_a, ["countries"]);
-    var countriesCode = React.useState(countries || [])[0];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    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;
     var isAr = useLanguage().isAr;
-    var _f = useFormContext(), control = _f.control, setValue = _f.setValue;
+    var _g = useFormContext(), control = _g.control, setValue = _g.setValue;
     var phoneControl = useController({ name: 'mobile', control: control });
     var countryCodeControl = useController({ name: 'countryCode', control: control });
     var countryCodeValue = countryCodeControl.field.value;
@@ -108,16 +109,29 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
     };
     var toggleCountryList = function () {
         var _a, _b;
-        anchorEl ? setAnchorEl(null) : setAnchorEl(true);
-        anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+        if (anchorEl) {
+            setAnchorEl(null);
+            (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
+        }
+        else {
+            (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
+            setAnchorEl(true);
+        }
     };
     var onSelectItem = function (country) {
         onCloseCountryList();
         setValue('mobile', '');
         countryCodeControl.field.onChange(country);
     };
-    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { 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: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { 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, {})] }));
-                        } }) }))] })) })));
+    var handleSearch = function (value) {
+        var filteredCountries = countries.filter(function (country) {
+            return country.name.arabic.toLowerCase().startsWith(value.toLowerCase()) ||
+                country.name.english.toLowerCase().startsWith(value.toLowerCase());
+        });
+        setCountries(filteredCountries);
+    };
+    return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { 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: !anchorEl ? error && t(error, { length: requiredLen, number: '05|5' }) : undefined }), _jsxs(Collapse, __assign({ in: !!anchorEl }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleList, { 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, {})] }));
+                            } })] }))] })) })));
 });
 export default React.memo(MobileNumber);

package/build/features/shared/Search/Search.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface SearchProps {
+    showSearch?: boolean;
+    onSearchValue?: (value: string) => void;
+}
+declare const Search: ({ onSearchValue, showSearch }: SearchProps) => JSX.Element;
+export default Search;

package/build/features/shared/Search/Search.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Input from '../../shared/Input';
+import Collapse from '../../../components/Collapse';
+var Search = function (_a) {
+    var onSearchValue = _a.onSearchValue, showSearch = _a.showSearch;
+    var t = useTranslation().t;
+    var handleOnChange = function (event) {
+        onSearchValue === null || onSearchValue === void 0 ? void 0 : onSearchValue(event.target.value);
+    };
+    return (_jsx(React.Fragment, { children: _jsx(Collapse, __assign({ in: showSearch }, { children: _jsx(Input, { placeholder: t('search_placeholder'), onChange: handleOnChange }) })) }));
+};
+export default Search;

package/build/features/shared/Search/index.d.ts

@@ -0,0 +1,2 @@
+import Search from './Search';
+export default Search;

package/build/features/shared/Search/index.js

@@ -0,0 +1,2 @@
+import Search from './Search';
+export default Search;

package/build/features/shared/SearchIcon/SearchIcon.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface CustomSearchIconProps {
+    onClick: () => void;
+}
+export default function CustomSearchIcon(props: CustomSearchIconProps): JSX.Element;
+export {};

package/build/features/shared/SearchIcon/SearchIcon.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '../../../components/Icon';
+import { styled } from '@mui/material/styles';
+import { ICONS_NAMES } from '../../../constants';
+var SearchIcon = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(2),
+        height: theme.spacing(2),
+        cursor: 'pointer'
+    });
+});
+export default function CustomSearchIcon(props) {
+    return _jsx(SearchIcon, __assign({ src: ICONS_NAMES.SEARCH_ICON }, props));
+}

package/package.json

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