@riosst100/pwa-marketplace 3.1.1 → 3.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/HelpCenter/helpCenter.js

@@ -0,0 +1,151 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import { Link, useLocation, useHistory } from 'react-router-dom';
+import useHelpCenter from '@riosst100/pwa-marketplace/src/talons/HelpCenter/useHelpCenter';
+import classes from './helpcenter.module.css';
+
+const HelpCenter = () => {
+	const { loading, error, data } = useHelpCenter();
+	const history = useHistory();
+	const location = useLocation();
+
+	const queryParams = new URLSearchParams(location.search);
+	const activeTag = queryParams.get('tag') || '';
+
+	const tagCounts = useMemo(() => {
+		const counts = {};
+		(data.questions || []).forEach(q => {
+			const tags = Array.isArray(q.tags) ? q.tags : (typeof q.tags === 'string' ? q.tags.split(',') : []);
+			tags.map(t => t && t.trim()).filter(Boolean).forEach(t => {
+				counts[t] = (counts[t] || 0) + 1;
+			});
+		});
+		return counts;
+	}, [data.questions]);
+
+	const [expandedId, setExpandedId] = useState(null);
+	const toggleExpanded = useCallback((id) => {
+		setExpandedId(prev => prev === id ? null : id);
+	}, []);
+
+	const getExcerpt = useCallback((html, limit = 420) => {
+		if (!html) return { text: '', truncated: false };
+		const text = html
+			.replace(/<style[\s\S]*?<\/style>/gi, ' ')
+			.replace(/<script[\s\S]*?<\/script>/gi, ' ')
+			.replace(/<[^>]+>/g, ' ')
+			.replace(/&nbsp;/g, ' ')
+			.replace(/\s+/g, ' ')
+			.trim();
+		if (text.length <= limit) return { text, truncated: false };
+		const cut = text.slice(0, limit);
+		const lastSpace = cut.lastIndexOf(' ');
+		const snippet = (lastSpace > 0 ? cut.slice(0, lastSpace) : cut).trim() + '...';
+		return { text: snippet, truncated: true };
+	}, []);
+
+	const visibleQuestions = useMemo(() => {
+		const qs = data.questions || [];
+		if (!activeTag) return qs;
+		return qs.filter(q => {
+			const tags = Array.isArray(q.tags) ? q.tags : (typeof q.tags === 'string' ? q.tags.split(',') : []);
+			return tags.map(t => t && t.trim()).includes(activeTag);
+		});
+	}, [data.questions, activeTag]);
+
+	const onSelectTag = useCallback(tag => {
+		const params = new URLSearchParams(location.search);
+		if (tag) {
+			params.set('tag', tag);
+		} else {
+			params.delete('tag');
+		}
+		history.push({ pathname: location.pathname, search: params.toString() });
+	}, [history, location]);
+
+	if (loading) {
+		return <div>Loading Help Center…</div>;
+	}
+
+	if (error) {
+		return <div>We\'re sorry, an error has occurred while generating this content.</div>;
+	}
+
+	return (
+		<div className={classes.container}>
+			<h1 className={classes.title}>User Help Center</h1>
+			<div className={classes.grid}>
+			<aside className={classes.sidebar}>
+				<div className={classes.sidebarHeader}>TAGS</div>
+				<div className={classes.tagsWrap}>
+					{Object.keys(tagCounts).length === 0 && (
+						<span className={classes.emptyState}>No tags</span>
+					)}
+					{Object.entries(tagCounts).map(([tag, count]) => (
+						<button
+							key={tag}
+							onClick={() => onSelectTag(tag)}
+							className={`${classes.tagButton} ${activeTag === tag ? classes.tagButtonActive : ''}`}
+						>
+							{tag.toUpperCase()} ({count})
+						</button>
+					))}
+				</div>
+			</aside>
+			<main className={classes.main}>
+				{activeTag && (
+					<h2 className={classes.tagTitle}>Tag : {activeTag}</h2>
+				)}
+				{visibleQuestions.map(q => {
+					const isOpen = expandedId === q.question_id;
+					return (
+						<article key={q.question_id} className={classes.questionCard}>
+							<header
+								onClick={() => toggleExpanded(q.question_id)}
+								className={`${classes.questionHeader} ${isOpen ? classes.questionHeaderOpen : ''}`}
+							>
+								<span className={classes.plusIcon}>{isOpen ? '−' : '+'}</span>
+								{q.title}
+							</header>
+							{isOpen && (
+								<section className={classes.questionBody}>
+									{q.answer ? (
+										(() => {
+											const { text, truncated } = getExcerpt(q.answer);
+											return (
+												<>
+													<p className={classes.excerpt}>{text} {truncated && (
+														<Link to={`/help-center/question/${q.question_id}`} className={classes.tagLink}>Read more</Link>
+													)}</p>
+												</>
+											);
+										})()
+									) : (
+										<div>We\'re sorry, an error has occurred while generating this content.</div>
+									)}
+									<div className={classes.published}>
+										<small>
+											{q.update_time ? `on ${new Date(q.update_time).toLocaleDateString()} ` : ''}
+											Published in: {Array.isArray(q.tags) ? (
+												q.tags.map((t, idx) => (
+													<Link key={idx} to={`/help-center?tag=${encodeURIComponent(t)}`} className={classes.tagLink}>{t}{idx < q.tags.length - 1 ? ', ' : ''}</Link>
+												))
+											) : (
+												<Link to={`/help-center?tag=${encodeURIComponent(q.tags)}`} className={classes.tagLink}>{q.tags}</Link>
+											)}
+										</small>
+									</div>
+								</section>
+							)}
+						</article>
+					);
+				})}
+				{visibleQuestions.length === 0 && (
+					<div className={classes.emptyState}>No questions found.</div>
+				)}
+			</main>
+			</div>
+		</div>
+	);
+};
+
+export default HelpCenter;

