@riosst100/pwa-marketplace 3.2.5 → 3.2.7

package/src/talons/RFQ/useRFQ.js

@@ -0,0 +1,81 @@
+import { useLazyQuery, useMutation } from '@apollo/client';
+import { useCallback } from 'react';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './rfq.gql';
+
+export const useRFQ = props => {
+	const operations = mergeOperations(DEFAULT_OPERATIONS, props?.operations);
+	const {
+		getQuickRfqListQuery,
+		getQuickRfqDetailQuery,
+		createQuickRfqMutation,
+		sendRfqMessageMutation,
+		convertQuickrfqToCartMutation
+	} = operations;
+
+	const [fetchRfqList, rfqListState] = useLazyQuery(getQuickRfqListQuery, {
+		fetchPolicy: 'network-only',
+		nextFetchPolicy: 'cache-first'
+	});
+
+	const [fetchRfqDetail, rfqDetailState] = useLazyQuery(getQuickRfqDetailQuery, {
+		fetchPolicy: 'network-only',
+		nextFetchPolicy: 'cache-first',
+		notifyOnNetworkStatusChange: true,
+		errorPolicy: 'all'
+	});
+
+	const [createQuickRfq, createState] = useMutation(createQuickRfqMutation);
+	const [sendRfqMessage, sendMessageState] = useMutation(sendRfqMessageMutation);
+	const [convertQuickrfqToCart, convertState] = useMutation(convertQuickrfqToCartMutation);
+
+	const loadRfqList = useCallback(
+		variables => fetchRfqList({ variables }),
+		[fetchRfqList]
+	);
+
+	const loadRfqDetail = useCallback(
+		variables => {
+			const id = variables && variables.quickrfqId;
+			const parsedId = typeof id === 'number' ? id : parseInt(id, 10);
+			if (isNaN(parsedId)) {
+				return Promise.resolve(null);
+			}
+			return fetchRfqDetail({ variables: { quickrfqId: parsedId } });
+		},
+		[fetchRfqDetail]
+	);
+
+	const handleCreateQuickRfq = useCallback(
+		input => createQuickRfq({ variables: { input } }),
+		[createQuickRfq]
+	);
+
+	const handleSendRfqMessage = useCallback(
+		input => sendRfqMessage({ variables: { input } }),
+		[sendRfqMessage]
+	);
+
+	const handleConvertQuickrfqToCart = useCallback(
+		quickrfqId => convertQuickrfqToCart({ variables: { quickrfqId } }),
+		[convertQuickrfqToCart]
+	);
+
+	return {
+		loadRfqList,
+		rfqListState,
+		loadRfqDetail,
+		rfqDetailState,
+		startDetailPolling: rfqDetailState && rfqDetailState.startPolling ? rfqDetailState.startPolling : undefined,
+		stopDetailPolling: rfqDetailState && rfqDetailState.stopPolling ? rfqDetailState.stopPolling : undefined,
+		handleCreateQuickRfq,
+		createState,
+		handleSendRfqMessage,
+		sendMessageState,
+		handleConvertQuickrfqToCart,
+		convertState
+	};
+};
+
+export default useRFQ;

package/src/talons/SellerMegaMenu/megaMenu.gql.js

@@ -10,9 +10,9 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_MEGA_MENU = gql`
-    query getSellerMegaMenu {
+    query getSellerMegaMenu($sellerUrl: String!) {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        sellerCategories {
+        sellerCategories(sellerUrl: $sellerUrl) {
             uid
             name
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
@@ -79,11 +79,12 @@ export const GET_MEGA_MENU = gql`
                     }
                 }
             }
