@tap-payments/auth-jsconnect 2.0.49-test → 2.0.51-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/@types/app.d.ts +6 -4
- package/build/@types/app.js +2 -2
- package/build/@types/form.d.ts +3 -0
- package/build/api/auth.d.ts +6 -1
- package/build/api/auth.js +16 -1
- package/build/api/data.d.ts +4 -1
- package/build/api/data.js +6 -2
- package/build/api/index.d.ts +4 -1
- package/build/assets/locales/ar.json +7 -1
- package/build/assets/locales/en.json +7 -1
- package/build/components/AnimationFlow/AnimationFlow.js +3 -5
- package/build/components/AnimationFlow/BottomSheet.js +2 -1
- package/build/components/AnimationFlow/Dialog.d.ts +1 -1
- package/build/components/AnimationFlow/Dialog.js +2 -2
- package/build/components/FileInput/DragAndDrop.d.ts +9 -1
- package/build/components/FileInput/DragAndDrop.js +113 -8
- package/build/components/Lottie/Lottie.d.ts +220 -0
- package/build/components/Lottie/Lottie.js +56 -0
- package/build/components/Lottie/files/pulsating_circle_waves.json +236 -0
- package/build/components/Lottie/index.d.ts +3 -0
- package/build/components/Lottie/index.js +3 -0
- package/build/components/ProgressBar/CircularProgressBar.d.ts +14 -0
- package/build/components/ProgressBar/CircularProgressBar.js +48 -0
- package/build/components/ProgressBar/index.d.ts +2 -0
- package/build/components/ProgressBar/index.js +2 -0
- package/build/constants/api.js +1 -1
- package/build/constants/app.d.ts +1 -0
- package/build/constants/app.js +16 -3
- package/build/constants/assets.d.ts +7 -0
- package/build/constants/assets.js +7 -0
- package/build/constants/validation.d.ts +1 -0
- package/build/constants/validation.js +1 -0
- package/build/features/app/bank/bankStore.d.ts +4 -0
- package/build/features/app/bank/bankStore.js +42 -22
- package/build/features/app/business/businessStore.js +16 -12
- package/build/features/app/connect/connectStore.d.ts +9 -1
- package/build/features/app/connect/connectStore.js +115 -13
- package/build/features/app/entity/entityStore.js +13 -9
- package/build/features/bank/screens/BankDetails/BankDetails.js +2 -2
- package/build/features/bank/screens/BankDetails/BankStatement.js +33 -8
- package/build/features/business/screens/Activities/ActivitiesList.d.ts +1 -1
- package/build/features/business/screens/Activities/SalesChannels.js +1 -1
- package/build/features/business/screens/Customers/CustomerLocations.d.ts +2 -2
- package/build/features/connect/Connect.js +11 -5
- package/build/features/connect/screens/CivilID/CivilID.d.ts +5 -0
- package/build/features/connect/screens/CivilID/CivilID.js +85 -0
- package/build/features/connect/screens/CivilID/IDNumber.d.ts +7 -0
- package/build/features/connect/screens/CivilID/IDNumber.js +59 -0
- package/build/features/connect/screens/CivilID/index.d.ts +3 -0
- package/build/features/connect/screens/CivilID/index.js +2 -0
- package/build/features/connect/screens/CivilID/validation.d.ts +8 -0
- package/build/features/connect/screens/CivilID/validation.js +4 -0
- package/build/features/connect/screens/Individual/Individual.js +5 -2
- package/build/features/connect/screens/Merchant/Merchant.js +7 -4
- package/build/features/connect/screens/Merchant/SalesChannels.js +1 -1
- package/build/features/connect/screens/Merchant/SocialMedia.js +7 -7
- package/build/features/connect/screens/Mobile/Mobile.js +7 -4
- package/build/features/connect/screens/VerifyPACI/VerifyPACI.d.ts +5 -0
- package/build/features/connect/screens/VerifyPACI/VerifyPACI.js +118 -0
- package/build/features/connect/screens/VerifyPACI/index.d.ts +3 -0
- package/build/features/connect/screens/VerifyPACI/index.js +2 -0
- package/build/features/entity/screens/EntityInfoConfirm/ActivitiesList.d.ts +1 -1
- package/build/features/entity/screens/EntityInfoConfirm/SalesChannels.js +1 -1
- package/build/features/featuresScreens.js +10 -0
- package/build/features/shared/Background/Background.d.ts +2 -5
- package/build/features/shared/Background/Background.js +6 -4
- package/build/features/shared/Input/Input.d.ts +1 -1
- package/build/features/shared/Input/Input.js +2 -2
- package/build/features/shared/UploadFile/UploadFile.d.ts +8 -3
- package/build/features/shared/UploadFile/UploadFile.js +23 -8
- package/build/hooks/index.d.ts +1 -0
- package/build/hooks/index.js +1 -0
- package/build/hooks/useScreen.d.ts +3 -0
- package/build/hooks/useScreen.js +14 -0
- package/build/utils/device.d.ts +1 -0
- package/build/utils/device.js +13 -0
- package/build/utils/locale.js +1 -1
- package/build/utils/string.d.ts +2 -0
- package/build/utils/string.js +9 -0
- package/package.json +2 -1
package/build/@types/app.d.ts
CHANGED
|
@@ -45,10 +45,10 @@ export declare enum SocialMediaTypes {
|
|
|
45
45
|
WEB = "website",
|
|
46
46
|
INSTAGRAM = "instagram",
|
|
47
47
|
TWITTER = "twitter",
|
|
48
|
-
SOCIAL = "social",
|
|
48
|
+
SOCIAL = "social media",
|
|
49
49
|
PHYSICAL_STORE = "physical store",
|
|
50
50
|
CALL_CENTER = "call center",
|
|
51
|
-
APP = "app",
|
|
51
|
+
APP = "mobile app",
|
|
52
52
|
APPLE_STORE = "apple store",
|
|
53
53
|
PLAY_STORE = "play store"
|
|
54
54
|
}
|
|
@@ -89,8 +89,10 @@ export interface Activity {
|
|
|
89
89
|
}
|
|
90
90
|
export interface SalesChannel {
|
|
91
91
|
id: string;
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
name: {
|
|
93
|
+
ar: string;
|
|
94
|
+
en: string;
|
|
95
|
+
};
|
|
94
96
|
}
|
|
95
97
|
export interface SourceOfIncome {
|
|
96
98
|
id: string;
|
package/build/@types/app.js
CHANGED
|
@@ -3,10 +3,10 @@ export var SocialMediaTypes;
|
|
|
3
3
|
SocialMediaTypes["WEB"] = "website";
|
|
4
4
|
SocialMediaTypes["INSTAGRAM"] = "instagram";
|
|
5
5
|
SocialMediaTypes["TWITTER"] = "twitter";
|
|
6
|
-
SocialMediaTypes["SOCIAL"] = "social";
|
|
6
|
+
SocialMediaTypes["SOCIAL"] = "social media";
|
|
7
7
|
SocialMediaTypes["PHYSICAL_STORE"] = "physical store";
|
|
8
8
|
SocialMediaTypes["CALL_CENTER"] = "call center";
|
|
9
|
-
SocialMediaTypes["APP"] = "app";
|
|
9
|
+
SocialMediaTypes["APP"] = "mobile app";
|
|
10
10
|
SocialMediaTypes["APPLE_STORE"] = "apple store";
|
|
11
11
|
SocialMediaTypes["PLAY_STORE"] = "play store";
|
|
12
12
|
})(SocialMediaTypes || (SocialMediaTypes = {}));
|
package/build/@types/form.d.ts
CHANGED
package/build/api/auth.d.ts
CHANGED
|
@@ -13,8 +13,12 @@ export declare type IDCredential = {
|
|
|
13
13
|
identification_id_type: string;
|
|
14
14
|
date_of_birth: string;
|
|
15
15
|
};
|
|
16
|
+
export declare type CivilID = {
|
|
17
|
+
identification_id: string;
|
|
18
|
+
country_code: string;
|
|
19
|
+
};
|
|
16
20
|
export declare type CreateAuthBody = {
|
|
17
|
-
user_credentail: MobileCredential | EmailCredential | IDCredential;
|
|
21
|
+
user_credentail: MobileCredential | EmailCredential | IDCredential | CivilID;
|
|
18
22
|
auth_type?: number;
|
|
19
23
|
email_url?: string;
|
|
20
24
|
sign_in?: boolean;
|
|
@@ -68,5 +72,6 @@ declare const authService: {
|
|
|
68
72
|
verifyAuth: (data: VerifyAuthBody | VerifyOperationAuthBody, config?: AxiosRequestConfig) => Promise<import("axios").AxiosResponse<any, any>>;
|
|
69
73
|
createPassword: (data: CreatePasswordBody) => Promise<any>;
|
|
70
74
|
verifyAuthKitOTP: (data: VerifyAuthKitOTPBody) => Promise<any>;
|
|
75
|
+
getVerifyAuth: (token: string, config?: AxiosRequestConfig) => Promise<any>;
|
|
71
76
|
};
|
|
72
77
|
export { authService };
|
package/build/api/auth.js
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
import instance, { httpClient } from './axios';
|
|
2
13
|
import { ENDPOINT_PATHS } from '../constants';
|
|
3
14
|
var createAuth = function (data, config) {
|
|
@@ -13,6 +24,9 @@ var createPassword = function (data) {
|
|
|
13
24
|
data: data
|
|
14
25
|
});
|
|
15
26
|
};
|
|
27
|
+
var getVerifyAuth = function (token, config) {
|
|
28
|
+
return httpClient(__assign({ method: 'get', url: "".concat(ENDPOINT_PATHS.AUTH, "/").concat(token) }, config));
|
|
29
|
+
};
|
|
16
30
|
var verifyAuthKitOTP = function (data) {
|
|
17
31
|
return httpClient({
|
|
18
32
|
method: 'post',
|
|
@@ -24,6 +38,7 @@ var authService = {
|
|
|
24
38
|
createAuth: createAuth,
|
|
25
39
|
verifyAuth: verifyAuth,
|
|
26
40
|
createPassword: createPassword,
|
|
27
|
-
verifyAuthKitOTP: verifyAuthKitOTP
|
|
41
|
+
verifyAuthKitOTP: verifyAuthKitOTP,
|
|
42
|
+
getVerifyAuth: getVerifyAuth
|
|
28
43
|
};
|
|
29
44
|
export { authService };
|
package/build/api/data.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
declare type GetChannelsOfServicesBody = {
|
|
2
|
+
page: number;
|
|
3
|
+
};
|
|
1
4
|
declare const dataService: {
|
|
2
|
-
getChannelsOfServices: () => Promise<
|
|
5
|
+
getChannelsOfServices: (data: GetChannelsOfServicesBody) => Promise<any>;
|
|
3
6
|
getCustomerBases: () => Promise<import("axios").AxiosResponse<any, any>>;
|
|
4
7
|
getExpectedSales: () => Promise<import("axios").AxiosResponse<any, any>>;
|
|
5
8
|
getExpectedCustomerSales: () => Promise<import("axios").AxiosResponse<any, any>>;
|
package/build/api/data.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import instance, { httpClient } from './axios';
|
|
2
2
|
import { ENDPOINT_PATHS } from '../constants';
|
|
3
|
-
var getChannelsOfServices = function () {
|
|
4
|
-
return
|
|
3
|
+
var getChannelsOfServices = function (data) {
|
|
4
|
+
return httpClient({
|
|
5
|
+
method: 'post',
|
|
6
|
+
url: "".concat(ENDPOINT_PATHS.CHANNEL),
|
|
7
|
+
data: data
|
|
8
|
+
});
|
|
5
9
|
};
|
|
6
10
|
var getCustomerBases = function () {
|
|
7
11
|
return instance.get("".concat(ENDPOINT_PATHS.CUSTOMER_BASES));
|
package/build/api/index.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ declare const API: {
|
|
|
22
22
|
verifyAuth: (data: VerifyAuthBody | VerifyOperationAuthBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
|
|
23
23
|
createPassword: (data: CreatePasswordBody) => Promise<any>;
|
|
24
24
|
verifyAuthKitOTP: (data: import("./auth").VerifyAuthKitOTPBody) => Promise<any>;
|
|
25
|
+
getVerifyAuth: (token: string, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<any>;
|
|
25
26
|
};
|
|
26
27
|
leadService: {
|
|
27
28
|
createLead: (data: CreateLeadBody, config?: import("axios").AxiosRequestConfig<any> | undefined) => Promise<import("axios").AxiosResponse<any, any>>;
|
|
@@ -52,7 +53,9 @@ declare const API: {
|
|
|
52
53
|
createAccount: (data: CreateAccountBody) => Promise<any>;
|
|
53
54
|
};
|
|
54
55
|
dataService: {
|
|
55
|
-
getChannelsOfServices: (
|
|
56
|
+
getChannelsOfServices: (data: {
|
|
57
|
+
page: number;
|
|
58
|
+
}) => Promise<any>;
|
|
56
59
|
getCustomerBases: () => Promise<import("axios").AxiosResponse<any, any>>;
|
|
57
60
|
getExpectedSales: () => Promise<import("axios").AxiosResponse<any, any>>;
|
|
58
61
|
getExpectedCustomerSales: () => Promise<import("axios").AxiosResponse<any, any>>;
|
|
@@ -248,5 +248,11 @@
|
|
|
248
248
|
"apple_store_placeholder": "Enter your app name (iOS)",
|
|
249
249
|
"play_store_placeholder": "Enter your app name (Google Play Store)",
|
|
250
250
|
"physical_store_placeholder": "Enter your store address or Google Map URL",
|
|
251
|
-
"call_center_placeholder": "Enter your Call Center number"
|
|
251
|
+
"call_center_placeholder": "Enter your Call Center number",
|
|
252
|
+
"back": "Back",
|
|
253
|
+
"civil_id_placeholder": "28xxxxxxxx53",
|
|
254
|
+
"enter_civil_id": "Please enter your civil ID",
|
|
255
|
+
"invalid_civil_id": "Please enter valid civil ID",
|
|
256
|
+
"authenticate_kuwait_mobile_title": "Authenticate with Kuwait Mobile ID app",
|
|
257
|
+
"authenticate_kuwait_mobile_description": "Please go to your Kuwait Mobile ID app and accept the authentication request from Tap."
|
|
252
258
|
}
|
|
@@ -268,5 +268,11 @@
|
|
|
268
268
|
"apple_store_placeholder": "Enter your app name (iOS)",
|
|
269
269
|
"play_store_placeholder": "Enter your app name (Google Play Store)",
|
|
270
270
|
"physical_store_placeholder": "Enter your store address or Google Map URL",
|
|
271
|
-
"call_center_placeholder": "Enter your Call Center number"
|
|
271
|
+
"call_center_placeholder": "Enter your Call Center number",
|
|
272
|
+
"back": "Back",
|
|
273
|
+
"civil_id_placeholder": "28xxxxxxxx53",
|
|
274
|
+
"enter_civil_id": "Please enter your civil ID",
|
|
275
|
+
"invalid_civil_id": "Please enter valid civil ID",
|
|
276
|
+
"authenticate_kuwait_mobile_title": "Authenticate with Kuwait Mobile ID app",
|
|
277
|
+
"authenticate_kuwait_mobile_description": "Please go to your Kuwait Mobile ID app and accept the authentication request from Tap."
|
|
272
278
|
}
|
|
@@ -10,16 +10,14 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import {
|
|
14
|
-
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
13
|
+
import { useScreen } from '../../hooks';
|
|
15
14
|
import Dialog from './Dialog';
|
|
16
15
|
import BottomSheet from './BottomSheet';
|
|
17
16
|
import Loader from './Loader';
|
|
18
17
|
import Error from './Error';
|
|
19
18
|
export default function AnimationFlow(_a) {
|
|
20
19
|
var open = _a.open, children = _a.children, breakpoint = _a.breakpoint, type = _a.type, footer = _a.footer, loading = _a.loading, error = _a.error, isTapOrigin = _a.isTapOrigin, screenId = _a.screenId, animationType = _a.animationType, onClose = _a.onClose, onConfirm = _a.onConfirm;
|
|
21
|
-
var
|
|
22
|
-
var matches = useMediaQuery(theme.breakpoints.down(breakpoint || 'sm'));
|
|
20
|
+
var small = useScreen(breakpoint).small;
|
|
23
21
|
if (loading) {
|
|
24
22
|
return _jsx(Loader, {});
|
|
25
23
|
}
|
|
@@ -32,5 +30,5 @@ export default function AnimationFlow(_a) {
|
|
|
32
30
|
if (type === 'BOTTOMSHEET') {
|
|
33
31
|
return _jsx(BottomSheet, __assign({ open: open }, { children: children }));
|
|
34
32
|
}
|
|
35
|
-
return
|
|
33
|
+
return small ? (_jsx(BottomSheet, __assign({ open: open, screenId: screenId }, { children: children }))) : (_jsx(Dialog, __assign({ onClose: onClose, onConfirm: onConfirm, open: open, footer: footer, isTapOrigin: isTapOrigin, animationType: animationType }, { children: children })));
|
|
36
34
|
}
|
|
@@ -41,7 +41,8 @@ var BottomSheetStyled = styled(BottomSheet)(function (_a) {
|
|
|
41
41
|
width: '100vw'
|
|
42
42
|
},
|
|
43
43
|
'[data-rsbs-overlay]': {
|
|
44
|
-
backgroundColor: theme.palette.background.paper
|
|
44
|
+
backgroundColor: theme.palette.background.paper,
|
|
45
|
+
zIndex: 9999
|
|
45
46
|
},
|
|
46
47
|
'[data-rsbs-scroll]': {
|
|
47
48
|
'&::-webkit-scrollbar': {
|
|
@@ -10,5 +10,5 @@ export interface DialogProps extends MUIDialogProps {
|
|
|
10
10
|
onClose?: () => void;
|
|
11
11
|
onConfirm?: () => void;
|
|
12
12
|
}
|
|
13
|
-
declare const _default: React.MemoExoticComponent<({ open, children, footer, transitionDuration, isTapOrigin, animationType, onClose, ...rest }: DialogProps) => JSX.Element>;
|
|
13
|
+
declare const _default: React.MemoExoticComponent<({ open, children, footer, transitionDuration, isTapOrigin, animationType, onClose, onConfirm, ...rest }: DialogProps) => JSX.Element>;
|
|
14
14
|
export default _default;
|
|
@@ -93,7 +93,7 @@ var LogoIconStyled = styled(Icon)(function (_a) {
|
|
|
93
93
|
});
|
|
94
94
|
});
|
|
95
95
|
var Dialog = function (_a) {
|
|
96
|
-
var open = _a.open, children = _a.children, footer = _a.footer, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, _b = _a.animationType, animationType = _b === void 0 ? 'slide' : _b, onClose = _a.onClose, rest = __rest(_a, ["open", "children", "footer", "transitionDuration", "isTapOrigin", "animationType", "onClose"]);
|
|
96
|
+
var open = _a.open, children = _a.children, footer = _a.footer, transitionDuration = _a.transitionDuration, isTapOrigin = _a.isTapOrigin, _b = _a.animationType, animationType = _b === void 0 ? 'slide' : _b, onClose = _a.onClose, onConfirm = _a.onConfirm, rest = __rest(_a, ["open", "children", "footer", "transitionDuration", "isTapOrigin", "animationType", "onClose", "onConfirm"]);
|
|
97
97
|
var isAr = useLanguage().isAr;
|
|
98
98
|
var animation = {};
|
|
99
99
|
if (animationType === 'slide') {
|
|
@@ -105,6 +105,6 @@ var Dialog = function (_a) {
|
|
|
105
105
|
'& .MuiDialog-paper': {
|
|
106
106
|
overflowY: 'visible'
|
|
107
107
|
}
|
|
108
|
-
}, hideBackdrop: true, PaperComponent: PaperStyled, open: open, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, animation, { children: [_jsx(DialogContainer, __assign({ isTapOrigin: isTapOrigin, onClose: onClose }, { children: _jsxs(DialogContentStyled, { children: [_jsxs(Collapse, __assign({ in: !isTapOrigin }, { children: [_jsx(LogoBadge, { src: ICONS_NAMES.LOGO_ICON }), _jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) })] })), children] }) })), footer] })));
|
|
108
|
+
}, hideBackdrop: true, PaperComponent: PaperStyled, open: open, transitionDuration: transitionDuration || 500, keepMounted: true, "aria-describedby": 'dialog-slide-description' }, rest, animation, { children: [_jsx(DialogContainer, __assign({ isTapOrigin: isTapOrigin, onClose: onClose, onConfirm: onConfirm }, { children: _jsxs(DialogContentStyled, { children: [_jsxs(Collapse, __assign({ in: !isTapOrigin }, { children: [_jsx(LogoBadge, { src: ICONS_NAMES.LOGO_ICON }), _jsx(LogoIconBoxStyled, { children: _jsx(LogoIconStyled, { src: isAr ? ICONS_NAMES.TAP_AR : ICONS_NAMES.TAP_EN, alt: 'tap logo' }) })] })), children] }) })), footer] })));
|
|
109
109
|
};
|
|
110
110
|
export default React.memo(Dialog);
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
interface DragAndDropProps {
|
|
3
3
|
title: string;
|
|
4
|
+
subTitle: string;
|
|
5
|
+
description: string;
|
|
6
|
+
uploadingTitle: string;
|
|
7
|
+
successTitle: string;
|
|
8
|
+
error?: string;
|
|
9
|
+
uploading?: boolean;
|
|
10
|
+
uploadSuccess?: boolean;
|
|
11
|
+
fileExists: boolean;
|
|
4
12
|
onSuccess?: (files: File) => void;
|
|
5
13
|
}
|
|
6
|
-
declare const DragAndDrop: ({ title, onSuccess }: DragAndDropProps) => JSX.Element;
|
|
14
|
+
declare const DragAndDrop: ({ title, subTitle, description, error, uploadingTitle, successTitle, uploading, fileExists, uploadSuccess, onSuccess }: DragAndDropProps) => JSX.Element;
|
|
7
15
|
export default DragAndDrop;
|
|
@@ -9,30 +9,135 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
13
|
+
import React from 'react';
|
|
13
14
|
import Box from '@mui/material/Box';
|
|
14
15
|
import { alpha, styled } from '@mui/material/styles';
|
|
15
16
|
import Input from '../Input';
|
|
16
17
|
import Text from '../Text';
|
|
17
18
|
import { useDropzone } from 'react-dropzone';
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
import Icon from '../../components/Icon';
|
|
20
|
+
import { ICONS_NAMES } from '../../constants';
|
|
21
|
+
import { CircularProgress } from '../../components/ProgressBar';
|
|
22
|
+
import Collapse from '../../components/Collapse';
|
|
23
|
+
import Fade from '@mui/material/Fade';
|
|
24
|
+
var BoxStyled = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'active'; } })(function (_a) {
|
|
25
|
+
var theme = _a.theme, active = _a.active;
|
|
26
|
+
return (__assign(__assign({ direction: theme.direction }, theme.typography.subtitle2), { color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightRegular, background: theme.palette.background.default, paddingInline: theme.spacing(2.5), border: "2px dashed ".concat(active ? theme.palette.primary.main : alpha(theme.palette.divider, 0.8)), width: '350px', height: '158px', cursor: 'default', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: theme.spacing(2.5) }));
|
|
21
27
|
});
|
|
22
28
|
var UploadInputStyled = styled(Input)(function () { return ({
|
|
23
29
|
display: 'none'
|
|
24
30
|
}); });
|
|
31
|
+
var CenterBoxStyled = styled(Box)(function () { return ({
|
|
32
|
+
display: 'flex',
|
|
33
|
+
justifyContent: 'center',
|
|
34
|
+
alignItems: 'center'
|
|
35
|
+
}); });
|
|
36
|
+
var IconStyled = styled(Icon)(function (_a) {
|
|
37
|
+
var theme = _a.theme;
|
|
38
|
+
return ({
|
|
39
|
+
width: theme.spacing(11.25),
|
|
40
|
+
height: theme.spacing(10),
|
|
41
|
+
cursor: 'pointer'
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
var DoneIconStyled = styled(Icon)(function (_a) {
|
|
45
|
+
var theme = _a.theme;
|
|
46
|
+
return ({
|
|
47
|
+
width: theme.spacing(6.75),
|
|
48
|
+
height: theme.spacing(6.75),
|
|
49
|
+
cursor: 'pointer'
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
var VerticalCenterBox = styled(Box)(function (_a) {
|
|
53
|
+
var theme = _a.theme;
|
|
54
|
+
return ({
|
|
55
|
+
display: 'flex',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
flexDirection: 'column',
|
|
58
|
+
alignItems: 'center'
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
var DescTextStyled = styled(Text)(function (_a) {
|
|
62
|
+
var theme = _a.theme;
|
|
63
|
+
return ({
|
|
64
|
+
fontSize: theme.spacing(1.5),
|
|
65
|
+
width: theme.spacing(27.5),
|
|
66
|
+
wordBreak: 'break-all',
|
|
67
|
+
marginBlockStart: theme.spacing(1),
|
|
68
|
+
marginBlockEnd: theme.spacing(0)
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
var SubTitleStyled = styled(Text)(function (_a) {
|
|
72
|
+
var theme = _a.theme;
|
|
73
|
+
return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.primary.main, marginInlineStart: theme.spacing(0.5) }));
|
|
74
|
+
});
|
|
75
|
+
var WarningIconStyled = styled(Icon)(function (_a) {
|
|
76
|
+
var theme = _a.theme;
|
|
77
|
+
return ({
|
|
78
|
+
width: theme.spacing(1.625),
|
|
79
|
+
height: theme.spacing(1.625),
|
|
80
|
+
marginInline: theme.spacing(0.5)
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
var DropFileIcon = styled(Icon)(function (_a) {
|
|
84
|
+
var theme = _a.theme;
|
|
85
|
+
return ({
|
|
86
|
+
width: theme.spacing(9.375),
|
|
87
|
+
height: theme.spacing(9.375),
|
|
88
|
+
zIndex: 2,
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
right: 0,
|
|
91
|
+
marginInline: theme.spacing(-1.25)
|
|
92
|
+
});
|
|
93
|
+
});
|
|
94
|
+
var WarningContainer = styled(Box)(function (_a) {
|
|
95
|
+
var theme = _a.theme;
|
|
96
|
+
return (__assign({ background: theme.palette.warning.dark, paddingBlock: theme.spacing(1.5), paddingInlineStart: theme.spacing(2.5), border: '0.5px solid', display: 'flex', justifyContent: 'space-around', borderColor: theme.palette.warning.main, color: theme.palette.warning.light, padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(12.5) }, theme.typography.caption));
|
|
97
|
+
});
|
|
25
98
|
var DragAndDrop = function (_a) {
|
|
26
|
-
var title = _a.title, onSuccess = _a.onSuccess;
|
|
27
|
-
var _b =
|
|
99
|
+
var title = _a.title, subTitle = _a.subTitle, description = _a.description, error = _a.error, uploadingTitle = _a.uploadingTitle, successTitle = _a.successTitle, uploading = _a.uploading, fileExists = _a.fileExists, uploadSuccess = _a.uploadSuccess, onSuccess = _a.onSuccess;
|
|
100
|
+
var _b = React.useState(1), progress = _b[0], setProgress = _b[1];
|
|
101
|
+
var _c = React.useState(false), dragActive = _c[0], setDragActive = _c[1];
|
|
102
|
+
var _d = React.useState(false), showDone = _d[0], setShowDone = _d[1];
|
|
103
|
+
var _e = useDropzone({
|
|
28
104
|
maxFiles: 1,
|
|
29
105
|
noKeyboard: true,
|
|
30
106
|
noClick: false,
|
|
31
107
|
multiple: false,
|
|
108
|
+
onDragOver: function () {
|
|
109
|
+
if (!dragActive)
|
|
110
|
+
setDragActive(true);
|
|
111
|
+
},
|
|
112
|
+
onDragLeave: function () {
|
|
113
|
+
setDragActive(false);
|
|
114
|
+
},
|
|
32
115
|
onDrop: function (files) {
|
|
33
116
|
onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(files === null || files === void 0 ? void 0 : files[0]);
|
|
34
117
|
}
|
|
35
|
-
}), getRootProps =
|
|
36
|
-
|
|
118
|
+
}), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps;
|
|
119
|
+
React.useEffect(function () {
|
|
120
|
+
setDragActive(false);
|
|
121
|
+
if (uploadSuccess) {
|
|
122
|
+
setShowDone(true);
|
|
123
|
+
setTimeout(function () {
|
|
124
|
+
setProgress(100);
|
|
125
|
+
setShowDone(false);
|
|
126
|
+
}, 500);
|
|
127
|
+
}
|
|
128
|
+
else if (uploading) {
|
|
129
|
+
var timer_1 = setInterval(function () {
|
|
130
|
+
setProgress(function (prevProgress) { return (prevProgress >= 75 ? 1 : prevProgress + 25); });
|
|
131
|
+
}, 800);
|
|
132
|
+
return function () {
|
|
133
|
+
clearInterval(timer_1);
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
}, [uploading]);
|
|
137
|
+
React.useEffect(function () {
|
|
138
|
+
if (!fileExists)
|
|
139
|
+
setProgress(25);
|
|
140
|
+
}, [fileExists]);
|
|
141
|
+
return (_jsx(Box, __assign({ id: 'upload-container' }, { children: _jsxs(BoxStyled, __assign({ active: dragActive }, getRootProps({ className: 'dropzone' }), { children: [_jsx(Fade, __assign({ in: (!uploading && !uploadSuccess) || !fileExists, unmountOnExit: true, timeout: 100 }, { children: _jsxs(Box, { children: [_jsx(CenterBoxStyled, { children: _jsx(IconStyled, { src: dragActive ? ICONS_NAMES.ACTIVE_UPLOAD_ICON : ICONS_NAMES.UPLOAD_ICON }) }), _jsxs(VerticalCenterBox, __assign({ sx: { marginBlockEnd: '20px' } }, { children: [_jsxs(CenterBoxStyled, { children: [_jsx(Text, __assign({ sx: { fontSize: '16px' } }, { children: title })), _jsx(SubTitleStyled, { children: subTitle })] }), _jsx(DescTextStyled, { children: description }), _jsx(Collapse, __assign({ in: !!error, timeout: 400 }, { children: _jsxs(WarningContainer, { children: [_jsx(WarningIconStyled, { src: ICONS_NAMES.WARNING_ICON }), _jsx(Text, { children: error })] }) }))] })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] }) })), _jsx(CenterBoxStyled, { children: showDone ? (_jsxs(VerticalCenterBox, { children: [_jsx(DoneIconStyled, { src: ICONS_NAMES.DONE_ICON }), _jsx(Text, { children: successTitle })] })) : uploading ? (_jsxs(VerticalCenterBox, { children: [_jsx(CircularProgress, { value: progress, size: 54 }), _jsx(Text, { children: uploadingTitle })] })) : (_jsx(_Fragment, {})) }), _jsx(Fade, __assign({ unmountOnExit: true, timeout: 100, in: dragActive }, { children: _jsx(DropFileIcon, { src: ICONS_NAMES.DROP_FILE_ICON }) }))] })) })));
|
|
37
142
|
};
|
|
38
143
|
export default DragAndDrop;
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
2
|
+
export declare const LottieAnimationFiles: {
|
|
3
|
+
readonly pulsating_circle_waves: {
|
|
4
|
+
v: string;
|
|
5
|
+
fr: number;
|
|
6
|
+
ip: number;
|
|
7
|
+
op: number;
|
|
8
|
+
w: number;
|
|
9
|
+
h: number;
|
|
10
|
+
nm: string;
|
|
11
|
+
ddd: number;
|
|
12
|
+
assets: never[];
|
|
13
|
+
layers: {
|
|
14
|
+
ddd: number;
|
|
15
|
+
ind: number;
|
|
16
|
+
ty: number;
|
|
17
|
+
nm: string;
|
|
18
|
+
sr: number;
|
|
19
|
+
ks: {
|
|
20
|
+
o: {
|
|
21
|
+
a: number;
|
|
22
|
+
k: ({
|
|
23
|
+
i: {
|
|
24
|
+
x: number[];
|
|
25
|
+
y: number[];
|
|
26
|
+
};
|
|
27
|
+
o: {
|
|
28
|
+
x: number[];
|
|
29
|
+
y: number[];
|
|
30
|
+
};
|
|
31
|
+
t: number;
|
|
32
|
+
s: number[];
|
|
33
|
+
} | {
|
|
34
|
+
t: number;
|
|
35
|
+
s: number[];
|
|
36
|
+
i?: undefined;
|
|
37
|
+
o?: undefined;
|
|
38
|
+
})[];
|
|
39
|
+
ix: number;
|
|
40
|
+
};
|
|
41
|
+
r: {
|
|
42
|
+
a: number;
|
|
43
|
+
k: number;
|
|
44
|
+
ix: number;
|
|
45
|
+
};
|
|
46
|
+
p: {
|
|
47
|
+
a: number;
|
|
48
|
+
k: number[];
|
|
49
|
+
ix: number;
|
|
50
|
+
l: number;
|
|
51
|
+
};
|
|
52
|
+
a: {
|
|
53
|
+
a: number;
|
|
54
|
+
k: number[];
|
|
55
|
+
ix: number;
|
|
56
|
+
l: number;
|
|
57
|
+
};
|
|
58
|
+
s: {
|
|
59
|
+
a: number;
|
|
60
|
+
k: ({
|
|
61
|
+
i: {
|
|
62
|
+
x: number[];
|
|
63
|
+
y: number[];
|
|
64
|
+
};
|
|
65
|
+
o: {
|
|
66
|
+
x: number[];
|
|
67
|
+
y: number[];
|
|
68
|
+
};
|
|
69
|
+
t: number;
|
|
70
|
+
s: number[];
|
|
71
|
+
} | {
|
|
72
|
+
t: number;
|
|
73
|
+
s: number[];
|
|
74
|
+
i?: undefined;
|
|
75
|
+
o?: undefined;
|
|
76
|
+
})[];
|
|
77
|
+
ix: number;
|
|
78
|
+
l: number;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
ao: number;
|
|
82
|
+
shapes: {
|
|
83
|
+
ty: string;
|
|
84
|
+
it: ({
|
|
85
|
+
ind: number;
|
|
86
|
+
ty: string;
|
|
87
|
+
ix: number;
|
|
88
|
+
ks: {
|
|
89
|
+
a: number;
|
|
90
|
+
k: {
|
|
91
|
+
i: number[][];
|
|
92
|
+
o: number[][];
|
|
93
|
+
v: number[][];
|
|
94
|
+
c: boolean;
|
|
95
|
+
};
|
|
96
|
+
ix: number;
|
|
97
|
+
};
|
|
98
|
+
nm: string;
|
|
99
|
+
mn: string;
|
|
100
|
+
hd: boolean;
|
|
101
|
+
c?: undefined;
|
|
102
|
+
o?: undefined;
|
|
103
|
+
w?: undefined;
|
|
104
|
+
lc?: undefined;
|
|
105
|
+
lj?: undefined;
|
|
106
|
+
ml?: undefined;
|
|
107
|
+
bm?: undefined;
|
|
108
|
+
p?: undefined;
|
|
109
|
+
a?: undefined;
|
|
110
|
+
s?: undefined;
|
|
111
|
+
r?: undefined;
|
|
112
|
+
sk?: undefined;
|
|
113
|
+
sa?: undefined;
|
|
114
|
+
} | {
|
|
115
|
+
ty: string;
|
|
116
|
+
c: {
|
|
117
|
+
a: number;
|
|
118
|
+
k: number[];
|
|
119
|
+
ix: number;
|
|
120
|
+
};
|
|
121
|
+
o: {
|
|
122
|
+
a: number;
|
|
123
|
+
k: number;
|
|
124
|
+
ix: number;
|
|
125
|
+
};
|
|
126
|
+
w: {
|
|
127
|
+
a: number;
|
|
128
|
+
k: number;
|
|
129
|
+
ix: number;
|
|
130
|
+
};
|
|
131
|
+
lc: number;
|
|
132
|
+
lj: number;
|
|
133
|
+
ml: number;
|
|
134
|
+
bm: number;
|
|
135
|
+
nm: string;
|
|
136
|
+
mn: string;
|
|
137
|
+
hd: boolean;
|
|
138
|
+
ind?: undefined;
|
|
139
|
+
ix?: undefined;
|
|
140
|
+
ks?: undefined;
|
|
141
|
+
p?: undefined;
|
|
142
|
+
a?: undefined;
|
|
143
|
+
s?: undefined;
|
|
144
|
+
r?: undefined;
|
|
145
|
+
sk?: undefined;
|
|
146
|
+
sa?: undefined;
|
|
147
|
+
} | {
|
|
148
|
+
ty: string;
|
|
149
|
+
p: {
|
|
150
|
+
a: number;
|
|
151
|
+
k: number[];
|
|
152
|
+
ix: number;
|
|
153
|
+
};
|
|
154
|
+
a: {
|
|
155
|
+
a: number;
|
|
156
|
+
k: number[];
|
|
157
|
+
ix: number;
|
|
158
|
+
};
|
|
159
|
+
s: {
|
|
160
|
+
a: number;
|
|
161
|
+
k: number[];
|
|
162
|
+
ix: number;
|
|
163
|
+
};
|
|
164
|
+
r: {
|
|
165
|
+
a: number;
|
|
166
|
+
k: number;
|
|
167
|
+
ix: number;
|
|
168
|
+
};
|
|
169
|
+
o: {
|
|
170
|
+
a: number;
|
|
171
|
+
k: number;
|
|
172
|
+
ix: number;
|
|
173
|
+
};
|
|
174
|
+
sk: {
|
|
175
|
+
a: number;
|
|
176
|
+
k: number;
|
|
177
|
+
ix: number;
|
|
178
|
+
};
|
|
179
|
+
sa: {
|
|
180
|
+
a: number;
|
|
181
|
+
k: number;
|
|
182
|
+
ix: number;
|
|
183
|
+
};
|
|
184
|
+
nm: string;
|
|
185
|
+
ind?: undefined;
|
|
186
|
+
ix?: undefined;
|
|
187
|
+
ks?: undefined;
|
|
188
|
+
mn?: undefined;
|
|
189
|
+
hd?: undefined;
|
|
190
|
+
c?: undefined;
|
|
191
|
+
w?: undefined;
|
|
192
|
+
lc?: undefined;
|
|
193
|
+
lj?: undefined;
|
|
194
|
+
ml?: undefined;
|
|
195
|
+
bm?: undefined;
|
|
196
|
+
})[];
|
|
197
|
+
nm: string;
|
|
198
|
+
np: number;
|
|
199
|
+
cix: number;
|
|
200
|
+
bm: number;
|
|
201
|
+
ix: number;
|
|
202
|
+
mn: string;
|
|
203
|
+
hd: boolean;
|
|
204
|
+
}[];
|
|
205
|
+
ip: number;
|
|
206
|
+
op: number;
|
|
207
|
+
st: number;
|
|
208
|
+
bm: number;
|
|
209
|
+
}[];
|
|
210
|
+
markers: never[];
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
export declare type LottieAnimationFiles = typeof LottieAnimationFiles[keyof typeof LottieAnimationFiles];
|
|
214
|
+
interface LottieFileProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
215
|
+
file: LottieAnimationFiles;
|
|
216
|
+
width?: number | string;
|
|
217
|
+
height?: number | string;
|
|
218
|
+
}
|
|
219
|
+
declare const _default: React.NamedExoticComponent<LottieFileProps>;
|
|
220
|
+
export default _default;
|