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

package/build/features/shared/SalesChannels/SalesChannel.js

@@ -21,7 +21,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import Box from '@mui/material/Box';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useLanguage } from '../../../hooks';
 import Text from '../../../components/Text';
@@ -29,10 +29,11 @@ import CheckBox from '../../../components/CheckBox';
 import Warning from '../../../components/Warning';
 import Collapse from '../../../components/Collapse';
 import { findFirstId } from '../../../utils';
+import Mandatory from '../../shared/Mandatory';
 import SaleChannelIconsInput from './SaleChannelIconsInput';
-var InputLabelStyled = styled(Text)(function (_a) {
+export var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign({ margin: theme.spacing(2.5, 2.5, 0.5, 2.5), color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
+    return (__assign({ margin: theme.spacing(3, 0, 0.875, 0), color: theme.palette.secondary.main }, theme.typography.body1));
 });
 var ContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -40,34 +41,20 @@ var ContainerStyled = styled(Box)(function (_a) {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        padding: theme.spacing(0, 0.5, 0, 0.5),
         height: theme.spacing(3.625),
         marginBlockEnd: theme.spacing(0.2)
     });
 });
-var TextStyled = styled(Text)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.4), fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre' }, theme.typography.body2), { marginBlockStart: theme.spacing(1.75) }));
+var TextStyled = styled(Text, { shouldForwardProp: function (prop) { return prop !== 'checked'; } })(function (_a) {
+    var theme = _a.theme, checked = _a.checked;
+    return (__assign({ color: checked ? theme.palette.secondary.main : theme.palette.secondary.light, fontWeight: theme.typography.fontWeightLight, whiteSpace: 'pre' }, theme.typography.caption));
 });
 var CheckBoxStyled = styled(CheckBox)(function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
+    var theme = _a.theme;
     return ({
-        paddingInline: '15px',
-        marginInlineEnd: theme.spacing(-1),
-        opacity: disabled ? 0.6 : 1,
-        '& .MuiSvgIcon-root': {
-            fontSize: 30
-        },
-        '&.Mui-checked': {
-            color: theme.palette.text.primary,
-            borderRadius: theme.spacing(2.5)
-        }
+        marginInlineStart: theme.spacing(-1.125)
     });
 });
-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' }));
-});
 var CollapseStyled = styled(Collapse)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -146,9 +133,9 @@ var SalesChannel = function (_a) {
         var id = _a.id;
         return id === activeSaleIconId;
     }); }, [selectedSalas, activeSaleIconId]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, __assign({ sx: { mb: 3 } }, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(MandatoryStyled, { children: "*" })] }), list.map(function (channel, index) {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, __assign({ sx: { ml: 3, mr: 3 } }, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(Mandatory, {})] }), list.map(function (channel, index) {
                         var _a, _b;
-                        return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id, disableRipple: true, disabled: disabled || readOnly, disableFocusRipple: true, focusRipple: false, checked: isChecked(channel.id), onChange: function () { return onSelectSalesChannel(channel); } }), _jsxs(TextStyled, { children: [isAr ? (_a = channel === null || channel === void 0 ? void 0 : channel.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = channel === null || channel === void 0 ? void 0 : channel.name) === null || _b === void 0 ? void 0 : _b.en, " "] })] }, "".concat(channel.id, "-indx").concat(index)));
+                        return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id, disableRipple: true, disabled: disabled || readOnly, disableFocusRipple: true, focusRipple: false, checked: isChecked(channel.id), onChange: function () { return onSelectSalesChannel(channel); } }), _jsxs(TextStyled, __assign({ checked: isChecked(channel.id) }, { children: [isAr ? (_a = channel === null || channel === void 0 ? void 0 : channel.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = channel === null || channel === void 0 ? void 0 : channel.name) === null || _b === void 0 ? void 0 : _b.en, " "] }))] }, "".concat(channel.id, "-indx").concat(index)));
                     }), _jsx(CollapseStyled, __assign({ in: error === 'choose_atleast_one_channel' }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(error) })) }))] }), 'salesChannels'), _jsx(SaleChannelIconsInput, { readOnly: readOnly, error: error, selectedIconId: activeSaleIconId, onSelectIcon: onChangeActiveSaleIcon, onChangeValue: onValueChange, selectedChannels: selectedSalas, isVerified: isChannelVerified === null || isChannelVerified === void 0 ? void 0 : isChannelVerified(activeSaleIconId, selectedChannel) }, 'saleChannelIconsInput')] }));
 };
 export default React.memo(SalesChannel);

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import { SxProps, Theme } from '@mui/material/styles';
 interface SearchProps {
     showSearch?: boolean;
     placeholder?: string;
     onSearchValue?: (value: string) => void;
+    sx?: SxProps<Theme>;
 }
