@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -1,25 +1,14 @@
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { gql } from '@apollo/client';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
 import Button from '../../Button';
 import { useStyle } from '../../../classify';
-import defaultClasses from './priceSummary.css';
+import defaultClasses from './priceSummary.module.css';
 import DiscountSummary from './discountSummary';
 import GiftCardSummary from './giftCardSummary';
 import ShippingSummary from './shippingSummary';
 import TaxSummary from './taxSummary';
-import { PriceSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql';
-const GET_PRICE_SUMMARY = gql`
-    query getPriceSummary($cartId: String!) {
-        cart(cart_id: $cartId) {
-            id
-            ...PriceSummaryFragment
-        }
-    }
-    ${PriceSummaryFragment}
-`;
 
 /**
  * A child component of the CartPage component.
@@ -28,7 +17,7 @@ const GET_PRICE_SUMMARY = gql`
  *
  * @param {Object} props
  * @param {Object} props.classes CSS className overrides.
- * See [priceSummary.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.css}
+ * See [priceSummary.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.module.css}
  * for a list of classes you can override.
  *
  * @returns {React.Element}
@@ -39,11 +28,7 @@ const GET_PRICE_SUMMARY = gql`
 const PriceSummary = props => {
     const { isUpdating } = props;
     const classes = useStyle(defaultClasses, props.classes);
-    const talonProps = usePriceSummary({
-        queries: {
-            getPriceSummary: GET_PRICE_SUMMARY
-        }
-    });
+    const talonProps = usePriceSummary();
 
     const {
         handleProceedToCheckout,

package/lib/components/CartPage/ProductListing/EditModal/__tests__/__snapshots__/productForm.spec.js.snap

@@ -38,13 +38,13 @@ exports[`renders form errors 1`] = `
               <svg
                 className="icon"
                 fill="none"
-                height="24"
+                height={24}
                 stroke="currentColor"
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
                 viewBox="0 0 24 24"
-                width="24"
+                width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <line
@@ -89,7 +89,7 @@ exports[`renders form errors 1`] = `
                     alt="Juno Sweater"
                     className="image placeholder"
                     loading="eager"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
                     width={240}
                   />
                   <img
@@ -299,6 +299,17 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
             <button
               className="root_lowPriority"
               disabled={false}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -313,6 +324,18 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
             <button
               className="root_highPriority"
               disabled={false}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="submit"
             >
               <span
@@ -370,13 +393,13 @@ exports[`renders form with data 1`] = `
               <svg
                 className="icon"
                 fill="none"
-                height="24"
+                height={24}
                 stroke="currentColor"
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
                 viewBox="0 0 24 24"
-                width="24"
+                width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <line
@@ -412,7 +435,7 @@ exports[`renders form with data 1`] = `
                     alt="Juno Sweater"
                     className="image placeholder"
                     loading="eager"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
+                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
                     width={240}
                   />
                   <img
@@ -622,6 +645,17 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
             <button
               className="root_lowPriority"
               disabled={false}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -636,6 +670,18 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
             <button
               className="root_highPriority"
               disabled={false}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="submit"
             >
               <span
@@ -693,13 +739,13 @@ exports[`renders loading indicator while options are being fetched 1`] = `
               <svg
                 className="icon"
                 fill="none"
-                height="24"
+                height={24}
                 stroke="currentColor"
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth="2"
                 viewBox="0 0 24 24"
-                width="24"
+                width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <line
@@ -738,6 +784,17 @@ exports[`renders loading indicator while options are being fetched 1`] = `
             <button
               className="root_lowPriority"
               disabled={true}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="reset"
             >
               <span
@@ -752,6 +809,18 @@ exports[`renders loading indicator while options are being fetched 1`] = `
             <button
               className="root_highPriority"
               disabled={true}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
               type="submit"
             >
               <span

package/lib/components/CartPage/ProductListing/EditModal/editModal.js

@@ -14,7 +14,7 @@ import ProductForm from './productForm';
  * for a list of properties for this object.
  * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
  * @param {Object} props.classes CSS className overrides.
- * See [editModal.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.css}
+ * See [editModal.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/editModal.module.css}
  * for a list of classes you can override.
  *
  * @returns {React.Element}

package/lib/components/CartPage/ProductListing/EditModal/productDetail.js

@@ -4,7 +4,7 @@ import Price from '@magento/venia-ui/lib/components/Price';
 
 import { useStyle } from '../../../../classify';
 import Image from '../../../Image';
-import defaultClasses from './productDetail.css';
+import defaultClasses from './productDetail.module.css';
 
 const IMAGE_SIZE = 240;
 

package/lib/components/CartPage/ProductListing/EditModal/productForm.js

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { gql } from '@apollo/client';
 import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';
 
 import { useStyle } from '../../../../classify';
@@ -8,9 +7,7 @@ import FormError from '../../../FormError';
 import LoadingIndicator from '../../../LoadingIndicator';
 import Options from '../../../ProductOptions';
 import { QuantityFields } from '../quantity';
-import defaultClasses from './productForm.css';
-import { CartPageFragment } from '../../cartPageFragments.gql';
-import { ProductFormFragment } from './productFormFragment.gql';
+import defaultClasses from './productForm.module.css';
 import Dialog from '../../../Dialog';
 import ProductDetail from './productDetail';
 
@@ -25,11 +22,8 @@ const ProductForm = props => {
     const { formatMessage } = useIntl();
     const talonProps = useProductForm({
         cartItem,
-        getConfigurableOptionsQuery: GET_CONFIGURABLE_OPTIONS,
         setIsCartUpdating,
         setVariantPrice,
-        updateConfigurableOptionsMutation: UPDATE_CONFIGURABLE_OPTIONS_MUTATION,
-        updateQuantityMutation: UPDATE_QUANTITY_MUTATION,
         setActiveEditItem
     });
     const {
@@ -149,72 +143,3 @@ const ProductForm = props => {
 };
 
 export default ProductForm;
-
-export const GET_CONFIGURABLE_OPTIONS = gql`
-    query productDetailBySku($sku: String) {
-        products(filter: { sku: { eq: $sku } }) {
-            items {
-                id
-                ...ProductFormFragment
-            }
-        }
-    }
-    ${ProductFormFragment}
-`;
-
-export 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}
-`;
-
-export 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}
-`;

package/lib/components/CartPage/ProductListing/EditModal/{productForm.css → productForm.module.css}

@@ -1,5 +1,5 @@
 .contents {
-    composes: contents from '../../../Dialog/dialog.css';
+    composes: contents from '../../../Dialog/dialog.module.css';
     position: relative;
 }
 
@@ -17,14 +17,14 @@
 }
 
 .quantityRoot {
-    composes: root from '../quantity.css';
+    composes: root from '../quantity.module.css';
     grid-template-columns: auto 4rem auto;
     justify-content: start;
     padding: 0 1rem;
 }
 
 .loading {
-    composes: root from '../../../LoadingIndicator/indicator.css';
+    composes: root from '../../../LoadingIndicator/indicator.module.css';
     height: unset;
     left: 0;
     position: absolute;

package/lib/components/CartPage/ProductListing/__tests__/__snapshots__/product.spec.js.snap

@@ -232,13 +232,13 @@ exports[`renders configurable product with options 1`] = `
           <svg
             className="icon"
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <circle
@@ -343,7 +343,16 @@ exports[`renders configurable product with options 1`] = `
             icon={
               <Icon
                 size={16}
-                src={[Function]}
+                src={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "propTypes": Object {
+                      "color": [Function],
+                      "size": [Function],
+                    },
+                    "render": [Function],
+                  }
+                }
               />
             }
           />
@@ -554,13 +563,13 @@ exports[`renders out of stock product 1`] = `
           <svg
             className="icon"
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <circle
@@ -632,7 +641,16 @@ exports[`renders out of stock product 1`] = `
             icon={
               <Icon
                 size={16}
-                src={[Function]}
+                src={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "propTypes": Object {
+                      "color": [Function],
+                      "size": [Function],
+                    },
+                    "render": [Function],
+                  }
+                }
               />
             }
           />
@@ -843,13 +861,13 @@ exports[`renders simple product correctly 1`] = `
           <svg
             className="icon"
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <circle
@@ -921,7 +939,16 @@ exports[`renders simple product correctly 1`] = `
             icon={
               <Icon
                 size={16}
-                src={[Function]}
+                src={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "propTypes": Object {
+                      "color": [Function],
+                      "size": [Function],
+                    },
+                    "render": [Function],
+                  }
+                }
               />
             }
           />

package/lib/components/CartPage/ProductListing/product.js

@@ -16,10 +16,10 @@ import Section from '../../LegacyMiniCart/section';
 import AddToListButton from '../../Wishlist/AddToListButton';
 import Quantity from './quantity';
 
-import defaultClasses from './product.css';
+import defaultClasses from './product.module.css';
 
-import { CartPageFragment } from '../cartPageFragments.gql';
-import { AvailableShippingMethodsCartFragment } from '../PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql';
+import { CartPageFragment } from '@magento/peregrine/lib/talons/CartPage/cartPageFragments.gql.js';
+import { AvailableShippingMethodsCartFragment } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js';
 
 const IMAGE_SIZE = 100;
 

package/lib/components/CartPage/ProductListing/productListing.js

@@ -1,13 +1,11 @@
 import React, { Fragment, Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { gql } from '@apollo/client';
 import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
 
 import { useStyle } from '../../../classify';
 import LoadingIndicator from '../../LoadingIndicator';
-import defaultClasses from './productListing.css';
+import defaultClasses from './productListing.module.css';
 import Product from './product';
-import { ProductListingFragment } from './productListingFragments';
 
 const EditModal = React.lazy(() => import('./EditModal'));
 /**
@@ -17,7 +15,7 @@ const EditModal = React.lazy(() => import('./EditModal'));
  * @param {Object} props
  * @param {Function} props.setIsCartUpdating Function for setting the updating state of the cart.
  * @param {Object} props.classes CSS className overrides.
- * See [productListing.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.css}
+ * See [productListing.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.module.css}
  * for a list of classes you can override.
  *
  * @returns {React.Element}
@@ -31,11 +29,9 @@ const ProductListing = props => {
         setIsCartUpdating,
         fetchCartDetails
     } = props;
-    const talonProps = useProductListing({
-        queries: {
-            getProductListing: GET_PRODUCT_LISTING
-        }
-    });
+
+    const talonProps = useProductListing();
+
     const {
         activeEditItem,
         isLoading,
@@ -87,14 +83,4 @@ const ProductListing = props => {
     return null;
 };
 
-export const GET_PRODUCT_LISTING = gql`
-    query getProductListing($cartId: String!) {
-        cart(cart_id: $cartId) {
-            id
-            ...ProductListingFragment
-        }
-    }
-    ${ProductListingFragment}
-`;
-
 export default ProductListing;

package/lib/components/CartPage/ProductListing/quantity.js

@@ -9,7 +9,7 @@ import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
 import TextInput from '../../TextInput';
 import { Message } from '../../Field';
-import defaultClasses from './quantity.css';
+import defaultClasses from './quantity.module.css';
 
 export const QuantityFields = props => {
     const { initialValue, itemId, label, min, onChange, message } = props;

package/lib/components/CartPage/ProductListing/{quantity.css → quantity.module.css}

@@ -71,6 +71,6 @@
 }
 
 .input {
-    composes: input from '../../TextInput/textInput.css';
+    composes: input from '../../TextInput/textInput.module.css';
     text-align: center;
 }

package/lib/components/CartPage/__tests__/cartPage.spec.js

@@ -119,7 +119,16 @@ test('renders toast if wishlistSuccessProps is not falsy', () => {
           Object {
             "icon": <Icon
               size={20}
-              src={[Function]}
+              src={
+                Object {
+                  "$$typeof": Symbol(react.forward_ref),
+                  "propTypes": Object {
+                    "color": [Function],
+                    "size": [Function],
+                  },
+                  "render": [Function],
+                }
+              }
             />,
             "message": "Successfully added to wishlist",
           },

package/lib/components/CartPage/cartPage.js

@@ -10,10 +10,9 @@ import { StoreTitle } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import StockStatusMessage from '../StockStatusMessage';
 import PriceAdjustments from './PriceAdjustments';
-import ProductListing from './ProductListing';
 import PriceSummary from './PriceSummary';
-import defaultClasses from './cartPage.css';
-import { GET_CART_DETAILS } from './cartPage.gql';
+import ProductListing from './ProductListing';
+import defaultClasses from './cartPage.module.css';
 
 const CheckIcon = <Icon size={20} src={Check} />;
 
@@ -26,7 +25,7 @@ const CheckIcon = <Icon size={20} src={Check} />;
  *
  * @param {Object} props
  * @param {Object} props.classes CSS className overrides for the component.
- * See [cartPage.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.css}
+ * See [cartPage.module.css]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.module.css}
  * for a list of classes you can override.
  *
  * @returns {React.Element}
@@ -35,11 +34,7 @@ const CheckIcon = <Icon size={20} src={Check} />;
  * import CartPage from "@magento/venia-ui/lib/components/CartPage";
  */
 const CartPage = props => {
-    const talonProps = useCartPage({
-        queries: {
-            getCartDetails: GET_CART_DETAILS
-        }
-    });
+    const talonProps = useCartPage();
 
     const {
         cartItems,

package/lib/components/CategoryList/categoryList.js

@@ -6,7 +6,7 @@ import { useCategoryList } from '@magento/peregrine/lib/talons/CategoryList/useC
 import { useStyle } from '../../classify';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
-import defaultClasses from './categoryList.css';
+import defaultClasses from './categoryList.module.css';
 import CategoryTile from './categoryTile';
 
 // map Magento 2.3.1 schema changes to Venia 2.0.0 proptype shape to maintain backwards compatibility
@@ -32,7 +32,7 @@ const mapCategory = categoryItem => {
 const CategoryList = props => {
     const { id, title } = props;
     const talonProps = useCategoryList({ id });
-    const { childCategories, error, loading } = talonProps;
+    const { childCategories, storeConfig, error, loading } = talonProps;
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -64,6 +64,7 @@ const CategoryList = props => {
                         <CategoryTile
                             item={mapCategory(item)}
                             key={item.url_key}
+                            storeConfig={storeConfig}
                         />
                     ))}
                 </div>