Pwa 2172: Validate Shopping Cart Promotions are displayed correctly

packages/extensions/venia-sample-language-packs/i18n/fr_FR.json

@@ -284,6 +284,8 @@
     "priceAdjustments.giftOptions": "Voir les options de cadeaux",
     "priceAdjustments.shippingMethod": "Estimez votre expédition",
     "priceSummary.checkoutButton": "Passer à la caisse",
+    "priceSummary.discountSummary.hideDiscounts": "Cacher les rabais individuels.",
+    "priceSummary.discountSummary.showDiscounts": "Afficher les rabais individuels.",
     "priceSummary.errorText": "Un problème est survenu. Veuillez actualiser et réessayer.",
     "priceSummary.estimatedTotal": "Total estimé",
     "priceSummary.lineItemLabel": "Sous-total",

packages/peregrine/lib/talons/CartPage/PriceSummary/__tests__/useDiscountSummary.spec.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import { useDiscountSummary } from '../useDiscountSummary';
+import { act } from 'react-test-renderer';
+
+const Component = props => {
+    const talonProps = useDiscountSummary(props);
+
+    return <i {...talonProps} />;
+};
+
+const mockDiscountData = [
+    {
+        amount: {
+            currency: 'USD',
+            value: 10
+        }
+    },
+    {
+        amount: {
+            currency: 'USD',
+            value: 20
+        }
+    },
+    {
+        amount: {
+            currency: 'USD',
+            value: 30
+        }
+    }
+];
+
+it('returns the proper shape', () => {
+    const props = {
+        data: mockDiscountData
+    };
+
+    const rendered = createTestInstance(<Component {...props} />);
+
+    const talonProps = rendered.root.findByType('i').props;
+
+    expect(talonProps).toMatchInlineSnapshot(`
+        Object {
+          "discountData": Array [
+            Object {
+              "amount": Object {
+                "currency": "USD",
+                "value": 10,
+              },
+            },
+            Object {
+              "amount": Object {
+                "currency": "USD",
+                "value": 20,
+              },
+            },
+            Object {
+              "amount": Object {
+                "currency": "USD",
+                "value": 30,
+              },
+            },
+          ],
+          "expanded": false,
+          "handleClick": [Function],
+          "totalDiscount": Object {
+            "currency": "USD",
+            "value": 60,
+          },
+        }
+    `);
+});
+
+it('toggles the expanded state when handleClick() is called', () => {
+    const props = {
+        data: mockDiscountData
+    };
+
+    const rendered = createTestInstance(<Component {...props} />);
+
+    let talonProps = rendered.root.findByType('i').props;
+
+    act(() => {
+        talonProps.handleClick();
+    });
+
+    talonProps = rendered.root.findByType('i').props;
+
+    expect(talonProps.expanded).toBeTruthy();
+
+    act(() => {
+        talonProps.handleClick();
+    });
+    talonProps = rendered.root.findByType('i').props;
+
+    expect(talonProps.expanded).toBeFalsy();
+});
+
+describe('returns a default amount when', () => {
+    test('there is no discount data', () => {
+        const props = {};
+
+        const rendered = createTestInstance(<Component {...props} />);
+
+        const talonProps = rendered.root.findByType('i').props;
+
+        expect(talonProps).toMatchInlineSnapshot(`
+            Object {
+              "discountData": undefined,
+              "expanded": false,
+              "handleClick": [Function],
+              "totalDiscount": Object {
+                "currency": "USD",
+                "value": 0,
+              },
+            }
+        `);
+    });
+
+    test('discount data is an empty array', () => {
+        const props = {
+            data: []
+        };
+
+        const rendered = createTestInstance(<Component {...props} />);
+
+        const talonProps = rendered.root.findByType('i').props;
+
+        expect(talonProps).toMatchInlineSnapshot(`
+            Object {
+              "discountData": Array [],
+              "expanded": false,
+              "handleClick": [Function],
+              "totalDiscount": Object {
+                "currency": "USD",
+                "value": 0,
+              },
+            }
+        `);
+    });
+});

packages/peregrine/lib/talons/CartPage/PriceSummary/useDiscountSummary.js

