Merge pull request vercel#31 from chec/feature/discounts

[CHEC-577] - Feature/discounts
persi123 · May 8, 2020 · cf06e62 · cf06e62
2 parents 73e60d8 + 65aaba1
commit cf06e62
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/pages/checkout/index.js b/pages/checkout/index.js
@@ -21,6 +21,7 @@ import {
   generateCheckoutTokenFromCart as dispatchGenerateCheckout,
   getShippingOptionsForCheckout as dispatchGetShippingOptions,
   setShippingOptionInCheckout as dispatchSetShippingOptionsInCheckout,
+  setDiscountCodeInCheckout as dispatchSetDiscountCodeInCheckout,
   captureOrder as dispatchCaptureOrder,
 } from '../../store/actions/checkoutActions';
 
@@ -65,6 +66,8 @@ class CheckoutPage extends Component {
         'shipping[postal_zip_code]': null
       },
 
+      discountCode: 'CUSTOMCOMMERCE',
+
       selectedGateway: 'test_gateway',
     }
   }
@@ -132,6 +135,7 @@ class CheckoutPage extends Component {
       })
   }
 
+
   redirectOutOfCheckout = () => {
     console.log('redirecting out of checkout');
     this.props.router.push('/');
@@ -143,6 +147,26 @@ class CheckoutPage extends Component {
     })
   }
 
+  handleDiscountChange = e => {
+    e.preventDefault();
+    if (!this.state.discountCode.trim() || !this.props.checkout) {
+      return;
+    }
+
+    this.props.dispatchSetDiscountCodeInCheckout(this.props.checkout.id, this.state.discountCode)
+      .then(resp => {
+        if (resp.valid) {
+          return this.setState({
+            discountCode: '',
+          });
+        }
+        return Promise.reject(resp);
+      })
+      .catch(error => {
+        alert('Sorry, the discount code could not be applied');
+      });
+  }
+
   handleFormChanges = (e) => {
     // when input cardNumber changes format using ccFormat helper
     if (e.target.name === "cardNumber") {
@@ -180,6 +204,7 @@ class CheckoutPage extends Component {
     // construct order object
     const newOrder = {
       line_items,
+      discount_code: this.state.discountCode,
       customer: {
         firstname: this.state.firstName,
         lastname: this.state.lastName,
@@ -419,12 +444,16 @@ class CheckoutPage extends Component {
                 </div>
                 <form className="d-flex py-3 borderbottom border-color-gray400">
                   <input
+                    name="discountCode"
+                    onChange={this.handleFormChanges}
+                    value={this.state.discountCode}
                     placeholder="Gift card or discount code"
                     className="mr-2 flex-grow-1"
                   />
                   <button
                     className="font-color-white border-none font-weight-medium px-4"
-                    disabled
+                    disable={!this.props.checkout}
+                    onClick={this.handleDiscountChange}
                   >
                     Apply
                   </button>
@@ -442,6 +471,10 @@ class CheckoutPage extends Component {
                     {
                       name: "Shipping",
                       amount: selectedShippingOption ? `${selectedShippingOption.description} - ${selectedShippingOption.price.formatted_with_symbol}` : 'No shipping method selected',
+                    },
+                    {
+                      name: "Discount",
+                      amount: (checkout.live && checkout.live.discount && checkout.live.discount.code) ? `Saved ${checkout.live.discount.amount_saved.formatted_with_symbol}` : 'No discount code applied',
                     }
                   ].map((item, i) => (
                     <div key={i} className="d-flex justify-content-between align-items-center mb-2">
@@ -475,11 +508,13 @@ CheckoutPage.propTypes = {
   shippingOptions: PropTypes.array,
   dispatchGenerateCheckout: PropTypes.func,
   dispatchGetShippingOptions: PropTypes.func,
+  dispatchSetDiscountCodeInCheckout: PropTypes.func,
 }
 
 export default withRouter(connect(({ checkout: { checkoutTokenObject, shippingOptions }, cart }) => ({ checkout: checkoutTokenObject, shippingOptions, cart }), {
   dispatchGenerateCheckout,
   dispatchGetShippingOptions,
   dispatchSetShippingOptionsInCheckout,
+  dispatchSetDiscountCodeInCheckout,
   dispatchCaptureOrder,
 })(CheckoutPage));
diff --git a/store/actions/checkoutActions.js b/store/actions/checkoutActions.js
@@ -69,6 +69,22 @@ export const setShippingOptionInCheckout = (checkoutId, shippingOptionId, countr
   })
 }
 
+// Validates a discount code for the provided checkout token and applies it to the checkout.
+export const setDiscountCodeInCheckout = (checkoutId, code) => (dispatch) => {
+  return commerce.checkout.checkDiscount(checkoutId, { code })
+    .then(resp => {
+      dispatch({
+        type: UPDATE_CHECKOUT_LIVE_OBJECT,
+        payload: resp.live,
+      });
+      return resp;
+    })
+    .catch(error => {
+      console.log('error while attempting to update live object with discount code');
+      throw error;
+    })
+}
+
 // Captures an order and payment by providing the checkout id and order data derived from checkout
 export const captureOrder = (checkoutId, order) => (dispatch) => {
   return commerce.checkout.capture(checkoutId, order)