+            __typename
         }
     }
 `;
 
 export default {
-    getMegaMenuQuery: GET_MEGA_MENU,
+    getSellerMegaMenuQuery: GET_MEGA_MENU,
     getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/src/talons/SellerMegaMenu/useSellerMegaMenu.js

@@ -20,10 +20,11 @@ import DEFAULT_OPERATIONS from './megaMenu.gql';
  */
 export const useSellerMegaMenu = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
+    const { getSellerMegaMenuQuery, getStoreConfigQuery } = operations;
 
     const location = useLocation();
     const [activeCategoryId, setActiveCategoryId] = useState(null);
+    const [activeCategory, setActiveCategory] = useState(null);
     const [sellerSubMenuState, setSellerSubMenuState] = useState(false);
     const [disableFocus, setDisableFocus] = useState(false);
 
@@ -32,9 +33,11 @@ export const useSellerMegaMenu = (props = {}) => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const { data } = useQuery(getMegaMenuQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
+    const { sellerUrl } = props;
+
+    const { data } = useQuery(getSellerMegaMenuQuery, {
+        variables: { sellerUrl: sellerUrl },
+        fetchPolicy: 'cache-and-network'
     });
 
     const categoryUrlSuffix = useMemo(() => {
@@ -66,7 +69,7 @@ export const useSellerMegaMenu = (props = {}) => {
 
             const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
 
-            return location.pathname === categoryUrlPath;
+            return location.pathname.includes(categoryUrlPath);
         },
         [location.pathname, categoryUrlSuffix]
     );
@@ -119,6 +122,29 @@ export const useSellerMegaMenu = (props = {}) => {
 
     const history = useHistory();
 
+    const setQueryPath = ({ history, location, pathname, replace }) => {
+        // const { pathname } = location;
+        
+        const destination = { pathname: pathname };
+
+        if (replace) {
+            history.replace(destination);
+        }
+    };
+
+    const setDefaultCategory = useCallback(
+        (pathname) => {
+            // Update the query parameter.
+            setQueryPath({
+                history,
+                location,
+                pathname,
+                replace: true
+            });
+        },
+        [history, location]
+    );
+
     const setQueryParam = ({ history, location, parameter, replace, value }) => {
         const { search } = location;
         const queryParams = new URLSearchParams(search);
@@ -147,25 +173,19 @@ export const useSellerMegaMenu = (props = {}) => {
         [history, location]
     );
 
-    useEffect(() => {
-        const { search } = location;
+    const hasCategoryPath = (pathname) => {
+        // const pathname = new URL(url).pathname;
+        const parts = pathname.split("/").filter(Boolean);
 
-        // if (category && category.default_top_filter) {
-        //     const defaultTopFilter = category.default_top_filter;
+        // cari index "seller"
+        const sellerIndex = parts.indexOf("seller");
 
-        //     const attrCode = defaultTopFilter.attribute_code;
-        //     const label = defaultTopFilter.label;
-        //     const value = defaultTopFilter.value;
+        if (sellerIndex === -1) return false;
 
-        //     if (!search.includes(attrCode)) {
-        //         setDefaultSubcategoryAndTopFilter(
-        //             label + ',' + value, 
-        //             attrCode + '[filter]', 
-        //             true
-        //         );
-        //     }
-        // }
-    }, [category, location, setDefaultSubcategoryAndTopFilter]);
+        // seller/<store-name> → minimal 2 segment
+        // kalau lebih dari itu → ada category path
+        return parts.length > sellerIndex + 2;
+    }
 
     const findActiveCategory = useCallback(
         (pathname, category) => {
@@ -182,6 +202,70 @@ export const useSellerMegaMenu = (props = {}) => {
         [isActive]
     );
 
+    useEffect(() => {
+        const activeCategory = findActiveCategory(
+            location.pathname,
+            megaMenuData
+        );
+
+        console.log('megaMenuData',megaMenuData)
+        console.log('activeCategory',activeCategory)
+
+        if (activeCategory) {
+            setActiveCategoryId(activeCategory.path[0]);
+            setActiveCategory(activeCategory);
+        } else {
+            setActiveCategoryId(null);
+            setActiveCategory(null);
+        }
+    }, [findActiveCategory, location.pathname, megaMenuData]);
+
+    useEffect(() => {
+        const { search, pathname } = location;
+
+        console.log('category555',category)
+
+        if (!hasCategoryPath(pathname) && category && category.url_path) {
+            const url_path = category.url_path;
+            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
+            const newPathname = pathname.replace(/\/+$/, "");
+
+            if (!newPathname.includes(categoryUrlPath)) {
+                setDefaultCategory(
+                    newPathname + categoryUrlPath
+                );
+            }
+        }
+    }, [category, location, setDefaultCategory]);
+
+    useEffect(() => {
+        const { search } = location;
+
+        if (activeCategory && activeCategory.default_top_filter) {
+            const defaultTopFilter = activeCategory.default_top_filter;
+
+            console.log('activeCategory',activeCategory)
+            console.log('2defaultTopFilte344444',defaultTopFilter)
+            console.log('search',search)
+
+            const attrCode = defaultTopFilter.attribute_code;
+            const label = defaultTopFilter.label;
+            const value = defaultTopFilter.value;
+
+            if (!search.includes(attrCode)) {
+                console.log('setDefaultSubcategoryAndTopFilter',attrCode)
+
+                setDefaultSubcategoryAndTopFilter(
+                    label + ',' + value, 
+                    attrCode + '[filter]', 
+                    true
+                );
+            }
+        }
+    }, [activeCategory, location, setDefaultSubcategoryAndTopFilter]);
+
+   
+
     const handleClickOutside = e => {
         if (!props.mainNavRef.current.contains(e.target)) {
             setSellerSubMenuState(false);
@@ -195,18 +279,7 @@ export const useSellerMegaMenu = (props = {}) => {
         setSellerSubMenuState(true);
     }, [setSellerSubMenuState]);
 
-    useEffect(() => {
-        const activeCategory = findActiveCategory(
-            location.pathname,
-            megaMenuData
-        );
-
-        if (activeCategory) {
-            setActiveCategoryId(activeCategory.path[0]);
-        } else {
-            setActiveCategoryId(null);
-        }
-    }, [findActiveCategory, location.pathname, megaMenuData]);
+    
 
     /**
      * Sets next root component to show proper loading effect

package/src/talons/SellerMegaMenu/useSellerMegaMenuItem.js

@@ -4,7 +4,7 @@ export const useSellerMegaMenuItem = props => {
     const { category, activeCategoryId, sellerSubMenuState, disableFocus } = props;
 
     const [isFocused, setIsFocused] = useState(false);
-    const isActive = category.id === activeCategoryId;
+    const isActive = category.uid === activeCategoryId;
 
     const handleMenuItemFocus = useCallback(() => {
         setIsFocused(true);

package/src/talons/SellerProducts/useProductContent.js

@@ -146,17 +146,21 @@ export const useProductContent = props => {
         if (category && category.default_top_filter) {
             const defaultTopFilter = category.default_top_filter;
 
+            // console.log('defaultTopFilter222',defaultTopFilter)
+
             const attrCode = defaultTopFilter.attribute_code;
             const label = defaultTopFilter.label;
             const value = defaultTopFilter.value;
 
-            if (!search.includes(attrCode)) {
-                setDefaultSubcategoryAndTopFilter(
-                    label + ',' + value, 
-                    attrCode + '[filter]', 
-                    true
-                );
-            }
+            // if (!search.includes(attrCode)) {
+            //     console.log('setDefaultSubcategoryAndTopFilter',attrCode)
+
+            //     setDefaultSubcategoryAndTopFilter(
+            //         label + ',' + value, 
+            //         attrCode + '[filter]', 
+            //         true
+            //     );
+            // }
         }
     }, [category, location, setDefaultSubcategoryAndTopFilter]);
 

package/src/talons/SocialLogin/socialLogin.gql.js

@@ -0,0 +1,106 @@
+import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+
+export const GET_CART_DETAILS_QUERY = gql`
+    query GetCartDetailsAfterSignIn($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    name
+                    sku
+                    small_image {
+                        url
+                        label
+                    }
+                    price {
+                        regularPrice {
+                            amount {
+                                value
+                            }
+                        }
+                    }
+                }
+                quantity
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                ... on ConfigurableCartItem {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    configurable_options {
+                        configurable_product_option_uid
+                        option_label
+                        configurable_product_option_value_uid
+                        value_label
+                    }
+                }
+            }
+            prices {
+                grand_total {
+                    value
+                    currency
+                }
+            }
+            ...CartPageFragment
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export const GET_CUSTOMER = gql`
+    query GetCustomerAfterSignIn {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            email
+            firstname
+            lastname
+            is_subscribed
+            is_seller
+        }
+    }
+`;
+
+export const CREATE_CART = gql`
+    mutation CreateCartAfterSignIn {
+        cartId: createEmptyCart
+    }
+`;
+
+export const MERGE_CARTS = gql`
+    mutation MergeCartsAfterSignIn(
+        $sourceCartId: String!
+        $destinationCartId: String!
+    ) {
+        mergeCarts(
+            source_cart_id: $sourceCartId
+            destination_cart_id: $destinationCartId
+        ) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+            }
+            ...CheckoutPageFragment
+        }
+    }
+    ${CheckoutPageFragment}
+`;
+
+export const SOCIAL_GOOGLE_AUTHENTICATE = gql`
+    mutation SocialGoogleAuthenticate($jwt_token: String!) {
+        socialGoogleAuthenticate(jwt_token: $jwt_token) {
+            token
+        }
+    }
+`;
+
+export default {
+    GET_CART_DETAILS_QUERY: GET_CART_DETAILS_QUERY,
+    createCartMutation: CREATE_CART,
+    getCustomerQuery: GET_CUSTOMER,
+    mergeCartsMutation: MERGE_CARTS,
+    socialGoogleAuthenticateMutation: SOCIAL_GOOGLE_AUTHENTICATE
+};

