@riosst100/pwa-marketplace 1.0.1 → 1.0.3

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

@@ -0,0 +1,226 @@
+import { useCallback, useRef, useState, useMemo } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha';
+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 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';
+
+const storage = new BrowserPersistence();
+
+export const useSignIn = props => {
+    const {
+        handleTriggerClick,
+        getCartDetailsQuery,
+        setDefaultUsername,
+        showCreateAccount,
+        showForgotPassword
+    } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        createCartMutation,
+        getCustomerQuery,
+        mergeCartsMutation,
+        signInMutation
+    } = 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(signInMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_LOGIN',
+        formAction: 'signIn'
+    });
+
+    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), []);
+
+    const handleSubmit = useCallback(
+        async ({ email, password }) => {
+            setIsSigningIn(true);
+            // handleTriggerClick();
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Get recaptchaV3 data for login
+                const recaptchaData = await generateReCaptchaData();
+
+                // Sign in and set the token.
+                const signInResponse = await signIn({
+                    variables: {
+                        email,
+                        password
+                    },
+                    ...recaptchaData
+                });
+
+                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 });
+
+                const { data } = await fetchUserDetails({
+                    fetchPolicy: 'cache-only'
+                });
+
+                console.log(data.customer)
+
+                if (data.customer.is_seller) {
+                    storage.setItem('is_seller', true);
+                }
+
+                dispatch({
+                    type: 'USER_SIGN_IN',
+                    payload: {
+                        ...data.customer
+                    }
+                });
+
+                getCartDetails({ fetchCartId, fetchCartDetails });
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+
+                setIsSigningIn(false);
+            }
+        },
+        [
+            cartId,
+            generateReCaptchaData,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            dispatch,
+            handleTriggerClick
+        ]
+    );
+
+    const handleForgotPassword = useCallback(() => {
+        const { current: formApi } = formApiRef;
+
+        if (formApi) {
+            setDefaultUsername(formApi.getValue('email'));
+        }
+
+        showForgotPassword();
+    }, [setDefaultUsername, showForgotPassword]);
+
+    const forgotPasswordHandleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleForgotPassword();
+            }
+        };
+    }, [handleForgotPassword]);
+
+    const handleCreateAccount = useCallback(() => {
+        const { current: formApi } = formApiRef;
+
+        if (formApi) {
+            setDefaultUsername(formApi.getValue('email'));
+        }
+
+        showCreateAccount();
+    }, [setDefaultUsername, showCreateAccount]);
+
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleCreateAccount();
+            }
+        };
+    }, [handleCreateAccount]);
+
+    const signinHandleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleSubmit();
+            }
+        };
+    }, [handleSubmit]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['getUserDetailsQuery', getDetailsError],
+                ['signInMutation', signInError]
+            ]),
+        [getDetailsError, signInError]
+    );
+
+    return {
+        errors,
+        handleCreateAccount,
+        handleEnterKeyPress,
+        signinHandleEnterKeyPress,
+        handleForgotPassword,
+        forgotPasswordHandleEnterKeyPress,
+        handleSubmit,
+        isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        setFormApi,
+        recaptchaWidgetProps
+    };
+};

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

@@ -14,9 +14,9 @@ import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
-import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/Header/websiteSwitcher';
+import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
 import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
-import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/Header/becomeSellerLink';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
 import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
 import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
 import { useIntl } from 'react-intl';

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

