@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/CountryFilter/CountryFilter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { ClickAwayListener } from '@mui/material';
+import { Menu, MenuItem } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+export default function CountryFilter({ onCountriesChange, sx, selectedCountries, countriesOptions }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const containerRef = useRef(null);
+    const open = Boolean(anchorEl);
+    const onOpen = () => {
+        if (!open) {
+            setAnchorEl(containerRef.current);
+            return;
+        }
+        onClose();
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const checkIsSelected = (countryCode) => { var _a; return (_a = selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(countryCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCountry = (countryCodes) => {
+        onCountriesChange(countryCodes);
+    };
+    const handleCheckboxChange = (value) => {
+        const newCountries = (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(value)) ? selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.filter((c) => c !== value) : [...(selectedCountries !== null && selectedCountries !== void 0 ? selectedCountries : []), value];
+        onClickCountry(newCountries);
+        onCountriesChange(newCountries);
+    };
+    const isAllCountriesSelected = useMemo(() => {
+        return (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.length) === countriesOptions.length;
+    }, [selectedCountries, countriesOptions]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ ref: containerRef, sx: sx }, { children: [_jsx(Box, { children: _jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+                            e.stopPropagation();
+                            onOpen();
+                        }, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            paddingInline: '16px',
+                            gap: '4px',
+                            borderBlock: '1px solid #F2F2F2',
+                            '&:hover': {
+                                backgroundColor: '#fff',
+                                boxShadow: '0px 0px 16px 0px #00000021',
+                            },
+                        }, hideCheckbox: true }, { children: [_jsx("span", { children: "Country" }), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] })) }), _jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', maxHeight: '190px', overflow: 'auto' }, placement: "right-start", popperSx: {
+                        zIndex: 99999,
+                    } }, { children: [_jsx(MenuItem, Object.assign({ sx: {
+                                color: (theme) => theme.palette.info.dark,
+                                backgroundColor: '#F4F4F4',
+                                fontWeight: 600,
+                                paddingInline: '16px',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                if (isAllCountriesSelected) {
+                                    onClickCountry([]);
+                                    onCountriesChange([]);
+                                }
+                                else {
+                                    onClickCountry(countriesOptions.map(({ value }) => value));
+                                    onCountriesChange(countriesOptions.map(({ value }) => value));
+                                }
+                            }, isSelected: isAllCountriesSelected }, { children: isAllCountriesSelected ? 'Unselect All' : 'Select All' })), countriesOptions.map(({ value, label, icon }) => (_jsxs(MenuItem, Object.assign({ sx: {
+                                gap: '0px',
+                                paddingInline: '16px',
+                                '&:hover': {
+                                    backgroundColor: '#fff',
+                                    boxShadow: '0px 0px 16px 0px #00000021',
+                                },
+                            }, isSelected: checkIsSelected(value), onClick: () => handleCheckboxChange(value) }, { children: [_jsx(Box, { component: "img", src: icon, width: 16, height: 12, sx: { marginRight: '4px', borderRadius: '2px' } }), label] }), value)))] }))] })) })));
+}

package/build/components/CountryFilter/index.js

@@ -1 +1 @@
-export{uc as CountryFilter}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as CountryFilter } from './CountryFilter';

package/build/components/CountryFilter/style.js

@@ -0,0 +1,7 @@
+import { Box, styled } from '@mui/material';
+export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
+        opacity: 0.7,
+    } }, (isActive && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+    border: `1px solid ${theme.palette.info.dark}`,
+}))));

package/build/components/CountryFlag/CountryFlag.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import { defaultCountryIcon, getCountriesIcon, getCurrenciesIcon } from '../../constants/index.js';
+function CountryFlag(_a) {
+    var _b;
+    var { countryCode, currencyCode } = _a, props = __rest(_a, ["countryCode", "currencyCode"]);
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: (countryCode && getCountriesIcon(countryCode)) || (currencyCode && getCurrenciesIcon(currencyCode)) || defaultCountryIcon, width: props.width || 16, alt: (_b = countryCode !== null && countryCode !== void 0 ? countryCode : currencyCode) !== null && _b !== void 0 ? _b : 'flag', loading: "lazy", onError: (e) => {
+            e.currentTarget.src = defaultCountryIcon;
+        } })));
+}
+export default memo(CountryFlag);