package/src/talons/SocialLogin/useSocialLogin.js

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { retrieveCartId } from '@magento/peregrine/lib/store/actions/cart';
+import { useToasts } from '@magento/peregrine/lib/Toasts';
+import DEFAULT_OPERATIONS from './socialLogin.gql'
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export const useSocialLogin = props => {
+    const {
+        jwtToken
+    } = props;
+
+    const [, { addToast }] = useToasts();
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        createCartMutation,
+        getCustomerQuery,
+        mergeCartsMutation,
+        getCartDetailsQuery,
+        socialGoogleAuthenticateMutation
+    } = operations;
+
+    const apolloClient = useApolloClient();
+    const [isSigningIn, setIsSigningIn] = useState(false);
+
+    const [
+        { cartId },
+        { createCart, removeCart, getCartDetails }
+    ] = useCartContext();
+
+    const [
+        { isGettingDetails, getDetailsError },
+        { getUserDetails, setToken }
+    ] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
+
+    const [signIn, { error: signInError }] = useMutation(socialGoogleAuthenticateMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const generateReCaptchaData = null;
+
+    const [fetchCartId] = useMutation(createCartMutation);
+    const [mergeCarts] = useMutation(mergeCartsMutation);
+    const fetchUserDetails = useAwaitQuery(getCustomerQuery);
+    const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
+
+    const formApiRef = useRef(null);
+    const setFormApi = useCallback(api => (formApiRef.current = api), []);
+
+    useEffect(async () => {
+        if (jwtToken) {
+            setIsSigningIn(true);
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Sign in and set the token.
+                const signInResponse = await signIn({
+                    variables: {
+                        jwt_token: jwtToken
+                    }
+                });
+
+                const token = signInResponse.data.socialGoogleAuthenticate.token;
+                await setToken(token);
+
+                await getUserDetails({ fetchUserDetails });
+
+                // Clear all cart/customer data from cache and redux.
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+                await apolloClient.clearCacheData(apolloClient, 'customer');
+                await removeCart();
+
+                // Create and get the customer's cart id.
+                await createCart({
+                    fetchCartId
+                });
+                const destinationCartId = await retrieveCartId();
+
+                // Merge the guest cart into the customer cart.
+                await mergeCarts({
+                    variables: {
+                        destinationCartId,
+                        sourceCartId
+                    }
+                });
+
+                // Ensure old stores are updated with any new data.
+                
+
+                const { data } = await fetchUserDetails({
+                    fetchPolicy: 'cache-only'
+                });
+
+                if (data.customer.is_seller) {
+                    storage.setItem('is_seller', true);
+                }
+
+                dispatch({
+                    type: 'USER_SIGN_IN',
+                    payload: {
+                        ...data.customer
+                    }
+                });
+
+                getCartDetails({ fetchCartId, fetchCartDetails });
+
+                addToast({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'signIn.signInSuccessToast',
+                        defaultMessage: "You have successfully signed in."
+                    }),
+                    timeout: 5000
+                });
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+
+                setIsSigningIn(false);
+            }
+        }
+    }, [
+            jwtToken,
+            cartId,
+            generateReCaptchaData,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            dispatch
+        ]
+    );
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['getUserDetailsQuery', getDetailsError],
+                ['socialGoogleAuthenticateMutation', signInError]
+            ]),
+        [getDetailsError, signInError]
+    );
+
+    return {
+        errors,
+        // isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        isBusy: isGettingDetails || isSigningIn,
+        setFormApi
+    };
+};