yotpo redemption options

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

{% if customer %}
  <div 
      id="swell-customer-identification"
      data-authenticated="true"
      data-email="{{ customer.email }}"
      data-id="{{ customer.id }}"
      data-tags='{{ customer.tags | json }}'
      style="display:none;"
  ></div>
{% endif %}

<section id="redemptions" class="swell-redemption-list-container">
  <h4 class="swell-redemption-list-title">Redeem for Discount</h4>
  <span class="swell-redemption-desc">Redeeming your hard-earned points is easy!</span>
  <span class="swell-redemption-desc">Simply choose one of the redemption options below and paste the discount code at checkout.</span>
  <ul class="swell-redemption-list-holder swell-redemption-option-list cart-fixed-amount">
  </ul>
</section>

<style>
  ul.swell-redemption-list-holder.swell-redemption-option-list li {
    width: 20%;
}

.swell-redemption-list-holder {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

section.swell-redemption-list-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.swell-redemption-list-container ul {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 10rem;
    margin-bottom: 5rem;
}

.swell-redemption-list-title {
    width: 100%;
    font-size: 28px;
    text-align: center;
    color: white;
    margin-top: 2rem;

}

.swell-redemption-desc {
    width: 100%;
    text-align: center;
    margin: 0;
}

.swell-static-redemption-option {
    width: 15%;
    min-height: 7rem;
    border: 3px dashed #51c6e4;
    margin: 1rem;
}

.swell-static-redemption-option-title {
    width: 100%;
    margin: 0;
    font-size: 24px;
}

</style>

<script>
  $(document).on("swell:initialized", () => {
    swellAPI.getActiveRedemptionOptions().forEach(option => {
        if (option.discountType === "fixed_amount") {
            $(".swell-redemption-option-list").append(
                $("<div>").addClass("swell-static-redemption-option").append(
                    $("<h2>").addClass("swell-static-redemption-option-title").text(option.name),
                    $("<p>").addClass("swell-static-redemption-option-point-value").text(option.costText)
                ).addClass("swell-redemption-link").attr("data-redemption-option-id", option.id)
            )
        }
    })
});
</script>