package/build/components/CountryFlag/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-G6N4V3PP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import CountryFlag from './CountryFlag';
+export default CountryFlag;

package/build/components/CurrencyFilter/CurrencyFilter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import uniqBy from 'lodash/uniqBy';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag, Menu, MenuItem, FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../index.js';
+export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const uniqueCurrencies = useMemo(() => uniqBy(merchantCurrencies, 'currencyCode'), [merchantCurrencies]);
+    const handleOkButtonClick = (e) => {
+        onConfirm(selectedCurrencies);
+        onCloseDropdown(e);
+    };
+    const checkIsSelected = (currencyCode) => { var _a; return (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.includes(currencyCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCurrency = (currencyCode) => {
+        var _a;
+        if ((selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.indexOf(currencyCode)) !== -1) {
+            const newCurrencies = (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.filter((currency) => currency !== currencyCode)) !== null && _a !== void 0 ? _a : [];
+            onCurrenciesChange(newCurrencies.length > 0 ? newCurrencies : []);
+            return;
+        }
+        onCurrenciesChange([...selectedCurrencies, currencyCode]);
+    };
+    return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px' } }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), uniqueCurrencies.map(({ currencyCode }) => (_jsxs(MenuItem, Object.assign({ isSelected: checkIsSelected(currencyCode), onClick: () => {
+                    onClickCurrency(currencyCode);
+                } }, { children: [_jsx(CountryFlag, { currencyCode: currencyCode }), currencyCode] }), currencyCode))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdown }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
+}

package/build/components/CurrencyFilter/index.js

@@ -1 +1 @@
-export{Tc as CurrencyFilter}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as CurrencyFilter } from './CurrencyFilter';

package/build/components/CurrencySymbol/CurrencySymbol.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DirhamIconImage, SARIconImage } from '../../constants/index.js';
+import { StyleCurrencySymbol, MaskedSymbol } from './style';
+const currencyMap = {
+    SAR: SARIconImage,
+    AED: DirhamIconImage,
+};
+function CurrencySymbol({ currency, fontSize, color }) {
+    const symbol = currencyMap[currency];
+    if (!symbol)
+        return _jsx(_Fragment, { children: currency });
+    if (color) {
+        return _jsx(MaskedSymbol, { symbol: symbol, fontSize: fontSize, color: color, "aria-label": currency, role: "img" });
+    }
+    return _jsx(StyleCurrencySymbol, { component: "img", src: symbol, alt: currency, sx: { height: fontSize } });
+}
+export default CurrencySymbol;

package/build/components/CurrencySymbol/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-7A7PBYFB.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import CurrencySymbol from './CurrencySymbol';
+export default CurrencySymbol;

package/build/components/CurrencySymbol/style.js

@@ -0,0 +1,27 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const StyleCurrencySymbol = styled(Box)(() => ({
+    height: 10,
+}));
+export const CurrencySpan = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    lineHeight: '17px',
+    fontWeight: '700',
+}));
+export const DecimalSpan = styled('span')(() => ({
+    fontWeight: '400',
+}));
+export const MaskedSymbol = styled('span')(({ symbol, fontSize, color }) => ({
+    display: 'inline-block',
+    height: fontSize,
+    width: fontSize,
+    backgroundColor: color,
+    maskImage: `url("${symbol}")`,
+    maskSize: 'contain',
+    maskRepeat: 'no-repeat',
+    maskPosition: 'center',
+    WebkitMaskImage: `url("${symbol}")`,
+    WebkitMaskSize: 'contain',
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskPosition: 'center',
+}));

package/build/components/CustomBackdrop/CustomBackdrop.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import ReactDOM from 'react-dom';
+import { CustomBackdropStyled } from './style';
+function CustomBackdrop(props) {
+    return ReactDOM.createPortal(_jsx(CustomBackdropStyled, Object.assign({}, props)), document.body);
+}
+export default memo(CustomBackdrop);

