@riosst100/pwa-marketplace 3.3.2 → 3.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.3.2",
+  "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/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/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/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/SignIn/signIn.js

@@ -27,6 +27,7 @@ const SignIn = props => {
         showCreateAccount,
         showForgotPassword,
         initialValues,
+        setIsLoading,
         showSocialLogin = true,
     } = props;
 
@@ -36,7 +37,8 @@ const SignIn = props => {
         getCartDetailsQuery: GET_CART_DETAILS_QUERY,
         setDefaultUsername,
         showCreateAccount,
-        showForgotPassword
+        showForgotPassword,
+        setIsLoading
     });
 
     const {

package/src/overwrites/venia-ui/lib/components/SignInPage/signInPage.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -9,37 +9,43 @@ import SignIn from '@magento/venia-ui/lib/components/SignIn';
 import cn from 'classnames';
 
 import defaultClasses from './signInPage.module.css';
+import LoadingRequest from '@riosst100/pwa-marketplace/src/components/LoadingRequest';
 
 const SignInPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const { signInProps } = useSignInPage(props);
     const { formatMessage } = useIntl();
 
+    const [isLoading, setIsLoading] = useState(false);
+
     return (
-        <div className={classes.signInRootContainer}>
-            <div className={cn(classes.root, '!py-[60px]')}>
-                <StoreTitle>
-                    {formatMessage({
-                        id: 'signInPage.title',
-                        defaultMessage: 'Sign In'
-                    })}
-                </StoreTitle>
-                <div className={cn(classes.leftContentContainer, '')}>
-                    <div class="auth-left">
-                        <img src="https://img.freepik.com/premium-vector/sign-concept-illustration_114360-125.jpg" width="50%" />
-                        <p style={{
-                            "fontSize": "20px",
-                            "fontWeight": 500
-                        }}>Sign in to start shopping or sell your collectibles.</p>
+        <>
+            <LoadingRequest isLoading={isLoading} />
+            <div className={classes.signInRootContainer}>
+                <div className={cn(classes.root, '!py-[60px]')}>
+                    <StoreTitle>
+                        {formatMessage({
+                            id: 'signInPage.title',
+                            defaultMessage: 'Sign In'
+                        })}
+                    </StoreTitle>
+                    <div className={cn(classes.leftContentContainer, '')}>
+                        <div class="auth-left">
+                            <img src="https://img.freepik.com/premium-vector/sign-concept-illustration_114360-125.jpg" width="50%" />
+                            <p style={{
+                                "fontSize": "20px",
+                                "fontWeight": 500
+                            }}>Sign in to start shopping or sell your collectibles.</p>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div className={cn(classes.root, '!py-[60px]')}>
-                <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
-                    <SignIn {...signInProps} />
+                <div className={cn(classes.root, '!py-[60px]')}>
+                    <div className={cn(classes.contentContainer, 'border border-gray-100 rounded-lg')}>
+                        <SignIn setIsLoading={setIsLoading} {...signInProps} />
+                    </div>
                 </div>
             </div>
-        </div>
+        </>
     );
 };
 

package/src/overwrites/venia-ui/lib/components/StoreCodeRoute/storeCodeRoute.js

@@ -1,8 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
-import { useCartContext } from '@magento/peregrine/lib/context/cart';
-import { useApolloClient, useQuery } from '@apollo/client';
 
 const storage = new BrowserPersistence();
 
@@ -12,7 +9,6 @@ const storage = new BrowserPersistence();
  * and reloads the page so that they are used in the graphQL headers.
  */
 const StoreCodeRoute = () => {
-    const history = useHistory();
 
     const websiteCodes = [];
     const websiteStores = useMemo(() => ({}), []);
@@ -34,61 +30,32 @@ const StoreCodeRoute = () => {
     // ie `https://example.com/fr/foo/baz.html` => `fr`.
     const { location } = globalThis;
     const match = location && location.pathname.split("/")[1];
+    const defaultWebsiteCode = process.env.WEBSITE_CODE;
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
     // Determine what the current store code is using the configured basename.
-    const currentWebsiteCode = storage && storage.getItem('website_code') || process.env.WEBSITE_CODE;
-
-    
 
     // If we find a store code in the url that is not the current one, update
     // the storage value and refresh so that we start using the new code.
     useEffect(() => {
-        if (!websiteCodeInUrl) {
-            history.replace(location.pathname + location.search)
-        } else if (websiteCodeInUrl && websiteCodeInUrl !== currentWebsiteCode) {
-            const storeCodeInUrl = websiteStores[websiteCodeInUrl];
-
-            // alert(storeCodeInUrl)
-
-            // update store/website saat url berubah, misal /id ke /sg
-
-            // issue store view code gk berubah, klo di graphql aman
-
-            // ini update di graphql dan di cookie, tapi di cookie beda klo ga di hardcode
+        if (websiteCodeInUrl) {
+            let prefix = '';
+            let storeCodeInUrl = websiteStores[websiteCodeInUrl];
 
-            // ini oke, store di graphql dari sini
-            // storeCodeInUrl = 'id_id_store_view';
-            // console.log('storeCodeInUrl',storeCodeInUrl)
-
-            // await apolloClient.clearCacheData(apolloClient, 'cart');
-            // await removeCart();
-            alert('22ok')
-            storage.removeItem('cartId');
-
-            storage.setItem('store_view_code', storeCodeInUrl);
-            storage.setItem('website_code', websiteCodeInUrl);
+            storage.setItem(prefix + 'store_view_code', storeCodeInUrl);
+            storage.setItem(prefix + 'website_code', websiteCodeInUrl);
             storage.setItem(
-                'store_view_currency',
+                prefix + 'store_view_currency',
                 storeCurrencies[storeCodeInUrl]
             );
+
             storage.setItem(
-                'store_view_secure_base_media_url',
+                prefix + '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);
         }
     }, [
-        websiteCodeInUrl,
-        // currentWebsiteCode,
-        history
-        // , apolloClient, removeCart
-        // storeCodeInUrl,
-        // storeCurrencies,
-        // storeSecureBaseMediaUrl
+        websiteCodeInUrl
     ]);
 
     return null;

package/src/talons/SocialLogin/useSocialLogin.js

@@ -31,6 +31,7 @@ export const useSocialLogin = props => {
 
     const apolloClient = useApolloClient();
     const [isSigningIn, setIsSigningIn] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
 
     const [
         { cartId },
@@ -60,6 +61,7 @@ export const useSocialLogin = props => {
 
     useEffect(async () => {
         if (jwtToken) {
+            setIsLoading(true);
             setIsSigningIn(true);
             try {
                 // Get source cart id (guest cart id).
@@ -124,6 +126,8 @@ export const useSocialLogin = props => {
                     }),
                     timeout: 5000
                 });
+
+                setIsLoading(false);
             } catch (error) {
                 if (process.env.NODE_ENV !== 'production') {
                     console.error(error);
@@ -162,6 +166,7 @@ export const useSocialLogin = props => {
 
     return {
         errors,
+        isLoading,
         // isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
         isBusy: isGettingDetails || isSigningIn,
         setFormApi