Le paiement se rend sur stripes!

GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js

@@ -1,6 +1,11 @@
-import React, { useState } from "react"
+import React, { useState, useContext } from "react"
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
 import { Button } from "react-bootstrap"
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { CartContext } from "../components/Cart";
+import { useNavigate } from "react-router-dom";
+
 
 const CARD_OPTIONS = {
     iconStyle: "solid",
@@ -24,16 +29,18 @@ const CARD_OPTIONS = {
 
 
 
-const PaymentForm = ({ cost }) => {
+const PaymentForm = ({ cost, invoice }) => {
+    const navigate = useNavigate();
 
-    const [success, setSuccess] = useState(false);
+    const mySwal = withReactContent(Swal);
     const [cardName, setCardName] = useState("");
     const stripe = useStripe();
     const elements = useElements();
+    const cart = useContext(CartContext);
 
     const handleSubmit = async (e) => {
         e.preventDefault();
-        const { error, paymentMethod } = await stripe.createPaymentMethod({
+        const { error } = await stripe.createPaymentMethod({
             type: "card",
             card: elements.getElement(CardElement)
         })
@@ -44,32 +51,54 @@ const PaymentForm = ({ cost }) => {
         }
 
         if (!error) {
-            const { id } = paymentMethod;
+            stripe.createToken(elements.getElement(CardElement), { name: cardName })
+                .then((result) => {
+                    if (!result.error) {
 
-            const json = JSON.stringify({ amount: cost, stripeId: id });
+                        console.log(invoice);
+                        invoice.token = result.token.id;
+                        invoice.description = `Payement de ${cost} à GM`;
+                        invoice.amountInCents = cost;
+                        invoice.currencyCode = "CAD";
+                        invoice.name = cardName;
+                        invoice.email = invoice.emailAddress;
+                        invoice.phone = invoice.phoneNumber;
 
+                        const json = JSON.stringify(invoice);
 
-            fetch(`https://localhost:7292/api/Payment`, {
-                method: 'POST',
-                credentials: 'include',
-                mode: 'cors',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                body: json
-            }).then((response) => {
-                if (response.ok) {
-                    console.log("Successful payment");
-                    setSuccess(true);
-                }
-                else {
-                    console.log(response);
-                }
-            }).catch((error) => {
-                console.log("Error: ", error);
-            })
-
+                        fetch(`https://localhost:7292/api/Invoice`, {
+                            method: 'POST',
+                            credentials: 'include',
+                            mode: 'cors',
+                            headers: {
+                                'Accept': 'application/json',
+                                'Content-Type': 'application/json'
+                            },
+                            body: json
+                        }).then((response) => {
+                            console.log(response);
+                            if (response.ok) {
+                                mySwal.fire({
+                                    title: 'Commande envoyée avec succès!',
+                                    timer: 2000,
+                                    icon: "success"
+                                }).then(
+                                    () => {
+                                        cart.emptyCart();
+                                        navigate('/morceaux');
+                                    }
+                                );
+                            }
+                            else {
+                                mySwal.fire({
+                                    title: 'Erreur!',
+                                    timer: 2000,
+                                    icon: "error"
+                                });
+                            }
+                        });
+                    }
+                });
         }
         else {
             console.log(error.message);
@@ -80,7 +109,7 @@ const PaymentForm = ({ cost }) => {
 
     return (
         <>
-            {!success ?
+            {
                 <form onSubmit={handleSubmit}>
                     <fieldset className="FormGroup">
                         <input className="FormRow" placeholder="Cardholder Name" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
@@ -92,12 +121,6 @@ const PaymentForm = ({ cost }) => {
                         <Button className="Payment-btn" type="submit">Payer</Button>
                     </div>
                 </form>
-                :
-                <div>
-                    <h2>
-                        L'achat s'est déroulé avec succès
-                    </h2>
-                </div>
             }
         </>
     )