@@ -74,7 +74,7 @@ const StoreSwitcher = props => {
 
     let triggerLabel;
     if (hasOnlyOneGroup) {
-        triggerLabel = `${currentStoreName}`;
+        triggerLabel = currentStoreName ? `${currentStoreName}` : '';
     } else {
         triggerLabel = `${currentGroupName} - ${currentStoreName}`;
     }
@@ -90,7 +90,7 @@ const StoreSwitcher = props => {
                 data-cy="StoreSwitcher-trigger"
                 aria-expanded={storeMenuIsOpen}
             >
-                {triggerLabel}
+                {triggerLabel || ''}
             </button>
             <div
                 ref={storeMenuRef}

package/src/talons/BecomeSeller/becomeSeller.gql.js

@@ -0,0 +1,46 @@
+import { gql } from '@apollo/client';
+
+export const BECOME_SELLER = gql`
+    mutation BecomeSeller(
+        $seller_type: String
+        $group_id: String!
+        $url_key: String!
+        $name: String!
+        $company: String
+        $company_registration_number: String
+        $country_id: String
+        $address_line_1: String!
+        $address_line_2: String
+        $city: String!
+        $region: String
+        $region_id: String
+        $postcode: String!
+        $contact_number: String!
+    ) {
+        becomeSeller(
+            input: {
+                seller_type: $seller_type
+                group_id: $group_id
+                url_key: $url_key
+                name: $name
+                company: $company
+                company_registration_number: $company_registration_number,
+                country_id: $country_id
+                address_line_1: $address_line_1
+                address_line_2: $address_line_2
+                city: $city
+                region: $region
+                region_id: $region_id
+                postcode: $postcode
+                contact_number: $contact_number
+            }
+        ) {
+            code
+            message
+        }
+    }
+`;
+
+export default {
+    becomeSellerMutation: BECOME_SELLER
+};

package/src/talons/BecomeSeller/useBecomeSeller.js

@@ -0,0 +1,146 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
+import DEFAULT_OPERATIONS from './becomeSeller.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export const useBecomeSeller = props => {
+    const { initialValues = {}, onSubmit, onCancel } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        becomeSellerMutation
+    } = operations;
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [sellerType, setSellerType] = useState('individual');
+
+    const [, { dispatch }] = useEventingContext();
+
+    // 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 {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'BECOME_SELLER',
+        formAction: 'becomeSeller'
+    });
+
+    const handleChange =  useCallback(
+        async formValues => {
+            if (formValues.values.seller) {
+                setSellerType(formValues.values.seller.seller_type)
+            }
+        }
+    );
+
+    const handleSubmit = useCallback(
+        async formValues => {
+            setIsSubmitting(true);
+            try {
+
+                // Get reCaptchaV3 Data for becomeSeller mutation
+                const recaptchaDataForBecomeSeller = await generateReCaptchaData();
+
+                // Create the account and then sign in.
+                const result = await becomeSeller({
+                    variables: {
+                        seller_type: sellerType,
+                        group_id: '',
+                        url_key: formValues.seller.store_url,
+                        name: formValues.seller.seller_profile_name,
+                        company: formValues.seller.company_name,
+                        company_registration_number: formValues.seller.company_registration_number,
+                        country_id: formValues.seller.country_id,
+                        address_line_1: formValues.seller.address_line_1,
+                        address_line_2: formValues.seller.address_line_2,
+                        city: formValues.seller.city,
+                        region: formValues.seller.region,
+                        region_id: formValues.seller.region_id,
+                        postcode: formValues.seller.postcode,
+                        contact_number: formValues.seller.contact_number
+                    },
+                    ...recaptchaDataForBecomeSeller
+                });
+
+                if (result.data.becomeSeller.code) {
+                    storage.setItem('is_seller', true);
+
+                    globalThis.location.assign('/seller-account');
+                }
+
+                dispatch({
+                    type: 'BECOME_SELLER',
+                    payload: {
+                        group_id: 'basic',
+                        url_key: formValues.seller.store_url
+                    }
+                });
+
+                // Finally, invoke the post-submission callback.
+                if (onSubmit) {
+                    onSubmit();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+                setIsSubmitting(false);
+            }
+        },
+
+        [
+            generateReCaptchaData,
+            becomeSeller,
+            onSubmit,
+            dispatch
+        ]
+    );
+
+    const sanitizedInitialValues = useMemo(() => {
+        const { sellerProfileName, companyName, ...rest } = initialValues;
+
+        return {
+            seller: { profile_name: sellerProfileName, company: companyName, country: "AF" },
+            ...rest
+        };
+    }, [initialValues]);
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['becomeSellerQuery', becomeSellerError]
+            ]),
+        [becomeSellerError]
+    );
+
+    const isSeller = storage.getItem('is_seller') || false;
+
+    return {
+        isSeller,
+        errors,
+        handleSubmit,
+        sellerType,
+        handleChange,
+        initialValues: sanitizedInitialValues,
+        isDisabled: isSubmitting || recaptchaLoading,
+        recaptchaWidgetProps
+    };
+};

package/src/talons/BecomeSellerLink/useBecomeSellerLink.js

@@ -0,0 +1,11 @@
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export const useBecomeSellerLink = (props = {}) => {
+    const isSeller = storage.getItem('is_seller') || false;
+
+    return {
+        isSeller
+    };
+};

package/src/talons/BecomeSellerPage/useBecomeSellerPage.js

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const validBecomeSellerParams = ['sellerUrl', 'companyName', 'sellerProfileName'];
+
+const storage = new BrowserPersistence();
+
+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 { search } = useLocation();
+
+    const isSeller = storage.getItem('is_seller') || false;
+    useEffect(() => {
+        if (isSeller) {
+            history.push('/')
+        }
+    }, [isSeller, history])
+
+    // 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 handleOnCancel = useCallback(() => {
+        if (signInPageUrl) {
+            history.push(signInPageUrl, historyState);
+        }
+    }, [history, historyState, signInPageUrl]);
+
+    const initialValues = useMemo(() => getBecomeSellerInitialValues(search), [
+        search
+    ]);
+
+    const becomeSellerProps = {
+        initialValues,
+        isCancelButtonHidden: false,
+        onCancel: handleOnCancel,
+        isSeller: isSeller
+    };
+
+    return {
+        becomeSellerProps
+    };
+};

