@tap-payments/os-micro-frontend-shared 0.1.261 → 0.1.262

package/build/components/Customer/CustomerDropdown/CustomerDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FullInfoProps } from '../CustomerForms/FullInfo';
+interface CustomerDropdownProps extends FullInfoProps {
+    isDisabled?: boolean;
+}
+declare function CustomerDropdown({ ...props }: Readonly<CustomerDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CustomerDropdown>;
+export default _default;

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/FullInfo';
+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.d.ts

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

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

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

package/build/components/Customer/CustomerDropdown/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AvatarStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Avatar").AvatarOwnProps & import("@mui/material/Avatar").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "classes" | "className" | "style" | "children" | "sx" | "variant" | "slotProps" | "slots" | "sizes" | "src" | "alt" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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/EmailForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Item } from '../../../types/index.js';
+import { FullInfoProps } from './FullInfo';
+export interface EmailFormProps extends Pick<FullInfoProps, 'onCustomerChange' | 'isCustomerNotValid' | 'customer'> {
+    items: Item[];
+    isItemsNotValid: boolean;
+    submitButtonText: string;
+    onSubmit: () => void;
+}
+declare function EmailForm({ submitButtonText, onSubmit, customer, isItemsNotValid, items, onCustomerChange }: Readonly<EmailFormProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof EmailForm>;
+export default _default;

package/build/components/Customer/CustomerForms/EmailForm.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 EmailForm({ 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(EmailForm);

package/build/components/Customer/CustomerForms/FullInfo.d.ts

@@ -0,0 +1,13 @@
+import { Country, CustomerInfo, SegmentCountry } from '../../../types/index.js';
+export interface FullInfoProps {
+    customer: CustomerInfo;
+    country: Country;
+    defaultCountry: SegmentCountry;
+    countries: Country[];
+    isCountriesLoading: boolean;
+    onCountryChange: (country: Country) => void;
+    onCustomerChange: (customer: CustomerInfo) => void;
+    isCustomerNotValid?: (value: boolean, err?: string) => void;
+}
+declare function FullInfo({ customer, country, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, isCustomerNotValid, }: Readonly<FullInfoProps>): import("react/jsx-runtime").JSX.Element;
+export default FullInfo;

package/build/components/Customer/CustomerForms/FullInfo.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 FullInfo({ 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 FullInfo;

package/build/components/Customer/CustomerForms/FullInfoForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Item } from '../../../types/index.js';
+import { FullInfoProps } from './FullInfo';
+export interface FullInfoFormProps extends FullInfoProps {
+    items: Item[];
+    isItemsNotValid: boolean;
+    submitButtonText: string;
+    onSubmit: () => void;
+}
+declare function FullInfoForm({ submitButtonText, onSubmit, customer, country, items, isItemsNotValid, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, }: Readonly<FullInfoFormProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof FullInfoForm>;
+export default _default;

package/build/components/Customer/CustomerForms/FullInfoForm.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 FullInfoForm({ 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(FullInfoForm);

package/build/components/Customer/CustomerForms/PhoneNumberForm.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Item } from '../../../types/index.js';
+import { FullInfoProps } from './FullInfo';
+export interface PhoneNumberFormProps extends Pick<FullInfoProps, 'customer' | 'country' | 'onCountryChange' | 'onCustomerChange' | 'defaultCountry' | 'countries' | 'isCountriesLoading'> {
+    isItemsNotValid: boolean;
+    items: Item[];
+    submitButtonText: string;
+    onSubmit: () => void;
+}
+declare function PhoneNumberForm({ submitButtonText, onSubmit, customer, country, isItemsNotValid, items, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, }: Readonly<PhoneNumberFormProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PhoneNumberForm>;
+export default _default;

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

@@ -0,0 +1,71 @@
+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 { CountriesDropdown, InputNumberStyled, MobileWrapper } from '../../index.js';
+import { FormWrapper, SubmitButton, InputStyled, ErrorStyled } from './style';
+import { validationPhoneNumberSchema } from './validation';
+function PhoneNumberForm({ submitButtonText, onSubmit, customer, country, isItemsNotValid, items, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, }) {
+    const firstNameRef = useRef();
+    const lastNameRef = useRef();
+    const phoneNumberRef = useRef();
+    const { t } = useTranslation();
+    const { control, formState: { isValid, errors }, watch, trigger, } = useForm({
+        mode: 'onChange',
+        resolver: yupResolver(validationPhoneNumberSchema(country.max_digits)),
+        defaultValues: {
+            firstName: customer.firstName,
+            phoneNumber: customer.phoneNumber,
+            lastName: customer.lastName,
+        },
+    });
+    useEffect(() => {
+        // revalidate default values
+        if (customer.firstName && customer.phoneNumber && customer.lastName) {
+            trigger();
+        }
+    }, []);
+    useEffect(() => {
+        watch(({ firstName = '', lastName = '', phoneNumber = '' }) => {
+            onCustomerChange(Object.assign(Object.assign({}, customer), { firstName,
+                lastName,
+                phoneNumber }));
+        });
+    }, [watch, errors, customer]);
+    const onMouseLeave = (e) => {
+        e.stopPropagation();
+    };
+    return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: onMouseLeave }, { children: [_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'), error: Boolean(error === null || error === void 0 ? void 0 : error.message), sx: {
+                                            border: 'none',
+                                            paddingInlineEnd: 0,
+                                        }, inputProps: {
+                                            autoComplete: 'off',
+                                            form: {
+                                                autoComplete: 'off',
+                                            },
+                                        }, hideArrows: true }))] })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message, { numberLen: country.max_digits }) })] })));
+                } }, "phoneNumberFormPhone"), _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) })] })));
+                } }, "phoneNumberFormFirstName"), _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) })] })));
+                } }, "phoneNumberFormLastName"), _jsx(SubmitButton, Object.assign({ onClick: onSubmit, disabled: !isValid || isItemsNotValid || !items.length }, { children: submitButtonText }))] })));
+}
+export default memo(PhoneNumberForm);

