@tap-payments/auth-jsconnect 2.1.9-test → 2.1.10-test

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

@@ -0,0 +1,91 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Box from '@mui/material/Box/Box';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import Text from '../../../components/Text';
+import { ScreenContainer } from '../../shared/Containers';
+import { MobileButton } from '../../shared/Button';
+import { mobileOS } from '../../../utils';
+import { useCountUp } from '../../../hooks';
+import VerifyPACILoading from './VerifyPACILoading';
+import VerifyPACISuccess from './VerifyPACISuccess';
+var VerifyPACITitleContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        direction: theme.direction,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginBottom: theme.spacing(2.5)
+    });
+});
+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' }));
+});
+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' }));
+});
+var Container = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        maxHeight: '300px',
+        marginBottom: theme.spacing(3.25)
+    });
+});
+var VerifyPACI = function (_a) {
+    var success = _a.success, expiryInSeconds = _a.expiryInSeconds, urls = _a.urls, onFinish = _a.onFinish;
+    var t = useTranslation().t;
+    var count = useCountUp({ start: 0, end: expiryInSeconds, sleepMS: 1000 }).count;
+    var errorWaitingTime = 3;
+    var phases = 2;
+    var remainingTime = expiryInSeconds - errorWaitingTime;
+    var phaseNumber = Math.floor((count / remainingTime) * phases) + 1;
+    var isEnded = count === expiryInSeconds;
+    var endPhaseStarted = count >= remainingTime;
+    React.useEffect(function () {
+        if (isEnded && onFinish)
+            onFinish();
+    }, [isEnded]);
+    var onRedirect = React.useCallback(function () {
+        if (os === 'Android') {
+            window.open(urls === null || urls === void 0 ? void 0 : urls.android, '_blank');
+        }
+        if (os === 'iOS') {
+            window.open(urls === null || urls === void 0 ? void 0 : urls.ios, '_blank');
+        }
+    }, [urls]);
+    var os = React.useMemo(function () { return mobileOS(); }, []);
+    var isAndroid = React.useMemo(function () { return os === 'Android' && (urls === null || urls === void 0 ? void 0 : urls.android); }, [os, urls]);
+    var isIOS = React.useMemo(function () { return os === 'iOS' && (urls === null || urls === void 0 ? void 0 : urls.ios); }, [os, urls]);
+    var title = React.useMemo(function () {
+        if (phaseNumber === 1)
+            return 'paci_verification_title_wait';
+        return 'paci_verification_title_check';
+    }, [phaseNumber]);
+    var description = React.useMemo(function () {
+        if (phaseNumber === 1)
+            return 'paci_verification_description_wait';
+        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') })))] })));
+};
+export default React.memo(VerifyPACI);

package/build/features/{business/screens/VerifyPACI → shared/PaciVerification}/VerifyPACILoading.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface VerifyPACILoadingProps {
     loop?: boolean;
+    type: number;
 }
 declare const _default: React.NamedExoticComponent<VerifyPACILoadingProps>;
 export default _default;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import LottieFile, { LottieAnimationFiles } from '../../../components/Lottie';
+var VerifyPACILoading = function (_a) {
+    var _b = _a.loop, loop = _b === void 0 ? true : _b, type = _a.type;
+    if (type === 1)
+        return (_jsx(_Fragment, { children: _jsx(LottieFile, { file: LottieAnimationFiles.start_loading, loop: loop, width: '90%' }) }));
+    if (type === 2)
+        return (_jsx(_Fragment, { children: _jsx(LottieFile, { file: LottieAnimationFiles.still_loading, loop: loop, width: '90%' }) }));
+    return (_jsx(_Fragment, { children: _jsx(LottieFile, { file: LottieAnimationFiles.error, loop: false, width: '90%' }) }));
+};
+VerifyPACILoading.defaultProps = {};
+export default memo(VerifyPACILoading);

package/build/features/{business/screens/VerifyPACI → shared/PaciVerification}/VerifyPACISuccess.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo } from 'react';
-import LottieFile, { LottieAnimationFiles } from '../../../../components/Lottie';
+import LottieFile, { LottieAnimationFiles } from '../../../components/Lottie';
 var VerifyPACISuccess = function () {
     return (_jsx(_Fragment, { children: _jsx(LottieFile, { loop: false, file: LottieAnimationFiles.success, width: '90%' }) }));
 };

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

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

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SaleChannel } from '../../../@types';
+interface SaleChannelIconsInputProps {
+    selectedChannels: SaleChannel[];
+    onSelectIcon: (id: string) => void;
+    selectedIconId: string;
+    onChangeValue: (val: string, id: string) => void;
+    error: string | undefined;
+}
+export default function SaleChannelIconsInput({ selectedChannels, onSelectIcon, selectedIconId, onChangeValue, error }: SaleChannelIconsInputProps): JSX.Element;
+export {};

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

