@magento/venia-ui 9.2.0-beta.1 → 9.3.0-beta.1

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

@@ -1,36 +1,15 @@
 import React, { Fragment } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import Price from '@magento/venia-ui/lib/components/Price';
-
 import { useStyle } from '../../../classify';
+import Icon from '../../Icon';
+import { ChevronDown as ArrowDown, ChevronUp as ArrowUp } from 'react-feather';
+import defaultClasses from './discountSummary.module.css';
+import AnimateHeight from 'react-animate-height';
+import { useDiscountSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/useDiscountSummary';
 
 const MINUS_SYMBOL = '-';
 
-const DEFAULT_AMOUNT = {
-    currency: 'USD',
-    value: 0
-};
-
-/**
- * Reduces discounts array into a single amount.
- *
- * @param {Array} discounts
- */
-const getDiscount = (discounts = []) => {
-    // discounts from data can be null
-    if (!discounts || !discounts.length) {
-        return DEFAULT_AMOUNT;
-    } else {
-        return {
-            currency: discounts[0].amount.currency,
-            value: discounts.reduce(
-                (acc, discount) => acc + discount.amount.value,
-                0
-            )
-        };
-    }
-};
-
 /**
  * A component that renders the discount summary line item.
  *
@@ -38,30 +17,101 @@ const getDiscount = (discounts = []) => {
  * @param {Object} props.data fragment response data
  */
 const DiscountSummary = props => {
-    const classes = useStyle({}, props.classes);
-    const discount = getDiscount(props.data);
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
 
-    return discount.value ? (
-        <Fragment>
-            <span
-                className={classes.lineItemLabel}
-                data-cy="PriceSummary-DiscountSummary-label"
-            >
-                <FormattedMessage
-                    id={'discountSummary.lineItemLabel'}
-                    defaultMessage={'Discounts applied'}
-                />
-            </span>
-            <span
-                data-cy="DiscountSummary-discountValue"
-                className={classes.price}
+    const {
+        totalDiscount,
+        discountData,
+        expanded,
+        handleClick
+    } = useDiscountSummary(props);
+
+    const toggleDiscountsAriaLabel = expanded
+        ? formatMessage({
+              id: 'priceSummary.discountSummary.hideDiscounts',
+              defaultMessage: 'Hide individual discounts.'
+          })
+        : formatMessage({
+              id: 'priceSummary.discountSummary.showDiscounts',
+              defaultMessage: 'Show individual discounts.'
+          });
+
+    const iconSrc = expanded ? ArrowUp : ArrowDown;
+
+    const individualDiscounts = discountData ? (
+        <AnimateHeight duration={500} height={expanded ? 'auto' : 0}>
+            <ul
+                className={classes.individualDiscountsList}
+                data-cy="DiscountSummary-IndividualDiscount"
             >
-                {MINUS_SYMBOL}
-                <Price
-                    value={discount.value}
-                    currencyCode={discount.currency}
-                />
-            </span>
+                <hr className={classes.individualDiscountSeparator} />
+                {discountData.map(discount => {
+                    return (
+                        <li
+                            className={classes.individualDiscountsListLineItem}
+                            key={discount.label}
+                        >
+                            <span
+                                className={classes.lineItemLabel}
+                                data-cy="DiscountSummary-IndividualDiscount-Label"
+                            >
+                                <span data-cy="DiscountSummary-IndividualDiscount-DiscountLabel">
+                                    {discount.label}
+                                </span>
+                            </span>
+                            <span
+                                data-cy="DiscountSummary-IndividualDiscount-DiscountValue"
+                                className={classes.price}
+                            >
+                                {MINUS_SYMBOL}
+                                <Price
+                                    value={discount.amount.value}
+                                    currencyCode={discount.amount.currency}
+                                />
+                            </span>
+                        </li>
+                    );
+                })}
+                <hr className={classes.individualDiscountSeparator} />
+            </ul>
+        </AnimateHeight>
+    ) : null;
+
+    return totalDiscount.value ? (
+        <Fragment>
+            <li className={classes.discountLineItems}>
+                <span
+                    className={classes.discountLineItemLabel}
+                    data-cy="PriceSummary-DiscountSummary-Label"
+                >
+                    <FormattedMessage
+                        id={'discountSummary.lineItemLabel'}
+                        defaultMessage={'Applied discounts'}
+                    />
+                    <button
+                        onClick={handleClick}
+                        data-cy="DiscountSummary-DiscountValue-TriggerButton"
+                        type="button"
+                        aria-expanded={expanded}
+                        aria-label={toggleDiscountsAriaLabel}
+                        className={classes.discountsButton}
+                    >
+                        <Icon src={iconSrc} />
+                    </button>
+                </span>
+                <span
+                    data-cy="DiscountSummary-discountValue"
+                    className={classes.price}
+                >
+                    {MINUS_SYMBOL}
+                    <Price
+                        value={totalDiscount.value}
+                        currencyCode={totalDiscount.currency}
+                    />
+                </span>
+            </li>
+            {individualDiscounts}
         </Fragment>
     ) : null;
 };

package/lib/components/CartPage/PriceSummary/discountSummary.module.css

@@ -0,0 +1,40 @@
+.root {
+}
+
+.discountsButton {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: ml-2 from global;
+}
+
+.discountLineItems {
+    composes: lineItems from './priceSummary.module.css';
+
+    composes: items-center from global;
+}
+
+.discountLineItemLabel {
+    composes: lineItemLabel from './priceSummary.module.css';
+
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+}
+
+.individualDiscountSeparator {
+    composes: mx-0 from global;
+    composes: my-4 from global;
+
+    color: rgb(var(--venia-global-color-gray-300));
+}
+.individualDiscountsList {
+    composes: lineItemLabel from './priceSummary.module.css';
+}
+
+.individualDiscountsListLineItem {
+    composes: lineItems from './priceSummary.module.css';
+    composes: mx-0 from global;
+    composes: pl-4 from global;
+
+    color: rgb(var(--venia-global-color-gray-700));
+}

package/lib/components/CartPage/PriceSummary/giftOptionsSummary.ce.js

@@ -0,0 +1,5 @@
+/**
+ * Gift Options Prices are an EE-only feature.
+ * Here in CE, don't render the component at all.
+ */
+export default () => null;

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

@@ -0,0 +1,40 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+/**
+ * A component that renders the gift options summary line item.
+ *
+ * @param {Object} props.classes
+ * @param {Object} props.data fragment response data
+ */
+export default props => {
+    const classes = useStyle({}, props.classes);
+    const giftOptions = props?.data?.printed_card || {};
+
+    if (!giftOptions || !giftOptions.value) {
+        return null;
+    }
+
+    return (
+        <Fragment>
+            <span
+                className={classes.lineItemLabel}
+                data-cy="PriceSummary-GiftOptionsSummary-label"
+            >
+                <FormattedMessage
+                    id={'giftOptionsSummary.lineItemLabel'}
+                    defaultMessage={'Printed Card'}
+                />
+            </span>
+            <span className={classes.price}>
+                <Price
+                    value={giftOptions.value}
+                    currencyCode={giftOptions.currency}
+                />
+            </span>
+        </Fragment>
+    );
+};

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

@@ -7,6 +7,7 @@ import { useStyle } from '../../../classify';
 import defaultClasses from './priceSummary.module.css';
 import DiscountSummary from './discountSummary';
 import GiftCardSummary from './giftCardSummary';
+import GiftOptionsSummary from './giftOptionsSummary';
 import ShippingSummary from './shippingSummary';
 import TaxSummary from './taxSummary';
 
@@ -57,7 +58,15 @@ const PriceSummary = props => {
         return null;
     }
 
-    const { subtotal, total, discounts, giftCards, taxes, shipping } = flatData;
+    const {
+        subtotal,
+        total,
+        discounts,
+        giftCards,
+        giftOptions,
+        taxes,
+        shipping
+    } = flatData;
 
     const isPriceUpdating = isUpdating || isLoading;
     const priceClass = isPriceUpdating ? classes.priceUpdating : classes.price;
@@ -93,59 +102,92 @@ const PriceSummary = props => {
 
     return (
         <div className={classes.root} data-cy="PriceSummary-root">
-            <div className={classes.lineItems}>
-                <span className={classes.lineItemLabel}>
-                    <FormattedMessage
-                        id={'priceSummary.lineItemLabel'}
-                        defaultMessage={'Subtotal'}
+            <div>
+                <ul>
+                    <li className={classes.lineItems}>
+                        <span
+                            data-cy="PriceSummary-lineItemLabel"
+                            className={classes.lineItemLabel}
+                        >
+                            <FormattedMessage
+                                id={'priceSummary.lineItemLabel'}
+                                defaultMessage={'Subtotal'}
+                            />
+                        </span>
+                        <span
+                            data-cy="PriceSummary-subtotalValue"
+                            className={priceClass}
+                        >
+                            <Price
+                                value={subtotal.value}
+                                currencyCode={subtotal.currency}
+                            />
+                        </span>
+                    </li>
+                    <DiscountSummary
+                        classes={{
+                            lineItems: classes.lineItems,
+                            lineItemLabel: classes.lineItemLabel,
+                            price: priceClass
+                        }}
+                        data={discounts}
                     />
-                </span>
-                <span
-                    data-cy="PriceSummary-subtotalValue"
-                    className={priceClass}
-                >
-                    <Price
-                        value={subtotal.value}
-                        currencyCode={subtotal.currency}
-                    />
-                </span>
-                <DiscountSummary
-                    classes={{
-                        lineItemLabel: classes.lineItemLabel,
-                        price: priceClass
-                    }}
-                    data={discounts}
-                />
-                <GiftCardSummary
-                    classes={{
-                        lineItemLabel: classes.lineItemLabel,
-                        price: priceClass
-                    }}
-                    data={giftCards}
-                />
-                <TaxSummary
-                    classes={{
-                        lineItemLabel: classes.lineItemLabel,
-                        price: priceClass
-                    }}
-                    data={taxes}
-                    isCheckout={isCheckout}
-                />
-                <ShippingSummary
-                    classes={{
-                        lineItemLabel: classes.lineItemLabel,
-                        price: priceClass
-                    }}
-                    data={shipping}
-                    isCheckout={isCheckout}
-                />
-                <span className={classes.totalLabel}>{totalPriceLabel}</span>
-                <span
-                    data-cy="PriceSummary-totalValue"
-                    className={totalPriceClass}
-                >
-                    <Price value={total.value} currencyCode={total.currency} />
-                </span>
+                    <li className={classes.lineItems}>
+                        <GiftCardSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={giftCards}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <GiftOptionsSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={giftOptions}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <TaxSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={taxes}
+                            isCheckout={isCheckout}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <ShippingSummary
+                            classes={{
+                                lineItemLabel: classes.lineItemLabel,
+                                price: priceClass
+                            }}
+                            data={shipping}
+                            isCheckout={isCheckout}
+                        />
+                    </li>
+                    <li className={classes.lineItems}>
+                        <span
+                            data-cy="PriceSummary-totalLabel"
+                            className={classes.totalLabel}
+                        >
+                            {totalPriceLabel}
+                        </span>
+                        <span
+                            data-cy="PriceSummary-totalValue"
+                            className={totalPriceClass}
+                        >
+                            <Price
+                                value={total.value}
+                                currencyCode={total.currency}
+                            />
+                        </span>
+                    </li>
+                </ul>
             </div>
             {proceedToCheckoutButton}
         </div>

package/lib/components/CartPage/PriceSummary/priceSummary.module.css

@@ -14,10 +14,12 @@
 }
 
 .lineItemLabel {
+    composes: my-2 from global;
     justify-self: start;
 }
 
 .price {
+    composes: self-center from global;
     justify-self: end;
 }
 

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

@@ -57,6 +57,63 @@ exports[`renders product details with base price and in stock 1`] = `
 </div>
 `;
 
+exports[`renders product details with configured variant image 1`] = `
+<div
+  className="root"
+>
+  <Image
+    alt="Configurable Product"
+    classes={
+      Object {
+        "image": "image",
+        "root": "imageContainer",
+      }
+    }
+    resource="https://test.cdn/image_variant.jpg"
+    width={240}
+  />
+  <span
+    className="productName"
+  >
+    Configurable Product
+  </span>
+  <div
+    className="stockRow"
+  >
+    <span>
+      <mock-FormattedMessage
+        defaultMessage="SKU # {sku}"
+        id="productDetail.skuNumber"
+        values={
+          Object {
+            "sku": "SP-01",
+          }
+        }
+      />
+    </span>
+    <span>
+      In stock
+    </span>
+  </div>
+  <div
+    className="price"
+  >
+    <span>
+      $
+    </span>
+    <span>
+      123
+    </span>
+    <span>
+      .
+    </span>
+    <span>
+      45
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders product details with unknown stock value 1`] = `
 <div
   className="root"

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

@@ -90,6 +90,11 @@ exports[`renders form errors 1`] = `
                     className="image placeholder"
                     loading="eager"
                     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                    style={
+                      Object {
+                        "--width": "240px",
+                      }
+                    }
                     width={240}
                   />
                   <img
@@ -109,6 +114,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+                    style={
+                      Object {
+                        "--height": "300px",
+                        "--width": "240px",
+                      }
+                    }
                     width={240}
                   />
                 </div>
@@ -436,6 +447,11 @@ exports[`renders form with data 1`] = `
                     className="image placeholder"
                     loading="eager"
                     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+                    style={
+                      Object {
+                        "--width": "240px",
+                      }
+                    }
                     width={240}
                   />
                   <img
@@ -455,6 +471,12 @@ https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/produc
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
 https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
+                    style={
+                      Object {
+                        "--height": "300px",
+                        "--width": "240px",
+                      }
+                    }
                     width={240}
                   />
                 </div>

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

@@ -2,9 +2,11 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 
 import ProductDetail from '../productDetail';
+import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
 
 jest.mock('../../../../../classify');
 jest.mock('../../../../Image', () => 'Image');
+jest.mock('@magento/peregrine/lib/util/configuredVariant');
 
 const mockProduct = {
     name: 'Simple Product',
@@ -23,6 +25,8 @@ const mockItem = {
     }
 };
 
+const configurableThumbnailSource = 'parent';
+
 describe('renders product details', () => {
     test('with base price and in stock', () => {
         const item = {
@@ -33,7 +37,12 @@ describe('renders product details', () => {
             }
         };
 
-        const tree = createTestInstance(<ProductDetail item={item} />);
+        const tree = createTestInstance(
+            <ProductDetail
+                item={item}
+                configurableThumbnailSource={configurableThumbnailSource}
+            />
+        );
         expect(tree.toJSON()).toMatchSnapshot();
     });
 
@@ -52,7 +61,32 @@ describe('renders product details', () => {
         };
 
         const tree = createTestInstance(
-            <ProductDetail item={item} variantPrice={variantPrice} />
+            <ProductDetail
+                item={item}
+                variantPrice={variantPrice}
+                configurableThumbnailSource={configurableThumbnailSource}
+            />
+        );
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    test('with configured variant image', () => {
+        configuredVariant.mockReturnValueOnce({
+            small_image: {
+                url: 'https://test.cdn/image_variant.jpg'
+            }
+        });
+        const item = {
+            ...mockItem,
+            product: {
+                ...mockProduct,
+                name: 'Configurable Product',
+                stock_status: 'IN_STOCK'
+            }
+        };
+
+        const tree = createTestInstance(
+            <ProductDetail item={item} configurableThumbnailSource={'itself'} />
         );
         expect(tree.toJSON()).toMatchSnapshot();
     });
@@ -67,6 +101,11 @@ test('renders product details with unknown stock value', () => {
         }
     };
 
-    const tree = createTestInstance(<ProductDetail item={item} />);
+    const tree = createTestInstance(
+        <ProductDetail
+            item={item}
+            configurableThumbnailSource={configurableThumbnailSource}
+        />
+    );
     expect(tree.toJSON()).toMatchSnapshot();
 });