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

package/lib/talons/WishlistPage/useWishlist.js

@@ -18,8 +18,8 @@ export const useWishlist = (props = {}) => {
     const [isOpen, setIsOpen] = useState(!isCollapsed);
     const [isFetchingMore, setIsFetchingMore] = useState(false);
 
-    const [fetchWhislistItems, queryResult] = useLazyQuery(
-        operations.getCustomerWhislistItems,
+    const [fetchWishlistItems, queryResult] = useLazyQuery(
+        operations.getCustomerWishlistItems,
         {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',
@@ -52,9 +52,9 @@ export const useWishlist = (props = {}) => {
     useEffect(() => {
         setPage(1);
         if (itemsCount >= 1 && isOpen === true && !data) {
-            fetchWhislistItems();
+            fetchWishlistItems();
         }
-    }, [itemsCount, isOpen, fetchWhislistItems, data]);
+    }, [itemsCount, isOpen, fetchWishlistItems, data]);
 
     const items =
         data && data.customer.wishlist_v2.items_v2.items

package/lib/talons/WishlistPage/useWishlistPage.js

@@ -1,9 +1,8 @@
-import { useEffect, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
 
-import { useUserContext } from '../../context/user';
-import mergeOperations from '../../util/shallowMerge';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import defaultOperations from './wishlistPage.gql';
 
@@ -16,7 +15,6 @@ export const useWishlistPage = (props = {}) => {
     const operations = mergeOperations(defaultOperations, props.operations);
     const { getCustomerWishlistQuery } = operations;
 
-    const history = useHistory();
     const [{ isSignedIn }] = useUserContext();
 
     const { data, error, loading } = useQuery(getCustomerWishlistQuery, {
@@ -33,12 +31,6 @@ export const useWishlistPage = (props = {}) => {
         return new Map([['getCustomerWishlistQuery', error]]);
     }, [error]);
 
-    useEffect(() => {
-        if (!isSignedIn) {
-            history.push('/');
-        }
-    }, [history, isSignedIn]);
-
     return {
         errors,
         loading,

package/lib/talons/WishlistPage/wishlist.gql.js

@@ -54,6 +54,6 @@ export const UPDATE_WISHLIST = gql`
 
 export default {
     getCustomerWishlistQuery: GET_CUSTOMER_WISHLIST,
-    getCustomerWhislistItems: GET_CUSTOMER_WISHLIST_ITEMS,
+    getCustomerWishlistItems: GET_CUSTOMER_WISHLIST_ITEMS,
     updateWishlistMutation: UPDATE_WISHLIST
 };

package/lib/talons/WishlistPage/wishlistConfig.gql.ce.js

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const GET_WISHLIST_CONFIG = gql`
+    query GetWishlistConfigForWishlistPageCE {
+        storeConfig {
+            id
+            magento_wishlist_general_is_enabled
+        }
+    }
+`;
+
+export default {
+    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+};

package/lib/talons/WishlistPage/wishlistConfig.gql.ee.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const GET_WISHLIST_CONFIG = gql`
+    query GetWishlistConfigForWishlistPageEE {
+        storeConfig {
+            id
+            magento_wishlist_general_is_enabled
+            enable_multiple_wishlists
+        }
+    }
+`;
+
+export default {
+    getWishlistConfigQuery: GET_WISHLIST_CONFIG
+};

package/lib/targets/peregrine-declare.js

@@ -20,8 +20,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable hooks][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>
@@ -49,8 +47,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable talons][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>

package/lib/util/deriveErrorMessage.js

@@ -4,22 +4,28 @@
  * @param {Error} error the error to map
  * @return {String} error message
  */
-const toString = error => {
+
+const toString = (error, defaultErrorMessage) => {
     const { graphQLErrors, message } = error;
 
-    return graphQLErrors && graphQLErrors.length
-        ? graphQLErrors.map(({ message }) => message).join(', ')
-        : message;
+    if (graphQLErrors && graphQLErrors.length) {
+        if (defaultErrorMessage) {
+            return defaultErrorMessage;
+        }
+        return graphQLErrors.map(({ message }) => message).join(', ');
+    }
+
+    return message;
 };
 
 /**
  * A function to derive an error string from an array of errors.
  */
-export const deriveErrorMessage = errors => {
+export const deriveErrorMessage = (errors, defaultErrorMessage = '') => {
     const errorCollection = [];
     for (const error of errors) {
         if (error) {
-            errorCollection.push(toString(error));
+            errorCollection.push(toString(error, defaultErrorMessage));
         }
     }
 

package/lib/util/images.js

@@ -1,3 +1,4 @@
-// 4x5 transparent png
+// 4x5 transparent svg
+// svg source = <svg xmlns='http://www.w3.org/2000/svg' width='4' height='5'><rect width='4' height='5' style='fill: none' /></svg>
 export const transparentPlaceholder =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII=';
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg==';

package/lib/util/isSupportedProductType.js

@@ -0,0 +1,5 @@
+const SUPPORTED_PRODUCT_TYPES = ['SimpleProduct', 'ConfigurableProduct'];
+
+export const isSupportedProductType = productType => {
+    return SUPPORTED_PRODUCT_TYPES.includes(productType);
+};

package/lib/util/magentoRouteData.js

@@ -0,0 +1,9 @@
+export const getComponentData = routeData => {
+    const excludedKeys = ['redirect_code', 'relative_url'];
+
+    return Object.fromEntries(
+        Object.entries(routeData).filter(([key]) => {
+            return !excludedKeys.includes(key);
+        })
+    );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "11.0.0-beta.1",
+  "version": "12.0.0-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -27,9 +27,9 @@
     "intl-locales-supported": "~1.8.12",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",
-    "react-intl": "~5.7.0",
-    "react-redux": "~7.1.1",
-    "react-router-dom": "~5.1.0",
+    "react-intl": "~5.20.0",
+    "react-redux": "~7.2.2",
+    "react-router-dom": "~5.2.0",
     "react-test-renderer": "~17.0.1",
     "redux": "~4.0.4",
     "redux-actions": "~2.6.5",
@@ -38,12 +38,12 @@
   "peerDependencies": {
     "@apollo/client": "~3.1.2",
     "@babel/runtime": "~7.4.2",
-    "informed": "~3.27.0",
+    "informed": "~3.29.0",
     "react": "~17.0.1",
     "react-dom": "~17.0.1",
-    "react-intl": "~5.7.0",
-    "react-redux": "~7.1.1",
-    "react-router-dom": "~5.1.0",
+    "react-intl": "~5.20.0",
+    "react-redux": "~7.2.2",
+    "react-router-dom": "~5.2.0",
     "redux": "~4.0.4",
     "redux-actions": "~2.6.5"
   },