-declare const Search: ({ onSearchValue, placeholder }: SearchProps) => JSX.Element;
+declare const Search: ({ onSearchValue, placeholder, sx }: SearchProps) => JSX.Element;
 export default Search;

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

@@ -1,13 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import Input from '../../shared/Input';
+import { styled, alpha } from '@mui/material/styles';
+import { ThemeMode } from '../../../@types';
+import TextField from '../../shared/TextField';
+import SearchIcon from '../SearchIcon';
+var TextFieldStyled = styled(TextField)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        '& .MuiFilledInput-root': {
+            background: theme.palette.mode === ThemeMode.DARK ? "".concat(alpha(theme.palette.common.black, 0.7), " !important") : "".concat(theme.palette.secondary.dark, " !important"),
+            border: "1px solid ".concat(alpha(theme.palette.text.secondary, 0.3), " !important"),
+            boxShadow: 'none',
+            paddingInlineEnd: theme.spacing(1.5)
+        },
+        label: {
+            lineHeight: '1.4',
+            top: '-6px'
+        },
+        input: {
+            height: theme.spacing(5),
+            paddingTop: '0px',
+            paddingBottom: '0px',
+            marginTop: theme.spacing(0.5),
+            marginBottom: theme.spacing(-0.75)
+        }
+    });
+});
 var Search = function (_a) {
-    var onSearchValue = _a.onSearchValue, placeholder = _a.placeholder;
+    var onSearchValue = _a.onSearchValue, placeholder = _a.placeholder, sx = _a.sx;
     var t = useTranslation().t;
     var handleOnChange = function (event) {
         onSearchValue === null || onSearchValue === void 0 ? void 0 : onSearchValue(event.target.value);
     };
-    return (_jsx(React.Fragment, { children: _jsx(Input, { placeholder: t(placeholder || 'search_placeholder'), onChange: handleOnChange }) }));
+    return (_jsx(React.Fragment, { children: _jsx(TextFieldStyled, { boxSx: __assign({ pl: 1, pt: 2, pr: 1, pb: 0 }, sx), InputProps: { endAdornment: _jsx(SearchIcon, {}) }, label: t(placeholder || 'search_placeholder'), onChange: handleOnChange }) }));
 };
 export default Search;

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

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

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

@@ -10,17 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '../../../components/Icon';
 import { styled } from '@mui/material/styles';
+import { ThemeMode } from '../../../@types';
+import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
 var SearchIcon = styled(Icon)(function (_a) {
     var theme = _a.theme;
-    return ({
-        width: theme.spacing(2),
-        height: theme.spacing(2),
-        cursor: 'pointer'
-    });
+    return (__assign({ display: 'flex', width: theme.spacing(2), height: theme.spacing(2) }, (theme.palette.mode === ThemeMode.DARK && {
+        filter: 'brightness(0) invert(1)'
+    })));
 });
 export default function CustomSearchIcon(props) {
-    return _jsx(SearchIcon, __assign({ src: ICONS_NAMES.SEARCH_ICON }, props));
+    return _jsx(SearchIcon, __assign({ src: ICONS_NAMES.search }, props));
 }

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

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

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

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

package/build/features/shared/SuccessFlowButtons/SuccessFlowButtons.js

