@magento/peregrine 12.1.0-beta.1 → 12.2.0-alpha.3

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js

@@ -1,15 +1,23 @@
-import { useCallback, useMemo } from 'react';
-import { useMutation } from '@apollo/client';
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useMutation, useLazyQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './guestForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../../context/cart';
 
 export const useGuestForm = props => {
-    const { afterSubmit, onCancel, onSuccess, shippingData } = props;
+    const {
+        afterSubmit,
+        onCancel,
+        onSuccess,
+        shippingData,
+        toggleSignInContent,
+        setGuestSignInUsername
+    } = props;
+    const [showSignInToast, setShowSignInToast] = useState(false);
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { setGuestShippingMutation } = operations;
+    const { setGuestShippingMutation, getEmailAvailableQuery } = operations;
 
     const [{ cartId }] = useCartContext();
 
@@ -22,6 +30,10 @@ export const useGuestForm = props => {
         }
     );
 
+    const [runQuery, { data }] = useLazyQuery(getEmailAvailableQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
     const { country } = shippingData;
     const { code: countryCode } = country;
 
@@ -66,17 +78,45 @@ export const useGuestForm = props => {
         onCancel();
     }, [onCancel]);
 
+    const handleValidateEmail = useCallback(
+        email => {
+            setShowSignInToast(false);
+            if (email && email.includes('@')) {
+                runQuery({ variables: { email } });
+            }
+        },
+        [runQuery]
+    );
+
+    const handleToastAction = useCallback(
+        (removeToast, email) => {
+            setGuestSignInUsername(email);
+            toggleSignInContent();
+            removeToast();
+        },
+        [setGuestSignInUsername, toggleSignInContent]
+    );
+
     const errors = useMemo(
         () => new Map([['setGuestShippingMutation', error]]),
         [error]
     );
 
+    useEffect(() => {
+        if (data) {
+            setShowSignInToast(!data.isEmailAvailable.is_email_available);
+        }
+    }, [data]);
+
     return {
         errors,
         handleCancel,
         handleSubmit,
+        handleValidateEmail,
+        handleToastAction,
         initialValues,
         isSaving: loading,
-        isUpdate
+        isUpdate,
+        showSignInToast
     };
 };

package/lib/talons/CheckoutPage/ShippingInformation/shippingInformation.gql.js

@@ -17,8 +17,8 @@ export const GET_SHIPPING_INFORMATION = gql`
 
 export const GET_DEFAULT_SHIPPING = gql`
     query GetDefaultShipping {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             default_shipping
         }
     }
