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

package/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
+import useInternalLink from '../../hooks/useInternalLink';
 
 import mergeOperations from '../../util/shallowMerge';
 
@@ -28,14 +29,15 @@ const getPath = (path, suffix) => {
  *   currentCategory: string,
  *   currentCategoryPath: string,
  *   isLoading: boolean,
- *   normalizedData: array
+ *   normalizedData: array,
+ *   handleClick: function
  * }}
  */
 export const useBreadcrumbs = props => {
     const { categoryId } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getBreadcrumbsQuery } = operations;
+    const { getBreadcrumbsQuery, getStoreConfigQuery } = operations;
 
     const { data, loading, error } = useQuery(getBreadcrumbsQuery, {
         variables: { category_id: categoryId },
@@ -43,7 +45,15 @@ export const useBreadcrumbs = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const categoryUrlSuffix = (data && data.category.url_suffix) || '';
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
 
     // When we have breadcrumb data sort and normalize it for easy rendering.
     const normalizedData = useMemo(() => {
@@ -66,12 +76,16 @@ export const useBreadcrumbs = props => {
         }
     }, [categoryUrlSuffix, data, loading]);
 
+    const { setShimmerType } = useInternalLink('category');
+
     return {
         currentCategory: (data && data.category.name) || '',
         currentCategoryPath:
-            (data && `${data.category.url_path}${categoryUrlSuffix}`) || '#',
+            (data && `${data.category.url_path}${categoryUrlSuffix || ''}`) ||
+            '#',
         isLoading: loading,
         hasError: !!error,
-        normalizedData: normalizedData || []
+        normalizedData: normalizedData || [],
+        handleClick: setShimmerType
     };
 };

package/lib/talons/CartPage/GiftCards/giftCardFragments.gql.ee.js

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const GiftCardFragment = gql`
+    fragment GiftCardFragment on Cart {
+        applied_gift_cards {
+            code
+            current_balance {
+                currency
+                value
+            }
+        }
+        id
+    }
+`;

package/lib/talons/CartPage/GiftCards/giftCardFragments.gql.js

@@ -0,0 +1,8 @@
+import { gql } from '@apollo/client';
+
+export const GiftCardFragment = gql`
+    fragment GiftCardFragment on Cart {
+        __typename
+        id
+    }
+`;

package/lib/talons/CartPage/GiftCards/giftCardQueries.gql.ee.js

@@ -0,0 +1,73 @@
+import { gql } from '@apollo/client';
+
+import { CartPageFragment } from '../cartPageFragments.gql';
+import { GiftCardFragment } from './giftCardFragments.gql';
+
+const GET_APPLIED_GIFT_CARDS_QUERY = gql`
+    query getAppliedGiftCards($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...GiftCardFragment
+        }
+    }
+    ${GiftCardFragment}
+`;
+
+const GET_GIFT_CARD_BALANCE_QUERY = gql`
+    query getGiftCardBalance($giftCardCode: String!) {
+        giftCardAccount(input: { gift_card_code: $giftCardCode }) {
+            balance {
+                currency
+                value
+            }
+            code
+            expiration_date
+            id: code
+        }
+    }
+`;
+
+const APPLY_GIFT_CARD_MUTATION = gql`
+    mutation applyGiftCardToCart($cartId: String!, $giftCardCode: String!) {
+        applyGiftCardToCart(
+            input: { cart_id: $cartId, gift_card_code: $giftCardCode }
+        ) @connection(key: "applyGiftCardToCart") {
+            cart {
+                id
+                ...CartPageFragment
+                # If this mutation causes "free" to become available we need to know.
+                available_payment_methods {
+                    code
+                    title
+                }
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+const REMOVE_GIFT_CARD_MUTATION = gql`
+    mutation removeGiftCard($cartId: String!, $giftCardCode: String!) {
+        removeGiftCardFromCart(
+            input: { cart_id: $cartId, gift_card_code: $giftCardCode }
+        ) @connection(key: "removeGiftCardFromCart") {
+            cart {
+                id
+                ...CartPageFragment
+                # If this mutation causes "free" to become available we need to know.
+                available_payment_methods {
+                    code
+                    title
+                }
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export default {
+    getAppliedGiftCardsQuery: GET_APPLIED_GIFT_CARDS_QUERY,
+    getGiftCardBalanceQuery: GET_GIFT_CARD_BALANCE_QUERY,
+    applyGiftCardMutation: APPLY_GIFT_CARD_MUTATION,
+    removeGiftCardMutation: REMOVE_GIFT_CARD_MUTATION
+};

package/lib/talons/CartPage/GiftCards/useGiftCards.js

@@ -3,6 +3,8 @@ import { useFormApi } from 'informed';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './giftCardQueries.gql';
 
 // To keep track of the most recent action taken.
 const actions = {
@@ -34,11 +36,15 @@ const actions = {
  * import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards'
  */
 export const useGiftCards = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
-        setIsCartUpdating,
-        mutations: { applyCardMutation, removeCardMutation },
-        queries: { appliedCardsQuery, cardBalanceQuery }
-    } = props;
+        getAppliedGiftCardsQuery,
+        getGiftCardBalanceQuery,
+        applyGiftCardMutation,
+        removeGiftCardMutation
+    } = operations;
+
+    const { setIsCartUpdating } = props;
 
     // We need the cartId for all of our queries and mutations.
     const [{ cartId }] = useCartContext();
@@ -50,21 +56,24 @@ export const useGiftCards = props => {
      *
      * Immediately execute the cart query and set up the other graphql actions.
      */
-    const appliedCardsResult = useQuery(appliedCardsQuery, {
+    const appliedCardsResult = useQuery(getAppliedGiftCardsQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !cartId,
         variables: { cartId }
     });
 
-    const [checkCardBalance, balanceResult] = useLazyQuery(cardBalanceQuery, {
-        // For security, always fetch this from the network and never cache the
-        // result.
-        fetchPolicy: 'no-cache'
-    });
+    const [checkCardBalance, balanceResult] = useLazyQuery(
+        getGiftCardBalanceQuery,
+        {
+            // For security, always fetch this from the network and never cache the
+            // result.
+            fetchPolicy: 'no-cache'
+        }
+    );
 
-    const [applyCard, applyCardResult] = useMutation(applyCardMutation);
-    const [removeCard, removeCardResult] = useMutation(removeCardMutation);
+    const [applyCard, applyCardResult] = useMutation(applyGiftCardMutation);
+    const [removeCard, removeCardResult] = useMutation(removeGiftCardMutation);
 
     /*
      *  useState hooks.
@@ -177,8 +186,8 @@ export const useGiftCards = props => {
  *
  * @typedef {Object} GiftCardsMutations
  *
- * @property {GraphQLAST} applyCardMutation The mutation used to apply a gift card to the cart.
- * @property {GraphQLAST} removeCardMutation The mutation used to remove a gift card from the cart.
+ * @property {GraphQLAST} applyGiftCardMutation The mutation used to apply a gift card to the cart.
+ * @property {GraphQLAST} removeGiftCardMutation The mutation used to remove a gift card from the cart.
  *
  * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCardQueries.js}
  * for queries used in Venia
@@ -189,8 +198,8 @@ export const useGiftCards = props => {
  *
  * @typedef {Object} GiftCardsQueries
  *
- * @property {GraphQLAST} appliedCardsQuery The query used to get the gift cards currently applied to the cart.
- * @property {GraphQLAST} cardBalanceQuery The query used to get the gift cards currently applied to the cart.
+ * @property {GraphQLAST} getAppliedGiftCardsQuery The query used to get the gift cards currently applied to the cart.
+ * @property {GraphQLAST} getGiftCardBalanceQuery The query used to get the gift cards currently applied to the cart.
  *
  * @see [`giftCardQueries.ee.js`]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/GiftCards/giftCardQueries.js}
  * for queries used in Venia

package/lib/talons/CartPage/PriceAdjustments/CouponCode/couponCode.gql.js

@@ -0,0 +1,56 @@
+import { gql } from '@apollo/client';
+import { CartPageFragment } from '../../cartPageFragments.gql';
+import { AppliedCouponsFragment } from './couponCodeFragments.gql';
+
+const GET_APPLIED_COUPONS = gql`
+    query getAppliedCoupons($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...AppliedCouponsFragment
+        }
+    }
+    ${AppliedCouponsFragment}
+`;
+
+const APPLY_COUPON_MUTATION = gql`
+    mutation applyCouponToCart($cartId: String!, $couponCode: String!) {
+        applyCouponToCart(
+            input: { cart_id: $cartId, coupon_code: $couponCode }
+        ) @connection(key: "applyCouponToCart") {
+            cart {
+                id
+                ...CartPageFragment
+                # If this mutation causes "free" to become available we need to know.
+                available_payment_methods {
+                    code
+                    title
+                }
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+const REMOVE_COUPON_MUTATION = gql`
+    mutation removeCouponFromCart($cartId: String!) {
+        removeCouponFromCart(input: { cart_id: $cartId })
+            @connection(key: "removeCouponFromCart") {
+            cart {
+                id
+                ...CartPageFragment
+                # If this mutation causes "free" to become available we need to know.
+                available_payment_methods {
+                    code
+                    title
+                }
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export default {
+    getAppliedCouponsQuery: GET_APPLIED_COUPONS,
+    applyCouponMutation: APPLY_COUPON_MUTATION,
+    removeCouponMutation: REMOVE_COUPON_MUTATION
+};

package/lib/talons/CartPage/PriceAdjustments/CouponCode/couponCodeFragments.gql.js

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const AppliedCouponsFragment = gql`
+    fragment AppliedCouponsFragment on Cart {
+        id
+        applied_coupons {
+            code
+        }
+    }
+`;

package/lib/talons/CartPage/PriceAdjustments/{useCouponCode.js → CouponCode/useCouponCode.js}

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery, useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './couponCode.gql';
 
 /**
  * This talon contains the logic for a coupon code form component.
@@ -21,14 +23,16 @@ import { useCartContext } from '@magento/peregrine/lib/context/cart';
  * @return {CouponCodeTalonProps}
  *
  * @example <caption>Importing into your project</caption>
- * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useCouponCode';
+ * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
  */
 export const useCouponCode = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
-        setIsCartUpdating,
-        mutations: { applyCouponMutation, removeCouponMutation },
-        queries: { getAppliedCouponsQuery }
-    } = props;
+        getAppliedCouponsQuery,
+        applyCouponMutation,
+        removeCouponMutation
+    } = operations;
+    const { setIsCartUpdating } = props;
 
     const [{ cartId }] = useCartContext();
     const { data, error: fetchError } = useQuery(getAppliedCouponsQuery, {

package/lib/talons/CartPage/PriceAdjustments/GiftOptions/giftOptions.gql.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+/**
+ * Local query. GQL support is not available as of today.
+ *
+ * Once available, we can change the query to match the schema.
+ */
+const GET_GIFT_OPTIONS = gql`
+    query getGiftOptions($cartId: String!) {
+        cart(cart_id: $cartId) @client {
+            id
+            include_gift_receipt
+            include_printed_card
+            local_gift_message
+        }
+    }
+`;
+
+export default {
+    getGiftOptionsQuery: GET_GIFT_OPTIONS
+};

package/lib/talons/CartPage/{GiftOptions → PriceAdjustments/GiftOptions}/useGiftOptions.js

@@ -1,6 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 import { useApolloClient, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './giftOptions.gql';
 
 /**
  * This talon contains the logic for a gift options component.
@@ -22,9 +24,9 @@ import { useCartContext } from '@magento/peregrine/lib/context/cart';
  * @example <caption>Importing into your project</caption>
  * import { useGiftOptions } from '@magento/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions';
  */
-const useGiftOptions = props => {
-    const { queries } = props;
-    const { getGiftOptionsQuery } = queries;
+const useGiftOptions = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getGiftOptionsQuery } = operations;
 
     const [{ cartId }] = useCartContext();
     const { cache } = useApolloClient();

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js

@@ -0,0 +1,43 @@
+import { gql } from '@apollo/client';
+import { ShippingInformationFragment } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingInformation/shippingInformationFragments.gql.js';
+import { CartPageFragment } from '../../cartPageFragments.gql';
+import { ShippingMethodsCartFragment } from './shippingMethodsFragments.gql';
+
+const GET_SHIPPING_METHODS = gql`
+    query GetShippingMethods($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ShippingMethodsCartFragment
+        }
+    }
+    ${ShippingMethodsCartFragment}
+`;
+
+const SET_SHIPPING_ADDRESS_MUTATION = gql`
+    mutation SetShippingAddressForEstimate(
+        $cartId: String!
+        $address: CartAddressInput!
+    ) {
+        setShippingAddressesOnCart(
+            input: {
+                cart_id: $cartId
+                shipping_addresses: [{ address: $address }]
+            }
+        ) @connection(key: "setShippingAddressesOnCart") {
+            cart {
+                id
+                ...CartPageFragment
+                ...ShippingMethodsCartFragment
+                ...ShippingInformationFragment
+            }
+        }
+    }
+    ${CartPageFragment}
+    ${ShippingMethodsCartFragment}
+    ${ShippingInformationFragment}
+`;
+
+export default {
+    getShippingMethodsQuery: GET_SHIPPING_METHODS,
+    setShippingAddressMutation: SET_SHIPPING_ADDRESS_MUTATION
+};

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js

@@ -0,0 +1,60 @@
+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.
+ * It is intentionally not included in the CartPageFragment. Make sure you are
+ * conscious about the side effects when including it in queries and mutations.
+ */
+export const AvailableShippingMethodsCartFragment = gql`
+    fragment AvailableShippingMethodsCartFragment on Cart {
+        id
+        shipping_addresses {
+            available_shipping_methods {
+                amount {
+                    currency
+                    value
+                }
+                available
+                carrier_code
+                carrier_title
+                method_code
+                method_title
+            }
+            street
+        }
+    }
+`;
+
+export const SelectedShippingMethodCartFragment = gql`
+    fragment SelectedShippingMethodCartFragment on Cart {
+        id
+        shipping_addresses {
+            selected_shipping_method {
+                carrier_code
+                method_code
+            }
+            street
+        }
+    }
+`;
+
+export const ShippingMethodsCartFragment = gql`
+    fragment ShippingMethodsCartFragment on Cart {
+        id
+        ...AvailableShippingMethodsCartFragment
+        ...SelectedShippingMethodCartFragment
+        shipping_addresses {
+            country {
+                code
+            }
+            postcode
+            region {
+                code
+            }
+            street
+        }
+    }
+    ${AvailableShippingMethodsCartFragment}
+    ${SelectedShippingMethodCartFragment}
+`;

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm.js

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { useApolloClient, useMutation } from '@apollo/client';
 
 import { useCartContext } from '../../../../context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './shippingMethods.gql';
 
 /**
  * GraphQL currently requires a complete address before it will return
@@ -43,12 +45,9 @@ export const MOCKED_ADDRESS = {
  * import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
  */
 export const useShippingForm = props => {
-    const {
-        selectedValues,
-        setIsCartUpdating,
-        mutations: { setShippingAddressMutation },
-        queries: { shippingMethodsQuery }
-    } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { setShippingAddressMutation, getShippingMethodsQuery } = operations;
+    const { selectedValues, setIsCartUpdating } = props;
 
     const [{ cartId }] = useCartContext();
     const apolloClient = useApolloClient();
@@ -81,7 +80,7 @@ export const useShippingForm = props => {
         zip => {
             if (zip !== selectedValues.zip) {
                 const data = apolloClient.readQuery({
-                    query: shippingMethodsQuery,
+                    query: getShippingMethodsQuery,
                     variables: {
                         cartId
                     }
@@ -97,7 +96,7 @@ export const useShippingForm = props => {
                     } = primaryAddress;
                     if (availableMethods.length) {
                         apolloClient.writeQuery({
-                            query: shippingMethodsQuery,
+                            query: getShippingMethodsQuery,
                             data: {
                                 cart: {
                                     ...cart,
@@ -115,7 +114,7 @@ export const useShippingForm = props => {
                 }
             }
         },
-        [apolloClient, cartId, selectedValues.zip, shippingMethodsQuery]
+        [apolloClient, cartId, selectedValues.zip, getShippingMethodsQuery]
     );
 
     const handleOnSubmit = useCallback(

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 
 import { useCartContext } from '../../../../context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './shippingMethods.gql';
 
 /**
  * Contains logic for a shipping method selector component.
@@ -21,10 +23,10 @@ import { useCartContext } from '../../../../context/cart';
  * @example <caption>Importing into your project</caption>
  * import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';
  */
-export const useShippingMethods = props => {
-    const {
-        queries: { getShippingMethodsQuery }
-    } = props;
+export const useShippingMethods = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getShippingMethodsQuery } = operations;
+
     const [{ cartId }] = useCartContext();
     const { data } = useQuery(getShippingMethodsQuery, {
         fetchPolicy: 'cache-and-network',
@@ -118,7 +120,7 @@ export const useShippingMethods = props => {
  * Can be used as a boolean value since having no shipping methods would return 0.
  * @property {boolean} isShowingForm True if the form should be shown. False otherwise.
  * @property {SelectShippingFields} selectedShippingFields Values for the select input fields on the shipping form
- * @property {String} selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @property {String} selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @property {Array<Object>} shippingMethods A list of available shipping methods based on the primary shipping address
  * @property {function} showForm A function that sets the `isShowingForm` value to true.
  */

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios.js

@@ -17,7 +17,7 @@ import { useCartContext } from '../../../../context/cart';
  *
  * @param {Object} props
  * @param {function} props.setIsCartUpdating Function for setting the updating state of the shopping cart
- * @param {String} props.selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @param {String} props.selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @param {Array<Object>} props.shippingMethods An array of available shipping methods
  * @param {ShippingRadiosMutations} props.mutations GraphQL mutations for a shipping radio selector component.
  *

package/lib/talons/CartPage/PriceSummary/priceSummary.gql.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+import { PriceSummaryFragment } from './priceSummaryFragments.gql';
+
+const GET_PRICE_SUMMARY = gql`
+    query getPriceSummary($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...PriceSummaryFragment
+        }
+    }
+    ${PriceSummaryFragment}
+`;
+
+export default {
+    getPriceSummaryQuery: GET_PRICE_SUMMARY
+};

package/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -2,6 +2,8 @@ import { useCallback } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './priceSummary.gql';
 
 /**
  * @ignore
@@ -42,10 +44,9 @@ const flattenData = data => {
  * @example <caption>Importing into your project</caption>
  * import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
  */
-export const usePriceSummary = props => {
-    const {
-        queries: { getPriceSummary }
-    } = props;
+export const usePriceSummary = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getPriceSummaryQuery } = operations;
 
     const [{ cartId }] = useCartContext();
     const history = useHistory();
@@ -53,7 +54,7 @@ export const usePriceSummary = props => {
     const match = useRouteMatch('/checkout');
     const isCheckout = !!match;
 
-    const { error, loading, data } = useQuery(getPriceSummary, {
+    const { error, loading, data } = useQuery(getPriceSummaryQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !cartId,