@tap-payments/os-micro-frontend-shared 0.1.261-test.3 → 0.1.261-test.4

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 (67) hide show
  1. package/build/components/Error/Error.d.ts +1 -1
  2. package/build/components/Inputs/CountriesDropDown/CountriesDropdown.d.ts +4 -5
  3. package/build/components/Inputs/CountriesDropDown/CountriesDropdown.js +3 -3
  4. package/build/components/TableHeader/FiltersRow.d.ts +1 -1
  5. package/build/components/TableHeader/FiltersRow.js +19 -4
  6. package/build/components/TableHeader/FiltersRowWrapper.d.ts +5 -0
  7. package/build/components/TableHeader/FiltersRowWrapper.js +18 -0
  8. package/build/components/TableHeader/TableHeader.d.ts +5 -4
  9. package/build/components/TableHeader/TableHeader.js +21 -6
  10. package/build/components/TableHeader/TableHeaderWrapper.d.ts +5 -0
  11. package/build/components/TableHeader/TableHeaderWrapper.js +18 -0
  12. package/build/components/TableHeader/TableView/ColumnItem.d.ts +14 -0
  13. package/build/components/TableHeader/TableView/ColumnItem.js +29 -0
  14. package/build/components/TableHeader/TableView/CustomViews.d.ts +5 -0
  15. package/build/components/TableHeader/TableView/CustomViews.js +21 -0
  16. package/build/components/TableHeader/TableView/DefaultViews.d.ts +13 -0
  17. package/build/components/TableHeader/TableView/DefaultViews.js +22 -0
  18. package/build/components/TableHeader/TableView/TableView.d.ts +12 -0
  19. package/build/components/TableHeader/TableView/TableView.js +55 -0
  20. package/build/components/TableHeader/TableView/hooks/index.d.ts +3 -0
  21. package/build/components/TableHeader/TableView/hooks/index.js +3 -0
  22. package/build/components/TableHeader/TableView/hooks/useColumnItem.d.ts +21 -0
  23. package/build/components/TableHeader/TableView/hooks/useColumnItem.js +29 -0
  24. package/build/components/TableHeader/TableView/hooks/useSubMenu.d.ts +10 -0
  25. package/build/components/TableHeader/TableView/hooks/useSubMenu.js +31 -0
  26. package/build/components/TableHeader/TableView/hooks/useViewColumns.d.ts +13 -0
  27. package/build/components/TableHeader/TableView/hooks/useViewColumns.js +45 -0
  28. package/build/components/TableHeader/TableView/index.d.ts +3 -0
  29. package/build/components/TableHeader/TableView/index.js +3 -0
  30. package/build/components/TableHeader/TableView/style.d.ts +24 -0
  31. package/build/components/TableHeader/TableView/style.js +102 -0
  32. package/build/components/TableHeader/TableView/type.d.ts +10 -0
  33. package/build/components/TableHeader/TableView/type.js +1 -0
  34. package/build/components/TableHeader/data.d.ts +5 -0
  35. package/build/components/TableHeader/data.js +7 -0
  36. package/build/components/TableHeader/index.d.ts +6 -2
  37. package/build/components/TableHeader/index.js +6 -2
  38. package/build/components/TableHeader/style.d.ts +1 -1
  39. package/build/components/TableHeader/style.js +1 -1
  40. package/build/components/TableHeader/type.d.ts +19 -10
  41. package/build/components/TableHeader/type.js +0 -7
  42. package/build/components/index.d.ts +1 -1
  43. package/build/components/index.js +1 -1
  44. package/build/types/tsUtils.d.ts +1 -0
  45. package/package.json +18 -19
  46. package/build/components/Customer/CustomerDropdown/CustomerDropdown.d.ts +0 -8
  47. package/build/components/Customer/CustomerDropdown/CustomerDropdown.js +0 -39
  48. package/build/components/Customer/CustomerDropdown/index.d.ts +0 -1
  49. package/build/components/Customer/CustomerDropdown/index.js +0 -1
  50. package/build/components/Customer/CustomerDropdown/style.d.ts +0 -10
  51. package/build/components/Customer/CustomerDropdown/style.js +0 -30
  52. package/build/components/Customer/CustomerForms/EmailForm.d.ts +0 -12
  53. package/build/components/Customer/CustomerForms/EmailForm.js +0 -76
  54. package/build/components/Customer/CustomerForms/FullInfo.d.ts +0 -13
  55. package/build/components/Customer/CustomerForms/FullInfo.js +0 -72
  56. package/build/components/Customer/CustomerForms/FullInfoForm.d.ts +0 -12
  57. package/build/components/Customer/CustomerForms/FullInfoForm.js +0 -74
  58. package/build/components/Customer/CustomerForms/PhoneNumberForm.d.ts +0 -12
  59. package/build/components/Customer/CustomerForms/PhoneNumberForm.js +0 -71
  60. package/build/components/Customer/CustomerForms/index.d.ts +0 -9
  61. package/build/components/Customer/CustomerForms/index.js +0 -9
  62. package/build/components/Customer/CustomerForms/style.d.ts +0 -25
  63. package/build/components/Customer/CustomerForms/style.js +0 -71
  64. package/build/components/Customer/CustomerForms/validation.d.ts +0 -30
  65. package/build/components/Customer/CustomerForms/validation.js +0 -42
  66. package/build/components/Customer/index.d.ts +0 -1
  67. package/build/components/Customer/index.js +0 -1
