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

Vue components for E-Com Plus Storefront

<div
  v-if="validPointsEntries.length"
  class="account-points"
>
  <div class="account-points__info">
    <h4>{{ i19loyaltyPoints }}</h4>
    <span>{{ i19available }}: <b>{{ totalPoints.toFixed(1) }}</b> / Cashback: <b>{{ formatMoney(totalCashback) }}</b></span>
  </div>

  <ul class="list-group">
    <li
      v-for="pointsEntry in validPointsEntries"
      class="list-group-item account-points__entry"
    >
      <div class="account-points__entry-title">
        <h5 class="mb-1">
          {{ pointsEntry.name }}
        </h5>
        <small v-if="pointsEntry.valid_thru">
          {{ i19upTo }}
          {{ formatDate(pointsEntry.valid_thru) }}
        </small>
      </div>

      {{ i19available }}:
      <b>{{ pointsEntry.active_points.toFixed(1) }}</b>
      <small
        v-if="pointsEntry.earned_points"
        class="text-muted"
      >
        / {{ `${pointsEntry.earned_points.toFixed(1)} ${i19pointsEarned}` }}
      </small>
      <div class="account-points__cashback">
        Cashback:
        <b>{{ formatMoney(pointsEntry.active_points * pointsEntry.ratio) }}</b>
      </div>
    </li>
  </ul>
</div>