@riosst100/pwa-marketplace 1.8.7 → 1.8.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/components/CustomSubCategoryPage/subCategoryPage.js +5 -3
- package/src/components/FilterTopBackup/CustomFilters/customFilters.js +2 -0
- package/src/components/LegoSets/legoSets.js +50 -19
- package/src/components/NonSportCardsSets/index.js +2 -0
- package/src/components/NonSportCardsSets/nonSportCardsSets.js +270 -0
- package/src/components/NonSportCardsSets/nonSportCardsSets.module.css +76 -0
- package/src/components/NonSportCardsSets/nonSportCardsSets.shimmer.js +50 -0
- package/src/components/ShopBy/shopBy.js +8 -1
- package/src/components/ShopByVehicles/index.js +2 -0
- package/src/components/ShopByVehicles/shopByVehicles.js +328 -0
- package/src/components/ShopByVehicles/shopByVehicles.shimmer.js +50 -0
- package/src/components/SportCardsSets/sportCardsSets.js +71 -154
- package/src/components/SubCategory/customSubCategory.js +19 -9
- package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js +5 -1
- package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js +31 -5
- package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js +12 -3
- package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js +2 -2
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +1 -1
- package/src/talons/LegoSets/legoSets.gql.js +2 -2
- package/src/talons/LegoSets/useLegoSets.js +4 -2
- package/src/talons/NonSportCardsSets/nonSportCardsSets.gql.js +59 -0
- package/src/talons/NonSportCardsSets/useNonSportCardsSets.js +238 -0
- package/src/talons/ShopBy/useShopBy.js +13 -3
- package/src/talons/ShopByVehicles/shopByVehicles.gql.js +59 -0
- package/src/talons/ShopByVehicles/useShopByVehicles.js +222 -0
- package/src/talons/SportCardsSets/sportCardsSets.gql.js +2 -2
- package/src/talons/SportCardsSets/useSportCardsSets.js +10 -10
|
@@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useMemo, useState } from 'react';
|
|
|
2
2
|
import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
|
|
3
3
|
import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
|
|
4
4
|
import { useSportCardsSets } from '@riosst100/pwa-marketplace/src/talons/SportCardsSets/useSportCardsSets';
|
|
5
|
-
import { Link } from 'react-router-dom';
|
|
5
|
+
import { Link, useLocation } from 'react-router-dom';
|
|
6
6
|
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
|
|
7
7
|
import defaultClasses from './sportCardsSets.module.css';
|
|
8
8
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
@@ -47,13 +47,6 @@ const SportCardsSets = props => {
|
|
|
47
47
|
value: 'date'
|
|
48
48
|
};
|
|
49
49
|
}
|
|
50
|
-
|
|
51
|
-
// if (productType == "expansion_sets") {
|
|
52
|
-
// defaultSort = {
|
|
53
|
-
// sortText: 'All (Expansion Sets)',
|
|
54
|
-
// value: 'all'
|
|
55
|
-
// };
|
|
56
|
-
// }
|
|
57
50
|
|
|
58
51
|
const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
|
|
59
52
|
|
|
@@ -84,21 +77,10 @@ const SportCardsSets = props => {
|
|
|
84
77
|
const newSportCardsSets = searchQuery || activeFilter != "all" ? filteredSportCardsSets : sportCardsSets;
|
|
85
78
|
|
|
86
79
|
// useEffect(() => {
|
|
87
|
-
if (
|
|
88
|
-
|
|
80
|
+
if (newSportCardsSets && newSportCardsSets.length) {
|
|
81
|
+
newSportCardsSets.map((setRelease, index) => {
|
|
89
82
|
const { group, sets } = setRelease;
|
|
90
83
|
|
|
91
|
-
// if (sets.length) {
|
|
92
|
-
// sets.map((set, index) => {
|
|
93
|
-
// // console.log(set)
|
|
94
|
-
// if (set.sc_league) {
|
|
95
|
-
// if (!availableLeagues.includes(set.sc_league)) {
|
|
96
|
-
// availableLeagues.push(set.sc_league)
|
|
97
|
-
// }
|
|
98
|
-
// }
|
|
99
|
-
// })
|
|
100
|
-
// }
|
|
101
|
-
|
|
102
84
|
setsLengthArr[group] = sets.length
|
|
103
85
|
})
|
|
104
86
|
}
|
|
@@ -107,26 +89,17 @@ const SportCardsSets = props => {
|
|
|
107
89
|
if (sportCardsSets && sportCardsSets.length) {
|
|
108
90
|
sportCardsSets.map((setRelease, index) => {
|
|
109
91
|
const { group, sets } = setRelease;
|
|
110
|
-
if (active == 'all' || active != "all" && active == group) {
|
|
92
|
+
// if (active == 'all' || active != "all" && active == group) {
|
|
111
93
|
if (sets.length) {
|
|
112
94
|
sets.map((set, index) => {
|
|
113
|
-
// console.log(set)
|
|
114
95
|
if (set.sc_league) {
|
|
115
96
|
if (!availableLeagues.includes(set.sc_league)) {
|
|
116
97
|
availableLeagues.push(set.sc_league)
|
|
117
98
|
}
|
|
118
99
|
}
|
|
119
|
-
|
|
120
|
-
if (set.sc_brands) {
|
|
121
|
-
if (!availableBrands.includes(set.sc_brands)) {
|
|
122
|
-
availableBrands.push(set.sc_brands)
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// availableBrands
|
|
127
100
|
})
|
|
128
101
|
}
|
|
129
|
-
}
|
|
102
|
+
// }
|
|
130
103
|
})
|
|
131
104
|
}
|
|
132
105
|
|
|
@@ -138,6 +111,29 @@ const SportCardsSets = props => {
|
|
|
138
111
|
return result;
|
|
139
112
|
}
|
|
140
113
|
|
|
114
|
+
let shopbyUrl = "release";
|
|
115
|
+
if (shopby == "sc_baseball_players") {
|
|
116
|
+
shopbyUrl = "players";
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
if (shopby == "sc_baseball_teams") {
|
|
120
|
+
shopbyUrl = "teams";
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
const { search } = useLocation();
|
|
124
|
+
|
|
125
|
+
let filterSearchArr = search ? search.split('&') : [];
|
|
126
|
+
filterSearchArr = filterSearchArr.filter(function(data) {
|
|
127
|
+
return !data.includes('shopby');
|
|
128
|
+
})
|
|
129
|
+
let filterSearch = filterSearchArr.join('&')
|
|
130
|
+
|
|
131
|
+
if (!filterSearch.includes('?')) {
|
|
132
|
+
filterSearch = '?'+filterSearch;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
let additionalFilter = '';
|
|
136
|
+
|
|
141
137
|
const setRelases = newSportCardsSets && newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
|
|
142
138
|
const { group, sets } = setRelease;
|
|
143
139
|
|
|
@@ -147,8 +143,14 @@ const SportCardsSets = props => {
|
|
|
147
143
|
sets.map((set, index) => {
|
|
148
144
|
const { set_name, option_id, release_year } = set;
|
|
149
145
|
|
|
146
|
+
// const categoryUrl = resourceUrl(
|
|
147
|
+
// `/${category?.url_path}${categoryUrlSuffix || ''}?sc_${category?.url_key}_${shopbyUrl}[filter]=${set_name},${option_id}`
|
|
148
|
+
// );
|
|
149
|
+
const filter = 'sc_' + category?.url_key + '_' + shopbyUrl + '[filter]=' + set_name + ',' + option_id;
|
|
150
|
+
const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
|
|
151
|
+
|
|
150
152
|
const categoryUrl = resourceUrl(
|
|
151
|
-
`/${category
|
|
153
|
+
`/${category.url_path}${categoryUrlSuffix || ''}${params}`
|
|
152
154
|
);
|
|
153
155
|
|
|
154
156
|
setsResult.push(<li className='list-none'>
|
|
@@ -188,113 +190,50 @@ const SportCardsSets = props => {
|
|
|
188
190
|
const handleActive = (val) => {
|
|
189
191
|
setActive(val);
|
|
190
192
|
|
|
191
|
-
availableLeagues = [];
|
|
192
|
-
|
|
193
|
-
setActiveFilter('Major Baseball League')
|
|
194
|
-
|
|
195
|
-
|
|
196
193
|
setSearchQuery('')
|
|
197
194
|
}
|
|
198
195
|
|
|
199
196
|
const handleActiveTab = (val) => {
|
|
200
197
|
setActiveTab(val);
|
|
201
|
-
|
|
202
198
|
setSearchQuery('')
|
|
203
199
|
}
|
|
204
200
|
|
|
205
|
-
const activeTabParam = query.get('active_tab') || null;
|
|
206
|
-
|
|
207
|
-
// useEffect(() => {
|
|
208
|
-
// if (query) {
|
|
209
|
-
//
|
|
210
|
-
// if (activeTabParam) {
|
|
211
|
-
// if (activeTabParam && activeTab == "leagues") {
|
|
212
|
-
|
|
213
|
-
// handleActiveTab(activeTabParam)
|
|
214
|
-
// }
|
|
215
|
-
// }
|
|
216
|
-
|
|
217
|
-
// const activeParam = query.get('active') || null;
|
|
218
|
-
// if (activeParam) {
|
|
219
|
-
// return handleActive(activeTabParam)
|
|
220
|
-
// }
|
|
221
|
-
// // const activeParam = query.get('active') || null;
|
|
222
|
-
// // if (activeParam && activeParam != activeFilter) {
|
|
223
|
-
// // if (activeParam && active == "all") {
|
|
224
|
-
// // return handleActive(activeParam)
|
|
225
|
-
// // }
|
|
226
|
-
// // }
|
|
227
|
-
|
|
228
|
-
// }
|
|
229
|
-
// return true;
|
|
230
|
-
// }, [activeTabParam]);
|
|
231
|
-
|
|
232
201
|
const handleActiveFilter = (val) => {
|
|
233
202
|
setActiveFilter(val);
|
|
234
203
|
|
|
204
|
+
setActive('all');
|
|
205
|
+
|
|
235
206
|
setSearchQuery('')
|
|
236
207
|
}
|
|
237
208
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
'label': 'All (A-Z)',
|
|
243
|
-
'value': 'all'
|
|
244
|
-
},
|
|
245
|
-
{
|
|
246
|
-
'label': 'Latest Sets',
|
|
247
|
-
'value': 'newest'
|
|
248
|
-
}
|
|
249
|
-
];
|
|
250
|
-
|
|
251
|
-
// if (shopby == "release_year") {
|
|
252
|
-
// availableSortBy = [
|
|
253
|
-
// {
|
|
254
|
-
// 'label': 'All (By Year)',
|
|
255
|
-
// 'value': 'date'
|
|
256
|
-
// },
|
|
257
|
-
// {
|
|
258
|
-
// 'label': 'Latest Sets',
|
|
259
|
-
// 'value': 'newest'
|
|
260
|
-
// }
|
|
261
|
-
// ];
|
|
262
|
-
|
|
263
|
-
// // alpha = availableGroups;
|
|
264
|
-
// }
|
|
265
|
-
|
|
266
|
-
// if (productType == "expansion_sets") {
|
|
267
|
-
// // availableSortBy = [
|
|
268
|
-
// // {
|
|
269
|
-
// // 'label': 'All (Expansion Sets)',
|
|
270
|
-
// // 'value': 'all'
|
|
271
|
-
// // },
|
|
272
|
-
// // {
|
|
273
|
-
// // 'label': 'Latest Sets',
|
|
274
|
-
// // 'value': 'newest'
|
|
275
|
-
// // }
|
|
276
|
-
// // ];
|
|
277
|
-
|
|
278
|
-
// // alpha = availableGroups
|
|
279
|
-
// }
|
|
209
|
+
const handleSearchQuery = (val) => {
|
|
210
|
+
setSearchQuery(val)
|
|
211
|
+
setActive('all')
|
|
212
|
+
}
|
|
280
213
|
|
|
214
|
+
let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
|
|
215
|
+
|
|
281
216
|
let brandName = brandsFilter ? brandsFilter.split(',')[0] : '';
|
|
282
217
|
|
|
283
218
|
let title = "By Release/Set";
|
|
284
|
-
if (
|
|
285
|
-
title = "
|
|
286
|
-
} else if (
|
|
287
|
-
title = "
|
|
288
|
-
} else
|
|
289
|
-
|
|
219
|
+
if (shopby == "sc_baseball_players") {
|
|
220
|
+
title = "Player"
|
|
221
|
+
} else if (shopby == "sc_baseball_teams") {
|
|
222
|
+
title = "Team";
|
|
223
|
+
} else {
|
|
224
|
+
if (activeTab == "year") {
|
|
225
|
+
title = "By Year";
|
|
226
|
+
} else if (activeTab == "leagues") {
|
|
227
|
+
title = "By Leagues";
|
|
228
|
+
} else if (activeTab == "brand") {
|
|
229
|
+
title = brandName;
|
|
230
|
+
}
|
|
290
231
|
}
|
|
291
232
|
|
|
292
|
-
// availableLeagues.sort();
|
|
293
|
-
|
|
294
233
|
return (
|
|
295
234
|
<Fragment>
|
|
296
235
|
<StoreTitle>{title}</StoreTitle>
|
|
297
|
-
<Breadcrumbs categoryId={categoryId} customPage={
|
|
236
|
+
<Breadcrumbs categoryId={categoryId} customPage={title} />
|
|
298
237
|
{shopby == "release" ? <ul className={classes.nav}>
|
|
299
238
|
<li className={classes.nav_item}>
|
|
300
239
|
<button
|
|
@@ -305,25 +244,28 @@ const SportCardsSets = props => {
|
|
|
305
244
|
{activeTab == 'year' ? <b>By Year</b> : 'By Year'}
|
|
306
245
|
</button>
|
|
307
246
|
</li>
|
|
308
|
-
|
|
247
|
+
<li className={classes.nav_item}>
|
|
309
248
|
<button
|
|
310
249
|
onClick={() => {
|
|
311
|
-
handleActiveTab('
|
|
250
|
+
handleActiveTab('leagues')
|
|
312
251
|
}}
|
|
313
252
|
>
|
|
314
|
-
{activeTab == '
|
|
253
|
+
{activeTab == 'leagues' ? <b>By Leagues</b> : 'By Leagues'}
|
|
315
254
|
</button>
|
|
316
|
-
</li>
|
|
317
|
-
|
|
255
|
+
</li>
|
|
256
|
+
</ul> : ''}
|
|
257
|
+
{shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" ? availableLeagues ? <ul className={classes.nav}>
|
|
258
|
+
{availableLeagues.map((group, index) => (
|
|
259
|
+
<li key={index} className={classes.nav_item}>
|
|
318
260
|
<button
|
|
319
261
|
onClick={() => {
|
|
320
|
-
|
|
262
|
+
handleActiveFilter(group)
|
|
321
263
|
}}
|
|
322
264
|
>
|
|
323
|
-
{
|
|
265
|
+
{activeFilter == group ? <b>{group}</b> : group}
|
|
324
266
|
</button>
|
|
325
267
|
</li>
|
|
326
|
-
</ul> : ''}
|
|
268
|
+
))}</ul> : '' : ''}
|
|
327
269
|
{shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
|
|
328
270
|
{title}
|
|
329
271
|
</h1>}
|
|
@@ -349,7 +291,7 @@ const SportCardsSets = props => {
|
|
|
349
291
|
</button>
|
|
350
292
|
</li>
|
|
351
293
|
</ul> : ''}
|
|
352
|
-
{activeTab == "leagues" && availableLeagues ? <ul className={classes.nav}>
|
|
294
|
+
{shopby == "release" && activeTab == "leagues" && availableLeagues ? <ul className={classes.nav}>
|
|
353
295
|
{availableLeagues.map((group, index) => (
|
|
354
296
|
<li key={index} className={classes.nav_item}>
|
|
355
297
|
<button
|
|
@@ -361,41 +303,16 @@ const SportCardsSets = props => {
|
|
|
361
303
|
</button>
|
|
362
304
|
</li>
|
|
363
305
|
))}</ul> : ''}
|
|
364
|
-
{/* {activeTab == "brand" && availableBrands && availableBrands.length ? <ul className={classes.nav}>
|
|
365
|
-
{availableBrands.map((group, index) => (
|
|
366
|
-
<li key={index} className={classes.nav_item}>
|
|
367
|
-
<button
|
|
368
|
-
onClick={() => {
|
|
369
|
-
handleActiveFilter(group)
|
|
370
|
-
}}
|
|
371
|
-
>
|
|
372
|
-
{activeFilter == group ? <b>{group}</b> : group}
|
|
373
|
-
</button>
|
|
374
|
-
</li>
|
|
375
|
-
))} */}
|
|
376
|
-
{/* <li>
|
|
377
|
-
<button
|
|
378
|
-
className={cn(
|
|
379
|
-
'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
|
|
380
|
-
'leading-4 font-medium text-base hover_bg-gray-50'
|
|
381
|
-
)}
|
|
382
|
-
onClick={() => {
|
|
383
|
-
setActiveBrand('all')
|
|
384
|
-
}}
|
|
385
|
-
>
|
|
386
|
-
{active == 'all' ? <b>All</b> : 'All'}
|
|
387
|
-
</button>
|
|
388
|
-
</li></ul> : ''} */}
|
|
389
306
|
<div className='border border-gray-100 px-6'>
|
|
390
307
|
{sportCardsSets ? (
|
|
391
308
|
<div
|
|
392
309
|
className={classes.toolbar}
|
|
393
310
|
>
|
|
394
|
-
<div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={
|
|
311
|
+
<div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
|
|
395
312
|
{/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
|
|
396
313
|
</div>
|
|
397
314
|
) : ''}
|
|
398
|
-
{shopby == "sets"
|
|
315
|
+
{shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "sets" ? <>
|
|
399
316
|
<section className='single_list-indexing-container relative m-auto pt-5'>
|
|
400
317
|
<ul className='flex gap-2 justify-center flex-wrap'>
|
|
401
318
|
<li>
|
|
@@ -430,7 +347,7 @@ const SportCardsSets = props => {
|
|
|
430
347
|
))}
|
|
431
348
|
</ul>
|
|
432
349
|
</section>
|
|
433
|
-
</>}
|
|
350
|
+
</> : ''}
|
|
434
351
|
<Divider className="mb-5 px-4 mt-5" />
|
|
435
352
|
<section className='singles-container'>
|
|
436
353
|
<div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
|
|
@@ -6,7 +6,7 @@ import defaultClasses from './customSubCategory.module.css';
|
|
|
6
6
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
7
7
|
|
|
8
8
|
const CustomSubCategory = props => {
|
|
9
|
-
const { customSubCategory } = props;
|
|
9
|
+
const { customSubCategory, categoryName } = props;
|
|
10
10
|
|
|
11
11
|
const talonProps = useCustomSubCategory({ customSubCategory });
|
|
12
12
|
|
|
@@ -19,14 +19,24 @@ const CustomSubCategory = props => {
|
|
|
19
19
|
const subCategory = [];
|
|
20
20
|
|
|
21
21
|
normalizedData && normalizedData.map(({ text, path }, index) => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
if (text == categoryName) {
|
|
23
|
+
subCategory.push(
|
|
24
|
+
<span>
|
|
25
|
+
<b>
|
|
26
|
+
<li className={classes.item}>{text}</li>
|
|
27
|
+
</b>
|
|
28
|
+
</span>
|
|
29
|
+
)
|
|
30
|
+
} else {
|
|
31
|
+
subCategory.push(
|
|
32
|
+
<Link
|
|
33
|
+
key={index}
|
|
34
|
+
to={resourceUrl(path)}
|
|
35
|
+
>
|
|
36
|
+
<li className={classes.item}>{text}</li>
|
|
37
|
+
</Link>
|
|
38
|
+
)
|
|
39
|
+
}
|
|
30
40
|
});
|
|
31
41
|
|
|
32
42
|
return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
|
|
@@ -14,6 +14,7 @@ import SubCategoryPage from '@riosst100/pwa-marketplace/src/components/CustomSub
|
|
|
14
14
|
import ShopBySets from '@riosst100/pwa-marketplace/src/components/ShopBySets/shopBySets';
|
|
15
15
|
import { useLocation } from 'react-router-dom';
|
|
16
16
|
import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCardsSets/sportCardsSets';
|
|
17
|
+
import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
|
|
17
18
|
import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
|
|
18
19
|
|
|
19
20
|
const MESSAGES = new Map().set(
|
|
@@ -88,7 +89,10 @@ const Category = props => {
|
|
|
88
89
|
shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
|
|
89
90
|
categoryId={uid}
|
|
90
91
|
shopby={shopby}
|
|
91
|
-
isLoading={loading} /> : shopby
|
|
92
|
+
isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
|
|
93
|
+
categoryId={uid}
|
|
94
|
+
shopby={shopby}
|
|
95
|
+
isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
|
|
92
96
|
categoryId={uid}
|
|
93
97
|
shopby={shopby}
|
|
94
98
|
isLoading={loading} /> : shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import React, { useEffect, Fragment, Suspense, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { FormattedMessage } from 'react-intl';
|
|
3
3
|
import { array, number, shape, string } from 'prop-types';
|
|
4
4
|
|
|
@@ -29,7 +29,7 @@ import AttributesBlock from '@riosst100/pwa-marketplace/src/components/Attribute
|
|
|
29
29
|
|
|
30
30
|
import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
|
|
31
31
|
import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
|
|
32
|
-
import { useLocation } from 'react-router-dom';
|
|
32
|
+
import { useLocation, useHistory } from 'react-router-dom';
|
|
33
33
|
import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
|
|
34
34
|
import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
|
|
35
35
|
import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
|
|
@@ -49,10 +49,13 @@ const CategoryContent = props => {
|
|
|
49
49
|
isLoading,
|
|
50
50
|
pageControl,
|
|
51
51
|
sortProps,
|
|
52
|
-
pageSize
|
|
52
|
+
pageSize,
|
|
53
|
+
showSubcategory
|
|
53
54
|
} = props;
|
|
54
55
|
const [currentSort] = sortProps;
|
|
55
56
|
|
|
57
|
+
const history = useHistory();
|
|
58
|
+
|
|
56
59
|
const talonProps = useCategoryContent({
|
|
57
60
|
categoryId,
|
|
58
61
|
data,
|
|
@@ -74,6 +77,27 @@ const CategoryContent = props => {
|
|
|
74
77
|
virtualCategoryFilters
|
|
75
78
|
} = talonProps;
|
|
76
79
|
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (category) {
|
|
82
|
+
const urlKey = category.url_key;
|
|
83
|
+
if (urlKey == "collectible-game") {
|
|
84
|
+
history.replace('/games/collectible-game/magic-the-gathering.html')
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (urlKey == "sport-cards") {
|
|
88
|
+
history.replace('/cards/sport-cards/baseball.html')
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
if (urlKey == "non-sports-cards") {
|
|
92
|
+
history.replace('/cards/non-sports-cards/comics.html')
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (urlKey == "age-level" || urlKey == "lego" || urlKey == "minifigures" || urlKey == "sub-theme" || urlKey == "theme" || urlKey == "interest") {
|
|
96
|
+
history.replace('/lego-toys/lego/sets.html')
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}, [category]);
|
|
100
|
+
|
|
77
101
|
const [activeLetter, setActiveLetter] = useState('all')
|
|
78
102
|
const [activeTab, setActiveTab] = useState('all');
|
|
79
103
|
|
|
@@ -228,6 +252,8 @@ const CategoryContent = props => {
|
|
|
228
252
|
|
|
229
253
|
// console.log(allActiveFilters)
|
|
230
254
|
|
|
255
|
+
// console.log(virtualCategoryFilters)
|
|
256
|
+
|
|
231
257
|
if (allActiveFilters && allActiveFilters.size > 0) {
|
|
232
258
|
allActiveFilters.forEach((value, key) => {
|
|
233
259
|
value.forEach((value) => {
|
|
@@ -256,7 +282,7 @@ const CategoryContent = props => {
|
|
|
256
282
|
// console.log(activeFilters.length)
|
|
257
283
|
// console.log(activeFilters.map(u => u.label).join(' - '))
|
|
258
284
|
|
|
259
|
-
|
|
285
|
+
let title = activeFilters && activeFilters.length ? (
|
|
260
286
|
activeFilters.length > 1 ?
|
|
261
287
|
activeFilters.map(u => u.label).join(': ')
|
|
262
288
|
: currentFilter
|
|
@@ -282,7 +308,7 @@ const CategoryContent = props => {
|
|
|
282
308
|
<>
|
|
283
309
|
{currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
|
|
284
310
|
<SubCategory parent={parent} children={children} />
|
|
285
|
-
{!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
|
|
311
|
+
{!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
|
|
286
312
|
</>
|
|
287
313
|
{/* ) : ( */}
|
|
288
314
|
<>
|
|
@@ -40,6 +40,10 @@ const Breadcrumbs = props => {
|
|
|
40
40
|
// For all links generate a fragment like "/ Text"
|
|
41
41
|
const links = useMemo(() => {
|
|
42
42
|
return normalizedData.map(({ text, path }) => {
|
|
43
|
+
if (text == "dCollectible Card Games") {
|
|
44
|
+
return '';
|
|
45
|
+
}
|
|
46
|
+
|
|
43
47
|
return (
|
|
44
48
|
<Fragment key={text}>
|
|
45
49
|
<span className={classes.divider}>{DELIMITER}</span>
|
|
@@ -131,7 +135,9 @@ const Breadcrumbs = props => {
|
|
|
131
135
|
// If we have a "currentProduct" it means we're on a PDP so we want the last
|
|
132
136
|
// category text to be a link. If we don't have a "currentProduct" we're on
|
|
133
137
|
// a category page so it should be regular text.
|
|
134
|
-
const currentCategoryLink = customPage || currentProduct || currentFilter && currentFilter.length ? (
|
|
138
|
+
const currentCategoryLink = currentCategory == "dCollectible Card Games" ? '' : (customPage || currentProduct || currentFilter && currentFilter.length ? (
|
|
139
|
+
<>
|
|
140
|
+
<span className={classes.divider}>{DELIMITER}</span>
|
|
135
141
|
<Link
|
|
136
142
|
className={classes.link}
|
|
137
143
|
to={'/'+resourceUrl(currentCategoryPath)}
|
|
@@ -139,9 +145,13 @@ const Breadcrumbs = props => {
|
|
|
139
145
|
>
|
|
140
146
|
{currentCategory}
|
|
141
147
|
</Link>
|
|
148
|
+
</>
|
|
142
149
|
) : (
|
|
150
|
+
<>
|
|
151
|
+
<span className={classes.divider}>{DELIMITER}</span>
|
|
143
152
|
<span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
|
|
144
|
-
|
|
153
|
+
</>
|
|
154
|
+
));
|
|
145
155
|
|
|
146
156
|
const currentProductNode = currentProduct ? (
|
|
147
157
|
<Fragment>
|
|
@@ -163,7 +173,6 @@ const Breadcrumbs = props => {
|
|
|
163
173
|
<FormattedMessage id={'global.home'} defaultMessage={'Home'} />
|
|
164
174
|
</Link>
|
|
165
175
|
{links}
|
|
166
|
-
<span className={classes.divider}>{DELIMITER}</span>
|
|
167
176
|
{currentCategoryLink}
|
|
168
177
|
{filterBreadcrumbsElement}
|
|
169
178
|
{currentProductNode}
|
|
@@ -22,7 +22,7 @@ const CurrentFilters = props => {
|
|
|
22
22
|
|
|
23
23
|
const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
|
|
24
24
|
|
|
25
|
-
if (!customAttributeLandingPage.includes(group)) {
|
|
25
|
+
// if (!customAttributeLandingPage.includes(group)) {
|
|
26
26
|
elements.push(
|
|
27
27
|
<li key={key} className={classes.item}>
|
|
28
28
|
<CurrentFilter
|
|
@@ -33,7 +33,7 @@ const CurrentFilters = props => {
|
|
|
33
33
|
/>
|
|
34
34
|
</li>
|
|
35
35
|
);
|
|
36
|
-
}
|
|
36
|
+
// }
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -624,7 +624,7 @@ const ProductFullDetail = props => {
|
|
|
624
624
|
</div>
|
|
625
625
|
</div>
|
|
626
626
|
</Link>
|
|
627
|
-
<Link class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
627
|
+
<Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 px-5 relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
628
628
|
<div class="flex items-center justify-center gap-[10px] relative">
|
|
629
629
|
<Shop color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
630
630
|
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
@@ -12,8 +12,8 @@ export const GET_STORE_CONFIG_DATA = gql`
|
|
|
12
12
|
`;
|
|
13
13
|
|
|
14
14
|
export const GET_LEGO_SETS_QUERY = gql`
|
|
15
|
-
query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String) {
|
|
16
|
-
legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby) {
|
|
15
|
+
query getLegoSets($categoryUrlKey: String!, $activeTab: String, $filters: ProductAttributeFilterInput!, $shopby: String, $activeFilter: String) {
|
|
16
|
+
legoSets(categoryUrlKey: $categoryUrlKey, activeTab: $activeTab, filters: $filters, shopby: $shopby, activeFilter: $activeFilter) {
|
|
17
17
|
group
|
|
18
18
|
sets {
|
|
19
19
|
set_name
|
|
@@ -93,13 +93,15 @@ export const useLegoSets = props => {
|
|
|
93
93
|
filters: newFilters,
|
|
94
94
|
categoryUrlKey: categoryUrlKey,
|
|
95
95
|
activeTab: activeTab,
|
|
96
|
-
shopby: shopby
|
|
96
|
+
shopby: shopby,
|
|
97
|
+
activeFilter: activeFilter
|
|
97
98
|
}
|
|
98
99
|
});
|
|
99
100
|
// }
|
|
100
101
|
}, [
|
|
101
102
|
runQuery,
|
|
102
|
-
activeTab
|
|
103
|
+
activeTab,
|
|
104
|
+
activeFilter
|
|
103
105
|
// queryResponse
|
|
104
106
|
// filterTypeMap,
|
|
105
107
|
// search,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { gql } from '@apollo/client';
|
|
2
|
+
|
|
3
|
+
export const GET_STORE_CONFIG_DATA = gql`
|
|
4
|
+
query getStoreConfigData {
|
|
5
|
+
# eslint-disable-next-line @graphql-eslint/require-id-when-available
|
|
6
|
+
storeConfig {
|
|
7
|
+
store_code
|
|
8
|
+
product_url_suffix
|
|
9
|
+
category_url_suffix
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
`;
|
|
13
|
+
|
|
14
|
+
export const GET_NON_SPORT_CARDS_SETS_QUERY = gql`
|
|
15
|
+
query getNonSportCardsSets($categoryUrlKey: String!, $shopby: String, $setType: String, $filters: ProductAttributeFilterInput!) {
|
|
16
|
+
nonSportCardsSets(categoryUrlKey: $categoryUrlKey, shopby: $shopby, setType: $setType, filters: $filters) {
|
|
17
|
+
group
|
|
18
|
+
sets {
|
|
19
|
+
set_name
|
|
20
|
+
option_id
|
|
21
|
+
release_year
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
export const GET_CATEGORY_CONTENT = gql`
|
|
28
|
+
query getCategoryData($id: String!) {
|
|
29
|
+
categories(filters: { category_uid: { in: [$id] } }) {
|
|
30
|
+
# eslint-disable-next-line @graphql-eslint/require-id-when-available
|
|
31
|
+
items {
|
|
32
|
+
uid
|
|
33
|
+
name
|
|
34
|
+
url_key
|
|
35
|
+
url_path
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
`;
|
|
40
|
+
|
|
41
|
+
export const GET_FILTER_INPUTS = gql`
|
|
42
|
+
query GetFilterInputsForCategory {
|
|
43
|
+
__type(name: "ProductAttributeFilterInput") {
|
|
44
|
+
inputFields {
|
|
45
|
+
name
|
|
46
|
+
type {
|
|
47
|
+
name
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
`;
|
|
53
|
+
|
|
54
|
+
export default {
|
|
55
|
+
getStoreConfigData: GET_STORE_CONFIG_DATA,
|
|
56
|
+
getNonSportCardsSetsQuery: GET_NON_SPORT_CARDS_SETS_QUERY,
|
|
57
|
+
getCategoryContentQuery: GET_CATEGORY_CONTENT,
|
|
58
|
+
getFilterInputsQuery: GET_FILTER_INPUTS,
|
|
59
|
+
};
|