@@ -0,0 +1,100 @@
+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 { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Input from '../../../components/Input';
+import Warning from '../../../components/Warning';
+import Text from '../../../components/Text';
+import Collapse from '../../../components/Collapse';
+import SocialMediaGroup from '../../../components/SocialMediaGroup';
+import ToggleButton from '../../../components/ToggleButton';
+import Icon from '../../../components/Icon';
+import { useLanguage } from '../../../hooks';
+import { isWebsite, isTwitter } from '../../../utils';
+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)) : '',
+        width: '100%'
+    });
+});
+var InputStyled = styled(Input)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0, 2, 0, 0),
+        paddingInlineEnd: theme.spacing(2),
+        input: {
+            paddingInlineStart: theme.spacing(0)
+        }
+    });
+});
+var TextStyled = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0, 0, 0, 1.5)
+    });
+});
+var ToggleIconStyled = styled(Icon, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive;
+    return ({
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        filter: isActive ? 'invert(1) sepia(1) saturate(5) hue-rotate(175deg)' : ''
+    });
+});
+var SocialMediaButtonStyled = styled(ToggleButton, {
+    shouldForwardProp: function (prop) { return prop !== 'isActive' && prop !== 'isShow'; }
+})(function (_a) {
+    var theme = _a.theme, isActive = _a.isActive, isShow = _a.isShow;
+    return ({
+        borderBottom: isActive ? "".concat(theme.spacing(0.1875), " solid #3478F6") : 'none',
+        display: isShow ? 'inherit' : 'none',
+        transition: 'display 0.3s'
+    });
+});
+export default function SaleChannelIconsInput(_a) {
+    var selectedChannels = _a.selectedChannels, onSelectIcon = _a.onSelectIcon, selectedIconId = _a.selectedIconId, onChangeValue = _a.onChangeValue, error = _a.error;
+    var isAr = useLanguage().isAr;
+    var t = useTranslation().t;
+    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) {
+                        onSelectIcon(value);
+                    } }, { children: 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(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));
+                    }) })), 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, { 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://" : isTwitter(sub.code) ? "@" : '' })), placeholder: t(getPlaceHolder(sub)) }) }), "sub_".concat(subIndex)));
+                    })) : (_jsx(Collapse, __assign({ in: isActive, timeout: 300 }, { children: _jsx(InputStyled, { 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://" : isTwitter(channel.code) ? "@" : '' })), 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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SaleChannel } from '../../../@types';
+interface SalesChannelProps {
+    list: SaleChannel[];
+    error: string | undefined;
+    onChange: (channel: SaleChannel[]) => void;
+    defaultValues?: SaleChannel[];
+}
+declare const _default: React.MemoExoticComponent<({ list, onChange, error, defaultValues }: SalesChannelProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,132 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 { useTranslation } from 'react-i18next';
+import { useLanguage } from '../../../hooks';
+import Text from '../../../components/Text';
+import CheckBox from '../../../components/CheckBox';
+import Warning from '../../../components/Warning';
+import Collapse from '../../../components/Collapse';
+import { findFirstId } from '../../../utils';
+import SaleChannelIconsInput from './SaleChannelIconsInput';
+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));
+});
+var ContainerStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        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 CheckBoxStyled = styled(CheckBox)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInline: '15px',
+        marginInlineEnd: theme.spacing(-1),
+        '& .MuiSvgIcon-root': {
+            fontSize: 30
+        },
+        '&.Mui-checked': {
+            color: theme.palette.text.primary,
+            borderRadius: theme.spacing(2.5)
+        }
+    });
+});
+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 ({
+        marginBlockStart: theme.spacing(2)
+    });
+});
+var SalesChannel = function (_a) {
+    var _b = _a.list, list = _b === void 0 ? [] : _b, onChange = _a.onChange, error = _a.error, defaultValues = _a.defaultValues;
+    var _c = React.useState([]), selectedSalas = _c[0], setSelectedSales = _c[1];
+    var _d = React.useState(''), activeSaleIconId = _d[0], setActiveSaleIconId = _d[1];
+    var t = useTranslation().t;
+    var isAr = useLanguage().isAr;
+    var isChecked = function (id) {
+        return !!selectedSalas.find(function (item) { return item.id === id; });
+    };
+    var onChangeActiveSaleIcon = function (id) {
+        setActiveSaleIconId(id);
+    };
+    var onSelectSalesChannel = function (channel) {
+        if (isChecked(channel.id)) {
+            var newSelectedSales = selectedSalas.filter(function (item) { return item.id !== channel.id; });
+            setSelectedSales(newSelectedSales);
+            onChange(newSelectedSales);
+            var item = newSelectedSales.at(-1);
+            if (item)
+                onChangeActiveSaleIcon(findFirstId([item]));
+            return;
+        }
+        onChangeActiveSaleIcon(findFirstId([channel]));
+        setSelectedSales(__spreadArray(__spreadArray([], selectedSalas, true), [channel], false));
+    };
+    var onValueChange = function (value, id) {
+        var newSelectedSales = selectedSalas.map(function (item) {
+            var _a;
+            if ((_a = item.sub) === null || _a === void 0 ? void 0 : _a.length) {
+                var sub = item.sub.map(function (subItem) {
+                    if (subItem.id === id) {
+                        return __assign(__assign({}, subItem), { address: value });
+                    }
+                    return subItem;
+                });
+                return __assign(__assign({}, item), { sub: sub });
+            }
+            if (item.id === id) {
+                return __assign(__assign({}, item), { address: value });
+            }
+            return item;
+        });
+        setSelectedSales(newSelectedSales);
+        onChange(newSelectedSales);
+    };
+    React.useEffect(function () {
+        if (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.length) {
+            setSelectedSales(defaultValues);
+            onChangeActiveSaleIcon(findFirstId(defaultValues));
+        }
+    }, [defaultValues]);
+    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) {
+                        var _a, _b;
+                        return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id, disableRipple: true, 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)));
+                    }), _jsx(CollapseStyled, __assign({ in: error === 'choose_atleast_one_channel' }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(error) })) }))] }), 'salesChannels'), _jsx(SaleChannelIconsInput, { error: error, selectedIconId: activeSaleIconId, onSelectIcon: onChangeActiveSaleIcon, onChangeValue: onValueChange, selectedChannels: selectedSalas }, 'saleChannelIconsInput')] }));
+};
+export default React.memo(SalesChannel);

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

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

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

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

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