@@ -0,0 +1,71 @@
+import { useCallback, useState } from 'react';
+
+const DEFAULT_AMOUNT = {
+    currency: 'USD',
+    value: 0
+};
+
+/**
+ * Reduces discounts array into a single amount.
+ *
+ * @param {Array} discounts
+ */
+const getTotalDiscount = (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
+            )
+        };
+    }
+};
+
+/**
+ * This talon contains the logic for the discount summary component.
+ *
+ * @param {Object} props
+ * @param {Array} props.data Discount data
+ * @returns {DiscountSummaryProps}
+ */
+export const useDiscountSummary = props => {
+    const { data: discountData } = props;
+
+    const totalDiscount = getTotalDiscount(discountData);
+
+    const [expanded, setExpanded] = useState(false);
+
+    const handleClick = useCallback(() => {
+        setExpanded(value => !value);
+    }, [setExpanded]);
+
+    return {
+        totalDiscount,
+        discountData,
+        expanded,
+        handleClick
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * @typedef {Object} DiscountSummaryProps
+ *
+ * @property {DiscountObject} discount Object containing discount information
+ * @property {Array} discountData Array of discounts
+ * @property {Boolean} expanded
+ * @property {Function} handleClick Click handler for toggling the expanded state
+ *
+ */
+
+/**
+ * @typedef {Object} DiscountObject
+ *
+ * @property {String} currency Currency code
+ * @property {Number} value Discount amount
+ */

packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -87,7 +87,7 @@ export const usePriceSummary = (props = {}) => {
  *
  * @property {String} subtotal Cart subtotal (excluding tax)
  * @property {String} total Cart grand total
- * @property {Array<Object>} discounts Discounts applied to the cart
+ * @property {Array<Object>} discounts Applied discounts to the cart
  * @property {Array<Object>} giftCards Gift cards applied to the cart
  * @property {Array<Object>} giftOptions Gift Options applied to the cart
  * @property {Array<Object>} taxes Taxes applied to the cart

packages/peregrine/lib/targets/__tests__/peregrine-targets.spec.js

@@ -109,6 +109,7 @@ test('exposes all hooks and targets', async () => {
           talons.CartPage.PriceAdjustments.ShippingMethods.useShippingMethods.wrapWith() wraps export "useShippingMethods" from "CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js"
           talons.CartPage.PriceAdjustments.ShippingMethods.useShippingRadios.wrapWith() wraps export "useShippingRadios" from "CartPage/PriceAdjustments/ShippingMethods/useShippingRadios.js"
           talons.CartPage.PriceAdjustments.useGiftOptionsSection.wrapWith() wraps export "useGiftOptionsSection" from "CartPage/PriceAdjustments/useGiftOptionsSection.js"
+          talons.CartPage.PriceSummary.useDiscountSummary.wrapWith() wraps export "useDiscountSummary" from "CartPage/PriceSummary/useDiscountSummary.js"
           talons.CartPage.PriceSummary.usePriceSummary.wrapWith() wraps export "usePriceSummary" from "CartPage/PriceSummary/usePriceSummary.js"
           talons.CartPage.ProductListing.EditModal.useEditModal.wrapWith() wraps export "useEditModal" from "CartPage/ProductListing/EditModal/useEditModal.js"
           talons.CartPage.ProductListing.EditModal.useProductForm.wrapWith() wraps export "useProductForm" from "CartPage/ProductListing/EditModal/useProductForm.js"

packages/venia-ui/i18n/en_US.json

@@ -160,7 +160,7 @@
     "customerForm.defaultShipping": "Make this my default address",
     "customerForm.formMessage": "The shipping address you enter will be saved to your address book and set as your default for future purchases.",
     "customerForm.loading": "Fetching Customer Details...",
-    "discountSummary.lineItemLabel": "Discounts applied",
+    "discountSummary.lineItemLabel": "Applied discounts",
     "editModal.headerText": "Edit Item",
     "Email Signup": "Email Signup",
     "errorView.header": "Oops!",
@@ -329,6 +329,8 @@
     "priceAdjustments.giftOptions": "See Gift Options",
     "priceAdjustments.shippingMethod": "Estimate your Shipping",
     "priceSummary.checkoutButton": "Proceed to Checkout",
+    "priceSummary.discountSummary.hideDiscounts": "Hide individual discounts.",
+    "priceSummary.discountSummary.showDiscounts": "Show individual discounts.",
     "priceSummary.errorText": "Something went wrong. Please refresh and try again.",
     "priceSummary.estimatedTotal": "Estimated Total",
     "priceSummary.lineItemLabel": "Subtotal",