package/build/components/Customer/CustomerForms/index.d.ts

@@ -0,0 +1,9 @@
+export * from './validation';
+export * from './EmailForm';
+export { default as EmailForm } from './EmailForm';
+export * from './FullInfo';
+export { default as FullInfo } from './FullInfo';
+export * from './FullInfoForm';
+export { default as FullInfoForm } from './FullInfoForm';
+export * from './PhoneNumberForm';
+export { default as PhoneNumberForm } from './PhoneNumberForm';

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

@@ -0,0 +1,9 @@
+export * from './validation';
+export * from './EmailForm';
+export { default as EmailForm } from './EmailForm';
+export * from './FullInfo';
+export { default as FullInfo } from './FullInfo';
+export * from './FullInfoForm';
+export { default as FullInfoForm } from './FullInfoForm';
+export * from './PhoneNumberForm';
+export { default as PhoneNumberForm } from './PhoneNumberForm';

package/build/components/Customer/CustomerForms/style.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const MobileWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SearchWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const FormWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const SubmitButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const InputStyled: import("@emotion/styled").StyledComponent<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+}> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    error?: boolean | undefined;
+}, {}, {}>;
+export declare const InputNumberStyled: import("@emotion/styled").StyledComponent<Omit<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+    hideArrows?: boolean | undefined;
+}>, "ref"> & import("react").RefAttributes<HTMLInputElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    error?: boolean | undefined;
+}, {}, {}>;
+export declare const ErrorStyled: import("@emotion/styled").StyledComponent<import("../../Error/Error").ErrorI & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled, alpha } from '@mui/material/styles';
+import { Input, InputNumber, Error } from '../../index.js';
+export const MobileWrapper = styled(Box)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    position: 'relative',
+    paddingInline: '8px',
+    alignItems: 'center',
+    borderRadius: '4px',
+    height: '40px',
+}));
+export const SearchWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+}));
+export const FormWrapper = styled(Box)(({ theme }) => ({
+    padding: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    position: 'relative',
+    background: theme.palette.common.white,
+    borderRadius: '4px',
+    width: 'max-content',
+    maxWidth: 230,
+    boxShadow: theme.shadows[3],
+}));
+export const SubmitButton = styled(Button)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textTransform: 'capitalize',
+    padding: '8px 13px',
+    minWidth: 89,
+    height: 32,
+    fontSize: '11px',
+    borderRadius: '4px',
+    fontWeight: 700,
+    background: theme.palette.info.dark,
+    color: theme.palette.common.white,
+    textAlign: 'center',
+    '&.Mui-disabled': {
+        backgroundColor: alpha(theme.palette.grey[700], 0.5),
+        color: theme.palette.common.white,
+        cursor: 'not-allowed',
+    },
+    '&:hover': {
+        background: theme.palette.info.dark,
+    },
+}));
+export const InputStyled = styled(Input, { shouldForwardProp: (props) => props !== 'error' })(({ error }) => (Object.assign({ img: {
+        cursor: 'pointer',
+    } }, (error && {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottom: 'none',
+}))));
+export const InputNumberStyled = styled(InputNumber, { shouldForwardProp: (props) => props !== 'error' })(({ error }) => (Object.assign({ img: {
+        cursor: 'pointer',
+    } }, (error && {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottom: 'none',
+}))));
+export const ErrorStyled = styled(Error)(() => ({
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    height: 25,
+}));

