@tap-payments/auth-jsconnect 2.11.15-development → 2.11.16-development

package/build/features/shared/Address/InputSelect.js

@@ -0,0 +1,172 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Text from '../../../components/Text';
+import Input from '../../../components/Input';
+import Box from '@mui/material/Box';
+import CheckIcon from '@mui/icons-material/Check';
+import SimpleList from '../../../components/SimpleList';
+import ExpandIcon from '../../../components/ExpandIcon';
+import Collapse from '../../../components/Collapse';
+import { useLanguage } from '../../../hooks';
+import Warning from '../../../components/Warning';
+import { useTranslation } from 'react-i18next';
+import CircularProgress from '@mui/material/CircularProgress';
+import { httpClient } from '../../../api/axios';
+import InputText from './InputText';
+export var MandatoryStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ color: alpha(theme.palette.error.light, 0.4) }, theme.typography.h6), { fontWeight: theme.typography.fontWeightLight, verticalAlign: 'sub' }));
+});
+export var InputLabelStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
+});
+export var InputStyled = styled(Input)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInlineEnd: theme.spacing(2.5),
+        '& .MuiInputBase-input': {
+            cursor: 'pointer'
+        }
+    });
+});
+export var LabelContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        margin: theme.spacing(2.5, 2.5, 1.5, 2.5)
+    });
+});
+var SimpleListStyled = styled((SimpleList))(function () { return ({}); });
+export var CheckIconStyled = styled(CheckIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.primary.main,
+        display: 'flex',
+        alignItems: 'flex-end'
+    });
+});
+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), textAlign: 'start' }));
+});
+function InputSelect(_a) {
+    var _this = this;
+    var fetchURL = _a.fetchURL, onSelect = _a.onSelect, value = _a.value, countryIso2 = _a.countryIso2, error = _a.error, label = _a.label, isRequired = _a.isRequired, placeholder = _a.placeholder, disabled = _a.disabled;
+    var _b = React.useState([]), data = _b[0], setData = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = React.useState(null), apiError = _d[0], setApiError = _d[1];
+    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    var getList = function (code) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setLoading(true);
+            httpClient({
+                method: 'POST',
+                url: fetchURL,
+                data: { country: [code] }
+            })
+                .then(function (_a) {
+                var list = _a.list;
+                return setData(list);
+            })
+                .catch(function (err) { return setApiError(err.message); })
+                .finally(function () { return setLoading(false); });
+            return [2];
+        });
+    }); };
+    React.useEffect(function () {
+        if (countryIso2)
+            getList(countryIso2);
+    }, [countryIso2]);
+    var handleListOpenClose = function (event) {
+        if (loading || disabled)
+            return;
+        setAnchorEl(!!anchorEl ? null : event === null || event === void 0 ? void 0 : event.currentTarget);
+    };
+    var nameValue = React.useMemo(function () {
+        var item = data.find(function (item) { return item.id === value; });
+        return (item === null || item === void 0 ? void 0 : item.name[isAr ? 'ar' : 'en']) || '';
+    }, [isAr, data, value]);
+    return React.useMemo(function () {
+        if (data.length === 0 && countryIso2)
+            return (_jsx(InputText, { label: label, onChange: function (value) { return onSelect(value); }, placeholder: placeholder, isRequired: isRequired, value: value, error: error }, 'input-text'));
+        return (_jsxs(Box, { children: [_jsx(LabelContainerStyled, { children: _jsxs(InputLabelStyled, { children: [t(label), " ", isRequired && _jsx(MandatoryStyled, { children: "*" })] }) }), _jsxs(Box, { children: [_jsx(InputStyled, { value: nameValue, placeholder: placeholder, onClick: handleListOpenClose, endAdornment: loading ? _jsx(CircularProgress, { size: 25, thickness: 5 }) : _jsx(ExpandIcon, { anchorEl: !!anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleListStyled, { searchValuePath: ['name.en', 'name.ar'], searchKeyPath: 'name.en', list: data, onSelectItem: function (item) {
+                                    onSelect(item.id);
+                                    setAnchorEl(null);
+                                }, renderItem: function (item) {
+                                    var _a, _b;
+                                    var isChecked = item.id === value;
+                                    return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: isChecked }, { children: isAr ? (_a = item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item.name) === null || _b === void 0 ? void 0 : _b.en })) })), isChecked && _jsx(CheckIconStyled, {})] }));
+                                } }) })), _jsx(Collapse, __assign({ in: !!apiError && !anchorEl && !loading, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'error' }, { children: t(error || '') })) })), _jsx(Collapse, __assign({ in: !!error && !apiError && !anchorEl && !loading, timeout: 400 }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(error || '') })) }))] })] }));
+    }, [
+        data,
+        value,
+        anchorEl,
+        loading,
+        apiError,
+        error,
+        isRequired,
+        isAr,
+        t,
+        label,
+        placeholder,
+        onSelect,
+        handleListOpenClose,
+        nameValue,
+        countryIso2,
+        fetchURL,
+        disabled
+    ]);
+}
+export default InputSelect;