@@ -0,0 +1,102 @@
1
+ import { Box, styled } from '@mui/material';
2
+ export const ButtonStyled = styled(Box)(({ theme }) => ({
3
+ display: 'flex',
4
+ alignItems: 'center',
5
+ justifyContent: 'space-between',
6
+ borderRadius: '4px',
7
+ background: theme.palette.common.white,
8
+ padding: '8px',
9
+ border: '1px solid',
10
+ borderColor: theme.palette.divider,
11
+ gap: 8,
12
+ height: 32,
13
+ cursor: 'pointer',
14
+ '&:hover': {
15
+ border: '1px solid',
16
+ borderColor: theme.palette.info.dark,
17
+ boxShadow: theme.shadows[7],
18
+ },
19
+ }));
20
+ export const ViewWrapper = styled(Box)(({ theme }) => ({
21
+ background: theme.palette.common.white,
22
+ display: 'flex',
23
+ gap: theme.spacing(1),
24
+ alignItems: 'center',
25
+ color: theme.palette.text.primary,
26
+ fontSize: '11px',
27
+ fontWeight: theme.typography.fontWeightRegular,
28
+ textTransform: 'capitalize',
29
+ position: 'relative',
30
+ transition: '0.5s',
31
+ '&:after': {
32
+ content: '""',
33
+ position: 'absolute',
34
+ left: -8,
35
+ right: 0,
36
+ width: '100%',
37
+ height: '100%',
38
+ boxShadow: theme.shadows[11],
39
+ borderRadius: theme.spacing(0.5),
40
+ paddingInlineStart: theme.spacing(1),
41
+ paddingTop: '9px',
42
+ paddingBottom: '9px',
43
+ paddingInlineEnd: '9px',
44
+ zIndex: -1,
45
+ },
46
+ }));
47
+ export const ListStyled = styled(Box)(({ theme }) => ({
48
+ background: theme.palette.common.white,
49
+ borderRadius: theme.spacing(1),
50
+ boxShadow: theme.shadows[5],
51
+ border: '1px solid',
52
+ borderColor: theme.palette.divider,
53
+ zIndex: 5,
54
+ fontSize: '11px',
55
+ width: 192,
56
+ }));
57
+ export const DropdownStyled = styled(Box)(() => ({
58
+ minWidth: 160,
59
+ position: 'relative',
60
+ }));
61
+ export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
62
+ padding: theme.spacing(1),
63
+ paddingInlineEnd: 2,
64
+ borderBottom: '1px solid',
65
+ borderColor: theme.palette.divider,
66
+ display: 'flex',
67
+ alignItems: 'center',
68
+ height: 32,
69
+ cursor: 'pointer',
70
+ img: {
71
+ height: 12,
72
+ },
73
+ '.check-icon': {
74
+ height: 'auto',
75
+ marginInlineEnd: theme.spacing(1),
76
+ },
77
+ '&:hover': {
78
+ color: theme.palette.info.dark,
79
+ fontWeight: theme.typography.fontWeightBold,
80
+ },
81
+ '&.add-column': {
82
+ justifyContent: 'space-between',
83
+ paddingInlineEnd: theme.spacing(1),
84
+ position: 'relative',
85
+ border: 'none',
86
+ zIndex: 5,
87
+ borderBottom: '1px solid',
88
+ borderColor: theme.palette.divider,
89
+ borderTopRightRadius: theme.spacing(1),
90
+ borderTopLeftRadius: theme.spacing(1),
91
+ '&:hover': {
92
+ boxShadow: theme.shadows[6],
93
+ },
94
+ },
95
+ }));
96
+ export const Space = styled(Box)(({ theme }) => ({
97
+ width: 12,
98
+ marginInlineEnd: theme.spacing(1),
99
+ }));
100
+ export const SpaceAfter = styled(Box)(() => ({
101
+ width: 16,
102
+ }));
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { TableHeaderProps } from '../type';
3
+ export interface CustomViewsProps {
4
+ open: boolean;
5
+ onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
6
+ setTableViews: TableHeaderProps['setTableViews'];
7
+ tableViews: TableHeaderProps['tableViews'];
8
+ anchorEl: Element | null;
9
+ onClose?: () => void;
10
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ export declare const dummyViewList: {
2
+ label: string;
3
+ id: string;
4
+ columns: string[];
5
+ }[];
@@ -0,0 +1,7 @@
1
+ export const dummyViewList = [
2
+ {
3
+ label: 'Default',
4
+ id: 'default',
5
+ columns: ['default', 'default']
6
+ }
7
+ ];
@@ -1,4 +1,8 @@
1
- export { default as TableHeader } from './TableHeader';
1
+ import TableHeader from './TableHeader';
2
+ export default TableHeader;
3
+ export * from './TableHeader';
4
+ export { default as TableHeaderWrapper } from './TableHeaderWrapper';
5
+ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
6
+ export { default as FiltersRow } from './FiltersRow';
2
7
  export * from './style';
3
8
  export * from './type';
4
- export { FiltersRow } from './FiltersRow';
@@ -1,4 +1,8 @@
1
- export { default as TableHeader } from './TableHeader';
1
+ import TableHeader from './TableHeader';
2
+ export default TableHeader;
3
+ export * from './TableHeader';
4
+ export { default as TableHeaderWrapper } from './TableHeaderWrapper';
5
+ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
6
+ export { default as FiltersRow } from './FiltersRow';
2
7
  export * from './style';
3
8
  export * from './type';
4
- export { FiltersRow } from './FiltersRow';
@@ -16,6 +16,6 @@ export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<i
16
16
  export declare const StatusButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
17
17
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
18
18
  }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
