@riosst100/pwa-marketplace 3.3.1 → 3.3.3

package/package.json

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

package/src/componentOverrideMapping.js

@@ -1,4 +1,5 @@
 module.exports = componentOverrideMapping = {
+    ['@magento/peregrine/lib/Apollo/links/storeLink.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/Apollo/links/storeLink.js',
     ['@magento/peregrine/lib/talons/CreateAccount/useCreateAccount.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CreateAccount/useCreateAccount.js',
     ['@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js',
     ['@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js']: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js',

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/AgeVerificationModal/ageVerificationModal.js

@@ -38,10 +38,12 @@ const AgeVerificationModal = props => {
             <div className={modalClasses.backdrop} />
             <div className={modalClasses.dialog}>
                 <div className={modalClasses.body}>
-                    <div><Icon src={AlertTriangle} attrs={{ width: 20 }} /></div>
+                    <div><Icon src={AlertTriangle} classes={{
+                            icon: modalClasses.icon
+                        }} attrs={{ width: 40 }} /></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>
+                    <p style={{"paddingTop": "10px"}}>You must be at least 18 years old to access this page. Please verify your age.</p>
+                    <label className={modalClasses.formLabel}>Your Birthday:</label>
                     <div className={modalClasses.birthday}>
                         {/* Month */}
                         <select onChange={(e) => setMonth(e.target.value)}>
@@ -67,7 +69,7 @@ const AgeVerificationModal = props => {
                         ))}
                         </select>
                     </div>
-                    {ageVerificationErrorMessage && <div>{ageVerificationErrorMessage}</div>}
+                    {ageVerificationErrorMessage && <div className={modalClasses.error}>{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>

package/src/components/AgeVerificationModal/ageVerificationModal.module.css

@@ -6,6 +6,13 @@
   text-align: left;
 }
 
+.formLabel {
+  font-weight: 500;
+  padding-top: 30px;
+  font-size: 13px;
+  padding-bottom: 10px;
+}
+
 /* Birthday selects */
 .birthday {
   display: flex;
@@ -28,7 +35,7 @@
 
 .btnUnder {
   flex: 1;
-  padding: 10px;
+  /* padding: 10px; */
   border: none;
   border-radius: 6px;
   color: white;
@@ -38,7 +45,7 @@
 
 .btnOver {
   flex: 1;
-  padding: 10px;
+  /* padding: 10px; */
   border: none;
   border-radius: 6px;
   color: white;
@@ -98,7 +105,7 @@
     font-size:20px;
     font-weight:600;
     margin:0;
-    color:#333
+    color:red;
 }
 .closeBtn{
     background:none;
@@ -110,12 +117,24 @@
     padding:4px 8px;
     border-radius:6px
 }
+.error {
+      color: red;
+    padding: 10px;
+    font-size: 13px;
+    margin-top: -20px;
+    margin-bottom: 20px;
+}
 .closeBtn:hover{
     background:#f5f5f5;
     color:#222
 }
+.icon {
+  --stroke: red;
+  stroke: red;
+  color: red;
+}
 .body{
-    padding: 20px 50px;
+    padding: 30px 50px;
     overflow: auto;
     display: flex;
     flex-direction: column;

package/src/components/LoadingRequest/index.js

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

package/src/components/LoadingRequest/loadingRequest.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import modalClasses from './loadingRequest.module.css';
+
+// Simple portal root fallback
+const getPortalRoot = () => {
+    let root = document.getElementById('loading-request-portal');
+    if (!root) {
+        root = document.createElement('div');
+        root.id = 'loading-request-portal';
+        document.body.appendChild(root);
+    }
+    return root;
+};
+
+const LoadingRequest = props => {
+
+    const {
+        isLoading
+    } = props;
+
+    const modal = isLoading ? (
+        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Modal">
+            <div className={modalClasses.backdrop} />
+            <div className={modalClasses.dialog}>
+                <div className={modalClasses.body}>
+                    <img src={process.env.MAGENTO_BACKEND_URL + "/media/images/spinner2.gif"} style={{"width":"15%"}} />
+                    <div style={{
+                        "marginTop": "10px",
+                        "color": "white"
+                    }}>Please wait...</div>
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    return <>{isLoading ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default LoadingRequest;

package/src/components/LoadingRequest/loadingRequest.module.css

@@ -0,0 +1,150 @@
+.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;
+    display:flex;
+    padding:5vh 24px;
+    font-family:inherit;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+.backdrop{
+    position:absolute;
+    inset:0;
+    background: rgba(0, 0, 0, 0.64);
+    backdrop-filter: blur(8px);
+}
+.dialog{
+    position:relative;
+    width:clamp(320px,80vw,500px);
+    display:flex;
+    flex-direction:column
+}
+.header{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:16px 20px;
+    border-bottom:1px solid #eee
+}
+.title{
+    font-size:20px;
+    font-weight:600;
+    margin:0;
+    color:#333
+}
+.closeBtn{
+    background:none;
+    border:none;
+    font-size:24px;
+    line-height:1;
+    cursor:pointer;
+    color:#777;
+    padding:4px 8px;
+    border-radius:6px
+}
+.closeBtn:hover{
+    background:#f5f5f5;
+    color:#222
+}
+.body{
+    padding: 20px 50px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    flex-wrap: wrap;
+    align-content: center;
+}
+.triggerBtn{
+    background:#f76b1c;
+    color:#fff;
+    border:none;
+    padding:10px 18px;
+    border-radius:8px;
+    font-weight:600;
+    cursor:pointer
+}
+.triggerBtn:hover{
+    background:#f26313
+}
+/* Vertical stack wrapper for existing sellerCoupon card styles */
+.stack{
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    padding:4px 2px 12px;
+}
+@media (max-width:640px){
+    .dialog{
+        width:92vw;
+        padding-bottom:8px
+    }
+    .grid{
+        grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
+    }
+}

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/SocialLogin/socialLogin.js

@@ -1,13 +1,7 @@
 import React, {useState} from 'react';
-import Button from '@magento/venia-ui/lib/components/Button';
-import Image from '@magento/venia-ui/lib/components/Image';
-import GoogleIcon from './img/google.svg';
-import FacebookIcon from './img/facebook.svg';
-import InstagramIcon from './img/instagram.svg';
-import WechatIcon from './img/wechat.svg';
-import WeiboIcon from './img/weibo.svg';
 import GoogleSignInButton from './googleSignInButton'
 import { useSocialLogin } from '@riosst100/pwa-marketplace/src/talons/SocialLogin/useSocialLogin';
+import LoadingRequest from '@riosst100/pwa-marketplace/src/components/LoadingRequest';
 
 const SocialLogin = () => {
     const [jwtToken, setJwtToken] = useState(null);
@@ -16,58 +10,14 @@ const SocialLogin = () => {
         jwtToken
     });
 
-    // const {
-    //     errors,
-    //     handleCreateAccount,
-    //     handleEnterKeyPress,
-    //     signinHandleEnterKeyPress,
-    //     handleForgotPassword,
-    //     forgotPasswordHandleEnterKeyPress,
-    //     handleSubmit,
-    //     isBusy,
-    //     setFormApi,
-    //     recaptchaWidgetProps
-    // } = talonProps;
+    const {
+        isLoading
+    } = talonProps;
 
     return (
         <div className='relative flex w-full justify-center items-center'>
+            <LoadingRequest isLoading={isLoading} />
             <GoogleSignInButton setToken={setJwtToken} />
-            {/* <Button
-                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
-            >
-                <Image
-                    alt='facebook'
-                    className="relative"
-                    src={FacebookIcon}
-                />
-            </Button>
-            <Button
-                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
-            >
-                <Image
-                    alt='instagram'
-                    className="relative"
-                    src={InstagramIcon}
-                />
-            </Button>
-            <Button
-                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
-            >
-                <Image
-                    alt='wechat'
-                    className="relative"
-                    src={WechatIcon}
-                />
-            </Button>
-            <Button
-                className="shadow-type-1 p-[14px] rounded-full w-[52px] h-[52px]"
-            >
-                <Image
-                    alt='weibo'
-                    className="relative"
-                    src={WeiboIcon}
-                />
-            </Button> */}
         </div>
     )
 }

package/src/components/TermsOfUse/index.js

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