@riosst100/pwa-marketplace 1.0.0 → 1.0.2

package/src/talons/BecomeSeller/useBecomeSeller.js

@@ -0,0 +1,288 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { retrieveCartId } from '@magento/peregrine/lib/store/actions/cart';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+import DEFAULT_OPERATIONS from './becomeSeller.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+/**
+ * Returns props necessary to render BecomeSeller component. In particular this
+ * talon handles the submission flow by first doing a pre-submisson validation
+ * and then, on success, invokes the `onSubmit` prop, which is usually the action.
+ *
+ * @param {BecomeSellerQueries} props.queries queries used by the talon
+ * @param {BecomeSellerMutations} props.mutations mutations used by the talon
+ * @param {InitialValues} props.initialValues initial values to sanitize and seed the form
+ * @param {Function} props.onSubmit the post submit callback
+ * @param {Function} props.onCancel the cancel callback
+ *
+ * @returns {BecomeSellerProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useForgotPassword } from '@magento/peregrine/lib/talons/BecomeSeller/useBecomeSeller.js';
+ */
+export const useBecomeSeller = props => {
+    const { initialValues = {}, onSubmit, onCancel } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        becomeSellerMutation,
+        createCartMutation,
+        getCartDetailsQuery,
+        getCustomerQuery,
+        mergeCartsMutation,
+        signInMutation
+    } = operations;
+    const apolloClient = useApolloClient();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [
+        { cartId },
+        { createCart, removeCart, getCartDetails }
+    ] = useCartContext();
+    const [
+        { isGettingDetails },
+        { getUserDetails, setToken }
+    ] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
+
+    const [fetchCartId] = useMutation(createCartMutation);
+
+    const [mergeCarts] = useMutation(mergeCartsMutation);
+
+    // For create account and sign in mutations, we don't want to cache any
+    // personally identifiable information (PII). So we set fetchPolicy to 'no-cache'.
+    const [becomeSeller, { error: becomeSellerError }] = useMutation(
+        becomeSellerMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+
+    const [signIn, { error: signInError }] = useMutation(signInMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const fetchUserDetails = useAwaitQuery(getCustomerQuery);
+    const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
+
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'becomeSeller'
+    });
+
+    const handleCancel = useCallback(() => {
+        onCancel();
+    }, [onCancel]);
+
+    const handleCancelKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleCancel();
+            }
+        };
+    }, [handleCancel]);
+
+    const handleSubmit = useCallback(
+        async formValues => {
+            setIsSubmitting(true);
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Get reCaptchaV3 Data for becomeSeller mutation
+                const recaptchaDataForBecomeSeller = await generateReCaptchaData();
+
+                // Create the account and then sign in.
+                await becomeSeller({
+                    variables: {
+                        email: formValues.customer.email,
+                        firstname: formValues.customer.firstname,
+                        lastname: formValues.customer.lastname,
+                        password: formValues.password,
+                        is_subscribed: !!formValues.subscribe
+                    },
+                    ...recaptchaDataForBecomeSeller
+                });
+
+                dispatch({
+                    type: 'USER_CREATE_ACCOUNT',
+                    payload: {
+                        email: formValues.customer.email,
+                        firstName: formValues.customer.firstname,
+                        lastName: formValues.customer.lastname,
+                        isSubscribed: !!formValues.subscribe
+                    }
+                });
+
+                // Get reCaptchaV3 Data for signIn mutation
+                const recaptchaDataForSignIn = await generateReCaptchaData();
+
+                const signInResponse = await signIn({
+                    variables: {
+                        email: formValues.customer.email,
+                        password: formValues.password
+                    },
+                    ...recaptchaDataForSignIn
+                });
+                const token = signInResponse.data.generateCustomerToken.token;
+                await setToken(token);
+
+                // 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.
+                await getUserDetails({ fetchUserDetails });
+                await getCartDetails({
+                    fetchCartId,
+                    fetchCartDetails
+                });
+
+                // Finally, invoke the post-submission callback.
+                if (onSubmit) {
+                    onSubmit();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+                setIsSubmitting(false);
+            }
+        },
+
+        [
+            cartId,
+            generateReCaptchaData,
+            becomeSeller,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            onSubmit,
+            dispatch
+        ]
+    );
+
+    const sanitizedInitialValues = useMemo(() => {
+        const { email, firstName, lastName, ...rest } = initialValues;
+
+        return {
+            customer: { email, firstname: firstName, lastname: lastName },
+            ...rest
+        };
+    }, [initialValues]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['becomeSellerQuery', becomeSellerError],
+                ['signInMutation', signInError]
+            ]),
+        [becomeSellerError, signInError]
+    );
+
+    return {
+        errors,
+        handleCancel,
+        handleSubmit,
+        handleCancelKeyPress,
+        initialValues: sanitizedInitialValues,
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        recaptchaWidgetProps
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * GraphQL queries for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} BecomeSellerQueries
+ *
+ * @property {GraphQLAST} customerQuery query to fetch customer details
+ * @property {GraphQLAST} getCartDetailsQuery query to get cart details
+ */
+
+/**
+ * GraphQL mutations for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} BecomeSellerMutations
+ *
+ * @property {GraphQLAST} becomeSellerMutation mutation for creating new account
+ * @property {GraphQLAST} createCartMutation mutation for creating new cart
+ * @property {GraphQLAST} mergeCartsMutation mutation for merging carts
+ * @property {GraphQLAST} signInMutation mutation for signing
+ */
+
+/**
+ * Initial values for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} InitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstName first name of the user
+ * @property {String} lastName last name of the user
+ */
+
+/**
+ * Sanitized initial values for the create account form.
+ * This is a type used by the {@link useBecomeSeller} talon.
+ *
+ * @typedef {Object} SanitizedInitialValues
+ *
+ * @property {String} email email id of the user
+ * @property {String} firstname first name of the user
+ * @property {String} lastname last name of the user
+ */
+
+/**
+ * Object type returned by the {@link useBecomeSeller} talon.
+ * It provides props data to use when rendering the create account form component.
+ *
+ * @typedef {Object} BecomeSellerProps
+ *
+ * @property {Map} errors a map of errors to their respective mutations
+ * @property {Function} handleCancel callback function to handle form cancellations
+ * @property {Function} handleSubmit callback function to handle form submission
+ * @property {SanitizedInitialValues} initialValues initial values for the create account form
+ * @property {Boolean} isDisabled true if either details are being fetched or form is being submitted. False otherwise.
+ * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
+ * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
+ */

