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

package/lib/talons/CartPage/ProductListing/EditModal/productForm.gql.js

@@ -0,0 +1,78 @@
+import { gql } from '@apollo/client';
+import { CartPageFragment } from '../../cartPageFragments.gql';
+import { ProductFormFragment } from './productFormFragment.gql';
+
+const GET_CONFIGURABLE_OPTIONS = gql`
+    query productDetailBySku($sku: String) {
+        products(filter: { sku: { eq: $sku } }) {
+            items {
+                id
+                ...ProductFormFragment
+            }
+        }
+    }
+    ${ProductFormFragment}
+`;
+
+const UPDATE_QUANTITY_MUTATION = gql`
+    mutation UpdateCartItemQuantity(
+        $cartId: String!
+        $cartItemId: Int!
+        $quantity: Float!
+    ) {
+        updateCartItems(
+            input: {
+                cart_id: $cartId
+                cart_items: [{ cart_item_id: $cartItemId, quantity: $quantity }]
+            }
+        ) @connection(key: "updateCartItems") {
+            cart {
+                id
+                ...CartPageFragment
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
+    mutation UpdateConfigurableOptions(
+        $cartId: String!
+        $cartItemId: Int!
+        $parentSku: String!
+        $variantSku: String!
+        $quantity: Float!
+    ) {
+        addConfigurableProductsToCart(
+            input: {
+                cart_id: $cartId
+                cart_items: [
+                    {
+                        data: { quantity: $quantity, sku: $variantSku }
+                        parent_sku: $parentSku
+                    }
+                ]
+            }
+        ) @connection(key: "addConfigurableProductsToCart") {
+            cart {
+                id
+            }
+        }
+
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_id: $cartItemId }
+        ) @connection(key: "removeItemFromCart") {
+            cart {
+                id
+                ...CartPageFragment
+            }
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export default {
+    getConfigurableOptionsQuery: GET_CONFIGURABLE_OPTIONS,
+    updateQuantityMutation: UPDATE_QUANTITY_MUTATION,
+    updateConfigurableOptionsMutation: UPDATE_CONFIGURABLE_OPTIONS_MUTATION
+};

package/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js

@@ -0,0 +1,47 @@
+import { gql } from '@apollo/client';
+
+export const ProductFormFragment = gql`
+    fragment ProductFormFragment on ProductInterface {
+        id
+        sku
+        ... on ConfigurableProduct {
+            configurable_options {
+                attribute_code
+                attribute_id
+                id
+                label
+                values {
+                    default_label
+                    label
+                    store_label
+                    use_default_value
+                    value_index
+                    swatch_data {
+                        ... on ImageSwatchData {
+                            thumbnail
+                        }
+                        value
+                    }
+                }
+            }
+            variants {
+                attributes {
+                    code
+                    value_index
+                }
+                product {
+                    id
+                    price {
+                        regularPrice {
+                            amount {
+                                currency
+                                value
+                            }
+                        }
+                    }
+                    sku
+                }
+            }
+        }
+    }
+`;

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -1,8 +1,10 @@
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useCartContext } from '../../../../context/cart';
 import { findMatchingVariant } from '../../../../util/findMatchingProductVariant';
+import DEFAULT_OPERATIONS from './productForm.gql';
 
 /**
  * This talon contains logic for a product edit form.
@@ -30,13 +32,18 @@ import { findMatchingVariant } from '../../../../util/findMatchingProductVariant
  * import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';
  */
 export const useProductForm = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
     const {
-        cartItem,
         getConfigurableOptionsQuery,
+        updateConfigurableOptionsMutation,
+        updateQuantityMutation
+    } = operations;
+
+    const {
+        cartItem,
         setIsCartUpdating,
         setVariantPrice,
-        updateConfigurableOptionsMutation,
-        updateQuantityMutation,
         setActiveEditItem
     } = props;
 
@@ -114,15 +121,17 @@ export const useProductForm = props => {
 
     const selectedVariant = useMemo(() => {
         if (optionSelections.size && configItem) {
+            const mergedOptionSelections = new Map([...optionSelections]);
             cartItem.configurable_options.forEach(option => {
-                if (!optionSelections.has(`${option.id}`)) {
-                    optionSelections.set(`${option.id}`, option.value_id);
+                if (!mergedOptionSelections.has(`${option.id}`)) {
+                    mergedOptionSelections.set(`${option.id}`, option.value_id);
                 }
             });
+
             return findMatchingVariant({
                 variants: configItem.variants,
                 optionCodes: configurableOptionCodes,
-                optionSelections
+                optionSelections: mergedOptionSelections
             });
         }
     }, [cartItem, configItem, configurableOptionCodes, optionSelections]);
@@ -143,7 +152,7 @@ export const useProductForm = props => {
     const handleSubmit = useCallback(
         async formValues => {
             try {
-                if (selectedVariant) {
+                if (selectedVariant && optionSelections.size) {
                     await updateConfigurableOptions({
                         variables: {
                             cartId,
@@ -174,6 +183,7 @@ export const useProductForm = props => {
             cartId,
             cartItem,
             handleClose,
+            optionSelections.size,
             selectedVariant,
             updateConfigurableOptions,
             updateItemQuantity

package/lib/talons/CartPage/ProductListing/product.gql.js

@@ -1,14 +1,15 @@
 import { gql } from '@apollo/client';
 
-export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
-    query getConfigurableThumbnailSource {
+export const GET_STORE_CONFIG = gql`
+    query getStoreConfigForCartPage {
         storeConfig {
             id
+            product_url_suffix
             configurable_thumbnail_source
         }
     }
 `;
 
 export default {
-    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+    getStoreConfigQuery: GET_STORE_CONFIG
 };

package/lib/talons/CartPage/ProductListing/productListing.gql.ce.js

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForCartPageCE {
@@ -9,6 +10,17 @@ export const GET_WISHLIST_CONFIG = gql`
     }
 `;
 
+const GET_PRODUCT_LISTING = gql`
+    query getProductListing($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ProductListingFragment
+        }
+    }
+    ${ProductListingFragment}
+`;
+
 export default {
-    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+    getWishlistConfigQuery: GET_WISHLIST_CONFIG,
+    getProductListingQuery: GET_PRODUCT_LISTING
 };

package/lib/talons/CartPage/ProductListing/productListing.gql.ee.js

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+import { ProductListingFragment } from './productListingFragments.gql';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForCartPageEE {
@@ -10,6 +11,17 @@ export const GET_WISHLIST_CONFIG = gql`
     }
 `;
 
+const GET_PRODUCT_LISTING = gql`
+    query getProductListing($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ProductListingFragment
+        }
+    }
+    ${ProductListingFragment}
+`;
+
 export default {
-    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+    getWishlistConfigQuery: GET_WISHLIST_CONFIG,
+    getProductListingQuery: GET_PRODUCT_LISTING
 };

package/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -0,0 +1,52 @@
+import { gql } from '@apollo/client';
+
+export const ProductListingFragment = gql`
+    fragment ProductListingFragment on Cart {
+        id
+        items {
+            id
+            product {
+                id
+                name
+                sku
+                url_key
+                thumbnail {
+                    url
+                }
+                small_image {
+                    url
+                }
+                stock_status
+                ... on ConfigurableProduct {
+                    variants {
+                        attributes {
+                            uid
+                        }
+                        product {
+                            id
+                            small_image {
+                                url
+                            }
+                        }
+                    }
+                }
+            }
+            prices {
+                price {
+                    currency
+                    value
+                }
+            }
+            quantity
+            ... on ConfigurableCartItem {
+                configurable_options {
+                    id
+                    configurable_product_option_value_uid
+                    option_label
+                    value_id
+                    value_label
+                }
+            }
+        }
+    }
+`;

package/lib/talons/CartPage/ProductListing/useProduct.js

@@ -5,9 +5,8 @@ import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
 
 import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
-import mergeOperations from '../../../util/shallowMerge';
-
 import DEFAULT_OPERATIONS from './product.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 /**
  * This talon contains logic for a product component used in a product listing component.
@@ -43,26 +42,32 @@ export const useProduct = props => {
     const {
         removeItemMutation,
         updateItemQuantityMutation,
-        getConfigurableThumbnailSource
+        getStoreConfigQuery
     } = operations;
 
     const { formatMessage } = useIntl();
 
-    const { data: configurableThumbnailSourceData } = useQuery(
-        getConfigurableThumbnailSource,
-        {
-            fetchPolicy: 'cache-and-network'
-        }
-    );
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
 
     const configurableThumbnailSource = useMemo(() => {
-        if (configurableThumbnailSourceData) {
-            return configurableThumbnailSourceData.storeConfig
-                .configurable_thumbnail_source;
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.configurable_thumbnail_source;
         }
-    }, [configurableThumbnailSourceData]);
+    }, [storeConfigData]);
 
-    const flatProduct = flattenProduct(item, configurableThumbnailSource);
+    const storeUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.product_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    const flatProduct = flattenProduct(
+        item,
+        configurableThumbnailSource,
+        storeUrlSuffix
+    );
 
     const [
         removeItemFromCart,
@@ -188,7 +193,7 @@ export const useProduct = props => {
     };
 };
 
-const flattenProduct = (item, configurableThumbnailSource) => {
+const flattenProduct = (item, configurableThumbnailSource, storeUrlSuffix) => {
     const {
         configurable_options: options = [],
         prices,
@@ -205,8 +210,7 @@ const flattenProduct = (item, configurableThumbnailSource) => {
         name,
         small_image,
         stock_status: stockStatus,
-        url_key: urlKey,
-        url_suffix: urlSuffix
+        url_key: urlKey
     } = product;
     const { url: image } =
         configurableThumbnailSource === 'itself' && configured_variant
@@ -222,7 +226,7 @@ const flattenProduct = (item, configurableThumbnailSource) => {
         stockStatus,
         unitPrice,
         urlKey,
-        urlSuffix
+        urlSuffix: storeUrlSuffix
     };
 };
 

package/lib/talons/CartPage/ProductListing/useProductListing.js

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useCartContext } from '../../../context/cart';
-import mergeOperations from '../../../util/shallowMerge';
-import defaultOperations from './productListing.gql';
+import DEFAULT_OPERATIONS from './productListing.gql';
 
 /**
  * This talon contains logic for a component that renders a list of products for a cart.
@@ -24,12 +24,9 @@ import defaultOperations from './productListing.gql';
  * @example <caption>Importing into your project</caption>
  * import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
  */
-export const useProductListing = props => {
-    const {
-        queries: { getProductListing }
-    } = props;
-
-    const operations = mergeOperations(defaultOperations, props.operations);
+export const useProductListing = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getWishlistConfigQuery, getProductListingQuery } = operations;
 
     const [{ cartId }] = useCartContext();
     const [activeEditItem, setActiveEditItem] = useState(null);
@@ -37,14 +34,12 @@ export const useProductListing = props => {
     const [
         fetchProductListing,
         { called, data, error, loading }
-    ] = useLazyQuery(getProductListing, {
+    ] = useLazyQuery(getProductListingQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
     });
 
-    const { data: storeConfigData } = useQuery(
-        operations.getWishlistConfigQuery
-    );
+    const { data: storeConfigData } = useQuery(getWishlistConfigQuery);
 
     const wishlistConfig = storeConfigData ? storeConfigData.storeConfig : {};
 
@@ -80,7 +75,7 @@ export const useProductListing = props => {
  *
  * @typedef {Object} ProductListingQueries
  *
- * @property {GraphQLDocument} getProductListing Query to get the product list for a cart
+ * @property {GraphQLDocument} getProductListingQuery Query to get the product list for a cart
  *
  * @see [productListingFragments.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListingFragments.js}
  * for the queries used in Venia

package/lib/talons/CartPage/ProductListing/useQuantity.js

@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState, useEffect } from 'react';
-import { useFieldState, useFieldApi } from 'informed';
+import { useFieldApi } from 'informed';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 import debounce from 'lodash.debounce';
 
 /**

package/lib/talons/CartPage/cartPage.gql.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+import { CartPageFragment } from './cartPageFragments.gql';
+
+const GET_CART_DETAILS = gql`
+    query GetCartDetails($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...CartPageFragment
+        }
+    }
+    ${CartPageFragment}
+`;
+
+export default {
+    getCartDetailsQuery: GET_CART_DETAILS
+};

package/lib/talons/CartPage/cartPageFragments.gql.js

@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+import { GiftCardFragment } from './GiftCards/giftCardFragments.gql';
+import { ProductListingFragment } from './ProductListing/productListingFragments.gql';
+import { PriceSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql';
+import { AppliedCouponsFragment } from './PriceAdjustments/CouponCode/couponCodeFragments.gql';
+
+export const CartPageFragment = gql`
+    fragment CartPageFragment on Cart {
+        id
+        total_quantity
+        ...AppliedCouponsFragment
+        ...GiftCardFragment
+        ...ProductListingFragment
+        ...PriceSummaryFragment
+    }
+    ${AppliedCouponsFragment}
+    ${GiftCardFragment}
+    ${ProductListingFragment}
+    ${PriceSummaryFragment}
+`;

package/lib/talons/CartPage/useCartPage.js

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLazyQuery } from '@apollo/client';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './cartPage.gql';
 
 /**
  * This talon contains logic for a cart page component.
@@ -21,10 +23,9 @@ import { useCartContext } from '@magento/peregrine/lib/context/cart';
  * @example <caption>Importing into your project</caption>
  * import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
  */
-export const useCartPage = props => {
-    const {
-        queries: { getCartDetails }
-    } = props;
+export const useCartPage = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getCartDetailsQuery } = operations;
 
     const [{ cartId }] = useCartContext();
 
@@ -32,7 +33,7 @@ export const useCartPage = props => {
     const [wishlistSuccessProps, setWishlistSuccessProps] = useState(null);
 
     const [fetchCartDetails, { called, data, loading }] = useLazyQuery(
-        getCartDetails,
+        getCartDetailsQuery,
         {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first'
@@ -78,7 +79,7 @@ export const useCartPage = props => {
  *
  * @typedef {Object} CartPageQueries
  *
- * @property {GraphQLAST} getCartDetails Query for getting the cart details.
+ * @property {GraphQLAST} getCartDetailsQuery Query for getting the cart details.
  *
  * @see [cartPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.gql.js}
  * for queries used in Venia

package/lib/talons/CategoryList/categoryList.gql.js

@@ -1,5 +1,14 @@
 import { gql } from '@apollo/client';
 
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForCategoryList {
+        storeConfig {
+            id
+            category_url_suffix
+        }
+    }
+`;
+
 export const GET_CATEGORY_LIST = gql`
     query GetCategoryList($id: Int!) {
         category(id: $id) {
@@ -9,7 +18,6 @@ export const GET_CATEGORY_LIST = gql`
                 name
                 url_key
                 url_path