@@ -31,7 +31,7 @@ export const SET_CUSTOMER_ADDRESS_ON_CART = gql`
                 cart_id: $cartId
                 shipping_addresses: [{ customer_address_id: $addressId }]
             }
-        ) @connection(key: "setShippingAddressesOnCart") {
+        ) {
             cart {
                 id
                 ...ShippingInformationFragment

package/lib/talons/CheckoutPage/ShippingMethod/shippingMethod.gql.js

@@ -33,7 +33,7 @@ export const SET_SHIPPING_METHOD = gql`
     ) {
         setShippingMethodsOnCart(
             input: { cart_id: $cartId, shipping_methods: [$shippingMethod] }
-        ) @connection(key: "setShippingMethodsOnCart") {
+        ) {
             cart {
                 id
                 # If this mutation causes "free" to become available we need to know.

package/lib/talons/CheckoutPage/checkoutPage.gql.js

@@ -12,7 +12,7 @@ export const CREATE_CART = gql`
 
 export const PLACE_ORDER = gql`
     mutation placeOrder($cartId: String!) {
-        placeOrder(input: { cart_id: $cartId }) @connection(key: "placeOrder") {
+        placeOrder(input: { cart_id: $cartId }) {
             order {
                 order_number
             }
@@ -44,8 +44,8 @@ export const GET_CHECKOUT_DETAILS = gql`
 
 export const GET_CUSTOMER = gql`
     query GetCustomerForCheckout {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             default_shipping
             firstname
         }

package/lib/talons/CheckoutPage/checkoutPageFragments.gql.js

@@ -3,10 +3,12 @@ import { gql } from '@apollo/client';
 export const CheckoutPageFragment = gql`
     fragment CheckoutPageFragment on Cart {
         id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
-            id
+            uid
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             product {
-                id
+                uid
                 stock_status
             }
         }

package/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -6,7 +6,6 @@ import {
     useQuery
 } from '@apollo/client';
 
-import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
 
@@ -88,6 +87,8 @@ export const useCheckoutPage = (props = {}) => {
     const [checkoutStep, setCheckoutStep] = useState(
         CHECKOUT_STEP.SHIPPING_ADDRESS
     );
+    const [guestSignInUsername, setGuestSignInUsername] = useState('');
+
     const [{ isSignedIn }] = useUserContext();
     const [{ cartId }, { createCart, removeCart }] = useCartContext();
 
@@ -246,7 +247,7 @@ export const useCheckoutPage = (props = {}) => {
                 });
                 // Cleanup stale cart and customer info.
                 await removeCart();
-                await clearCartDataFromCache(apolloClient);
+                await apolloClient.clearCacheData(apolloClient, 'cart');
 
                 await createCart({
                     fetchCartId
@@ -285,6 +286,7 @@ export const useCheckoutPage = (props = {}) => {
         checkoutStep,
         customer,
         error: checkoutError,
+        guestSignInUsername,
         handlePlaceOrder,
         hasError: !!checkoutError,
         isCartEmpty: !(checkoutData && checkoutData.cart.total_quantity),
@@ -298,6 +300,7 @@ export const useCheckoutPage = (props = {}) => {
             null,
         placeOrderLoading,
         setCheckoutStep,
+        setGuestSignInUsername,
         setIsUpdating,
         setShippingInformationDone,
         setShippingMethodDone,

package/lib/talons/Cms/cmsPage.gql.js

@@ -12,10 +12,6 @@ export const GET_CMS_PAGE = gql`
             meta_keywords
             meta_description
         }
-        storeConfig {
-            id
-            root_category_id
-        }
     }
 `;
 

package/lib/talons/Cms/useCmsPage.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
@@ -9,11 +9,10 @@ import DEFAULT_OPERATIONS from './cmsPage.gql';
 /**
  * Retrieves data necessary to render a CMS Page
  *
- * @param {object} props
- * @param {object} props.id - CMS Page ID
- * @param {object} props.queries - Collection of GraphQL queries
- * @param {object} props.queries.getCmsPage - Query for getting a CMS Page
- * @returns {{shouldShowLoadingIndicator: *, hasContent: *, cmsPage: *, error: *}}
+ * @param {{identifier}} props
+ * @param {String} props.identifier - CMS Page Identifier
+ * @param {Object} props.operations - Collection of GraphQL queries
+ * @returns {{cmsPage: *, shouldShowLoadingIndicator: *}}
  */
 export const useCmsPage = props => {
     const { identifier } = props;
@@ -21,7 +20,7 @@ export const useCmsPage = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getCMSPageQuery } = operations;
 
-    const { loading, error, data } = useQuery(getCMSPageQuery, {
+    const { loading, data } = useQuery(getCMSPageQuery, {
         variables: {
             identifier: identifier
         },
@@ -51,25 +50,9 @@ export const useCmsPage = props => {
     const shouldShowLoadingIndicator = loading && !data;
 
     const cmsPage = data ? data.cmsPage : null;
-    const rootCategoryId = data ? data.storeConfig.root_category_id : null;
-
-    // Only render <RichContent /> if the page isn't empty and doesn't contain
-    // the default CMS Page text. We do this so there is at least a useable home
-    // page by default, the category list component.
-    const hasContent = useMemo(() => {
-        return (
-            cmsPage &&
-            cmsPage.content &&
-            cmsPage.content.length > 0 &&
-            !cmsPage.content.includes('CMS homepage content goes here.')
-        );
-    }, [cmsPage]);
 
     return {
         cmsPage,
-        error,
-        hasContent,
-        rootCategoryId,
         shouldShowLoadingIndicator
     };
 };

package/lib/talons/CommunicationsPage/communicationsPage.gql.js

@@ -3,8 +3,8 @@ import { gql } from '@apollo/client';
 export const SET_NEWSLETTER_SUBSCRIPTION = gql`
     mutation SetNewsletterSubscription($isSubscribed: Boolean!) {
         updateCustomer(input: { is_subscribed: $isSubscribed }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             customer {
-                id
                 is_subscribed
             }
         }
@@ -13,8 +13,8 @@ export const SET_NEWSLETTER_SUBSCRIPTION = gql`
 
 export const GET_CUSTOMER_SUBSCRIPTION = gql`
     query GetCustomerSubscription {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             is_subscribed
         }
     }

package/lib/talons/ContactPage/contactUs.gql.js

@@ -0,0 +1,48 @@
+import { gql } from '@apollo/client';
+
+export const SUBMIT_CONTACT_FORM = gql`
+    mutation SubmitContactForm(
+        $name: String!
+        $email: String!
+        $comment: String!
+        $telephone: String
+    ) {
+        contactUs(
+            input: {
+                name: $name
+                email: $email
+                comment: $comment
+                telephone: $telephone
+            }
+        ) {
+            status
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForContactUs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            contact_enabled
+        }
+    }
+`;
+
+export const GET_CONTACT_PAGE_CMS_BLOCKS = gql`
+    query GetContactPageCmsBlocks($cmsBlockIdentifiers: [String]) {
+        cmsBlocks(identifiers: $cmsBlockIdentifiers) {
+            items {
+                content
+                identifier
+            }
+        }
+    }
+`;
+
+export default {
+    contactMutation: SUBMIT_CONTACT_FORM,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA,
+    getContactPageCmsBlocksQuery: GET_CONTACT_PAGE_CMS_BLOCKS
+};

package/lib/talons/ContactPage/index.js

@@ -0,0 +1,2 @@
+export { default as useContactPage } from './useContactPage';
+export { default as useContactLink } from './useContactLink';

package/lib/talons/ContactPage/useContactLink.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './contactUs.gql';
+
+export default (props = {}) => {
+    const { getStoreConfigQuery } = mergeOperations(
+        DEFAULT_OPERATIONS,
+        props.operations
+    );
+
+    const { data: storeConfigData, loading: configLoading } = useQuery(
+        getStoreConfigQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const isEnabled = useMemo(() => {
+        return !!storeConfigData?.storeConfig?.contact_enabled;
+    }, [storeConfigData]);
+
+    return {
+        isEnabled,
+        isLoading: configLoading
+    };
+};

package/lib/talons/ContactPage/useContactPage.js

@@ -0,0 +1,85 @@
+import { useCallback, useRef, useMemo } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './contactUs.gql';
+
+export default props => {
+    const { cmsBlockIdentifiers = [], operations } = props;
+    const {
+        contactMutation,
+        getStoreConfigQuery,
+        getContactPageCmsBlocksQuery
+    } = mergeOperations(DEFAULT_OPERATIONS, operations);
+
+    const formApiRef = useRef(null);
+
+    const [
+        submitForm,
+        { data, error: contactError, loading: submitLoading }
+    ] = useMutation(contactMutation, {
+        fetchPolicy: 'no-cache'
+    });
+
+    const { data: storeConfigData, loading: configLoading } = useQuery(
+        getStoreConfigQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const { data: cmsBlocksData, loading: cmsBlocksLoading } = useQuery(
+        getContactPageCmsBlocksQuery,
+        {
+            variables: {
+                cmsBlockIdentifiers
+            },
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const isEnabled = useMemo(() => {
+        return !!storeConfigData?.storeConfig?.contact_enabled;
+    }, [storeConfigData]);
+
+    const cmsBlocks = useMemo(() => {
+        return cmsBlocksData?.cmsBlocks?.items || [];
+    }, [cmsBlocksData]);
+
+    const setFormApi = useCallback(api => (formApiRef.current = api), []);
+    const handleSubmit = useCallback(
+        async ({ name, email, comment, telephone }) => {
+            try {
+                await submitForm({
+                    variables: {
+                        name,
+                        email,
+                        comment,
+                        telephone
+                    }
+                });
+                if (formApiRef.current) {
+                    formApiRef.current.reset();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+            }
+        },
+        [submitForm]
+    );
+    const errors = useMemo(() => new Map([['contactMutation', contactError]]), [
+        contactError
+    ]);
+
+    return {
+        isEnabled,
+        cmsBlocks,
+        errors,
+        handleSubmit,
+        isBusy: submitLoading,
+        isLoading: configLoading && cmsBlocksLoading,
+        setFormApi,
+        response: data && data.contactUs
+    };
+};

package/lib/talons/CreateAccount/createAccount.gql.js

@@ -20,8 +20,10 @@ export const CREATE_ACCOUNT = gql`
         ) {
             # 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 {
-                id
+                email
             }
         }
     }
@@ -29,8 +31,8 @@ export const CREATE_ACCOUNT = gql`
 
 export const GET_CUSTOMER = gql`
     query GetCustomerAfterCreate {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             email
             firstname
             lastname
@@ -57,15 +59,17 @@ 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 {
-                id
+                uid
                 prices {
                     price {
                         value
                     }
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
+                    uid
                     name
                     sku
                     small_image {
@@ -81,11 +85,13 @@ export const GET_CART_DETAILS = gql`
                     }
                 }
                 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 {
-                        id
+                        configurable_product_option_uid
                         option_label
-                        value_id
+                        configurable_product_option_value_uid
                         value_label
                     }
                 }
@@ -108,10 +114,11 @@ export const MERGE_CARTS = gql`
         mergeCarts(
             source_cart_id: $sourceCartId
             destination_cart_id: $destinationCartId
-        ) @connection(key: "mergeCarts") {
+        ) {
             id
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
             }
             ...CheckoutPageFragment
         }

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -1,8 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useApolloClient, useMutation } from '@apollo/client';
 
-import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
-import { clearCustomerDataFromCache } from '../../Apollo/clearCustomerDataFromCache';
 import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
@@ -101,8 +99,8 @@ export const useCreateAccount = props => {
                 await setToken(token);
 
                 // Clear all cart/customer data from cache and redux.
-                await clearCartDataFromCache(apolloClient);
-                await clearCustomerDataFromCache(apolloClient);
+                await apolloClient.clearCacheData(apolloClient, 'cart');
+                await apolloClient.clearCacheData(apolloClient, 'customer');
                 await removeCart();
 
                 // Create and get the customer's cart id.

package/lib/talons/Footer/footer.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_COPYRIGHT = gql`
     query storeConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             copyright
         }
     }

package/lib/talons/FormError/useFormError.js

@@ -3,17 +3,19 @@ import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 import { useIntl } from 'react-intl';
 
 export const useFormError = props => {
-    const { errors } = props;
+    const { errors, allowErrorMessages } = props;
     const { formatMessage } = useIntl();
 
     const derivedErrorMessage = useMemo(() => {
-        const defaultErrorMessage = formatMessage({
-            id: 'formError.errorMessage',
-            defaultMessage:
-                'An error has occurred. Please check the input and try again.'
-        });
+        const defaultErrorMessage = allowErrorMessages
+            ? ''
+            : formatMessage({
+                  id: 'formError.errorMessage',
+                  defaultMessage:
+                      'An error has occurred. Please check the input and try again.'
+              });
         return deriveErrorMessage(errors, defaultErrorMessage);
-    }, [errors, formatMessage]);
+    }, [errors, formatMessage, allowErrorMessages]);
 
     return {
         errorMessage: derivedErrorMessage

package/lib/talons/Gallery/__fixtures__/apolloMocks.js

@@ -8,7 +8,7 @@ export const mockGetStoreConfigEE = {
     result: {
         data: {
             storeConfig: {
-                id: 1,
+                store_code: 'default',
                 magento_wishlist_general_is_enabled: '1',
                 enable_multiple_wishlists: '1',
                 product_url_suffix: '.html'
@@ -24,7 +24,7 @@ export const mockGetStoreConfigCE = {
     result: {
         data: {
             storeConfig: {
-                id: 1,
+                store_code: 'default',
                 magento_wishlist_general_is_enabled: '1',
                 product_url_suffix: '.html'
             }

package/lib/talons/Gallery/gallery.gql.ce.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query GetStoreConfigDataForGalleryCE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             product_url_suffix
             magento_wishlist_general_is_enabled
         }

package/lib/talons/Gallery/gallery.gql.ee.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query GetStoreConfigDataForGalleryEE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             product_url_suffix
             magento_wishlist_general_is_enabled
             enable_multiple_wishlists