@riosst100/pwa-marketplace 2.9.6 → 2.9.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.
- package/package.json +1 -1
- package/src/componentOverrideMapping.js +2 -1
- package/src/components/FilterContent/filterContent.js +4 -0
- package/src/components/LiveChat/chatContent.js +28 -13
- package/src/components/OrderDetail/orderDetail.js +86 -26
- package/src/components/RMAPage/RMACreate.js +107 -116
- package/src/components/RMAPage/RMADetail.js +151 -114
- package/src/components/RMAPage/components/productItem.js +32 -7
- package/src/components/RMAPage/orderRow.js +28 -17
- package/src/components/ShopBy/shopBy.js +3 -0
- package/src/components/commons/Select/index.js +6 -2
- package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js +54 -0
- package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js +2 -4
- package/src/overwrites/peregrine/lib/talons/ProductFullDetail/productReview.gql.js +89 -0
- package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js +72 -3
- package/src/overwrites/peregrine/lib/talons/RMAPage/rmaPage.gql.js +33 -1
- package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js +5 -1
- package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js +2 -1
- package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js +4 -3
- package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js +97 -23
- package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js +0 -2
- package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js +29 -0
- package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js +39 -40
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/modalFormReview.js +102 -95
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productReview.js +111 -70
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +19 -3
- package/src/talons/RMAPage/useRmaPage.js +40 -6
package/package.json
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
module.exports = componentOverrideMapping = {
|
|
2
|
+
[`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js',
|
|
3
|
+
[`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
|
|
2
4
|
[`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',
|
|
3
5
|
[`@magento/venia-ui/lib/components/ToastContainer/toast.module.css`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ToastContainer/toast.module.css',
|
|
4
6
|
[`@magento/venia-ui/lib/components/ToastContainer/toastContainer.module.css`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ToastContainer/toastContainer.module.css',
|
|
@@ -87,7 +89,6 @@ module.exports = componentOverrideMapping = {
|
|
|
87
89
|
[`@magento/peregrine/lib/talons/ProductOptions/useTile.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useTile.js',
|
|
88
90
|
[`@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js',
|
|
89
91
|
[`@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js',
|
|
90
|
-
// Added overrides to fix TypeError in useOrderRow and to ensure required GQL queries are present
|
|
91
92
|
[`@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js',
|
|
92
93
|
[`@magento/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js'
|
|
93
94
|
};
|
|
@@ -31,6 +31,10 @@ const FilterContent = props => {
|
|
|
31
31
|
const [searchQuery, setSearchQuery] = useState('');
|
|
32
32
|
|
|
33
33
|
const { search } = useLocation();
|
|
34
|
+
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
window.scrollTo(0, 0);
|
|
37
|
+
}, []);
|
|
34
38
|
|
|
35
39
|
const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
|
|
36
40
|
sortText: 'All (A-Z)',
|
|
@@ -1,26 +1,42 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef, useEffect } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
4
|
const chatContent = (props) => {
|
|
5
5
|
const { chatData } = props;
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
|
|
8
|
+
const orderedChatData = [...chatData].reverse();
|
|
9
|
+
const messagesContainerRef = useRef(null);
|
|
10
|
+
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (messagesContainerRef.current) {
|
|
13
|
+
messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
|
|
14
|
+
}
|
|
15
|
+
}, [orderedChatData]);
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<>
|
|
19
|
+
<div
|
|
20
|
+
ref={messagesContainerRef}
|
|
21
|
+
className='flex flex-col gap-2 w-full overflow-y-auto max-h-[400px]'
|
|
22
|
+
>
|
|
23
|
+
{orderedChatData.map((chat, idx) => (
|
|
12
24
|
<div
|
|
25
|
+
key={idx}
|
|
13
26
|
className={cn(
|
|
14
27
|
'w-fit max-w-[70%] flex flex-col gap-1',
|
|
15
28
|
chat.type === 'seller' ? 'self-start ' : 'self-end items-end',
|
|
16
|
-
|
|
17
29
|
)}
|
|
18
30
|
>
|
|
31
|
+
{chat.senderName && (
|
|
32
|
+
<span className='text-[12px] text-gray-500 font-semibold mb-[-2px]'>
|
|
33
|
+
{chat.senderName}
|
|
34
|
+
</span>
|
|
35
|
+
)}
|
|
19
36
|
<div
|
|
20
37
|
className={cn(
|
|
21
38
|
'w-fit py-2 px-3 rounded-md flex flex-col',
|
|
22
39
|
chat.type === 'seller' ? 'bg-gray-150 rounded-tl-none' : ' bg-[#D9D9D9] rounded-tr-none',
|
|
23
|
-
|
|
24
40
|
)}
|
|
25
41
|
>
|
|
26
42
|
{chat.message}
|
|
@@ -29,11 +45,10 @@ const chatContent = (props) => {
|
|
|
29
45
|
{chat.timeStamp}
|
|
30
46
|
</span>
|
|
31
47
|
</div>
|
|
32
|
-
)
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
)
|
|
48
|
+
))}
|
|
49
|
+
</div>
|
|
50
|
+
</>
|
|
51
|
+
)
|
|
37
52
|
}
|
|
38
53
|
|
|
39
54
|
export default chatContent
|
|
@@ -3,11 +3,11 @@ import { useIntl } from 'react-intl';
|
|
|
3
3
|
import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
|
|
4
4
|
import Button from '@magento/venia-ui/lib/components/Button';
|
|
5
5
|
import cn from 'classnames';
|
|
6
|
-
import { Printer } from 'iconsax-react';
|
|
6
|
+
import { Printer, ConvertCard } from 'iconsax-react';
|
|
7
7
|
import ItemsOrdered from './components/itemsOrdered';
|
|
8
8
|
import RMAList from './components/rmaList';
|
|
9
9
|
import useRmaPage from '@riosst100/pwa-marketplace/src/talons/RMAPage/useRmaPage';
|
|
10
|
-
import { useLocation, useParams } from 'react-router-dom';
|
|
10
|
+
import { useLocation, useParams, useHistory } from 'react-router-dom';
|
|
11
11
|
import useOrderHistoryPage from '@riosst100/pwa-marketplace/src/talons/OrderHistoryPage/useOrderHistoryPage';
|
|
12
12
|
|
|
13
13
|
const OrderDetail = (props) => {
|
|
@@ -27,6 +27,45 @@ const OrderDetail = (props) => {
|
|
|
27
27
|
|
|
28
28
|
// Keep a stable local state for order to avoid it turning undefined on re-renders
|
|
29
29
|
const [order, setOrder] = useState(() => props.order || location.state?.order || null);
|
|
30
|
+
const history = useHistory();
|
|
31
|
+
// Button Return Items: tampil jika status Complete/Delivered
|
|
32
|
+
const isReturnAllowed = useMemo(() => {
|
|
33
|
+
if (!order) return false;
|
|
34
|
+
const status = order.status;
|
|
35
|
+
if (!status) return false;
|
|
36
|
+
return (
|
|
37
|
+
status === 'Complete' ||
|
|
38
|
+
status.toLowerCase() === 'delivered' // antisipasi backend bisa lowercase
|
|
39
|
+
);
|
|
40
|
+
}, [order]);
|
|
41
|
+
|
|
42
|
+
// Handler sama seperti orderRow
|
|
43
|
+
const handleNewReturn = useCallback(() => {
|
|
44
|
+
if (!order) return;
|
|
45
|
+
let orderWithImages = { ...order };
|
|
46
|
+
if (orderWithImages.items && Array.isArray(orderWithImages.items)) {
|
|
47
|
+
orderWithImages = {
|
|
48
|
+
...orderWithImages,
|
|
49
|
+
items: orderWithImages.items.map(it => {
|
|
50
|
+
let product_image = '';
|
|
51
|
+
if (typeof it.product_image_url === 'string' && it.product_image_url.trim() !== '') {
|
|
52
|
+
product_image = it.product_image_url;
|
|
53
|
+
}
|
|
54
|
+
return {
|
|
55
|
+
...it,
|
|
56
|
+
product_image
|
|
57
|
+
};
|
|
58
|
+
})
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
try {
|
|
62
|
+
localStorage.setItem('rma_order', JSON.stringify(orderWithImages));
|
|
63
|
+
} catch (e) {}
|
|
64
|
+
history.push({
|
|
65
|
+
pathname: `/return/create/${order.number}`,
|
|
66
|
+
state: { order: orderWithImages }
|
|
67
|
+
});
|
|
68
|
+
}, [order, history]);
|
|
30
69
|
|
|
31
70
|
// Fallback: fetch order by orderNumber from order history if not found
|
|
32
71
|
const { orders } = useOrderHistoryPage();
|
|
@@ -149,31 +188,52 @@ const OrderDetail = (props) => {
|
|
|
149
188
|
</div>
|
|
150
189
|
</div>
|
|
151
190
|
<div className='flex flex-col md_flex-row gap-x-4 justify-end no-print'>
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
191
|
+
<div className='flex flex-row gap-x-3'>
|
|
192
|
+
<Button
|
|
193
|
+
priority='high'
|
|
194
|
+
classes={{
|
|
195
|
+
content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
|
|
196
|
+
}}
|
|
197
|
+
className={cn(
|
|
198
|
+
"bg-white px-6 py-2 rounded-md text-gray-900 hover_!text-white border border-solid",
|
|
199
|
+
"border-gray-900 focus-visible_outline-none hover_bg-gray-900 min-h-[40px]"
|
|
200
|
+
)}
|
|
201
|
+
onClick={handlePrint}
|
|
202
|
+
aria-label={formatMessage({ id: 'order.printInvoices', defaultMessage: 'Print Invoices' })}
|
|
203
|
+
>
|
|
204
|
+
<span className='flex gap-x-3 justify-center group-hover_!text-white'>
|
|
205
|
+
<Printer
|
|
206
|
+
size="24"
|
|
207
|
+
className=''
|
|
208
|
+
/>
|
|
209
|
+
{
|
|
210
|
+
formatMessage({
|
|
211
|
+
id: 'order.PrintInvoices',
|
|
212
|
+
defaultMessage: 'Print Invoices'
|
|
213
|
+
})
|
|
214
|
+
}
|
|
215
|
+
</span>
|
|
216
|
+
</Button>
|
|
217
|
+
{isReturnAllowed && (
|
|
218
|
+
<Button
|
|
219
|
+
priority='high'
|
|
220
|
+
classes={{
|
|
221
|
+
content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
|
|
222
|
+
}}
|
|
223
|
+
className={cn(
|
|
224
|
+
"bg-blue-700 px-6 py-2 rounded-md text-white border border-blue-700 min-h-[40px]",
|
|
225
|
+
"transition-all duration-300 ease-in-out flex items-center gap-2"
|
|
226
|
+
)}
|
|
227
|
+
onClick={handleNewReturn}
|
|
228
|
+
aria-label={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
|
|
229
|
+
>
|
|
230
|
+
<span className='flex gap-x-3 justify-center'>
|
|
231
|
+
<ConvertCard size={22} color="#fff" />
|
|
232
|
+
{formatMessage({ id: 'orderRow.ReturnItems', defaultMessage: 'Return Items' })}
|
|
233
|
+
</span>
|
|
234
|
+
</Button>
|
|
160
235
|
)}
|
|
161
|
-
|
|
162
|
-
aria-label={formatMessage({ id: 'order.printInvoices', defaultMessage: 'Print Invoices' })}
|
|
163
|
-
>
|
|
164
|
-
<span className='flex gap-x-3 justify-center group-hover_!text-white'>
|
|
165
|
-
<Printer
|
|
166
|
-
size="24"
|
|
167
|
-
className=''
|
|
168
|
-
/>
|
|
169
|
-
{
|
|
170
|
-
formatMessage({
|
|
171
|
-
id: 'order.PrintInvoices',
|
|
172
|
-
defaultMessage: 'Print Invoices'
|
|
173
|
-
})
|
|
174
|
-
}
|
|
175
|
-
</span>
|
|
176
|
-
</Button>
|
|
236
|
+
</div>
|
|
177
237
|
</div>
|
|
178
238
|
</div>
|
|
179
239
|
<div className="block block-order-details-view">
|
|
@@ -60,15 +60,11 @@ const RMACreate = () => {
|
|
|
60
60
|
// Set default values when checked true
|
|
61
61
|
let defaults = {};
|
|
62
62
|
if (checked) {
|
|
63
|
-
const cfg = rmaConfigData && rmaConfigData.lofmpRmaConfigurations;
|
|
64
|
-
const firstReason = cfg && cfg.reasons && cfg.reasons.length > 0 ? cfg.reasons[0].id : null;
|
|
65
|
-
const firstCondition = cfg && cfg.conditions && cfg.conditions.length > 0 ? cfg.conditions[0].id : null;
|
|
66
|
-
const firstResolution = cfg && cfg.resolutions && cfg.resolutions.length > 0 ? cfg.resolutions[0].id : null;
|
|
67
63
|
defaults = {
|
|
68
64
|
qty_requested: current.qty_requested != null ? current.qty_requested : 1,
|
|
69
|
-
reason_id:
|
|
70
|
-
condition_id:
|
|
71
|
-
resolution_id:
|
|
65
|
+
reason_id: '',
|
|
66
|
+
condition_id: '',
|
|
67
|
+
resolution_id: ''
|
|
72
68
|
};
|
|
73
69
|
}
|
|
74
70
|
return {
|
|
@@ -82,6 +78,20 @@ const RMACreate = () => {
|
|
|
82
78
|
});
|
|
83
79
|
};
|
|
84
80
|
|
|
81
|
+
|
|
82
|
+
// Check if at least one item is checked and all checked items have required fields
|
|
83
|
+
const checkedItems = Object.values(itemReturnState).filter(state => state && state.checked);
|
|
84
|
+
const isAllCheckedItemsValid =
|
|
85
|
+
checkedItems.length > 0 &&
|
|
86
|
+
checkedItems.every(state => {
|
|
87
|
+
return (
|
|
88
|
+
state.qty_requested &&
|
|
89
|
+
state.reason_id !== undefined && state.reason_id !== null && state.reason_id !== '' && state.reason_id !== 0 && state.reason_id !== "" &&
|
|
90
|
+
state.condition_id !== undefined && state.condition_id !== null && state.condition_id !== '' && state.condition_id !== 0 && state.condition_id !== "" &&
|
|
91
|
+
state.resolution_id !== undefined && state.resolution_id !== null && state.resolution_id !== '' && state.resolution_id !== 0 && state.resolution_id !== ""
|
|
92
|
+
);
|
|
93
|
+
});
|
|
94
|
+
|
|
85
95
|
// Build input mutation sesuai struktur backend
|
|
86
96
|
const buildRmaInput = () => {
|
|
87
97
|
if (!order || !order.items) return null;
|
|
@@ -151,16 +161,19 @@ const RMACreate = () => {
|
|
|
151
161
|
const message = 'RMA request created successfully!';
|
|
152
162
|
setSubmitSuccess(message);
|
|
153
163
|
addToast({
|
|
154
|
-
type: '
|
|
155
|
-
icon: <CheckCircleIcon size={18} />,
|
|
164
|
+
type: 'success',
|
|
165
|
+
icon: <CheckCircleIcon size={18} />,
|
|
156
166
|
message,
|
|
157
167
|
dismissable: true,
|
|
158
168
|
timeout: 4000
|
|
159
169
|
});
|
|
160
|
-
// Redirect to RMA
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
170
|
+
// Redirect to RMA detail page after brief delay
|
|
171
|
+
const rmaId = payload.rma_id || (payload.rma && payload.rma.id);
|
|
172
|
+
if (rmaId) {
|
|
173
|
+
setTimeout(() => {
|
|
174
|
+
history.push(`/return/view/${rmaId}`);
|
|
175
|
+
}, 400);
|
|
176
|
+
}
|
|
164
177
|
} else {
|
|
165
178
|
const message = (payload && payload.message) || 'Failed to create RMA.';
|
|
166
179
|
setSubmitError(message);
|
|
@@ -176,104 +189,79 @@ const RMACreate = () => {
|
|
|
176
189
|
const { formatMessage } = useIntl();
|
|
177
190
|
const PAGE_TITLE = formatMessage({
|
|
178
191
|
id: 'Quotes.pageTitleTextRMACreate',
|
|
179
|
-
defaultMessage: 'New Return'
|
|
192
|
+
defaultMessage: 'New Return For Order'
|
|
180
193
|
});
|
|
181
194
|
|
|
182
|
-
const dummyChat = [
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
]
|
|
195
|
+
// const dummyChat = [
|
|
196
|
+
// {
|
|
197
|
+
// "message": "May I help you",
|
|
198
|
+
// "type": "seller",
|
|
199
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
200
|
+
// },
|
|
201
|
+
// {
|
|
202
|
+
// "message": "Yes",
|
|
203
|
+
// "type": "buyer",
|
|
204
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
205
|
+
// },
|
|
206
|
+
// {
|
|
207
|
+
// "message": "can i get a discount",
|
|
208
|
+
// "type": "buyer",
|
|
209
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
210
|
+
// },
|
|
211
|
+
// {
|
|
212
|
+
// "message": "you can redeem this code 'JunePlay'",
|
|
213
|
+
// "type": "seller",
|
|
214
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
215
|
+
// },
|
|
216
|
+
// {
|
|
217
|
+
// "message": "or this code 'collectfest'",
|
|
218
|
+
// "type": "seller",
|
|
219
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
220
|
+
// },
|
|
221
|
+
// {
|
|
222
|
+
// "message": "May I help you",
|
|
223
|
+
// "type": "seller",
|
|
224
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
225
|
+
// },
|
|
226
|
+
// {
|
|
227
|
+
// "message": "Yes",
|
|
228
|
+
// "type": "buyer",
|
|
229
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
230
|
+
// },
|
|
231
|
+
// {
|
|
232
|
+
// "message": "can i get a discount",
|
|
233
|
+
// "type": "buyer",
|
|
234
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
235
|
+
// },
|
|
236
|
+
// {
|
|
237
|
+
// "message": "you can redeem this code 'JunePlay'",
|
|
238
|
+
// "type": "seller",
|
|
239
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
240
|
+
// },
|
|
241
|
+
// {
|
|
242
|
+
// "message": "or this code 'collectfest'",
|
|
243
|
+
// "type": "seller",
|
|
244
|
+
// "timeStamp": "03-06-2024 2:59 pm"
|
|
245
|
+
// },
|
|
246
|
+
// ]
|
|
234
247
|
|
|
235
248
|
return (
|
|
236
249
|
<div className='relative grid gap-y-md'>
|
|
237
250
|
<StoreTitle>{PAGE_TITLE}</StoreTitle>
|
|
238
251
|
<div aria-live="polite" className="text-xl font-medium text-left">
|
|
239
|
-
{PAGE_TITLE} {order ? `-
|
|
252
|
+
{PAGE_TITLE} {order ? `- #${order.number || order.increment_id}` : ''}
|
|
240
253
|
</div>
|
|
241
254
|
<div className='block relative'>
|
|
242
255
|
<div aria-live="polite" className="text-lg font-medium text-left mb-4">
|
|
243
256
|
{
|
|
244
257
|
formatMessage({
|
|
245
258
|
id: 'RMA.requestReturnInformation',
|
|
246
|
-
defaultMessage: '
|
|
259
|
+
defaultMessage: 'Order Information'
|
|
247
260
|
})
|
|
248
261
|
}
|
|
249
262
|
</div>
|
|
250
263
|
<div className='rounded-md border border-gray-100 px-4 py-6 flex flex-col md_flex-row justify-between gap-x-10'>
|
|
251
264
|
<div className='flex flex-col gap-y-4 w-full mb-4 md_0 md_w-6/12'>
|
|
252
|
-
<div className='block p-2 -ml-2 -mr-2 bg-[#F1EFF6] rounded-md'>
|
|
253
|
-
<p className='text-[13px] text-blue-700 flex justify-between'>
|
|
254
|
-
<span className='font-medium block'>
|
|
255
|
-
{
|
|
256
|
-
formatMessage({
|
|
257
|
-
id: 'RMA.Status',
|
|
258
|
-
defaultMessage: 'Status Order'
|
|
259
|
-
})
|
|
260
|
-
}
|
|
261
|
-
</span>
|
|
262
|
-
<span className='font-medium block text-blue-700'>
|
|
263
|
-
{order?.status}
|
|
264
|
-
</span>
|
|
265
|
-
</p>
|
|
266
|
-
</div>
|
|
267
|
-
<div className='block'>
|
|
268
|
-
<p className='text-[13px] text-colorDefault flex justify-between'>
|
|
269
|
-
<span className='font-medium block'>
|
|
270
|
-
{formatMessage({ id: 'RMA.RMANumber', defaultMessage: 'RMA' })}
|
|
271
|
-
</span>
|
|
272
|
-
<span className='font-normal block'>
|
|
273
|
-
{order ? order.increment_id || order.number : '-'}
|
|
274
|
-
</span>
|
|
275
|
-
</p>
|
|
276
|
-
</div>
|
|
277
265
|
<div className='block'>
|
|
278
266
|
<p className='text-[13px] text-colorDefault flex justify-between'>
|
|
279
267
|
<span className='font-medium block'>
|
|
@@ -329,8 +317,11 @@ const RMACreate = () => {
|
|
|
329
317
|
</div>
|
|
330
318
|
</div>
|
|
331
319
|
<div className=' flex flex-col'>
|
|
332
|
-
<div aria-live="polite" className="text-lg font-medium text-left mb-
|
|
333
|
-
Items
|
|
320
|
+
<div aria-live="polite" className="text-lg font-medium text-left mb-1">
|
|
321
|
+
Select Items to Return
|
|
322
|
+
</div>
|
|
323
|
+
<div className="text-[13px] text-gray-500 mb-3">
|
|
324
|
+
Please check the items you want to return.
|
|
334
325
|
</div>
|
|
335
326
|
<div className='border-t border-gray-100 py-4 flex flex-col gap-y-4'>
|
|
336
327
|
{order && order.items && order.items.length > 0 ? (
|
|
@@ -351,7 +342,26 @@ const RMACreate = () => {
|
|
|
351
342
|
)}
|
|
352
343
|
</div>
|
|
353
344
|
</div>
|
|
354
|
-
<div className='
|
|
345
|
+
<div className='flex justify-end flex-row mb-4'>
|
|
346
|
+
<Button
|
|
347
|
+
priority='high'
|
|
348
|
+
onClick={handleSubmit}
|
|
349
|
+
disabled={createRmaLoading || !isAllCheckedItemsValid}
|
|
350
|
+
className={cn(
|
|
351
|
+
'px-6 py-2 rounded-full text-white border flex items-center gap-2',
|
|
352
|
+
createRmaLoading || !isAllCheckedItemsValid
|
|
353
|
+
? 'bg-gray-400 border-gray-400 cursor-not-allowed'
|
|
354
|
+
: 'bg-blue-700 border-blue-700 hover_bg-blue-700 hover_border-blue-700',
|
|
355
|
+
'focus-visible_outline-none'
|
|
356
|
+
)}
|
|
357
|
+
>
|
|
358
|
+
{createRmaLoading && (
|
|
359
|
+
<span className="inline-block h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
360
|
+
)}
|
|
361
|
+
{createRmaLoading ? 'Submitting...' : 'Submit Return Request'}
|
|
362
|
+
</Button>
|
|
363
|
+
</div>
|
|
364
|
+
{/* <div className=' flex flex-col mb-10'>
|
|
355
365
|
<div aria-live="polite" className="text-lg font-medium text-left mb-4">
|
|
356
366
|
Messages
|
|
357
367
|
</div>
|
|
@@ -381,26 +391,7 @@ const RMACreate = () => {
|
|
|
381
391
|
</Button>
|
|
382
392
|
</div>
|
|
383
393
|
</div>
|
|
384
|
-
|
|
385
|
-
<Button
|
|
386
|
-
priority='high'
|
|
387
|
-
onClick={handleSubmit}
|
|
388
|
-
disabled={createRmaLoading}
|
|
389
|
-
className={cn(
|
|
390
|
-
'px-6 py-2 rounded-full text-white border flex items-center gap-2',
|
|
391
|
-
createRmaLoading
|
|
392
|
-
? 'bg-gray-400 border-gray-400 cursor-not-allowed'
|
|
393
|
-
: 'bg-blue-700 border-blue-700 hover_bg-blue-700 hover_border-blue-700',
|
|
394
|
-
'focus-visible_outline-none'
|
|
395
|
-
)}
|
|
396
|
-
>
|
|
397
|
-
{createRmaLoading && (
|
|
398
|
-
<span className="inline-block h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
399
|
-
)}
|
|
400
|
-
{createRmaLoading ? 'Submitting...' : 'Submit RMA Request'}
|
|
401
|
-
</Button>
|
|
402
|
-
</div>
|
|
403
|
-
</div>
|
|
394
|
+
</div> */}
|
|
404
395
|
<style jsx="true">
|
|
405
396
|
{`
|
|
406
397
|
.chat-container::-webkit-scrollbar {
|