@homefile/components-v2 2.23.7 → 2.23.9

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 (15) hide show
  1. package/dist/components/receipts/receipt/DetailsColumn.js +5 -1
  2. package/dist/hooks/receipts/useDisplayReceipts.d.ts +1 -1
  3. package/dist/interfaces/receipts/receipt/ReceiptDetails.interface.d.ts +1 -1
  4. package/dist/mocks/receipts/Receipts.mock.d.ts +76 -0
  5. package/dist/mocks/receipts/Receipts.mock.js +121 -0
  6. package/dist/stories/receipts/displayReceipts/GridReceipt.stories.d.ts +1 -1
  7. package/dist/stories/receipts/displayReceipts/ItemReceipt.stories.d.ts +1 -1
  8. package/dist/stories/receipts/displayReceipts/ListReceipt.stories.d.ts +1 -1
  9. package/dist/utils/Formaters.utils.d.ts +3 -3
  10. package/dist/utils/Formaters.utils.js +12 -0
  11. package/package.json +1 -1
  12. package/src/components/receipts/receipt/DetailsColumn.tsx +24 -21
  13. package/src/interfaces/receipts/receipt/ReceiptDetails.interface.ts +9 -3
  14. package/src/mocks/receipts/Receipts.mock.ts +123 -0
  15. package/src/utils/Formaters.utils.ts +7 -1