package/src/talons/BecomeSellerLink/useBecomeSellerLink.js

@@ -0,0 +1,13 @@
+import { useCallback, useMemo } from 'react';
+
+export const useWebsiteSwitcher = (props = {}) => {
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        // setStoreMenuIsOpen(isOpen => !isOpen);
+        // globalThis.location.assign(`${newPath || ''}`);
+    }, []);
+
+    return {
+        handleTriggerClick
+    };
+};

package/src/talons/BecomeSellerPage/useBecomeSellerPage.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const validBecomeSellerParams = ['email', 'firstName', 'lastName'];
+
+const getBecomeSellerInitialValues = search => {
+    const params = new URLSearchParams(search);
+
+    return validBecomeSellerParams.reduce(
+        (values, param) => ({ ...values, [param]: params.get(param) }),
+        {}
+    );
+};
+
+/**
+ * @typedef {function} useBecomeSellerPage
+ *
+ * @param {String} props.signedInRedirectUrl - Url to push when user is signed in
+ * @param {String} props.signInPageUrl - Sign In Page url
+ *
+ * @returns {{
+ *   becomeSellerProps: object
+ * }}
+ */
+export const useBecomeSellerPage = props => {
+    const { signedInRedirectUrl, signInPageUrl } = props;
+    const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
+    const { search } = useLocation();
+
+    // Keep location state in memory when pushing history and redirect to
+    // the `from` url instead when creating an account
+    const historyState = useMemo(() => {
+        return history && history.location.state ? history.location.state : {};
+    }, [history]);
+    const fromRedirectUrl = historyState.from || null;
+
+    // Redirect if user is signed in
+    useEffect(() => {
+        if (isSignedIn) {
+            if (fromRedirectUrl || signedInRedirectUrl) {
+                history.push(fromRedirectUrl || signedInRedirectUrl);
+            }
+        }
+    }, [fromRedirectUrl, history, isSignedIn, signedInRedirectUrl]);
+
+    const handleOnCancel = useCallback(() => {
+        if (signInPageUrl) {
+            history.push(signInPageUrl, historyState);
+        }
+    }, [history, historyState, signInPageUrl]);
+
+    const initialValues = useMemo(() => getBecomeSellerInitialValues(search), [
+        search
+    ]);
+
+    const becomeSellerProps = {
+        initialValues,
+        isCancelButtonHidden: false,
+        onCancel: handleOnCancel
+    };
+
+    return {
+        becomeSellerProps
+    };
+};

