Adding Customer Gift Cards Widget on Legacy Customer Accounts page

If you're still using Shopify's legacy customer accounts, you can use the following widget to show customer gift cards on the customer profile page:

{% comment %}
=========  CHECKY - CUSTOMER GIFT CARDS =========
{% endcomment %}
     
<style>
  .checky-widget-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0px;
    background: #fff;
    clear: both;
    
  }
  .checky-widget-container {
    max-width: 600px;
    width: 100%;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 0px;
  }
  .checky-widget-title {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align:center;
  }
  .checky-widget-loading{
    text-align:center;
  }
  .checky-widget-results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .checky-widget-no-gc {
    display: none;
    font-size: 18px;
    color: #6b7280;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
  }
  .checky-widget-gc-data {
    display: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
  }
  .checky-gc-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
  .checky-gc-row-label {
    color: #6b7280;
    width: 250px;
    text-align: right;
  }
  .checky-gc-row-value {
    font-weight: bold;
    width: 250px;
  }
</style>
<div class="checky-widget-wrapper">
  <div class="checky-widget-container">
    <div class="checky-widget-title">Your Gift Cards</div>

    <div class="checky-widget-results-container">
      <div class="checky-widget-no-gc">You don't have any gift cards</div>
      <div class="checky-widget-gc-data"></div>
    </div>
  </div>
</div>
<script>
  const CheckyWidget = {
    apiURL: "https://checky-api.punchy.dev/customer/gift_cards",

    fetchAndRenderGiftCards: async function () {
  try {

    // Create and show loading indicator
    const elLoading = document.createElement("div");
    elLoading.className = "checky-widget-loading";
    elLoading.textContent = "Loading...";
    const elTitle = document.querySelector(".checky-widget-title");
    elTitle.insertAdjacentElement("afterend", elLoading);
    elLoading.style.display = "block";
   
    const requestData = {
      customer_id: {{ customer.id }},
      shop: Shopify.shop,
    };

    const response = await fetch(this.apiURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestData),
    });

    const content = await response.json();
    const giftCards = content?.giftCards || [];
   

    const elResults = document.querySelector(".checky-widget-gc-data");
    const elNotFound = document.querySelector(".checky-widget-no-gc");

    if (giftCards.length > 0) {
      elResults.innerHTML = ""; // Clear previous content
        giftCards.forEach((giftCard) => {
            const cardRow = document.createElement("div");
            cardRow.className = "checky-gc-row";

            const isExpired =
              giftCard.expiresOn && new Date(giftCard.expiresOn) < new Date();

            const badgeStyle = (tone) =>
              `display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: #fff; background-color: ${
                tone === "critical" ? "#e3342f" : "#6c757d"
              }; margin-left: 8px;`;

            cardRow.innerHTML = `
              <div class='checky-gc-row-label'>
                <span>${giftCard.maskedCode}</span>
                ${
                  giftCard.expiresOn
                    ? `<span style="${badgeStyle(
                        isExpired ? "critical" : "subdued"
                      )}">
                        ${isExpired ? "Expired" : "Expires"}: ${
                        giftCard.expiresOn
                      }
                      </span>`
                    : ""
                }
                ${
                  !giftCard.enabled
                    ? `<span style="${badgeStyle("critical")}">Disabled</span>`
                    : ""
                }
              </div>
              <div class='checky-gc-row-value'>${giftCard.balance}</div>
            `;
            elResults.appendChild(cardRow);
          });
      elNotFound.style.display = "none";
      elResults.style.display = "flex";
    } else {
      elResults.style.display = "none";
      elNotFound.style.display = "block";
    }
      // Hide loading indicator after rendering data
      elLoading.style.display = "none";
  } catch (error) {
    console.error("Error fetching gift cards:", error);
  }
},

    init: async function () {
      await this.fetchAndRenderGiftCards();
    },
  };

  document.addEventListener("DOMContentLoaded", () => {
    CheckyWidget.init();
  });
</script>

{% comment %}
========= END CHECKY - CUSTOMER GIFT CARDS =========
{% endcomment %}