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

package/build/features/shared/Header/Header.js

@@ -0,0 +1,88 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { alpha, styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { settingsSelector } from '../../../app/settings';
+import { ThemeMode } from '../../../@types';
+import Icon from '../../../components/Icon';
+import { useAppSelector } from '../../../hooks';
+import { ICONS_NAMES } from '../../../constants';
+import { PoweredByFooter } from '../Footer';
+var IconStyled = styled(Icon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(1.25),
+        height: theme.spacing(1.25),
+        transform: theme.direction === 'rtl' ? 'scaleX(-1)' : 'scaleX(1)',
+        marginInlineEnd: theme.spacing(0.625)
+    });
+});
+var HeaderStyled = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            padding: theme.spacing(1.125, 3, 1.75, 3),
+            paddingInlineEnd: theme.spacing(2.25),
+            paddingInlineStart: theme.spacing(2.25),
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            background: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.black, 0.32) : alpha(theme.palette.common.black, 0.06),
+            backdropFilter: 'blur(14px)',
+            borderRadius: theme.spacing(1.5, 1.5, 0, 0),
+            position: 'absolute',
+            width: '100%',
+            top: theme.spacing(-1),
+            left: 0,
+            right: 0
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            top: theme.spacing(0.25),
+            height: theme.spacing(8.75)
+        },
+        _b);
+});
+var LeftContainerStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'start',
+    justifyContent: 'start'
+}); });
+var RightContainerStyled = styled(Box)(function () { return ({
+    display: 'flex'
+}); });
+var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'enableBack'; } })(function (_a) {
+    var theme = _a.theme, enableBack = _a.enableBack;
+    return ({
+        color: theme.palette.common.white,
+        fontWeight: 600,
+        cursor: enableBack ? 'pointer' : 'default',
+        textTransform: 'capitalize',
+        minWidth: 'unset',
+        visibility: enableBack ? 'visible' : 'hidden',
+        '& .MuiButton-startIcon': {
+            margin: 0
+        }
+    });
+});
+var Header = function (_a) {
+    var onBack = _a.onBack, headerSx = _a.headerSx;
+    var t = useTranslation().t;
+    var data = useAppSelector(settingsSelector).data;
+    return (_jsxs(HeaderStyled, __assign({ sx: headerSx, id: 'main-feature-container-header' }, { children: [_jsx(LeftContainerStyled, { children: _jsx(ButtonStyled, __assign({ startIcon: _jsx(IconStyled, { src: ICONS_NAMES.back_white }), enableBack: !!onBack, variant: 'text', onClick: onBack }, { children: t('back') })) }), _jsx(RightContainerStyled, { children: !data.isTapOrigin && _jsx(PoweredByFooter, {}) })] })));
+};
+export default memo(Header);

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

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

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

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

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