package/src/talons/Header/useBecomeSellerLink.js

@@ -0,0 +1,13 @@
+import { useCallback, useMemo } from 'react';
+
+export const useWebsiteSwitcher = (props = {}) => {
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        // setStoreMenuIsOpen(isOpen => !isOpen);
+        // globalThis.location.assign(`${newPath || ''}`);
+    }, []);
+
+    return {
+        handleTriggerClick
+    };
+};

package/src/talons/WebsiteSwitcher/useWebsiteSwitcher.js

@@ -0,0 +1,218 @@
+import { useQuery } from '@apollo/client';
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
+import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './websiteSwitcher.gql';
+
+const storage = new BrowserPersistence();
+
+const mapAvailableOptions = (config, stores) => {
+    const { store_code: configCode } = config;
+
+    return stores.reduce((map, store) => {
+        const {
+            default_display_currency_code: currency,
+            locale,
+            secure_base_media_url,
+            store_code: storeCode,
+            store_group_code: storeGroupCode,
+            store_group_name: storeGroupName,
+            website_name: websiteName,
+            website_code: websiteCode,
+            store_sort_order: sortOrder
+        } = store;
+
+        const isCurrent = storeCode === configCode;
+        const option = {
+            currency,
+            isCurrent,
+            locale,
+            secure_base_media_url,
+            sortOrder,
+            storeCode,
+            storeGroupCode,
+            storeGroupName,
+            websiteName,
+            websiteCode
+        };
+
+        return map.set(storeCode, option);
+    }, new Map());
+};
+
+/**
+ * The useWebsiteSwitcher talon complements the WebsiteSwitcher component.
+ *
+ * @param {Array<Object>} [props.availableRoutes] - Hardcoded app routes.
+ * @param {Object} [props.operations] - GraphQL operations to be run by the hook.
+ *
+ * @returns {Map}    talonProps.availableStores - Details about the available store views.
+ * @returns {String}    talonProps.currentWebsiteName - Name of the current store view.
+ * @returns {Boolean}   talonProps.storeMenuIsOpen - Whether the menu that this trigger toggles is open or not.
+ * @returns {Ref}       talonProps.storeMenuRef - A React ref to the menu that this trigger toggles.
+ * @returns {Ref}       talonProps.storeMenuTriggerRef - A React ref to the trigger element itself.
+ * @returns {Function}  talonProps.handleTriggerClick - A function for handling when the trigger is clicked.
+ * @returns {Function}  talonProps.handleSwitchWebsite - A function for handling when the menu item is clicked.
+ */
+
+export const useWebsiteSwitcher = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { availableRoutes = [] } = props;
+    const internalRoutes = useMemo(() => {
+        return availableRoutes.map(path => {
+            if (path.exact) {
+                return path.pattern;
+            }
+        });
+    }, [availableRoutes]);
+
+    const {
+        getStoreConfigData,
+        getRouteData,
+        getAvailableWebsitesData
+    } = operations;
+    const { pathname, search: searchParams } = useLocation();
+    const {
+        elementRef: storeMenuRef,
+        expanded: storeMenuIsOpen,
+        setExpanded: setStoreMenuIsOpen,
+        triggerRef: storeMenuTriggerRef
+    } = useDropdown();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const fetchRouteData = useAwaitQuery(getRouteData);
+
+    const { data: availableStoresData } = useQuery(getAvailableWebsitesData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const currentWebsiteName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.website_name;
+        }
+    }, [storeConfigData]);
+
+    const currentGroupName = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.store_group_name;
+        }
+    }, [storeConfigData]);
+
+    // availableStores => mapped options or empty map if undefined.
+    const availableStores = useMemo(() => {
+        return (
+            (storeConfigData &&
+                availableStoresData &&
+                mapAvailableOptions(
+                    storeConfigData.storeConfig,
+                    availableStoresData.availableStoresByUserIp
+                )) ||
+            new Map()
+        );
+    }, [storeConfigData, availableStoresData]);
+
+    // Create a map of sorted store views for each group.
+    const storeGroups = useMemo(() => {
+        const groups = new Map();
+
+        availableStores.forEach(store => {
+            const groupCode = store.storeGroupCode;
+            if (!groups.has(groupCode)) {
+                const groupViews = [store];
+                groups.set(groupCode, groupViews);
+            } else {
+                const groupViews = groups.get(groupCode);
+                // Insert store at configured position
+                groupViews.splice(store.sortOrder, 0, store);
+            }
+        });
+
+        return groups;
+    }, [availableStores]);
+
+    const getPathname = useCallback(
+        async storeCode => {
+            if (pathname === '' || pathname === '/') return '';
+            let newPath = '';
+            if (internalRoutes.includes(pathname)) {
+                newPath = pathname;
+            } else {
+                const { data: routeData } = await fetchRouteData({
+                    fetchPolicy: 'no-cache',
+                    variables: {
+                        url: pathname
+                    },
+                    context: { headers: { store: storeCode } }
+                });
+                if (routeData.route) {
+                    newPath = routeData.route.relative_url;
+                }
+            }
+            return newPath.startsWith('/') ? newPath.substr(1) : newPath;
+        },
+        [pathname, fetchRouteData, internalRoutes]
+    );
+
+    const handleSwitchWebsite = useCallback(
+        // Change store view code and currency to be used in Apollo link request headers
+        async (storeCode, websiteCode) => {
+            // Do nothing when store view is not present in available stores
+            if (!availableStores.has(storeCode)) return;
+
+            storage.setItem('store_view_code', storeCode);
+            storage.setItem(
+                'store_view_currency',
+                availableStores.get(storeCode).currency
+            );
+            storage.setItem(
+                'store_view_secure_base_media_url',
+                availableStores.get(storeCode).secure_base_media_url
+            );
+            const pathName = await getPathname(storeCode);
+            
+            let accessBaseWebsite = null;
+            let newSearchParams = searchParams;
+            let newWebsiteCode = websiteCode;
+
+            if (newWebsiteCode == process.env.WEBSITE_CODE) {
+                newWebsiteCode = null;
+                newSearchParams = searchParams ? searchParams+'&access_base_website=1' : '?access_base_website=1';
+                accessBaseWebsite = '?access_base_website=1';
+            }
+
+            const newPath = pathName ? `/${pathName}${newSearchParams}` : (accessBaseWebsite ? `/${pathName}${accessBaseWebsite}` : '');
+
+            if (newWebsiteCode) {
+                globalThis.location.assign(`/${newWebsiteCode}${newPath || ''}`);
+            } else {
+                globalThis.location.assign(`${newPath || ''}`);
+            }
+        },
+        [availableStores, getPathname, searchParams]
+    );
+
+    const handleTriggerClick = useCallback(() => {
+        // Toggle Stores Menu.
+        setStoreMenuIsOpen(isOpen => !isOpen);
+    }, [setStoreMenuIsOpen]);
+
+    return {
+        availableStores,
+        currentGroupName,
+        currentWebsiteName,
+        storeGroups,
+        storeMenuRef,
+        storeMenuTriggerRef,
+        storeMenuIsOpen,
+        handleTriggerClick,
+        handleSwitchWebsite
+    };
+};

package/src/talons/WebsiteSwitcher/websiteSwitcher.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            store_name
+            store_group_name
+            website_name
+        }
+    }
+`;
+
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
+            relative_url
+        }
+    }
+`;
+
+export const GET_AVAILABLE_WEBSITES_DATA = gql`
+    query availableStoresByUserIp {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        availableStoresByUserIp {
+            default_display_currency_code
+            locale
+            secure_base_media_url
+            store_code
+            store_group_code
+            store_group_name
+            store_name
+            store_sort_order
+            website_name
+            website_code
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getRouteData: GET_ROUTE_DATA,
+    getAvailableWebsitesData: GET_AVAILABLE_WEBSITES_DATA
+};