@riosst100/pwa-marketplace 3.3.0 → 3.3.2

package/package.json

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

package/src/components/AboutUs/aboutUs.css

@@ -0,0 +1,111 @@
+.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/AboutUs/aboutUs.js

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

package/src/components/AgeVerification/ageVerification.js

@@ -0,0 +1,121 @@
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import AgeVerificationModal from '@riosst100/pwa-marketplace/src/components/AgeVerificationModal';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useToasts } from '@magento/peregrine/lib/Toasts';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useAgeVerification } from '@riosst100/pwa-marketplace/src/talons/AgeVerification/useAgeVerification'
+
+const storage = new BrowserPersistence();
+
+const AgeVerification = (props) => {
+    const { pageType, product } = props;
+    
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const [month, setMonth] = useState("");
+    const [day, setDay] = useState("");
+    const [year, setYear] = useState("");
+    const [ageVerificationErrorMessage, setAgeVerificationErrorMessage] = useState("");
+
+    const history = useHistory();
+    const location = useLocation();
+
+    const [, { addToast }] = useToasts();
+
+    const handleClose = () => setModalOpen(false);
+
+    const {
+        error,
+        loading,
+        ageVerificationConfig
+     } = useAgeVerification({ pageType, product });
+
+    const months = [
+        "January","February","March","April","May","June",
+        "July","August","September","October","November","December"
+    ];
+
+    const savedAge = storage.getItem('age');
+    
+    useEffect(() => {
+        if (ageVerificationConfig && ageVerificationConfig.status) {
+            if (savedAge && savedAge > 18) {
+                setModalOpen(false);
+            } else {
+                setModalOpen(true);
+            }
+        }
+    }, [loading, setModalOpen, savedAge, ageVerificationConfig]);
+
+    const redirectUser = () => {
+        const currentPathname = location.pathname;
+        let historyPathname = history.location.pathname;
+        if (historyPathname == currentPathname) {
+            historyPathname = '/';
+        }
+
+        addToast({
+            type: 'error',
+            message: 'Access is restricted because you are under 18 years old.',
+            dismissable: true,
+            timeout: 5000
+        });
+
+        history.push(historyPathname)
+    };
+
+    const handleUnderAge = useCallback(() => {
+        redirectUser();
+    }, [])
+
+    const handleOverAge = useCallback(() => {
+        if (!day || !month || !year) {
+            setAgeVerificationErrorMessage('Please enter your birthday!');
+            return false;
+        }
+
+        const birthDate = new Date(
+            year,
+            months.indexOf(month),
+            day
+        );
+        const today = new Date();
+        const age = today.getFullYear() - birthDate.getFullYear();
+        const isBirthdayPassed =
+        today >= new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate());
+
+        if (age > 18 || (age === 18 && isBirthdayPassed)) {
+            storage.setItem('age', age);
+
+            addToast({
+                type: 'success',
+                message: 'Thank you for confirming your age. Your birthday has been saved. You may now continue.',
+                dismissable: true,
+                timeout: 5000
+            });
+            
+            handleClose();
+            return true;
+        }
+        
+        redirectUser();
+        return;
+    }, [day, month, year])
+
+    
+
+    return modalOpen ? (
+        <AgeVerificationModal
+            ageVerificationErrorMessage={ageVerificationErrorMessage}
+            modalOpen={modalOpen}
+            months={months}
+            setMonth={setMonth}
+            setDay={setDay}
+            setYear={setYear}
+            handleOverAge={handleOverAge}
+            handleUnderAge={handleUnderAge}
+        />
+    ) : ''
+};
+
+export default AgeVerification;

package/src/components/AgeVerification/index.js

@@ -1,2 +1 @@
-export { default } from './ageVerificationModal';
-// export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';
+export { default } from './ageVerification';