@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Input from '../Input';
-2;
 export var InputStyled = styled(Input)(function (_a) {
     var readOnly = _a.readOnly;
     return ({

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare type LanguagePopupProps = {
+    isSmallDevice?: boolean;
+};
+export default function LanguagePopup({ isSmallDevice }: LanguagePopupProps): JSX.Element;

package/build/features/shared/LanguagePopup/LanguagePopup.js

@@ -0,0 +1,178 @@
+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 * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Popover from '@mui/material/Popover';
+import Button from '@mui/material/Button';
+import { alpha, styled, useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { useAppDispatch, useLanguage } from '../../../hooks';
+import { sendCustomEventToGTM } from '../../../utils';
+import { LanguageMode, ThemeMode } from '../../../@types';
+import { handleLanguage } from '../../../app/settings';
+import ExpandIcon from '../../../components/ExpandIcon';
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        backgroundColor: alpha(theme.palette.common.black, 0.06),
+        backdropFilter: theme.spacing(1.75),
+        borderRadius: theme.spacing(2),
+        '&:hover': {
+            backgroundColor: alpha(theme.palette.common.black, 0.06)
+        }
+    });
+});
+var IconStyled = styled('span')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            content: '""',
+            position: 'absolute',
+            width: 0,
+            height: 0,
+            borderBottom: "8px solid ".concat(theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.black, 0.87) : alpha(theme.palette.common.white, 0.73)),
+            borderLeft: '5px solid transparent',
+            borderRight: '5px solid transparent',
+            bottom: '0px',
+            top: 'unset',
+            left: theme.direction === 'ltr' ? 'calc(50% - -7px)' : 'unset',
+            right: theme.direction === 'rtl' ? 'calc(50% - 17px)' : 'unset',
+            transform: 'rotate(180deg)'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            top: '0px',
+            bottom: 'unset',
+            transform: 'rotate(0deg)',
+            left: theme.direction === 'ltr' ? 'calc(50% - -7px)' : 'unset',
+            right: theme.direction === 'rtl' ? 'calc(50% - 17px)' : 'unset'
+        },
+        _b);
+});
+var ExpandIconStyled = styled(ExpandIcon, { shouldForwardProp: function (prop) { return prop !== 'open'; } })(function (_a) {
+    var _b;
+    var theme = _a.theme, open = _a.open;
+    return (_b = {
+            width: theme.spacing(1),
+            height: theme.spacing(1),
+            filter: 'brightness(0) invert(1)',
+            transition: 'all 0.3s',
+            transform: open ? 'rotate(180deg)' : 'rotate(0deg)'
+        },
+        _b[theme.breakpoints.down('sm')] = {
+            transform: 'rotate(0deg)'
+        },
+        _b);
+});
+var PopoverStyled = styled(Popover)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        zIndex: 99999,
+        '& .MuiPopover-paper': {
+            borderRadius: theme.spacing(0),
+            background: 'transparent',
+            boxShadow: 'none'
+        }
+    });
+});
+var ContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        background: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.black, 0.87) : alpha(theme.palette.common.white, 0.73),
+        borderRadius: theme.spacing(1),
+        margin: theme.spacing(1),
+        boxShadow: theme.shadows[8],
+        backdropFilter: 'blur(12px)'
+    });
+});
+var LanguageStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ background: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.white, 0.13) : alpha(theme.palette.common.black, 0.13), border: theme.palette.mode === ThemeMode.DARK ? alpha(theme.palette.common.white, 0.05) : alpha(theme.palette.common.black, 0.05), borderRadius: theme.spacing(0.25), color: theme.palette.common.white, fontWeight: 600, width: theme.spacing(2.25), height: theme.spacing(1.625) }, theme.typography.overline), { marginInlineEnd: theme.spacing(0.75) }));
+});
+var TextBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderRadius: theme.spacing(1),
+        padding: theme.spacing(1),
+        alignItems: 'center',
+        width: theme.spacing(19),
+        display: 'flex',
+        '&:hover': {
+            backgroundColor: theme.palette.info.dark,
+            cursor: 'pointer'
+        }
+    });
+});
+var LangIconStyled = styled(LanguageStyled)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.primary.contrastText,
+        marginInlineEnd: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    });
+});
+var LangTextStyled = styled('span')(function (_a) {
+    var theme = _a.theme;
+    return (__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.primary.contrastText, fontWeight: 400 }, theme.typography.button));
+});
+export default function LanguagePopup(_a) {
+    var isSmallDevice = _a.isSmallDevice;
+    var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var isEn = useLanguage().isEn;
+    var t = useTranslation().t;
+    var dispatch = useAppDispatch();
+    var theme = useTheme();
+    var handleChangeLanguage = function (language) {
+        var prevLanguage = isEn ? LanguageMode.EN : LanguageMode.AR;
+        if (prevLanguage !== language) {
+            sendCustomEventToGTM({
+                event: 'Send Event',
+                event_category: 'User Registration Flow',
+                event_action: 'switch language clicked',
+                event_label: "From ".concat(prevLanguage, " to ").concat(language)
+            });
+            dispatch(handleLanguage(language));
+        }
+        handleClose();
+    };
+    var handleClick = function (event) {
+        if (anchorEl) {
+            handleClose();
+            return;
+        }
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'language-popup' : undefined;
+    return (_jsxs(Box, { children: [_jsxs(ButtonStyled, __assign({ disableElevation: true, disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, sx: { minWidth: 'unset' }, "aria-describedby": id, variant: 'text', onClick: handleClick }, { children: [_jsx(LanguageStyled, { children: _jsx("span", __assign({ style: { position: 'relative', top: theme.spacing(isEn ? 0.125 : -0.25) } }, { children: t(isEn ? LanguageMode.EN : LanguageMode.AR) })) }), _jsx(ExpandIconStyled, { open: open })] })), _jsxs(PopoverStyled, __assign({ id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: isSmallDevice
+                    ? {
+                        vertical: 'bottom',
+                        horizontal: 'center'
+                    }
+                    : {
+                        vertical: 'top',
+                        horizontal: 'center'
+                    }, transformOrigin: isSmallDevice
+                    ? {
+                        vertical: 'top',
+                        horizontal: 'center'
+                    }
+                    : {
+                        vertical: 'bottom',
+                        horizontal: 'center'
+                    } }, { children: [_jsx(IconStyled, {}), _jsxs(ContainerStyled, { children: [_jsx(Box, __assign({ sx: { p: 1, pb: 0 } }, { children: _jsxs(TextBoxStyled, __assign({ onClick: function () { return handleChangeLanguage(LanguageMode.EN); } }, { children: [_jsx(LangIconStyled, { children: t(LanguageMode.EN) }), _jsx(LangTextStyled, { children: t('english') })] })) })), _jsx(Box, __assign({ sx: { p: 1, pt: 0 } }, { children: _jsxs(TextBoxStyled, __assign({ onClick: function () { return handleChangeLanguage(LanguageMode.AR); } }, { children: [_jsx(LangIconStyled, { children: _jsx("span", __assign({ style: { marginTop: theme.spacing(-0.5) } }, { children: t(LanguageMode.AR) })) }), _jsx(LangTextStyled, { children: t('arabic') })] })) }))] })] }))] }));
+}

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

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

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

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

package/build/features/shared/Mandatory/Mandatory.js

@@ -10,10 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 var SpanStyled = styled('span')(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.h6), { fontWeight: theme.typography.fontWeightLight, color: alpha(theme.palette.error.light, 0.4), lineHeight: theme.spacing(2.5), verticalAlign: 'sub' }));
+    return (__assign(__assign({}, theme.typography.h6), { fontWeight: theme.typography.fontWeightRegular, color: theme.palette.error.light, lineHeight: theme.spacing(2.5), verticalAlign: 'sub' }));
 });
 export default function Mandatory() {
     return _jsx(SpanStyled, { children: "*" });

package/build/features/shared/OTP/OTP.js

@@ -56,29 +56,28 @@ var BoxStyled = styled(Box)(function (_a) {
     return ({
         display: 'flex',
         flexDirection: 'column',
-        padding: theme.spacing(2.5, 0, 6.5, 0)
+        padding: theme.spacing(2.5, 0, 5, 0)
     });
 });
 var OTPBox = styled(Box)(function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = {
-            marginInlineStart: '18px',
-            marginInlineEnd: '18px'
+            display: 'flex',
+            justifyContent: 'center',
+            marginInlineStart: '24px',
+            marginInlineEnd: '24px'
         },
         _b[theme.breakpoints.down('sm')] = {
-            marginInlineStart: '10px',
+            marginInlineStart: 'unset',
             marginInlineEnd: '15px'
         },
         _b);
 });