-                url_suffix
                 children_count
                 path
                 image
@@ -27,5 +35,6 @@ export const GET_CATEGORY_LIST = gql`
 `;
 
 export default {
-    getCategoryListQuery: GET_CATEGORY_LIST
+    getCategoryListQuery: GET_CATEGORY_LIST,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/CategoryList/useCategoryList.js

@@ -16,7 +16,7 @@ export const useCategoryList = props => {
     const { id } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getCategoryListQuery } = operations;
+    const { getCategoryListQuery, getStoreConfigQuery } = operations;
 
     const { loading, error, data } = useQuery(getCategoryListQuery, {
         fetchPolicy: 'cache-and-network',
@@ -27,9 +27,16 @@ export const useCategoryList = props => {
         }
     });
 
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const storeConfig = storeConfigData ? storeConfigData.storeConfig : null;
+
     return {
         childCategories:
             (data && data.category && data.category.children) || null,
+        storeConfig,
         error,
         loading
     };

package/lib/talons/CategoryList/useCategoryTile.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import useInternalLink from '../../hooks/useInternalLink';
 
 const previewImageSize = 480;
 
@@ -8,10 +9,12 @@ const previewImageSize = 480;
  * @returns {Object} props necessary to render a category tile
  * @returns {Object} .image - an object containing url, type and width for the category image
  * @returns {Object} .item - an object containing name and url for the category tile
+ * @returns {Function} .handleClick - callback to fire on link click
  */
 export const useCategoryTile = props => {
-    const { item } = props;
+    const { item, storeConfig } = props;
     const { image, productImagePreview } = item;
+    const { category_url_suffix } = storeConfig;
 
     const imageObj = useMemo(() => {
         const previewProduct = productImagePreview.items[0];
@@ -39,13 +42,16 @@ export const useCategoryTile = props => {
     const itemObject = useMemo(
         () => ({
             name: item.name,
-            url: `/${item.url_key}${item.url_suffix || ''}`
+            url: `/${item.url_key}${category_url_suffix || ''}`
         }),
-        [item]
+        [item, category_url_suffix]
     );
 
+    const { setShimmerType } = useInternalLink('category');
+
     return {
         image: imageObj,
-        item: itemObject
+        item: itemObject,
+        handleClick: setShimmerType
     };
 };

package/lib/talons/CategoryTree/categoryTree.gql.js

@@ -1,5 +1,14 @@
 import { gql } from '@apollo/client';
 
+export const GET_CATEGORY_URL_SUFFIX = gql`
+    query GetStoreConfigForCategoryTree {
+        storeConfig {
+            id
+            category_url_suffix
+        }
+    }
+`;
+
 export const GET_NAVIGATION_MENU = gql`
     query GetNavigationMenu($id: Int!) {
         category(id: $id) {
@@ -16,11 +25,11 @@ export const GET_NAVIGATION_MENU = gql`
             }
             include_in_menu
             url_path
-            url_suffix
         }
     }
 `;
 
 export default {
-    getNavigationMenuQuery: GET_NAVIGATION_MENU
+    getNavigationMenuQuery: GET_NAVIGATION_MENU,
+    getCategoryUrlSuffixQuery: GET_CATEGORY_URL_SUFFIX
 };