CouponInput

Domain

Coupon code input with apply/remove flow. Calls onApply which returns success/error; shows applied state once a valid code is accepted.

Preview

Have a coupon?

Try: SAVE20

Code

<%- include('modules/domain/common/discount/CouponInput', {
  action: '/cart/coupon/apply'
}) %>

Preview

Have a coupon?

SAVE20 applied

Code

<%- include('modules/domain/common/discount/CouponInput', {
  appliedCode: 'SAVE20',
  removeAction: '/cart/coupon/remove'
}) %>

<%
  var _action       = locals.action       || '#';
  var _appliedCode  = locals.appliedCode  || null;
  var _removeAction = locals.removeAction || null;
  var _loading      = !!locals.loading;
  var _code         = locals.couponCode   || '';
%>
<% if (_appliedCode) { %>

  
    
      
    
    
      <%= _appliedCode %> applied
    
  
  <% if (_removeAction) { %>
  
    <%- include('../../../ui/Button', {
      type: 'submit',
      variant: 'ghost',
      size: 'xs',
      className: 'text-success-fg underline hover:no-underline shrink-0',
      children: 'Remove'
    }) %>
  
  <% } %>

<% } else { %>

  
    
      <%- include('../../../ui/Input', {
        id: 'coupon-code',
        label: '',
        name: 'couponCode',
        placeholder: 'Enter coupon code',
        value: _code
      }) %>
    
    <%- include('../../../ui/Button', {
      type: 'submit',
      variant: 'outline',
      loading: _loading,
      disabled: !_code,
      className: 'shrink-0 self-end mb-0.5',
      children: 'Apply'
    }) %>
  
  <% if (locals.couponError) { %>
  <%= locals.couponError %>
  <% } %>
  <% if (locals.couponSuccess) { %>
  <%= locals.couponSuccess %>
  <% } %>

<% } %>

CouponInput

Default

Applied state