@riosst100/pwa-marketplace 3.1.2 → 3.1.4

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/components/ProductContent/productContent.js

@@ -74,7 +74,7 @@ const ProductContent = props => {
     // console.log(filters)
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar hideFilters={false} children={[]} filters={filters} allowedFilters={[]} />
+        <FilterSidebar children={[]} filters={filters} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

package/src/components/RMAPage/components/productItem.css

@@ -0,0 +1,15 @@
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}

package/src/components/RMAPage/components/productItem.module.css

@@ -0,0 +1,15 @@
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}

package/src/components/RelatedProducts/index.js

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

package/src/components/RelatedProducts/relatedProducts.js

@@ -0,0 +1,44 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRelatedProducts } from '@riosst100/pwa-marketplace/src/talons/RelatedProducts/useRelatedProducts';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
+import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail/sellerDetail';
+
+const RelatedProducts = props => {
+    const { categoryUrlKey } = props;
+
+    const talonProps = useRelatedProducts({
+        mapSeller
+    });
+
+    const { error, loading, seller } = talonProps;
+
+    if (loading && !seller)
+        return '';
+    // return <SellerShimmer />;
+    if (error && !seller) return <ErrorView />;
+    if (!seller) {
+        return (
+            <h1>
+                <FormattedMessage
+                    id={'seller.notFound'}
+                    defaultMessage={
+                        'Seller Not Found.'
+                    }
+                />
+            </h1>
+        );
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{seller.name}</StoreTitle>
+            <Meta name="description" content={seller.description} />
+            {seller && <SellerDetail seller={seller} />}
+        </Fragment>
+    );
+};
+
+export default RelatedProducts;

package/src/components/SellerMegaMenu/__tests__/MegaMenu.spec.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+
+import MegaMenu from '../megaMenu';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('@magento/peregrine/lib/hooks/useIsInViewport');
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
+    useMegaMenu: jest.fn().mockReturnValue({
+        megaMenuData: {
+            id: 1,
+            name: 'Clothing',
+            children: [
+                {
+                    id: 2,
+                    name: 'Women',
+                    url_path: 'women',
+                    children: [
+                        {
+                            id: 5,
+                            name: 'Bottoms',
+                            url_path: 'bottoms',
+                            isActive: true,
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: 'Men',
+                    url_path: 'men',
+                    children: []
+                },
+                {
+                    id: 4,
+                    name: 'Gear',
+                    url_path: 'gear',
+                    children: []
+                }
+            ]
+        },
+        activeCategoryId: 5,
+        categoryUrlSuffix: '.html',
+        useOutsideAlerter: () => {}
+    })
+}));
+
+describe('#MegaMenu', () => {
+    test('useEffect', () => {
+        const useEffect = jest.spyOn(React, 'useEffect');
+
+        const mockUseEffect = () => {
+            useEffect.mockImplementationOnce(mockFunction => mockFunction());
+        };
+
+        mockUseEffect();
+    });
+
+    test('not resetting the menu', () => {
+        const handleClickOutside = jest.fn();
+
+        expect(handleClickOutside).toHaveBeenCalledTimes(0);
+    });
+
+    it('renders empty div if not in viewport', () => {
+        useIsInViewport.mockReturnValue(false);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders menu if in viewport', () => {
+        useIsInViewport.mockReturnValue(true);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});