package/build/components/CustomBackdrop/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-M7YGOEQF.js';import'../../chunk-RWXGVZUC.js';
+import CustomBackdrop from './CustomBackdrop';
+export default CustomBackdrop;

package/build/components/CustomBackdrop/style.js

@@ -0,0 +1,9 @@
+import { Box, styled } from '@mui/material';
+export const CustomBackdropStyled = styled(Box)(() => ({
+    position: 'fixed',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0,
+    zIndex: 999,
+}));

package/build/components/Customer/CustomerDropdown/CustomerDropdown.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from 'react';
+import Popper from '@mui/material/Popper';
+import { useTranslation } from 'react-i18next';
+import { getRandomGradientColor } from '../../../utils/index.js';
+import { CustomBackdrop } from '../../index.js';
+import { customerIcon2 } from '../../../constants/index.js';
+import { Wrapper, AvatarStyled, Button } from './style';
+import FullInfo from '../CustomerForms/CustomerFullInfo';
+function CustomerDropdown(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { firstName, lastName } = props.customer;
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const openDropdown = (event) => {
+        if (!open)
+            setAnchorEl(event.currentTarget);
+    };
+    const closeDropdown = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const AvatarColor = useMemo(() => getRandomGradientColor(), []);
+    return (_jsxs(Wrapper, Object.assign({ sx: Object.assign({}, (props.isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsxs(Button, Object.assign({ onClick: openDropdown }, { children: [(!firstName || !lastName) && (_jsxs(_Fragment, { children: [_jsx("img", { src: customerIcon2, alt: "c" }), _jsx("span", { children: t('customer') })] })), firstName && lastName && (_jsxs(_Fragment, { children: [_jsx(AvatarStyled, Object.assign({ src: "#", alt: "a", sx: { background: AvatarColor } }, { children: `${(_b = firstName[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()}${((_c = lastName[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) || ''}` })), `${firstName} ${lastName}`] }))] })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(FullInfo, Object.assign({}, props)) }))] })));
+}
+export default memo(CustomerDropdown);

package/build/components/Customer/CustomerDropdown/index.js

@@ -0,0 +1 @@
+export { default } from './CustomerDropdown';

package/build/components/Customer/CustomerDropdown/style.js

@@ -0,0 +1,30 @@
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Wrapper = styled(Box)(() => ({
+    position: 'relative',
+    flexGrow: 0,
+}));
+export const Button = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    display: 'flex',
+    padding: theme.spacing(1),
+    gap: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '4px',
+    backgroundColor: theme.palette.common.white,
+    alignItems: 'center',
+    height: 32,
+    textTransform: 'capitalize',
+    cursor: 'pointer',
+}));
+export const AvatarStyled = styled(Avatar)(({ theme }) => ({
+    width: 16,
+    height: 16,
+    cursor: 'pointer',
+    fontSize: '5.667px',
+    color: theme.palette.common.white,
+    fontWeight: 500,
+    border: `1px solid ${theme.palette.common.white}`,
+}));

