@riosst100/pwa-marketplace 3.3.0 → 3.3.2

package/src/components/TermsOfUse/termsOfUse.css

@@ -0,0 +1,113 @@
+.root {
+    /* Theme color variables mapped from tcg-theme-preset.js */
+    --tcg-color-text: #1B1B1B;            /* textColor.colorDefault */
+    --tcg-color-link: #3d84ff;            /* brand.base */
+    --tcg-color-link-hover: #f76b1c;      /* brand.dark */
+    --tcg-color-border: #E6E9EA;          /* gray.100 */
+    --tcg-color-table-head-bg: #F8F8F8;   /* gray.50 */
+    --tcg-color-muted: #999999;           /* gray.200 */
+
+    max-width: 1300px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    color: var(--tcg-color-text);
+}
+@media (min-width: 768px) {
+    .root { padding: 0; }
+}
+
+/* Ensure CMS-injected wrapper classes are styled */
+:global(.row-content){
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.root h1,
+.root h2,
+.root h3 {
+    margin: 1.25rem 0 0.75rem;
+    font-weight: 600;
+}
+
+.root p {
+    margin: 0.75rem 0;
+    line-height: 1.7;
+    color: var(--tcg-color-text);
+}
+
+.root ul,
+.root ol {
+    margin: 0.75rem 0 0.75rem 1.25rem;
+    padding-left: 1.25rem;
+}
+.root ul { list-style: disc; }
+.root ol { list-style: decimal; }
+.root li { margin: 0.375rem 0; }
+
+.root a {
+    color: var(--tcg-color-link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.root a:hover {
+    color: var(--tcg-color-link-hover);
+}
+
+.root img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Headings scale */
+.root h1 {
+    text-align: center;
+    font-size: 1.5rem;
+    line-height: 1.3;
+    margin: 1.5rem 0 0.75rem;
+}
+@media (min-width: 768px) {
+    .root h1 { font-size: 1.75rem; }
+}
+
+.root h2 {
+    font-size: 1.125rem;
+    margin: 1.25rem 0 0.5rem;
+}
+@media (min-width: 768px) {
+    .root h2 { font-size: 1.25rem; }
+}
+
+.root h3 {
+    font-size: 1rem;
+    margin: 1rem 0 0.5rem;
+}
+
+.root hr {
+    border: 0;
+    border-top: 1px solid var(--tcg-color-border);
+    margin: 2rem 0;
+}
+
+.root table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+.root th,
+.root td {
+    border: 1px solid var(--tcg-color-border);
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+}
+.root thead th {
+    background: var(--tcg-color-table-head-bg);
+    font-weight: 600;
+}
+
+.root blockquote {
+    border-left: 3px solid var(--tcg-color-border);
+    padding-left: 1rem;
+    color: var(--tcg-color-muted);
+    margin: 1rem 0;
+}

package/src/components/TermsOfUse/termsOfUse.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import CMSPage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/cms';
+import classes from './termsOfUse.css';
+
+const TermsOfUse = () => {
+    return (
+        <div className={classes.root}>
+            <CMSPage identifier="terms-of-use" />
+        </div>
+    );
+}
+
+export default TermsOfUse;

package/src/intercept.js

@@ -101,6 +101,20 @@ module.exports = targets => {
       path: require.resolve("./components/AboutUs/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "PrivacyPolicy",
+      pattern: "/privacy-policy",
+      path: require.resolve("./components/PrivacyPolicy/index.js"),
+      authed: false,
+    },
+    {
+      exact: true,
+      name: "TermsOfUse",
+      pattern: "/terms-of-use",
+      path: require.resolve("./components/TermsOfUse/index.js"),
+      authed: false,
+    },
     {
       exact: true,
       name: "HelpCenterQuestionDetail",
@@ -185,6 +199,7 @@ module.exports = targets => {
       pattern: "/favorite-seller",
       path: require.resolve("./components/FavoriteSellerPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -192,6 +207,7 @@ module.exports = targets => {
       pattern: "/quotes",
       path: require.resolve("./components/RFQPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -199,6 +215,7 @@ module.exports = targets => {
       pattern: "/quotes/:urlKey",
       path: require.resolve("./components/RFQPage/quoteDetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -206,6 +223,7 @@ module.exports = targets => {
       pattern: "/return",
       path: require.resolve("./components/RMAPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -213,6 +231,7 @@ module.exports = targets => {
       pattern: "/return/select",
       path: require.resolve("./components/RMAPage/RMASelectPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -220,6 +239,7 @@ module.exports = targets => {
       pattern: "/return/view/:urlKey",
       path: require.resolve("./components/RMAPage/RMADetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -227,6 +247,7 @@ module.exports = targets => {
       pattern: "/return/create/:urlKey",
       path: require.resolve("./components/RMAPage/RMACreatePage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -234,6 +255,7 @@ module.exports = targets => {
       pattern: "/order-history/view/:urlKey",
       path: require.resolve("./components/OrderDetail/orderDetailPage.js"),
       authed: true,
+      redirectTo: "/sign-in"
     },
     {
       exact: true,
@@ -241,6 +263,7 @@ module.exports = targets => {
       pattern: "/messages",
       path: require.resolve("./components/MessagesPage/index.js"),
       authed: true,
+      redirectTo: "/sign-in"
     }
   ];
 

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -107,10 +107,6 @@ export const useCategory = props => {
         loading: introspectionLoading
     } = useQuery(getFilterInputsQuery);
 
-    // console.log(introspectionCalled)
-    // console.log(introspectionLoading)
-    // console.log(introspectionData)
-
     // Create a type map we can reference later to ensure we pass valid args
     // to the graphql query.
     // For example: { category_id: 'FilterEqualTypeInput', price: 'FilterRangeTypeInput' }

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js

@@ -21,6 +21,7 @@ import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/tra
 import SetsData from '@riosst100/pwa-marketplace/src/components/SetsData/setsData';
 import FilterContent from '@riosst100/pwa-marketplace/src/components/FilterContent/filterContent';
 import ShowMore from '@riosst100/pwa-marketplace/src/components/ShowMore/showMore';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -205,6 +206,7 @@ const Category = props => {
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
+            <AgeVerification pageType="CATEGORY" />
             {categoryContent}
         </Fragment>
     );

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 

package/src/overwrites/venia-ui/lib/RootComponents/Product/product.js

@@ -8,6 +8,7 @@ import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import ProductFullDetail from '@magento/venia-ui/lib/components/ProductFullDetail';
 import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
 import ProductShimmer from '@magento/venia-ui/lib/RootComponents/Product/product.shimmer';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 /*
  * As of this writing, there is no single Product query type in the M2.3 schema.
@@ -46,6 +47,7 @@ const Product = props => {
         <Fragment>
             <StoreTitle>{product.name}</StoreTitle>
             <Meta name="description" content={product.meta_description} />
+            <AgeVerification pageType="PRODUCT" product={product} />
             <ProductFullDetail product={product} />
         </Fragment>
     );

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -31,29 +31,6 @@ const Adapter = props => {
         return null;
     }
 
-    // console.log('isMaintenance',isMaintenance)
-
-    // useEffect(() => {
-    //     const fetchData = async () => {
-    //         axios.get(apiBase).then((response) => {
-    //             // setIsMaintenance(false)
-    //         }).catch((error) => {
-    //             const status = error.response.status;
-    //             if (status != 200) {
-    //                 console.log('status',status)
-    //                 return <MaintenancePage />;
-    //                 // setIsMaintenance(true)
-    //             }
-    //         });
-    //     };
-    
-    //     fetchData();
-   
-
-    // if (isMaintenance) {
-    //     return <MaintenancePage />;
-    // }
-
     const websiteCodes = [];
     const websiteStores = useMemo(() => ({}), []);
     const storeCurrencies = useMemo(() => ({}), []);

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

@@ -130,7 +130,7 @@ const Footer = props => {
                 <p className="text-colorDefault">{copyrightText || null}</p>
                 <ul className="flex flex-row gap-x-2.5">
                     <li data-cy="Footer-terms" className={classes.terms}>
-                        <Link to="/" className="text-colorDefault underline">
+                        <Link to="/terms-of-use" className="text-colorDefault underline">
                             <FormattedMessage
                                 id={'footer.termsText'}
                                 defaultMessage={'Terms of Use'}
@@ -139,7 +139,7 @@ const Footer = props => {
                     </li>
                     <Divider className="w-[1px] !h-[20px]" />
                     <li data-cy="Footer-privacy" className={classes.privacy}>
-                        <Link to="/" className="text-colorDefault underline">
+                        <Link to="/privacy-policy" className="text-colorDefault underline">
                             <FormattedMessage
                                 id={'footer.privacyText'}
                                 defaultMessage={'Privacy Policy'}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productFAQ.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo } from 'react';
+import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
+
+import useProductFAQ from '@riosst100/pwa-marketplace/src/talons/ProductFAQ/useProductFAQ';
+
+const ProductFAQ = ({ productId }) => {
+	const { loadProductFaqList, productFaqListState } = useProductFAQ();
+
+	useEffect(() => {
+		if (productId) {
+			loadProductFaqList({ productId });
+		}
+	}, [productId, loadProductFaqList]);
+
+	const { data, loading, error } = productFaqListState || {};
+	const items = useMemo(() => {
+		const list = data?.productFaqList || [];
+		// Show only active items if status provided (1 = active)
+		return list.filter(it => it?.status === 1 || it?.status === '1' || it?.status === true || it?.status === 'true' || it?.status === undefined);
+	}, [data]);
+
+	if (loading) {
+		return <div className="p-4 text-sm text-gray-600">Loading FAQs…</div>;
+	}
+
+	if (error) {
+		return (
+			<div className="p-4 text-sm text-red-600">
+				Failed to load FAQs. Please try again.
+			</div>
+		);
+	}
+
+	if (!items.length) {
+		return (
+			<div className="p-4 text-sm text-gray-600">
+				No FAQs available for this product.
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-2">
+			{items.map((faq, idx) => {
+				const headerStyle = {
+					color: faq?.title_color || undefined,
+					background: faq?.title_background || undefined,
+					fontSize: faq?.title_size ? `${faq.title_size}px` : undefined,
+					borderColor: faq?.border_color || undefined,
+					borderWidth: faq?.border_width ? `${faq.border_width}px` : undefined,
+					borderRadius: faq?.border_radius ? `${faq.border_radius}px` : undefined,
+					marginBottom: faq?.margin_bottom ? `${faq.margin_bottom}px` : undefined,
+					marginLeft: faq?.margin_left ? `${faq.margin_left}px` : undefined
+				};
+
+				const bodyStyle = {
+					color: faq?.body_color || undefined,
+					background: faq?.body_background || undefined
+				};
+
+				const title = faq?.title || `Question ${idx + 1}`;
+
+				return (
+					<Collapsible
+						key={`${faq?.question_id || idx}`}
+						title={title}
+						rootClassName="border-b border-gray-100"
+						contentWrapperClassName="!mt-0"
+						titleStyle={headerStyle}
+					>
+						<div style={bodyStyle} className="p-3 text-sm leading-relaxed">
+							{faq?.answer || 'No answer provided.'}
+						</div>
+					</Collapsible>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ProductFAQ;
+

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -30,6 +30,7 @@ import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
 import { Link } from "react-router-dom";
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 import { GET_PAYMENT_TYPES } from '@riosst100/pwa-marketplace/src/talons/ProductContent/productContent.gql.js';
+import ProductFAQ from './components/productFAQ';
 
 const WishlistButton = React.lazy(() => import('@magento/venia-ui/lib/components/Wishlist/AddToListButton'));
 const Options = React.lazy(() => import('@magento/venia-ui/lib/components/ProductOptions'));
@@ -47,8 +48,7 @@ import MessagesModal from '@riosst100/pwa-marketplace/src/components/LiveChat/Me
 import SellerOperations from '@riosst100/pwa-marketplace/src/talons/Seller/seller.gql';
 
 import { useLocation, useHistory } from 'react-router-dom';
-
-import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal';
+import AgeVerification from '@riosst100/pwa-marketplace/src/components/AgeVerification'
 
 import { totalListings, lowestPrice } from '@riosst100/pwa-marketplace/src/components/CrossSeller/crossSellerBuy';
 
@@ -87,7 +87,7 @@ const ProductDetailsCollapsible = (props) => {
 
 const ProductFullDetail = props => {
     const { product } = props;
-
+    
     const history = useHistory();
 
     const { search } = useLocation();
@@ -119,7 +119,7 @@ const ProductFullDetail = props => {
         errorAddingProductToCart,
         isAddProductLoading,
     } = talonProps;
-
+   
     const [, { addToast }] = useToasts();
     const [{ isSignedIn }] = useUserContext();
 
@@ -349,7 +349,7 @@ const ProductFullDetail = props => {
             pagebuilder: pagebuilder
         };
     }, [productDetailsAttributes, productDetails.sku, formatMessage]);
-
+    
     const shortDescription = productDetails.shortDescription ? (
         <RichText
             rootClassName="px-0"
@@ -410,7 +410,7 @@ const ProductFullDetail = props => {
             }, []),
         [customAttributesDetails.list]
     );
-
+    
     const ProductTNC = () => (
         <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
             <p>{customAttributesList.map((data, index) => {
@@ -441,21 +441,7 @@ const ProductFullDetail = props => {
         </div>
     )
 
-    const ProductFAQ = () => (
-        <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
-            {customAttributesList.map((data, index) => {
-                if (data.code == "faq") {
-                    return (
-                        <RichText
-                            rootClassName="px-0"
-                            content={data.value}
-                        />
-                    );
-                }
-            })}
-
-        </div>
-    )
+    
 
     
     const getAttributeValue = (customAttributesDetails, key, useSuffix = false) => {
@@ -475,11 +461,13 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
-    const preOrder = getAttributeValue(productCardDetailsAttributes, "card_pre_orders", true);
-    const preOrderDate = getAttributeValue(productCardDetailsAttributes, "pre_order_date", true);
-    const preOrderDeposite = getAttributeValue(productCardDetailsAttributes, "pre_order_deposit", true);
-    const preOrderNote = getAttributeValue(productCardDetailsAttributes, "pre_order_notes", true);
-    const preOrderPaymentType = getAttributeValue(productCardDetailsAttributes, "pre_order_payment_type", true);
+    // Prefer preorder info from product props; fallback to productDetails if present
+    const preorderData = (product && product.preorder) || (productDetails && productDetails.preorder) || null;
+    const preOrder = preorderData;
+    const preOrderDate = preorderData?.pre_order_date || "";
+    const preOrderDeposite = preorderData?.pre_order_deposit || "";
+    const preOrderNote = preorderData?.pre_order_notes || "";
+    const preOrderPaymentType = preorderData?.pre_order_payment_type || "";
     const releaseDate = getAttributeValue(productCardDetailsAttributes, "release_date", true);
     const setNameValue = getAttributeValue(productCardDetailsAttributes, "card_set", true);
     const cardNameValue = getAttributeValue(productCardDetailsAttributes, "card_name", true);
@@ -510,6 +498,17 @@ const ProductFullDetail = props => {
         preOrderClosingDateObj !== null &&
         new Date().getTime() > preOrderClosingDateObj.getTime();
 
+    // Ensure payment type is only set for preorder products
+    useEffect(() => {
+        if (isPreOrderProduct) {
+            if (preOrderPaymentType) {
+                setSelectedPaymentType(preOrderPaymentType);
+            }
+        } else {
+            setSelectedPaymentType(null);
+        }
+    }, [isPreOrderProduct, preOrderPaymentType]);
+
     const cartCallToActionText =
         isPreOrderClosed
             ? (
@@ -681,7 +680,11 @@ const ProductFullDetail = props => {
         {
             id: 'product-faq',
             title: 'FAQ',
-            content: <ProductFAQ />
+            content: (
+                <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
+                    <ProductFAQ productId={product?.id} />
+                </div>
+            )
         },
         {
             id: 'product-reviews',
@@ -741,7 +744,7 @@ const ProductFullDetail = props => {
             };
 
             let preorderPayload;
-            if (selectedPaymentType) {
+            if (isPreOrderProduct && selectedPaymentType) {
                 preorderPayload = {
                     pre_order_payment_type: selectedPaymentType
                 };
@@ -754,9 +757,11 @@ const ProductFullDetail = props => {
             }
 
             const nextValues = {
-                ...formValues,
-                preorder: preorderPayload
+                ...formValues
             };
+            if (preorderPayload) {
+                nextValues.preorder = preorderPayload;
+            }
             await originalHandleAddToCart(nextValues);
         } catch (e) {
             addToast({
@@ -818,7 +823,7 @@ const ProductFullDetail = props => {
         <Fragment>
             {breadcrumbs}
             {productPreviewMessages}
-            {/* <AgeVerificationModal /> */}
+            <AgeVerification />
             <Form
                 className={classes.root}
                 data-cy="ProductFullDetail-root"
@@ -949,17 +954,19 @@ const ProductFullDetail = props => {
                                             />
                                         </Suspense>
                                     </div>
-                                    <PreorderDetail 
-                                        preOrder={preOrder}
-                                        preOrderDate={preOrderDate}
-                                        preOrderDeposite={preOrderDeposite}
-                                        preOrderNote={preOrderNote}
-                                        preOrderPaymentType={preOrderPaymentType}
-                                        releaseDate={releaseDate}    
-                                        className={'preorder_detail-container'}
-                                        paymentTypeOptions={paymentTypeOptions}
-                                        onPaymentTypeChange={setSelectedPaymentType}
-                                    />
+                                    {isPreOrderProduct && (
+                                        <PreorderDetail 
+                                            preOrder={preOrder}
+                                            preOrderDate={preOrderDate}
+                                            preOrderDeposite={preOrderDeposite}
+                                            preOrderNote={preOrderNote}
+                                            preOrderPaymentType={preOrderPaymentType}
+                                            releaseDate={releaseDate}    
+                                            className={'preorder_detail-container'}
+                                            paymentTypeOptions={paymentTypeOptions}
+                                            onPaymentTypeChange={setSelectedPaymentType}
+                                        />
+                                    )}
                                     <div className='product_actions-wrapper'>
                                         {cartActionContent}
                                     </div>

package/src/talons/AgeVerification/ageVerification.gql.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const GET_AGE_VERIFICATION_CONFIG_QUERY = gql`
+    query GetAgeVerificationConfig(
+        $attributeCode: String
+        $attributeOption: String
+    ) {
+        getAgeVerificationConfig(
+            attribute_code: $attributeCode
+            attribute_option: $attributeOption
+        ) {
+            status
+            minimum_age
+        }
+    }
+`;
+
+export const GET_CATALOG_CONFIG_DATA_QUERY = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            marketplace_menu_topfilters_attributes
+        }
+    }
+`;
+
+export default {
+    getAgeVerificationConfigQuery: GET_AGE_VERIFICATION_CONFIG_QUERY,
+    getMenuTopFiltersAttributesConfigDataQuery: GET_CATALOG_CONFIG_DATA_QUERY
+};