@magento/peregrine 12.1.0-beta.1 → 12.2.0-alpha.3

package/lib/talons/Gallery/useAddToCartButton.js

@@ -9,7 +9,7 @@ import operations from './addToCart.gql';
  * @param {String} props.item.uid - uid of item
  * @param {String} props.item.name - name of item
  * @param {String} props.item.stock_status - stock status of item
- * @param {String} props.item.type_id - product type
+ * @param {String} props.item.__typename - product type
  * @param {String} props.item.url_key - item url key
  * @param {String} props.item.sku - item sku
  *
@@ -21,20 +21,20 @@ import operations from './addToCart.gql';
  *
  */
 const UNSUPPORTED_PRODUCT_TYPES = [
-    'virtual',
-    'bundle',
-    'grouped',
-    'downloadable'
+    'VirtualProduct',
+    'BundleProduct',
+    'GroupedProduct',
+    'DownloadableProduct'
 ];
 
 export const useAddToCartButton = props => {
-    const { item } = props;
+    const { item, urlSuffix } = props;
 
     const [isLoading, setIsLoading] = useState(false);
 
     const isInStock = item.stock_status === 'IN_STOCK';
 
-    const productType = item.type_id;
+    const productType = item.__typename;
     const isUnsupportedProductType = UNSUPPORTED_PRODUCT_TYPES.includes(
         productType
     );
@@ -48,7 +48,7 @@ export const useAddToCartButton = props => {
 
     const handleAddToCart = useCallback(async () => {
         try {
-            if (productType === 'simple') {
+            if (productType === 'SimpleProduct') {
                 setIsLoading(true);
 
                 await addToCart({
@@ -68,8 +68,8 @@ export const useAddToCartButton = props => {
                 });
 
                 setIsLoading(false);
-            } else if (productType === 'configurable') {
-                history.push(`${item.url_key}.html`);
+            } else if (productType === 'ConfigurableProduct') {
+                history.push(`${item.url_key}${urlSuffix || ''}`);
             } else {
                 console.warn('Unsupported product type unable to handle.');
             }
@@ -84,7 +84,8 @@ export const useAddToCartButton = props => {
         item.url_key,
         productType,
         item.uid,
-        item.name
+        item.name,
+        urlSuffix
     ]);
 
     return {

package/lib/talons/Header/storeSwitcher.gql.js

@@ -2,34 +2,46 @@ import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
-            code
+            store_code
             store_name
             store_group_name
         }
     }
 `;
 
-export const GET_URL_RESOLVER_DATA = gql`
-    query getUrlResolverData($url: String!) {
-        urlResolver(url: $url) {
-            id
+export const GET_ROUTE_DATA = gql`
+    query getRouteData($url: String!) {
+        route(url: $url) {
             type
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on CmsPage {
+                identifier
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on ProductInterface {
+                uid
+                __typename
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on CategoryInterface {
+                uid
+            }
         }
     }
 `;
 
 export const GET_AVAILABLE_STORES_DATA = gql`
     query getAvailableStoresData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         availableStores {
             category_url_suffix
-            code
             default_display_currency_code
-            id
             locale
             product_url_suffix
             secure_base_media_url
+            store_code
             store_group_code
             store_group_name
             store_name
@@ -40,6 +52,6 @@ export const GET_AVAILABLE_STORES_DATA = gql`
 
 export default {
     getStoreConfigData: GET_STORE_CONFIG_DATA,
-    getUrlResolverData: GET_URL_RESOLVER_DATA,
+    getRouteData: GET_ROUTE_DATA,
     getAvailableStoresData: GET_AVAILABLE_STORES_DATA
 };

package/lib/talons/Header/useCartTrigger.js

@@ -45,14 +45,14 @@ export const useCartTrigger = props => {
 
     const { data } = useQuery(getItemCountQuery, {
         fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
         variables: {
             cartId
         },
-        skip: !cartId
+        skip: !cartId,
+        errorPolicy: 'all'
     });
 
-    const itemCount = data ? data.cart.total_quantity : 0;
+    const itemCount = data?.cart?.total_quantity || 0;
 
     const handleTriggerClick = useCallback(() => {
         // Open the mini cart.

package/lib/talons/Header/useStoreSwitcher.js

@@ -9,16 +9,17 @@ import DEFAULT_OPERATIONS from './storeSwitcher.gql';
 const storage = new BrowserPersistence();
 
 const mapAvailableOptions = (config, stores) => {
-    const { code: configCode } = config;
+    const { store_code: configCode } = config;
 
     return stores.reduce((map, store) => {
         const {
             category_url_suffix,
-            code,
+            store_code: code,
             default_display_currency_code: currency,
             locale,
             product_url_suffix,
             secure_base_media_url,
+            store_code: storeCode,
             store_group_code: storeGroupCode,
             store_group_name: storeGroupName,
             store_name: storeName,
@@ -35,6 +36,7 @@ const mapAvailableOptions = (config, stores) => {
             product_url_suffix,
             secure_base_media_url,
             sortOrder,
+            storeCode,
             storeGroupCode,
             storeGroupName,
             storeName
@@ -62,7 +64,7 @@ export const useStoreSwitcher = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
         getStoreConfigData,
-        getUrlResolverData,
+        getRouteData,
         getAvailableStoresData
     } = operations;
     const { pathname } = useLocation();
@@ -78,7 +80,7 @@ export const useStoreSwitcher = (props = {}) => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const { data: urlResolverData } = useQuery(getUrlResolverData, {
+    const { data: routeData } = useQuery(getRouteData, {
         fetchPolicy: 'cache-first',
         variables: { url: pathname }
     });
@@ -102,15 +104,15 @@ export const useStoreSwitcher = (props = {}) => {
 
     const currentStoreCode = useMemo(() => {
         if (storeConfigData) {
-            return storeConfigData.storeConfig.code;
+            return storeConfigData.storeConfig.store_code;
         }
     }, [storeConfigData]);
 
     const pageType = useMemo(() => {
-        if (urlResolverData && urlResolverData.urlResolver) {
-            return urlResolverData.urlResolver.type;
+        if (routeData && routeData.route) {
+            return routeData.route.type;
         }
-    }, [urlResolverData]);
+    }, [routeData]);
 
     // availableStores => mapped options or empty map if undefined.
     const availableStores = useMemo(() => {

package/lib/talons/MagentoRoute/magentoRoute.gql.js

@@ -9,12 +9,14 @@ export const RESOLVE_URL = gql`
             ... on CmsPage {
                 identifier
             }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ProductInterface {
-                id
+                uid
                 __typename
             }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on CategoryInterface {
-                id
+                uid
             }
         }
     }

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -28,7 +28,6 @@ export const useMagentoRoute = (props = {}) => {
 
     const initialized = useRef(false);
     const fetchedPathname = useRef(null);
-    const fetching = useRef(false);
 
     const [appState, appApi] = useAppContext();
     const { actions: appActions } = appApi;
@@ -44,31 +43,13 @@ export const useMagentoRoute = (props = {}) => {
 
     const component = componentMap.get(pathname);
 
-    const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery, {
-        onCompleted: async ({ route }) => {
-            fetching.current = false;
-            if (!component) {
-                const { type, ...routeData } = route || {};
-                try {
-                    const rootComponent = await getRootComponent(type);
-                    setComponent(pathname, {
-                        component: rootComponent,
-                        ...getComponentData(routeData),
-                        type
-                    });
-                } catch (error) {
-                    setComponent(pathname, error);
-                }
-            }
-        },
-        onError: () => {
-            fetching.current = false;
-        }
-    });
+    const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery);
+    // destructure the query result
+    const { data, error, loading } = queryResult;
+    const { route } = data || {};
 
     useEffect(() => {
         if (initialized.current || !getInlinedPageData()) {
-            fetching.current = true;
             runQuery({
                 fetchPolicy: 'cache-and-network',
                 nextFetchPolicy: 'cache-first',
@@ -78,13 +59,42 @@ export const useMagentoRoute = (props = {}) => {
         }
     }, [initialized, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    // destructure the query result
-    const { data, error } = queryResult;
-    const { route } = data || {};
-    const { id, redirect_code, relative_url, type } = route || {};
+    useEffect(() => {
+        if (component) {
+            return;
+        }
+
+        (async () => {
+            const { type, ...routeData } = route || {};
+            const { id, identifier, uid } = routeData || {};
+            const isEmpty = !id && !identifier && !uid;
+
+            if (!type || isEmpty) {
+                return;
+            }
+
+            try {
+                const rootComponent = await getRootComponent(type);
+                setComponent(pathname, {
+                    component: rootComponent,
+                    ...getComponentData(routeData),
+                    type
+                });
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+
+                setComponent(pathname, error);
+            }
+        })();
+    }, [route]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const { id, identifier, uid, redirect_code, relative_url, type } =
+        route || {};
 
     // evaluate both results and determine the response type
-    const empty = !route || !type || id < 1;
+    const empty = !route || !type || (!id && !identifier && !uid);
     const redirect = isRedirect(redirect_code);
     const fetchError = component instanceof Error && component;
     const routeError = fetchError || error;
@@ -107,11 +117,7 @@ export const useMagentoRoute = (props = {}) => {
                 ? relative_url
                 : '/' + relative_url
         };
-    } else if (
-        empty &&
-        fetchedPathname.current === pathname &&
-        !fetching.current
-    ) {
+    } else if (empty && fetchedPathname.current === pathname && !loading) {
         // NOT FOUND
         routeData = { isNotFound: true };
     } else if (nextRootComponent) {

package/lib/talons/MegaMenu/megaMenu.gql.js

@@ -1,8 +1,9 @@
 import { gql } from '@apollo/client';
 export const GET_STORE_CONFIG_DATA = gql`
     query GetStoreConfigForMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             category_url_suffix
         }
     }
@@ -10,23 +11,27 @@ export const GET_STORE_CONFIG_DATA = gql`
 
 export const GET_MEGA_MENU = gql`
     query getMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         categoryList {
-            id
+            uid
             name
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             children {
-                id
+                uid
                 include_in_menu
                 name
                 position
                 url_path
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 children {
-                    id
+                    uid
                     include_in_menu
                     name
                     position
                     url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     children {
-                        id
+                        uid
                         include_in_menu
                         name
                         position

package/lib/talons/MegaMenu/useMegaMenu.js

@@ -86,7 +86,7 @@ export const useMegaMenu = (props = {}) => {
             const megaMenuCategory = Object.assign({}, category);
 
             if (!isRoot) {
-                megaMenuCategory.path = [...path, category.id];
+                megaMenuCategory.path = [...path, category.uid];
             }
 
             megaMenuCategory.isActive = isActive(megaMenuCategory);
@@ -131,8 +131,6 @@ export const useMegaMenu = (props = {}) => {
         }
     };
 
-    useEventListener(globalThis, 'mousedown', handleClickOutside);
-    useEventListener(globalThis, 'mouseout', handleClickOutside);
     useEventListener(globalThis, 'keydown', handleClickOutside);
 
     const handleSubMenuFocus = useCallback(() => {
@@ -179,7 +177,7 @@ export const useMegaMenu = (props = {}) => {
  * @property {MegaMenuCategory} megaMenuData - The Object with categories contains only categories
  *                                             with the include_in_menu = 1 flag. The categories are sorted
  *                                             based on the field position.
- * @property {int} activeCategoryId returns the currently selected category id.
+ * @property {String} activeCategoryId returns the currently selected category uid.
  * @property {String} categoryUrlSuffix  store's category url suffix to construct category URL
  * @property {Function} handleClickOutside function to handle mouse/key events.
  * @property {Boolean} subMenuState maintaining sub-menu open/close state
@@ -192,7 +190,7 @@ export const useMegaMenu = (props = {}) => {
  * Object type returned by the {@link useMegaMenu} talon.
  * @typedef {Object} MegaMenuCategory
  *
- * @property {int} id - id of the category
+ * @property {String} uid - uid of the category
  * @property {int} include_in_menu - describes if category should be included in menu
  * @property {String} name - name of the category
  * @property {int} position - value used for sorting

package/lib/talons/MegaMenu/useMegaMenuItem.js

@@ -6,6 +6,10 @@ export const useMegaMenuItem = props => {
     const [isFocused, setIsFocused] = useState(false);
     const isActive = category.id === activeCategoryId;
 
+    const handleMenuItemFocus = useCallback(() => {
+        setIsFocused(true);
+    }, [setIsFocused]);
+
     const handleCloseSubMenu = useCallback(() => {
         setIsFocused(false);
     }, [setIsFocused]);
@@ -54,6 +58,7 @@ export const useMegaMenuItem = props => {
     return {
         isFocused,
         isActive,
+        handleMenuItemFocus,
         handleCloseSubMenu,
         isMenuActive,
         handleKeyDown

package/lib/talons/MiniCart/ProductList/productListFragments.gql.js

@@ -3,24 +3,27 @@ import { gql } from '@apollo/client';
 export const ProductListFragment = gql`
     fragment ProductListFragment on Cart {
         id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
-            id
             uid
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             product {
-                id
+                uid
                 name
                 url_key
                 thumbnail {
                     url
                 }
                 stock_status
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 ... on ConfigurableProduct {
                     variants {
                         attributes {
                             uid
                         }
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
-                            id
+                            uid
                             thumbnail {
                                 url
                             }
@@ -35,11 +38,13 @@ export const ProductListFragment = gql`
                 }
             }
             quantity
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ConfigurableCartItem {
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
                 configurable_options {
-                    id
+                    configurable_product_option_uid
                     option_label
-                    value_id
+                    configurable_product_option_value_uid
                     value_label
                 }
             }

package/lib/talons/MiniCart/miniCart.gql.js

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

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

@@ -1,4 +1,5 @@
 import { gql } from '@apollo/client';
+
 export const SUBSCRIBE_TO_NEWSLETTER = gql`
     mutation SubscribeToNewsletter($email: String!) {
         subscribeEmailToNewsletter(email: $email) {
@@ -6,6 +7,18 @@ export const SUBSCRIBE_TO_NEWSLETTER = gql`
         }
     }
 `;
+
+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
+    subscribeMutation: SUBSCRIBE_TO_NEWSLETTER,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

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
         }
     }