@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.
Files changed (80) hide show
  1. package/build/@types/app.d.ts +6 -4
  2. package/build/@types/app.js +2 -2
  3. package/build/@types/form.d.ts +3 -0
  4. package/build/api/auth.d.ts +6 -1
  5. package/build/api/auth.js +16 -1
  6. package/build/api/data.d.ts +4 -1
  7. package/build/api/data.js +6 -2
  8. package/build/api/index.d.ts +4 -1
  9. package/build/assets/locales/ar.json +7 -1
  10. package/build/assets/locales/en.json +7 -1
  11. package/build/components/AnimationFlow/AnimationFlow.js +3 -5
  12. package/build/components/AnimationFlow/BottomSheet.js +2 -1
  13. package/build/components/AnimationFlow/Dialog.d.ts +1 -1
  14. package/build/components/AnimationFlow/Dialog.js +2 -2
  15. package/build/components/FileInput/DragAndDrop.d.ts +9 -1
  16. package/build/components/FileInput/DragAndDrop.js +113 -8
  17. package/build/components/Lottie/Lottie.d.ts +220 -0
  18. package/build/components/Lottie/Lottie.js +56 -0
  19. package/build/components/Lottie/files/pulsating_circle_waves.json +236 -0
  20. package/build/components/Lottie/index.d.ts +3 -0
  21. package/build/components/Lottie/index.js +3 -0
  22. package/build/components/ProgressBar/CircularProgressBar.d.ts +14 -0
  23. package/build/components/ProgressBar/CircularProgressBar.js +48 -0
  24. package/build/components/ProgressBar/index.d.ts +2 -0
  25. package/build/components/ProgressBar/index.js +2 -0
  26. package/build/constants/api.js +1 -1
  27. package/build/constants/app.d.ts +1 -0
  28. package/build/constants/app.js +16 -3
  29. package/build/constants/assets.d.ts +7 -0
  30. package/build/constants/assets.js +7 -0
  31. package/build/constants/validation.d.ts +1 -0
  32. package/build/constants/validation.js +1 -0
  33. package/build/features/app/bank/bankStore.d.ts +4 -0
  34. package/build/features/app/bank/bankStore.js +42 -22
  35. package/build/features/app/business/businessStore.js +16 -12
  36. package/build/features/app/connect/connectStore.d.ts +9 -1
  37. package/build/features/app/connect/connectStore.js +115 -13
  38. package/build/features/app/entity/entityStore.js +13 -9
  39. package/build/features/bank/screens/BankDetails/BankDetails.js +2 -2
  40. package/build/features/bank/screens/BankDetails/BankStatement.js +33 -8
  41. package/build/features/business/screens/Activities/ActivitiesList.d.ts +1 -1
  42. package/build/features/business/screens/Activities/SalesChannels.js +1 -1
  43. package/build/features/business/screens/Customers/CustomerLocations.d.ts +2 -2
  44. package/build/features/connect/Connect.js +11 -5
  45. package/build/features/connect/screens/CivilID/CivilID.d.ts +5 -0
  46. package/build/features/connect/screens/CivilID/CivilID.js +85 -0
  47. package/build/features/connect/screens/CivilID/IDNumber.d.ts +7 -0
  48. package/build/features/connect/screens/CivilID/IDNumber.js +59 -0
  49. package/build/features/connect/screens/CivilID/index.d.ts +3 -0
  50. package/build/features/connect/screens/CivilID/index.js +2 -0
  51. package/build/features/connect/screens/CivilID/validation.d.ts +8 -0
  52. package/build/features/connect/screens/CivilID/validation.js +4 -0
  53. package/build/features/connect/screens/Individual/Individual.js +5 -2
  54. package/build/features/connect/screens/Merchant/Merchant.js +7 -4
  55. package/build/features/connect/screens/Merchant/SalesChannels.js +1 -1
  56. package/build/features/connect/screens/Merchant/SocialMedia.js +7 -7
  57. package/build/features/connect/screens/Mobile/Mobile.js +7 -4
  58. package/build/features/connect/screens/VerifyPACI/VerifyPACI.d.ts +5 -0
  59. package/build/features/connect/screens/VerifyPACI/VerifyPACI.js +118 -0
  60. package/build/features/connect/screens/VerifyPACI/index.d.ts +3 -0
  61. package/build/features/connect/screens/VerifyPACI/index.js +2 -0
  62. package/build/features/entity/screens/EntityInfoConfirm/ActivitiesList.d.ts +1 -1
  63. package/build/features/entity/screens/EntityInfoConfirm/SalesChannels.js +1 -1
  64. package/build/features/featuresScreens.js +10 -0
  65. package/build/features/shared/Background/Background.d.ts +2 -5
  66. package/build/features/shared/Background/Background.js +6 -4
  67. package/build/features/shared/Input/Input.d.ts +1 -1
  68. package/build/features/shared/Input/Input.js +2 -2
  69. package/build/features/shared/UploadFile/UploadFile.d.ts +8 -3
  70. package/build/features/shared/UploadFile/UploadFile.js +23 -8
  71. package/build/hooks/index.d.ts +1 -0
  72. package/build/hooks/index.js +1 -0
  73. package/build/hooks/useScreen.d.ts +3 -0
  74. package/build/hooks/useScreen.js +14 -0
  75. package/build/utils/device.d.ts +1 -0
  76. package/build/utils/device.js +13 -0
  77. package/build/utils/locale.js +1 -1
  78. package/build/utils/string.d.ts +2 -0
  79. package/build/utils/string.js +9 -0
  80. package/package.json +2 -1
@@ -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
- name_ar: string;
93
- name_en: string;
92
+ name: {
93
+ ar: string;
94
+ en: string;
95
+ };
94
96
  }
95
97
  export interface SourceOfIncome {
96
98
  id: string;
@@ -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 = {}));
@@ -16,6 +16,9 @@ export declare type NIDFormValues = {
16
16
  nid: string;
17
17
  dob: string;
18
18
  };
19
+ export declare type CivilFormValues = {
20
+ civilId: string;
21
+ };
19
22
  export declare type IndividualFormValues = {
20
23
  name: string;
21
24
  email: string;
@@ -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 };
@@ -1,5 +1,8 @@
1
+ declare type GetChannelsOfServicesBody = {
2
+ page: number;
3
+ };
1
4
  declare const dataService: {
2
- getChannelsOfServices: () => Promise<import("axios").AxiosResponse<any, any>>;
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 instance.get("".concat(ENDPOINT_PATHS.CHANNEL));
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));
@@ -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: () => Promise<import("axios").AxiosResponse<any, any>>;
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 { useTheme } from '@mui/material/styles';
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 theme = useTheme();
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 matches ? (_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 })));
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
- var BoxStyled = styled(Box)(function (_a) {
19
- var theme = _a.theme;
20
- 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, padding: theme.spacing(1.5, 2.5, 1.5), border: "1px dashed ".concat(alpha(theme.palette.divider, 0.8)), width: '50%', cursor: 'pointer' }));
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 = useDropzone({
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 = _b.getRootProps, getInputProps = _b.getInputProps;
36
- return (_jsxs(BoxStyled, __assign({}, getRootProps({ className: 'dropzone' }), { children: [_jsx(Text, __assign({ sx: { fontSize: '12px' } }, { children: title })), _jsx(UploadInputStyled, { inputProps: __assign({}, getInputProps()) })] })));
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;