@@ -13,7 +13,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
-import { MerchantStatus } from '../../../@types';
+import { MerchantStatus, ThemeMode } from '../../../@types';
 import { FlowsButtons } from '../../shared/Button';
 import { ICONS_NAMES, PASSWORD_OPERATION_TYPE } from '../../../constants';
 import { useAppSelector, useLanguage } from '../../../hooks';
@@ -26,12 +26,16 @@ import AcceptancePayouts from '../AcceptancePayouts';
 var TitleStyled = styled(Text)(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), (_b = { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, lineHeight: 1.75, paddingBottom: theme.spacing(3) }, _b[theme.breakpoints.down('sm')] = {}, _b)));
+    return (__assign(__assign({}, theme.typography.body1), (_b = { fontWeight: theme.typography.fontWeightBold, color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.success.dark, paddingBottom: theme.spacing(3) }, _b[theme.breakpoints.down('sm')] = {}, _b)));
+});
+var SubTitleStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.caption), { marginTop: theme.spacing(3), color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.primary, fontWeight: theme.typography.fontWeightRegular, lineHeight: '16.8px', textAlign: 'center' }));
 });
 var ContainerStyled = styled(Container)(function (_a) {
     var theme = _a.theme;
     return ({
-        justifyContent: 'space-between',
+        justifyContent: 'center',
         minHeight: theme.spacing(30),
         alignItems: 'center'
     });
@@ -85,6 +89,15 @@ var SuccessFlowButtons = function (_a) {
             var status = name === 'password' ? flowStatus : (_b = flowsDetails.find(function (flow) { return flow.name === name; })) === null || _b === void 0 ? void 0 : _b.status;
             var type = status === 'reviewed' || status === 'completed' || status === 'complete' || status === 'verified' ? 'completed' : 'pending';
             var title = t("".concat(name, "_flow_").concat(type), {
+                individual_name: t('individual'),
+                brand: t('brand'),
+                business_type: t('entity'),
+                license_number: t('license_number'),
+                bank_name: t('bank'),
+                iban: t('iban'),
+                tax_id: t('tax')
+            });
+            var subtitle = t("".concat(name, "_flow_").concat(type), {
                 individual_name: (is_authorized && count > 1 ? t('company_individuals_details', { count: count }) : username.toLowerCase() + maskedId) || t('individual'),
                 brand: brandName,
                 business_type: entityLegalName,
@@ -95,16 +108,18 @@ var SuccessFlowButtons = function (_a) {
             });
             var isCompleted = status === 'verified' && name !== 'password';
             var isIndividual = name === 'individual';
-            var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
-            var hoverSrc = "".concat(name, "_white_icon");
+            var darkSrc = isCompleted ? "".concat(name, "_icon_completed") : "".concat(name, "_icon_dark");
+            var src = isCompleted ? "".concat(name, "_icon_completed") : "".concat(name, "_icon");
             return {
                 token: token,
                 name: name,
                 status: status,
                 title: title,
+                subtitle: subtitle,
                 href: url,
                 src: images[src],
-                hoverSrc: images[hoverSrc],
+                darkSrc: images[darkSrc],
+                hoverSrc: images[src],
                 isCompleted: isCompleted,
                 sx: isIndividual ? { textTransform: 'capitalize' } : {}
             };
@@ -125,12 +140,12 @@ var SuccessFlowButtons = function (_a) {
             }
         }
     }, [flows, isAr]);
-    return (_jsxs(ContainerStyled, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons, data: {
+    return (_jsxs(ContainerStyled, __assign({ sx: { ml: 3, mr: 3 } }, { children: [_jsxs(TitleStyled, { children: [t('account_details'), " "] }), _jsx(AcceptancePayouts, { showAcceptance: isAcceptance, showPayout: isPayout }), _jsx(SubTitleStyled, { children: t('flows_description') }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons, data: {
                         flowName: flowName,
                         email: email || '',
                         emailUrl: url,
                         brandName: shortenBrand(brandName),
                         isAuthorizedUser: is_authorized
-                    } }) })] }));
+                    } }) })] })));
 };
 export default memo(SuccessFlowButtons);

