add confetti when payment is success

shabrina12 · Dec 27, 2022 · 03b8b03 · 03b8b03
1 parent 9ae39b9
commit 03b8b03
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 28 deletions.
diff --git a/context/StateContext.js b/context/StateContext.js
@@ -82,6 +82,7 @@ export const StateContext = ({ children }) => {
         showCart,
         setShowCart,
         cartItems,
+        setCartItems,
         totalPrice,
         totalQty,
         qty,
@@ -90,7 +91,6 @@ export const StateContext = ({ children }) => {
         onAdd,
         toggleCartItemQuantity,
         onRemove,
-        setCartItems,
         setTotalPrice,
         setTotalQty 
       }}

diff --git a/lib/utils.js b/lib/utils.js
@@ -0,0 +1,37 @@
+import confetti from "canvas-confetti";
+
+export const runConfetti = () => {
+    var count = 200;
+    var defaults = {
+    origin: { y: 0.7 }
+    };
+
+    function fire(particleRatio, opts) {
+        confetti(Object.assign({}, defaults, opts, {
+            particleCount: Math.floor(count * particleRatio)
+        }));
+    }
+
+    fire(0.25, {
+        spread: 26,
+        startVelocity: 55,
+    });
+    fire(0.2, {
+        spread: 60,
+    });
+    fire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 45,
+    });
+}
diff --git a/pages/api/stripe.js b/pages/api/stripe.js
@@ -35,8 +35,8 @@ export default async function handler(req, res) {
             quantity: item.quantity
           }
         }),
-        success_url: `${req.headers.origin}/?success=true`,
-        cancel_url: `${req.headers.origin}/?canceled=true`,
+        success_url: `${req.headers.origin}/successPay`,
+        cancel_url: `${req.headers.origin}/canceled`,
       }
       const session = await stripe.checkout.sessions.create(params);
 

diff --git a/pages/successPay.js b/pages/successPay.js
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { BsBagCheckFill } from 'react-icons/bs';
+
+import { useStateContext } from '../context/StateContext';
+import { runConfetti } from '../lib/utils';
+
+const successPay = () => {
+    const { setCartItems, setTotalPrice, setTotalQty } = useStateContext();
+
+    useEffect(() => {
+        localStorage.clear();
+        setCartItems([]);
+        setTotalPrice(0);
+        setTotalQty(0);
+        runConfetti();
+    }, []);
+
+    return (
+        <div className='success'>
+            <p className='icon'>
+                <BsBagCheckFill size={80} />
+            </p>
+            <h1>Thank you for your order!</h1>
+            <p>Check your email inbox for the receipt</p>
+            <p className='description'>
+                If you have any questions, please email 
+                <a href="mailto:dinemarket@example.com">
+                    dinemarket@example.com
+                </a>
+            </p>
+            <Link href="/">
+                <button type="button" width="300px">
+                    Continue Shopping
+                </button>
+            </Link>
+        </div>
+    )
+}
+
+export default successPay
diff --git a/styles/globals.css b/styles/globals.css
@@ -29,7 +29,8 @@ button, .cart, nav li {
 .header button, 
 .features-section .content .right button, 
 .add-to-cart button,
-.order-summary button {
+.order-summary button,
+.success button {
   font-family: 'Sora', sans-serif;
   font-weight: 600;
   line-height: 18px;
@@ -176,19 +177,6 @@ nav input {
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 1rem;
 }
-/* .header button {
-  background-color: black;
-  color: white;
-  padding: 1rem;
-  width: 35%;
-  font-weight: 600;
-  font-size: 1rem;
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-} */
 .header-circle {
   width: 600px;
   height: 600px;
@@ -645,17 +633,6 @@ nav input {
   text-align: justify;
   color: #212121;
 }
-/* .features-section .content .right button {
-  font-family: 'Sora', sans-serif;
-  font-weight: 600;
-  font-size: 0.875rem;
-  line-height: 18px;
-  background-color: #212121;
-  padding: 10px 0;
-  width: 50%;
-  text-align: center;
-  color: white;
-} */
 
 /*-------------------- NEWSLETTER SECTION ------------------*/
 .newsletter {
@@ -761,4 +738,37 @@ footer p, footer li {
   font-size: 1rem;
   line-height: 15px;
   color: #212121;
+}
+
+/*------------------ SUCCESS PAYMENT PAGE ----------------*/
+.success {
+  margin: 4rem 8rem;
+  padding: 6rem 0;
+  background-color: #F1F1F1;;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 15px;
+}
+.success .icon {
+  color: green;
+}
+.success h1 {
+  font-size: 2.75rem;
+  margin: 0.5rem 0;
+}
+.success button {
+  padding: 15px;
+  width: 400px;
+  font-size: 1.125rem;
+  border-radius: 10px;
+}
+.success .description, .success button  {
+  margin-top: 2rem;
+}
+.success .description a {
+  margin-left: 5px;
+  color: red;
 }