cupón de descuento

_data/layouts/payment.yml

@@ -60,6 +60,18 @@ special_instructions_help:
   default:
     es: 'Horas específicas de entrega, etc.'
     en: 'Specific delivery hours, etc.'
+promo_code:
+  type: 'string'
+  required: true
+  label:
+    es: 'Código de descuento'
+    en: 'Coupon code'
+  help:
+    es: ''
+    en: ''
+  default:
+    es: '¿Tenés un cupón de descuento?'
+    en: ''
 permalink:
   type: 'permalink'
   required: true

_packs/controllers/cart_coupon_controller.js

@@ -0,0 +1,64 @@
+import { CartBaseController } from './cart_base_controller'
+
+/*
+ * Retrieves shipping methods
+ */
+export default class extends CartBaseController {
+  static targets = [ 'couponCodeInvalid', 'preDiscount', 'total' ]
+
+  connect () {
+    this.couponCode.addEventListener('input', event => {
+      this.couponCode.parentElement.classList.remove('was-validated')
+      this.couponCode.setCustomValidity('')
+    })
+  }
+
+  get couponCode () {
+    if (!this._couponCode) this._couponCode = this.element.elements.coupon_code
+
+    return this._couponCode
+  }
+
+  get couponCodeInvalid () {
+    return this.hasCouponCodeInvalidTarget ? this.couponCodeInvalidTarget : document.querySelector('#coupon-code-invalid')
+  }
+
+  get preDiscount () {
+    return this.hasPreDiscountTarget ? this.preDiscountTarget : document.querySelector('#pre-discount')
+  }
+
+  get total () {
+    return this.hasTotalTarget ? this.totalTarget : document.querySelector('#total')
+  }
+
+  set total (total) {
+    this.total.innerHTML = total
+  }
+
+  async apply (event = undefined) {
+    event?.preventDefault()
+    event?.stopPropagation()
+
+    const orderToken = this.token
+    const coupon_code = this.couponCode.value
+    const include = 'line_items'
+
+    const response = await window.spree.cart.applyCouponCode({ orderToken }, { coupon_code, include })
+
+    this.element.elements.forEach(x => x.disabled = true)
+
+    if (response.isFail()) {
+      this.couponCodeInvalid.innerHTML = response.fail().summary
+      this.couponCode.setCustomValidity(response.fail().summary)
+      this.couponCode.parentElement.classList.add('was-validated')
+
+      this.element.elements.forEach(x => x.disabled = false)
+
+      return
+    }
+
+    this.cart = response
+    this.total = response.success().data.attributes.total
+    this.preDiscount.classList.remove('d-none')
+  }
+}

assets/templates/payment_methods.html

@@ -1,3 +1,5 @@
+<form id="coupon" data-controller="cart-coupon" data-action="cart-coupon#apply"></form>
+
 <form
   data-action="cart-payment-methods#pay"
   data-target="cart-payment-methods.form">
@@ -31,6 +33,25 @@
     </div>
 
     <div class="order-first order-md-last">
+      <details class="w-100 mb-3">
+        <summary class="blue"><small>{{ site.i18n.cart.layouts.payment.promo_code }}</small></summary>
+
+        <div class="d-flex">
+          {% comment %}
+            Estos elementos pertenecen al formulario de cupones
+          {% endcomment %}
+          <div class="flex-grow-1 mr-2">
+            <label for="coupon_code" class="sr-only">{{ site.payment.promo_code }}</label>
+            <input form="coupon" type="text" id="coupon_code" name="coupon_code" required class="form-control" />
+            <div id="coupon-code-invalid" class="invalid-feedback"></div>
+          </div>
+
+          <div>
+            <input form="coupon" type="submit" value="Aplicar" class="btn btn-secondary" />
+          </div>
+        </div>
+      </details>
+
       <input type="submit"
         class="btn btn-primary btn-lg text-uppercase"
         data-target="cart-payment-methods.submit"