-var LoaderBoxStyled = styled(OTPBox)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'end'
-    });
-});
+var LoaderBoxStyled = styled(OTPBox)(function () { return ({
+    display: 'flex',
+    justifyContent: 'end'
+}); });
 var OTPInput = function (_a) {
     var timeEndLabel = _a.timeEndLabel, loading = _a.loading, timerInSeconds = _a.timerInSeconds, onResetClick = _a.onResetClick, hasError = _a.hasError, props = __rest(_a, ["timeEndLabel", "loading", "timerInSeconds", "onResetClick", "hasError"]);
     var otpRef = React.useRef(null);

package/build/features/shared/PaciVerification/PaciVerification.js

@@ -14,8 +14,9 @@ import * as React from 'react';
 import Box from '@mui/material/Box/Box';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { ThemeMode } from '../../../@types';
 import Text from '../../../components/Text';
-import { ScreenContainer } from '../../shared/Containers';
+import { ContainerWithHeader } from '../../shared/Containers';
 import { MobileButton } from '../../shared/Button';
 import { mobileOS } from '../../../utils';
 import { useCountUp } from '../../../hooks';
@@ -33,11 +34,11 @@ var VerifyPACITitleContainerStyled = styled(Box)(function (_a) {
 });
 var VerifyPACITitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px' }));
+    return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.common.black, fontWeight: theme.typography.fontWeightBold, marginBottom: theme.spacing(2.4), lineHeight: '19.2px' }));
 });
 var VerifyPACISubTitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px' }));
