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

package/lib/talons/CategoryTree/useCategoryTree.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { useLazyQuery } from '@apollo/client';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
 
@@ -28,7 +28,7 @@ export const useCategoryTree = props => {
     const { categoryId, updateCategories } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getNavigationMenuQuery } = operations;
+    const { getNavigationMenuQuery, getCategoryUrlSuffixQuery } = operations;
 
     const [runQuery, queryResult] = useLazyQuery(getNavigationMenuQuery, {
         fetchPolicy: 'cache-and-network',
@@ -36,6 +36,15 @@ export const useCategoryTree = props => {
     });
     const { data } = queryResult;
 
+    const { data: categoryUrlData } = useQuery(getCategoryUrlSuffixQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (categoryUrlData) {
+            return categoryUrlData.storeConfig.category_url_suffix;
+        }
+    }, [categoryUrlData]);
     // fetch categories
     useEffect(() => {
         if (categoryId != null) {
@@ -79,5 +88,5 @@ export const useCategoryTree = props => {
         return childCategories;
     }, [children, rootCategory]);
 
-    return { childCategories, data };
+    return { childCategories, data, categoryUrlSuffix };
 };

package/lib/talons/CheckoutPage/AddressBook/addressBook.gql.js

@@ -0,0 +1,34 @@
+import { gql } from '@apollo/client';
+
+import { SET_CUSTOMER_ADDRESS_ON_CART } from '../ShippingInformation/shippingInformation.gql';
+import { CustomerAddressFragment } from './addressBookFragments.gql';
+import { ShippingInformationFragment } from '../ShippingInformation/shippingInformationFragments.gql';
+
+export const GET_CUSTOMER_ADDRESSES = gql`
+    query GetCustomerAddresses {
+        customer {
+            id
+            addresses {
+                id
+                ...CustomerAddressFragment
+            }
+        }
+    }
+    ${CustomerAddressFragment}
+`;
+
+export const GET_CUSTOMER_CART_ADDRESS = gql`
+    query GetCustomerCartAddress {
+        customerCart {
+            id
+            ...ShippingInformationFragment
+        }
+    }
+    ${ShippingInformationFragment}
+`;
+
+export default {
+    setCustomerAddressOnCartMutation: SET_CUSTOMER_ADDRESS_ON_CART,
+    getCustomerAddressesQuery: GET_CUSTOMER_ADDRESSES,
+    getCustomerCartAddressQuery: GET_CUSTOMER_CART_ADDRESS
+};

package/lib/talons/CheckoutPage/AddressBook/addressBookFragments.gql.js

@@ -0,0 +1,31 @@
+import { gql } from '@apollo/client';
+
+export const CustomerAddressFragment = gql`
+    fragment CustomerAddressFragment on CustomerAddress {
+        id
+        city
+        country_code
+        default_shipping
+        firstname
+        lastname
+        postcode
+        region {
+            region
+            region_code
+            region_id
+        }
+        street
+        telephone
+    }
+`;
+
+export const AddressBookFragment = gql`
+    fragment AddressBookFragment on Customer {
+        id
+        addresses {
+            id
+            ...CustomerAddressFragment
+        }
+    }
+    ${CustomerAddressFragment}
+`;

package/lib/talons/CheckoutPage/AddressBook/useAddressBook.js

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
+import DEFAULT_OPERATIONS from './addressBook.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useAppContext } from '../../../context/app';
 import { useCartContext } from '../../../context/cart';
@@ -7,12 +9,14 @@ import { useUserContext } from '../../../context/user';
 import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
 
 export const useAddressBook = props => {
+    const { toggleActiveContent, onSuccess } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
-        mutations: { setCustomerAddressOnCartMutation },
-        queries: { getCustomerAddressesQuery, getCustomerCartAddressQuery },
-        toggleActiveContent,
-        onSuccess
-    } = props;
+        setCustomerAddressOnCartMutation,
+        getCustomerAddressesQuery,
+        getCustomerCartAddressQuery
+    } = operations;
 
     const [, { toggleDrawer }] = useAppContext();
     const [{ cartId }] = useCartContext();