package/build/components/Customer/CustomerForms/validation.d.ts

@@ -0,0 +1,30 @@
+import * as Yup from 'yup';
+export declare const validationEmailFromSchema: Yup.ObjectSchema<{
+    email: string;
+    firstName: string;
+    lastName: string;
+}, Yup.AnyObject, {
+    email: undefined;
+    firstName: undefined;
+    lastName: undefined;
+}, "">;
+export declare const validationFullInfoSchema: (numberLen: number) => Yup.ObjectSchema<{
+    email: string | undefined;
+    phoneNumber: string | undefined;
+    firstName: string;
+    lastName: string;
+}, Yup.AnyObject, {
+    email: undefined;
+    phoneNumber: undefined;
+    firstName: undefined;
+    lastName: undefined;
+}, "">;
+export declare const validationPhoneNumberSchema: (numberLen: number) => Yup.ObjectSchema<{
+    firstName: string;
+    lastName: string;
+    phoneNumber: string;
+}, Yup.AnyObject, {
+    firstName: undefined;
+    lastName: undefined;
+    phoneNumber: undefined;
+}, "">;

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

@@ -0,0 +1,42 @@
+import * as Yup from 'yup';
+export const validationEmailFromSchema = Yup.object().shape({
+    email: Yup.string()
+        .matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, 'invalidEmail')
+        .required('requiredEmail'),
+    firstName: Yup.string().required('requiredFirstName').min(3, 'invalidFirstName'),
+    lastName: Yup.string().required('requiredLastName').min(3, 'invalidLastName'),
+});
+export const validationFullInfoSchema = (numberLen) => Yup.object()
+    .shape({
+    email: Yup.string()
+        .transform((value, originalValue) => {
+        if (originalValue === '')
+            return undefined;
+        return value;
+    })
+        .matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{1,}$/i, 'invalidEmail')
+        .optional(),
+    phoneNumber: Yup.string()
+        .transform((value, originalValue) => {
+        if (!originalValue)
+            return undefined;
+        return value;
+    })
+        .length(numberLen, `invalidMobile`)
+        .optional(),
+    firstName: Yup.string().min(3, 'invalidFirstName').required('requiredFirstName'),
+    lastName: Yup.string().min(3, 'invalidLastName').required('requiredLastName'),
+})
+    .test('atLeastOne', 'atLeastOne', function testAtLeastOne(_, ctx) {
+    var _a;
+    const { email, phoneNumber } = (_a = this.originalValue) !== null && _a !== void 0 ? _a : {};
+    if (!email && !phoneNumber) {
+        return ctx.createError({ message: 'atLeastOne' });
+    }
+    return true;
+});
+export const validationPhoneNumberSchema = (numberLen) => Yup.object().shape({
+    firstName: Yup.string().required('requiredFirstName').min(3, 'invalidFirstName'),
+    lastName: Yup.string().required('requiredLastName').min(3, 'invalidLastName'),
+    phoneNumber: Yup.string().length(numberLen, `invalidMobile`).required('requiredMobile'),
+});

package/build/components/Customer/index.d.ts

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

package/build/components/Customer/index.js

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