19
- export declare const FiltersRowWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
19
+ export declare const FiltersRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
20
20
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
21
  }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -34,7 +34,7 @@ export const StatusButtonsContainer = styled(Box)(({ theme }) => ({
34
34
  alignItems: 'center',
35
35
  gap: theme.spacing(1),
36
36
  }));
37
- export const FiltersRowWrapper = styled(Box)(() => ({
37
+ export const FiltersRowContainer = styled(Box)(() => ({
38
38
  display: 'flex',
39
39
  justifyContent: 'flex-start',
40
40
  alignItems: 'center',
@@ -1,27 +1,29 @@
1
- import React, { PropsWithChildren, ReactNode } from 'react';
2
- import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
1
+ import React, { ReactNode } from 'react';
2
+ import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
3
3
  import { AvailableStatus } from '../StatusBar/type';
4
- declare const viewsOptions: {
4
+ import { PartialExcept } from '../../types/index.js';
5
+ type ViewsOptions = {
5
6
  default: {};
6
7
  developer: {};
7
8
  marketing: {};
8
9
  finance: {};
9
10
  custom: {};
10
11
  };
11
- export type View = keyof typeof viewsOptions;
12
- export interface TableHeaderProps {
13
- availableStatuses?: AvailableStatus[];
14
- status?: TableHeaderStatus;
12
+ export type View = keyof ViewsOptions;
13
+ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined> {
14
+ tableMode?: TableMode;
15
+ status?: IStatus;
16
+ availableStatuses?: AvailableStatus<IStatus>[];
15
17
  search?: string;
16
18
  view?: View;
17
19
  date?: Date | [Date, Date];
18
20
  showMaximizedView?: boolean;
19
21
  title?: string | null;
20
22
  calendarMode?: CalenderMode;
21
- onStatusChange?: (status: Partial<TableHeaderStatus>) => void;
23
+ onStatusChange?: (status?: IStatus) => void;
22
24
  onSearch?: (search: string) => void;
23
25
  onViewChange?: () => void;
24
- onDateChange?: (date: Date | [Date, Date], timezoneOffset?: number) => void;
26
+ onDateChange?: (date: Date | [Date, Date]) => void;
25
27
  tableReportsComponent?: React.ReactNode;
26
28
  tableFilterComponent?: React.ReactNode;
27
29
  onCalendarModeSwitch: (mode: CalenderMode) => void;
@@ -49,8 +51,15 @@ export interface TableHeaderProps {
49
51
  onCalendarGroupChange?: (value: string) => void;
50
52
  maxDateRange?: number;
51
53
  isAcceptance?: boolean;
54
+ startComponent?: React.ReactNode;
55
+ searchPlaceholder?: string;
56
+ timezone: Timezone | null;
57
+ browserTimezone: string;
58
+ defaultCountryTimezone: Timezone;
59
+ onChangeTimezone: (newTimezone: Timezone) => void;
60
+ segmentCountries: SegmentCountry[];
52
61
  }
53
- export type FilterRowProps = PropsWithChildren<{}>;
62
+ export type FilterRowProps = PartialExcept<TableHeaderProps<TableHeaderStatus>, 'timezone' | 'browserTimezone' | 'defaultCountryTimezone' | 'onChangeTimezone' | 'segmentCountries'>;
54
63
  export interface Column {
55
64
  label: string;
56
65
  name: string;
@@ -1,8 +1 @@
1
- const viewsOptions = {
2
- default: {},
3
- developer: {},
4
- marketing: {},
5
- finance: {},
6
- custom: {},
7
- };
8
1
  export {};
@@ -92,6 +92,7 @@ export { default as StatusBar, type AvailableStatus } from './StatusBar';
92
92
  export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
93
93
  export * from './Chip';
94
94
  export * from './StatusGroupChips';
95
+ export { default as TableHeader } from './TableHeader';
95
96
  export * from './TableHeader';
96
97
  export { default as RangeCalender } from './RangeCalender';
97
98
  export { default as AppServices } from './AppServices';
@@ -130,4 +131,3 @@ export * from './MerchantLogo';
130
131
  export * from './FilterDropdown';
131
132
  export { default as PhoneFilter } from './PhoneFilter';
132
133
  export { default as CountryFilter } from './CountryFilter';
133
- export * from './Customer';
@@ -92,6 +92,7 @@ export { default as StatusBar } from './StatusBar';
92
92
  export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
93
93
  export * from './Chip';
94
94
  export * from './StatusGroupChips';
95
+ export { default as TableHeader } from './TableHeader';
95
96
  export * from './TableHeader';
96
97
  export { default as RangeCalender } from './RangeCalender';
97
98
  export { default as AppServices } from './AppServices';
@@ -130,4 +131,3 @@ export * from './MerchantLogo';
130
131
  export * from './FilterDropdown';
131
132
  export { default as PhoneFilter } from './PhoneFilter';
132
133
  export { default as CountryFilter } from './CountryFilter';
133
- export * from './Customer';
@@ -2,3 +2,4 @@ export type Override<T, R> = Omit<T, keyof R> & R;
2
2
  export type MakeOptional<T, K extends keyof T> = Override<T, {
3
3
  [P in K]?: T[K];
4
4
  }>;
5
+ export type PartialExcept<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K>;
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.261-test.3",
5
- "testVersion": 3,
4
+ "version": "0.1.261-test.4",
5
+ "testVersion": 4,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",
@@ -102,8 +102,7 @@
102
102
  "react-window": "^1.8.9",
103
103
  "react-window-infinite-loader": "^1.0.9",
104
104
  "react18-input-otp": "^1.1.4",
105
- "recharts": "^2.15.1",
106
- "yup": "^1.7.1"
105
+ "recharts": "^2.15.1"
107
106
  },
108
107
  "devDependencies": {
109
108
  "@eslint/js": "^9.17.0",
@@ -130,30 +129,30 @@
130
129
  "vite-tsconfig-paths": "^4.2.0"
131
130
  },
132
131
  "peerDependencies": {
132
+ "react": "^18",
133
+ "react-dom": "^18",
134
+ "@mui/material": "^5",
133
135
  "@emotion/react": "^11",
134
136
  "@emotion/styled": "^11",
135
- "@hookform/resolvers": "^3",
136
- "@mui/material": "^5",
137
- "@uiw/react-json-view": "^2.0.0-alpha",
138
- "dayjs": "^1",
139
137
  "framer-motion": "^10",
140
- "i18next": "^22",
141
- "re-resizable": "^6",
142
- "react": "^18",
143
- "react-currency-input-field": "^3",
144
- "react-dom": "^18",
145
- "react-draggable": "^4",
146
- "react-dropzone": "^14",
147
138
  "react-hook-form": "^7",
148
- "react-hot-toast": "^2",
139
+ "@hookform/resolvers": "^3",
140
+ "react-router-dom": "^7",
141
+ "i18next": "^22",
149
142
  "react-i18next": "^12",
150
143
  "react-multi-date-picker": "^4",
151
- "react-router-dom": "^7",
152
- "react-virtualized-auto-sizer": "^1",
144
+ "dayjs": "^1",
145
+ "react-dropzone": "^14",
146
+ "react-hot-toast": "^2",
147
+ "recharts": "^2",
153
148
  "react-window": "^1.8",
154
149
  "react-window-infinite-loader": "^1",
150
+ "react-virtualized-auto-sizer": "^1",
151
+ "re-resizable": "^6",
152
+ "react-draggable": "^4",
153
+ "react-currency-input-field": "^3",
155
154
  "react18-input-otp": "^1",
156
- "recharts": "^2"
155
+ "@uiw/react-json-view": "^2.0.0-alpha"
157
156
  },
158
157
  "lint-staged": {
159
158
  "src/**/*.{ts,tsx,json,js,jsx}": [
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- import { FullInfoProps } from '../CustomerForms/FullInfo';
3
- interface CustomerDropdownProps extends FullInfoProps {
4
- isDisabled?: boolean;
5
- }
6
- declare function CustomerDropdown({ ...props }: Readonly<CustomerDropdownProps>): import("react/jsx-runtime").JSX.Element;
7
- declare const _default: import("react").MemoExoticComponent<typeof CustomerDropdown>;
8
- export default _default;
@@ -1,39 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { memo, useMemo, useState } from 'react';
14
- import Popper from '@mui/material/Popper';
15
- import { useTranslation } from 'react-i18next';
16
- import { getRandomGradientColor } from '../../../utils/index.js';
17
- import { CustomBackdrop } from '../../index.js';
18
- import { customerIcon2 } from '../../../constants/index.js';
19
- import { Wrapper, AvatarStyled, Button } from './style';
20
- import FullInfo from '../CustomerForms/FullInfo';
21
- function CustomerDropdown(_a) {
22
- var _b, _c;
23
- var props = __rest(_a, []);
24
- const [anchorEl, setAnchorEl] = useState(null);
25
- const { firstName, lastName } = props.customer;
26
- const { t } = useTranslation();
27
- const open = Boolean(anchorEl);
28
- const openDropdown = (event) => {
29
- if (!open)
30
- setAnchorEl(event.currentTarget);
31
- };
32
- const closeDropdown = () => {
33
- if (open)
34
- setAnchorEl(null);
35
- };
36
- const AvatarColor = useMemo(() => getRandomGradientColor(), []);
37
- return (_jsxs(Wrapper, Object.assign({ sx: Object.assign({}, (props.isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsxs(Button, Object.assign({ onClick: openDropdown }, { children: [(!firstName || !lastName) && (_jsxs(_Fragment, { children: [_jsx("img", { src: customerIcon2, alt: "c" }), _jsx("span", { children: t('customer') })] })), firstName && lastName && (_jsxs(_Fragment, { children: [_jsx(AvatarStyled, Object.assign({ src: "#", alt: "a", sx: { background: AvatarColor } }, { children: `${(_b = firstName[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()}${((_c = lastName[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) || ''}` })), `${firstName} ${lastName}`] }))] })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(FullInfo, Object.assign({}, props)) }))] })));
38
- }
39
- export default memo(CustomerDropdown);
@@ -1 +0,0 @@
1
- export { default } from './CustomerDropdown';
@@ -1 +0,0 @@
1
- export { default } from './CustomerDropdown';
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
- export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
8
- export declare const AvatarStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Avatar").AvatarOwnProps & import("@mui/material/Avatar").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
- }, "classes" | "className" | "style" | "children" | "sx" | "variant" | "slotProps" | "slots" | "sizes" | "src" | "alt" | "srcSet" | "imgProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,30 +0,0 @@
1
- import Avatar from '@mui/material/Avatar';
2
- import Box from '@mui/material/Box';
3
- import { styled } from '@mui/material/styles';
4
- export const Wrapper = styled(Box)(() => ({
5
- position: 'relative',
6
- flexGrow: 0
7
- }));
8
- export const Button = styled(Box)(({ theme }) => ({
9
- fontSize: '11px',
10
- color: theme.palette.text.primary,
11
- display: 'flex',
12
- padding: theme.spacing(1),
13
- gap: theme.spacing(1),
14
- border: `1px solid ${theme.palette.divider}`,
15
- borderRadius: '4px',
16
- backgroundColor: theme.palette.common.white,
17
- alignItems: 'center',
18
- height: 32,
19
- textTransform: 'capitalize',
20
- cursor: 'pointer'
21
- }));
22
- export const AvatarStyled = styled(Avatar)(({ theme }) => ({
23
- width: 16,
24
- height: 16,
25
- cursor: 'pointer',
26
- fontSize: '5.667px',
27
- color: theme.palette.common.white,
28
- fontWeight: 500,
29
- border: `1px solid ${theme.palette.common.white}`
30
- }));
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import { Item } from '../../../types/index.js';
3
- import { FullInfoProps } from './FullInfo';
4
- export interface EmailFormProps extends Pick<FullInfoProps, 'onCustomerChange' | 'isCustomerNotValid' | 'customer'> {
5
- items: Item[];
6
- isItemsNotValid: boolean;
7
- submitButtonText: string;
8
- onSubmit: () => void;
9
- }
10
- declare function EmailForm({ submitButtonText, onSubmit, customer, isItemsNotValid, items, onCustomerChange }: Readonly<EmailFormProps>): import("react/jsx-runtime").JSX.Element;
11
- declare const _default: import("react").MemoExoticComponent<typeof EmailForm>;
12
- export default _default;
@@ -1,76 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { memo, useEffect, useRef } from 'react';
14
- import { yupResolver } from '@hookform/resolvers/yup';
15
- import Box from '@mui/material/Box';
16
- import { Controller, useForm } from 'react-hook-form';
17
- import { useTranslation } from 'react-i18next';
18
- import { FormWrapper, InputStyled, SubmitButton, ErrorStyled } from './style';
19
- import { validationEmailFromSchema } from './validation';
20
- function EmailForm({ submitButtonText, onSubmit, customer, isItemsNotValid, items, onCustomerChange }) {
21
- const firstNameRef = useRef();
22
- const lastNameRef = useRef();
23
- const emailRef = useRef();
24
- const { t } = useTranslation();
25
- const { control, formState: { isValid, errors }, watch, trigger, } = useForm({
26
- mode: 'onChange',
27
- resolver: yupResolver(validationEmailFromSchema),
28
- defaultValues: {
29
- firstName: customer.firstName,
30
- email: customer.email,
31
- lastName: customer.lastName,
32
- },
33
- });
34
- useEffect(() => {
35
- // revalidate default values
36
- if (customer.firstName && customer.email && customer.lastName) {
37
- trigger();
38
- }
39
- }, []);
40
- useEffect(() => {
41
- watch(({ firstName = '', lastName = '', email = '' }) => {
42
- onCustomerChange(Object.assign(Object.assign({}, customer), { email,
43
- firstName,
44
- lastName }));
45
- });
46
- }, [watch, errors, customer]);
47
- const onMouseLeave = (e) => {
48
- e.stopPropagation();
49
- };
50
- return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: onMouseLeave }, { children: [_jsx(Controller, { control: control, name: "email", render: (_a) => {
51
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
52
- return (_jsxs(Box, Object.assign({ ref: emailRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_email", placeholder: t('email'), inputProps: {
53
- autoComplete: 'off',
54
- form: {
55
- autoComplete: 'off',
56
- },
57
- }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
58
- } }), _jsx(Controller, { control: control, name: "firstName", render: (_a) => {
59
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
60
- return (_jsxs(Box, Object.assign({ ref: firstNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_firstName", placeholder: t('firstName'), inputProps: {
61
- autoComplete: 'off',
62
- form: {
63
- autoComplete: 'off',
64
- },
65
- }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
66
- } }), _jsx(Controller, { control: control, name: "lastName", render: (_a) => {
67
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
68
- return (_jsxs(Box, Object.assign({ ref: lastNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { "data-testid": "EmailForm_lastName", placeholder: t('lastName'), inputProps: {
69
- autoComplete: 'off',
70
- form: {
71
- autoComplete: 'off',
72
- },
73
- }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
74
- } }), _jsx(SubmitButton, Object.assign({ type: "button", "data-testid": "EmailForm_submit", onClick: onSubmit, disabled: !isValid || isItemsNotValid || !items.length }, { children: submitButtonText }))] })));
75
- }
76
- export default memo(EmailForm);
@@ -1,13 +0,0 @@
1
- import { Country, CustomerInfo, SegmentCountry } from '../../../types/index.js';
2
- export interface FullInfoProps {
3
- customer: CustomerInfo;
4
- country: Country;
5
- defaultCountry: SegmentCountry;
6
- countries: Country[];
7
- isCountriesLoading: boolean;
8
- onCountryChange: (country: Country) => void;
9
- onCustomerChange: (customer: CustomerInfo) => void;
10
- isCustomerNotValid?: (value: boolean, err?: string) => void;
11
- }
12
- declare function FullInfo({ customer, country, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, isCustomerNotValid, }: Readonly<FullInfoProps>): import("react/jsx-runtime").JSX.Element;
13
- export default FullInfo;
@@ -1,72 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { useEffect, useRef, useCallback } from 'react';
14
- import { yupResolver } from '@hookform/resolvers/yup';
15
- import Box from '@mui/material/Box';
16
- import { Controller, useForm } from 'react-hook-form';
17
- import { useTranslation } from 'react-i18next';
18
- import { MobileWrapper, FormWrapper, InputStyled, InputNumberStyled, ErrorStyled } from './style';
19
- import { validationFullInfoSchema } from './validation';
20
- import CountriesDropdown from '../../Inputs/CountriesDropDown';
21
- function FullInfo({ customer, country, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, isCustomerNotValid, }) {
22
- const firstNameRef = useRef();
23
- const lastNameRef = useRef();
24
- const emailRef = useRef();
25
- const phoneNumberRef = useRef();
26
- const { t } = useTranslation();
27
- const { control, watch, formState: { errors, isValid }, } = useForm({
28
- mode: 'onChange',
29
- resolver: yupResolver(validationFullInfoSchema(country.max_digits)),
30
- defaultValues: {
31
- firstName: customer.firstName,
32
- email: customer.email,
33
- lastName: customer.lastName,
34
- phoneNumber: customer.phoneNumber,
35
- },
36
- });
37
- useEffect(() => {
38
- watch(({ firstName = '', lastName = '', email = '', phoneNumber = '' }) => {
39
- onCustomerChange({
40
- firstName,
41
- lastName,
42
- email,
43
- phoneNumber,
44
- });
45
- });
46
- }, [watch, errors, customer]);
47
- const getFirstError = useCallback(() => { var _a, _b, _c, _d, _e, _f, _g; return (_f = (_d = (_b = (_a = errors.firstName) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : (_c = errors.lastName) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : (_e = errors.email) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : (_g = errors.phoneNumber) === null || _g === void 0 ? void 0 : _g.message; }, [errors]);
48
- useEffect(() => {
49
- isCustomerNotValid === null || isCustomerNotValid === void 0 ? void 0 : isCustomerNotValid(!isValid, getFirstError());
50
- }, [isValid, getFirstError]);
51
- const onMouseLeave = (e) => {
52
- e.stopPropagation();
53
- };
54
- return (_jsxs(FormWrapper, Object.assign({ onMouseLeave: onMouseLeave }, { children: [_jsx(Controller, { control: control, name: "firstName", render: (_a) => {
55
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
56
- return (_jsxs(Box, Object.assign({ ref: firstNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('firstName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
57
- } }, "fullInfoFirstName"), _jsx(Controller, { control: control, name: "lastName", render: (_a) => {
58
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
59
- return (_jsxs(Box, Object.assign({ ref: lastNameRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('lastName'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
60
- } }, "fullInfoLastName"), _jsx(Controller, { control: control, name: "email", render: (_a) => {
61
- var _b = _a.field, { ref } = _b, field = __rest(_b, ["ref"]), { fieldState: { error } } = _a;
62
- return (_jsxs(Box, Object.assign({ ref: emailRef }, { children: [_jsx(InputStyled, Object.assign({}, field, { placeholder: t('email'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message) })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message) })] })));
63
- } }, "fullInfoEmail"), _jsx(Controller, { control: control, name: "phoneNumber", render: (_a) => {
64
- var _b, _c;
65
- var _d = _a.field, { ref } = _d, field = __rest(_d, ["ref"]), { fieldState: { error } } = _a;
66
- return (_jsxs(Box, Object.assign({ ref: phoneNumberRef }, { children: [_jsxs(MobileWrapper, Object.assign({ sx: Object.assign({}, ((error === null || error === void 0 ? void 0 : error.message) && { borderBottom: 'none' })) }, { children: [_jsx(CountriesDropdown, { defaultCountry: (_c = (_b = country === null || country === void 0 ? void 0 : country.iso2) !== null && _b !== void 0 ? _b : defaultCountry === null || defaultCountry === void 0 ? void 0 : defaultCountry.code) !== null && _c !== void 0 ? _c : 'SA', value: country, onChangeCountry: onCountryChange, countries: countries, isLoading: isCountriesLoading }), _jsx(InputNumberStyled, Object.assign({}, field, { placeholder: t('mobile'), inputProps: { autoComplete: 'off' }, error: Boolean(error === null || error === void 0 ? void 0 : error.message), sx: {
67
- border: 'none',
68
- paddingInlineEnd: 0,
69
- }, hideArrows: true }))] })), (error === null || error === void 0 ? void 0 : error.message) && _jsx(ErrorStyled, { error: t(error.message, { numberLen: country.max_digits }) })] })));
70
- } }, "fullInfoPhoneNumber")] })));
71
- }
72
- export default FullInfo;
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Item } from '../../../types/index.js';
3
- import { FullInfoProps } from './FullInfo';
4
- export interface FullInfoFormProps extends FullInfoProps {
5
- items: Item[];
6
- isItemsNotValid: boolean;
7
- submitButtonText: string;
8
- onSubmit: () => void;
9
- }
10
- declare function FullInfoForm({ submitButtonText, onSubmit, customer, country, items, isItemsNotValid, defaultCountry, countries, isCountriesLoading, onCustomerChange, onCountryChange, }: Readonly<FullInfoFormProps>): import("react/jsx-runtime").JSX.Element;
11
- declare const _default: import("react").MemoExoticComponent<typeof FullInfoForm>;
12
- export default _default;