@riosst100/pwa-marketplace 1.0.2 → 1.0.4

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/storeSwitcher.js

@@ -74,7 +74,7 @@ const StoreSwitcher = props => {
 
     let triggerLabel;
     if (hasOnlyOneGroup) {
-        triggerLabel = `${currentStoreName}`;
+        triggerLabel = currentStoreName ? `${currentStoreName}` : '';
     } else {
         triggerLabel = `${currentGroupName} - ${currentStoreName}`;
     }
@@ -84,7 +84,7 @@ const StoreSwitcher = props => {
             <button
                 data-cy="StoreSwitcher-triggerButton"
                 className={classes.trigger}
-                aria-label={currentStoreName}
+                aria-label={currentStoreName || ''}
                 onClick={handleTriggerClick}
                 ref={storeMenuTriggerRef}
                 data-cy="StoreSwitcher-trigger"

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

@@ -1,136 +1,46 @@
 import { gql } from '@apollo/client';
-import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
 
-export const CREATE_ACCOUNT = gql`
+export const BECOME_SELLER = gql`
     mutation BecomeSeller(
-        $email: String!
-        $firstname: String!
-        $lastname: String!
-        $password: String!
-        $is_subscribed: Boolean!
+        $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!
     ) {
-        createCustomer(
+        becomeSeller(
             input: {
-                email: $email
-                firstname: $firstname
-                lastname: $lastname
-                password: $password
-                is_subscribed: $is_subscribed
+                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
             }
         ) {
-            # The createCustomer mutation returns a non-nullable CustomerOutput type
-            # which requires that at least one of the sub fields be returned.
-
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            customer {
-                email
-            }
-        }
-    }
-`;
-
-export const GET_CUSTOMER = gql`
-    query GetCustomerAfterCreate {
-        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-        customer {
-            email
-            firstname
-            lastname
-            is_subscribed
-        }
-    }
-`;
-
-export const SIGN_IN = gql`
-    mutation SignInAfterCreate($email: String!, $password: String!) {
-        generateCustomerToken(email: $email, password: $password) {
-            token
-        }
-    }
-`;
-
-export const CREATE_CART = gql`
-    mutation CreateCartAfterAccountCreation {
-        cartId: createEmptyCart
-    }
-`;
-
-export const GET_CART_DETAILS = gql`
-    query GetCartDetailsAfterAccountCreation($cartId: String!) {
-        cart(cart_id: $cartId) {
-            id
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            items {
-                uid
-                prices {
-                    price {
-                        value
-                    }
-                }
-                # 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
-                }
-            }
-        }
-    }
-`;
-
-export const MERGE_CARTS = gql`
-    mutation MergeCartsAfterAccountCreation(
-        $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
+            code
+            message
         }
     }
-    ${CheckoutPageFragment}
 `;
 
 export default {
-    becomeSellerMutation: CREATE_ACCOUNT,
-    createCartMutation: CREATE_CART,
-    getCartDetailsQuery: GET_CART_DETAILS,
-    getCustomerQuery: GET_CUSTOMER,
-    mergeCartsMutation: MERGE_CARTS,
-    signInMutation: SIGN_IN
-};
+    becomeSellerMutation: BECOME_SELLER
+};