package/build/components/Customer/CustomerForms/CustomerEmailForm.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Box from '@mui/material/Box';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormWrapper, InputStyled, SubmitButton, ErrorStyled } from './style';
+import { validationEmailFromSchema } from './validation';
+function CustomerEmailForm({ submitButtonText, onSubmit, customer, isItemsNotValid, items, onCustomerChange }) {
+    const firstNameRef = useRef();
+    const lastNameRef = useRef();
+    const emailRef = useRef();
+    const { t } = useTranslation();
+    const { control, formState: { isValid, errors }, watch, trigger, } = useForm({
+        mode: 'onChange',
+        resolver: yupResolver(validationEmailFromSchema),
+        defaultValues: {
+            firstName: customer.firstName,
+            email: customer.email,
+            lastName: customer.lastName,
+        },
+    });
+    useEffect(() => {
+        // revalidate default values
+        if (customer.firstName && customer.email && customer.lastName) {
+            trigger();
+        }
+    }, []);
+    useEffect(() => {
+        watch(({ firstName = '', lastName = '', email = '' }) => {
+            onCustomerChange(Object.assign(Object.assign({}, customer), { email,
+                firstName,
+                lastName }));
+        });
+    }, [watch, errors, customer]);
+    const onMouseLeave = (e) => {
+        e.stopPropagation();
+    };
+    return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: onMouseLeave }, { children: [_jsx(Controller, { control: control, name: "email", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: emailRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_email", placeholder: t('email'), inputProps: {
+                                    autoComplete: 'off',
+                                    form: {
+                                        autoComplete: 'off',
+                                    },
+                                }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }), _jsx(Controller, { control: control, name: "firstName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: firstNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_firstName", placeholder: t('firstName'), inputProps: {
+                                    autoComplete: 'off',
+                                    form: {
+                                        autoComplete: 'off',
+                                    },
+                                }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }), _jsx(Controller, { control: control, name: "lastName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: lastNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_lastName", placeholder: t('lastName'), inputProps: {
+                                    autoComplete: 'off',
+                                    form: {
+                                        autoComplete: 'off',
+                                    },
+                                }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }), _jsx(SubmitButton, Object.assign({ type: "button", "data-testid": "EmailForm_submit", onClick: onSubmit, disabled: !isValid || isItemsNotValid || !items.length }, { children: submitButtonText }))] })));
+}
+export default memo(CustomerEmailForm);

package/build/components/Customer/CustomerForms/CustomerFullInfo.js

@@ -0,0 +1,72 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Box from '@mui/material/Box';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { MobileWrapper, FormWrapper, InputStyled, InputNumberStyled, ErrorStyled } from './style';
+import { validationFullInfoSchema } from './validation';
+import CountriesDropdown from '../../Inputs/CountriesDropDown';
+function CustomerFullInfo({ customer, country, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, isCustomerNotValid, }) {
+    const firstNameRef = useRef();
+    const lastNameRef = useRef();
+    const emailRef = useRef();
+    const phoneNumberRef = useRef();
+    const { t } = useTranslation();
+    const { control, watch, formState: { errors, isValid }, } = useForm({
+        mode: 'onChange',
+        resolver: yupResolver(validationFullInfoSchema(country.max_digits)),
+        defaultValues: {
+            firstName: customer.firstName,
+            email: customer.email,
+            lastName: customer.lastName,
+            phoneNumber: customer.phoneNumber,
+        },
+    });
+    useEffect(() => {
+        watch(({ firstName = '', lastName = '', email = '', phoneNumber = '' }) => {
+            onCustomerChange({
+                firstName,
+                lastName,
+                email,
+                phoneNumber,
+            });
+        });
+    }, [watch, errors, customer]);
+    const getFirstError = useCallback(() => { var _a, _b, _c, _d, _e, _f, _g; return (_f = (_d = (_b = (_a = errors.firstName) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : (_c = errors.lastName) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : (_e = errors.email) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : (_g = errors.phoneNumber) === null || _g === void 0 ? void 0 : _g.message; }, [errors]);
+    useEffect(() => {
+        isCustomerNotValid === null || isCustomerNotValid === void 0 ? void 0 : isCustomerNotValid(!isValid, getFirstError());
+    }, [isValid, getFirstError]);
+    const onMouseLeave = (e) => {
+        e.stopPropagation();
+    };
+    return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: onMouseLeave }, { children: [_jsx(Controller, { control: control, name: "firstName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: firstNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('firstName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoFirstName"), _jsx(Controller, { control: control, name: "lastName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: lastNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('lastName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoLastName"), _jsx(Controller, { control: control, name: "email", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: emailRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('email'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoEmail"), _jsx(Controller, { control: control, name: "phoneNumber", render: (_a) => {
+                    var _b, _c;
+                    var _d = _a.field, { ref } = _d, field = __rest(_d, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: phoneNumberRef }, { children: [_jsxs(MobileWrapper, Object.assign({ sx: Object.assign({}, ((error === null || error === void 0 ? void 0 : error.message) && { borderBottom: 'none' })) }, { children: [_jsx(CountriesDropdown, { defaultCountry: (_c = (_b = country === null || country === void 0 ? void 0 : country.iso2) !== null && _b !== void 0 ? _b : defaultCountry === null || defaultCountry === void 0 ? void 0 : defaultCountry.code) !== null && _c !== void 0 ? _c : 'SA', value: country, onChangeCountry: onCountryChange, countries: countries, isLoading: isCountriesLoading }), _jsx(InputNumberStyled, Object.assign({}, field, { placeholder: t('mobile'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message), sx: {
+                                            border: 'none',
+                                            paddingInlineEnd: 0,
+                                        }, hideArrows: true }))] })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message, { numberLen: country.max_digits }) })] })));
+                } }, "fullInfoPhoneNumber")] })));
+}
+export default CustomerFullInfo;