@@ -62,9 +66,13 @@ export const useAddressBook = props => {
         customerCartAddressLoading ||
         setCustomerAddressOnCartLoading;
 
-    const customerAddresses =
-        (customerAddressesData && customerAddressesData.customer.addresses) ||
-        [];
+    const customerAddresses = useMemo(
+        () =>
+            (customerAddressesData &&
+                customerAddressesData.customer.addresses) ||
+            [],
+        [customerAddressesData]
+    );
 
     useEffect(() => {
         if (customerAddresses.length !== addressCount.current) {

package/lib/talons/CheckoutPage/PaymentInformation/braintreeSummary.gql.js

@@ -15,7 +15,7 @@ export const GET_SUMMARY_DATA = gql`
                 street
                 city
                 region {
-                    code
+                    label
                 }
                 postalCode: postcode
                 phoneNumber: telephone

package/lib/talons/CheckoutPage/PaymentInformation/editModal.gql.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+
+export const GET_SELECTED_PAYMENT_METHOD = gql`
+    query getSelectedPaymentMethod($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            selected_payment_method {
+                code
+            }
+        }
+    }
+`;
+
+export default {
+    getSelectedPaymentMethodQuery: GET_SELECTED_PAYMENT_METHOD
+};

package/lib/talons/CheckoutPage/PaymentInformation/paymentInformation.gql.js

@@ -120,12 +120,8 @@ export const SET_FREE_PAYMENT_METHOD_ON_CART = gql`
 `;
 
 export default {
-    queries: {
-        getPaymentNonceQuery: GET_PAYMENT_NONCE,
-        getPaymentInformation: GET_PAYMENT_INFORMATION
-    },
-    mutations: {
-        setBillingAddressMutation: SET_BILLING_ADDRESS,
-        setFreePaymentMethodMutation: SET_FREE_PAYMENT_METHOD_ON_CART
-    }
+    getPaymentNonceQuery: GET_PAYMENT_NONCE,
+    getPaymentInformationQuery: GET_PAYMENT_INFORMATION,
+    setBillingAddressMutation: SET_BILLING_ADDRESS,
+    setFreePaymentMethodMutation: SET_FREE_PAYMENT_METHOD_ON_CART
 };

package/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql.js

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAYMENT_METHODS = gql`
+    query getPaymentMethods($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            available_payment_methods {
+                code
+                title
+            }
+        }
+    }
+`;
+
+export default {
+    getPaymentMethodsQuery: GET_PAYMENT_METHODS
+};

package/lib/talons/CheckoutPage/PaymentInformation/useBraintreeSummary.js

@@ -14,7 +14,7 @@ const mapBillingAddressData = rawBillingAddressData => {
             street1: street[0],
             street2: street[1],
             country: country.code,
-            state: region.code
+            state: region.label
         };
     } else {
         return {};

package/lib/talons/CheckoutPage/PaymentInformation/useEditModal.js

@@ -1,5 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useQuery } from '@apollo/client';
+import DEFAULT_OPERATIONS from './editModal.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../context/cart';
 
@@ -7,7 +9,7 @@ import { useCartContext } from '../../../context/cart';
  * Talon to handle checkout page's payment information edit modal.
  *
  * @param {Function} props.onClose callback to be called when the modal's close or cancel button is clicked.
- * @param {DocumentNode} props.queries.getSelectedPaymentMethodQuery query to fetch the payment method that was used in the payment information checkout step
+ * @param {DocumentNode} props.operations.getSelectedPaymentMethodQuery query to fetch the payment method that was used in the payment information checkout step
  *
  * @returns {
  *   selectedPaymentMethod: String,
@@ -22,11 +24,10 @@ import { useCartContext } from '../../../context/cart';
  * }
  */
 export const useEditModal = props => {
-    const {
-        onClose,
-        queries: { getSelectedPaymentMethodQuery }
-    } = props;
+    const { onClose } = props;
 
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getSelectedPaymentMethodQuery } = operations;
     /**
      * Definitions
      */

package/lib/talons/CheckoutPage/PaymentInformation/usePaymentInformation.js

@@ -1,5 +1,7 @@
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { useQuery, useApolloClient, useMutation } from '@apollo/client';
+import DEFAULT_OPERATIONS from './paymentInformation.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../context/cart';
 import CheckoutError from '../CheckoutError';
@@ -9,31 +11,31 @@ import { CHECKOUT_STEP } from '../useCheckoutPage';
  *
  * @param {Function} props.onSave callback to be called when user clicks review order button
  * @param {Object} props.checkoutError an instance of the `CheckoutError` error that has been generated using the error from the place order mutation
- * @param {DocumentNode} props.queries.getPaymentNonceQuery query to fetch and/or clear payment nonce from cache
  * @param {Boolean} props.shouldSubmit property telling us to proceed to next step
  * @param {Function} props.resetShouldSubmit callback to reset the review order button flag
- * @param {DocumentNode} props.queries.getPaymentInformation query to fetch data to render this component
- * @param {DocumentNode} props.mutation.setBillingAddressMutation
- * @param {DocumentNode} props.mutation.setFreePaymentMethodMutation
+ * @param {DocumentNode} props.operations.getPaymentNonceQuery query to fetch and/or clear payment nonce from cache
+ * @param {DocumentNode} props.operations.getPaymentInformationQuery query to fetch data to render this component
+ * @param {DocumentNode} props.operations.setBillingAddressMutation mutation to set billing address on Cart
+ * @param {DocumentNode} props.operations.setFreePaymentMethodMutation mutation to set free payment method on Cart
  *
  * @returns {PaymentInformationTalonProps}
  */
 export const usePaymentInformation = props => {
     const {
-        mutations,
         onSave,
         checkoutError,
-        queries,
         resetShouldSubmit,
         setCheckoutStep,
         shouldSubmit
     } = props;
-    const {
-        setFreePaymentMethodMutation,
-        setBillingAddressMutation
-    } = mutations;
-    const { getPaymentInformation, getPaymentNonceQuery } = queries;
 
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        getPaymentInformationQuery,
+        getPaymentNonceQuery,
+        setBillingAddressMutation,
+        setFreePaymentMethodMutation
+    } = operations;
     /**
      * Definitions
      */
@@ -73,7 +75,7 @@ export const usePaymentInformation = props => {
     const {
         data: paymentInformationData,
         loading: paymentInformationLoading
-    } = useQuery(getPaymentInformation, {
+    } = useQuery(getPaymentInformationQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !cartId,
@@ -109,9 +111,13 @@ export const usePaymentInformation = props => {
      * Effects
      */
 
-    const availablePaymentMethods = paymentInformationData
-        ? paymentInformationData.cart.available_payment_methods
-        : [];
+    const availablePaymentMethods = useMemo(
+        () =>
+            paymentInformationData
+                ? paymentInformationData.cart.available_payment_methods
+                : [],
+        [paymentInformationData]
+    );
 
     const selectedPaymentMethod =
         (paymentInformationData &&

package/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js

@@ -1,11 +1,14 @@
 import { useQuery } from '@apollo/client';
-import { useFieldState } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import DEFAULT_OPERATIONS from './paymentMethods.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../context/cart';
 
 export const usePaymentMethods = props => {
-    const { queries } = props;
-    const { getPaymentMethodsQuery } = queries;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getPaymentMethodsQuery } = operations;
+
     const [{ cartId }] = useCartContext();
 
     const { data, loading } = useQuery(getPaymentMethodsQuery, {

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/customerForm.gql.js

@@ -0,0 +1,55 @@
+import { gql } from '@apollo/client';
+
+import { GET_CUSTOMER_ADDRESSES } from '../../AddressBook/addressBook.gql';
+import { CustomerAddressFragment } from '../../AddressBook/addressBookFragments.gql';
+import { GET_DEFAULT_SHIPPING } from '../shippingInformation.gql';
+
+export const CREATE_CUSTOMER_ADDRESS_MUTATION = gql`
+    mutation CreateCustomerAddress($address: CustomerAddressInput!) {
+        createCustomerAddress(input: $address)
+            @connection(key: "createCustomerAddress") {
+            id
+            ...CustomerAddressFragment
+        }
+    }
+    ${CustomerAddressFragment}
+`;
+
+/**
+ * We would normally use the CustomerAddressFragment here for the response
+ * but due to GraphQL returning null region data, we return minimal data and
+ * rely on refetching after performing this mutation to get accurate data.
+ *
+ * Fragment will be added back after MC-33948 is resolved.
+ */
+export const UPDATE_CUSTOMER_ADDRESS_MUTATION = gql`
+    mutation UpdateCustomerAddress(
+        $addressId: Int!
+        $address: CustomerAddressInput!
+    ) {
+        updateCustomerAddress(id: $addressId, input: $address)
+            @connection(key: "updateCustomerAddress") {
+            id
+        }
+    }
+`;
+
+export const GET_CUSTOMER_QUERY = gql`
+    query GetCustomer {
+        customer {
+            id
+            default_shipping
+            email
+            firstname
+            lastname
+        }
+    }
+`;
+
+export default {
+    createCustomerAddressMutation: CREATE_CUSTOMER_ADDRESS_MUTATION,
+    updateCustomerAddressMutation: UPDATE_CUSTOMER_ADDRESS_MUTATION,
+    getCustomerQuery: GET_CUSTOMER_QUERY,
+    getCustomerAddressesQuery: GET_CUSTOMER_ADDRESSES,
+    getDefaultShippingQuery: GET_DEFAULT_SHIPPING
+};

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/guestForm.gql.js

@@ -0,0 +1,44 @@
+import { gql } from '@apollo/client';
+import { PriceSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql';
+
+import { ShippingInformationFragment } from '../shippingInformationFragments.gql';
+import { ShippingMethodsCheckoutFragment } from '../../ShippingMethod/shippingMethodFragments.gql';
+import { AvailablePaymentMethodsFragment } from '../../PaymentInformation/paymentInformation.gql';
+
+export const SET_GUEST_SHIPPING_MUTATION = gql`
+    mutation SetGuestShipping(
+        $cartId: String!
+        $email: String!
+        $address: CartAddressInput!
+    ) {
+        setGuestEmailOnCart(input: { cart_id: $cartId, email: $email })
+            @connection(key: "setGuestEmailOnCart") {
+            cart {
+                id
+            }
+        }
+
+        setShippingAddressesOnCart(
+            input: {
+                cart_id: $cartId
+                shipping_addresses: [{ address: $address }]
+            }
+        ) @connection(key: "setShippingAddressesOnCart") {
+            cart {
+                id
+                ...ShippingInformationFragment
+                ...ShippingMethodsCheckoutFragment
+                ...PriceSummaryFragment
+                ...AvailablePaymentMethodsFragment
+            }
+        }
+    }
+    ${ShippingInformationFragment}
+    ${ShippingMethodsCheckoutFragment}
+    ${PriceSummaryFragment}
+    ${AvailablePaymentMethodsFragment}
+`;
+
+export default {
+    setGuestShippingMutation: SET_GUEST_SHIPPING_MUTATION
+};

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

@@ -1,22 +1,19 @@
 import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
+import DEFAULT_OPERATIONS from './customerForm.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 export const useCustomerForm = props => {
+    const { afterSubmit, onCancel, onSuccess, shippingData } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
-        afterSubmit,
-        mutations: {
-            createCustomerAddressMutation,
-            updateCustomerAddressMutation
-        },
-        onCancel,
-        onSuccess,
-        queries: {
-            getCustomerQuery,
-            getCustomerAddressesQuery,
-            getDefaultShippingQuery
-        },
-        shippingData
-    } = props;
+        createCustomerAddressMutation,
+        updateCustomerAddressMutation,
+        getCustomerQuery,
+        getCustomerAddressesQuery,
+        getDefaultShippingQuery
+    } = operations;
 
     const [
         createCustomerAddress,

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

@@ -1,16 +1,15 @@
 import { useCallback, useMemo } from 'react';
 import { useMutation } 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,
-        mutations: { setGuestShippingMutation },
-        onCancel,
-        onSuccess,
-        shippingData
-    } = props;
+    const { afterSubmit, onCancel, onSuccess, shippingData } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { setGuestShippingMutation } = operations;
 
     const [{ cartId }] = useCartContext();
 

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

@@ -0,0 +1,54 @@
+import { gql } from '@apollo/client';
+import { PriceSummaryFragment } from '../../CartPage/PriceSummary/priceSummaryFragments.gql';
+
+import { ShippingInformationFragment } from './shippingInformationFragments.gql';
+import { ShippingMethodsCheckoutFragment } from '../ShippingMethod/shippingMethodFragments.gql';
+import { AvailablePaymentMethodsFragment } from '../PaymentInformation/paymentInformation.gql';
+
+export const GET_SHIPPING_INFORMATION = gql`
+    query GetShippingInformation($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ShippingInformationFragment
+        }
+    }
+    ${ShippingInformationFragment}
+`;
+
+export const GET_DEFAULT_SHIPPING = gql`
+    query GetDefaultShipping {
+        customer {
+            id
+            default_shipping
+        }
+    }
+`;
+
+export const SET_CUSTOMER_ADDRESS_ON_CART = gql`
+    mutation SetCustomerAddressOnCart($cartId: String!, $addressId: Int!) {
+        setShippingAddressesOnCart(
+            input: {
+                cart_id: $cartId
+                shipping_addresses: [{ customer_address_id: $addressId }]
+            }
+        ) @connection(key: "setShippingAddressesOnCart") {
+            cart {
+                id
+                ...ShippingInformationFragment
+                ...ShippingMethodsCheckoutFragment
+                ...PriceSummaryFragment
+                ...AvailablePaymentMethodsFragment
+            }
+        }
+    }
+    ${ShippingInformationFragment}
+    ${ShippingMethodsCheckoutFragment}
+    ${PriceSummaryFragment}
+    ${AvailablePaymentMethodsFragment}
+`;
+
+export default {
+    setDefaultAddressOnCartMutation: SET_CUSTOMER_ADDRESS_ON_CART,
+    getDefaultShippingQuery: GET_DEFAULT_SHIPPING,
+    getShippingInformationQuery: GET_SHIPPING_INFORMATION
+};

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

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+export const ShippingInformationFragment = gql`
+    fragment ShippingInformationFragment on Cart {
+        id
+        email
+        shipping_addresses {
+            city
+            country {
+                code
+                label
+            }
+            firstname
+            lastname
+            postcode
+            region {
+                code
+                label
+                region_id
+            }
+            street
+            telephone
+        }
+    }
+`;

package/lib/talons/CheckoutPage/ShippingInformation/useShippingInformation.js

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
+import DEFAULT_OPERATIONS from './shippingInformation.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useAppContext } from '../../../context/app';
 import { useCartContext } from '../../../context/cart';
@@ -7,12 +9,9 @@ import { useUserContext } from '../../../context/user';
 import { MOCKED_ADDRESS } from '../../CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
 
 export const useShippingInformation = props => {
-    const {
-        mutations: { setDefaultAddressOnCartMutation },
-        onSave,
-        queries: { getDefaultShippingQuery, getShippingInformationQuery },
-        toggleActiveContent
-    } = props;
+    const { onSave, toggleActiveContent } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const [, { toggleDrawer }] = useAppContext();
     const [{ cartId }] = useCartContext();
@@ -21,6 +20,12 @@ export const useShippingInformation = props => {
     const [hasUpdate, setHasUpdate] = useState(false);
     const hasLoadedData = useRef(false);
 
+    const {
+        setDefaultAddressOnCartMutation,
+        getDefaultShippingQuery,
+        getShippingInformationQuery
+    } = operations;
+
     const {
         data: shippingInformationData,
         loading: getShippingInformationLoading