@magento/peregrine 11.0.0-beta.1 → 12.0.0-alpha.3

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

@@ -0,0 +1,64 @@
+import { gql } from '@apollo/client';
+
+import { PriceSummaryFragment } from '../../CartPage/PriceSummary/priceSummaryFragments.gql';
+import { ShippingInformationFragment } from '../ShippingInformation/shippingInformationFragments.gql';
+
+import {
+    AvailableShippingMethodsCheckoutFragment,
+    SelectedShippingMethodCheckoutFragment
+} from './shippingMethodFragments.gql';
+
+export const GET_SELECTED_AND_AVAILABLE_SHIPPING_METHODS = gql`
+    query getSelectedAndAvailableShippingMethods($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...AvailableShippingMethodsCheckoutFragment
+            ...SelectedShippingMethodCheckoutFragment
+            # We include the following fragments to avoid extra requeries
+            # after this mutation completes. This all comes down to not
+            # having ids for shipping address objects. With ids we could
+            # merge results.
+            ...ShippingInformationFragment
+        }
+    }
+    ${AvailableShippingMethodsCheckoutFragment}
+    ${SelectedShippingMethodCheckoutFragment}
+    ${ShippingInformationFragment}
+`;
+
+export const SET_SHIPPING_METHOD = gql`
+    mutation SetShippingMethod(
+        $cartId: String!
+        $shippingMethod: ShippingMethodInput!
+    ) {
+        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.
+                available_payment_methods {
+                    code
+                    title
+                }
+                ...SelectedShippingMethodCheckoutFragment
+                ...PriceSummaryFragment
+                # We include the following fragments to avoid extra requeries
+                # after this mutation completes. This all comes down to not
+                # having ids for shipping address objects. With ids we could
+                # merge results.
+                ...ShippingInformationFragment
+                ...AvailableShippingMethodsCheckoutFragment
+            }
+        }
+    }
+    ${AvailableShippingMethodsCheckoutFragment}
+    ${SelectedShippingMethodCheckoutFragment}
+    ${PriceSummaryFragment}
+    ${ShippingInformationFragment}
+`;
+
+export default {
+    setShippingMethodMutation: SET_SHIPPING_METHOD,
+    getSelectedAndAvailableShippingMethodsQuery: GET_SELECTED_AND_AVAILABLE_SHIPPING_METHODS
+};

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

@@ -0,0 +1,64 @@
+import { gql } from '@apollo/client';
+
+/**
+ * WARNING: This fragment can cause slowdowns on the network request because it
+ * causes the backend to make remote queries to carriers for real-time data.
+ * Make sure you are conscious about the side effects when including it in queries and mutations.
+ */
+export const AvailableShippingMethodsCheckoutFragment = gql`
+    fragment AvailableShippingMethodsCheckoutFragment on Cart {
+        id
+        shipping_addresses {
+            available_shipping_methods {
+                amount {
+                    currency
+                    value
+                }
+                available
+                carrier_code
+                carrier_title
+                method_code
+                method_title
+            }
+            street
+        }
+    }
+`;
+
+export const SelectedShippingMethodCheckoutFragment = gql`
+    fragment SelectedShippingMethodCheckoutFragment on Cart {
+        id
+        shipping_addresses {
+            selected_shipping_method {
+                amount {
+                    currency
+                    value
+                }
+                carrier_code
+                method_code
+                method_title
+            }
+            street
+        }
+    }
+`;
+
+export const ShippingMethodsCheckoutFragment = gql`
+    fragment ShippingMethodsCheckoutFragment on Cart {
+        id
+        ...AvailableShippingMethodsCheckoutFragment
+        ...SelectedShippingMethodCheckoutFragment
+        shipping_addresses {
+            country {
+                code
+            }
+            postcode
+            region {
+                code
+            }
+            street
+        }
+    }
+    ${AvailableShippingMethodsCheckoutFragment}
+    ${SelectedShippingMethodCheckoutFragment}
+`;

package/lib/talons/CheckoutPage/{useShippingMethod.js → ShippingMethod/useShippingMethod.js}

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
+import DEFAULT_OPERATIONS from './shippingMethod.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
@@ -40,13 +42,14 @@ const DEFAULT_SELECTED_SHIPPING_METHOD = null;
 const DEFAULT_AVAILABLE_SHIPPING_METHODS = [];
 
 export const useShippingMethod = props => {
+    const { onSave, onSuccess, setPageIsUpdating } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
     const {
-        onSave,
-        onSuccess,
-        mutations: { setShippingMethod },
-        queries: { getSelectedAndAvailableShippingMethods },
-        setPageIsUpdating
-    } = props;
+        getSelectedAndAvailableShippingMethodsQuery,
+        setShippingMethodMutation
+    } = operations;
 
     const [{ cartId }] = useCartContext();
     const [{ isSignedIn }] = useUserContext();