package/build/components/Error/Error.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-interface ErrorI extends BoxProps {
+export interface ErrorI extends BoxProps {
     error: string;
 }
 declare function Error({ error, ...props }: ErrorI): import("react/jsx-runtime").JSX.Element;

package/build/components/Inputs/CountriesDropDown/CountriesDropdown.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import type { Country } from '../../../types/index.js';
-declare function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isFetching, }: {
+type CountriesDropdownProps = {
     value?: Partial<Country>;
     defaultCountry?: string;
     onChangeCountry?: (country: Country) => void;
     required?: boolean;
     countries: Country[];
-    isFetching: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof CountriesCode>;
+    isLoading: boolean;
+};
+declare function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isLoading, }: Readonly<CountriesDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CountriesDropdown>;
 export default _default;

package/build/components/Inputs/CountriesDropDown/CountriesDropdown.js

@@ -6,7 +6,7 @@ import Popper from '@mui/material/Popper';
 import Skeleton from '@mui/material/Skeleton';
 import { downArrowIcon, searchIcon } from '../../../constants/index.js';
 import { CountryStyled, CountriesWrapper, CountriesList, InputStyled, CountryButton, Required } from './style';
-function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isFetching = false, }) {
+function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isLoading = false, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const [filteredCountries, setFilteredCountries] = useState([]);
     const [searchValue, setSearchValue] = useState();
@@ -45,7 +45,7 @@ function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry
         }
         setFilteredCountries(countries.filter((country) => country.idd_prefix.toString().startsWith(value.toString())));
     };
-    if (isFetching) {
+    if (isLoading) {
         return _jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } });
     }
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(Box, Object.assign({ "data-testid": "CountriesCode", sx: { position: 'relative' } }, { children: [_jsxs(CountryButton, Object.assign({ type: "button", onClick: openDropdown, sx: {
@@ -56,4 +56,4 @@ function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry
                                         selectNewCode(country);
                                     } }, { children: [country.logo ? _jsx("img", { src: country.logo, alt: "c", className: "logo" }) : _jsx(Skeleton, { variant: "rectangular", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`))) })] })) }))] })) })));
 }
-export default memo(CountriesCode);
+export default memo(CountriesDropdown);

package/build/components/index.d.ts

@@ -130,3 +130,4 @@ export * from './MerchantLogo';
 export * from './FilterDropdown';
 export { default as PhoneFilter } from './PhoneFilter';
 export { default as CountryFilter } from './CountryFilter';
+export * from './Customer';

package/build/components/index.js

@@ -130,3 +130,4 @@ export * from './MerchantLogo';
 export * from './FilterDropdown';
 export { default as PhoneFilter } from './PhoneFilter';
 export { default as CountryFilter } from './CountryFilter';
+export * from './Customer';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.261",
+  "version": "0.1.262",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
@@ -102,7 +102,8 @@
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
+    "recharts": "^2.15.1",
+    "yup": "^1.7.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -129,30 +130,30 @@
     "vite-tsconfig-paths": "^4.2.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "@mui/material": "^5",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "framer-motion": "^10",
-    "react-hook-form": "^7",
     "@hookform/resolvers": "^3",
-    "react-router-dom": "^7",
-    "i18next": "^22",
-    "react-i18next": "^12",
-    "react-multi-date-picker": "^4",
+    "@mui/material": "^5",
+    "@uiw/react-json-view": "^2.0.0-alpha",
     "dayjs": "^1",
+    "framer-motion": "^10",
+    "i18next": "^22",
+    "re-resizable": "^6",
+    "react": "^18",
+    "react-currency-input-field": "^3",
+    "react-dom": "^18",
+    "react-draggable": "^4",
     "react-dropzone": "^14",
+    "react-hook-form": "^7",
     "react-hot-toast": "^2",
-    "recharts": "^2",
+    "react-i18next": "^12",
+    "react-multi-date-picker": "^4",
+    "react-router-dom": "^7",
+    "react-virtualized-auto-sizer": "^1",
     "react-window": "^1.8",
     "react-window-infinite-loader": "^1",
-    "react-virtualized-auto-sizer": "^1",
-    "re-resizable": "^6",
-    "react-draggable": "^4",
-    "react-currency-input-field": "^3",
     "react18-input-otp": "^1",
-    "@uiw/react-json-view": "^2.0.0-alpha"
+    "recharts": "^2"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [