@ecomplus/storefront-components/src/html/PointsApplier.html

Vue components for E-Com Plus Storefront

<div class="points-applier">
  <div
    v-for="({ name }, programId) in localPointsPrograms"
    v-if="availablePoints[programId] >= 0.1"
    class="custom-control custom-switch"
  >
    <input
      type="checkbox"
      class="custom-control-input"
      :id="`points-applier-${programId}`"
      :checked="pointsApplied[programId]"
      @change="ev => togglePoints(programId, ev.target.checked)"
    >

    <label
      class="custom-control-label"
      :for="`points-applier-${programId}`"
    >
      <span class="badge badge-info">
        -{{ formatMoney(getPointsAmount(programId)) }}
      </span>
      {{ i19use$1LoyaltyPoints.replace('$1', availablePoints[programId].toFixed(1)) }}
      <em>{{ name }}</em>
    </label>
  </div>
</div>