@magento/venia-ui 9.0.0 → 9.2.0-alpha.1

package/lib/components/CartPage/PriceSummary/giftCardSummary.ee.js

@@ -42,7 +42,10 @@ export default props => {
 
     return cards.value ? (
         <Fragment>
-            <span className={classes.lineItemLabel}>
+            <span
+                className={classes.lineItemLabel}
+                data-cy="PriceSummary-GiftCardSummary-label"
+            >
                 <FormattedMessage
                     id={'giftCardSummary.lineItemLabel'}
                     defaultMessage={'Gift Card(s) applied'}

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

@@ -81,6 +81,7 @@ const PriceSummary = props => {
                 disabled={isPriceUpdating}
                 priority={'high'}
                 onClick={handleProceedToCheckout}
+                data-cy="PriceSummary-checkoutButton"
             >
                 <FormattedMessage
                     id={'priceSummary.checkoutButton'}
@@ -91,7 +92,7 @@ const PriceSummary = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="PriceSummary-root">
             <div className={classes.lineItems}>
                 <span className={classes.lineItemLabel}>
                     <FormattedMessage
@@ -99,7 +100,10 @@ const PriceSummary = props => {
                         defaultMessage={'Subtotal'}
                     />
                 </span>
-                <span className={priceClass}>
+                <span
+                    data-cy="PriceSummary-subtotalValue"
+                    className={priceClass}
+                >
                     <Price
                         value={subtotal.value}
                         currencyCode={subtotal.currency}
@@ -136,7 +140,10 @@ const PriceSummary = props => {
                     isCheckout={isCheckout}
                 />
                 <span className={classes.totalLabel}>{totalPriceLabel}</span>
-                <span className={totalPriceClass}>
+                <span
+                    data-cy="PriceSummary-totalValue"
+                    className={totalPriceClass}
+                >
                     <Price value={total.value} currencyCode={total.currency} />
                 </span>
             </div>

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

@@ -45,7 +45,12 @@ const ShippingSummary = props => {
     return (
         <>
             <span className={classes.lineItemLabel}>{shippingLabel}</span>
-            <span className={classes.price}>{price}</span>
+            <span
+                data-cy="ShippingSummary-shippingValue"
+                className={classes.price}
+            >
+                {price}
+            </span>
         </>
     );
 };

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

@@ -47,7 +47,7 @@ const TaxSummary = props => {
     return (
         <>
             <span className={classes.lineItemLabel}>{taxLabel}</span>
-            <span className={classes.price}>
+            <span data-cy="TaxSummary-taxValue" className={classes.price}>
                 <Price value={tax.value} currencyCode={tax.currency} />
             </span>
         </>

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

@@ -25,7 +25,7 @@ exports[`renders product details with base price and in stock 1`] = `
   >
     <span>
       <mock-FormattedMessage
-        defaultMessage="SKU #"
+        defaultMessage="SKU # {sku}"
         id="productDetail.skuNumber"
         values={
           Object {
@@ -82,7 +82,7 @@ exports[`renders product details with unknown stock value 1`] = `
   >
     <span>
       <mock-FormattedMessage
-        defaultMessage="SKU #"
+        defaultMessage="SKU # {sku}"
         id="productDetail.skuNumber"
         values={
           Object {
@@ -139,7 +139,7 @@ exports[`renders product details with variant price and out of stock 1`] = `
   >
     <span>
       <mock-FormattedMessage
-        defaultMessage="SKU #"
+        defaultMessage="SKU # {sku}"
         id="productDetail.skuNumber"
         values={
           Object {

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

@@ -122,7 +122,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                 >
                   <span>
                     <mock-FormattedMessage
-                      defaultMessage="SKU #"
+                      defaultMessage="SKU # {sku}"
                       id="productDetail.skuNumber"
                       values={
                         Object {
@@ -468,7 +468,7 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
                 >
                   <span>
                     <mock-FormattedMessage
-                      defaultMessage="SKU #"
+                      defaultMessage="SKU # {sku}"
                       id="productDetail.skuNumber"
                       values={
                         Object {

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

@@ -61,7 +61,7 @@ const ProductDetail = props => {
                 <span>
                     <FormattedMessage
                         id={'productDetail.skuNumber'}
-                        defaultMessage={'SKU #'}
+                        defaultMessage={'SKU # {sku}'}
                         values={{ sku }}
                     />
                 </span>

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders error message 1`] = `
+<div
+  className="root"
+>
+  Something went wrong.
+</div>
+`;
+
+exports[`renders nothing when no error 1`] = `null`;

package/lib/components/CartPage/ProductListing/__tests__/errorMessage.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import ErrorMessage from '../errorMessage';
+
+jest.mock('../../../../classify');
+
+test('renders error message', () => {
+    const error = new Error('Something went wrong.');
+    const tree = createTestInstance(<ErrorMessage error={error} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('renders nothing when no error', () => {
+    const error = null;
+    const tree = createTestInstance(<ErrorMessage error={error} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

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

@@ -51,6 +51,7 @@ const props = {
             }
         },
         quantity: 1,
+        errors: null,
         configurable_options: [
             {
                 configurable_product_option_value_uid: '12345asd'

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '../../../classify';
+import defaultClasses from './errorMessage.module.css';
+
+const ErrorMessage = props => {
+    const { error } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!error || !error.message) {
+        return null;
+    }
+
+    return <div className={classes.root}>{error.message}</div>;
+};
+
+ErrorMessage.defaultProps = {
+    classes: null,
+    error: null
+};
+
+ErrorMessage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    error: shape({
+        message: string
+    })
+};
+
+export default ErrorMessage;

package/lib/components/CartPage/ProductListing/errorMessage.module.css

@@ -0,0 +1,9 @@
+.root {
+    border-left: 5px solid rgb(var(--venia-global-color-error));
+    color: rgb(var(--venia-global-color-error));
+    font-size: var(--venia-typography-body-S-fontSize);
+    font-weight: var(--venia-global-fontWeight-semibold);
+    line-height: var(--venia-global-lineHeight-300);
+    padding: 1rem 0 1rem 1rem;
+    margin-bottom: 1rem;
+}

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

@@ -72,6 +72,7 @@ const Product = props => {
                 id: 'product.editItem',
                 defaultMessage: 'Edit item'
             })}
+            data-cy="Product-Section-editItem"
             onClick={handleEditItem}
             icon="Edit2"
             classes={{
@@ -94,10 +95,14 @@ const Product = props => {
             : '';
 
     return (
-        <li className={classes.root}>
+        <li className={classes.root} data-cy="Product-root">
             <span className={classes.errorText}>{errorMessage}</span>
             <div className={itemClassName}>
-                <Link to={itemLink} className={classes.imageContainer}>
+                <Link
+                    to={itemLink}
+                    className={classes.imageContainer}
+                    data-cy="Product-imageContainer"
+                >
                     <Image
                         alt={name}
                         classes={{
@@ -109,7 +114,7 @@ const Product = props => {
                     />
                 </Link>
                 <div className={classes.details}>
-                    <div className={classes.name}>
+                    <div className={classes.name} data-cy="Product-name">
                         <Link to={itemLink}>{name}</Link>
                     </div>
                     <ProductOptions
@@ -119,7 +124,7 @@ const Product = props => {
                             optionLabel: classes.optionLabel
                         }}
                     />
-                    <span className={classes.price}>
+                    <span className={classes.price} data-cy="Product-price">
                         <Price currencyCode={currency} value={unitPrice} />
                         <FormattedMessage
                             id={'product.price'}
@@ -149,6 +154,7 @@ const Product = props => {
                             id: 'product.removeFromCart',
                             defaultMessage: 'Remove from cart'
                         })}
+                        data-cy="Product-Section-removeFromCart"
                         onClick={handleRemoveFromCart}
                         icon="Trash"
                         classes={{
@@ -174,9 +180,10 @@ const Product = props => {
 export default Product;
 
 export const REMOVE_ITEM_MUTATION = gql`
-    mutation removeItem($cartId: String!, $itemId: Int!) {
-        removeItemFromCart(input: { cart_id: $cartId, cart_item_id: $itemId })
-            @connection(key: "removeItemFromCart") {
+    mutation removeItem($cartId: String!, $itemId: ID!) {
+        removeItemFromCart(
+            input: { cart_id: $cartId, cart_item_uid: $itemId }
+        ) {
             cart {
                 id
                 ...CartPageFragment
@@ -191,15 +198,15 @@ export const REMOVE_ITEM_MUTATION = gql`
 export const UPDATE_QUANTITY_MUTATION = gql`
     mutation updateItemQuantity(
         $cartId: String!
-        $itemId: Int!
+        $itemId: ID!
         $quantity: Float!
     ) {
         updateCartItems(
             input: {
                 cart_id: $cartId
-                cart_items: [{ cart_item_id: $itemId, quantity: $quantity }]
+                cart_items: [{ cart_item_uid: $itemId, quantity: $quantity }]
             }
-        ) @connection(key: "updateCartItems") {
+        ) {
             cart {
                 id
                 ...CartPageFragment

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

@@ -6,6 +6,7 @@ import { useStyle } from '../../../classify';
 import LoadingIndicator from '../../LoadingIndicator';
 import defaultClasses from './productListing.module.css';
 import Product from './product';
+import ErrorMessage from './errorMessage';
 
 const EditModal = React.lazy(() => import('./EditModal'));
 /**
@@ -35,6 +36,7 @@ const ProductListing = props => {
     const {
         activeEditItem,
         isLoading,
+        error,
         items,
         setActiveEditItem,
         wishlistConfig
@@ -68,7 +70,10 @@ const ProductListing = props => {
 
         return (
             <Fragment>
-                <ul className={classes.root}>{productComponents}</ul>
+                <ErrorMessage error={error} />
+                <ul className={classes.root} data-cy="ProductListing-root">
+                    {productComponents}
+                </ul>
                 <Suspense fallback={null}>
                     <EditModal
                         item={activeEditItem}

package/lib/components/CartPage/ProductListing/productListing.module.css

@@ -2,3 +2,9 @@
     display: grid;
     grid-gap: 2rem 1rem;
 }
+
+.errorText {
+    color: rgb(var(--venia-global-color-error));
+    line-height: var(--venia-global-lineHeight-300);
+    margin-bottom: 1rem;
+}

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

@@ -49,6 +49,7 @@ export const QuantityFields = props => {
                     disabled={isDecrementDisabled}
                     onClick={handleDecrement}
                     type="button"
+                    data-cy="Quantity-decrementButton"
                 >
                     <Icon classes={iconClasses} src={MinusIcon} size={22} />
                 </button>
@@ -57,6 +58,7 @@ export const QuantityFields = props => {
                         id: 'quantity.input',
                         defaultMessage: 'Item Quantity'
                     })}
+                    data-cy="QuantityFields-input"
                     classes={{ input: classes.input }}
                     field="quantity"
                     id={itemId}
@@ -75,6 +77,7 @@ export const QuantityFields = props => {
                     disabled={isIncrementDisabled}
                     onClick={handleIncrement}
                     type="button"
+                    data-cy="Quantity-incrementButton"
                 >
                     <Icon classes={iconClasses} src={PlusIcon} size={20} />
                 </button>

package/lib/components/CartPage/cartPage.js

@@ -85,7 +85,7 @@ const CartPage = props => {
     ) : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="CartPage-root">
             <StoreTitle>
                 {formatMessage({
                     id: 'cartPage.title',

package/lib/components/CategoryList/__tests__/categoryList.spec.js

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 

package/lib/components/CategoryList/categoryList.js

@@ -1,6 +1,8 @@
+/* Deprecated in PWA-12.1.0*/
+
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { string, number, shape } from 'prop-types';
+import { string, shape } from 'prop-types';
 import { useCategoryList } from '@magento/peregrine/lib/talons/CategoryList/useCategoryList';
 
 import { useStyle } from '../../classify';
@@ -90,7 +92,7 @@ const CategoryList = props => {
 };
 
 CategoryList.propTypes = {
-    id: number.isRequired,
+    id: string.isRequired,
     title: string,
     classes: shape({
         root: string,

package/lib/components/CategoryList/categoryList.module.css

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 .root {
     padding: 1rem;
 }

package/lib/components/CategoryList/categoryTile.js

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 import React, { useMemo } from 'react';
 import { arrayOf, string, shape } from 'prop-types';
 import { Link } from 'react-router-dom';

package/lib/components/CategoryList/categoryTile.module.css

@@ -1,3 +1,5 @@
+/* Deprecated in PWA-12.1.0*/
+
 .root {
     display: block;
     line-height: 1rem;

package/lib/components/CategoryList/index.js

@@ -1 +1,3 @@
+/* Deprecated in PWA-12.1.0*/
+
 export { default } from './categoryList';

package/lib/components/CategoryTree/categoryBranch.js

@@ -21,6 +21,7 @@ const Branch = props => {
         <li className={classes.root}>
             <button
                 className={classes.target}
+                data-cy="CategoryTree-Branch-target"
                 type="button"
                 onClick={handleClick}
             >
@@ -34,7 +35,7 @@ export default Branch;
 
 Branch.propTypes = {
     category: shape({
-        id: number.isRequired,
+        uid: string.isRequired,
         include_in_menu: number,
         name: string.isRequired
     }).isRequired,

package/lib/components/CategoryTree/categoryLeaf.js

@@ -32,6 +32,7 @@ const Leaf = props => {
         <li className={classes.root}>
             <Link
                 className={classes.target}
+                data-cy="CategoryTree-Leaf-target"
                 to={destination}
                 onClick={handleClick}
             >

package/lib/components/CategoryTree/categoryTree.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { func, number, shape, string } from 'prop-types';
+import { func, shape, string } from 'prop-types';
 import { useCategoryTree } from '@magento/peregrine/lib/talons/CategoryTree';
 
 import { useStyle } from '../../classify';
@@ -41,7 +41,7 @@ const Tree = props => {
         : null;
 
     return (
-        <div className={classes.root}>
+        <div className={classes.root} data-cy="CategoryTree-root">
             <ul className={classes.tree}>{branches}</ul>
         </div>
     );
@@ -50,7 +50,7 @@ const Tree = props => {
 export default Tree;
 
 Tree.propTypes = {
-    categoryId: number,
+    categoryId: string,
     classes: shape({
         root: string,
         tree: string

package/lib/components/Checkbox/checkbox.module.css

@@ -11,15 +11,19 @@
     line-height: 1.5rem;
 }
 
+.input_base {
+    border-radius: 4px;
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
 .input {
+    composes: input_base;
     -webkit-appearance: none;
     background: none;
     border: 2px solid transparent;
-    border-radius: 4px;
     cursor: pointer;
     grid-area: input;
-    height: 1.5rem;
-    width: 1.5rem;
 }
 
 .icon {
@@ -58,3 +62,7 @@
     box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
     outline: none;
 }
+
+.input_shimmer {
+    composes: input_base;
+}

package/lib/components/Checkout/addressForm.js

@@ -185,8 +185,7 @@ export default AddressForm;
 
 export const SET_GUEST_EMAIL_MUTATION = gql`
     mutation setGuestEmailOnCart($cartId: String!, $email: String!) {
-        setGuestEmailOnCart(input: { cart_id: $cartId, email: $email })
-            @connection(key: "setGuestEmailOnCart") {
+        setGuestEmailOnCart(input: { cart_id: $cartId, email: $email }) {
             cart {
                 id
             }
@@ -225,7 +224,7 @@ export const SET_SHIPPING_ADDRESS_MUTATION = gql`
                     }
                 ]
             }
-        ) @connection(key: "setShippingAddressesOnCart") {
+        ) {
             cart {
                 id
                 shipping_addresses {

package/lib/components/CheckoutPage/GuestSignIn/guestSignIn.js

@@ -11,7 +11,7 @@ import SignIn from '@magento/venia-ui/lib/components/SignIn';
 import defaultClasses from './guestSignIn.module.css';
 
 const GuestSignIn = props => {
-    const { isActive, toggleActiveContent } = props;
+    const { isActive, toggleActiveContent, initialValues } = props;
 
     const talonProps = useGuestSignIn({ toggleActiveContent });
     const {
@@ -32,6 +32,7 @@ const GuestSignIn = props => {
                 classes={{ modal_active: undefined, root: classes.signInRoot }}
                 showCreateAccount={toggleCreateAccountView}
                 showForgotPassword={toggleForgotPasswordView}
+                initialValues={initialValues}
             />
         );
     } else if (view === 'FORGOT_PASSWORD') {
@@ -85,5 +86,8 @@ GuestSignIn.propTypes = {
         createAccountRoot: string
     }),
     isActive: bool.isRequired,
-    toggleActiveContent: func.isRequired
+    toggleActiveContent: func.isRequired,
+    initialValues: shape({
+        email: string.isRequired
+    })
 };

package/lib/components/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -18,16 +18,16 @@ export default {
                 quantity: 3,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 18,
+                        configurable_product_option_value_uid: 18,
                         value_label: 'Peach',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 27,
+                        configurable_product_option_value_uid: 27,
                         value_label: 'M',
                         __typename: 'SelectedConfigurableOption'
                     }
@@ -49,16 +49,16 @@ export default {
                 quantity: 1,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 21,
+                        configurable_product_option_value_uid: 21,
                         value_label: 'Rain',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 29,
+                        configurable_product_option_value_uid: 29,
                         value_label: 'XS',
                         __typename: 'SelectedConfigurableOption'
                     }
@@ -80,16 +80,16 @@ export default {
                 quantity: 3,
                 configurable_options: [
                     {
-                        id: 179,
+                        configurable_product_option_uid: 179,
                         option_label: 'Fashion Color',
-                        value_id: 20,
+                        configurable_product_option_value_uid: 20,
                         value_label: 'Lilac',
                         __typename: 'SelectedConfigurableOption'
                     },
                     {
-                        id: 182,
+                        configurable_product_option_uid: 182,
                         option_label: 'Fashion Size',
-                        value_id: 26,
+                        configurable_product_option_value_uid: 26,
                         value_label: 'L',
                         __typename: 'SelectedConfigurableOption'
                     }

package/lib/components/CheckoutPage/ItemsReview/__tests__/__snapshots__/item.spec.js.snap

@@ -24,7 +24,7 @@ exports[`Snapshot test 1`] = `
   />
   <span>
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="checkoutPage.quantity"
       values={
         Object {
@@ -70,7 +70,7 @@ exports[`Snapshot test when configured to use variant image 1`] = `
   />
   <span>
     <mock-FormattedMessage
-      defaultMessage="Qty :"
+      defaultMessage="Qty : {quantity}"
       id="checkoutPage.quantity"
       values={
         Object {