@@ -20,9 +20,10 @@ interface UploadFileProps {
     isSubmitting?: boolean;
     isUploading?: boolean;
     isFileUploaded?: boolean;
-    onFileUploaded: (file: File) => void;
+    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 }: UploadFileProps) => JSX.Element;
+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;

package/build/features/shared/UploadFile/UploadFile.js

@@ -55,21 +55,21 @@ var ClearIconStyled = styled(ClearIcon)(function (_a) {
         color: theme.palette.common.white
     });
 });
-export var InputContainerStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        width: '100%',
-        justifyContent: 'center'
-    });
-});
+export var InputContainerStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'center'
+}); });
 var UploadFile = function (_a) {
-    var label = _a.label, required = _a.required, title = _a.title, subTitle = _a.subTitle, dragDescription = _a.dragDescription, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, isSubmitting = _a.isSubmitting, isUploading = _a.isUploading, isFileUploaded = _a.isFileUploaded, error = _a.error, progress = _a.progress, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset, initialFileName = _a.initialFileName;
+    var label = _a.label, required = _a.required, title = _a.title, subTitle = _a.subTitle, dragDescription = _a.dragDescription, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, isSubmitting = _a.isSubmitting, isUploading = _a.isUploading, isFileUploaded = _a.isFileUploaded, error = _a.error, progress = _a.progress, onFileUploaded = _a.onFileUploaded, onReset = _a.onReset, initialFileName = _a.initialFileName, multiple = _a.multiple;
     var _b = React.useState(initialFileName || ''), fileName = _b[0], setFileName = _b[1];
     var _c = React.useState(!!initialFileName), showFile = _c[0], setShowFile = _c[1];
-    var handleFileChange = function (file) {
-        setFileName(maskFileName(file === null || file === void 0 ? void 0 : file.name));
-        onFileUploaded === null || onFileUploaded === void 0 ? void 0 : onFileUploaded(file);
+    var handleFileChange = function (files) {
+        var _a;
+        if ((files === null || files === void 0 ? void 0 : files.length) > 0) {
+            setFileName(maskFileName((_a = files === null || files === void 0 ? void 0 : files[0]) === null || _a === void 0 ? void 0 : _a.name));
+            onFileUploaded === null || onFileUploaded === void 0 ? void 0 : onFileUploaded(files);
+        }
     };
     var handleReset = function () {
         if (!isSubmitting) {
@@ -86,6 +86,6 @@ var UploadFile = function (_a) {
         else
             setShowFile(false);
     }, [isFileUploaded]);
-    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: progress, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error }) }) })), _jsx(Collapse, __assign({ in: showFile, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
+    return (_jsxs(FeatureStyled, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: label }), required && _jsx(Mandatory, {})] }), _jsx(Collapse, __assign({ in: !showFile }, { children: _jsx(InputContainerStyled, { children: _jsx(DragAndDrop, { title: title, subTitle: subTitle, description: dragDescription, fileExists: !!fileName, uploadingTitle: uploadingTitle, successTitle: successTitle, progress: progress, uploading: isUploading, uploadSuccess: isFileUploaded, onSuccess: handleFileChange, error: error, multiple: multiple }) }) })), _jsx(Collapse, __assign({ in: showFile, timeout: 300 }, { children: _jsxs(InputContainerStyled, { children: [_jsxs(BoxStyled, { children: [_jsxs(Box, __assign({ sx: { display: 'flex' } }, { children: [_jsx(Icon, { src: ICONS_NAMES.DOC_ICON }), _jsx(Text, { children: fileName })] })), _jsx(Box, { children: _jsx(CheckIcon, {}) })] }), _jsx(UploadBoxStyled, __assign({ onClick: handleReset }, { children: _jsx(ClearIconStyled, {}) }))] }) }))] }));
 };
 export default UploadFile;