+    return (__assign(__assign({}, theme.typography.body2), { color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.common.black, fontWeight: theme.typography.fontWeightMedium, lineHeight: '16.8px' }));
 });
 var Container = styled(Box)(function (_a) {
     var theme = _a.theme;
@@ -86,6 +87,6 @@ var VerifyPACI = function (_a) {
         return 'paci_verification_description_check';
     }, [phaseNumber]);
     var isErrorPhase = endPhaseStarted && !success;
-    return (_jsxs(ScreenContainer, __assign({ sx: { mb: 2.5 } }, { children: [_jsxs(VerifyPACITitleContainerStyled, { children: [_jsx(Container, { children: success ? _jsx(VerifyPACISuccess, {}) : _jsx(VerifyPACILoading, { type: isErrorPhase ? 3 : phaseNumber }) }), isErrorPhase ? (_jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t('paci_verification_title_error') }), _jsx(VerifyPACISubTitleStyled, __assign({ sx: { pb: 1 } }, { children: t('paci_verification_description_error') })), _jsx(VerifyPACISubTitleStyled, { children: t('paci_verification_redirection_message') })] })) : (_jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t(title) }), _jsx(VerifyPACISubTitleStyled, { children: t(description) })] }))] }), (isAndroid || isIOS) && (_jsx(MobileButton, __assign({ onClick: onRedirect, hideIcon: true }, { children: t('Open Kuwait Mobile ID') })))] })));
+    return (_jsxs(ContainerWithHeader, __assign({ title: 'paci_verify_loading', description: 'paci_verify_loading_desc' }, { children: [_jsxs(VerifyPACITitleContainerStyled, __assign({ sx: { mb: 2.5 } }, { children: [_jsx(Container, { children: success ? _jsx(VerifyPACISuccess, {}) : _jsx(VerifyPACILoading, { type: isErrorPhase ? 3 : phaseNumber }) }), isErrorPhase ? (_jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t('paci_verification_title_error') }), _jsx(VerifyPACISubTitleStyled, __assign({ sx: { pb: 1 } }, { children: t('paci_verification_description_error') })), _jsx(VerifyPACISubTitleStyled, { children: t('paci_verification_redirection_message') })] })) : (_jsxs(_Fragment, { children: [_jsx(VerifyPACITitleStyled, { children: t(title) }), _jsx(VerifyPACISubTitleStyled, { children: t(description) })] }))] })), (isAndroid || isIOS) && (_jsx(MobileButton, __assign({ onClick: onRedirect, hideIcon: true }, { children: t('Open Kuwait Mobile ID') })))] })));
 };
 export default React.memo(VerifyPACI);

package/build/features/shared/PasswordIcon/PasswordIcon.js