package/dist/components/receipts/receipt/DetailsColumn.js CHANGED
@@ -2,5 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Stack, Flex, Text } from '@chakra-ui/react';
3
3
  export const DetailsColumn = ({ align = 'left', details }) => {
4
4
  const isLeft = align === 'left';
5
- return (_jsx(Stack, { spacing: "0", flex: "auto", children: details.map((item, index) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", lineHeight: "1.4", flex: isLeft ? '45%' : '', children: item.label }), _jsx(Text, { fontSize: "xs", fontFamily: "secondary", fontWeight: "medium", lineHeight: "1.4", flex: isLeft ? '55%' : '', children: String(item.value) })] }, index + index))) }));
5
+ return (_jsx(Stack, { spacing: "0", flex: "auto", children: details.map((item, index) => {
6
+ var _a;
7
+ const value = (_a = item.value) !== null && _a !== void 0 ? _a : '-';
8
+ return (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", lineHeight: "1.4", flex: isLeft ? '45%' : '', children: item.label }), _jsx(Text, { fontSize: "xs", fontFamily: "secondary", fontWeight: "medium", lineHeight: "1.4", flex: isLeft ? '55%' : '', children: value })] }, index + index));
9
+ }) }));
6
10
  };
package/dist/hooks/receipts/useDisplayReceipts.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const useDisplayReceipts: ({ receipts }: UseDisplayReceiptsI) =>
14
14
  itemQuantity: number;
15
15
  name?: string;
16
16
  paymentMethod: string;
17
- purchaseDate: Date;
17
+ purchaseDate?: Date;
18
18
  receiptImage?: string;
19
19
  receiptOrigin?: import("../../interfaces").ReceiptOrigintProps;
20
20
  store: string;
package/dist/interfaces/receipts/receipt/ReceiptDetails.interface.d.ts CHANGED
@@ -18,7 +18,7 @@ export interface ReceiptDetailsDBI {
18
18
  itemQuantity: number;
19
19
  name?: string;
20
20
  paymentMethod: string;
21
- purchaseDate: Date;
21
+ purchaseDate?: Date;
22
22
  receiptImage?: string;
23
23
  receiptOrigin?: ReceiptOrigintProps;
24
24
  store: string;
package/dist/mocks/receipts/Receipts.mock.d.ts CHANGED
@@ -1,2 +1,78 @@
1
1
  import { ReceiptDetailsDBI } from '../../interfaces';
2
2
  export declare const receiptsReceivedMock: ReceiptDetailsDBI[];
3
+ export declare const aiReceiptMock: {
4
+ details: ({
5
+ id: string;
6
+ name: string;
7
+ description: string;
8
+ comments: string;
9
+ value: string;
10
+ type: string;
11
+ visible: boolean;
12
+ options: never[];
13
+ children: ({
14
+ id: string;
15
+ name: string;
16
+ description: string;
17
+ comments: string;
18
+ value: string[];
19
+ type: string;
20
+ } | {
21
+ id: string;
22
+ name: string;
23
+ description: string;
24
+ comments: string;
25
+ value: number;
26
+ type: string;
27
+ } | {
28
+ id: string;
29
+ name: string;
30
+ description: string;
31
+ comments: string;
32
+ value: string;
33
+ type: string;
34
+ })[];
35
+ } | {
36
+ id: string;
37
+ value: string;
38
+ type: string;
39
+ visible: boolean;
40
+ children: {
41
+ id: string;
42
+ name: string;
43
+ value: string;
44
+ type: string;
45
+ visible: boolean;
46
+ children: {
47
+ id: string;
48
+ icon: string;
49
+ value: string;
50
+ type: string;
51
+ visible: boolean;
52
+ link: string;
53
+ }[];
54
+ }[];
55
+ name?: undefined;
56
+ description?: undefined;
57
+ comments?: undefined;
58
+ options?: undefined;
59
+ } | {
60
+ id: string;
61
+ name: string;
62
+ description: string;
63
+ comments: string;
64
+ value: string;
65
+ type: string;
66
+ visible: boolean;
67
+ options: never[];
68
+ children?: undefined;
69
+ })[];
70
+ specs: {
71
+ careInstructions: string;
72
+ overview: string;
73
+ dimensions: string;
74
+ features: string;
75
+ compatibility: string;
76
+ certifications: string;
77
+ };
78
+ };
package/dist/mocks/receipts/Receipts.mock.js CHANGED
@@ -81,3 +81,124 @@ export const receiptsReceivedMock = [
81
81
  total: faker.finance.amount({ min: 1, max: 100 }),
82
82
  },
83
83
  ];
84
+ export const aiReceiptMock = {
85
+ details: [
86
+ {
87
+ id: faker.database.mongodbObjectId(),
88
+ name: 'Appliances',
89
+ description: 'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
90
+ comments: faker.lorem.sentence(),
91
+ value: 'Refrigerator',
92
+ type: 'appliances',
93
+ visible: true,
94
+ options: [],
95
+ children: [
96
+ {
97
+ id: faker.database.mongodbObjectId(),
98
+ name: '',
99
+ description: '',
100
+ comments: '',
101
+ value: [
102
+ faker.image.urlLoremFlickr(),
103
+ faker.image.urlLoremFlickr(),
104
+ faker.image.urlLoremFlickr(),
105
+ faker.image.urlLoremFlickr(),
106
+ ],
107
+ type: 'images',
108
+ },
109
+ {
110
+ id: faker.database.mongodbObjectId(),
111
+ name: '',
112
+ description: '',
113
+ comments: '',
114
+ value: 4,
115
+ type: 'rating',
116
+ },
117
+ {
118
+ id: faker.database.mongodbObjectId(),
119
+ name: 'Brand',
120
+ description: '',
121
+ comments: '',
122
+ value: 'Kitchen Aid',
123
+ type: 'text',
124
+ },
125
+ {
126
+ id: faker.database.mongodbObjectId(),
127
+ name: 'Model#',
128
+ description: '',
129
+ comments: '',
130
+ value: 'KRFC300ESS',
131
+ type: 'text',
132
+ },
133
+ ],
134
+ },
135
+ {
136
+ id: faker.database.mongodbObjectId(),
137
+ value: '',
138
+ type: 'grid',
139
+ visible: true,
140
+ children: [
141
+ {
142
+ id: faker.database.mongodbObjectId(),
143
+ name: 'Care & Guidelines',
144
+ value: '',
145
+ type: 'guidelines',
146
+ visible: true,
147
+ children: [
148
+ {
149
+ id: faker.database.mongodbObjectId(),
150
+ icon: 'umbrella',
151
+ value: 'warranty',
152
+ type: 'item-icon-btn',
153
+ visible: true,
154
+ link: 'www.kitchenaid.com',
155
+ },
156
+ {
157
+ id: faker.database.mongodbObjectId(),
158
+ icon: 'book-opened',
159
+ value: 'manual',
160
+ type: 'item-icon-btn',
161
+ visible: true,
162
+ link: 'www.kitchenaid.com',
163
+ },
164
+ ],
165
+ },
166
+ {
167
+ id: faker.database.mongodbObjectId(),
168
+ name: 'Related',
169
+ value: '',
170
+ type: 'item-related',
171
+ visible: true,
172
+ children: [
173
+ {
174
+ id: faker.database.mongodbObjectId(),
175
+ icon: 'drop',
176
+ value: 'filter',
177
+ type: 'item-icon-btn',
178
+ visible: true,
179
+ link: 'www.kitchenaid.com',
180
+ },
181
+ ],
182
+ },
183
+ ],
184
+ },
185
+ {
186
+ id: faker.database.mongodbObjectId(),
187
+ name: 'Notes',
188
+ description: '',
189
+ comments: faker.lorem.sentence(),
190
+ value: faker.lorem.paragraphs(),
191
+ type: 'notes',
192
+ visible: true,
193
+ options: [],
194
+ },
195
+ ],
196
+ specs: {
197
+ careInstructions: '',
198
+ overview: '',
199
+ dimensions: '',
200
+ features: '',
201
+ compatibility: '',
202
+ certifications: '',
203
+ },
204
+ };
package/dist/stories/receipts/displayReceipts/GridReceipt.stories.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const GridReceiptComponent: {
14
14
  itemQuantity: number;
15
15
  name?: string;
16
16
  paymentMethod: string;
17
- purchaseDate: Date;
17
+ purchaseDate?: Date;
18
18
  receiptImage?: string;
19
19
  receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
20
20
  store: string;
package/dist/stories/receipts/displayReceipts/ItemReceipt.stories.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const ItemReceiptComponent: {
14
14
  itemQuantity: number;
15
15
  name?: string;
16
16
  paymentMethod: string;
17
- purchaseDate: Date;
17
+ purchaseDate?: Date;
18
18
  receiptImage?: string;
19
19
  receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
20
20
  store: string;
package/dist/stories/receipts/displayReceipts/ListReceipt.stories.d.ts CHANGED
@@ -14,7 +14,7 @@ export declare const ListReceiptComponent: {
14
14
  itemQuantity: number;
15
15
  name?: string;
16
16
  paymentMethod: string;
17
- purchaseDate: Date;
17
+ purchaseDate?: Date;
18
18
  receiptImage?: string;
19
19
  receiptOrigin?: import("../../../interfaces").ReceiptOrigintProps;
20
20
  store: string;
package/dist/utils/Formaters.utils.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { DayValue } from 'react-modern-calendar-datepicker';
2
2
  interface FormatDateI {
3
- date: Date | string;
3
+ date?: Date | string;
4
4
  locale?: string;
5
5
  }
6
6
  export declare const formatDate: ({ date, locale }: FormatDateI) => string;
@@ -10,8 +10,8 @@ export declare const monthAndYearFormatDate: ({ date, locale, }: FormatDateI) =>
10
10
  export declare const dayAndMonthFormatDate: ({ date, locale, }: FormatDateI) => string;
11
11
  export declare const formatMonthYear: ({ date, locale, }: FormatDateI) => string;
12
12
  export declare const formatDateTime: ({ date, locale }: FormatDateI) => {
13
- formattedDate: string;
14
- formattedTime: string;
13
+ formattedDate: string | undefined;
14
+ formattedTime: string | undefined;
15
15
  };
16
16
  export declare const extractDayMonthYear: (date: Date | string) => {
17
17
  day: number;
package/dist/utils/Formaters.utils.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { format, isValid, parseISO } from 'date-fns';
2
2
  export const formatDate = ({ date, locale = 'en-US' }) => {
3
+ if (!date)
4
+ return '';
3
5
  const timeFormat = new Intl.DateTimeFormat(locale, {
4
6
  timeStyle: 'short',
5
7
  timeZone: 'UTC',
@@ -16,6 +18,8 @@ export const formatDate = ({ date, locale = 'en-US' }) => {
16
18
  return dateFormat + ' ' + timeFormat;
17
19
  };
18
20
  export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
21
+ if (!date)
22
+ return '';
19
23
  const timeFormat = new Intl.DateTimeFormat(locale, {
20
24
  timeStyle: 'short',
21
25
  timeZone: 'UTC',
@@ -32,6 +36,8 @@ export const formatDateWithAt = ({ date, locale = 'en-US', }) => {
32
36
  return dateFormat + ' @ ' + timeFormat;
33
37
  };
34
38
  export const shortFormatDate = ({ date, locale = 'en-US', }) => {
39
+ if (!date)
40
+ return '';
35
41
  return new Date(date).toLocaleDateString(locale, {
36
42
  month: 'short',
37
43
  day: 'numeric',
@@ -39,18 +45,24 @@ export const shortFormatDate = ({ date, locale = 'en-US', }) => {
39
45
  });
40
46
  };
41
47
  export const monthAndYearFormatDate = ({ date, locale = 'en-US', }) => {
48
+ if (!date)
49
+ return '';
42
50
  return new Date(date).toLocaleDateString(locale, {
43
51
  month: 'short',
44
52
  year: '2-digit',
45
53
  });
46
54
  };
47
55
  export const dayAndMonthFormatDate = ({ date, locale = 'en-US', }) => {
56
+ if (!date)
57
+ return '';
48
58
  return new Date(date).toLocaleDateString(locale, {
49
59
  month: 'short',
50
60
  day: '2-digit',
51
61
  });
52
62
  };
53
63
  export const formatMonthYear = ({ date, locale = 'en-US', }) => {
64
+ if (!date)
65
+ return '';
54
66
  return new Date(date).toLocaleDateString(locale, {
55
67
  month: 'long',
56
68
  year: 'numeric',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.23.7",
3
+ "version": "2.23.9",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/receipts/receipt/DetailsColumn.tsx CHANGED
@@ -5,27 +5,30 @@ export const DetailsColumn = ({ align = 'left', details }: DetailsColumnI) => {
5
5
  const isLeft = align === 'left'
6
6
  return (
7
7
  <Stack spacing="0" flex="auto">
8
- {details.map((item, index) => (
9
- <Flex key={index + index} justify="space-between">
10
- <Text
11
- fontSize="xs"
12
- fontFamily="secondary"
13
- lineHeight="1.4"
14
- flex={isLeft ? '45%' : ''}
15
- >
16
- {item.label}
17
- </Text>
18
- <Text
19
- fontSize="xs"
20
- fontFamily="secondary"
21
- fontWeight="medium"
22
- lineHeight="1.4"
23
- flex={isLeft ? '55%' : ''}
24
- >
25
- {String(item.value)}
26
- </Text>
27
- </Flex>
28
- ))}
8
+ {details.map((item, index) => {
9
+ const value = (item.value as string) ?? '-'
10
+ return (
11
+ <Flex key={index + index} justify="space-between">
12
+ <Text
13
+ fontSize="xs"
14
+ fontFamily="secondary"
15
+ lineHeight="1.4"
16
+ flex={isLeft ? '45%' : ''}
17
+ >
18
+ {item.label}
19
+ </Text>
20
+ <Text
21
+ fontSize="xs"
22
+ fontFamily="secondary"
23
+ fontWeight="medium"
24
+ lineHeight="1.4"
25
+ flex={isLeft ? '55%' : ''}
26
+ >
27
+ {value}
28
+ </Text>
29
+ </Flex>
30
+ )
31
+ })}
29
32
  </Stack>
30
33
  )
31
34
  }
package/src/interfaces/receipts/receipt/ReceiptDetails.interface.ts CHANGED
@@ -3,7 +3,13 @@ export type ColumnDetailsType = {
3
3
  value: string | number | Date
4
4
  }
5
5
 
6
- export type ReceiptOrigintProps = 'homeDepot' | 'lowes' | 'HomeDepot' | 'Lowes' | 'walmart' | 'Walmart'
6
+ export type ReceiptOrigintProps =
7
+ | 'homeDepot'
8
+ | 'lowes'
9
+ | 'HomeDepot'
10
+ | 'Lowes'
11
+ | 'walmart'
12
+ | 'Walmart'
7
13
 
8
14
  export type ReceiptAssignStatusProps = 'filed' | 'filing' | 'unfiled'
9
15
 
@@ -22,7 +28,7 @@ export interface ReceiptDetailsDBI {
22
28
  itemQuantity: number
23
29
  name?: string
24
30
  paymentMethod: string
25
- purchaseDate: Date
31
+ purchaseDate?: Date
26
32
  receiptImage?: string
27
33
  receiptOrigin?: ReceiptOrigintProps
28
34
  store: string
@@ -34,4 +40,4 @@ export interface ReceiptDetailsDBI {
34
40
  updateAt?: Date
35
41
  user?: string
36
42
  items?: ItemsI[]
37
- }
43
+ }
package/src/mocks/receipts/Receipts.mock.ts CHANGED
@@ -83,3 +83,126 @@ export const receiptsReceivedMock: ReceiptDetailsDBI[] = [
83
83
  total: faker.finance.amount({ min: 1, max: 100 }),
84
84
  },
85
85
  ]
86
+
87
+ export const aiReceiptMock = {
88
+ details: [
89
+ {
90
+ id: faker.database.mongodbObjectId(),
91
+ name: 'Appliances',
92
+ description:
93
+ 'KitchenAid Counter-depth 20-cu ft French Door Refrigerator with Ice Maker and Water dispenser (Stainless Steel) ENERGY STAR',
94
+ comments: faker.lorem.sentence(),
95
+ value: 'Refrigerator',
96
+ type: 'appliances',
97
+ visible: true,
98
+ options: [],
99
+ children: [
100
+ {
101
+ id: faker.database.mongodbObjectId(),
102
+ name: '',
103
+ description: '',
104
+ comments: '',
105
+ value: [
106
+ faker.image.urlLoremFlickr(),
107
+ faker.image.urlLoremFlickr(),
108
+ faker.image.urlLoremFlickr(),
109
+ faker.image.urlLoremFlickr(),
110
+ ],
111
+ type: 'images',
112
+ },
113
+ {
114
+ id: faker.database.mongodbObjectId(),
115
+ name: '',
116
+ description: '',
117
+ comments: '',
118
+ value: 4,
119
+ type: 'rating',
120
+ },
121
+ {
122
+ id: faker.database.mongodbObjectId(),
123
+ name: 'Brand',
124
+ description: '',
125
+ comments: '',
126
+ value: 'Kitchen Aid',
127
+ type: 'text',
128
+ },
129
+ {
130
+ id: faker.database.mongodbObjectId(),
131
+ name: 'Model#',
132
+ description: '',
133
+ comments: '',
134
+ value: 'KRFC300ESS',
135
+ type: 'text',
136
+ },
137
+ ],
138
+ },
139
+ {
140
+ id: faker.database.mongodbObjectId(),
141
+ value: '',
142
+ type: 'grid',
143
+ visible: true,
144
+ children: [
145
+ {
146
+ id: faker.database.mongodbObjectId(),
147
+ name: 'Care & Guidelines',
148
+ value: '',
149
+ type: 'guidelines',
150
+ visible: true,
151
+ children: [
152
+ {
153
+ id: faker.database.mongodbObjectId(),
154
+ icon: 'umbrella',
155
+ value: 'warranty',
156
+ type: 'item-icon-btn',
157
+ visible: true,
158
+ link: 'www.kitchenaid.com',
159
+ },
160
+ {
161
+ id: faker.database.mongodbObjectId(),
162
+ icon: 'book-opened',
163
+ value: 'manual',
164
+ type: 'item-icon-btn',
165
+ visible: true,
166
+ link: 'www.kitchenaid.com',
167
+ },
168
+ ],
169
+ },
170
+ {
171
+ id: faker.database.mongodbObjectId(),
172
+ name: 'Related',
173
+ value: '',
174
+ type: 'item-related',
175
+ visible: true,
176
+ children: [
177
+ {
178
+ id: faker.database.mongodbObjectId(),
179
+ icon: 'drop',
180
+ value: 'filter',
181
+ type: 'item-icon-btn',
182
+ visible: true,
183
+ link: 'www.kitchenaid.com',
184
+ },
185
+ ],
186
+ },
187
+ ],
188
+ },
189
+ {
190
+ id: faker.database.mongodbObjectId(),
191
+ name: 'Notes',
192
+ description: '',
193
+ comments: faker.lorem.sentence(),
194
+ value: faker.lorem.paragraphs(),
195
+ type: 'notes',
196
+ visible: true,
197
+ options: [],
198
+ },
199
+ ],
200
+ specs: {
201
+ careInstructions: '',
202
+ overview: '',
203
+ dimensions: '',
204
+ features: '',
205
+ compatibility: '',
206
+ certifications: '',
207
+ },
208
+ }
package/src/utils/Formaters.utils.ts CHANGED
@@ -2,11 +2,12 @@ import type { DayValue } from 'react-modern-calendar-datepicker'
2
2
  import { format, isValid, parseISO } from 'date-fns'
3
3
 
4
4
  interface FormatDateI {
5
- date: Date | string
5
+ date?: Date | string
6
6
  locale?: string
7
7
  }
8
8
 
9
9
  export const formatDate = ({ date, locale = 'en-US' }: FormatDateI): string => {
10
+ if (!date) return ''
10
11
  const timeFormat = new Intl.DateTimeFormat(locale, {
11
12
  timeStyle: 'short',
12
13
  timeZone: 'UTC',
@@ -29,6 +30,7 @@ export const formatDateWithAt = ({
29
30
  date,
30
31
  locale = 'en-US',
31
32
  }: FormatDateI): string => {
33
+ if (!date) return ''
32
34
  const timeFormat = new Intl.DateTimeFormat(locale, {
33
35
  timeStyle: 'short',
34
36
  timeZone: 'UTC',
@@ -51,6 +53,7 @@ export const shortFormatDate = ({
51
53
  date,
52
54
  locale = 'en-US',
53
55
  }: FormatDateI): string => {
56
+ if (!date) return ''
54
57
  return new Date(date).toLocaleDateString(locale, {
55
58
  month: 'short',
56
59
  day: 'numeric',
@@ -62,6 +65,7 @@ export const monthAndYearFormatDate = ({
62
65
  date,
63
66
  locale = 'en-US',
64
67
  }: FormatDateI): string => {
68
+ if (!date) return ''
65
69
  return new Date(date).toLocaleDateString(locale, {
66
70
  month: 'short',
67
71
  year: '2-digit',
@@ -72,6 +76,7 @@ export const dayAndMonthFormatDate = ({
72
76
  date,
73
77
  locale = 'en-US',
74
78
  }: FormatDateI): string => {
79
+ if (!date) return ''
75
80
  return new Date(date).toLocaleDateString(locale, {
76
81
  month: 'short',
77
82
  day: '2-digit',
@@ -82,6 +87,7 @@ export const formatMonthYear = ({
82
87
  date,
83
88
  locale = 'en-US',
84
89
  }: FormatDateI): string => {
90
+ if (!date) return ''
85
91
  return new Date(date).toLocaleDateString(locale, {
86
92
  month: 'long',
87
93
  year: 'numeric',