package/build/features/shared/SuccessScreen/SuccessScreen.js

@@ -11,31 +11,31 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from '@mui/material/Box/Box';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import Text from '../../../components/Text';
 import Button from '../../../components/Button';
-import Container from '../Containers/ScreenContainer';
 import { EmailProvidersButton, SuccessButton } from '../../shared/Button';
 import Icon from '../../../components/Icon';
 import { ICONS_NAMES } from '../../../constants';
 import { useLanguage } from '../../../hooks';
+import { ThemeMode } from '../../../@types';
+import Container from '../Containers/ScreenContainer';
 var MailBoxStyled = styled(Box)(function () { return ({
     width: '100%'
 }); });
 var TitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, marginBlockEnd: theme.spacing(2.375), lineHeight: 1.75, padding: '0px 20px' }));
+    return (__assign(__assign({}, theme.typography.h6), { fontWeight: 600, color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.primary, marginBlockEnd: theme.spacing(3), padding: theme.spacing(0, 3), textAlign: 'center' }));
 });
 var DescriptionStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.subtitle2), { fontWeight: theme.typography.fontWeightMedium, textAlign: 'center', color: theme.palette.text.primary, marginBlockEnd: theme.spacing(3.75), lineHeight: theme.spacing(2.125), padding: theme.spacing(0, 3.75) }));
+    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightMedium, textAlign: 'center', color: theme.palette.text.secondary, marginBlockEnd: theme.spacing(3), padding: theme.spacing(0, 3) }));
 });
 var ContainerStyled = styled(Container)(function (_a) {
     var theme = _a.theme;
     return ({
-        justifyContent: 'space-between',
         minHeight: theme.spacing(30),
         alignItems: 'center',
         pointerEvents: 'auto'
@@ -50,7 +50,8 @@ var IconStyled = styled(Icon)(function (_a) {
             marginBlockEnd: theme.spacing(3.25)
         },
         _b[theme.breakpoints.down('sm')] = {
-            marginBlock: theme.spacing(3.25)
+            marginBlock: theme.spacing(3.25),
+            marginTop: theme.spacing(0)
         },
         _b);
 });
@@ -58,6 +59,7 @@ var ThankYou = function (_a) {
     var title = _a.title, description = _a.description, showEmailProviders = _a.showEmailProviders, onSuccess = _a.onSuccess, successTitle = _a.successTitle, loading = _a.loading, error = _a.error, enableBack = _a.enableBack, onBack = _a.onBack;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(ContainerStyled, { children: [_jsx(IconStyled, { src: ICONS_NAMES.SUCCESS_GIF, alt: 'loading...' }), _jsxs(TitleStyled, { children: [title, " "] }), _jsx(DescriptionStyled, { children: description }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('gmail_btn_open_title'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('outlook_btn_open_title'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('apple_btn_open_title'), href: 'mailto:' }, mail: { title: t('mail_btn_open_title'), href: 'mailto:' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(SuccessButton, __assign({ onClick: onSuccess, disableBack: true, disableNextIcon: true, disabled: loading, isAr: isAr, loading: loading, error: t(error || '') }, { children: t(successTitle || '') })) })), enableBack && (_jsx(Button, __assign({ sx: { mb: 1.5, mt: 0 }, onClick: function () { return onBack === null || onBack === void 0 ? void 0 : onBack(); }, variant: 'text' }, { children: t('back') })))] }));
+    var theme = useTheme();
+    return (_jsxs(ContainerStyled, { children: [_jsx(IconStyled, { src: theme.palette.mode === ThemeMode.DARK ? ICONS_NAMES.success_screen_dark : ICONS_NAMES.success_screen, alt: 'loading...' }), title && _jsxs(TitleStyled, { children: [title, " "] }), _jsx(DescriptionStyled, { children: description }), showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(EmailProvidersButton, { gmail: { title: t('gmail_btn_open_title'), href: 'https://mail.google.com/mail/u/0/#inbox' }, outlook: { title: t('outlook_btn_open_title'), href: 'https://outlook.live.com/mail/0/' }, apple: { title: t('apple_btn_open_title'), href: 'mailto:' }, mail: { title: t('mail_btn_open_title'), href: 'mailto:' } }) })), onSuccess && !showEmailProviders && (_jsx(MailBoxStyled, { children: _jsx(SuccessButton, __assign({ onClick: onSuccess, disableBack: true, disableNextIcon: true, disabled: loading, isAr: isAr, loading: loading, variant: 'contained', error: t(error || '') }, { children: t(successTitle || '') })) })), enableBack && (_jsx(Button, __assign({ sx: { mb: 1.5, mt: 0 }, onClick: function () { return onBack === null || onBack === void 0 ? void 0 : onBack(); }, variant: 'text' }, { children: t('back') })))] }));
 };
 export default React.memo(ThankYou);

