Feature: Modal popup on ADD

[Impressiv3]

Description

This PR is about adding a new feature to the ProductDetail Component So when you click on the ADD button the MODAL shows up

Fixes # (issue) https://github.com/HackYourFuture-CPH/fp-class19/issues/243

How to test?

On the ProductPage ( /product/:id ) click on the ADD button to see the MODAL show up

Checklist

• [ ] I have performed a self-review of my own code
• [ ] I have followed the name conventions for CSS Classnames and filenames, Components names and filenames, Style filenames, if you are in doubt check the the project README.MD and here https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md
• [ ] I have commented my code, particularly in hard-to-understand areas, if you code was simple enough mark the box anyway
• [ ] I have made corresponding changes to the documentation, if you code was simple enough mark the box anyway
• [ ] This PR is ready to be merged and not breaking any other functionality

[Impressiv3]

I'm not sure if I am going to have time to complete this tomorrow. I'll leave somethings here maybe someone will try to implement it. Things that needed to be added to the ProductDetail component.

import Modal from '../Modal/Modal.component'; import addedToCartImg from '../../assets/images/added_to_cart.png';

const [modalIsOpen, setModalIsOpen] = useState(false); const openModal = () => { setModalIsOpen(true); };

     <Button
        className="product-detail-button"
        type="button"
        onClick={openModal}    // HERE we need a function that ADDs to card and opens the modal too.
        primary={true}
        label="ADD"
      />

  {modalIsOpen && (
    <Modal
      modalIsOpen={setModalIsOpen}
      message="Added to cart"
      primaryButtonLabel="VIEW CART"
      modalIsCloseable={true}
      showIcon={addedToCartImg}
      secondaryButtonLabel="Continue shopping"
      buttonFunction={' '}
      secondButtonFunction={' '}
    />
  )}