package/src/components/AgeVerificationModal/ageVerificationModal.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import modalClasses from './ageVerificationModal.module.css';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { AlertTriangle } from 'react-feather';
+
+
+// Simple portal root fallback
+const getPortalRoot = () => {
+    let root = document.getElementById('age-verification-portal');
+    if (!root) {
+        root = document.createElement('div');
+        root.id = 'age-verification-portal';
+        document.body.appendChild(root);
+    }
+    return root;
+};
+
+const AgeVerificationModal = props => {
+
+    const {
+        setMonth,
+        setDay,
+        setYear,
+        handleOverAge,
+        handleUnderAge,
+        ageVerificationErrorMessage,
+        modalOpen,
+        months
+    } = props;
+
+    const currentYear = new Date().getFullYear();
+    const years = Array.from({ length: 100 }, (_, i) => currentYear - i);
+    const days = Array.from({ length: 31 }, (_, i) => i + 1);
+
+    const modal = modalOpen ? (
+        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Modal">
+            <div className={modalClasses.backdrop} />
+            <div className={modalClasses.dialog}>
+                <div className={modalClasses.body}>
+                    <div><Icon src={AlertTriangle} attrs={{ width: 20 }} /></div>
+                    <h2 className={modalClasses.title}>Are you over 18 years old?</h2>
+                    <p>You must be at least 18 years old to access this page. Please verify your age.</p>
+                    <label>Your Birthday</label>
+                    <div className={modalClasses.birthday}>
+                        {/* Month */}
+                        <select onChange={(e) => setMonth(e.target.value)}>
+                        <option value="">Month</option>
+                        {months.map((m) => (
+                            <option key={m} value={m}>{m}</option>
+                        ))}
+                        </select>
+
+                        {/* Day */}
+                        <select onChange={(e) => setDay(e.target.value)}>
+                        <option value="">Day</option>
+                        {days.map((d) => (
+                            <option key={d} value={d}>{d}</option>
+                        ))}
+                        </select>
+
+                        {/* Year */}
+                        <select onChange={(e) => setYear(e.target.value)}>
+                        <option value="">Year</option>
+                        {years.map((y) => (
+                            <option key={y} value={y}>{y}</option>
+                        ))}
+                        </select>
+                    </div>
+                    {ageVerificationErrorMessage && <div>{ageVerificationErrorMessage}</div>}
+                    <div className={modalClasses.actions}>
+                        <button className={modalClasses.btnUnder} onClick={handleUnderAge}>I'm under 18 years old</button>
+                        <button className={modalClasses.btnOver} onClick={handleOverAge}>I'm 18 years old</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    return <>{modalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default AgeVerificationModal;

package/src/components/{AgeVerification → AgeVerificationModal}/ageVerificationModal.module.css

@@ -1,26 +1,89 @@
+.modal label {
+  display: block;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  text-align: left;
+}
+
+/* Birthday selects */
+.birthday {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.birthday select {
+  flex: 1;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+}
+
+/* Buttons */
+.actions {
+  display: flex;
+  gap: 10px;
+}
+
+.btnUnder {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btnOver {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btnUnder {
+  background: #ef4444;
+}
+
+.btnOver {
+  background: #22c55e;
+}
+
+.btnOver:hover {
+  opacity: 0.9;
+}
+
+.btnUnder:hover {
+  opacity: 0.9;
+}
+
 .overlay{
     position:fixed;
     inset:0;
-    z-index:1000;
     display:flex;
-    align-items:flex-start;
-    justify-content:center;
     padding:5vh 24px;
-    font-family:inherit
+    font-family:inherit;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
 }
 .backdrop{
     position:absolute;
     inset:0;
-    background:rgba(0,0,0,.4);
-    backdrop-filter:blur(2px)
+    background: rgba(0, 0, 0, 0.64);
+    backdrop-filter: blur(8px);
 }
 .dialog{
     position:relative;
     background:#fff;
     border-radius:12px;
     box-shadow:0 8px 32px rgba(0,0,0,.25);
-    width:clamp(320px,80vw,370px);
-    max-height:90vh;
+    width:clamp(320px,80vw,500px);
     display:flex;
     flex-direction:column
 }
@@ -52,8 +115,12 @@
     color:#222
 }
 .body{
-    padding:16px 20px;
-    overflow:auto
+    padding: 20px 50px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    flex-wrap: wrap;
 }
 .triggerBtn{
     background:#f76b1c;

package/src/components/AgeVerificationModal/index.js

@@ -0,0 +1,2 @@
+export { default } from './ageVerificationModal';
+// export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';

package/src/components/Messages/messages.js

@@ -20,7 +20,6 @@ const Messages = props => {
     onSend,
     loading } = props;
     const classes = useStyle(defaultClasses, props.classes);
-    // const { becomeSellerProps } = useMessages(props);
     const { formatMessage } = useIntl();
     
         const [selectedThread, setSelectedThread] = useState(null);
@@ -69,20 +68,11 @@ const Messages = props => {
         const { location } = globalThis;
 
         const query = new URLSearchParams(location.search);
-        
-
-        // console.log('query',query)
-        // console.log('messageId',messageId)
     
         useEffect(() => {
             const messageId = query.get('id') || null;
-            console.log('query',query)
-        console.log('messageId',messageId)
-    
             if (messageId && sortedThreads?.length) {
                 const selectedThread = sortedThreads.find(t => t.message_id == messageId);
-                console.log('sortedThreads',sortedThreads)
-                console.log('selectedThread',selectedThread)
                 if (selectedThread) {
                     console.log('selectedThread',selectedThread)
                     setSelectedThread(selectedThread);

package/src/components/PrivacyPolicy/index.js

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

package/src/components/PrivacyPolicy/privacyPolicy.css

@@ -0,0 +1,125 @@
+.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);
+}
+:global(.row-content){
+    max-width: 1300px;
+    width: 100%;
+    margin: 0 auto;
+}
+@media (min-width: 768px) {
+    .root { padding: 0; }
+}
+
+.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;
+}
+
+.root ul,
+.root ol {
+    margin: 0.75rem 0 0.75rem 1.25rem;
+}
+
+.root a {
+    color: var(--tcg-color-link);
+    text-decoration: underline;
+}
+.root a:hover {
+    color: var(--tcg-color-link-hover);
+}
+
+.root img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Enhanced typography & layout for CMS content */
+.root > :first-child { margin-top: 0; }
+.root > :last-child { margin-bottom: 0; }
+
+.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 p {
+    color: var(--tcg-color-text);
+    line-height: 1.8;
+}
+
+.root ul,
+.root ol {
+    padding-left: 1.25rem;
+}
+.root ul { list-style: disc; }
+.root ol { list-style: decimal; }
+.root li { margin: 0.375rem 0; }
+
+.root a {
+    text-underline-offset: 2px;
+}
+
+.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/PrivacyPolicy/privacyPolicy.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 './privacyPolicy.css';
+
+const PrivacyPolicy = () => {
+    return (
+        <div className={classes.root}>
+            <CMSPage identifier="privacy-policy" />
+        </div>
+    );
+}
+
+export default PrivacyPolicy;

package/src/components/RFQPage/quoteDetail.js

@@ -26,12 +26,11 @@ const quoteDetail = () => {
     const { fetchCartId, addToCartResponseData, isAddProductLoading, errorAddingProductToCart, loadRfqDetail, rfqDetailState, handleSendRfqMessage, startDetailPolling, stopDetailPolling, handleConvertQuickrfqToCart } = useRFQ();
 
     const apolloClient = useApolloClient();
-    const [{ createCart, removeCart }] = useCartContext();
+    const [{ cartId }, { createCart, removeCart }] = useCartContext();
 
     useEffect(async() => {
         if (
             addToCartResponseData 
-            && !addToCartResponseData?.addProductsToCart?.user_errors.length 
             && !isAddProductLoading 
             && !errorAddingProductToCart
         ) {
@@ -369,7 +368,7 @@ const quoteDetail = () => {
                         classes={{
                             content: 'capitalize text-[16px] font-medium'
                         }}
-                        disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue) || status === 'Done'}
+                        // disabled={isConverting || !quickrfqIdValue || isNaN(quickrfqIdValue) || status === 'Done'}
                         aria-busy={isConverting}
                         onClick={handleConvertQuickrfqToCart}
                     >

package/src/components/ShowMore/showMore.js

@@ -82,25 +82,28 @@ const ShowMore = props => {
     if (shopby == 'sc_brands') {
         additionalFilter = '&shopby=release&active_tab=brand';
     }
-
+    
     const setRelases = newAvailableGroups && newAvailableGroups.length && newAvailableGroups.map((group, index) => {
         const optionsResult = [];
 
         if (active === 'all' || active === group) {
             dataResult[group] && dataResult[group].length && dataResult[group].map((option, index) => {
                 const { count, label, value } = option;
+                
+                const attrCodeParam = attributeData.attribute_code + '[filter]';
+                const attrValParam = label + ',' + value;
 
-                const filter = attributeData.attribute_code + '[filter]=' + label + ',' + value;
-                const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
+                const params = new URLSearchParams();
+                params.set(attrCodeParam, attrValParam);
 
                 const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}${params}`
+                    `/${category?.url_path}${categoryUrlSuffix || ''}${'?' + params.toString()}`
                 );
 
                 optionsResult.push(<li key={index} className='list-none'>
                     <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-0">
                         {label}
-                         {/* <span className='text-[12px]'>({count})</span> */}
+                        {/* <span className='text-[12px]'>({count})</span> */}
                     </Link>
                 </li>)
             });

package/src/components/TermsOfUse/index.js

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