package/build/features/shared/{UploadFile/UploadFile.d.ts → TextField/TextField.d.ts}

@@ -1,29 +1,19 @@
-import React from 'react';
-export declare const InputContainerStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { TextFieldProps } from '../../../components/TextField';
+export declare const BoxStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: React.ReactNode;
     component?: React.ElementType<any> | undefined;
     ref?: React.Ref<unknown> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    sx?: SxProps<Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-interface UploadFileProps {
-    label: string;
-    required?: boolean;
-    title: string;
-    subTitle: string;
-    dragDescription: string;
-    uploadingTitle: string;
-    successTitle: string;
-    error?: string;
-    progress?: number;
-    isSubmitting?: boolean;
-    isUploading?: boolean;
-    isFileUploaded?: boolean;
-    onFileUploaded: (files: Array<File>) => void;
-    onReset: () => void;
-    initialFileName?: string;
-    multiple?: boolean;
-}
-declare const UploadFile: ({ label, required, title, subTitle, dragDescription, uploadingTitle, successTitle, isSubmitting, isUploading, isFileUploaded, error, progress, onFileUploaded, onReset, initialFileName, multiple }: UploadFileProps) => JSX.Element;
-export default UploadFile;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "component" | "ref" | "sx"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const TextStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    show: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const IconStyled: import("@emotion/styled").StyledComponent<import("../../../components/Icon").IconProps & React.RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare type CustomInputProps = TextFieldProps & {
+    boxSx?: SxProps<Theme>;
+};
+export default function CustomInput({ boxSx, placeholder, helperText, ...rest }: CustomInputProps): JSX.Element;

package/build/features/shared/TextField/TextField.js

@@ -0,0 +1,63 @@
+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 __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 { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import TextField from '../../../components/TextField';
+import { ICONS_NAMES } from '../../../constants';
+import Icon from '../../../components/Icon';
+export var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0, 3, 0, 3)
+    });
+});
+export var TextStyled = styled('span', { shouldForwardProp: function (prop) { return prop !== 'show'; } })(function (_a) {
+    var show = _a.show, theme = _a.theme;
+    return ({
+        display: show ? 'inherit' : 'none',
+        marginTop: theme.spacing(1)
+    });
+});
+export var IconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(1.5),
+        height: theme.spacing(1.5),
+        verticalAlign: 'text-bottom',
+        marginInlineEnd: theme.spacing(0.5)
+    });
+});
+var InputStyled = styled(TextField)(function (_a) {
+    var theme = _a.theme, inputProps = _a.inputProps;
+    return (__assign({ width: '100%', direction: theme.direction }, ((inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) && {
+        cursor: 'default',
+        '& .MuiFilledInput-root': {
+            background: "".concat(theme.palette.action.disabledBackground, " !important")
+        }
+    })));
+});
+export default function CustomInput(_a) {
+    var boxSx = _a.boxSx, placeholder = _a.placeholder, helperText = _a.helperText, rest = __rest(_a, ["boxSx", "placeholder", "helperText"]);
+    return (_jsx(BoxStyled, __assign({ sx: boxSx }, { children: _jsx(InputStyled, __assign({}, rest, { placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.toString(), fullWidth: true, error: !!helperText, helperText: _jsxs(TextStyled, __assign({ show: !!helperText }, { children: [_jsx(IconStyled, { src: ICONS_NAMES.error_icon }), helperText] })) })) })));
+}

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