@@ -57,14 +60,14 @@ export const useShippingMethod = props => {
     const [
         setShippingMethodCall,
         { error: setShippingMethodError, loading: isSettingShippingMethod }
-    ] = useMutation(setShippingMethod, {
+    ] = useMutation(setShippingMethodMutation, {
         onCompleted: () => {
             onSuccess();
         }
     });
 
     const { data, loading: isLoadingShippingMethods } = useQuery(
-        getSelectedAndAvailableShippingMethods,
+        getSelectedAndAvailableShippingMethodsQuery,
         {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',

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

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_CMS_PAGE = gql`
-    query GetCmsPage($id: Int!) {
-        cmsPage(id: $id) {
+    query GetCmsPage($identifier: String!) {
+        cmsPage(identifier: $identifier) {
             url_key
             content
             content_heading

package/lib/talons/Cms/useCmsPage.js

@@ -16,14 +16,14 @@ import DEFAULT_OPERATIONS from './cmsPage.gql';
  * @returns {{shouldShowLoadingIndicator: *, hasContent: *, cmsPage: *, error: *}}
  */
 export const useCmsPage = props => {
-    const { id } = props;
+    const { identifier } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getCMSPageQuery } = operations;
 
     const { loading, error, data } = useQuery(getCMSPageQuery, {
         variables: {
-            id: Number(id)
+            identifier: identifier
         },
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'

package/lib/talons/CommunicationsPage/useCommunicationsPage.js

@@ -55,7 +55,6 @@ export const useCommunicationsPage = props => {
         formErrors: [setNewsletterSubscriptionError, subscriptionDataError],
         initialValues,
         handleSubmit,
-        isDisabled: isSubmitting,
-        isSignedIn
+        isDisabled: isSubmitting
     };
 };

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

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { CheckoutPageFragment } from '../CheckoutPage/checkoutPageFragments.gql';
 
 export const CREATE_ACCOUNT = gql`
     mutation CreateAccount(
@@ -112,8 +113,10 @@ export const MERGE_CARTS = gql`
             items {
                 id
             }
+            ...CheckoutPageFragment
         }
     }
+    ${CheckoutPageFragment}
 `;
 
 export default {

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -46,7 +46,7 @@ export const useCreateAccount = props => {
         { createCart, removeCart, getCartDetails }
     ] = useCartContext();
     const [
-        { isGettingDetails, isSignedIn },
+        { isGettingDetails },
         { getUserDetails, setToken }
     ] = useUserContext();
 
@@ -178,8 +178,7 @@ export const useCreateAccount = props => {
         handleCancel,
         handleSubmit,
         initialValues: sanitizedInitialValues,
-        isDisabled: isSubmitting || isGettingDetails,
-        isSignedIn
+        isDisabled: isSubmitting || isGettingDetails
     };
 };
 
@@ -240,5 +239,4 @@ export const useCreateAccount = props => {
  * @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 {Boolean} isSignedIn true if user is signed in. False otherwise.
  */

package/lib/talons/CreateAccountPage/useCreateAccountPage.js

@@ -1,6 +1,8 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
 const validCreateAccountParams = ['email', 'firstName', 'lastName'];
 
 const getCreateAccountInitialValues = search => {
@@ -13,27 +15,54 @@ const getCreateAccountInitialValues = search => {
 };
 
 /**
- * Returns props necessary to render CreateAccountPage component.
+ * @typedef {function} useCreateAccountPage
+ *
+ * @param {String} props.signedInRedirectUrl - Url to push when user is signed in
+ * @param {String} props.signInPageUrl - Sign In Page url
  *
  * @returns {{
- *   handleCreateAccount: function,
- *   initialValues: object
+ *   createAccountProps: object
  * }}
  */
-export const useCreateAccountPage = () => {
+export const useCreateAccountPage = props => {
+    const { signedInRedirectUrl, signInPageUrl } = props;
     const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
     const { search } = useLocation();
 
-    const handleCreateAccount = useCallback(() => {
-        history.push('/');
+    // 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) {
+            history.push(signInPageUrl, historyState);
+        }
+    }, [history, historyState, signInPageUrl]);
 
     const initialValues = useMemo(() => getCreateAccountInitialValues(search), [
         search
     ]);
 
+    const createAccountProps = {
+        initialValues,
+        isCancelButtonHidden: false,
+        onCancel: handleOnCancel
+    };
+
     return {
-        handleCreateAccount,
-        initialValues
+        createAccountProps
     };
 };

package/lib/talons/FilterModal/useFilterList.js

@@ -1,7 +1,21 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
-export const useFilterList = () => {
-    const [isListExpanded, setExpanded] = useState(false);
+export const useFilterList = props => {
+    const { filterState, items, itemCountToShow } = props;
+
+    const hasSelected = useMemo(
+        () =>
+            items.some((item, index) => {
+                return (
+                    filterState &&
+                    filterState.has(item) &&
+                    index >= itemCountToShow
+                );
+            }),
+        [filterState, itemCountToShow, items]
+    );
+
+    const [isListExpanded, setExpanded] = useState(hasSelected);
 
     const handleListToggle = useCallback(() => {
         setExpanded(value => !value);

package/lib/talons/FilterModal/useFilterModal.js

@@ -39,10 +39,6 @@ export const useFilterModal = props => {
 
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
-    const inputFields = introspectionData
-        ? introspectionData.__type.inputFields
-        : [];
-
     const attributeCodes = useMemo(
         () => filters.map(({ attribute_code }) => attribute_code),
         [filters]
@@ -64,6 +60,9 @@ export const useFilterModal = props => {
     // that the api will understand.
     const possibleFilters = useMemo(() => {
         const nextFilters = new Set();
+        const inputFields = introspectionData
+            ? introspectionData.__type.inputFields
+            : [];
 
         // perform mapping and filtering in the same cycle
         for (const { name } of inputFields) {
@@ -76,7 +75,7 @@ export const useFilterModal = props => {
         }
 
         return nextFilters;
-    }, [DISABLED_FILTERS, attributeCodes, inputFields]);
+    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
 
     // iterate over filters once to set up all the collections we need
     const [filterNames, filterKeys, filterItems] = useMemo(() => {

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -33,10 +33,6 @@ export const useFilterSidebar = props => {
 
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
-    const inputFields = introspectionData
-        ? introspectionData.__type.inputFields
-        : [];
-
     const attributeCodes = useMemo(
         () => filters.map(({ attribute_code }) => attribute_code),
         [filters]
@@ -58,6 +54,9 @@ export const useFilterSidebar = props => {
     // that the api will understand.
     const possibleFilters = useMemo(() => {
         const nextFilters = new Set();
+        const inputFields = introspectionData
+            ? introspectionData.__type.inputFields
+            : [];
 
         // perform mapping and filtering in the same cycle
         for (const { name } of inputFields) {
@@ -70,7 +69,7 @@ export const useFilterSidebar = props => {
         }
 
         return nextFilters;
-    }, [DISABLED_FILTERS, attributeCodes, inputFields]);
+    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
 
     // iterate over filters once to set up all the collections we need
     const [filterNames, filterKeys, filterItems] = useMemo(() => {

package/lib/talons/ForgotPasswordPage/useForgotPasswordPage.js

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * @typedef {function} useForgotPasswordPage
+ *
+ * @param {String} props.signedInRedirectUrl - Url to push when user is signed in
+ * @param {String} props.signInPageUrl - Sign In Page url
+ *
+ * @returns {{
+ *   forgotPasswordProps: object
+ * }}
+ */
+export const useForgotPasswordPage = props => {
+    const { signedInRedirectUrl, signInPageUrl } = props;
+    const history = useHistory();
+    const [{ isSignedIn }] = useUserContext();
+
+    // Keep location state in memory when pushing history
+    const historyState = useMemo(() => {
+        return history && history.location.state ? history.location.state : {};
+    }, [history]);
+
+    // Redirect if user is signed in
+    useEffect(() => {
+        if (isSignedIn && signedInRedirectUrl) {
+            history.push(signedInRedirectUrl);
+        }
+    }, [history, isSignedIn, signedInRedirectUrl]);
+
+    const handleOnCancel = useCallback(() => {
+        if (signInPageUrl) {
+            history.push(signInPageUrl, historyState);
+        }
+    }, [history, historyState, signInPageUrl]);
+
+    const forgotPasswordProps = {
+        onCancel: handleOnCancel
+    };
+
+    return {
+        forgotPasswordProps
+    };
+};

package/lib/talons/FormError/useFormError.js

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

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

@@ -1,30 +1,32 @@
 import eeOperations from '../gallery.gql.ee';
 import ceOperations from '../gallery.gql.ce';
 
-export const mockGetWishlistConfigEE = {
+export const mockGetStoreConfigEE = {
     request: {
-        query: eeOperations.getWishlistConfigQuery
+        query: eeOperations.getStoreConfigQuery
     },
     result: {
         data: {
             storeConfig: {
                 id: 1,
                 magento_wishlist_general_is_enabled: '1',
-                enable_multiple_wishlists: '1'
+                enable_multiple_wishlists: '1',
+                product_url_suffix: '.html'
             }
         }
     }
 };
 
-export const mockGetWishlistConfigCE = {
+export const mockGetStoreConfigCE = {
     request: {
-        query: ceOperations.getWishlistConfigQuery
+        query: ceOperations.getStoreConfigQuery
     },
     result: {
         data: {
             storeConfig: {
                 id: 1,
-                magento_wishlist_general_is_enabled: '1'
+                magento_wishlist_general_is_enabled: '1',
+                product_url_suffix: '.html'
             }
         }
     }

package/lib/talons/Gallery/addToCart.gql.js

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+import { MiniCartFragment } from '../MiniCart/miniCartFragments.gql';
+
+const ADD_ITEM = gql`
+    mutation AddItemToCart($cartId: String!, $cartItem: CartItemInput!) {
+        addProductsToCart(cartId: $cartId, cartItems: [$cartItem]) {
+            cart {
+                id
+                ...MiniCartFragment
+            }
+        }
+    }
+    ${MiniCartFragment}
+`;
+export default {
+    ADD_ITEM
+};

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

@@ -1,14 +1,15 @@
 import { gql } from '@apollo/client';
 
-export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForGalleryCE {
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigDataForGalleryCE {
         storeConfig {
             id
+            product_url_suffix
             magento_wishlist_general_is_enabled
         }
     }
 `;
 
 export default {
-    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

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

@@ -1,9 +1,10 @@
 import { gql } from '@apollo/client';
 
-export const GET_WISHLIST_CONFIG = gql`
-    query GetWishlistConfigForGalleryEE {
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigDataForGalleryEE {
         storeConfig {
             id
+            product_url_suffix
             magento_wishlist_general_is_enabled
             enable_multiple_wishlists
         }
@@ -11,5 +12,5 @@ export const GET_WISHLIST_CONFIG = gql`
 `;
 
 export default {
-    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/Gallery/useAddToCartButton.js

@@ -0,0 +1,81 @@
+import { useCallback, useState } from 'react';
+import { useMutation } from '@apollo/client';
+import { useHistory } from 'react-router-dom';
+
+import { useCartContext } from '../../context/cart';
+import operations from './addToCart.gql';
+
+/**
+ * @param {Number} props.item.id - id of item
+ * @param {String} props.item.name - name of item
+ * @param {String} props.item.stock_status - stock status of item
+ * @param {String} props.item.type_id - product type
+ * @param {String} props.item.url_key - item url key
+ * @param {String} props.item.sku - item sku
+ *
+ * @returns {
+ *      handleAddToCart: Function,
+ *      isDisabled: Boolean,
+ *      isInStock: Boolean
+ * }
+ *
+ */
+const UNSUPPORTED_PRODUCT_TYPES = [
+    'virtual',
+    'bundle',
+    'grouped',
+    'downloadable'
+];
+
+export const useAddToCartButton = props => {
+    const { item } = props;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const isInStock = item.stock_status === 'IN_STOCK';
+
+    const productType = item.type_id;
+    const isUnsupportedProductType = UNSUPPORTED_PRODUCT_TYPES.includes(
+        productType
+    );
+    const isDisabled = isLoading || !isInStock || isUnsupportedProductType;
+
+    const history = useHistory();
+
+    const [{ cartId }] = useCartContext();
+
+    const [addToCart] = useMutation(operations.ADD_ITEM);
+
+    const handleAddToCart = useCallback(async () => {
+        try {
+            if (productType === 'simple') {
+                setIsLoading(true);
+
+                await addToCart({
+                    variables: {
+                        cartId,
+                        cartItem: {
+                            quantity: 1,
+                            selected_options: [],
+                            sku: item.sku
+                        }
+                    }
+                });
+
+                setIsLoading(false);
+            } else if (productType === 'configurable') {
+                history.push(`${item.url_key}.html`);
+            } else {
+                console.warn('Unsupported product type unable to handle.');
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }, [addToCart, cartId, history, item.sku, item.url_key, productType]);
+
+    return {
+        handleAddToCart,
+        isDisabled,
+        isInStock
+    };
+};