@@ -13,13 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, alpha } from '@mui/material/styles';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { ThemeMode } from '../../../@types';
 var PasswordHideIconStyled = styled(VisibilityOffIcon)(function (_a) {
     var theme = _a.theme;
     return ({
         width: theme.spacing(2.5),
         height: theme.spacing(2.5),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.secondary : alpha(theme.palette.text.secondary, 0.5)
     });
 });
 var PasswordShowIconStyled = styled(VisibilityIcon)(function (_a) {
@@ -28,7 +29,7 @@ var PasswordShowIconStyled = styled(VisibilityIcon)(function (_a) {
         width: theme.spacing(2.5),
         height: theme.spacing(2.5),
         cursor: 'pointer',
-        color: alpha(theme.palette.text.primary, 0.4)
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.text.secondary : alpha(theme.palette.text.secondary, 0.5)
     });
 });
 export default function PasswordIcon(_a) {

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

@@ -11,10 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Input from '../../../components/Input';
-import Warning from '../../../components/Warning';
+import { ThemeMode } from '../../../@types';
+import Input from '../../shared/TextField';
 import Text from '../../../components/Text';
 import Collapse from '../../../components/Collapse';
 import SocialMediaGroup from '../../../components/SocialMediaGroup';
@@ -22,40 +22,50 @@ import ToggleButton from '../../../components/ToggleButton';
 import Icon from '../../../components/Icon';
 import { useLanguage } from '../../../hooks';
 import { isWebsite, isTwitter } from '../../../utils';
+import Warning from '../../../components/Warning';
+import { ICONS_NAMES } from '../../../constants';
+import Mandatory from '../../shared/Mandatory';
+import { InputLabelStyled } from './SalesChannel';
 import CheckIcon from '../CheckIcon';
 var SocialMediaGroupStyled = styled(SocialMediaGroup)(function (_a) {
     var theme = _a.theme, defaultValue = _a.defaultValue;
     return ({
-        borderTop: "1px solid ".concat(alpha(theme.palette.divider, 0.8)),
-        borderBottom: !defaultValue ? "1px solid ".concat(alpha(theme.palette.divider, 0.8)) : '',
+        borderBottom: !defaultValue ? "1px solid ".concat(theme.palette.divider) : '',
+        backgroundColor: 'transparent',
         width: '100%'
     });
 });
 var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme, readOnly = _a.readOnly;
+    var theme = _a.theme, inputProps = _a.inputProps;
     return ({
-        padding: theme.spacing(0, 2, 0, 0),
-        paddingInlineEnd: theme.spacing(2),
-        opacity: readOnly ? 0.6 : 1,
+        direction: 'ltr',
+        opacity: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) ? 0.6 : 1,
+        marginTop: theme.spacing(2),
+        width: '100%',
         input: {
             paddingInlineStart: theme.spacing(0)
+        },
+        label: {
+            transformOrigin: 'top left'
         }
     });
 });
 var TextStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return ({
-        padding: theme.spacing(0, 0, 0, 1.5)
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary,
+        padding: theme.spacing(0, 0, 0, 0),
+        position: 'relative',
+        bottom: theme.spacing(-1.125)
     });
 });
 var ToggleIconStyled = styled(Icon, {
     shouldForwardProp: function (prop) { return prop !== 'isActive'; }
 })(function (_a) {
-    var theme = _a.theme, isActive = _a.isActive;
+    var theme = _a.theme;
     return ({
         width: theme.spacing(3),
-        height: theme.spacing(3),
-        filter: isActive ? 'invert(1) sepia(1) saturate(5) hue-rotate(175deg)' : ''
+        height: theme.spacing(3)
     });
 });
 var SocialMediaButtonStyled = styled(ToggleButton, {
@@ -63,40 +73,55 @@ var SocialMediaButtonStyled = styled(ToggleButton, {
 })(function (_a) {
     var theme = _a.theme, isActive = _a.isActive, isShow = _a.isShow;
     return ({
-        borderBottom: isActive ? "".concat(theme.spacing(0.1875), " solid #3478F6") : 'none',
+        borderBottom: isActive ? "".concat(theme.spacing(0.1875), " solid ").concat(theme.palette.primary.main) : 'none',
         display: isShow ? 'inherit' : 'none',
-        transition: 'display 0.3s'
+        transition: 'display 0.3s',
+        width: theme.spacing(3)
     });
 });
 export default function SaleChannelIconsInput(_a) {
     var selectedChannels = _a.selectedChannels, onSelectIcon = _a.onSelectIcon, selectedIconId = _a.selectedIconId, onChangeValue = _a.onChangeValue, error = _a.error, readOnly = _a.readOnly, isVerified = _a.isVerified;
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
+    var theme = useTheme();
+    var images = ICONS_NAMES;
     var getPlaceHolder = function (item) {
         var _a, _b;
         if (isAr)
             return ((_a = item.name) === null || _a === void 0 ? void 0 : _a.ar) || '';
         return ((_b = item.name) === null || _b === void 0 ? void 0 : _b.en) || '';
     };
-    return (_jsx(Collapse, __assign({ in: selectedChannels.length > 0 }, { children: _jsxs(Box, __assign({ sx: { mb: 3, direction: 'ltr' } }, { children: [_jsx(SocialMediaGroupStyled, __assign({ exclusive: true, onChange: function (e, value) {
+    return (_jsx(Collapse, __assign({ in: selectedChannels.length > 0 }, { children: _jsxs(Box, __assign({ sx: { direction: 'ltr', ml: 3, mr: 3, mt: 2.5 } }, { children: [_jsxs(InputLabelStyled, __assign({ dir: theme.direction, sx: { mt: 0 } }, { children: [t('sales_channel_title'), " ", _jsx(Mandatory, {})] })), _jsx(SocialMediaGroupStyled, __assign({ exclusive: true, onChange: function (e, value) {
                         onSelectIcon(value);
                     } }, { children: selectedChannels.map(function (channel, index) {
                         var _a;
                         var isActive = selectedIconId === channel.id;
+                        var channelLightLogo = isActive ? images["".concat(channel.code, "_active")] : images[channel.code];
+                        var channelDarkLogo = isActive ? images["".concat(channel.code, "_active_dark")] : images["".concat(channel.code, "_dark")];
+                        var logo = theme.palette.mode === ThemeMode.DARK ? channelDarkLogo : channelLightLogo;
                         return ((_a = channel.sub) === null || _a === void 0 ? void 0 : _a.length) ? (channel.sub.map(function (sub, subIndex) {
                             var isSubActive = selectedIconId === sub.id;
-                            return (_jsx(SocialMediaButtonStyled, __assign({ isShow: true, isActive: isSubActive, value: sub.id }, { children: _jsx(ToggleIconStyled, { isActive: isSubActive, src: (sub === null || sub === void 0 ? void 0 : sub.logo) || '' }) }), "sub_".concat(subIndex)));
-                        })) : (_jsx(SocialMediaButtonStyled, __assign({ isShow: true, isActive: isActive, value: channel.id || '' }, { children: _jsx(ToggleIconStyled, { isActive: isActive, src: (channel === null || channel === void 0 ? void 0 : channel.logo) || '' }) }), index));
+                            var subLightLogo = isSubActive ? images["".concat(sub.code, "_active")] : images[sub.code];
+                            var subDarkLogo = isSubActive ? images["".concat(sub.code, "_active_dark")] : images["".concat(sub.code, "_dark")];
+                            var subLogo = theme.palette.mode === ThemeMode.DARK ? subDarkLogo : subLightLogo;
+                            return (_jsx(SocialMediaButtonStyled, __assign({ sx: { marginInlineEnd: 2.5 }, isShow: true, isActive: isSubActive, value: sub.id }, { children: _jsx(ToggleIconStyled, { isActive: isSubActive, src: subLogo || '' }) }), "sub_".concat(subIndex)));
+                        })) : (_jsx(SocialMediaButtonStyled, __assign({ sx: { marginInlineEnd: 2.5 }, isShow: true, isActive: isActive, value: channel.id || '' }, { children: _jsx(ToggleIconStyled, { isActive: isActive, src: logo || '' }) }), index));
                     }) })), selectedChannels.map(function (channel, index) {
                     var _a;
                     var isActive = selectedIconId === channel.id;
                     return ((_a = channel.sub) === null || _a === void 0 ? void 0 : _a.length) ? (channel.sub.map(function (sub, subIndex) {
                         var isSubActive = selectedIconId === sub.id;
-                        return (_jsx(Collapse, __assign({ in: isSubActive, timeout: 300 }, { children: _jsx(InputStyled, { readOnly: readOnly, onChange: function (e) {
+                        return (_jsx(Collapse, __assign({ in: isSubActive, timeout: 300 }, { children: _jsx(InputStyled, { boxSx: { padding: 0 }, inputProps: { readOnly: readOnly }, InputProps: {
+                                    endAdornment: isVerified && !error && _jsx(CheckIcon, { isVerified: true }),
+                                    startAdornment: (_jsx(TextStyled, __assign({ sx: __assign({}, (isTwitter(sub.code) && { fontSize: '20px' })) }, { children: isWebsite(sub.code) ? "https://www." : isTwitter(sub.code) ? "@" : '' })))
+                                }, onChange: function (e) {
                                     onChangeValue(e.target.value, sub.id);
-                                }, value: sub.address || '', startAdornment: _jsx(TextStyled, __assign({ sx: __assign({}, (isTwitter(sub.code) && { fontSize: '20px' })) }, { children: isWebsite(sub.code) ? "https://www." : isTwitter(sub.code) ? "@" : '' })), endAdornment: isVerified && !error && _jsx(CheckIcon, { isVerified: true }), placeholder: t(getPlaceHolder(sub)) }) }), "sub_".concat(subIndex)));
-                    })) : (_jsx(Collapse, __assign({ in: isActive, timeout: 300 }, { children: _jsx(InputStyled, { readOnly: readOnly, onChange: function (e) {
+                                }, value: sub.address || '', label: t(getPlaceHolder(sub)) }) }), "sub_".concat(subIndex)));
+                    })) : (_jsx(Collapse, __assign({ in: isActive, timeout: 300 }, { children: _jsx(InputStyled, { boxSx: { padding: 0 }, inputProps: { readOnly: readOnly }, InputProps: {
+                                startAdornment: (_jsx(TextStyled, __assign({ sx: __assign({}, (isTwitter(channel.code) && { fontSize: '20px' })) }, { children: isWebsite(channel.code) ? "https://www." : isTwitter(channel.code) ? "@" : '' }))),
+                                endAdornment: isVerified && !error && _jsx(CheckIcon, { isVerified: true })
+                            }, onChange: function (e) {
                                 onChangeValue(e.target.value, channel.id);
-                            }, value: channel.address || '', startAdornment: _jsx(TextStyled, __assign({ sx: __assign({}, (isTwitter(channel.code) && { fontSize: '20px' })) }, { children: isWebsite(channel.code) ? "https://www." : isTwitter(channel.code) ? "@" : '' })), placeholder: t(getPlaceHolder(channel)), endAdornment: isVerified && !error && _jsx(CheckIcon, { isVerified: true }) }) }), index));
+                            }, label: t(channel.code), value: channel.address || '', placeholder: t(getPlaceHolder(channel)) }) }), index));
                 }), _jsx(Collapse, __assign({ in: !!(error && error !== 'choose_atleast_one_channel') }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(error) })) }))] })) })));
 }

package/build/features/shared/SalesChannels/SalesChannel.d.ts

@@ -1,5 +1,18 @@
 import React from 'react';
 import { SaleChannel } from '../../../@types';
+export declare const InputLabelStyled: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | 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" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 interface SalesChannelProps {
     list: SaleChannel[];
     error: string | undefined;