@@ -0,0 +1,3 @@
+import TextField, { CustomInputProps } from './TextField';
+export type { CustomInputProps };
+export default TextField;

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CustomInputProps } from '../../shared/TextField';
+export declare const InputStyled: import("@emotion/styled").StyledComponent<CustomInputProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export default function TextFieldSelect(props: CustomInputProps): JSX.Element;

package/build/features/shared/TextFieldSelect/TextFieldSelect.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import Input from '../../shared/TextField';
+export var InputStyled = styled(Input)(function (_a) {
+    var inputProps = _a.inputProps;
+    return ({
+        '& .MuiInputBase-input': {
+            cursor: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) ? 'default' : 'pointer',
+            WebkitTextFillColor: 'inherit',
+            caretColor: 'transparent'
+        }
+    });
+});
+export default function TextFieldSelect(props) {
+    var handleFocus = function (event) {
+        event.target.blur();
+        if (props.onFocus)
+            props.onFocus(event);
+    };
+    return _jsx(InputStyled, __assign({}, props, { inputMode: 'none', onFocus: handleFocus }));
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material/styles';
+export declare type TitleDescriptionProps = {
+    title: string;
+    description?: string;
+    sx?: SxProps<Theme>;
+};
+declare const TitleDescription: ({ title, description, sx }: TitleDescriptionProps) => JSX.Element;
+export default TitleDescription;

package/build/features/shared/TitleDescription/TitleDescription.js

@@ -0,0 +1,77 @@
+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 { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { useAppSelector } from '../../../hooks';
+import { settingsSelector } from '../../../app/settings';
+import { ThemeMode } from '../../../@types';
+import Icon from '../../../components/Icon';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        background: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white,
+        borderBottom: "1px solid ".concat(theme.palette.divider),
+        borderRadius: theme.spacing(1.5, 1.5, 0, 0),
+        padding: theme.spacing(1.75, 3, 1.75, 3),
+        marginBottom: theme.spacing(3),
+        zIndex: '99999',
+        justifyContent: 'start',
+        width: '100%'
+    });
+});
+var ContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(0.375)
+    });
+});
+var TitleStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary,
+        fontWeight: 400,
+        fontSize: theme.spacing(2.25)
+    });
+});
+var DescStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.text.secondary,
+        fontWeight: 400,
+        fontSize: theme.spacing(1.5)
+    });
+});
+var IconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(5),
+        height: theme.spacing(5),
+        background: theme.palette.mode === ThemeMode.DARK ? theme.palette.background.paper : theme.palette.common.white,
+        boxShadow: theme.shadows[7],
+        borderRadius: theme.spacing(12.5),
+        marginInlineEnd: theme.spacing(1)
+    });
+});
+var TitleDescription = function (_a) {
+    var title = _a.title, description = _a.description, sx = _a.sx;
+    var t = useTranslation().t;
+    var data = useAppSelector(settingsSelector).data;
+    var isTapOrigin = data.isTapOrigin, merchant = data.merchant;
+    return (_jsxs(BoxStyled, __assign({ sx: sx }, { children: [!isTapOrigin && (merchant === null || merchant === void 0 ? void 0 : merchant.logo) && _jsx(IconStyled, { src: merchant === null || merchant === void 0 ? void 0 : merchant.logo }), _jsxs(ContainerStyled, { children: [_jsx(TitleStyled, { children: t(title) }), description && _jsx(DescStyled, { children: t(description) })] })] })));
+};
+export default TitleDescription;

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

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

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

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