[feature]: Cart Coupons

packages/peregrine/lib/talons/CartPage/PriceAdjustments/useCouponCode.js

@@ -0,0 +1,81 @@
+import { useCallback, useEffect } from 'react';
+import { useLazyQuery, useMutation } from '@apollo/react-hooks';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+export const useCouponCode = props => {
+    const {
+        applyCouponMutation,
+        getAppliedCouponsQuery,
+        removeCouponMutation
+    } = props;
+
+    const [{ cartId }] = useCartContext();
+    const [fetchAppliedCoupons, { data, error: fetchError }] = useLazyQuery(
+        getAppliedCouponsQuery,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const [
+        applyCoupon,
+        { error: applyError, loading: applyingCoupon }
+    ] = useMutation(applyCouponMutation);
+
+    const [removeCoupon, { loading: removingCoupon }] = useMutation(
+        removeCouponMutation
+    );
+
+    const handleApplyCoupon = useCallback(
+        async ({ couponCode }) => {
+            if (!couponCode) return;
+            try {
+                await applyCoupon({
+                    variables: {
+                        cartId,
+                        couponCode
+                    }
+                });
+            } catch (err) {
+                console.error(err);
+            }
+        },
+        [applyCoupon, cartId]
+    );
+
+    const handleRemoveCoupon = useCallback(
+        async couponCode => {
+            try {
+                await removeCoupon({
+                    variables: {
+                        cartId,
+                        couponCode
+                    }
+                });
+            } catch (err) {
+                console.error(err);
+            }
+        },
+        [cartId, removeCoupon]
+    );
+
+    useEffect(() => {
+        if (cartId) {
+            fetchAppliedCoupons({
+                variables: {
+                    cartId
+                }
+            });
+        }
+    }, [cartId, fetchAppliedCoupons]);
+
+    return {
+        applyError,
+        applyingCoupon,
+        data,
+        fetchError,
+        handleApplyCoupon,
+        handleRemoveCoupon,
+        removingCoupon
+    };
+};

packages/venia-ui/lib/components/Accordion/section.css

@@ -7,7 +7,7 @@
 }
 
 .contents_container {
-    padding: 1.5rem;
+    padding: 0 1.5rem 1.5rem;
 }
 .contents_container:empty {
     display: none;

packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap

@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disables remove button on click 1`] = `
+<div>
+  <span>
+    COUPON
+  </span>
+  <button
+    className="removeButton"
+    disabled={true}
+    onClick={[Function]}
+  >
+    Remove
+  </button>
+</div>
+`;
+
+exports[`disables submit button on coupon entry 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      disabled={true}
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders CouponCode input and submit button 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      disabled={false}
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders an error message if an error occurs on code entry 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+      An error occurred. Try again.
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders an error state if unable to fetch applied coupons 1`] = `"Something went wrong. Refresh and try again."`;
+
+exports[`renders nothing if no data is returned 1`] = `null`;
+
+exports[`renders the coupon code view if applied coupons has data 1`] = `
+<div>
+  <span>
+    COUPON
+  </span>
+  <button
+    className="removeButton"
+    disabled={false}
+    onClick={[Function]}
+  >
+    Remove
+  </button>
+</div>
+`;