All files / src/components/ProductDetails ProductDetails.jsx

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

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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100                            9x             9x 7x 1x 1x     7x 6x 6x             9x 2x 2x 1x         9x                                                                                                              
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable max-len */
/* eslint-disable no-nested-ternary */
/* eslint-disable react/jsx-indent */
/* eslint-disable react/prop-types */
import React from 'react';
import Parser from 'html-react-parser';
 
export default function ProductDetails({ product }) {
  const {
    name,
    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;
    }
  }
 
 
  return (
    <div className="medium-6 large-5 columns">
          <h3 className="product-title">{Parser(name)}</h3>
          <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>
          <p>
               Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque
              faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in.
          </p>
          <label>
Quantity
<select>
         <option value="husker">1</option>
         <option value="starbuck">2</option>
         <option value="hotdog">3</option>
         <option value="apollo">4</option>
         <option value="apollo">5</option>
         <option value="apollo">6</option>
</select>
          </label>
          <a href="#" className="button large expanded">Buy Now</a>
          <div className="small secondary expanded button-group">
              <a className="button">Facebook</a>
              <a className="button">Twitter</a>
              <a className="button">Instagram</a>
          </div>
    </div>
  );
}