package/build/features/shared/Address/InputText.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    value?: string;
+    label: string;
+    placeholder: string;
+    error?: string;
+    onChange: (value: string) => void;
+    isRequired?: boolean;
+    disabled?: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ label, onChange, isRequired, placeholder, value, error, disabled }: Props) => JSX.Element>;
+export default _default;

package/build/features/shared/Address/InputText.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import Input from '../Input';
+import { useTranslation } from 'react-i18next';
+import CheckIcon from '../CheckIcon';
+import ClearIcon from '../ClearIcon';
+var InputText = function (_a) {
+    var label = _a.label, onChange = _a.onChange, isRequired = _a.isRequired, placeholder = _a.placeholder, value = _a.value, error = _a.error, disabled = _a.disabled;
+    var t = useTranslation().t;
+    return (_jsx(_Fragment, { children: _jsx(Input, { labelSx: { paddingTop: '20px' }, label: t(label), value: value, disabled: disabled, required: isRequired, onChange: function (e) { return onChange(e.target.value); }, placeholder: t(placeholder), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && value ? _jsx(CheckIcon, {}) : value && _jsx(ClearIcon, { onClick: function () { return onChange(''); } }) }) }));
+};
+export default memo(InputText);

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+interface BackgroundProps {
+    children: React.ReactNode;
+    loading?: boolean;
+    hideLogo?: boolean;
+    sx?: SxProps<Theme>;
+    open: boolean;
+    isTapOrigin: boolean;
+    hideOverlay?: boolean;
+    mode?: 'popup' | 'page' | 'content';
+}
+declare const _default: React.MemoExoticComponent<({ children, isTapOrigin, loading, hideLogo, sx, open, hideOverlay, mode }: BackgroundProps) => JSX.Element>;
+export default _default;

package/build/features/shared/Background/Background.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import LogoBackground from './LogoBackground';
+import { BACKGROUND_ID } from '../../../constants';
+import { useScreen } from '../../../hooks';
+var BackgroundStyled = styled(Box, {
+    shouldForwardProp: function (prop) { return !['isTapOrigin', 'open', 'isSmall', 'hideOverlay', 'mode'].includes(prop); }
+})(function (_a) {
+    var isTapOrigin = _a.isTapOrigin, open = _a.open, isSmall = _a.isSmall, hideOverlay = _a.hideOverlay, mode = _a.mode;
+    return (__assign(__assign({ width: '100vw', height: '100vh', zIndex: isSmall ? 'auto' : 999, position: 'absolute' }, (mode === 'content' && {
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+    })), { top: 0, left: 0, right: 0, bottom: 0, background: !open || hideOverlay || mode === 'content' ? 'inherit' : isTapOrigin ? 'linear-gradient(180deg, #98ABAF 0%, #D9D6CC 100%)' : 'rgba(0, 0, 0, 0.5)' }));
+});
+var Background = function (_a) {
+    var children = _a.children, isTapOrigin = _a.isTapOrigin, loading = _a.loading, hideLogo = _a.hideLogo, sx = _a.sx, open = _a.open, hideOverlay = _a.hideOverlay, mode = _a.mode;
+    var showLogo = !loading && isTapOrigin;
+    var small = useScreen().small;
+    return (_jsxs(BackgroundStyled, __assign({ id: BACKGROUND_ID, mode: mode, hideOverlay: hideOverlay, isSmall: small, isTapOrigin: isTapOrigin, sx: sx, open: open }, { children: [showLogo && !hideLogo && _jsx(LogoBackground, {}), children] })));
+};
+export default memo(Background);

