@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
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { gql } from '@apollo/client';
|
|
2
|
+
|
|
3
|
+
const GET_PRODUCT_REVIEW_RATINGS_METADATA = gql`
|
|
4
|
+
query getProductReviewRatingsMetadata {
|
|
5
|
+
productReviewRatingsMetadata {
|
|
6
|
+
items {
|
|
7
|
+
id
|
|
8
|
+
name
|
|
9
|
+
values {
|
|
10
|
+
value
|
|
11
|
+
value_id
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
const CREATE_PRODUCT_REVIEW = gql`
|
|
19
|
+
mutation CreateProductReview($input: CreateProductReviewInput!) {
|
|
20
|
+
createProductReview(input: $input) {
|
|
21
|
+
review {
|
|
22
|
+
average_rating
|
|
23
|
+
created_at
|
|
24
|
+
nickname
|
|
25
|
+
product {
|
|
26
|
+
uuid: uid
|
|
27
|
+
uid
|
|
28
|
+
name
|
|
29
|
+
sku
|
|
30
|
+
}
|
|
31
|
+
ratings_breakdown {
|
|
32
|
+
name
|
|
33
|
+
value
|
|
34
|
+
}
|
|
35
|
+
summary
|
|
36
|
+
text
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
`;
|
|
41
|
+
|
|
42
|
+
const GET_PRODUCT_REVIEWS = gql`
|
|
43
|
+
query getProductReviews($url_key: String) {
|
|
44
|
+
products(
|
|
45
|
+
filter: { url_key: { eq: $url_key } }
|
|
46
|
+
pageSize: 20
|
|
47
|
+
currentPage: 1
|
|
48
|
+
) {
|
|
49
|
+
items {
|
|
50
|
+
uid
|
|
51
|
+
rating_summary
|
|
52
|
+
review_count
|
|
53
|
+
reviews(pageSize: 20, currentPage: 1){
|
|
54
|
+
items {
|
|
55
|
+
average_rating
|
|
56
|
+
created_at
|
|
57
|
+
nickname
|
|
58
|
+
summary
|
|
59
|
+
text
|
|
60
|
+
product {
|
|
61
|
+
uid
|
|
62
|
+
name
|
|
63
|
+
sku
|
|
64
|
+
}
|
|
65
|
+
ratings_breakdown {
|
|
66
|
+
name
|
|
67
|
+
value
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
page_info {
|
|
71
|
+
total_pages
|
|
72
|
+
current_page
|
|
73
|
+
page_size
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
page_info {
|
|
78
|
+
total_pages
|
|
79
|
+
current_page
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
`;
|
|
84
|
+
|
|
85
|
+
export default {
|
|
86
|
+
getProductReviews: GET_PRODUCT_REVIEWS,
|
|
87
|
+
createProductReview: CREATE_PRODUCT_REVIEW,
|
|
88
|
+
getProductReviewRatingsMetadata: GET_PRODUCT_REVIEW_RATINGS_METADATA
|
|
89
|
+
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useCallback, useState, useMemo } from 'react';
|
|
2
|
+
import { useToasts } from '@magento/peregrine/lib';
|
|
2
3
|
import { useIntl } from 'react-intl';
|
|
3
4
|
import { useMutation, useQuery } from '@apollo/client';
|
|
4
5
|
import { useCartContext } from '@magento/peregrine/lib/context/cart';
|
|
@@ -11,6 +12,7 @@ import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/ut
|
|
|
11
12
|
import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
|
|
12
13
|
import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
|
|
13
14
|
import defaultOperations from '@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql';
|
|
15
|
+
import productReviewOperations from './productReview.gql';
|
|
14
16
|
import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
|
|
15
17
|
import { getOutOfStockVariants } from '@magento/peregrine/lib/util/getOutOfStockVariants';
|
|
16
18
|
|
|
@@ -334,12 +336,60 @@ export const useProductFullDetail = props => {
|
|
|
334
336
|
isPreview
|
|
335
337
|
} = props;
|
|
336
338
|
|
|
339
|
+
const [, { addToast }] = useToasts();
|
|
340
|
+
|
|
341
|
+
const { data: productReviewData, loading: loadingProductReview, error: errorProductReview, refetch: refetchProductReviews } = useQuery(
|
|
342
|
+
productReviewOperations.getProductReviews,
|
|
343
|
+
{
|
|
344
|
+
variables: { url_key: product?.url_key },
|
|
345
|
+
skip: !product?.url_key,
|
|
346
|
+
fetchPolicy: 'network-only'
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
|
|
350
|
+
// Query for ratings metadata
|
|
351
|
+
const { data: ratingsMetadataData, loading: loadingRatingsMetadata } = useQuery(
|
|
352
|
+
productReviewOperations.getProductReviewRatingsMetadata,
|
|
353
|
+
{ fetchPolicy: 'network-only' }
|
|
354
|
+
);
|
|
355
|
+
|
|
356
|
+
// Mutation for creating review (allow partial data with errors)
|
|
357
|
+
const [createProductReview, { loading: loadingCreateReview, error: errorCreateReview }] = useMutation(
|
|
358
|
+
productReviewOperations.createProductReview,
|
|
359
|
+
{ errorPolicy: 'all' }
|
|
360
|
+
);
|
|
361
|
+
|
|
362
|
+
// Handler for submitting review with robust toast handling
|
|
363
|
+
const handleSubmitReview = async (formValues) => {
|
|
364
|
+
try {
|
|
365
|
+
const result = await createProductReview({
|
|
366
|
+
variables: { input: formValues },
|
|
367
|
+
errorPolicy: 'all'
|
|
368
|
+
});
|
|
369
|
+
|
|
370
|
+
const gqlErrors = result?.errors || [];
|
|
371
|
+
const review = result?.data?.createProductReview?.review;
|
|
372
|
+
|
|
373
|
+
if (gqlErrors.length > 0 || !review) {
|
|
374
|
+
const message = gqlErrors[0]?.message || 'Failed to submit review!';
|
|
375
|
+
addToast({ type: 'error', message });
|
|
376
|
+
return { success: false, error: gqlErrors };
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
await refetchProductReviews();
|
|
380
|
+
addToast({ type: 'success', message: 'Review submitted successfully!' });
|
|
381
|
+
return { success: true };
|
|
382
|
+
} catch (e) {
|
|
383
|
+
addToast({ type: 'error', message: e?.message || 'Failed to submit review!' });
|
|
384
|
+
return { success: false, error: e };
|
|
385
|
+
}
|
|
386
|
+
};
|
|
387
|
+
|
|
337
388
|
const [, { dispatch }] = useEventingContext();
|
|
338
389
|
|
|
339
390
|
const hasDeprecatedOperationProp = !!(
|
|
340
391
|
addConfigurableProductToCartMutation || addSimpleProductToCartMutation
|
|
341
392
|
);
|
|
342
|
-
|
|
343
393
|
const operations = mergeOperations(defaultOperations, props.operations);
|
|
344
394
|
|
|
345
395
|
const productType = product.__typename;
|
|
@@ -347,7 +397,7 @@ export const useProductFullDetail = props => {
|
|
|
347
397
|
const isSupportedProductType = isSupported(productType);
|
|
348
398
|
|
|
349
399
|
const [{ cartId }] = useCartContext();
|
|
350
|
-
const [{ isSignedIn }] = useUserContext();
|
|
400
|
+
const [{ isSignedIn, currentUser }] = useUserContext();
|
|
351
401
|
const { formatMessage } = useIntl();
|
|
352
402
|
|
|
353
403
|
const { data: storeConfigData } = useQuery(
|
|
@@ -718,6 +768,16 @@ export const useProductFullDetail = props => {
|
|
|
718
768
|
storeConfig: storeConfigData ? storeConfigData.storeConfig : {}
|
|
719
769
|
};
|
|
720
770
|
|
|
771
|
+
const defaultNickname = useMemo(() => {
|
|
772
|
+
if (!currentUser) return '';
|
|
773
|
+
const first = currentUser.firstname || '';
|
|
774
|
+
const last = currentUser.lastname || '';
|
|
775
|
+
const full = `${first} ${last}`.trim();
|
|
776
|
+
if (full) return full;
|
|
777
|
+
const email = currentUser.email || '';
|
|
778
|
+
return email ? email.split('@')[0] : '';
|
|
779
|
+
}, [currentUser]);
|
|
780
|
+
|
|
721
781
|
return {
|
|
722
782
|
breadcrumbCategoryId,
|
|
723
783
|
errorMessage: derivedErrorMessage,
|
|
@@ -744,6 +804,15 @@ export const useProductFullDetail = props => {
|
|
|
744
804
|
customAttributes,
|
|
745
805
|
wishlistButtonProps,
|
|
746
806
|
wishlistItemOptions,
|
|
747
|
-
sellerDetails
|
|
807
|
+
sellerDetails,
|
|
808
|
+
productReviewData,
|
|
809
|
+
loadingProductReview,
|
|
810
|
+
errorProductReview,
|
|
811
|
+
ratingsMetadataData,
|
|
812
|
+
loadingRatingsMetadata,
|
|
813
|
+
handleSubmitReview,
|
|
814
|
+
loadingCreateReview,
|
|
815
|
+
errorCreateReview,
|
|
816
|
+
defaultNickname
|
|
748
817
|
};
|
|
749
818
|
};
|
|
@@ -42,6 +42,36 @@ const LofmpRmasFragment = gql`
|
|
|
42
42
|
}
|
|
43
43
|
`;
|
|
44
44
|
|
|
45
|
+
export const LOFMP_SEND_RMA_MESSAGE = gql`
|
|
46
|
+
mutation lofmpSendRmaMessage($input: SendMessageInput!) {
|
|
47
|
+
lofmpSendRmaMessage(input: $input) {
|
|
48
|
+
created_message {
|
|
49
|
+
attachments {
|
|
50
|
+
id
|
|
51
|
+
name
|
|
52
|
+
url
|
|
53
|
+
}
|
|
54
|
+
created_at
|
|
55
|
+
id
|
|
56
|
+
sender_email
|
|
57
|
+
sender_name
|
|
58
|
+
text
|
|
59
|
+
}
|
|
60
|
+
message
|
|
61
|
+
success
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
`;
|
|
65
|
+
|
|
66
|
+
export const LOFMP_RMA_SHIPPING_CONFIRM = gql`
|
|
67
|
+
mutation lofmpRmaShippingConfirm($rma_id: Int!) {
|
|
68
|
+
lofmpRmaShippingConfirm(rma_id: $rma_id) {
|
|
69
|
+
message
|
|
70
|
+
success
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
`;
|
|
74
|
+
|
|
45
75
|
export const GET_LOFMP_RMA_CONFIGURATIONS = gql`
|
|
46
76
|
query GetLofmpRmaConfigurations {
|
|
47
77
|
lofmpRmaConfigurations {
|
|
@@ -166,5 +196,7 @@ export const GET_LOFMP_RMA_DETAIL = gql`
|
|
|
166
196
|
export default {
|
|
167
197
|
getLofmpRmasQuery: GET_LOFMP_RMAS,
|
|
168
198
|
lofmpCreateRmaMutation: LOFMP_CREATE_RMA,
|
|
169
|
-
getLofmpRmaDetailQuery: GET_LOFMP_RMA_DETAIL
|
|
199
|
+
getLofmpRmaDetailQuery: GET_LOFMP_RMA_DETAIL,
|
|
200
|
+
lofmpRmaShippingConfirmMutation: LOFMP_RMA_SHIPPING_CONFIRM,
|
|
201
|
+
lofmpSendRmaMessageMutation: LOFMP_SEND_RMA_MESSAGE
|
|
170
202
|
};
|
|
@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
|
|
|
3
3
|
export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
|
|
4
4
|
query getProductFiltersByCategory(
|
|
5
5
|
$filters: ProductAttributeFilterInput!
|
|
6
|
+
$category_uid: String
|
|
6
7
|
) {
|
|
7
|
-
products(
|
|
8
|
+
products(
|
|
9
|
+
filter: $filters
|
|
10
|
+
category_uid: $category_uid
|
|
11
|
+
) {
|
|
8
12
|
aggregations {
|
|
9
13
|
label
|
|
10
14
|
count
|
|
@@ -142,9 +142,10 @@ const CategoryContent = props => {
|
|
|
142
142
|
|
|
143
143
|
const sidebarRef = useRef(null);
|
|
144
144
|
const classes = useStyle(defaultClasses, props.classes);
|
|
145
|
-
const shouldRenderSidebarContent = useIsInViewport({
|
|
146
|
-
|
|
147
|
-
});
|
|
145
|
+
// const shouldRenderSidebarContent = useIsInViewport({
|
|
146
|
+
// elementRef: sidebarRef
|
|
147
|
+
// });
|
|
148
|
+
const shouldRenderSidebarContent = true;
|
|
148
149
|
|
|
149
150
|
const shouldShowFilterButtons = filters && filters.length;
|
|
150
151
|
const shouldShowFilterShimmer = filters === null;
|
|
@@ -67,7 +67,8 @@ const PriceSummary = props => {
|
|
|
67
67
|
giftCards,
|
|
68
68
|
giftOptions,
|
|
69
69
|
taxes,
|
|
70
|
-
shipping
|
|
70
|
+
shipping,
|
|
71
|
+
payment_fees
|
|
71
72
|
} = flatData;
|
|
72
73
|
|
|
73
74
|
const isPriceUpdating = isUpdating || isLoading;
|
|
@@ -109,30 +110,103 @@ const PriceSummary = props => {
|
|
|
109
110
|
|
|
110
111
|
return (
|
|
111
112
|
<div className={cn(classes.root, 'pb-6 px-3')} data-cy="PriceSummary-root">
|
|
112
|
-
{
|
|
113
|
-
<
|
|
114
|
-
<
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
113
|
+
{isCheckout && (
|
|
114
|
+
<div>
|
|
115
|
+
<ul>
|
|
116
|
+
<li className={classes.lineItems}>
|
|
117
|
+
<span
|
|
118
|
+
data-cy="PriceSummary-lineItemLabel"
|
|
119
|
+
className={classes.lineItemLabel}
|
|
120
|
+
>
|
|
121
|
+
<FormattedMessage
|
|
122
|
+
id={'priceSummary.lineItemLabel'}
|
|
123
|
+
defaultMessage={'Subtotal'}
|
|
124
|
+
/>
|
|
125
|
+
</span>
|
|
126
|
+
<span
|
|
127
|
+
data-cy="PriceSummary-subtotalValue"
|
|
128
|
+
className={priceClass}
|
|
129
|
+
>
|
|
130
|
+
<Price
|
|
131
|
+
value={subtotal.value}
|
|
132
|
+
currencyCode={subtotal.currency}
|
|
133
|
+
/>
|
|
134
|
+
</span>
|
|
135
|
+
</li>
|
|
136
|
+
<DiscountSummary
|
|
137
|
+
classes={{
|
|
138
|
+
lineItems: classes.lineItems,
|
|
139
|
+
lineItemLabel: classes.lineItemLabel,
|
|
140
|
+
price: priceClass
|
|
141
|
+
}}
|
|
142
|
+
data={discounts}
|
|
143
|
+
/>
|
|
144
|
+
<li className={classes.lineItems}>
|
|
145
|
+
<GiftCardSummary
|
|
146
|
+
classes={{
|
|
147
|
+
lineItemLabel: classes.lineItemLabel,
|
|
148
|
+
price: priceClass
|
|
149
|
+
}}
|
|
150
|
+
data={giftCards}
|
|
122
151
|
/>
|
|
123
|
-
</
|
|
124
|
-
<
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
152
|
+
</li>
|
|
153
|
+
<li className={classes.lineItems}>
|
|
154
|
+
<GiftOptionsSummary
|
|
155
|
+
classes={{
|
|
156
|
+
lineItemLabel: classes.lineItemLabel,
|
|
157
|
+
price: priceClass
|
|
158
|
+
}}
|
|
159
|
+
data={giftOptions}
|
|
131
160
|
/>
|
|
132
|
-
</
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
161
|
+
</li>
|
|
162
|
+
<li className={classes.lineItems}>
|
|
163
|
+
<TaxSummary
|
|
164
|
+
classes={{
|
|
165
|
+
lineItemLabel: classes.lineItemLabel,
|
|
166
|
+
price: priceClass
|
|
167
|
+
}}
|
|
168
|
+
data={taxes}
|
|
169
|
+
isCheckout={isCheckout}
|
|
170
|
+
/>
|
|
171
|
+
</li>
|
|
172
|
+
<li className={classes.lineItems}>
|
|
173
|
+
<ShippingSummary
|
|
174
|
+
classes={{
|
|
175
|
+
lineItemLabel: classes.lineItemLabel,
|
|
176
|
+
price: priceClass
|
|
177
|
+
}}
|
|
178
|
+
data={shipping}
|
|
179
|
+
isCheckout={isCheckout}
|
|
180
|
+
/>
|
|
181
|
+
</li>
|
|
182
|
+
{payment_fees && payment_fees.length > 0 && payment_fees.map(fee => (
|
|
183
|
+
<li className={classes.lineItems} key={fee.title}>
|
|
184
|
+
<span className={classes.lineItemLabel}>{fee.title}</span>
|
|
185
|
+
<span className={priceClass}>
|
|
186
|
+
<Price value={fee.value} currencyCode={fee.currency} />
|
|
187
|
+
</span>
|
|
188
|
+
</li>
|
|
189
|
+
))}
|
|
190
|
+
<li className={classes.lineItems}>
|
|
191
|
+
<span
|
|
192
|
+
data-cy="PriceSummary-totalLabel"
|
|
193
|
+
className={classes.totalLabel}
|
|
194
|
+
>
|
|
195
|
+
{totalPriceLabel}
|
|
196
|
+
</span>
|
|
197
|
+
<span
|
|
198
|
+
data-cy="PriceSummary-totalValue"
|
|
199
|
+
className={totalPriceClass}
|
|
200
|
+
>
|
|
201
|
+
<Price
|
|
202
|
+
value={total.value}
|
|
203
|
+
currencyCode={total.currency}
|
|
204
|
+
/>
|
|
205
|
+
</span>
|
|
206
|
+
</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</div>
|
|
209
|
+
)}
|
|
136
210
|
{proceedToCheckoutButton}
|
|
137
211
|
</div>
|
|
138
212
|
);
|
|
@@ -260,8 +260,6 @@ const FilterList = props => {
|
|
|
260
260
|
const { pathname, search } = useLocation();
|
|
261
261
|
|
|
262
262
|
const showMoreItem = useMemo(() => {
|
|
263
|
-
console.log('itemCountToShow')
|
|
264
|
-
console.log(itemCountToShow)
|
|
265
263
|
if (items.length <= itemCountToShow) {
|
|
266
264
|
return null;
|
|
267
265
|
}
|
|
@@ -52,6 +52,8 @@ const FilterSidebar = props => {
|
|
|
52
52
|
// const windowScrollY =
|
|
53
53
|
// window.scrollY + filterTop - SCROLL_OFFSET;
|
|
54
54
|
// window.scrollTo(0, windowScrollY);
|
|
55
|
+
|
|
56
|
+
window.scrollTo(0, 0);
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
handleApply(...args);
|
|
@@ -89,6 +91,33 @@ const FilterSidebar = props => {
|
|
|
89
91
|
allowedFiltersArr.push(val.code);
|
|
90
92
|
});
|
|
91
93
|
|
|
94
|
+
// const ordering = ['card_artist','card_product_type', 'card_type'];
|
|
95
|
+
// const sorted = new Map(
|
|
96
|
+
// [...filterItems.entries()].sort((a, b) => {
|
|
97
|
+
// const keyA = a[0];
|
|
98
|
+
// const keyB = b[0];
|
|
99
|
+
|
|
100
|
+
// const matchA = ordering.findIndex(o => keyA.endsWith(o));
|
|
101
|
+
// const matchB = ordering.findIndex(o => keyB.endsWith(o));
|
|
102
|
+
|
|
103
|
+
// const orderA = matchA === -1 ? Infinity : matchA;
|
|
104
|
+
// const orderB = matchB === -1 ? Infinity : matchB;
|
|
105
|
+
|
|
106
|
+
// // jika dua-duanya tidak match ordering → sort alphabetis
|
|
107
|
+
// if (orderA === Infinity && orderB === Infinity) {
|
|
108
|
+
// return keyA.localeCompare(keyB);
|
|
109
|
+
// }
|
|
110
|
+
|
|
111
|
+
// // urutkan sesuai ordering
|
|
112
|
+
// return orderA - orderB;
|
|
113
|
+
// })
|
|
114
|
+
// );
|
|
115
|
+
|
|
116
|
+
// // console.log([...sorted.entries()]);
|
|
117
|
+
// const filterItems = [...sorted.entries()];
|
|
118
|
+
|
|
119
|
+
// console.log('filterItems',filterItems)
|
|
120
|
+
|
|
92
121
|
const filtersList = useMemo(
|
|
93
122
|
() =>
|
|
94
123
|
Array.from(filterItems, ([group, items], iteration) => {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
composes: lg_block from global;
|
|
12
12
|
composes: border from global;
|
|
13
13
|
composes: border-gray-100 from global;
|
|
14
|
-
composes:
|
|
14
|
+
composes: hover_shadow-type-1 from global;
|
|
15
15
|
composes: rounded-[6px] from global;
|
|
16
16
|
composes: py-2.5 from global;
|
|
17
17
|
|
|
@@ -12,7 +12,7 @@ import OrderProgressBar from './orderProgressBar';
|
|
|
12
12
|
import OrderDetails from './OrderDetails';
|
|
13
13
|
import defaultClasses from './orderRow.module.css';
|
|
14
14
|
import cn from 'classnames';
|
|
15
|
-
import { Verify, Shop } from 'iconsax-react';
|
|
15
|
+
import { Verify, Shop, ConvertCard } from 'iconsax-react';
|
|
16
16
|
import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
|
|
17
17
|
import { Link, useHistory } from 'react-router-dom';
|
|
18
18
|
|
|
@@ -203,30 +203,25 @@ const OrderRow = props => {
|
|
|
203
203
|
</div>
|
|
204
204
|
</div>
|
|
205
205
|
<div className='flex flex-col md_flex-row justify-between mb-2.5'>
|
|
206
|
-
<div className='flex flex-col ml-[5px]'>
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
})}
|
|
226
|
-
</div>
|
|
227
|
-
<div className='flex flex-col max-w-[375px] gap-8'>
|
|
228
|
-
{items && items.length > 0 && items.map((it, idx) => (
|
|
229
|
-
<div key={it.id || idx} className='flex flex-col gap-1 pb-2 last_pb-0'>
|
|
206
|
+
<div className='flex flex-col ml-[5px] gap-y-[20px]'>
|
|
207
|
+
{/* Per-item horizontal flex: image + detail */}
|
|
208
|
+
{items && items.length > 0 && items.map((it, idx) => {
|
|
209
|
+
const { url, label } = getThumbnailForSku(it.product_sku, it.product_name, idx);
|
|
210
|
+
return (
|
|
211
|
+
<div key={it.id || idx} className='flex flex-row gap-4 mb-2'>
|
|
212
|
+
<div className={classes.productImage}>
|
|
213
|
+
{url ? (
|
|
214
|
+
<img
|
|
215
|
+
src={url}
|
|
216
|
+
alt={label}
|
|
217
|
+
width={80}
|
|
218
|
+
className={classes.thumbnail}
|
|
219
|
+
/>
|
|
220
|
+
) : (
|
|
221
|
+
<PlaceholderImage alt={it.product_name} classes={{ root: classes.thumbnail }} width={60} />
|
|
222
|
+
)}
|
|
223
|
+
</div>
|
|
224
|
+
<div className='flex flex-col gap-1 pb-2 last_pb-0 max-w-[375px]'>
|
|
230
225
|
<div className={cn(classes.productName, 'text-[14] font-medium')}>
|
|
231
226
|
<span>{it.product_name}</span>
|
|
232
227
|
</div>
|
|
@@ -238,9 +233,9 @@ const OrderRow = props => {
|
|
|
238
233
|
</span>
|
|
239
234
|
</div>
|
|
240
235
|
</div>
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
236
|
+
</div>
|
|
237
|
+
);
|
|
238
|
+
})}
|
|
244
239
|
</div>
|
|
245
240
|
{/* Right column: bottom-aligned Order Total + CTA */}
|
|
246
241
|
<div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
|
|
@@ -254,18 +249,6 @@ const OrderRow = props => {
|
|
|
254
249
|
<div className="text-lg font-medium">{orderTotalPrice}</div>
|
|
255
250
|
</div>
|
|
256
251
|
<div className="flex flex-row gap-2 w-full justify-end items-center">
|
|
257
|
-
{showNewReturnButton && (
|
|
258
|
-
<button
|
|
259
|
-
type="button"
|
|
260
|
-
className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[5px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out"
|
|
261
|
-
onClick={handleNewReturn}
|
|
262
|
-
>
|
|
263
|
-
<FormattedMessage
|
|
264
|
-
id={'orderRow.newReturn'}
|
|
265
|
-
defaultMessage={'New Return'}
|
|
266
|
-
/>
|
|
267
|
-
</button>
|
|
268
|
-
)}
|
|
269
252
|
<Link
|
|
270
253
|
to={{
|
|
271
254
|
pathname: `/order-history/view/${orderNumber}`,
|
|
@@ -279,6 +262,22 @@ const OrderRow = props => {
|
|
|
279
262
|
/>
|
|
280
263
|
</span>
|
|
281
264
|
</Link>
|
|
265
|
+
{showNewReturnButton && (
|
|
266
|
+
<div
|
|
267
|
+
className={cn(
|
|
268
|
+
"cursor-pointer border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700",
|
|
269
|
+
"rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
|
|
270
|
+
)}
|
|
271
|
+
onClick={handleNewReturn}
|
|
272
|
+
title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
|
|
273
|
+
>
|
|
274
|
+
<ConvertCard size={20} color="#f26313" />
|
|
275
|
+
<FormattedMessage
|
|
276
|
+
id={'orderRow.ReturnItems'}
|
|
277
|
+
defaultMessage={'Return Items'}
|
|
278
|
+
/>
|
|
279
|
+
</div>
|
|
280
|
+
)}
|
|
282
281
|
</div>
|
|
283
282
|
</div>
|
|
284
283
|
</div>
|