@riosst100/pwa-marketplace 3.3.1 → 3.3.3

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",

package/src/overwrites/peregrine/lib/Apollo/links/storeLink.js

@@ -0,0 +1,34 @@
+import { setContext } from '@apollo/client/link/context';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export default function createStoreLink() {
+    return setContext((_, { headers }) => {
+        const websiteCodes = [];
+
+        AVAILABLE_WEBSITES.forEach(store => {
+            websiteCodes.push(store.website_code);
+        });
+        
+        const { location } = globalThis;
+        const match = location && location.pathname.split("/")[1];
+        const websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+        let prefix = websiteCodeInUrl ? websiteCodeInUrl + '_' : '';
+
+        const storeCurrency = storage.getItem(prefix + 'store_view_currency') || null;
+        const storeCode = storage.getItem(prefix + 'store_view_code') || STORE_VIEW_CODE;
+
+        // return the headers to the context so httpLink can read them
+        return {
+            headers: {
+                ...headers,
+                store: storeCode,
+                ...(storeCurrency && {
+                    'Content-Currency': storeCurrency
+                })
+            }
+        };
+    });
+}

package/src/overwrites/peregrine/lib/context/cart.js

@@ -66,10 +66,22 @@ const CartContextProvider = props => {
     const [removeSplitCart] = useMutation(REMOVE_SPLIT_CART_MUTATION);
     const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
 
+    const websiteCodes = [];
+
+    AVAILABLE_WEBSITES.forEach(store => {
+        websiteCodes.push(store.website_code);
+    });
+    
+    const { location } = globalThis;
+    const match = location && location.pathname.split("/")[1];
+    const websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+    let prefix = websiteCodeInUrl ? websiteCodeInUrl + '_' : '';
+
     // Storage listener to force a state update if cartId changes from another browser tab.
     const storageListener = useCallback(() => {
         const storage = new BrowserPersistence();
-        const currentCartId = storage.getItem('cartId');
+        const currentCartId = storage.getItem(prefix + 'cartId');
         const { cartId } = cartState;
         if (cartId && currentCartId && cartId !== currentCartId) {
             globalThis.location && globalThis.location.reload();

package/src/overwrites/peregrine/lib/store/actions/cart/asyncActions.js

@@ -475,6 +475,18 @@ export const getCartDetails = payload => {
     };
 };
 
+const websiteCodes = [];
+
+AVAILABLE_WEBSITES.forEach(store => {
+    websiteCodes.push(store.website_code);
+});
+
+const { location } = globalThis;
+const match = location && location.pathname.split("/")[1];
+const websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+const prefix = websiteCodeInUrl ? websiteCodeInUrl + '_' : '';
+
 export const removeCart = () =>
     async function thunk(dispatch) {
         // Clear the cartId from local storage.
@@ -507,15 +519,15 @@ export async function clearSellerCartId() {
 }
 
 export async function retrieveCartId() {
-    return storage.getItem('cartId');
+    return storage.getItem(prefix + 'cartId');
 }
 
 export async function saveCartId(id) {
-    return storage.setItem('cartId', id);
+    return storage.setItem(prefix + 'cartId', id);
 }
 
 export async function clearCartId() {
-    return storage.removeItem('cartId');
+    return storage.removeItem(prefix + 'cartId');
 }
 
 async function retrieveImageCache() {

package/src/overwrites/peregrine/lib/talons/Adapter/useAdapter.js

@@ -32,9 +32,11 @@ export const useAdapter = props => {
     const match = location && location.pathname.split("/")[1];
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
+    let prefix = websiteCodeInUrl ? websiteCodeInUrl + '_' : '';
+
     let isBaseWebsite = false;
 
-    let websiteCode = storage.getItem('website_code');
+    let websiteCode = storage.getItem(prefix + 'website_code');
 
     if (!websiteCodeInUrl) {
         isBaseWebsite = true;
@@ -86,7 +88,7 @@ export const useAdapter = props => {
 
     const clearCacheData = useCallback(
         async (client, cacheType) => {
-            const storeCode = storage.getItem('store_view_code') || 'default';
+            const storeCode = storage.getItem(prefix + 'store_view_code') || 'default';
 
             // Clear current store
             if (cacheType === 'cart') {
@@ -135,11 +137,11 @@ export const useAdapter = props => {
                 }
             }
         },
-        [apolloLink, createApolloClient, createCachePersistor]
+        [apolloLink, prefix, createApolloClient, createCachePersistor]
     );
 
     const apolloClient = useMemo(() => {
-        const storeCode = storage.getItem('store_view_code') || 'default';
+        const storeCode = storage.getItem(prefix + 'store_view_code') || 'default';
         const client = createApolloClient(preInstantiatedCache, apolloLink);
         const persistor = isServer
             ? null
@@ -154,6 +156,7 @@ export const useAdapter = props => {
         apiBase,
         apolloLink,
         clearCacheData,
+        prefix,
         createApolloClient,
         createCachePersistor
     ]);

package/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js

@@ -12,6 +12,8 @@ import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/SignIn/signIn.gql'
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
+import { useToasts } from '@magento/peregrine/lib/Toasts';
+
 const storage = new BrowserPersistence();
 
 export const useSignIn = props => {
@@ -20,7 +22,8 @@ export const useSignIn = props => {
         getCartDetailsQuery,
         setDefaultUsername,
         showCreateAccount,
-        showForgotPassword
+        showForgotPassword,
+        setIsLoading
     } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
@@ -67,11 +70,14 @@ export const useSignIn = props => {
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const [, { addToast }] = useToasts();
+
     const formApiRef = useRef(null);
     const setFormApi = useCallback(api => (formApiRef.current = api), []);
 
     const handleSubmit = useCallback(
         async ({ email, password }) => {
+            setIsLoading(true)
             setIsSigningIn(true);
             // handleTriggerClick();
             try {
@@ -135,6 +141,17 @@ export const useSignIn = props => {
                 });
 
                 getCartDetails({ fetchCartId, fetchCartDetails });
+
+                addToast({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'signIn.signInSuccessToast',
+                        defaultMessage: "You have successfully signed in."
+                    }),
+                    timeout: 5000
+                });
+
+                setIsLoading(false);
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -157,6 +174,7 @@ export const useSignIn = props => {
             fetchUserDetails,
             getCartDetails,
             fetchCartDetails,
+            setIsLoading,
             dispatch,
             handleTriggerClick
         ]

package/src/overwrites/peregrine/lib/util/makeUrl.js

@@ -0,0 +1,132 @@
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+// If the root template supplies the backend URL at runtime, use it directly
+const { documentElement: htmlElement } = globalThis.document || {};
+const { imageOptimizingOrigin } = htmlElement ? htmlElement.dataset : {};
+const alreadyOptimized = imageOptimizingOrigin === 'backend';
+
+const websiteCodes = [];
+
+AVAILABLE_WEBSITES.forEach(store => {
+    websiteCodes.push(store.website_code);
+});
+
+const { location } = globalThis;
+const match = location && location.pathname.split("/")[1];
+const websiteCodeInUrl = websiteCodes.find((str) => str === match);
+
+let prefix = websiteCodeInUrl ? websiteCodeInUrl + '_' : '';
+
+// Protect against potential falsy values for `mediaBackend`.
+const storeCode = storage.getItem(prefix + 'store_view_code') || STORE_VIEW_CODE;
+const storeSecureBaseMediaUrl = {};
+
+// Fallback to global secure_base_media_url set at build time
+AVAILABLE_STORE_VIEWS.forEach(store => {
+    storeSecureBaseMediaUrl[store.store_code] = store.secure_base_media_url;
+});
+
+let mediaBackend =
+    storage.getItem(prefix + 'store_view_secure_base_media_url') ||
+    storeSecureBaseMediaUrl[storeCode];
+if (!mediaBackend) {
+    console.warn('A media backend URL should be defined in your config.');
+    mediaBackend = 'https://backend.test/media/';
+}
+
+// Tests if a URL begins with `http:` or `https:` or `data:`
+const absoluteUrl = /^(data|http|https)?:/i;
+
+// Simple path joiner that guarantees one and only one slash between segments
+const joinUrls = (base, url) =>
+    (base.endsWith('/') ? base.slice(0, -1) : base) +
+    '/' +
+    (url.startsWith('/') ? url.slice(1) : url);
+
+const mediaBases = new Map()
+    .set('image-product', 'catalog/product/')
+    .set('image-category', 'catalog/category/')
+    .set('image-swatch', 'attribute/swatch/');
+
+const getFileType = url => {
+    const fileName = url.pathname.split('/').reverse()[0];
+    const fileType = fileName.split('.').reverse()[0];
+
+    return fileType;
+};
+
+/**
+ * Creates an "optimized" url for a provided relative url based on
+ * requested media type and width. Any image URLs (whose type begins with
+ * "image-" will also be optimized.)
+ *
+ * If a `type` is provided the `path` will be joined with the associated media
+ * base.
+ *  - `catalog/product/path/to/img.jpg`
+ *
+ * If a `width` is provided, "resize parameters" are added to the URL for
+ * middlewares (either onboard or backend) to return using the desired width
+ * and original media url.
+ *  - `catalog/product/path/to/img.jpg?width=500&auto=webp&format=pjpg
+ *
+ * If only `path` is provided it is returned unaltered.
+ *
+ * @param {string} path - absolute or relative url to resource.
+ * @param {Object} props - properties describing desired optimizations
+ * @param {string} props.type - "image-product" or "image-category"
+ * @param {number} props.width - the desired resize width of the image
+ * @param {number} props.height - the desired resize height of the image
+ * @param {number} props.quality - the desired quality of the image
+ * @param {bool} props.crop - should the image be cropped
+ * @param {string} props.fit - how should the image be fit with the dimensions: bounds, cover, crop
+ */
+const makeOptimizedUrl = (path, { type, ...opts } = {}) => {
+    // Immediate return if there's no image optimization to attempt
+    if (!type || !type.startsWith('image-')) {
+        return path;
+    }
+
+    const { origin } = globalThis.location || {};
+    const isAbsolute = absoluteUrl.test(path);
+    const magentoBackendURL = process.env.MAGENTO_BACKEND_URL;
+    let baseURL = new URL(path, mediaBackend);
+
+    // If URL is relative and has a supported type, prepend media base onto path
+    if (!isAbsolute && mediaBases.has(type)) {
+        const mediaBase = mediaBases.get(type);
+        if (!baseURL.pathname.includes(mediaBase)) {
+            baseURL = new URL(joinUrls(mediaBase, path), mediaBackend);
+        }
+    }
+
+    if (baseURL.href.startsWith(magentoBackendURL) && !alreadyOptimized) {
+        // Replace URL base so optimization middleware can handle request
+        baseURL = new URL(baseURL.href.slice(magentoBackendURL.length), origin);
+    }
+
+    // Append image optimization parameters
+    const params = new URLSearchParams(baseURL.search);
+    params.set('auto', 'webp'); // Use the webp format if available
+
+    const imageFileType = getFileType(baseURL);
+    if (imageFileType === 'png') {
+        params.set('format', 'png'); // use png if webp is not available
+    } else {
+        params.set('format', 'pjpg'); // Use progressive JPG if webp is not available
+    }
+
+    Object.entries(opts).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+            params.set(key, value);
+        }
+    });
+    baseURL.search = params.toString();
+    if (baseURL.origin === origin) {
+        return baseURL.href.slice(baseURL.origin.length);
+    }
+    return baseURL.href;
+};
+
+export default makeOptimizedUrl;

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

@@ -106,63 +106,67 @@ const Adapter = props => {
             // await removeCart();
 
             // klo enabled jd redirect tros
-            storage.removeItem('cartId');
-
-            storage.setItem('store_view_code', storeCodeInUrl);
-            storage.setItem('website_code', websiteCodeInUrl);
-            storage.setItem(
-                'store_view_currency',
-                storeCurrencies[storeCodeInUrl]
-            );
-            storage.setItem(
-                'store_view_secure_base_media_url',
-                storeSecureBaseMediaUrl[storeCodeInUrl]
-            );
+            // storage.removeItem('cartId');
+
+            // storage.setItem('store_view_code', storeCodeInUrl);
+            // storage.setItem('website_code', websiteCodeInUrl);
+            // storage.setItem(
+            //     'store_view_currency',
+            //     storeCurrencies[storeCodeInUrl]
+            // );
+            // storage.setItem(
+            //     'store_view_secure_base_media_url',
+            //     storeSecureBaseMediaUrl[storeCodeInUrl]
+            // );
 
             // We're required to reload the page as the basename doesn't
             // change entirely without a full page reload.
             // history.go(0);
         }
 
-        console.log('currentWebsiteCode',currentWebsiteCode)
-
-        if (!websiteCodeInUrl && getWebsiteByUserIp) {
-            setVerifyUserIp(false);
-
-            const search = location.search;
-            
-            const query = new URLSearchParams(search);
-            const isAccessBaseWebsite = query.get('access_base_website') || (
-                storage.getItem('access_base_website') || null
-            );
+        // console.log('currentWebsiteCode',currentWebsiteCode)
 
-            // const websiteCode = getWebsiteByUserIp.countryCode && !isAccessBaseWebsite ? getWebsiteByUserIp.countryCode.toLowerCase() : process.env.WEBSITE_CODE;
+        if (!websiteCodeInUrl) {
             const websiteCode = process.env.WEBSITE_CODE;
+            // if (websiteCode != storage.getItem('website_code')) {
+                setVerifyUserIp(false);
+
+                const search = location.search;
+                
+                const query = new URLSearchParams(search);
+                const isAccessBaseWebsite = query.get('access_base_website') || (
+                    storage.getItem('access_base_website') || null
+                );
 
-            if (websiteCodes.find((str) => str === websiteCode)) {
-                routerProps.basename = websiteCode != process.env.WEBSITE_CODE && !isAccessBaseWebsite ? '/'+websiteCode : '/';
+                // const websiteCode = getWebsiteByUserIp.countryCode && !isAccessBaseWebsite ? getWebsiteByUserIp.countryCode.toLowerCase() : process.env.WEBSITE_CODE;
 
-                setNewRouterProps(routerProps);
+                if (websiteCodes.find((str) => str === websiteCode)) {
+                    routerProps.basename = websiteCode != process.env.WEBSITE_CODE && !isAccessBaseWebsite ? '/'+websiteCode : '/';
 
-                if (isAccessBaseWebsite) {
-                    storage.setItem('access_base_website', 1);
-                }
+                    setNewRouterProps(routerProps);
 
-                let storeCodeInUrl = websiteStores[websiteCode];
+                    if (isAccessBaseWebsite) {
+                        storage.setItem('access_base_website', 1);
+                    }
 
-                storage.removeItem('cartId');
+                    let storeCodeInUrl = websiteStores[websiteCode];
 
-                storage.setItem('store_view_code', storeCodeInUrl);
-                storage.setItem('website_code', websiteCode);
-                storage.setItem(
-                    'store_view_currency',
-                    storeCurrencies[storeCodeInUrl]
-                );
-                storage.setItem(
-                    'store_view_secure_base_media_url',
-                    storeSecureBaseMediaUrl[storeCodeInUrl]
-                );
-            }
+                    if (websiteCode != storage.getItem('website_code')) {
+                        storage.removeItem('cartId');
+                    }
+
+                    storage.setItem('store_view_code', storeCodeInUrl);
+                    storage.setItem('website_code', websiteCode);
+                    storage.setItem(
+                        'store_view_currency',
+                        storeCurrencies[storeCodeInUrl]
+                    );
+                    storage.setItem(
+                        'store_view_secure_base_media_url',
+                        storeSecureBaseMediaUrl[storeCodeInUrl]
+                    );
+                }
+            // }
         }
     }, [websiteCodeInUrl, currentWebsiteCode]);
 

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'}