@magento/peregrine 12.0.0 → 12.2.0-alpha.1

package/lib/talons/MiniCart/useMiniCart.js

@@ -45,7 +45,8 @@ export const useMiniCart = props => {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',
             variables: { cartId },
-            skip: !cartId
+            skip: !cartId,
+            errorPolicy: 'all'
         }
     );
 
@@ -75,20 +76,20 @@ export const useMiniCart = props => {
     ] = useMutation(removeItemMutation);
 
     const totalQuantity = useMemo(() => {
-        if (!miniCartLoading && miniCartData) {
-            return miniCartData.cart.total_quantity;
+        if (!miniCartLoading) {
+            return miniCartData?.cart?.total_quantity;
         }
     }, [miniCartData, miniCartLoading]);
 
     const subTotal = useMemo(() => {
-        if (!miniCartLoading && miniCartData) {
-            return miniCartData.cart.prices.subtotal_excluding_tax;
+        if (!miniCartLoading) {
+            return miniCartData?.cart?.prices?.subtotal_excluding_tax;
         }
     }, [miniCartData, miniCartLoading]);
 
     const productList = useMemo(() => {
-        if (!miniCartLoading && miniCartData) {
-            return miniCartData.cart.items;
+        if (!miniCartLoading) {
+            return miniCartData?.cart?.items;
         }
     }, [miniCartData, miniCartLoading]);
 

package/lib/talons/Navigation/navigation.gql.js

@@ -2,8 +2,8 @@ import { gql } from '@apollo/client';
 
 export const GET_CUSTOMER = gql`
     query GetCustomerForLeftNav {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             email
             firstname
             lastname
@@ -14,9 +14,10 @@ export const GET_CUSTOMER = gql`
 
 const GET_ROOT_CATEGORY_ID = gql`
     query getRootCategoryId {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
-            root_category_id
+            store_code
+            root_category_uid
         }
     }
 `;

package/lib/talons/Navigation/useNavigation.js

@@ -38,7 +38,7 @@ export const useNavigation = (props = {}) => {
 
     const rootCategoryId = useMemo(() => {
         if (getRootCategoryData) {
-            return getRootCategoryData.storeConfig.root_category_id;
+            return getRootCategoryData.storeConfig.root_category_uid;
         }
     }, [getRootCategoryData]);
 

package/lib/talons/Newsletter/newsletter.gql.js

@@ -0,0 +1,24 @@
+import { gql } from '@apollo/client';
+
+export const SUBSCRIBE_TO_NEWSLETTER = gql`
+    mutation SubscribeToNewsletter($email: String!) {
+        subscribeEmailToNewsletter(email: $email) {
+            status
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForNewsletter {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            newsletter_enabled
+        }
+    }
+`;
+
+export default {
+    subscribeMutation: SUBSCRIBE_TO_NEWSLETTER,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/lib/talons/Newsletter/useNewsletter.js

@@ -0,0 +1,70 @@
+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, getStoreConfigQuery } = mergeOperations(
+        DEFAULT_OPERATIONS,
+        props.operations
+    );
+
+    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: 'cache-and-network'
+        }
+    );
+
+    const isEnabled = useMemo(() => {
+        return !!storeConfigData?.storeConfig?.newsletter_enabled;
+    }, [storeConfigData]);
+
+    const setFormApi = useCallback(api => (formApiRef.current = api), []);
+    const handleSubmit = useCallback(
+        async ({ email }) => {
+            try {
+                await subscribeNewsLetter({
+                    variables: { email }
+                });
+                if (formApiRef.current) {
+                    formApiRef.current.reset();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+            }
+        },
+        [subscribeNewsLetter]
+    );
+    const errors = useMemo(
+        () => new Map([['subscribeMutation', newsLetterError]]),
+        [newsLetterError]
+    );
+
+    return {
+        isEnabled,
+        errors,
+        handleSubmit,
+        isBusy: subscribeLoading,
+        isLoading: configLoading,
+        setFormApi,
+        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 }]}
@@ -368,7 +393,13 @@ export const useProductFullDetail = props => {
                     product: {
                         sku: product.sku,
                         quantity
-                    }
+                    },
+                    entered_options: [
+                        {
+                            uid: product.uid,
+                            value: product.name
+                        }
+                    ]
                 };
 
                 if (selectedOptionsArray.length) {
@@ -482,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
@@ -19,16 +19,35 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
 `;
 
 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
@@ -13,6 +14,7 @@ export const ProductsFragment = gql`
     fragment ProductsFragment on Products {
         items {
             id
+            uid
             name
             price_range {
                 maximum_price {
@@ -27,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
         }
     }
@@ -16,6 +17,7 @@ export const GET_PRODUCT_DETAIL_QUERY = gql`
         products(filter: { url_key: { eq: $urlKey } }) {
             items {
                 id
+                uid
                 ...ProductDetailsFragment
             }
         }