@fortawesome/free-solid-svg-icons#faCheckCircle JavaScript Examples

AlertPanel = ({ type = AlertType.Info, title, message, noIcon = false, children }) => {
    let icon;
    /**
     * @type {AlertType}
     */
    let alertType;

    switch (type) {
        case AlertType.Warning:
            icon = faExclamationTriangle;
            alertType = 'warning';
            break;
        case AlertType.Danger:
            icon = faExclamationCircle;
            alertType = 'danger';
            break;
        case AlertType.Info:
            icon = faInfoCircle;
            alertType = 'info';
            break;
        case AlertType.Success:
            icon = faCheckCircle;
            alertType = 'success';
            break;
    }

    return (
        <Alert variant={alertType}>
            {title && <Alert.Heading>{title}</Alert.Heading>}
            {!noIcon && <FontAwesomeIcon icon={icon} />}
            {message && <span id='alert-message'>&nbsp;{getMessageWithLinks(message)}</span>}
            {children && <span>&nbsp;{children}</span>}
        </Alert>
    );
}

Confirmed = props => (
  <div className="container loading">
    <div className="row">
      <div className="col-md-12 text-center pt-4">
        <FontAwesomeIcon size="2x" color="green" icon={faCheckCircle} />
        {props.txId ? (
          <>
            <Row className="justify-content-center">
              <a
                href={`https://etherscan.io/tx/${props.txId}`}
                rel="noopener noreferrer"
                target="_blank"
              >
                View Transaction on Etherscan
              </a>
            </Row>
            <Row className="justify-content-center">
              <a
                href="https://twitter.com/intent/tweet?text=I%20just%20got%20instant%20access%20to&hashtags=defi&via=DeFi_Zap"
                target="_blank"
                rel="noopener noreferrer"
              >
                Tweet it out{' '}
                <FontAwesomeIcon size="lg" color="#1DA1F2" icon={faTwitter} />
              </a>
            </Row>
          </>
        ) : null}
      </div>
    </div>
  </div>
)

render() {
    return(
      <section className="resume-section p-3 p-lg-5 d-flex align-items-center" id="skills">
        <div className="w-100">
          <h2 className="mb-5">Skills</h2>
          <div className="subheading mb-3">Programming Languages &amp; Tools</div>
          <div className="row">
          {
            this.skills.map((data, index) => (
              <div key={index} className="col-6">
                <p className="list-item">
                  <FontAwesomeIcon icon={faCheckCircle} color="green" />
                  <span className="ml-3">{data.name}</span>
                </p>
              </div>
            ))
          }
          </div>
        </div>
      </section>
    );
  }

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

function getAlertIcon(type) {
  if (type === 'error') {
    return faExclamationTriangle;
  }
  if (type === 'danger') {
    return faMinusCircle;
  }
  if (type === 'success') {
    return faCheckCircle;
  }
  return faInfoCircle;
}

ServerStatus = (props) => {
    const { connecting, connected, responseTime, serverType } = props;
    const { t } = useTranslation();

    let className = '';
    let toolTip = `${serverType} is`;
    let pingText;
    let icon = faCheckCircle;
    let splash = null;

    if (connected) {
        className += ' text-success';
        toolTip += ' connected';

        let pingClass;

        if (responseTime === undefined) {
            pingText = <span>{t('Waiting for ping')}</span>;
        } else {
            if (responseTime < 150) {
                pingClass = 'text-success';
            } else if (responseTime < 300) {
                pingClass = 'text-warning';
            } else {
                pingClass = 'text-danger';
            }

            pingText = (
                <React.Fragment>
                    <span>{serverType}: </span>
                    <span className={pingClass}>{responseTime}ms</span>
                </React.Fragment>
            );
        }
    } else if (connecting) {
        className += ' text-warning';
        icon = faTimesCircle;
        toolTip += ' connecting';
        pingText = (
            <React.Fragment>
                <span>{serverType}: </span>
                <span className='text-warning'>{t('Connecting')}</span>
            </React.Fragment>
        );
    } else {
        className += ' text-danger';
        icon = faBan;
        toolTip += ' disconnected';
        pingText = (
            <React.Fragment>
                <span>{serverType}: </span>
                <span className='text-danger'>{t('Disconnected')}</span>
            </React.Fragment>
        );
        splash = <div className='disconnect-splash panel'><span className='text-danger'>Disconnected!</span></div>
    }

    return (
        <li className='server-status'>
            {pingText}
            <span className={className}>
                <FontAwesomeIcon icon={icon} title={t(toolTip)} />
            </span>
            {splash}
        </li>
    );
}

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

