@riosst100/pwa-marketplace 3.2.5 → 3.2.6

package/src/talons/SocialLogin/socialLogin.gql.js

@@ -0,0 +1,106 @@
+import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+
+export const GET_CART_DETAILS_QUERY = gql`
+    query GetCartDetailsAfterSignIn($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                # 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
+                }
+            }
+            ...CartPageFragment
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export const GET_CUSTOMER = gql`
+    query GetCustomerAfterSignIn {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        customer {
+            email
+            firstname
+            lastname
+            is_subscribed
+            is_seller
+        }
+    }
+`;
+
+export const CREATE_CART = gql`
+    mutation CreateCartAfterSignIn {
+        cartId: createEmptyCart
+    }
+`;
+
+export const MERGE_CARTS = gql`
+    mutation MergeCartsAfterSignIn(
+        $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
+        }
+    }
+    ${CheckoutPageFragment}
+`;
+
+export const SOCIAL_GOOGLE_AUTHENTICATE = gql`
+    mutation SocialGoogleAuthenticate($jwt_token: String!) {
+        socialGoogleAuthenticate(jwt_token: $jwt_token) {
+            token
+        }
+    }
+`;
+
+export default {
+    GET_CART_DETAILS_QUERY: GET_CART_DETAILS_QUERY,
+    createCartMutation: CREATE_CART,
+    getCustomerQuery: GET_CUSTOMER,
+    mergeCartsMutation: MERGE_CARTS,
+    socialGoogleAuthenticateMutation: SOCIAL_GOOGLE_AUTHENTICATE
+};

package/src/talons/SocialLogin/useSocialLogin.js

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import { useApolloClient, useMutation } from '@apollo/client';
+
+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 { useToasts } from '@magento/peregrine/lib/Toasts';
+import DEFAULT_OPERATIONS from './socialLogin.gql'
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export const useSocialLogin = props => {
+    const {
+        jwtToken
+    } = props;
+
+    const [, { addToast }] = useToasts();
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        createCartMutation,
+        getCustomerQuery,
+        mergeCartsMutation,
+        getCartDetailsQuery,
+        socialGoogleAuthenticateMutation
+    } = 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(socialGoogleAuthenticateMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const generateReCaptchaData = null;
+
+    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), []);
+
+    useEffect(async () => {
+        if (jwtToken) {
+            setIsSigningIn(true);
+            try {
+                // Get source cart id (guest cart id).
+                const sourceCartId = cartId;
+
+                // Sign in and set the token.
+                const signInResponse = await signIn({
+                    variables: {
+                        jwt_token: jwtToken
+                    }
+                });
+
+                const token = signInResponse.data.socialGoogleAuthenticate.token;
+                await setToken(token);
+
+                await getUserDetails({ fetchUserDetails });
+
+                // 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.
+                
+
+                const { data } = await fetchUserDetails({
+                    fetchPolicy: 'cache-only'
+                });
+
+                if (data.customer.is_seller) {
+                    storage.setItem('is_seller', true);
+                }
+
+                dispatch({
+                    type: 'USER_SIGN_IN',
+                    payload: {
+                        ...data.customer
+                    }
+                });
+
+                getCartDetails({ fetchCartId, fetchCartDetails });
+
+                addToast({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'signIn.signInSuccessToast',
+                        defaultMessage: "You have successfully signed in."
+                    }),
+                    timeout: 5000
+                });
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+
+                setIsSigningIn(false);
+            }
+        }
+    }, [
+            jwtToken,
+            cartId,
+            generateReCaptchaData,
+            signIn,
+            setToken,
+            apolloClient,
+            removeCart,
+            createCart,
+            fetchCartId,
+            mergeCarts,
+            getUserDetails,
+            fetchUserDetails,
+            getCartDetails,
+            fetchCartDetails,
+            dispatch
+        ]
+    );
+
+    const errors = useMemo(
+        () =>
+            new Map([
+                ['getUserDetailsQuery', getDetailsError],
+                ['socialGoogleAuthenticateMutation', signInError]
+            ]),
+        [getDetailsError, signInError]
+    );
+
+    return {
+        errors,
+        // isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        isBusy: isGettingDetails || isSigningIn,
+        setFormApi
+    };
+};