@magento/peregrine 12.1.0 → 12.2.0-beta.1

package/lib/talons/Newsletter/useNewsletter.js

@@ -1,25 +1,42 @@
-import { useCallback, useRef, useState, useMemo } from 'react';
-import { useMutation } from '@apollo/client';
+import { useCallback, useRef, useMemo, useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './newsletter.gql';
 
 export const useNewsletter = (props = {}) => {
-    const { subscribeMutation } = mergeOperations(
+    const { subscribeMutation, getStoreConfigQuery } = mergeOperations(
         DEFAULT_OPERATIONS,
         props.operations
     );
-    const [subscribing, setSubscribing] = useState(false);
-    const [subscribeNewsLetter, { error: newsLetterError, data }] = useMutation(
-        subscribeMutation,
+
+    const formApiRef = useRef(null);
+
+    const [newsLetterError, setNewsLetterError] = useState(null);
+
+    const clearErrors = () => setNewsLetterError(null);
+
+    const [
+        subscribeNewsLetter,
+        { data, loading: subscribeLoading }
+    ] = useMutation(subscribeMutation, {
+        fetchPolicy: 'no-cache',
+        onError: setNewsLetterError
+    });
+
+    const { data: storeConfigData, loading: configLoading } = useQuery(
+        getStoreConfigQuery,
         {
-            fetchPolicy: 'no-cache'
+            fetchPolicy: 'cache-and-network'
         }
     );
-    const formApiRef = useRef(null);
+
+    const isEnabled = useMemo(() => {
+        return !!storeConfigData?.storeConfig?.newsletter_enabled;
+    }, [storeConfigData]);
+
     const setFormApi = useCallback(api => (formApiRef.current = api), []);
     const handleSubmit = useCallback(
         async ({ email }) => {
-            setSubscribing(true);
             try {
                 await subscribeNewsLetter({
                     variables: { email }
@@ -32,7 +49,6 @@ export const useNewsletter = (props = {}) => {
                     console.error(error);
                 }
             }
-            setSubscribing(false);
         },
         [subscribeNewsLetter]
     );
@@ -42,10 +58,13 @@ export const useNewsletter = (props = {}) => {
     );
 
     return {
+        isEnabled,
         errors,
         handleSubmit,
-        isBusy: subscribing,
+        isBusy: subscribeLoading,
+        isLoading: configLoading,
         setFormApi,
-        newsLetterResponse: data && data.subscribeEmailToNewsletter
+        newsLetterResponse: data && data.subscribeEmailToNewsletter,
+        clearErrors
     };
 };

package/lib/talons/OrderHistoryPage/orderHistoryContext.gql.js

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

package/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js

@@ -98,8 +98,8 @@ export const GET_CUSTOMER_ORDERS = gql`
         $filter: CustomerOrdersFilterInput
         $pageSize: Int!
     ) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             orders(filter: $filter, pageSize: $pageSize) {
                 ...CustomerOrdersFragment
             }

package/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     query getConfigurableThumbnailSource {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             configurable_thumbnail_source
         }
     }
@@ -12,19 +13,22 @@ export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
 export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
     query GetProductThumbnailsByURLKey($urlKeys: [String!]!) {
         products(filter: { url_key: { in: $urlKeys } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             items {
-                id
+                uid
                 sku
                 thumbnail {
                     label
                     url
                 }
                 url_key
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableProduct {
                     variants {
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
                             sku
-                            id
+                            uid
                             thumbnail {
                                 label
                                 url

package/lib/talons/ProductFullDetail/CustomAttributes/AttributeType/useAttributeType.js

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+/**
+ * @param {Object} props.typeConfig - component types configuration object
+ *
+ * @returns {{
+ *  getAttributeTypeConfig: function
+ * }}
+ */
+export const useAttributeType = props => {
+    const { typeConfig = {} } = props;
+
+    // Retrieve a attribute types configuration
+    const getAttributeTypeConfig = useCallback(
+        attributeType => {
+            if (typeConfig[attributeType]) {
+                return typeConfig[attributeType];
+            }
+        },
+        [typeConfig]
+    );
+
+    return {
+        getAttributeTypeConfig
+    };
+};

package/lib/talons/ProductFullDetail/productFullDetail.gql.ce.js

@@ -19,8 +19,9 @@ export const ADD_PRODUCT_TO_CART = gql`
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForProductCE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             magento_wishlist_general_is_enabled
         }
     }
@@ -46,7 +47,7 @@ export const ADD_CONFIGURABLE_MUTATION = gql`
                     }
                 ]
             }
-        ) @connection(key: "addConfigurableProductsToCart") {
+        ) {
             cart {
                 id
                 # Update the cart trigger when adding an item.
@@ -74,7 +75,7 @@ export const ADD_SIMPLE_MUTATION = gql`
                 cart_id: $cartId
                 cart_items: [{ data: { quantity: $quantity, sku: $sku } }]
             }
-        ) @connection(key: "addSimpleProductsToCart") {
+        ) {
             cart {
                 id
                 # Update the cart trigger when adding an item.

package/lib/talons/ProductFullDetail/productFullDetail.gql.ee.js

@@ -4,8 +4,9 @@ import defaultOperations from './productFullDetail.gql.ce';
 
 export const GET_WISHLIST_CONFIG = gql`
     query GetWishlistConfigForProductEE {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             magento_wishlist_general_is_enabled
             enable_multiple_wishlists
         }

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -135,12 +135,12 @@ const getBreadcrumbCategoryId = categories => {
     // Until we can get the single canonical breadcrumb path to a product we
     // will just return the first category id of the potential leaf categories.
     const leafCategory = categories.find(
-        category => !breadcrumbSet.has(category.id)
+        category => !breadcrumbSet.has(category.uid)
     );
 
     // If we couldn't find a leaf category then just use the first category
     // in the list for this product.
-    return leafCategory.id || categories[0].id;
+    return leafCategory.uid || categories[0].uid;
 };
 
 const getConfigPrice = (product, optionCodes, optionSelections) => {
@@ -170,6 +170,26 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
     return value;
 };
 
+const getCustomAttributes = (product, optionCodes, optionSelections) => {
+    const { custom_attributes, variants } = product;
+    const isConfigurable = isProductConfigurable(product);
+    const optionsSelected =
+        Array.from(optionSelections.values()).filter(value => !!value).length >
+        0;
+
+    if (isConfigurable && optionsSelected) {
+        const item = findMatchingVariant({
+            optionCodes,
+            optionSelections,
+            variants
+        });
+
+        return item.product.custom_attributes;
+    }
+
+    return custom_attributes;
+};
+
 /**
  * @param {GraphQLDocument} props.addConfigurableProductToCartMutation - configurable product mutation
  * @param {GraphQLDocument} props.addSimpleProductToCartMutation - configurable product mutation
@@ -276,6 +296,11 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
+    const customAttributes = useMemo(
+        () => getCustomAttributes(product, optionCodes, optionSelections),
+        [product, optionCodes, optionSelections]
+    );
+
     // The map of ids to values (and their uids)
     // For example:
     // { "179" => [{ uid: "abc", value_index: 1 }, { uid: "def", value_index: 2 }]}
@@ -488,6 +513,7 @@ export const useProductFullDetail = props => {
             storeConfigData &&
             !!storeConfigData.storeConfig.magento_wishlist_general_is_enabled,
         productDetails,
+        customAttributes,
         wishlistButtonProps,
         wishlistItemOptions
     };

package/lib/talons/RootComponents/Category/category.gql.js

@@ -4,15 +4,18 @@ import { CategoryFragment, ProductsFragment } from './categoryFragments.gql';
 
 export const GET_CATEGORY = gql`
     query GetCategories(
-        $id: Int!
+        $id: String!
         $pageSize: Int!
         $currentPage: Int!
         $filters: ProductAttributeFilterInput!
         $sort: ProductAttributeSortInput
     ) {
-        category(id: $id) {
-            id
-            ...CategoryFragment
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                ...CategoryFragment
+            }
         }
         products(
             pageSize: $pageSize

package/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -4,7 +4,7 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
     ) {
-        products(filter: { category_id: $categoryIdFilter }) {
+        products(filter: { category_uid: $categoryIdFilter }) {
             aggregations {
                 label
                 count
@@ -13,22 +13,42 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                     label
                     value
                 }
+                position
             }
         }
     }
 `;
 
 export const GET_CATEGORY_CONTENT = gql`
-    query getCategoryData($id: Int!) {
-        category(id: $id) {
-            id
-            name
-            description
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                description
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
+    query getCategoryAvailableSortMethods(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
         }
     }
 `;
 
 export default {
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
-    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS
 };

package/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -1,8 +1,9 @@
 import { gql } from '@apollo/client';
 
 export const CategoryFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
     fragment CategoryFragment on CategoryTree {
-        id
+        uid
         meta_title
         meta_keywords
         meta_description
@@ -28,7 +29,8 @@ export const ProductsFragment = gql`
                 url
             }
             stock_status
-            type_id
+            rating_summary
+            __typename
             url_key
         }
         page_info {

package/lib/talons/RootComponents/Category/useCategory.js

@@ -21,7 +21,7 @@ import DEFAULT_OPERATIONS from './category.gql';
  * @kind function
  *
  * @param {object}      props
- * @param {number}      props.id - Category Id.
+ * @param {String}      props.id - Category uid.
  * @param {GraphQLAST}  props.operations.getCategoryQuery - Fetches category using a server query
  * @param {GraphQLAST}  props.operations.getFilterInputsQuery - Fetches "allowed" filters using a server query
  * @param {GraphQLAST}  props.queries.getStoreConfig - Fetches store configuration using a server query
@@ -133,14 +133,14 @@ export const useCategory = props => {
             newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
         });
 
-        // Use the category id for the current category page regardless of the
+        // Use the category uid for the current category page regardless of the
         // applied filters. Follow-up in PWA-404.
-        newFilters['category_id'] = { eq: String(id) };
+        newFilters['category_uid'] = { eq: id };
 
         runQuery({
             variables: {
                 currentPage: Number(currentPage),
-                id: Number(id),
+                id: id,
                 filters: newFilters,
                 pageSize: Number(pageSize),
                 sort: { [currentSort.sortAttribute]: currentSort.sortDirection }
@@ -201,8 +201,10 @@ export const useCategory = props => {
 
     const categoryData = categoryLoading && !data ? null : data;
     const metaDescription =
-        data && data.category && data.category.meta_description
-            ? data.category.meta_description
+        data &&
+        data.categories.items[0] &&
+        data.categories.items[0].meta_description
+            ? data.categories.items[0].meta_description
             : '';
 
     // When only categoryLoading is involved, noProductsFound component flashes for a moment

package/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -24,7 +24,8 @@ export const useCategoryContent = props => {
 
     const {
         getCategoryContentQuery,
-        getProductFiltersByCategoryQuery
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
@@ -37,6 +38,14 @@ export const useCategoryContent = props => {
         }
     );
 
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
     const { data: categoryData } = useQuery(getCategoryContentQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
@@ -58,18 +67,36 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getFilters]);
 
+    useEffect(() => {
+        if (categoryId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getSortMethods]);
+
     const filters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
         ? data.products.page_info.total_pages
         : null;
     const totalCount = data ? data.products.total_count : null;
-    const categoryName = categoryData ? categoryData.category.name : null;
+    const categoryName = categoryData
+        ? categoryData.categories.items[0].name
+        : null;
     const categoryDescription = categoryData
-        ? categoryData.category.description
+        ? categoryData.categories.items[0].description
+        : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
         : null;
 
     return {
+        availableSortMethods,
         categoryName,
         categoryDescription,
         filters,

package/lib/talons/RootComponents/Category/useNoProductsFound.js

@@ -13,7 +13,6 @@ const isNonDefaultCategory = category => Boolean(category.parentId);
  * @param {number} props.categoryId - The ID of the category that has no products.
  *
  * @returns {object}
- * @param {array} recommendedCategories - A list of categories for the UI to recommend.
  */
 export const useNoProductsFound = props => {
     const { categoryId } = props;

package/lib/talons/RootComponents/Product/product.gql.js

@@ -4,8 +4,9 @@ import { ProductDetailsFragment } from './productDetailFragment.gql';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             product_url_suffix
         }
     }

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -3,11 +3,11 @@ import { gql } from '@apollo/client';
 export const ProductDetailsFragment = gql`
     fragment ProductDetailsFragment on ProductInterface {
         __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         categories {
-            id
             uid
             breadcrumbs {
-                category_id
+                category_uid
             }
         }
         description {
@@ -15,10 +15,8 @@ export const ProductDetailsFragment = gql`
         }
         id
         uid
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         media_gallery_entries {
-            # id is deprecated and unused in our code, but lint rules require we
-            # request it if available
-            id
             uid
             label
             position
@@ -41,12 +39,45 @@ export const ProductDetailsFragment = gql`
         }
         stock_status
         url_key
+        custom_attributes {
+            selected_attribute_options {
+                attribute_option {
+                    uid
+                    label
+                    is_default
+                }
+            }
+            entered_attribute_value {
+                value
+            }
+            attribute_metadata {
+                uid
+                code
+                label
+                attribute_labels {
+                    store_code
+                    label
+                }
+                data_type
+                is_system
+                entity_type
+                ui_input {
+                    ui_input_type
+                    is_html_allowed
+                }
+                ... on ProductAttributeMetadata {
+                    used_in_components
+                }
+            }
+        }
         ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             configurable_options {
                 attribute_code
                 attribute_id
-                id
+                uid
                 label
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 values {
                     uid
                     default_label
@@ -67,13 +98,11 @@ export const ProductDetailsFragment = gql`
                     code
                     value_index
                 }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 product {
-                    id
                     uid
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     media_gallery_entries {
-                        # id is deprecated and unused in our code, but lint rules require we
-                        # request it if available
-                        id
                         uid
                         disabled
                         file
@@ -90,6 +119,37 @@ export const ProductDetailsFragment = gql`
                             }
                         }
                     }
+                    custom_attributes {
+                        selected_attribute_options {
+                            attribute_option {
+                                uid
+                                label
+                                is_default
+                            }
+                        }
+                        entered_attribute_value {
+                            value
+                        }
+                        attribute_metadata {
+                            uid
+                            code
+                            label
+                            attribute_labels {
+                                store_code
+                                label
+                            }
+                            data_type
+                            is_system
+                            entity_type
+                            ui_input {
+                                ui_input_type
+                                is_html_allowed
+                            }
+                            ... on ProductAttributeMetadata {
+                                used_in_components
+                            }
+                        }
+                    }
                 }
             }
         }

package/lib/talons/SearchPage/searchPage.gql.js

@@ -2,8 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PAGE_SIZE = gql`
     query getPageSize {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             grid_per_page
         }
     }
@@ -20,6 +21,7 @@ export const GET_PRODUCT_FILTERS_BY_SEARCH = gql`
                     label
                     value
                 }
+                position
             }
         }
     }
@@ -57,7 +59,7 @@ export const PRODUCT_SEARCH = gql`
                     url
                 }
                 stock_status
-                type_id
+                __typename
                 url_key
             }
             page_info {
@@ -81,9 +83,23 @@ export const GET_FILTER_INPUTS = gql`
     }
 `;
 
+export const GET_SEARCH_AVAILABLE_SORT_METHODS = gql`
+    query getSearchAvailableSortMethods($search: String!) {
+        products(search: $search) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
 export default {
     getFilterInputsQuery: GET_FILTER_INPUTS,
     getPageSize: GET_PAGE_SIZE,
     getProductFiltersBySearchQuery: GET_PRODUCT_FILTERS_BY_SEARCH,
+    getSearchAvailableSortMethods: GET_SEARCH_AVAILABLE_SORT_METHODS,
     productSearchQuery: PRODUCT_SEARCH
 };