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                  9x             9x 7x 1x 1x     7x 6x 6x             9x 2x 2x 1x         9x                                                                      
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>
    )
}