render()

in client/src/components/product-item.js [153:320]

• 166 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const { AVOCANO_PURCHASE_MODE } = config.getConfig();
    const {
      count,
      testimonials,
      openDialog,
      openCartDialog,
      openSoldOutDialog,
    } = this.state;

    const {
      name,
      price,
      discount_price,
      discount_percent,
      image,
      description,
    } = this.productItem || {};

    return html`
      <div class="productItemContainer">
        <div class="productItemWrapper">
          <div class="productimageWrapper">
            <img
              class="productimage"
              alt="product logo"
              src=${image}
              loading="lazy"
              onerror=${`this.src='${noimage}';`}
            />
          </div>
          <div class="productItemContent">
            <h2 class="itemTitle">${name}</h2>
            ${discount_percent > 0
              ? html`<div class="price">
                  <div class="retailPrice">RRP $${price}</div>
                  <div class="discountPrice">Now $${discount_price}</div>
                  <div class="discountRate">Save ${discount_percent}%</div>
                </div>`
              : html`<div class="price">
                  <div class="discountPrice">$${discount_price}</div>
                </div>`}
            <div class="inventory">
              ${count > 0 ? `Only ${count} left!` : `Sold Out!`}
            </div>
            ${count > 0
              ? AVOCANO_PURCHASE_MODE === 'cart'
                ? html`<a
                    href="#"
                    class="cartButton"
                    label="Add to Cart"
                    @click="${this.addToCart}"
                    >Add to Cart</a
                  >`
                : html`<a
                    href="#"
                    class="buyButton"
                    label="Buy"
                    @click="${this.buyProduct}"
                    >Buy</a
                  >`
              : ''}
          </div>
        </div>
        <div class="productDescription">${description}</div>
        <div class="testimonialsWrapper">
          <div class="testimonialsHeader">
            <h3>Testimonials</h3>
          </div>
          <div class="testimonialsContent">
            ${testimonials?.length
              ? testimonials.map(
                  (item) => html`
                    <div class="testimonialsItem">
                      <div class="testimonialItemContent">
                        <div class="rating">
                          ${`★`.repeat(item.rating)}${`☆`.repeat(
                            5 - item.rating,
                          )}
                        </div>
                        <div class="reviewerDetails">
                          ${item.reviewer_name} from ${item.reviewer_location}
                        </div>
                        <div class="reviewSummary">${item.summary}</div>
                        <div class="reviewDescription">${item.description}</div>
                      </div>
                    </div>
                  `,
                )
              : html`<p>No testimonials ... yet</p>`}
          </div>
        </div>
        ${openCartDialog
          ? html`
              <mwc-dialog open>
                <div class="dialogWrapper">
                  <div>
                    <h2>Wonderful news!</h2>
                    <div>"${name}" has been added to your cart.</div>
                    <img
                      class="productimage"
                      alt="product logo"
                      src=${image}
                      style="height: 210px; width: auto;"
                      loading="lazy"
                      onerror=${`this.src='${noimage}';`}
                    />
                  </div>
                </div>
                <mwc-button
                  label="Close"
                  slot="primaryAction"
                  @click="${this.hideCartDialog}"
                ></mwc-button>
              </mwc-dialog>
            `
          : ''}
        ${openDialog
          ? html`
              <mwc-dialog open>
                <div class="dialogWrapper">
                  <img class="oopsAvocado" src=${oopsAvocado} />
                  <div>
                    <h2>Oops!</h2>
                    <div>Sorry! This is not a real product.</div>
                    <div>
                      <br />
                      There isn't such thing as a ${name}, at least in this
                      storefront. But thank you for your interest in this
                      product!
                    </div>
                  </div>
                </div>
                <mwc-button
                  label="Oh no! 😭"
                  slot="primaryAction"
                  @click="${this.toggleDialog}"
                ></mwc-button>
              </mwc-dialog>
            `
          : ''}
        ${openSoldOutDialog
          ? html`
              <mwc-dialog open>
                <div class="dialogWrapper">
                  <div>
                    <h2>Sold out!</h2>
                    <div>This is product is no longer available.</div>
                    <div>
                      Lucas ipsum dolor sit amet solo sidious hutt jade wampa
                      darth leia yavin vader tatooine. Jawa yoda amidala wedge
                      chewbacca. Qui-gon jinn qui-gon hutt yavin mon solo anakin
                      hutt. Darth darth organa luke. Leia c-3po calamari lando
                      boba palpatine mandalore boba.
                    </div>
                  </div>
                </div>
                <mwc-button
                  label="Close"
                  slot="primaryAction"
                  @click="${this.toggleSoldOutDialog}"
                ></mwc-button>
              </mwc-dialog>
            `
          : ''}
      </div>
    `;
  }