package/build/hooks/index.d.ts

@@ -12,3 +12,4 @@ export * from './useWindowSize';
 export * from './useStepStartedListener';
 export * from './useScreen';
 export * from './useSetFromDefaultValues';
+export * from './useCountUp';

package/build/hooks/index.js

@@ -12,3 +12,4 @@ export * from './useWindowSize';
 export * from './useStepStartedListener';
 export * from './useScreen';
 export * from './useSetFromDefaultValues';
+export * from './useCountUp';

package/build/hooks/useCountUp.d.ts

@@ -0,0 +1,9 @@
+interface CountUpOptions {
+    end: number;
+    start?: number;
+    sleepMS?: number;
+}
+export declare const useCountUp: ({ end, start, sleepMS }: CountUpOptions) => {
+    count: number;
+};
+export {};

package/build/hooks/useCountUp.js

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+export var useCountUp = function (_a) {
+    var end = _a.end, _b = _a.start, start = _b === void 0 ? 0 : _b, _c = _a.sleepMS, sleepMS = _c === void 0 ? 0 : _c;
+    var _d = useState(start), count = _d[0], setCount = _d[1];
+    var increment = function () {
+        setCount(count + 1);
+    };
+    useEffect(function () {
+        if (count >= end)
+            return;
+        var timer = setTimeout(function () {
+            increment();
+        }, sleepMS);
+        return function () { return clearTimeout(timer); };
+    }, [count]);
+    return { count: count };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.1.9-test",
+	"version": "2.1.10-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",