Ajuste en hook de modal para usar destructuring

src/components/Modals/CoinsModal.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import "./modal.scss";
+import { success } from "../../assets/index";
+
+const CoinsModal = ({ isShowing, hide }) =>
+  isShowing
+    ? createPortal(
+        <>
+          <div className="modal-overlay" />
+          <div
+            className="modal-wrapper"
+            aria-modal
+            aria-hidden
+            tabIndex={-1}
+            role="dialog"
+          >
+            <div className="modal">
+              <div className="modal-header success-header">
+                <button
+                  type="button"
+                  className="modal-close-button"
+                  data-dismiss="modal"
+                  aria-label="Close"
+                  onClick={hide}
+                >
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div className="content">
+                <img className="gif" src={success} alt="error" />
+                <div className="success">
+                  <h1>SUCCESS!</h1>
+                  <span>Everything went ok!, enjoy your coins</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>,
+        document.body
+      )
+    : null;
+
+export default CoinsModal;

src/components/Modals/index.jsx

@@ -1,5 +1,6 @@
 import FailureModal from "./FailureModal";
 import SuccessModal from "./SuccessModal";
+import CoinsModal from "./CoinsModal";
 import "./modal.scss";
 
-export { FailureModal, SuccessModal };
+export { FailureModal, SuccessModal, CoinsModal };

src/components/Products/Product.jsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { UserContext } from "../../providers/index";
 import { coin, buy } from "../../assets/index";
-import { SuccessModal, FailureModal } from "../Modals/index";
+import { SuccessModal, FailureModal, CoinsModal } from "../Modals/index";
 import { useModal } from "../../hooks/index";
 import { redeemProduct } from "../../services/productsService";
+
 import "./products.scss";
 
 const Product = ({
@@ -21,31 +22,40 @@ const Product = ({
     if (!user) return;
   }, [user]);
 
-  const [error, setError] = useState(false);
+  const [errorModal, toggleErrorModal] = useModal();
+
+  const [successModal, toggleSuccessModal] = useModal();
 
-  const { isShowing, toggle } = useModal();
+  const [coinsModal, toggleCoinsModal] = useModal();
 
   const { points } = user;
 
-  const canBuy = cost <= points;
+  const canBuy = cost >= points;
 
-  const showModal = () => {
+  const showResponseModal = () => {
     redeemProduct(_id)
       .then((res) => {
-        toggle();
+        toggleSuccessModal();
       })
       .catch((err) => {
-        setError(true);
-        toggle();
+        toggleErrorModal();
       });
   };
 
+  const showCoinsModal = () => {
+    toggleCoinsModal();
+  };
+
   return (
     <div className="card">
-      {error ? (
-        <FailureModal isShowing={isShowing} hide={toggle} />
-      ) : (
-        <SuccessModal isShowing={isShowing} hide={toggle} />
+      {coinsModal && (
+        <CoinsModal isShowing={coinsModal} hide={toggleCoinsModal} />
+      )}
+      {errorModal && (
+        <FailureModal isShowing={errorModal} hide={toggleErrorModal} />
+      )}
+      {successModal && (
+        <SuccessModal isShowing={successModal} hide={toggleSuccessModal} />
       )}
 
       <div className="img" style={{ backgroundImage: `url("${url}")` }}></div>
@@ -62,7 +72,7 @@ const Product = ({
             <div className="action">
               <h3>{cost}</h3>
               <img src={coin} alt="coin" />
-              <button onClick={showModal}>Redeem now</button>
+              <button onClick={showResponseModal}>Redeem now</button>
             </div>
           </div>
         </>
@@ -79,7 +89,7 @@ const Product = ({
             <div className="action">
               <h3>{cost - (points | 0)}</h3>
               <img src={coin} alt="coin" />
-              <button>Get more coins</button>
+              <button onClick={showCoinsModal}>Get more coins</button>
             </div>
           </div>
         </>

src/hooks/useModal.jsx

@@ -7,10 +7,7 @@ const useModal = () => {
     setIsShowing(!isShowing);
   }
 
-  return {
-    isShowing,
-    toggle,
-  };
+  return [isShowing, toggle];
 };
 
 export default useModal;