export default function ProductDetails(props) {

  // const {action} =props;
  // let product_display_mode="action_view";

  //TODO 
   
  // switch(action){
 
  //   case "edit":
  //        product_display_mode="action_edit";
  //        break;
  //   default: 
  //        product_display_mode="action_view";

  // }

  
   
 

  const { addToast } = useToasts();
  const [prod_quantity,setProd_quantity]=useState(1)
  const [prod_selected_size,setProd_prod_selected_size]=useState("")
  
  let ProductDetails;
  let productDescription = [];
  let productSize = [];
  props.product.map((product) => (ProductDetails = product));
  productDescription = ProductDetails.product_details;
  productSize = ProductDetails.size;

  const productStockLevel = ProductDetails.product_stock;
  let bannerStockLevel = "";
  let stockLevelMessage = "";
 
  if (productStockLevel > 0 && productStockLevel < 100) {
    bannerStockLevel = "product-details-banner-stock-level-low";
    stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
  } else if (productStockLevel === 0) {
    bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
    stockLevelMessage = `Out of  stock`;
  }

    
  const {addItemTocart}= useContext(GlobalCartContext)
  
  function  handleAddToCart(data) {
    //alert(data.productname+" Added to cart");
    
    const newCartItem={
      productname: data.productname,
      id: data.id,
      price: data.price,
      discount: data.discount,
      color: data.color,
      size: data.size,
      selectedSize: prod_selected_size,
      product_status: data.product_status,
      product_stock: data.product_stock,
      product_selected_qty:prod_quantity,
      product_image: data.product_image,
      brand: data.brand,
  
      product_details: data.product_details,
      

    }
    addItemTocart(newCartItem);
    addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
   
    
   
  }
  
  function handleChange(event) {
    
    setProd_quantity(event.target.value)
    //console.log(event.target.value)
    
  }


function handleChangeSize(event) {
    
    setProd_prod_selected_size(event.target.value)
    //console.log(event.target.value)
    
  }

  
  

  const description = productDescription.map((desc) => (
    <h5  key={desc}>
      <FontAwesomeIcon
        icon={faCheckCircle}
        className="product-description-icons"
       
      ></FontAwesomeIcon>
      {desc}
    </h5>
  ));

  const product_size = productSize.map((size) => (
    <option value={size}  key={size}> {size}</option>

   
  ));

  return (
    <div className="container-product-details">
      <div className="row">
        <div className="col-lg-7">
          <img
            className="card-img-top"
            src={require("../assets/products/allproducts/" +
              ProductDetails.product_image)}
            alt={ProductDetails.product_image}
          />
          <div
            className={`${
              ProductDetails.product_status === "New"
                ? "product-details-banner-new"
                : "product-banner-trending"
            }`}
          >
            {ProductDetails.product_status}
          </div>
          <div className={bannerStockLevel}>{stockLevelMessage}</div>
        </div>
        <div className="col-lg-5">
          <h1>{ProductDetails.productname}</h1>

          {ProductDetails.discount > 0 ? (
            <h2>
              <span className="product-price-after-discount">
                {
                  new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "ZAR",
                  }).format(
                    ProductDetails.price -
                      (ProductDetails.price * ProductDetails.discount / 100)
                  )
                  // Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
                }
              </span>{" "}
              <span className="product-price-before-discount">
                {new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "ZAR",
                }).format(ProductDetails.price)}
              </span>{" "}
              <span className="product-discount-rate">
                -{ProductDetails.discount}%{" "}
              </span>
            </h2>
          ) : (
            <h2>
              {" "}
              <span className="product-price-whit-no-discount">
                
                {new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "ZAR",
                }).format(ProductDetails.price)}
              </span>
            </h2>
          )}
          {/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
          <h3>Brand: {ProductDetails.brand}</h3>

          <h3>Color: {ProductDetails.color}</h3>
          <h3>Size:</h3>
          <select
            className="form-control product-size-option"
            name="size-product"
            id="size-product"
            value={prod_selected_size} onChange={handleChangeSize}
         
          >
            {product_size}
          </select>
          {/* <div className="mb-4 mt-4">{product_size}</div> */}
          <h3>QTY:</h3>
          <select 
           className="form-control product-size-option"
           value={prod_quantity} onChange={handleChange}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          
          </select>

          <h3>Product Details:</h3>

          <div className="mb-4 mt-4">{description}</div>
          <div className="row product-details-services">
            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faPlaneDeparture}
                className="product-details-services-icons"
              />
              <h4>SHIPS WITHIN HOURS</h4>
            </div>
            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faRedoAlt}
                className="product-details-services-icons"
              />
              <h4>EASY RETRUNS</h4>
            </div>

            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faCommentDots}
                className="product-details-services-icons"
              />
              <h4>24/7 CUSTOMER SERVICE</h4>
            </div>
          </div>

          {/* {
            product_display_mode ==="action_edit" 
            ?
            <h2> Editing product </h2>
            : 
            <h2> Viewing product </h2>
          }
         */}
          {productStockLevel === 0 ? (
            <h2 className="out-of-stock-notice">
              <FontAwesomeIcon icon={faChartBar} /> Out of Stock
            </h2>
          ) : (

         
            <button className="product-btn-add-to-cart shadow-none "
            onClick={ () => handleAddToCart(ProductDetails)}
            >
              <FontAwesomeIcon
                icon={faCartPlus}
                className="product-btn-add-to-cart-icon"
              />
              Add to Cart
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export default function UpdateCartItem(props) {

 

  const { addToast } = useToasts();
  const [prod_quantity,setProd_quantity]=useState(1)
  const [prod_selected_size,setProd_prod_selected_size]=useState("")
  
  let ProductDetails;
  let productDescription = [];
  let productSize = [];
  props.product.map((product) => (ProductDetails = product));
  productDescription = ProductDetails.product_details;
  productSize = ProductDetails.size;

  const productStockLevel = ProductDetails.product_stock;
  let bannerStockLevel = "";
  let stockLevelMessage = "";
 
  if (productStockLevel > 0 && productStockLevel < 100) {
    bannerStockLevel = "product-details-banner-stock-level-low";
    stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
  } else if (productStockLevel === 0) {
    bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
    stockLevelMessage = `Out of  stock`;
  }

    
  const {addItemTocart}= useContext(GlobalCartContext)
  
  function  handleAddToCart(data) {
    //alert(data.productname+" Added to cart");
    
    const newCartItem={
      productname: data.productname,
      id: data.id,
      price: data.price,
      discount: data.discount,
      color: data.color,
      size: data.size,
      selectedSize: prod_selected_size,
      product_status: data.product_status,
      product_stock: data.product_stock,
      product_selected_qty:prod_quantity,
      product_image: data.product_image,
      brand: data.brand,
  
      product_details: data.product_details,
      

    }
    addItemTocart(newCartItem);
    addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
	
	

   
    
   
  }
  
  function handleChange(event) {
    
    setProd_quantity(event.target.value)
    //console.log(event.target.value)
    
  }


function handleChangeSize(event) {
    
    setProd_prod_selected_size(event.target.value)
    //console.log(event.target.value)
    
  }

  
  

  const description = productDescription.map((desc) => (
    <h5  key={desc}>
      <FontAwesomeIcon
        icon={faCheckCircle}
        className="product-description-icons"
       
      ></FontAwesomeIcon>
      {desc}
    </h5>
  ));

  const product_size = productSize.map((size) => (
    <option value={size}  key={size}> {size}</option>

   
  ));

  return (
    <div className="container-product-details">
      <div className="row">
        <div className="col-lg-7">
          <img
            className="card-img-top"
            src={require("../assets/products/allproducts/" +
              ProductDetails.product_image)}
            alt={ProductDetails.product_image}
          />
          <div
            className={`${
              ProductDetails.product_status === "New"
                ? "product-details-banner-new"
                : "product-banner-trending"
            }`}
          >
            {ProductDetails.product_status}
          </div>
          <div className={bannerStockLevel}>{stockLevelMessage}</div>
        </div>
        <div className="col-lg-5">
          <h1>{ProductDetails.productname}</h1>

          {ProductDetails.discount > 0 ? (
            <h2>
              <span className="product-price-after-discount">
                {
                  new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "ZAR",
                  }).format(
                    ProductDetails.price -
                      (ProductDetails.price * ProductDetails.discount / 100)
                  )
                  // Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
                }
              </span>{" "}
              <span className="product-price-before-discount">
                {new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "ZAR",
                }).format(ProductDetails.price)}
              </span>{" "}
              <span className="product-discount-rate">
                -{ProductDetails.discount}%{" "}
              </span>
            </h2>
          ) : (
            <h2>
              {" "}
              <span className="product-price-whit-no-discount">
                
                {new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "ZAR",
                }).format(ProductDetails.price)}
              </span>
            </h2>
          )}
          {/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
          <h3>Brand: {ProductDetails.brand}</h3>

          <h3>Color: {ProductDetails.color}</h3>
          <h3>Size:</h3>
          <select
            className="form-control product-size-option"
            name="size-product"
            id="size-product"
            value={prod_selected_size} onChange={handleChangeSize}
         
          >
            {product_size}
          </select>
          {/* <div className="mb-4 mt-4">{product_size}</div> */}
          <h3>QTY:</h3>
          <select 
           className="form-control product-size-option"
           value={prod_quantity} onChange={handleChange}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
          
          </select>

          <h3>Product Details:</h3>

          <div className="mb-4 mt-4">{description}</div>
          <div className="row product-details-services">
            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faPlaneDeparture}
                className="product-details-services-icons"
              />
              <h4>SHIPS WITHIN HOURS</h4>
            </div>
            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faRedoAlt}
                className="product-details-services-icons"
              />
              <h4>EASY RETRUNS</h4>
            </div>

            <div className="col-lg-4">
              <FontAwesomeIcon
                icon={faCommentDots}
                className="product-details-services-icons"
              />
              <h4>24/7 CUSTOMER SERVICE</h4>
            </div>
          </div>

          {productStockLevel === 0 ? (
            <h2 className="out-of-stock-notice">
              <FontAwesomeIcon icon={faChartBar} /> Out of Stock
            </h2>
          ) : (
            <button className="product-btn-add-to-cart shadow-none "
            onClick={ () => handleAddToCart(ProductDetails)}
            >
              <FontAwesomeIcon
                icon={faCartPlus}
                className="product-btn-add-to-cart-icon"
              />
              Update  Cart
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

Pods = ({ data }) => {
  // console.log('pods data', data);
  // console.log('props', props);
  // using hooks to set state
  const [table, setTable] = useState([]); //pod data in table
  let children = [];
  data[0].children.map(child => children.push(...child.children));
  // console.log('children', children);
  useEffect(() => {
    const podList = children.map((p, i) => {
      // check status - if "Running" then render green check circle
      if (p.status === 'Running') {
        return (
          <tbody key={`tbody${i}`}>
            <tr>
              <td>{p.name}</td>
              <td>{p.namespace}</td>
              <td>
                <FontAwesomeIcon icon={faCheckCircle} color='#00df00' />
                &nbsp;&nbsp;
                {p.status}
              </td>
              <td>{p.podIP}</td>
              <td>{p.createdAt}</td>
            </tr>
          </tbody>
        );
      } else {
        // if not "Running", invoke the addAlert func to add to database and render red circle
        addAlert(p);
        return (
          <tbody key={`tbody${i}`}>
            <tr>
              <td>{p.name}</td>
              <td>{p.namespace}</td>
              <td>
                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                &nbsp;&nbsp;
                {p.status}
              </td>
              <td>{p.podIP}</td>
              <td>{p.createdAt}</td>
            </tr>
          </tbody>
        );
      }
    });
    setTable(podList);
    // use Effect will trigger every time data is changed
  }, data);

  // function that adds a new Alert - gets called in ^useEffect when pod status is not "Running"
  const addAlert = async p => {
    const token = Cookies.get('token');
    const header = {
      headers: {
        Authorization: 'Bearer' + token,
      },
    };
    // console.log('header', header);
    const postAlert = await axios.post(
      '/api/alerts',
      {
        name: p.name,
        namespace: p.namespace,
        status: p.status,
        podIP: p.podIP,
        time: Date(Date.now()).toString(),
      },
      header
    );
  };

  return (
    <div className='podContainer'>
      <h4 className='podsTitle'>Pods List</h4>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>Pod Name</th>
            <th>Namespace</th>
            <th>Status</th>
            <th>Pod IP</th>
            <th>Created At</th>
          </tr>
        </thead>
        {table}
      </Table>
    </div>
  );
}