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) { %>
<div class="flex items-center justify-between gap-3 rounded-lg bg-success-subtle border border-success px-4 py-2.5<%= locals.className ? ' ' + locals.className : '' %>">
  <div class="flex items-center gap-2 min-w-0">
    <span class="w-3.5 h-3.5 inline-flex items-center justify-center text-success-fg shrink-0" aria-hidden="true">
      <i class="fa-solid fa-check" style="font-size:14px"></i>
    </span>
    <span class="text-sm font-medium text-success-fg truncate">
      <span class="font-mono"><%= _appliedCode %></span> applied
    </span>
  </div>
  <% if (_removeAction) { %>
  <form action="<%= _removeAction %>" method="post" class="shrink-0">
    <%- include('../../../ui/Button', {
      type: 'submit',
      variant: 'ghost',
      size: 'xs',
      className: 'text-success-fg underline hover:no-underline shrink-0',
      children: 'Remove'
    }) %>
  </form>
  <% } %>
</div>
<% } else { %>
<form action="<%= _action %>" method="post" class="space-y-1.5<%= locals.className ? ' ' + locals.className : '' %>">
  <div class="flex gap-2">
    <div class="flex-1">
      <%- include('../../../ui/Input', {
        id: 'coupon-code',
        label: '',
        name: 'couponCode',
        placeholder: 'Enter coupon code',
        value: _code
      }) %>
    </div>
    <%- include('../../../ui/Button', {
      type: 'submit',
      variant: 'outline',
      loading: _loading,
      disabled: !_code,
      className: 'shrink-0 self-end mb-0.5',
      children: 'Apply'
    }) %>
  </div>
  <% if (locals.couponError) { %>
  <p class="text-xs text-error"><%= locals.couponError %></p>
  <% } %>
  <% if (locals.couponSuccess) { %>
  <p class="text-xs text-success-fg"><%= locals.couponSuccess %></p>
  <% } %>
</form>
<% } %>

CouponInput

Default

Applied state