renderTier()

in public/js/account.js [257:323]
55 lines of code
5 McCabe index (conditional complexity)

  renderTier(title, description, price, tier, showUrl, coverUrl, coverAlt) {
    const isSubscribed = this.model.isSubscribedTo(tier);

    const container = document.createElement("div");
    container.classList.add("subscription-tier");
    if (isSubscribed) {
      container.classList.add("subscribed");
    }

    const showInfo = document.createElement("div");
    showInfo.classList.add("show-info");
    container.appendChild(showInfo);

    const subscribedIndicator = document.createElement("div");
    subscribedIndicator.classList.add("subscribed-indicator");
    subscribedIndicator.textContent = "Subscribed";
    if (isSubscribed) {
      subscribedIndicator.classList.add("show");
    }
    showInfo.appendChild(subscribedIndicator);

    const tierTitle = document.createElement("h3");
    tierTitle.textContent = title;
    showInfo.appendChild(tierTitle);

    const tierDescription = document.createElement("p");
    tierDescription.textContent = description;
    tierDescription.classList.add("subscription-description");
    showInfo.appendChild(tierDescription);

    const tierPrice = document.createElement("p");
    let tierPriceTextContent = `\$${price} per month.`;
    if (isSubscribed) {
      const now = new Date();
      // prettier-ignore
      const monthToPresentation = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      const renewalDateString = ` Renews ${now.getDate()} ${
        monthToPresentation[now.getMonth()]
      } ${now.getFullYear() + 1}.`;
      tierPriceTextContent += renewalDateString;
    }
    tierPrice.textContent = tierPriceTextContent;
    tierPrice.classList.add("subscription-price");
    showInfo.appendChild(tierPrice);

    const tierCtaButton = document.createElement("button");
    tierCtaButton.textContent = isSubscribed ? "Unsubscribe" : "Subscribe";
    tierCtaButton.classList.add("subscription-button");
    tierCtaButton.addEventListener("click", () => this.onTierCtaClicked(tier));
    showInfo.appendChild(tierCtaButton);

    const showCover = document.createElement("div");
    showCover.classList.add("show-cover");
    container.appendChild(showCover);

    const showLink = document.createElement("a");
    showLink.href = showUrl;
    showLink.target = "_blank";
    showCover.appendChild(showLink);

    const showCoverImage = document.createElement("img");
    showCoverImage.src = coverUrl;
    showCoverImage.alt = coverAlt;
    showLink.appendChild(showCoverImage);

    return container;
  }