package/build/features/shared/Background/LogoBackground.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/build/features/shared/Background/LogoBackground.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Icon from '../../../components/Icon';
+import { ICONS_NAMES } from '../../../constants';
+var BoxStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            display: 'flex',
+            justifyContent: 'center',
+            paddingTop: theme.spacing(10)
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            paddingTop: theme.spacing(11)
+        },
+        _b);
+});
+var LogoBadgeStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: theme.spacing(9.5),
+        width: theme.spacing(19.322)
+    });
+});
+var LogoBackground = function () {
+    return (_jsx(BoxStyled, { children: _jsx(LogoBadgeStyled, { src: ICONS_NAMES.TAP_LOGO, alt: 'tap logo' }) }));
+};
+export default memo(LogoBackground);

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

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

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const BouncingDotsLoader: () => JSX.Element;
+export default BouncingDotsLoader;

package/build/features/shared/BouncingDotsLoader/BouncingDotsLoader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+var BoxStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    alignItems: 'center',
+    '@keyframes bouncing-loader': {
+        to: {
+            opacity: 0.1
+        }
+    }
+}); });
+var DotStyled = styled(Box)(function () { return ({
+    width: 16,
+    height: 16,
+    margin: '0 6px 0 6px',
+    borderRadius: '50%',
+    backgroundColor: '#a3a1a1',
+    opacity: 1,
+    animation: 'bouncing-loader 0.6s infinite alternate',
+    '&:nth-of-type(2)': {
+        animationDelay: '0.2s'
+    },
+    '&:nth-of-type(3)': {
+        animationDelay: '0.4s'
+    }
+}); });
+var BouncingDotsLoader = function () {
+    return (_jsxs(BoxStyled, { children: [_jsx(DotStyled, {}), _jsx(DotStyled, {}), _jsx(DotStyled, {})] }));
+};
+export default BouncingDotsLoader;

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

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

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

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material/styles';
+import { BusinessCountryInfo } from '../../../@types';
+interface BusinessCountryProps {
+    onListOpen?: () => void;
+    onListClose?: () => void;
+    countries: Array<BusinessCountryInfo>;
+    loading: boolean;
+    defaultCountryIso2: string;
+    onSelectCountry: (iso2: string) => void;
+    sx?: SxProps<Theme>;
+    open?: boolean;
+}
+declare const BusinessCountry: ({ open: defaultOpen, sx, onListOpen, onListClose, countries, loading, defaultCountryIso2, onSelectCountry }: BusinessCountryProps) => JSX.Element;
+export default BusinessCountry;

package/build/features/shared/BusinessCountry/BusinessCountry.js

