@riosst100/pwa-marketplace 2.4.7 → 2.4.9

package/src/overwrites/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -0,0 +1,434 @@
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import {
+    useApolloClient,
+    useLazyQuery,
+    useMutation,
+    useQuery
+} from '@apollo/client';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { setCheckoutState} from '@magento/peregrine/lib/store/actions/cart';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js';
+
+import CheckoutError from '@magento/peregrine/lib/talons/CheckoutPage/CheckoutError';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+export const CHECKOUT_STEP = {
+    SHIPPING_ADDRESS: 1,
+    SHIPPING_METHOD: 2,
+    PAYMENT: 3,
+    REVIEW: 4
+};
+
+/**
+ *
+ * @param {DocumentNode} props.operations.getCheckoutDetailsQuery query to fetch checkout details
+ * @param {DocumentNode} props.operations.getCustomerQuery query to fetch customer details
+ * @param {DocumentNode} props.operations.getOrderDetailsQuery query to fetch order details
+ * @param {DocumentNode} props.operations.createCartMutation mutation to create a new cart
+ * @param {DocumentNode} props.operations.placeOrderMutation mutation to place order
+ *
+ * @returns {
+ *  activeContent: String,
+ *  availablePaymentMethods: Array,
+ *  cartItems: Array,
+ *  checkoutStep: Number,
+ *  customer: Object,
+ *  error: ApolloError,
+ *  handlePlaceOrder: Function,
+ *  handlePlaceOrderEnterKeyPress: Function,
+ *  hasError: Boolean,
+ *  isCartEmpty: Boolean,
+ *  isGuestCheckout: Boolean,
+ *  isLoading: Boolean,
+ *  isUpdating: Boolean,
+ *  orderDetailsData: Object,
+ *  orderDetailsLoading: Boolean,
+ *  orderNumber: String,
+ *  placeOrderLoading: Boolean,
+ *  setCheckoutStep: Function,
+ *  setIsUpdating: Function,
+ *  setShippingInformationDone: Function,
+ *  setShippingMethodDone: Function,
+ *  setPaymentInformationDone: Function,
+ *  scrollShippingInformationIntoView: Function,
+ *  shippingInformationRef: ReactRef,
+ *  shippingMethodRef: ReactRef,
+ *  scrollShippingMethodIntoView: Function,
+ *  resetReviewOrderButtonClicked: Function,
+ *  handleReviewOrder: Function,
+ *  handleReviewOrderEnterKeyPress: Function,
+ *  reviewOrderButtonClicked: Boolean,
+ *  toggleAddressBookContent: Function,
+ *  toggleSignInContent: Function,
+ * }
+ */
+export const useCheckoutPage = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        createCartMutation,
+        getCheckoutDetailsQuery,
+        getCustomerQuery,
+        getOrderDetailsQuery,
+        placeOrderMutation
+    } = operations;
+
+    const { generateReCaptchaData, recaptchaWidgetProps } = useGoogleReCaptcha({
+        currentForm: 'PLACE_ORDER',
+        formAction: 'placeOrder'
+    });
+
+    const [reviewOrderButtonClicked, setReviewOrderButtonClicked] = useState(
+        false
+    );
+
+    const shippingInformationRef = useRef();
+    const shippingMethodRef = useRef();
+
+    const apolloClient = useApolloClient();
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [placeOrderButtonClicked, setPlaceOrderButtonClicked] = useState(
+        false
+    );
+    const [activeContent, setActiveContent] = useState('checkout');
+    const [checkoutStep, setCheckoutStep] = useState(
+        CHECKOUT_STEP.SHIPPING_ADDRESS
+    );
+    const [guestSignInUsername, setGuestSignInUsername] = useState('');
+
+    const [{ isSignedIn }] = useUserContext();
+    const [{ cartId }, { createCart, removeCart }] = useCartContext();
+
+    const [fetchCartId] = useMutation(createCartMutation);
+    const [
+        placeOrder,
+        {
+            data: placeOrderData,
+            error: placeOrderError,
+            loading: placeOrderLoading
+        }
+    ] = useMutation(placeOrderMutation);
+
+    const [
+        getOrderDetails,
+        { data: orderDetailsData, loading: orderDetailsLoading }
+    ] = useLazyQuery(getOrderDetailsQuery, {
+        // We use this query to fetch details _just_ before submission, so we
+        // want to make sure it is fresh. We also don't want to cache this data
+        // because it may contain PII.
+        fetchPolicy: 'no-cache'
+    });
+
+    const { data: customerData, loading: customerLoading } = useQuery(
+        getCustomerQuery,
+        { skip: !isSignedIn }
+    );
+
+    const {
+        data: checkoutData,
+        networkStatus: checkoutQueryNetworkStatus
+    } = useQuery(getCheckoutDetailsQuery, {
+        /**
+         * Skip fetching checkout details if the `cartId`
+         * is a falsy value.
+         */
+        skip: !cartId,
+        notifyOnNetworkStatusChange: true,
+        variables: {
+            cartId
+        }
+    });
+
+    const cartItems = useMemo(() => {
+        return (checkoutData && checkoutData?.cart?.items) || [];
+    }, [checkoutData]);
+
+    /**
+     * For more info about network statues check this out
+     *
+     * https://www.apollographql.com/docs/react/data/queries/#inspecting-loading-states
+     */
+    const isLoading = useMemo(() => {
+        const checkoutQueryInFlight = checkoutQueryNetworkStatus
+            ? checkoutQueryNetworkStatus < 7
+            : true;
+
+        return checkoutQueryInFlight || customerLoading;
+    }, [checkoutQueryNetworkStatus, customerLoading]);
+
+    const customer = customerData && customerData.customer;
+
+    const toggleAddressBookContent = useCallback(() => {
+        setActiveContent(currentlyActive =>
+            currentlyActive === 'checkout' ? 'addressBook' : 'checkout'
+        );
+    }, []);
+    const toggleSignInContent = useCallback(() => {
+        setActiveContent(currentlyActive =>
+            currentlyActive === 'checkout' ? 'signIn' : 'checkout'
+        );
+    }, []);
+
+    const checkoutError = useMemo(() => {
+        if (placeOrderError) {
+            return new CheckoutError(placeOrderError);
+        }
+    }, [placeOrderError]);
+
+    const handleReviewOrder = useCallback(() => {
+        setReviewOrderButtonClicked(true);
+    }, []);
+
+    const handleReviewOrderEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleReviewOrder();
+            }
+        };
+    }, [handleReviewOrder]);
+
+    const resetReviewOrderButtonClicked = useCallback(() => {
+        setReviewOrderButtonClicked(false);
+    }, []);
+
+    const scrollShippingInformationIntoView = useCallback(() => {
+        if (shippingInformationRef.current) {
+            shippingInformationRef.current.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    }, [shippingInformationRef]);
+
+    const setShippingInformationDone = useCallback(() => {
+        if (checkoutStep === CHECKOUT_STEP.SHIPPING_ADDRESS) {
+            setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
+        }
+    }, [checkoutStep]);
+
+    const scrollShippingMethodIntoView = useCallback(() => {
+        if (shippingMethodRef.current) {
+            shippingMethodRef.current.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    }, [shippingMethodRef]);
+
+    const setShippingMethodDone = useCallback(() => {
+        if (checkoutStep === CHECKOUT_STEP.SHIPPING_METHOD) {
+            setCheckoutStep(CHECKOUT_STEP.PAYMENT);
+        }
+    }, [checkoutStep]);
+
+    const setPaymentInformationDone = useCallback(() => {
+        if (checkoutStep === CHECKOUT_STEP.PAYMENT) {
+            globalThis.scrollTo({
+                left: 0,
+                top: 0,
+                behavior: 'smooth'
+            });
+            setCheckoutStep(CHECKOUT_STEP.REVIEW);
+        }
+    }, [checkoutStep]);
+
+    const [isPlacingOrder, setIsPlacingOrder] = useState(false);
+
+    const handlePlaceOrder = useCallback(async () => {
+        // Fetch order details and then use an effect to actually place the
+        // order. If/when Apollo returns promises for invokers from useLazyQuery
+        // we can just await this function and then perform the rest of order
+        // placement.
+        await getOrderDetails({
+            variables: {
+                cartId
+            }
+        });
+        setPlaceOrderButtonClicked(true);
+        setIsPlacingOrder(true);
+    }, [cartId, getOrderDetails]);
+
+    const handlePlaceOrderEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handlePlaceOrder();
+            }
+        };
+    }, [handlePlaceOrder]);
+
+    const [, { dispatch }] = useEventingContext();
+
+    // Go back to checkout if shopper logs in
+    useEffect(() => {
+        if (isSignedIn) {
+            setActiveContent('checkout');
+        }
+    }, [isSignedIn]);
+
+    useEffect(() => {
+        async function placeOrderAndCleanup() {
+            try {
+                const reCaptchaData = await generateReCaptchaData();
+
+                await placeOrder({
+                    variables: {
+                        cartId
+                    },
+                    ...reCaptchaData
+                });
+                // Cleanup stale cart and customer info.
+                await removeCart();
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+
+                await createCart({
+                    fetchCartId
+                });
+            } catch (err) {
+                console.error(
+                    'An error occurred during when placing the order',
+                    err
+                );
+                setPlaceOrderButtonClicked(false);
+            }
+        }
+
+        if (orderDetailsData && isPlacingOrder) {
+            setIsPlacingOrder(false);
+            placeOrderAndCleanup();
+        }
+    }, [
+        apolloClient,
+        cartId,
+        createCart,
+        fetchCartId,
+        generateReCaptchaData,
+        orderDetailsData,
+        placeOrder,
+        removeCart,
+        isPlacingOrder
+    ]);
+
+    useEffect(async () => {
+        await setCheckoutState(false);
+    }, [setCheckoutState]);
+
+    useEffect(() => {
+        if (
+            checkoutStep === CHECKOUT_STEP.SHIPPING_ADDRESS &&
+            cartItems.length
+        ) {
+            dispatch({
+                type: 'CHECKOUT_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        } else if (reviewOrderButtonClicked) {
+            dispatch({
+                type: 'CHECKOUT_REVIEW_BUTTON_CLICKED',
+                payload: {
+                    cart_id: cartId
+                }
+            });
+        } else if (
+            placeOrderButtonClicked &&
+            orderDetailsData &&
+            orderDetailsData.cart
+        ) {
+            const shipping =
+                orderDetailsData.cart?.shipping_addresses &&
+                orderDetailsData.cart.shipping_addresses.reduce(
+                    (result, item) => {
+                        return [
+                            ...result,
+                            {
+                                ...item.selected_shipping_method
+                            }
+                        ];
+                    },
+                    []
+                );
+            const eventPayload = {
+                cart_id: cartId,
+                amount: orderDetailsData.cart.prices,
+                shipping: shipping,
+                payment: orderDetailsData.cart.selected_payment_method,
+                products: orderDetailsData.cart.items
+            };
+            if (isPlacingOrder) {
+                dispatch({
+                    type: 'CHECKOUT_PLACE_ORDER_BUTTON_CLICKED',
+                    payload: eventPayload
+                });
+            } else if (placeOrderData && orderDetailsData?.cart.id === cartId) {
+                dispatch({
+                    type: 'ORDER_CONFIRMATION_PAGE_VIEW',
+                    payload: {
+                        order_number:
+                            placeOrderData.placeOrder.order.order_number,
+                        ...eventPayload
+                    }
+                });
+            }
+        }
+    }, [
+        placeOrderButtonClicked,
+        cartId,
+        checkoutStep,
+        orderDetailsData,
+        cartItems,
+        isLoading,
+        dispatch,
+        placeOrderData,
+        isPlacingOrder,
+        reviewOrderButtonClicked
+    ]);
+
+    return {
+        activeContent,
+        availablePaymentMethods: checkoutData
+            ? checkoutData?.cart?.available_payment_methods
+            : null,
+        cartItems,
+        checkoutStep,
+        customer,
+        error: checkoutError,
+        guestSignInUsername,
+        handlePlaceOrder,
+        handlePlaceOrderEnterKeyPress,
+        hasError: !!checkoutError,
+        isCartEmpty: !(checkoutData && checkoutData?.cart?.total_quantity),
+        isGuestCheckout: !isSignedIn,
+        isLoading,
+        isUpdating,
+        orderDetailsData,
+        orderDetailsLoading,
+        orderNumber:
+            (placeOrderData && placeOrderData.placeOrder.order.order_number) ||
+            null,
+        placeOrderLoading,
+        placeOrderButtonClicked,
+        setCheckoutStep,
+        setGuestSignInUsername,
+        setIsUpdating,
+        setShippingInformationDone,
+        setShippingMethodDone,
+        setPaymentInformationDone,
+        scrollShippingInformationIntoView,
+        shippingInformationRef,
+        shippingMethodRef,
+        scrollShippingMethodIntoView,
+        resetReviewOrderButtonClicked,
+        handleReviewOrder,
+        handleReviewOrderEnterKeyPress,
+        reviewOrderButtonClicked,
+        recaptchaWidgetProps,
+        toggleAddressBookContent,
+        toggleSignInContent
+    };
+};

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

@@ -45,15 +45,6 @@ const Adapter = props => {
     // const getWebsiteByUserIp = {
         // countryCode: 'SG'
     // }
-
-    // Check split cart
-    useEffect(() => {
-        if (pathname && pathname.includes('cart')) {
-            console.log('INI CART PAGE')
-        } else {
-            console.log('INI BUKAN CART PAGE')
-        }
-    }, [pathname]);
     
     useEffect(() => {
         if (websiteCodeInUrl) {

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -195,7 +195,7 @@ const Product = props => {
                     />
                 </div>
                 {editItemSection}
-                <li>
+                <span>
                     <AddToListButton
                         // {...addToWishlistProps}
                         afterAdd={afterAdd}
@@ -210,7 +210,7 @@ const Product = props => {
                         }}
                         icon={HeartIcon}
                     />
-                </li>
+                </span>
                 {/* <Section
                     // text={formatMessage({
                     //     id: 'product.removeFromCart',

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/productListing.js

@@ -67,14 +67,14 @@ const ProductListing = props => {
         const { seller_id, seller_name, seller_url } = item.seller;
         
         if (!acc[seller_id]) {
-        acc[seller_id] = {
-            seller: {
-            seller_id,
-            seller_name,
-            seller_url
-            },
-            items: []
-        };
+            acc[seller_id] = {
+                seller: {
+                seller_id,
+                seller_name,
+                seller_url
+                },
+                items: []
+            };
         }
     
         acc[seller_id].items.push(item);

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -147,7 +147,7 @@ const Header = props => {
                 hasBeenOffline={hasBeenOffline}
                 isOnline={isOnline}
             />
-            <style jsx>
+            <style jsx="true">
                 {`
                     .logo-wrapper>img:first-child {
                         height: ${IMAGE_HEIGHT}px;

package/src/talons/Seller/useSeller.js

@@ -27,7 +27,7 @@ export const useSeller = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const slug = pathname.split('/').pop();
+    const slug = pathname.split('/')[2];
     const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 

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

@@ -0,0 +1,96 @@
+import { gql } from '@apollo/client';
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_MEGA_MENU = gql`
+    query getMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        categoryList {
+            uid
+            name
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            children {
+                uid
+                include_in_menu
+                name
+                position
+                url_path
+                custom_submenu {
+                    name
+                    attribute {
+                        code
+                        value
+                    }
+                    path
+                }
+                shop_by {
+                    name
+                    code
+                    items {
+                        name
+                        option_id
+                        url_path
+                    }
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                children {
+                    uid
+                    include_in_menu
+                    name
+                    position
+                    url_path
+                    custom_submenu {
+                        name
+                        attribute {
+                            code
+                            value
+                        }
+                        path
+                    }
+                    shop_by {
+                        name
+                        items {
+                            name
+                            url_path
+                        }
+                    }
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    children {
+                        uid
+                        include_in_menu
+                        name
+                        position
+                        url_path
+                        custom_submenu {
+                            name
+                            attribute {
+                                code
+                                value
+                            }
+                            path
+                        }
+                        shop_by {
+                            name
+                            items {
+                                name
+                                url_path
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getMegaMenuQuery: GET_MEGA_MENU,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};