package/src/components/HelpCenter/helpcenter.module.css

@@ -0,0 +1,225 @@
+.container {}
+
+.grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 24px;
+}
+
+.title {
+  margin-top: 16px;
+  font-size: 17px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.detailTitle {
+  margin-top: 8px;
+  margin-bottom: 16px;
+  font-size: 32px;
+  line-height: 1.25;
+  font-weight: 700;
+}
+
+.sidebar {
+  border: 1px solid #E6E9EA;
+  border-radius: 6px;
+  max-height: max-content;
+}
+
+.sidebarHeader {
+  padding: 12px;
+  border-bottom: 1px solid #E6E9EA;
+  font-weight: 600;
+  background-color: #F2F2F2;
+}
+
+.tagsWrap {
+  padding: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tagButton {
+  border: 1px solid #E6E9EA;
+  padding: 8px 10px;
+  background: #F8F8F8;
+  color: #f76b1c;
+  cursor: pointer;
+}
+
+.tagButtonActive {
+  background: #fff3e6;
+}
+
+.main {}
+
+.tagTitle {
+  margin: 0;
+  margin-bottom: 16px;
+}
+
+.questionCard {
+  border: 1px solid #E6E9EA;
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+
+.questionCardDetail {
+  border-radius: 6px;
+  margin-bottom: 16px;
+}
+
+.questionHeader {
+  padding: 12px;
+  background: #F2F2F2;
+  color: #f76b1c;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.questionHeaderOpen {
+  background: #fff3e6;
+}
+
+.plusIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  background: #f76b1c;
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.questionBody {
+  padding: 16px 12px;
+  color: #292D32;
+  font-size: 16px;
+  line-height: 1.7;
+}
+.container{
+    margin: 3rem 0px;
+}
+.excerpt {
+  color: #292D32;
+}
+
+.published {
+  margin-top: 8px;
+  color: #999999;
+}
+
+.tagLink {
+  color: #f76b1c;
+}
+.emptyState {
+  color: #999999; 
+}
+
+.tagsLine {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.tagPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  border-radius: 0px 4px 4px 0px;
+  background: #292D32;
+  color: #fff;
+  font-size: 12px;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.tagPill::before {
+    content: '';
+    position: absolute;
+    left: -13px;
+    top: 50%;
+    transform: translateY(-53%);
+    width: 0;
+    height: 0;
+    border-top: 13px solid transparent;
+    border-bottom: 13px solid transparent;
+    border-right: 14px solid #292D32;
+}
+
+.tagPill::after {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 5px;
+  height: 5px;
+  background: #fff;
+  border-radius: 50%;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .container {
+    margin: 1.5rem 0;
+  }
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  .sidebar {
+    border-radius: 8px;
+  }
+  .tagsWrap {
+    gap: 6px;
+  }
+  .tagButton {
+    padding: 8px 12px;
+    border-radius: 6px;
+  }
+  .title {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+  .tagTitle {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+  .questionCard {
+    margin-bottom: 12px;
+  }
+  .questionHeader {
+    padding: 12px;
+    font-size: 14px;
+  }
+  .plusIcon {
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .questionBody {
+    padding: 12px;
+    font-size: 15px;
+    line-height: 1.6;
+  }
+  .tagsLine {
+    gap: 18px;
+  }
+  .tagPill {
+    font-size: 11px;
+    padding: 4px 8px;
+  }
+}

package/src/components/HelpCenter/index.js

@@ -0,0 +1 @@
+export { default } from './helpCenter';

package/src/components/HelpCenter/questionDetail.js

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import useHelpCenter from '@riosst100/pwa-marketplace/src/talons/HelpCenter/useHelpCenter';
+import classes from './helpcenter.module.css';
+
+const QuestionDetail = () => {
+    const { questionId } = useParams();
+    const { loading, error, data } = useHelpCenter();
+
+    const tagCounts = useMemo(() => {
+        const counts = {};
+        (data.questions || []).forEach(q => {
+            const tags = Array.isArray(q.tags) ? q.tags : (typeof q.tags === 'string' ? q.tags.split(',') : []);
+            tags.map(t => t && t.trim()).filter(Boolean).forEach(t => {
+                counts[t] = (counts[t] || 0) + 1;
+            });
+        });
+        return counts;
+    }, [data.questions]);
+
+    const question = useMemo(() => {
+        const id = Number(questionId);
+        return (data.questions || []).find(q => Number(q.question_id) === id) || null;
+    }, [data.questions, questionId]);
+
+    if (loading) return <div>Loading…</div>;
+    if (error) return <div>We\'re sorry, an error has occurred while generating this content.</div>;
+    if (!question) return <div className={classes.emptyState}>Question not found.</div>;
+
+    return (
+        <div className={classes.container}>
+            <div className={classes.grid}>
+                <aside className={classes.sidebar}>
+                    <div className={classes.sidebarHeader}>TAGS</div>
+                    <div className={classes.tagsWrap}>
+                        {Object.keys(tagCounts).length === 0 && (
+                            <span className={classes.emptyState}>No tags</span>
+                        )}
+                        {Object.entries(tagCounts).map(([tag, count]) => (
+                            <Link key={tag} to={`/help-center?tag=${encodeURIComponent(tag)}`} className={`${classes.tagButton}`}>
+                                {tag.toUpperCase()} ({count})
+                            </Link>
+                        ))}
+                    </div>
+                </aside>
+                <main>
+                    <h1 className={classes.detailTitle}>{question.title}</h1>
+                    <article className={classes.questionCardDetail}>
+                        <section className={classes.questionBody}>
+                            {question.answer ? (
+                                <div dangerouslySetInnerHTML={{ __html: question.answer }} />
+                            ) : (
+                                <div>We\'re sorry, an error has occurred while generating this content.</div>
+                            )}
+                            <div className={classes.published}>
+                                <p>
+                                    {question.update_time ? `on ${new Date(question.update_time).toLocaleDateString()} ` : ''}
+                                    Published in: {Array.isArray(question.tags) ? (
+                                        question.tags.map((t, idx) => (
+                                            <Link key={idx} to={`/help-center?tag=${encodeURIComponent(t)}`} className={classes.tagLink}>{t}{idx < question.tags.length - 1 ? ', ' : ''}</Link>
+                                        ))
+                                    ) : (
+                                        <Link to={`/help-center?tag=${encodeURIComponent(question.tags)}`} className={classes.tagLink}>{question.tags}</Link>
+                                    )}
+                                </p>
+                            </div>
+                            <div className={classes.tagsLine}>
+                                <strong>TAGS:</strong>
+                                {Array.isArray(question.tags) ? (
+                                    question.tags.map((t, idx) => (
+                                        <span key={idx} className={classes.tagPill}>
+                                            {String(t).toUpperCase()}
+                                        </span>
+                                    ))
+                                ) : (
+                                    <span className={classes.tagPill}>
+                                        {String(question.tags).toUpperCase()}
+                                    </span>
+                                )}
+                            </div>
+                        </section>
+                    </article>
+                </main>
+            </div>
+        </div>
+    );
+};
+
+export default QuestionDetail;

package/src/intercept.js

@@ -87,6 +87,20 @@ module.exports = targets => {
       authed: true,
       redirectTo: "/sign-in"
     },
+    {
+      exact: true,
+      name: "HelpCenter",
+      pattern: "/help-center",
+      path: require.resolve("./components/HelpCenter/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "HelpCenterQuestionDetail",
+      pattern: "/help-center/question/:questionId",
+      path: require.resolve("./components/HelpCenter/questionDetail.js"),
+      authed: false,
+    },
     {
       exact: true,
       name: "VerifyEmailPage",

package/src/overwrites/venia-ui/lib/components/Footer/sampleData.js

@@ -10,7 +10,7 @@ const getToKnowUsLinks = new Map()
     .set('About TCG Collective', null)
     .set('Career', '/')
     .set('Contact Us', '/')
-    .set('Help Center', '/')
+    .set('Help Center', '/help-center')
     .set('Intelectual Property Claims', '/');
 
 const aboutLinks = new Map()

package/src/talons/FilterContent/useFilterContent.js

@@ -108,7 +108,8 @@ export const useFilterContent = props => {
 
             getFilters({
                 variables: {
-                    filters: newFilters
+                    filters: newFilters,
+                    category_uid: categoryId
                 }
             });
         }

package/src/talons/HelpCenter/helpCenter.gql.js

@@ -0,0 +1,93 @@
+import { gql } from '@apollo/client';
+
+export const FAQ_CATEGORIES = gql`
+    query faqCategories {
+        faqCategories {
+            body_background
+            border_color
+            border_radius
+            border_width
+            category_id
+            creation_time
+            description
+            icon
+            is_active
+            margin_bottom
+            margin_left
+            meta_description
+            meta_keywords
+            page_title
+            parent_id
+            position
+            seller_id
+            status
+            store_id
+            title
+            title_background
+            title_color
+            title_size
+            update_time
+        }
+    }
+`;
+
+export const FAQ_QUESTIONS = gql`
+    query faqQuestions {
+        faqQuestions {
+            _first_store_id
+            animation_class
+            animation_speed
+            answer
+            author_email
+            author_name
+            body_bg
+            body_color
+            body_size
+            border_width
+            creation_time
+            disklike
+            is_active
+            is_featured
+            like
+            meta_description
+            meta_keywords
+            page_title
+            question_active_icon
+            question_icon
+            question_id
+            question_margin
+            question_position
+            question_type
+            question_url
+            store_code
+            store_id
+            tags
+            title
+            title_bg
+            title_bg_active
+            title_border_color
+            title_border_radius
+            title_color
+            title_color_active
+            title_size
+            update_time
+        }
+    }
+`;
+
+export const FAQ_TAGS = gql`
+    query faqTags {
+        faqTags {
+            alias
+            name
+            question_id
+            tag_id
+        }
+    }
+`;
+
+export default {
+    faqCategoriesQuery: FAQ_CATEGORIES,
+    faqQuestionsQuery: FAQ_QUESTIONS,
+    faqTagsQuery: FAQ_TAGS
+};

package/src/talons/HelpCenter/useHelpCenter.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { useQuery } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './helpCenter.gql';
+
+export const useHelpCenter = (props = {}) => {
+    const { formatMessage } = useIntl();
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        faqCategoriesQuery,
+        faqQuestionsQuery,
+        faqTagsQuery
+    } = operations;
+
+    const {
+        data: categoriesData,
+        loading: categoriesLoading,
+        error: categoriesError
+    } = useQuery(faqCategoriesQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const {
+        data: questionsData,
+        loading: questionsLoading,
+        error: questionsError
+    } = useQuery(faqQuestionsQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const {
+        data: tagsData,
+        loading: tagsLoading,
+        error: tagsError
+    } = useQuery(faqTagsQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const loading = categoriesLoading || questionsLoading || tagsLoading;
+    const error = categoriesError || questionsError || tagsError || null;
+
+    const data = useMemo(() => ({
+        categories: categoriesData?.faqCategories || [],
+        questions: questionsData?.faqQuestions || [],
+        tags: tagsData?.faqTags || []
+    }), [categoriesData, questionsData, tagsData]);
+
+    return {
+        loading,
+        error,
+        data,
+        formatMessage
+    };
+};
+
+export default useHelpCenter;

package/src/talons/ProductContent/productContent.gql.js

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
+        $category_uid: String
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(
+            filter: { category_uid: $categoryIdFilter }
+            category_uid: $category_uid
+        ) {
             aggregations {
                 label
                 count

package/src/talons/ProductContent/useProductContent.js

@@ -87,7 +87,8 @@ export const useProductContent = props => {
                 variables: {
                     categoryIdFilter: {
                         eq: categoryId
-                    }
+                    },
+                    category_uid: categoryId
                 }
             });
         }

package/src/talons/SellerProducts/productContent.gql.js

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
+        $category_uid: String
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(
+            filter: { category_uid: $categoryIdFilter }
+            category_uid: $category_uid
+        ) {
             aggregations {
                 label
                 count

package/src/talons/SellerProducts/useProductContent.js

@@ -75,7 +75,8 @@ export const useProductContent = props => {
                 variables: {
                     categoryIdFilter: {
                         eq: categoryId
-                    }
+                    },
+                    category_uid: categoryId
                 }
             });
         }

package/src/talons/ShopBy/shopBy.gql.js

@@ -63,8 +63,9 @@ export const GET_FILTER_INPUTS = gql`
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductMainFiltersByCategory(
         $filters: ProductAttributeFilterInput!
+        $category_uid: String
     ) {
-        products(filter: $filters) {
+        products(filter: $filters category_uid: $category_uid) {
             aggregations {
                 label
                 count

package/src/talons/ShopBy/useShopBy.js

@@ -133,11 +133,12 @@ export const useShopBy = props => {
 
         runQuery({
             variables: {
-                filters: newFilters
+                filters: newFilters,
+                category_uid: categoryId
             }
         });
     }, [
-        runQuery, filterTypeMap, search
+        runQuery, filterTypeMap, search, categoryId
     ]);
 
     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'];

package/src/talons/ShowMore/showMore.gql.js

@@ -63,8 +63,9 @@ export const GET_FILTER_INPUTS = gql`
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductMainFiltersByCategory(
         $filters: ProductAttributeFilterInput!
+        $category_uid: String
     ) {
-        products(filter: $filters) {
+        products(filter: $filters category_uid: $category_uid) {
             aggregations {
                 label
                 count

package/src/talons/ShopBy copy/useShopBy.js

@@ -1,280 +0,0 @@
-import { useQuery, useLazyQuery } from '@apollo/client';
-import { useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
-import DEFAULT_OPERATIONS from '@riosst100/pwa-marketplace/src/talons/ShowMore/shopBy.gql';
-import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
-
-export const useShopBy = props => {
-
-    const { searchQuery, activeFilter, active, setActive, currentSort, categoryId, shopby } = props
-
-    const { value: sortby } = currentSort
-
-    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
-    const { getStoreConfigData, getShopByDataQuery, getCategoryContentQuery, getFilterInputsQuery, getProductFiltersByCategoryQuery, getMasterAttributesQuery } = operations;
-    const { pathname, search } = useLocation();
-    // const [
-    //     ,
-    //     {
-    //         actions: { setPageLoading }
-    //     }
-    // ] = useAppContext();
-
-    const [runQuery, { data: queryResponse, loading, error }] = useLazyQuery(
-        getProductFiltersByCategoryQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first'
-        }
-    );
-
-    // const [runQuery, {data: queryResponse, loading, error}] = useLazyQuery(getShopByDataQuery, {
-    //     fetchPolicy: 'cache-and-network',
-    //     nextFetchPolicy: 'cache-first'
-    // });
-
-    const { data: storeConfigData } = useQuery(getStoreConfigData, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const pathnameArr = pathname.split('/');
-    
-    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
-    
-    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
-
-    const { data: introspectionData } = useQuery(getFilterInputsQuery);
-
-    const filterTypeMap = useMemo(() => {
-        const typeMap = new Map();
-        if (introspectionData) {
-            introspectionData.__type.inputFields.forEach(({ name, type }) => {
-                typeMap.set(name, type.name);
-            });
-        }
-        return typeMap;
-    }, [introspectionData]);
-
-    const filters = getFiltersFromSearch(search);
-
-    const { newFilters, activeFilters } = useMemo(() => {
-        const resultFilters = {};
-        const resultActiveFilters = [];
-
-        if (filterTypeMap.size) {
-            filters.forEach((values, key) => {
-                resultFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-
-                if (key === "sc_baseball_release") {
-                    for (let item of values) {
-                        if (item) {
-                            const data = search.split('&');
-                            data.pop();
-                            resultActiveFilters.push({
-                                label: item.split(',')[0],
-                                path: data
-                            });
-                        }
-                    }
-                }
-            });
-        }
-
-        return { newFilters: resultFilters, activeFilters: resultActiveFilters };
-    }, [filterTypeMap]);
-
-    // MASTER ATTRIBUTES
-    const {
-        called: masterAttributesCalled,
-        data: masterAttributesData,
-        loading: masterAttributesLoading
-    } = useQuery(getMasterAttributesQuery,
-    {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
-
-    const masterAttributes = useMemo(() => {
-        const masterAttributes = [];
-        
-        if (masterAttributesData) {
-            masterAttributesData.masterAttributes.forEach(({ attribute_code }) => {
-                masterAttributes.push(attribute_code);
-            });
-        }
-
-        return masterAttributes;
-    }, [masterAttributesData]);
-
-    useEffect(() => {
-
-        if (!filterTypeMap.size) {
-            return;
-        }
-
-        const filters = getFiltersFromSearch(search);
-
-        const mainAttributes = ['card_game'];
-
-        // Construct the filter arg object.
-        const newFilters = {};
-        filters.forEach((values, key) => {
-            if (mainAttributes.includes(key)) {
-                newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
-            }
-        });
-
-        // Use the category uid for the current category page regardless of the
-        // applied filters. Follow-up in PWA-404.
-        // newFilters['category_uid'] = { eq: id };
-
-        runQuery({
-            variables: {
-                filters: newFilters
-            }
-        });
-    }, [
-        runQuery, filterTypeMap, search
-    ]);
-
-    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'];
-
-    // const isBackgroundLoading = !!queryResponse && loading;
-
-    const originalDataResult = useMemo(() => {
-        if (!queryResponse) {
-            return null;
-        }
-        
-        const rawData = queryResponse?.products?.aggregations;
-        if (!rawData.length) {
-            return null;
-        }
-
-        let options = rawData.find(item => item.attribute_code === shopby).options;
-
-        const mappingData = options.reduce((acc, item) => {
-            let firstLetter = item.label.charAt(0).toUpperCase();
-            if (!alpha.includes(firstLetter)) {
-                firstLetter = '#';
-            }
-            if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
-                firstLetter = '#';
-            }
-            acc[firstLetter] = acc[firstLetter] || [];
-            acc[firstLetter].push(item);
-            return acc;
-        }, {});
-
-        const sortbyData = [];
-
-        return sortby != "all" ? sortbyData && sortbyData.length ? sortbyData.sort((a, b) => b.release_type.toLowerCase().localeCompare(a.release_type.toLowerCase())) : sortbyData : mappingData;
-    }, [queryResponse, sortby]);
-
-    const filteredOptions = useMemo(() => {
-        if (!queryResponse) {
-            return null;
-        }
-        
-        const rawData = queryResponse?.products?.aggregations;
-        if (!rawData.length) {
-            return null;
-        }
-
-        let options = rawData.find(item => item.attribute_code === shopby).options;
-
-        // const filteredSets = [];
-
-        // let filteredOptions = [];
-
-        // let mappingData = [];
-
-        if (searchQuery) {
-            if (active != "all") {
-                setActive('all');
-            }
-
-            return options.filter(function(option) {
-                return option.label.search(new RegExp(searchQuery, "i")) != -1;
-            });
-        }
-
-        return options;
-    }, [queryResponse, searchQuery]);
-
-    const dataResult = useMemo(() => {
-        if (filteredOptions) {
-            return filteredOptions.reduce((acc, item) => {
-                let firstLetter = item.label.charAt(0).toUpperCase();
-                if (!alpha.includes(firstLetter)) {
-                    firstLetter = '#';
-                }
-                if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
-                    firstLetter = '#';
-                }
-                acc[firstLetter] = acc[firstLetter] || [];
-                acc[firstLetter].push(item);
-                return acc;
-            }, {});
-        }
-
-        return filteredOptions;
-    }, [filteredOptions]);
-
-    let availableGroups = originalDataResult ? Object.keys(originalDataResult).sort() : [];
-
-    let filteredAvailableGroups = dataResult ? Object.keys(dataResult).sort() : [];
-    
-    if (shopby == "vehicles_year" || shopby == "trains_gauge" || shopby == "vehicles_scale" || shopby == "lego_theme" || shopby == "lego_subtheme" || shopby == "lego_interest") {
-        availableGroups = ['#'];
-        filteredAvailableGroups = ['#'];
-    }
-
-
-    const attributeData = queryResponse?.products?.aggregations && queryResponse?.products.aggregations.length ? queryResponse.products.aggregations.find(item => item.attribute_code === shopby) : null;
-
-    const { data: categoryData, loading: categoryLoading } = useQuery(
-        getCategoryContentQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first',
-            skip: !categoryId,
-            variables: {
-                id: categoryId
-            }
-        }
-    );
-
-    const pageInfo = useMemo(() => {
-        if (!queryResponse) {
-            return null;
-        }
-
-        return queryResponse.products.aggregations.find(item => item.attribute_code === shopby);
-    }, [queryResponse, shopby]);
-
-    const category =
-        categoryData && categoryData.categories.items.length
-            ? categoryData.categories.items[0]
-            : null;
-
-    return {
-        error,
-        loading,
-        dataResult,
-    //     collectibleGameSets,
-        filteredAvailableGroups,
-        categoryUrlSuffix,
-        categoryUrlKey,
-        availableGroups,
-        attributeData,
-        alpha,
-        category,
-        activeFilters,
-        pageInfo
-    //     productType
-    };
-};