All files / src/components/ProductThumbnail ProductThumbnail.jsx

100% Statements 14/14
93.75% Branches 15/16
100% Functions 1/1
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                    34x             34x 31x 2x 2x     31x 29x 29x             34x 3x 3x 2x       34x   34x                                                                      
import React, { useState } from 'react';
import Parser from 'html-react-parser';
import './ProductThumbnail.scss';
 
export default function ProductThumbnail({ product }) {
  const {
    name,
    id,
    price,
    priceRange,
  } = product;
 
  let regularHigh
  let regularLow
  let sellingHigh
  let sellingLow
 
  if (priceRange) {
    if (priceRange.regular) {
      regularHigh = priceRange.regular.high;
      regularLow = priceRange.regular.low;
    }
 
    if (priceRange.selling) {
      sellingHigh = priceRange.selling.high;
      sellingLow = priceRange.selling.low;
    }
  }
 
  let regularPrice
  let sellingPrice
 
  if (price) {
    regularPrice = price.regular
    if (price.selling) {
      sellingPrice = price.selling
    }
  }
 
  let image = product.thumbnail.href;
 
  return (
    <React.Fragment>
      <div className="cell thumbnail">
        <div className="product-card" >
          <div className="product-card-thumbnail">
            <a className="product-main-image" href={`/shop/${id}`}><img src={image} alt={name} /></a>
          </div>
          <h6 className="product-card-title">
            <a className="product-name" href={`/shop/${id}`}>{Parser(name)}</a>
          </h6>
          <div>
            {regularHigh ?
              <span className="product-card-old-price">
                Original Price: ${regularLow}-${regularHigh}
              </span>
              : regularPrice ?
                <span className="product-card-regular-price">
                  Original Price: ${regularPrice}
                </span> : ""
            }
          </div>
          <div>
            <span className="product-card-sale-price">
              Sale Price: ${sellingHigh
                ? `${sellingLow} - $${sellingHigh}`
                : sellingPrice
              }
            </span>
          </div>
        </div>
      </div>
    </React.Fragment >
  )
}