@riosst100/pwa-marketplace 1.0.2 → 1.0.3

package/src/talons/BecomeSeller/useBecomeSeller.js

@@ -2,60 +2,29 @@ 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';
- */
+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,
-        createCartMutation,
-        getCartDetailsQuery,
-        getCustomerQuery,
-        mergeCartsMutation,
-        signInMutation
+        becomeSellerMutation
     } = operations;
-    const apolloClient = useApolloClient();
+
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [
-        { cartId },
-        { createCart, removeCart, getCartDetails }
-    ] = useCartContext();
-    const [
-        { isGettingDetails },
-        { getUserDetails, setToken }
-    ] = useUserContext();
+    const [sellerType, setSellerType] = useState('individual');
 
     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(
@@ -65,105 +34,66 @@ export const useBecomeSeller = props => {
         }
     );
 
-    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',
+        currentForm: 'BECOME_SELLER',
         formAction: 'becomeSeller'
     });
 
-    const handleCancel = useCallback(() => {
-        onCancel();
-    }, [onCancel]);
-
-    const handleCancelKeyPress = useCallback(() => {
-        event => {
-            if (event.key === 'Enter') {
-                handleCancel();
+    const handleChange =  useCallback(
+        async formValues => {
+            if (formValues.values.seller) {
+                setSellerType(formValues.values.seller.seller_type)
             }
-        };
-    }, [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({
+                const result = await becomeSeller({
                     variables: {
-                        email: formValues.customer.email,
-                        firstname: formValues.customer.firstname,
-                        lastname: formValues.customer.lastname,
-                        password: formValues.password,
-                        is_subscribed: !!formValues.subscribe
+                        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
                 });
 
-                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();
+                if (result.data.becomeSeller.code) {
+                    storage.setItem('is_seller', true);
 
-                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();
+                    globalThis.location.assign('/seller-account');
+                }
 
-                // Merge the guest cart into the customer cart.
-                await mergeCarts({
-                    variables: {
-                        destinationCartId,
-                        sourceCartId
+                dispatch({
+                    type: 'BECOME_SELLER',
+                    payload: {
+                        group_id: 'basic',
+                        url_key: formValues.seller.store_url
                     }
                 });
 
-                // 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();
@@ -177,30 +107,18 @@ export const useBecomeSeller = props => {
         },
 
         [
-            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;
+        const { sellerProfileName, companyName, ...rest } = initialValues;
 
         return {
-            customer: { email, firstname: firstName, lastname: lastName },
+            seller: { profile_name: sellerProfileName, company: companyName, country: "AF" },
             ...rest
         };
     }, [initialValues]);
@@ -208,81 +126,21 @@ export const useBecomeSeller = props => {
     const errors = useMemo(
         () =>
             new Map([
-                ['becomeSellerQuery', becomeSellerError],
-                ['signInMutation', signInError]
+                ['becomeSellerQuery', becomeSellerError]
             ]),
-        [becomeSellerError, signInError]
+        [becomeSellerError]
     );
 
+    const isSeller = storage.getItem('is_seller') || false;
+
     return {
+        isSeller,
         errors,
-        handleCancel,
         handleSubmit,
-        handleCancelKeyPress,
+        sellerType,
+        handleChange,
         initialValues: sanitizedInitialValues,
-        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        isDisabled: isSubmitting || 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

@@ -1,13 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
-export const useWebsiteSwitcher = (props = {}) => {
-    const handleTriggerClick = useCallback(() => {
-        // Toggle Stores Menu.
-        // setStoreMenuIsOpen(isOpen => !isOpen);
-        // globalThis.location.assign(`${newPath || ''}`);
-    }, []);
+const storage = new BrowserPersistence();
+
+export const useBecomeSellerLink = (props = {}) => {
+    const isSeller = storage.getItem('is_seller') || false;
 
     return {
-        handleTriggerClick
+        isSeller
     };
 };

package/src/talons/BecomeSellerPage/useBecomeSellerPage.js

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
 
-import { useUserContext } from '@magento/peregrine/lib/context/user';
+const validBecomeSellerParams = ['sellerUrl', 'companyName', 'sellerProfileName'];
 
-const validBecomeSellerParams = ['email', 'firstName', 'lastName'];
+const storage = new BrowserPersistence();
 
 const getBecomeSellerInitialValues = search => {
     const params = new URLSearchParams(search);
@@ -27,24 +28,20 @@ const getBecomeSellerInitialValues = search => {
 export const useBecomeSellerPage = props => {
     const { signedInRedirectUrl, signInPageUrl } = props;
     const history = useHistory();
-    const [{ isSignedIn }] = useUserContext();
     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 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) {
@@ -59,7 +56,8 @@ export const useBecomeSellerPage = props => {
     const becomeSellerProps = {
         initialValues,
         isCancelButtonHidden: false,
-        onCancel: handleOnCancel
+        onCancel: handleOnCancel,
+        isSeller: isSeller
     };
 
     return {

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
+    };
+};

package/src/talons/WebsiteByIp/useWebsiteByIp.js

@@ -24,6 +24,8 @@ export const useWebsiteByIp = websiteCodeInUrl => {
     const getWebsiteByUserIp = useMemo(() => {
         if (websiteByUserIpData) {
             return websiteByUserIpData;
+        } else {
+            return null;
         }
     }, [websiteByUserIpData]);