package/build/components/Customer/CustomerForms/CustomerFullInfoForm.js

@@ -0,0 +1,74 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Box from '@mui/material/Box';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { InputNumberStyled, MobileWrapper } from '../../index.js';
+import { FormWrapper, SubmitButton, InputStyled, ErrorStyled } from './style';
+import { validationFullInfoSchema } from './validation';
+import CountriesDropdown from '../../Inputs/CountriesDropDown';
+function CustomerFullInfoForm({ submitButtonText, onSubmit, customer, country, items, isItemsNotValid, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, }) {
+    const firstNameRef = useRef();
+    const lastNameRef = useRef();
+    const emailRef = useRef();
+    const phoneNumberRef = useRef();
+    const { t } = useTranslation();
+    const { control, watch, trigger, formState: { isValid, errors }, } = useForm({
+        mode: 'onChange',
+        resolver: yupResolver(validationFullInfoSchema(country.max_digits)),
+        defaultValues: {
+            firstName: customer.firstName,
+            email: customer.email,
+            lastName: customer.lastName,
+            phoneNumber: customer.phoneNumber,
+        },
+    });
+    useEffect(() => {
+        watch(({ firstName = '', lastName = '', email = '', phoneNumber = '' }) => {
+            onCustomerChange({
+                email,
+                firstName,
+                lastName,
+                phoneNumber,
+            });
+        });
+    }, [watch, errors, customer]);
+    useEffect(() => {
+        // revalidate default values
+        if (customer.firstName && customer.lastName && (customer.email || customer.phoneNumber)) {
+            trigger();
+        }
+    }, []);
+    return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: (e) => {
+            e.stopPropagation();
+        } }, { children: [_jsx(Controller, { control: control, name: "firstName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: firstNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('firstName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoFormFirstName"), _jsx(Controller, { control: control, name: "lastName", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: lastNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('lastName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoFormLastName"), _jsx(Controller, { control: control, name: "email", render: (_a) => {
+                    var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: emailRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('email'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
+                } }, "fullInfoFormEmail"), _jsx(Controller, { control: control, name: "phoneNumber", render: (_a) => {
+                    var _b, _c;
+                    var _d = _a.field, { ref } = _d, field = __rest(_d, ["ref"]), { fieldState: { error } } = _a;
+                    return (_jsxs(Box, Object.assign({ ref: phoneNumberRef }, { children: [_jsxs(MobileWrapper, Object.assign({ sx: Object.assign({}, ((error === null || error === void 0 ? void 0 : error.message) && { borderBottom: 'none' })) }, { children: [_jsx(CountriesDropdown, { defaultCountry: (_c = (_b = country === null || country === void 0 ? void 0 : country.iso2) !== null && _b !== void 0 ? _b : defaultCountry === null || defaultCountry === void 0 ? void 0 : defaultCountry.code) !== null && _c !== void 0 ? _c : 'SA', value: country, onChangeCountry: onCountryChange, countries: countries, isLoading: isCountriesLoading }), _jsx(InputNumberStyled, Object.assign({}, field, { placeholder: t('mobile'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message), sx: {
+                                            border: 'none',
+                                            paddingInlineEnd: 0,
+                                        }, hideArrows: true }))] })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message, { numberLen: country.max_digits }) })] })));
+                } }), _jsx(SubmitButton, Object.assign({ onClick: onSubmit, disabled: !isValid || isItemsNotValid || !items.length }, { children: submitButtonText }))] })));
+}
+export default memo(CustomerFullInfoForm);