@riosst100/pwa-marketplace 2.9.2 → 2.9.3
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
CHANGED
|
@@ -37,7 +37,7 @@ import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
|
|
|
37
37
|
import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
|
|
38
38
|
import { Link } from 'react-router-dom';
|
|
39
39
|
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
|
|
40
|
-
import defaultClasses from '
|
|
40
|
+
import defaultClasses from './shopBy.module.css';
|
|
41
41
|
import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
|
|
42
42
|
import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
|
|
43
43
|
import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { shape, string } from 'prop-types';
|
|
3
|
-
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
4
|
-
|
|
5
|
-
import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
|
|
6
|
-
import defaultClasses from '@riosst100/pwa-marketplace/src/components/ShowMore/shopBy';
|
|
7
|
-
import cn from 'classnames';
|
|
8
|
-
import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
|
|
9
|
-
|
|
10
|
-
const ShopBy = props => {
|
|
11
|
-
const classes = useStyle(defaultClasses, props.classes);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<>
|
|
15
|
-
<h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
|
|
16
|
-
<div className='border border-gray-100 px-6'>
|
|
17
|
-
<center>
|
|
18
|
-
<section className='single_list-indexing-container relative m-auto pt-5'>
|
|
19
|
-
<Shimmer width="95%" height="6vh" />
|
|
20
|
-
</section>
|
|
21
|
-
</center>
|
|
22
|
-
<Divider className="mb-5 px-4" />
|
|
23
|
-
<section className='singles-container'>
|
|
24
|
-
<div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
|
|
25
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
26
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
27
|
-
</div>
|
|
28
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
29
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
30
|
-
</div>
|
|
31
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
32
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
33
|
-
</div>
|
|
34
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
35
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
36
|
-
</div>
|
|
37
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
38
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
39
|
-
</div>
|
|
40
|
-
<div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
|
|
41
|
-
<div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
</section>
|
|
45
|
-
</div>
|
|
46
|
-
</>
|
|
47
|
-
);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
export default ShopBy;
|
|
@@ -1,280 +0,0 @@
|
|
|
1
|
-
import { useQuery, useLazyQuery } from '@apollo/client';
|
|
2
|
-
import { useEffect, useMemo } from 'react';
|
|
3
|
-
import { useLocation } from 'react-router-dom';
|
|
4
|
-
|
|
5
|
-
import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
|
|
6
|
-
import DEFAULT_OPERATIONS from '@riosst100/pwa-marketplace/src/talons/ShowMore/shopBy.gql';
|
|
7
|
-
import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
|
|
8
|
-
|
|
9
|
-
export const useShopBy = props => {
|
|
10
|
-
|
|
11
|
-
const { searchQuery, activeFilter, active, setActive, currentSort, categoryId, shopby } = props
|
|
12
|
-
|
|
13
|
-
const { value: sortby } = currentSort
|
|
14
|
-
|
|
15
|
-
const operations = mergeOperations(DEFAULT_OPERATIONS, null);
|
|
16
|
-
const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery, getProductFiltersByCategoryQuery, getMasterAttributesQuery } = operations;
|
|
17
|
-
const { pathname, search } = useLocation();
|
|
18
|
-
// const [
|
|
19
|
-
// ,
|
|
20
|
-
// {
|
|
21
|
-
// actions: { setPageLoading }
|
|
22
|
-
// }
|
|
23
|
-
// ] = useAppContext();
|
|
24
|
-
|
|
25
|
-
const [runQuery, { data: queryResponse, loading, error }] = useLazyQuery(
|
|
26
|
-
getProductFiltersByCategoryQuery,
|
|
27
|
-
{
|
|
28
|
-
fetchPolicy: 'cache-and-network',
|
|
29
|
-
nextFetchPolicy: 'cache-first'
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
|
|
33
|
-
// const [runQuery, {data: queryResponse, loading, error}] = useLazyQuery(getShopByDataQuery, {
|
|
34
|
-
// fetchPolicy: 'cache-and-network',
|
|
35
|
-
// nextFetchPolicy: 'cache-first'
|
|
36
|
-
// });
|
|
37
|
-
|
|
38
|
-
const { data: storeConfigData } = useQuery(getStoreConfigData, {
|
|
39
|
-
fetchPolicy: 'cache-and-network',
|
|
40
|
-
nextFetchPolicy: 'cache-first'
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
const pathnameArr = pathname.split('/');
|
|
44
|
-
|
|
45
|
-
const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
|
|
46
|
-
|
|
47
|
-
const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
|
|
48
|
-
|
|
49
|
-
const { data: introspectionData } = useQuery(getFilterInputsQuery);
|
|
50
|
-
|
|
51
|
-
const filterTypeMap = useMemo(() => {
|
|
52
|
-
const typeMap = new Map();
|
|
53
|
-
if (introspectionData) {
|
|
54
|
-
introspectionData.__type.inputFields.forEach(({ name, type }) => {
|
|
55
|
-
typeMap.set(name, type.name);
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
return typeMap;
|
|
59
|
-
}, [introspectionData]);
|
|
60
|
-
|
|
61
|
-
const filters = getFiltersFromSearch(search);
|
|
62
|
-
|
|
63
|
-
const { newFilters, activeFilters } = useMemo(() => {
|
|
64
|
-
const resultFilters = {};
|
|
65
|
-
const resultActiveFilters = [];
|
|
66
|
-
|
|
67
|
-
if (filterTypeMap.size) {
|
|
68
|
-
filters.forEach((values, key) => {
|
|
69
|
-
resultFilters[key] = getFilterInput(values, filterTypeMap.get(key));
|
|
70
|
-
|
|
71
|
-
if (key === "sc_baseball_release") {
|
|
72
|
-
for (let item of values) {
|
|
73
|
-
if (item) {
|
|
74
|
-
const data = search.split('&');
|
|
75
|
-
data.pop();
|
|
76
|
-
resultActiveFilters.push({
|
|
77
|
-
label: item.split(',')[0],
|
|
78
|
-
path: data
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
return { newFilters: resultFilters, activeFilters: resultActiveFilters };
|
|
87
|
-
}, [filterTypeMap]);
|
|
88
|
-
|
|
89
|
-
// MASTER ATTRIBUTES
|
|
90
|
-
const {
|
|
91
|
-
called: masterAttributesCalled,
|
|
92
|
-
data: masterAttributesData,
|
|
93
|
-
loading: masterAttributesLoading
|
|
94
|
-
} = useQuery(getMasterAttributesQuery,
|
|
95
|
-
{
|
|
96
|
-
fetchPolicy: 'cache-and-network',
|
|
97
|
-
nextFetchPolicy: 'cache-first'
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
const masterAttributes = useMemo(() => {
|
|
101
|
-
const masterAttributes = [];
|
|
102
|
-
|
|
103
|
-
if (masterAttributesData) {
|
|
104
|
-
masterAttributesData.masterAttributes.forEach(({ attribute_code }) => {
|
|
105
|
-
masterAttributes.push(attribute_code);
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
return masterAttributes;
|
|
110
|
-
}, [masterAttributesData]);
|
|
111
|
-
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
|
|
114
|
-
if (!filterTypeMap.size) {
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
const filters = getFiltersFromSearch(search);
|
|
119
|
-
|
|
120
|
-
const mainAttributes = ['card_game'];
|
|
121
|
-
|
|
122
|
-
// Construct the filter arg object.
|
|
123
|
-
const newFilters = {};
|
|
124
|
-
filters.forEach((values, key) => {
|
|
125
|
-
if (mainAttributes.includes(key)) {
|
|
126
|
-
newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
|
|
127
|
-
}
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
// Use the category uid for the current category page regardless of the
|
|
131
|
-
// applied filters. Follow-up in PWA-404.
|
|
132
|
-
// newFilters['category_uid'] = { eq: id };
|
|
133
|
-
|
|
134
|
-
runQuery({
|
|
135
|
-
variables: {
|
|
136
|
-
filters: newFilters
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
}, [
|
|
140
|
-
runQuery, filterTypeMap, search
|
|
141
|
-
]);
|
|
142
|
-
|
|
143
|
-
const 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'];
|
|
144
|
-
|
|
145
|
-
// const isBackgroundLoading = !!queryResponse && loading;
|
|
146
|
-
|
|
147
|
-
const originalDataResult = useMemo(() => {
|
|
148
|
-
if (!queryResponse) {
|
|
149
|
-
return null;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
const rawData = queryResponse?.products?.aggregations;
|
|
153
|
-
if (!rawData.length) {
|
|
154
|
-
return null;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
let options = rawData.find(item => item.attribute_code === shopby).options;
|
|
158
|
-
|
|
159
|
-
const mappingData = options.reduce((acc, item) => {
|
|
160
|
-
let firstLetter = item.label.charAt(0).toUpperCase();
|
|
161
|
-
if (!alpha.includes(firstLetter)) {
|
|
162
|
-
firstLetter = '#';
|
|
163
|
-
}
|
|
164
|
-
if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
|
|
165
|
-
firstLetter = '#';
|
|
166
|
-
}
|
|
167
|
-
acc[firstLetter] = acc[firstLetter] || [];
|
|
168
|
-
acc[firstLetter].push(item);
|
|
169
|
-
return acc;
|
|
170
|
-
}, {});
|
|
171
|
-
|
|
172
|
-
const sortbyData = [];
|
|
173
|
-
|
|
174
|
-
return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
|
|
175
|
-
}, [queryResponse, sortby]);
|
|
176
|
-
|
|
177
|
-
const filteredOptions = useMemo(() => {
|
|
178
|
-
if (!queryResponse) {
|
|
179
|
-
return null;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const rawData = queryResponse?.products?.aggregations;
|
|
183
|
-
if (!rawData.length) {
|
|
184
|
-
return null;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
let options = rawData.find(item => item.attribute_code === shopby).options;
|
|
188
|
-
|
|
189
|
-
// const filteredSets = [];
|
|
190
|
-
|
|
191
|
-
// let filteredOptions = [];
|
|
192
|
-
|
|
193
|
-
// let mappingData = [];
|
|
194
|
-
|
|
195
|
-
if (searchQuery) {
|
|
196
|
-
if (active != "all") {
|
|
197
|
-
setActive('all');
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
return options.filter(function(option) {
|
|
201
|
-
return option.label.search(new RegExp(searchQuery, "i")) != -1;
|
|
202
|
-
});
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
return options;
|
|
206
|
-
}, [queryResponse, searchQuery]);
|
|
207
|
-
|
|
208
|
-
const dataResult = useMemo(() => {
|
|
209
|
-
if (filteredOptions) {
|
|
210
|
-
return filteredOptions.reduce((acc, item) => {
|
|
211
|
-
let firstLetter = item.label.charAt(0).toUpperCase();
|
|
212
|
-
if (!alpha.includes(firstLetter)) {
|
|
213
|
-
firstLetter = '#';
|
|
214
|
-
}
|
|
215
|
-
if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
|
|
216
|
-
firstLetter = '#';
|
|
217
|
-
}
|
|
218
|
-
acc[firstLetter] = acc[firstLetter] || [];
|
|
219
|
-
acc[firstLetter].push(item);
|
|
220
|
-
return acc;
|
|
221
|
-
}, {});
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
return filteredOptions;
|
|
225
|
-
}, [filteredOptions]);
|
|
226
|
-
|
|
227
|
-
let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
|
|
228
|
-
|
|
229
|
-
let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
|
|
230
|
-
|
|
231
|
-
if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
|
|
232
|
-
availableGroups = ['#'];
|
|
233
|
-
filteredAvailableGroups = ['#'];
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
const attributeData = queryResponse?.products?.aggregations && queryResponse?.products.aggregations.length ? queryResponse.products.aggregations.find(item => item.attribute_code === shopby) : null;
|
|
238
|
-
|
|
239
|
-
const { data: categoryData, loading: categoryLoading } = useQuery(
|
|
240
|
-
getCategoryContentQuery,
|
|
241
|
-
{
|
|
242
|
-
fetchPolicy: 'cache-and-network',
|
|
243
|
-
nextFetchPolicy: 'cache-first',
|
|
244
|
-
skip: !categoryId,
|
|
245
|
-
variables: {
|
|
246
|
-
id: categoryId
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
);
|
|
250
|
-
|
|
251
|
-
const pageInfo = useMemo(() => {
|
|
252
|
-
if (!queryResponse) {
|
|
253
|
-
return null;
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
return queryResponse.products.aggregations.find(item => item.attribute_code === shopby);
|
|
257
|
-
}, [queryResponse, shopby]);
|
|
258
|
-
|
|
259
|
-
const category =
|
|
260
|
-
categoryData && categoryData.categories.items.length
|
|
261
|
-
? categoryData.categories.items[0]
|
|
262
|
-
: null;
|
|
263
|
-
|
|
264
|
-
return {
|
|
265
|
-
error,
|
|
266
|
-
loading,
|
|
267
|
-
dataResult,
|
|
268
|
-
// collectibleGameSets,
|
|
269
|
-
filteredAvailableGroups,
|
|
270
|
-
categoryUrlSuffix,
|
|
271
|
-
categoryUrlKey,
|
|
272
|
-
availableGroups,
|
|
273
|
-
attributeData,
|
|
274
|
-
alpha,
|
|
275
|
-
category,
|
|
276
|
-
activeFilters,
|
|
277
|
-
pageInfo
|
|
278
|
-
// productType
|
|
279
|
-
};
|
|
280
|
-
};
|