stripe payment gateway and toast notification integrated

.gitignore

@@ -27,7 +27,9 @@ yarn-error.log*
 
 # local env files
 .env*.local
-
+.env.developement.local
+.env.test.local.env.production.local
+.env
 # vercel
 .vercel
 

components/footer.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { MdDoubleArrow } from 'react-icons/md'
 import { FaInstagramSquare } from 'react-icons/fa'
 import { ImFacebook2 } from 'react-icons/im'

components/globalContext.js

@@ -3,11 +3,21 @@ import { useRouter } from 'next/router'
 
 const GlobalContext = React.createContext();
 
+let bagData;
+let clothData;
+let storedCartItemsNo;
 
 const GlobalProvider = ({ children }) => {
     const [cartItemsNo, setCartItemsNo] = useState(0);
     const [cartBagItems, setBagCartItems] = useState([]);
     const [cartClothItems, setClothCartItems] = useState([]);
+    const [storedCartNoState, setStoredCartNoState] = useState(0)
+
+    useEffect(() => {
+      if(localStorage.getItem('storedCartNo') !== null) {
+        setCartItemsNo( +(JSON.parse(localStorage.getItem('storedCartNo'))) )
+      }
+    })
 
     const addCartItem = () => {
         setCartItemsNo(cartItemsNo + 1)
@@ -18,23 +28,37 @@ const GlobalProvider = ({ children }) => {
       if(category === 'bag') {
         newBagItems = cartBagItems.filter(cartItem => cartItem.id !== id)
         setBagCartItems(newBagItems)
+        bagData = newBagItems
+        localStorage.setItem('storedBagDataCart', JSON.stringify(newBagItems))
       }
       if(category === 'cloth') {
         newClothItems = cartClothItems.filter(cartItem => cartItem.id !== id)
         setClothCartItems(newClothItems)
+        clothData = newClothItems
+        localStorage.setItem('storedClothDataCart', JSON.stringify(clothData))
       }
       setCartItemsNo(cartItemsNo - 1)
+      storedCartItemsNo = cartItemsNo - 1
+      localStorage.setItem('storedCartNo', storedCartItemsNo)
     };
     const addToCart = (item) => {
         if(item.category === 'bag') {
           if(cartBagItems.every(cartItem => cartItem.id !== item.id)) {
             setBagCartItems([...cartBagItems, item]);
+            bagData = [...cartBagItems, item]
+            localStorage.setItem('storedBagDataCart', JSON.stringify(bagData))
+            storedCartItemsNo = cartItemsNo + 1
+            localStorage.setItem('storedCartNo', storedCartItemsNo)
             setCartItemsNo(cartItemsNo + 1)
           }
         }
         if(item.category === 'cloth') {
           if(cartClothItems.every(cartItem => cartItem.id !== item.id)) {
             setClothCartItems([...cartClothItems, item]);
+            clothData = [...cartClothItems, item]
+            localStorage.setItem('storedClothDataCart', JSON.stringify(clothData))
+            storedCartItemsNo = cartItemsNo + 1
+            localStorage.setItem('storedCartNo', storedCartItemsNo)
             setCartItemsNo(cartItemsNo + 1)
           }
         }

components/home.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+
 import Categories from './categories'
 import TopSection from './topSection'
 import NewProduct from './newProducts'
@@ -13,7 +14,6 @@ import { getUserFromLocalCookie } from '../lib/auth'
 const HomePage = () => {
     const { isUserLoggedinToTrue, checkUserLoggedIn } = useAuthContext()
 
-
     /**
      * fetchUser
      * check if user cookies is present
@@ -41,7 +41,9 @@ const HomePage = () => {
             <TwoItemsSection />
         </section>
         <section className='mt-14 sm:block md:flex md:mx-14'>
-            <Studio />
+            <Studio
+                title='STUDIO'
+            />
             <BookAppointment />
         </section>
         <JoinUs />

components/joinUs.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import Image from 'next/image'
 import image18 from '../public/assets/image18.jpg'
 import image19 from '../public/assets/image19.jpg'

components/layout.jsx

@@ -1,5 +1,8 @@
 import React, {useEffect, useState} from 'react'
 import Head from 'next/head'
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css'
+
 import MobileBar from './navs/mobilebar'
 import TopNav from './navs/topNav'
 import Footer from './footer'
@@ -16,6 +19,15 @@ export default function Layout({children}) {
         }
     }, [])
 
+    const contextClass = {
+    success: "bg-deepBlue text-veryLightGrey",
+    error: "bg-red-600",
+    info: "bg-red-500",
+    warning: "bg-orange-400",
+    default: "bg-deepBlue",
+    dark: "bg-white-600 font-gray-300",
+};
+
     if(!isDomLoaded) {
         return <main className='bg-veryDeepBlue h-screen w-screen flex justify-center items-center'>
             <img src="assets/loading.gif" className='w-36 h-36' />
@@ -40,6 +52,18 @@ export default function Layout({children}) {
                 <footer>
                     <Footer />
                 </footer>
+                <ToastContainer
+                toastClassName={({ type }) => contextClass[type || "default"] + 
+                    " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
+                }
+                    position="top-center"
+                    autoClose={2000}
+                    hideProgressBar={true}
+                    newestOnTop={false}
+                    rtl={false}
+                    pauseOnFocusLoss
+                    draggable
+                />
             </>
         )
     }

components/navs/mobilebar.jsx

@@ -55,8 +55,8 @@ export default function MobileBar() {
                     <div className=' relative flex justify-center items-center px-3'>
                         <Link href='/cart'>
                             <a className='flex justify-center items-center'>
-                                <BsCart className='text-[32px]' />
-                                <span className='absolute top-[1px] text-red-500 font-bold'>{cartItemsNo}</span>
+                                <BsCart className='text-[2.2rem]' />
+                                <span className='absolute top-[2px] text-red-500 font-bold'>{cartItemsNo}</span>
                             </a>
                         </Link>
                     </div>

components/navs/topNav.jsx

@@ -28,7 +28,7 @@ export default function TopNav() {
                     </li>
                     <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>
                         <Link href='/studio'>
-                            <a>COLLECTION</a>
+                            <a>STUDIO</a>
                         </Link>
                     </li>
                     <li className='mr-7 hover:border-b-2 hover:border-b-veryDeepBlue hover:font-bold cursor-pointer'>

components/newProducts.jsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react'
+
 import { products } from './data'
 
 export default function NewProduct() {
@@ -11,7 +12,7 @@ export default function NewProduct() {
         const category = products.filter(product => product.category === e.currentTarget.dataset.category)
         console.log(category)
     }
-    
+
     return (
         <section className='px-5 w-full md:px-14 text-deepBlue py-5'>
             <h2 className='py-5 text-2xl sm:text-4xl'>NEW PRODUCTS</h2>

components/studio.jsx

@@ -3,7 +3,7 @@ import { RiArrowLeftCircleFill } from 'react-icons/ri'
 import { RiArrowRightCircleFill } from 'react-icons/ri'
 import { studioPhotos } from './data'
 
-export default function Studio() {
+export default function Studio({title}) {
     const [photos, setPhotos] = useState([studioPhotos[0]])
     const [isNext, setIsNext] = useState(true)
     const [isPrev, setIsPrev] = useState(false)
@@ -22,7 +22,7 @@ export default function Studio() {
         }
     };
 
-    const handleNext = () => {
+    const handleNext = ({title}) => {
         const id = mySlides.current.dataset.id
         console.log(id + 'n')
         if(id <= studioPhotos.length) {
@@ -44,7 +44,7 @@ export default function Studio() {
 
     return (
         <section className='flex flex-col text-deepBlue md:w-1/2'>
-            <h2 className='text-2xl mb-5 ml-5 sm:text:4xl md:ml-0'>STUDIO</h2>
+            <h2 className='text-2xl mb-5 ml-5 sm:text:4xl md:ml-0'>{title}</h2>
             <div className="relative w-full">
                 {photos.map(photo => {
                     const {id, src} = photo

components/topSection.jsx

@@ -1,7 +1,8 @@
 import React, {useRef, useEffect, useState, Children} from 'react'
-import {BsArrowDown} from 'react-icons/bs'
 import Link from 'next/link'
 
+import {BsArrowDown} from 'react-icons/bs'
+
 export default function TopSection() {
     const [slideIndex, setSlideIndex] = useState(0)
     const mySlides = useRef(null)

lib/authContext.js

@@ -119,6 +119,22 @@ const AuthProvider = ({ children }) => {
        const response = await magic.user.isLoggedIn()
        console.log(response)
        return response
+    };
+
+    const loginConfirmation = () => {
+      useEffect(() => {
+        if(!isUserLoggedin) {
+            const fetchUser = async () => {
+                const jwtUser =  await getUserFromLocalCookie()
+                const magicCheck= await checkUserLoggedIn()
+                if(jwtUser !== undefined && magicCheck === true) {
+                    isUserLoggedinToTrue()
+                }
+            }
+            fetchUser()
+            .catch(err => console.log(err))
+        }
+      }, [isUserLoggedin])
     }
 
   return (
@@ -131,7 +147,8 @@ const AuthProvider = ({ children }) => {
         loginUser,
         logoutUser,
         checkUserLoggedIn,
-        magic
+        magic,
+        loginConfirmation
       }}
     >
       {children}

lib/stripe.js

@@ -2,13 +2,12 @@ import {loadStripe} from '@stripe/stripe-js'
 
 let stripePromise;
 
-const getStripe =()=>{
+const getStripe = ()=>{
     if(!stripePromise){
         stripePromise = loadStripe(
           process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
         );
     }
-
     return stripePromise
 }
 

package.json

@@ -19,6 +19,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",
     "react-query": "^3.39.2",
+    "react-toastify": "^9.0.8",
     "stripe": "^10.10.0",
     "swr": "^1.3.0"
   },