@bjsdistribution/dms-client-return 0.1.15-prod → 0.1.16-prod
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/dist/dms-client-return.cjs.development.js +143 -78
- package/dist/dms-client-return.cjs.development.js.map +1 -1
- package/dist/dms-client-return.cjs.production.min.js +1 -1
- package/dist/dms-client-return.cjs.production.min.js.map +1 -1
- package/dist/dms-client-return.esm.js +143 -78
- package/dist/dms-client-return.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx +4 -0
- package/src/components/order-view/notification/FlagTemplate.tsx +21 -10
- package/src/components/order-view/notification/ReminderTemplate.tsx +19 -12
- package/src/components/order-view/notification/index.tsx +99 -59
package/package.json
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
FlagAlert,
|
|
3
|
+
formatUtcToLocal,
|
|
4
|
+
} from '@bjsdistribution/dms-component-library';
|
|
2
5
|
import React from 'react';
|
|
3
6
|
import styled from 'styled-components';
|
|
4
7
|
import { useFlagRefId } from '../order-actions/store';
|
|
5
8
|
import { useCurrentAction } from '../store';
|
|
6
|
-
import {
|
|
7
|
-
|
|
9
|
+
import { useClientPortal } from '../../store';
|
|
8
10
|
function FlagTemplate({ data, dismissFlags }: any) {
|
|
9
11
|
const [, setSelectedFlag] = useFlagRefId();
|
|
10
12
|
const [, setCurrentAction] = useCurrentAction();
|
|
11
|
-
|
|
13
|
+
const [isCustomerPortal] = useClientPortal();
|
|
14
|
+
//
|
|
12
15
|
const openModal = () => {
|
|
13
16
|
setCurrentAction('view-flag');
|
|
14
17
|
};
|
|
@@ -25,21 +28,30 @@ function FlagTemplate({ data, dismissFlags }: any) {
|
|
|
25
28
|
title={
|
|
26
29
|
<>
|
|
27
30
|
<StyledTitle color={titleColor}>
|
|
28
|
-
Flag : {data?.is_private ? 'Private' : ''}{' '}
|
|
31
|
+
Flag : {data?.is_private ? 'Private' : 'Public'}{' '}
|
|
29
32
|
<StyledLink onClick={() => handleClick(data.id)}>
|
|
30
33
|
{data?.id} - {data?.flag_type}{' '}
|
|
31
34
|
</StyledLink>{' '}
|
|
32
35
|
{data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
|
|
33
36
|
{data?.status == 'SD' ? (
|
|
34
37
|
<>
|
|
35
|
-
{
|
|
38
|
+
{`${formatUtcToLocal(data?.resolved_at)?.date} ${
|
|
39
|
+
formatUtcToLocal(data?.resolved_at)?.time
|
|
40
|
+
}`}{' '}
|
|
41
|
+
by {data?.resolved_by}{' '}
|
|
36
42
|
</>
|
|
37
43
|
) : null}
|
|
38
44
|
</StyledTitle>
|
|
39
45
|
</>
|
|
40
46
|
}
|
|
41
47
|
subtitle=""
|
|
42
|
-
description={
|
|
48
|
+
description={
|
|
49
|
+
isCustomerPortal ? (
|
|
50
|
+
<span dangerouslySetInnerHTML={{ __html: data?.description }} />
|
|
51
|
+
) : (
|
|
52
|
+
`${data?.description}`
|
|
53
|
+
)
|
|
54
|
+
}
|
|
43
55
|
showOkButton={false}
|
|
44
56
|
onClose={() => dismissFlags(data?.id)}
|
|
45
57
|
/>
|
|
@@ -47,9 +59,7 @@ function FlagTemplate({ data, dismissFlags }: any) {
|
|
|
47
59
|
);
|
|
48
60
|
}
|
|
49
61
|
|
|
50
|
-
const StyledAlert = styled.div
|
|
51
|
-
margin-bottom: 10px;
|
|
52
|
-
`;
|
|
62
|
+
const StyledAlert = styled.div``;
|
|
53
63
|
|
|
54
64
|
const StyledLink = styled.span`
|
|
55
65
|
color: var(--contextual-blue, #6396e5);
|
|
@@ -57,6 +67,7 @@ const StyledLink = styled.span`
|
|
|
57
67
|
font-size: 14px;
|
|
58
68
|
font-style: normal;
|
|
59
69
|
font-weight: 600;
|
|
70
|
+
cursor: pointer;
|
|
60
71
|
`;
|
|
61
72
|
|
|
62
73
|
const StyledTitle = styled.span<{ color: string }>`
|
|
@@ -6,11 +6,12 @@ import {
|
|
|
6
6
|
} from '@bjsdistribution/dms-component-library';
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { useReminderRefId } from '../order-actions/store';
|
|
9
|
-
import {
|
|
9
|
+
import { useClientPortal } from '../../store';
|
|
10
10
|
|
|
11
11
|
function ReminderTemplate({ data, dismissReminder }: any) {
|
|
12
12
|
const [, setCurrentAction] = useCurrentAction();
|
|
13
13
|
const [, setReminderRefId] = useReminderRefId();
|
|
14
|
+
const [isClientPortal] = useClientPortal();
|
|
14
15
|
const openModal = () => {
|
|
15
16
|
setCurrentAction('view-reminder');
|
|
16
17
|
};
|
|
@@ -44,18 +45,22 @@ function ReminderTemplate({ data, dismissReminder }: any) {
|
|
|
44
45
|
<>
|
|
45
46
|
<StyledTitle color={titleColor}>
|
|
46
47
|
Reminder:
|
|
47
|
-
<StyledLink
|
|
48
|
-
{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
48
|
+
<StyledLink
|
|
49
|
+
onClick={() => handleClick(data.id)}
|
|
50
|
+
$disable={isClientPortal || false}
|
|
51
|
+
>
|
|
52
|
+
{' '}
|
|
53
|
+
{data?.reference || 'NA'}{' '}
|
|
54
|
+
</StyledLink>
|
|
55
|
+
(Due -{' '}
|
|
56
|
+
{`${formatUtcToLocal(data?.due_datetime)?.date} ${
|
|
57
|
+
formatUtcToLocal(data?.due_datetime)?.time
|
|
53
58
|
}`}
|
|
54
59
|
), Assigned to: {data?.assigned_to} Completed On:{' '}
|
|
55
|
-
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
{`${formatUtcToLocal(data?.completed_at)?.date} ${
|
|
61
|
+
formatUtcToLocal(data?.completed_at)?.time
|
|
62
|
+
}`}
|
|
63
|
+
, By: {data?.completed_by}
|
|
59
64
|
</StyledTitle>
|
|
60
65
|
</>
|
|
61
66
|
}
|
|
@@ -79,12 +84,14 @@ const StyledTitle = styled.span<{ color: string }>`
|
|
|
79
84
|
font-weight: 600;
|
|
80
85
|
`;
|
|
81
86
|
|
|
82
|
-
const StyledLink = styled.span
|
|
87
|
+
const StyledLink = styled.span<{ $disable: boolean }>`
|
|
83
88
|
color: var(--contextual-blue, #6396e5);
|
|
84
89
|
font-family: Roboto;
|
|
85
90
|
font-size: 14px;
|
|
86
91
|
font-style: normal;
|
|
87
92
|
font-weight: 600;
|
|
93
|
+
cursor: ${props => (props?.$disable ? 'auto' : 'pointer')};
|
|
94
|
+
${props => props?.$disable && `pointer-events: none;`};
|
|
88
95
|
`;
|
|
89
96
|
|
|
90
97
|
export default ReminderTemplate;
|
|
@@ -22,8 +22,15 @@ import {
|
|
|
22
22
|
useAllOrderStatus,
|
|
23
23
|
} from '../order-actions/store';
|
|
24
24
|
import { useParams, useSearchParams } from 'react-router-dom';
|
|
25
|
+
import { useClientPortal } from '../../store';
|
|
25
26
|
import { Skeleton } from 'antd';
|
|
26
|
-
|
|
27
|
+
type ReminderResponse = {
|
|
28
|
+
data: ApiResponse[];
|
|
29
|
+
stats_count: {
|
|
30
|
+
pending: number;
|
|
31
|
+
overdue: number;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
27
34
|
interface ApiResponse {
|
|
28
35
|
message: string;
|
|
29
36
|
code: number;
|
|
@@ -45,7 +52,7 @@ function Notification() {
|
|
|
45
52
|
const [closedReminders, setCloseReminders] = useState([]);
|
|
46
53
|
const [activeTasks, setActiveTasks] = useState([]);
|
|
47
54
|
const [closedTasks, setCloseTasks] = useState([]);
|
|
48
|
-
const [idOfRoute
|
|
55
|
+
const [idOfRoute] = useRouteId();
|
|
49
56
|
const [, setStatusVal] = useAllOrderStatus();
|
|
50
57
|
const [searchParams] = useSearchParams();
|
|
51
58
|
const [orderAlertsData, setOrderAlertsData] = useOrderAlertsData();
|
|
@@ -53,6 +60,7 @@ function Notification() {
|
|
|
53
60
|
const { id } = useParams();
|
|
54
61
|
const [orderId, setOrderId] = useOrderId();
|
|
55
62
|
const routeId = orderData?.order_routes?.route_id;
|
|
63
|
+
const [isClientPortal] = useClientPortal();
|
|
56
64
|
|
|
57
65
|
useEffect(() => {
|
|
58
66
|
if (orderIdParams) {
|
|
@@ -74,8 +82,12 @@ function Notification() {
|
|
|
74
82
|
endpoint: `/v1/task/`,
|
|
75
83
|
method: 'GET',
|
|
76
84
|
pagination: { is_pagination: false },
|
|
77
|
-
filters:
|
|
78
|
-
|
|
85
|
+
filters: isClientPortal
|
|
86
|
+
? [
|
|
87
|
+
{ field: 'is_private', op: '=', value: 'false' },
|
|
88
|
+
{ field: 'order_id', op: '=', value: orderId },
|
|
89
|
+
]
|
|
90
|
+
: [{ field: 'order_id', op: '=', value: orderId }],
|
|
79
91
|
});
|
|
80
92
|
|
|
81
93
|
//reminder get
|
|
@@ -83,16 +95,20 @@ function Notification() {
|
|
|
83
95
|
data: fetchedReminderData,
|
|
84
96
|
loading: reminderLoading,
|
|
85
97
|
fetchData: callReminderApi,
|
|
86
|
-
} = useAxios<{
|
|
87
|
-
data: ApiResponse[];
|
|
88
|
-
}>({
|
|
98
|
+
} = useAxios<ReminderResponse>({
|
|
89
99
|
endpoint: `/v1/task/reminder/get/`,
|
|
90
100
|
method: 'GET',
|
|
91
101
|
pagination: { is_pagination: false },
|
|
92
102
|
filters: [{ field: 'order_id', op: '=', value: orderId }],
|
|
93
|
-
showLoader: false,
|
|
94
103
|
});
|
|
95
104
|
|
|
105
|
+
//reminder data set
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
if (fetchedReminderData && fetchedReminderData?.data) {
|
|
108
|
+
setReminderNotifyData(fetchedReminderData?.data);
|
|
109
|
+
}
|
|
110
|
+
}, [fetchedReminderData]);
|
|
111
|
+
|
|
96
112
|
useEffect(() => {
|
|
97
113
|
setStatusVal(orderData?.status_value);
|
|
98
114
|
}, [orderData?.status_value]);
|
|
@@ -110,29 +126,18 @@ function Notification() {
|
|
|
110
126
|
}
|
|
111
127
|
}, [unresolvedLoading, fetchedUnresolvedData]);
|
|
112
128
|
|
|
113
|
-
//reminder data set
|
|
114
|
-
useEffect(() => {
|
|
115
|
-
if (fetchedReminderData && fetchedReminderData?.data) {
|
|
116
|
-
setReminderNotifyData(fetchedReminderData?.data);
|
|
117
|
-
}
|
|
118
|
-
}, [reminderLoading]);
|
|
119
|
-
|
|
120
129
|
// Route API calling...
|
|
121
130
|
const { data: fetchedData, fetchData: fetchRoute } = useAxios<{
|
|
122
131
|
data: ApiResponse[];
|
|
123
132
|
}>({
|
|
124
133
|
endpoint: `route/${routeId}`,
|
|
125
134
|
method: 'GET',
|
|
126
|
-
showLoader: false,
|
|
127
135
|
});
|
|
128
136
|
|
|
129
137
|
useEffect(() => {
|
|
130
138
|
if (idOfRoute !== null && idOfRoute !== undefined) {
|
|
131
139
|
fetchRoute();
|
|
132
140
|
}
|
|
133
|
-
return () => {
|
|
134
|
-
setRouteId(null);
|
|
135
|
-
};
|
|
136
141
|
}, [idOfRoute]);
|
|
137
142
|
|
|
138
143
|
const {
|
|
@@ -144,7 +149,6 @@ function Notification() {
|
|
|
144
149
|
}>({
|
|
145
150
|
endpoint: `v1/orders/alerts/?order_id=${orderId}`,
|
|
146
151
|
method: 'GET',
|
|
147
|
-
showLoader: false,
|
|
148
152
|
});
|
|
149
153
|
|
|
150
154
|
useEffect(() => {
|
|
@@ -158,7 +162,7 @@ function Notification() {
|
|
|
158
162
|
if (orderId == null) return;
|
|
159
163
|
|
|
160
164
|
try {
|
|
161
|
-
await callReminderApi();
|
|
165
|
+
!isClientPortal && (await callReminderApi());
|
|
162
166
|
await callUnresolvedTaskApi();
|
|
163
167
|
await callOrderAlertsApi();
|
|
164
168
|
} catch (error) {
|
|
@@ -224,7 +228,6 @@ function Notification() {
|
|
|
224
228
|
const totalClosedCount =
|
|
225
229
|
closedTasks?.filter((item: any) => item.status === 'SD')?.length +
|
|
226
230
|
closedReminders?.length;
|
|
227
|
-
console.log(unresolvedLoading, 'unresolved', reminderLoading, 'reminder');
|
|
228
231
|
|
|
229
232
|
return (
|
|
230
233
|
<>
|
|
@@ -252,9 +255,79 @@ function Notification() {
|
|
|
252
255
|
</TabsData>
|
|
253
256
|
</Container>
|
|
254
257
|
{unresolvedLoading || reminderLoading || alertsApiLoading ? (
|
|
255
|
-
|
|
256
|
-
<
|
|
257
|
-
|
|
258
|
+
<>
|
|
259
|
+
<div
|
|
260
|
+
style={{
|
|
261
|
+
display: 'flex',
|
|
262
|
+
alignItems: 'center',
|
|
263
|
+
gap: 12,
|
|
264
|
+
}}
|
|
265
|
+
>
|
|
266
|
+
<Skeleton.Avatar active size="small" shape="circle" />
|
|
267
|
+
<Skeleton.Input
|
|
268
|
+
active
|
|
269
|
+
style={{
|
|
270
|
+
width: '100%',
|
|
271
|
+
height: 12,
|
|
272
|
+
borderRadius: 4,
|
|
273
|
+
}}
|
|
274
|
+
/>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<div
|
|
278
|
+
style={{
|
|
279
|
+
display: 'flex',
|
|
280
|
+
alignItems: 'center',
|
|
281
|
+
gap: 12,
|
|
282
|
+
}}
|
|
283
|
+
>
|
|
284
|
+
<Skeleton.Avatar active size="small" shape="circle" />
|
|
285
|
+
<Skeleton.Input
|
|
286
|
+
active
|
|
287
|
+
style={{
|
|
288
|
+
width: '100%',
|
|
289
|
+
height: 12,
|
|
290
|
+
borderRadius: 4,
|
|
291
|
+
}}
|
|
292
|
+
/>
|
|
293
|
+
</div>
|
|
294
|
+
|
|
295
|
+
<div
|
|
296
|
+
style={{
|
|
297
|
+
display: 'flex',
|
|
298
|
+
alignItems: 'center',
|
|
299
|
+
gap: 12,
|
|
300
|
+
}}
|
|
301
|
+
>
|
|
302
|
+
<Skeleton.Avatar active size="small" shape="circle" />
|
|
303
|
+
<Skeleton.Input
|
|
304
|
+
active
|
|
305
|
+
style={{
|
|
306
|
+
width: '100%',
|
|
307
|
+
height: 12,
|
|
308
|
+
borderRadius: 4,
|
|
309
|
+
}}
|
|
310
|
+
/>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<div
|
|
314
|
+
style={{
|
|
315
|
+
display: 'flex',
|
|
316
|
+
alignItems: 'center',
|
|
317
|
+
gap: 12,
|
|
318
|
+
}}
|
|
319
|
+
>
|
|
320
|
+
<Skeleton.Avatar active size="small" shape="circle" />
|
|
321
|
+
<Skeleton.Input
|
|
322
|
+
active
|
|
323
|
+
style={{
|
|
324
|
+
width: '100%',
|
|
325
|
+
height: 12,
|
|
326
|
+
borderRadius: 4,
|
|
327
|
+
}}
|
|
328
|
+
/>
|
|
329
|
+
</div>
|
|
330
|
+
</>
|
|
258
331
|
) : taskData?.length > 0 ||
|
|
259
332
|
reminderNotifyData?.length > 0 ||
|
|
260
333
|
orderData ? (
|
|
@@ -285,32 +358,6 @@ const Container = styled.div`
|
|
|
285
358
|
border-bottom: 1px solid #ccc;
|
|
286
359
|
`;
|
|
287
360
|
|
|
288
|
-
const Loader = styled.div`
|
|
289
|
-
align-items: center;
|
|
290
|
-
justify-content: center;
|
|
291
|
-
display: flex;
|
|
292
|
-
flex-direction: column;
|
|
293
|
-
gap: 10px;
|
|
294
|
-
`;
|
|
295
|
-
|
|
296
|
-
// const Spinner = styled.div`
|
|
297
|
-
// border: 4px solid rgba(0, 0, 0, 0.1);
|
|
298
|
-
// border-left-color: #3a3630;
|
|
299
|
-
// border-radius: 50%;
|
|
300
|
-
// width: 40px;
|
|
301
|
-
// height: 40px;
|
|
302
|
-
// animation: spin 1s linear infinite;
|
|
303
|
-
|
|
304
|
-
// @keyframes spin {
|
|
305
|
-
// 0% {
|
|
306
|
-
// transform: rotate(0deg);
|
|
307
|
-
// }
|
|
308
|
-
// 100% {
|
|
309
|
-
// transform: rotate(360deg);
|
|
310
|
-
// }
|
|
311
|
-
// }
|
|
312
|
-
// `;
|
|
313
|
-
|
|
314
361
|
const FlagContainer = styled.div`
|
|
315
362
|
padding: 8px;
|
|
316
363
|
background-color: #3a3630;
|
|
@@ -374,7 +421,7 @@ const Label = styled(SectionHeader)`
|
|
|
374
421
|
|
|
375
422
|
const TabsWrapper = styled.div`
|
|
376
423
|
/* min-height: 200px; */
|
|
377
|
-
max-height:
|
|
424
|
+
max-height: 350px;
|
|
378
425
|
overflow-y: auto;
|
|
379
426
|
scrollbar-width: none;
|
|
380
427
|
-ms-overflow-style: none;
|
|
@@ -396,11 +443,4 @@ const TabsWrapper = styled.div`
|
|
|
396
443
|
}
|
|
397
444
|
`;
|
|
398
445
|
|
|
399
|
-
// const Text = styled.div`
|
|
400
|
-
// color: var(--tonal-brown-651, #6a7378);
|
|
401
|
-
// font-family: Lato;
|
|
402
|
-
// font-size: 13px;
|
|
403
|
-
// font-style: normal;
|
|
404
|
-
// font-weight: 600;
|
|
405
|
-
// `;
|
|
406
446
|
export default Notification;
|