package/src/talons/SellerAccountPage/useSellerAccountPage.js

@@ -0,0 +1,174 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+export const useSellerAccountPage = props => {
+    const {
+        mutations: {
+            setCustomerInformationMutation,
+            changeCustomerPasswordMutation
+        },
+        queries: { getCustomerInformationQuery }
+    } = props;
+
+    const [{ isSignedIn }] = useUserContext();
+    const [shouldShowNewPassword, setShouldShowNewPassword] = useState(false);
+
+    const [isUpdateMode, setIsUpdateMode] = useState(false);
+
+    const [, { dispatch }] = useEventingContext();
+
+    // Use local state to determine whether to display errors or not.
+    // Could be replaced by a "reset mutation" function from apollo client.
+    // https://github.com/apollographql/apollo-feature-requests/issues/170
+    const [displayError, setDisplayError] = useState(false);
+
+    const { data: accountInformationData, error: loadDataError } = useQuery(
+        getCustomerInformationQuery,
+        {
+            skip: !isSignedIn,
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [
+        setCustomerInformation,
+        {
+            error: customerInformationUpdateError,
+            loading: isUpdatingCustomerInformation
+        }
+    ] = useMutation(setCustomerInformationMutation);
+
+    const [
+        changeCustomerPassword,
+        {
+            error: customerPasswordChangeError,
+            loading: isChangingCustomerPassword
+        }
+    ] = useMutation(changeCustomerPasswordMutation);
+
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_EDIT',
+        formAction: 'editCustomer'
+    });
+
+    const initialValues = useMemo(() => {
+        if (accountInformationData) {
+            return { customer: accountInformationData.customer };
+        }
+    }, [accountInformationData]);
+
+    const handleChangePassword = useCallback(() => {
+        setShouldShowNewPassword(true);
+    }, [setShouldShowNewPassword]);
+
+    const handleCancel = useCallback(() => {
+        setIsUpdateMode(false);
+        setShouldShowNewPassword(false);
+    }, [setIsUpdateMode]);
+
+    const showUpdateMode = useCallback(() => {
+        setIsUpdateMode(true);
+
+        // If there were errors from removing/updating info, hide them
+        // when we open the modal.
+        setDisplayError(false);
+    }, [setIsUpdateMode]);
+
+    const handleSubmit = useCallback(
+        async ({ email, firstname, lastname, password, newPassword }) => {
+            try {
+                email = email.trim();
+                firstname = firstname.trim();
+                lastname = lastname.trim();
+                password = password.trim();
+                newPassword = newPassword ? newPassword.trim() : newPassword;
+
+                if (
+                    initialValues.customer.email !== email ||
+                    initialValues.customer.firstname !== firstname ||
+                    initialValues.customer.lastname !== lastname
+                ) {
+                    await setCustomerInformation({
+                        variables: {
+                            customerInput: {
+                                email,
+                                firstname,
+                                lastname,
+                                // You must send password because it is required
+                                // when changing email.
+                                password
+                            }
+                        }
+                    });
+                }
+                if (password && newPassword) {
+                    const recaptchaDataForChangeCustomerPassword = await generateReCaptchaData();
+                    await changeCustomerPassword({
+                        variables: {
+                            currentPassword: password,
+                            newPassword: newPassword
+                        },
+                        ...recaptchaDataForChangeCustomerPassword
+                    });
+                }
+
+                dispatch({
+                    type: 'USER_ACCOUNT_UPDATE',
+                    payload: {
+                        email,
+                        firstName: firstname,
+                        lastName: lastname
+                    }
+                });
+
+                // After submission, close the form if there were no errors.
+                handleCancel(false);
+            } catch {
+                // Make sure any errors from the mutation are displayed.
+                setDisplayError(true);
+
+                // we have an onError link that logs errors, and FormError
+                // already renders this error, so just return to avoid
+                // triggering the success callback
+                return;
+            }
+        },
+        [
+            initialValues,
+            handleCancel,
+            setCustomerInformation,
+            generateReCaptchaData,
+            changeCustomerPassword,
+            dispatch
+        ]
+    );
+
+    const errors = displayError
+        ? [customerInformationUpdateError, customerPasswordChangeError]
+        : [];
+
+    return {
+        handleCancel,
+        formErrors: errors,
+        handleSubmit,
+        handleChangePassword,
+        initialValues,
+        isDisabled:
+            isUpdatingCustomerInformation ||
+            isChangingCustomerPassword ||
+            recaptchaLoading,
+        isUpdateMode,
+        loadDataError,
+        shouldShowNewPassword,
+        showUpdateMode,
+        recaptchaWidgetProps
+    };
+};