@@ -0,0 +1,179 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        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 * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { styled } from '@mui/material/styles';
+import { useLanguage } from '../../../hooks';
+import SimpleList from '../../../components/SimpleList';
+import Text from '../../../components/Text';
+import Collapse from '../../../components/Collapse';
+import ExpandIcon from '../../../components/ExpandIcon';
+import Icon from '../../../components/Icon';
+import { ScreenContainer } from '../../shared/Containers';
+import Search from '../../shared/Search';
+import InputSelect from '../../shared/InputSelect';
+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.caption), { fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineStart: theme.spacing(1.25), display: 'flex' }));
+});
+var ListItem = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        paddingInlineStart: theme.spacing(2.5),
+        paddingInlineEnd: theme.spacing(2.5),
+        paddingTop: theme.spacing(1.5),
+        paddingBottom: theme.spacing(1.5)
+    });
+});
+var CountryListItem = styled(ListItem, { shouldForwardProp: function (prop) { return prop !== 'isSelected'; } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected;
+    return (__assign({ marginLeft: theme.spacing(2), marginRight: theme.spacing(2), paddingInlineStart: theme.spacing(1), paddingInlineEnd: theme.spacing(1) }, (isSelected && {
+        backgroundColor: '#EDF6FF',
+        borderRadius: theme.spacing(0.5)
+    })));
+});
+var ListItemContainer = styled(Box)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+}); });
+var SimpleListStyled = styled((SimpleList))(function () { return ({
+    height: 'fit-content'
+}); });
+var CountryListStyled = styled((SimpleList))(function () { return ({
+    height: 'fit-content'
+}); });
+var BusinessCountry = function (_a) {
+    var _b, _c;
+    var defaultOpen = _a.open, sx = _a.sx, onListOpen = _a.onListOpen, onListClose = _a.onListClose, countries = _a.countries, loading = _a.loading, defaultCountryIso2 = _a.defaultCountryIso2, onSelectCountry = _a.onSelectCountry;
+    var _d = React.useState(countries || []), countryList = _d[0], setCountryList = _d[1];
+    var _e = React.useState(!!defaultOpen), open = _e[0], setOpen = _e[1];
+    var _f = React.useState(''), subIndex = _f[0], setSubIndex = _f[1];
+    var _g = React.useState(), selectedCountry = _g[0], setSelectedCountry = _g[1];
+    var _h = React.useState(''), searchValue = _h[0], setSearchValue = _h[1];
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var countryValue = selectedCountry;
+    var onSelectItem = function (item) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            setSelectedCountry(item);
+            onSelectCountry(item.country.iso2);
+            return [2];
+        });
+    }); };
+    var handleCloseMainMenu = function () {
+        setOpen(false);
+        handleSearch('');
+        onListClose === null || onListClose === void 0 ? void 0 : onListClose();
+    };
+    var handleOpenMainMenu = function () {
+        setCountryList(countries);
+        setOpen(true);
+        onListOpen === null || onListOpen === void 0 ? void 0 : onListOpen();
+    };
+    var handleOpenSubMenu = function (index) {
+        if (subIndex === index)
+            setSubIndex('');
+        else
+            setSubIndex(index);
+    };
+    React.useEffect(function () {
+        if (!defaultCountryIso2)
+            return;
+        countryList.forEach(function (r) {
+            return (r.countries || []).find(function (c) {
+                if (c.country.iso2 === defaultCountryIso2) {
+                    setSelectedCountry(c);
+                    setSubIndex(r.id.toString());
+                    return;
+                }
+            });
+        });
+    }, [defaultCountryIso2, open]);
+    var handleSearch = function (value) {
+        if (!value) {
+            setSearchValue('');
+            setCountryList(countries);
+            return;
+        }
+        setSearchValue(value);
+        var filteredList = (countries !== null && countries !== void 0 ? countries : []).map(function (country) {
+            var _a;
+            var subCountries = (_a = country.countries) === null || _a === void 0 ? void 0 : _a.filter(function (obj) {
+                var name = isAr ? obj.country.name_ar : obj.country.name_en;
+                return name.toLowerCase().includes(value.toLowerCase());
+            });
+            return __assign(__assign({}, country), { countries: subCountries });
+        });
+        setCountryList(filteredList);
+    };
+    return (_jsxs(ScreenContainer, __assign({ sx: __assign({ pb: 2.5 }, sx) }, { children: [_jsx(InputSelect, { required: true, label: t('country_list_title'), value: (isAr ? (_b = countryValue === null || countryValue === void 0 ? void 0 : countryValue.country) === null || _b === void 0 ? void 0 : _b.name_ar : (_c = countryValue === null || countryValue === void 0 ? void 0 : countryValue.country) === null || _c === void 0 ? void 0 : _c.name_en) || '', onClick: open ? handleCloseMainMenu : handleOpenMainMenu, placeholder: t('choose_any_country'), endAdornment: _jsx(ExpandIcon, { anchorEl: open }) }), _jsxs(Collapse, __assign({ in: open }, { children: [_jsx(Search, { onSearchValue: handleSearch }), _jsx(SimpleListStyled, { sx: { maxHeight: '350px', paddingTop: 0 }, list: countryList, listItemProps: { sx: { padding: 0 } }, onSelectItem: function (item, e) {
+                            e.stopPropagation();
+                            handleOpenSubMenu(item.id.toString());
+                        }, renderItem: function (item) {
+                            var isSelected = !!item.countries.find(function (c) { var _a; return c.country.iso2.toLocaleLowerCase() === ((_a = countryValue === null || countryValue === void 0 ? void 0 : countryValue.country) === null || _a === void 0 ? void 0 : _a.iso2.toLocaleLowerCase()); });
+                            return (_jsxs(ListItemContainer, { children: [_jsxs(ListItem, __assign({ sx: { width: 'unset' } }, { children: [_jsx(NameContainer, __assign({ sx: { padding: 0 }, isSelected: isSelected }, { children: isAr ? item.title_ar : item.title })), _jsx(ExpandIcon, { anchorEl: subIndex === item.id.toString() })] })), _jsx(Collapse, __assign({ in: item.id.toString() === subIndex || !!searchValue }, { children: _jsx(CountryListStyled, { sx: { pt: 0, pb: 0 }, list: item.countries || [], onSelectItem: function (i, e) {
+                                                e.stopPropagation();
+                                                onSelectItem(i);
+                                            }, listItemProps: { sx: { padding: 0, '&:last-child': { paddingBottom: 0 } } }, renderItem: function (item, idx) {
+                                                var _a;
+                                                var isSelected = item.country.iso2.toLocaleLowerCase() === ((_a = countryValue === null || countryValue === void 0 ? void 0 : countryValue.country) === null || _a === void 0 ? void 0 : _a.iso2.toLocaleLowerCase());
+                                                return (_jsxs(CountryListItem, __assign({ isSelected: isSelected, sx: { mt: idx === 0 ? 1 : 0 } }, { children: [_jsxs(NameContainer, __assign({ sx: { display: 'flex', alignItems: 'center', padding: 0 }, isSelected: isSelected }, { children: [_jsx(Icon, { sx: { marginInlineEnd: 1 }, src: item.country.logo }), isAr ? item.country.name_ar : item.country.name_en] })), loading && isSelected ? (_jsx(CircularProgress, { size: 20, thickness: 3, sx: { height: 'auto !important' } })) : (_jsx(ExpandIcon, { sx: {
+                                                                color: isSelected ? 'rgba(31, 136, 208, 1)' : 'rgba(58, 65, 84, 0.7)',
+                                                                transform: isAr ? 'rotate(90deg)' : 'rotate(270deg)'
+                                                            } }))] })));
+                                            } }) }))] }));
+                        } })] }))] })));
+};
+export default BusinessCountry;

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

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

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

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ButtonProps } from '../../../components/Button';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface CustomButtonProps extends ButtonProps {
+    isAr: boolean;
+    loading?: boolean;
+    disableBack?: boolean;
+    disableNextIcon?: boolean;
+    onBackClicked?: () => void;
+    error?: string;
+    hideError?: boolean;
+    sx?: SxProps<Theme>;
+}
+export default function CustomButton({ children, disabled, isAr, loading, disableBack, onBackClicked, error, hideError, disableNextIcon, sx, ...props }: CustomButtonProps): JSX.Element;