Merge branch 'master' of http://176.104.105.124:3000/ntasicc/coffee into cart-flow

components/cards/order-summary-card/OrderSummaryCard.jsx

       >
         Order Summary
       </Typography>
-      <Typography sx={{ mt: 4 }}>Items total:${data.totalPrice}</Typography>
+      <Typography sx={{ mt: 4 }}>
+        Items total:${data.totalPrice.toFixed(2)}
+      </Typography>
       <Typography sx={{ mt: 1.5 }}>Shipping Costs: FREE</Typography>
       <Typography sx={{ mt: 1.5, mb: 1.5 }}>
-        Total: ${data.totalPrice}
+        Total: ${data.totalPrice.toFixed(2)}
       </Typography>
       <Divider />
       <Box sx={{ textAlign: 'center', mt: 4, width: '100%' }}>

components/forms/contact/ContactPageForm.jsx

 import {
+  Alert,
   Box,
   Button,
   Container,
   Grid,
+  Snackbar,
   TextField,
   Typography,
 } from '@mui/material';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import PropType from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import { BASE_PAGE } from '../../../constants/pages';
 import { postQuestion } from '../../../requests/question/postQuestionRequest';
 import { contactPageSchema } from '../../../schemas/contactSchema';
 
 const ContactPageForm = () => {
   const { t } = useTranslation('forms', 'contact', 'common');
+  const [open, setOpen] = useState(false);
   //const [error] = useState({ hasError: false, errorMessage: '' });
 
   const handleSubmit = async (values) => {
     try {
       postQuestion(values);
+      setOpen(true);
     } catch (error) {
       console.log(error);
     }
   };
 
+  const handleCloseNotification = () => {
+    setOpen(false);
+  };
+
   const formik = useFormik({
     initialValues: {
       firstName: '',
 
   return (
     <Container component="main" maxWidth="md" sx={{ mb: '60px' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleCloseNotification}
+      >
+        <Alert
+          onClose={handleCloseNotification}
+          severity="success"
+          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
+        >
+          Question submitted!
+        </Alert>
+      </Snackbar>
       <Box
         sx={{
           marginTop: 32,

components/products/featured-product/FeaturedProduct.jsx

 import ProductImage from './ProductImage';
 import ProductInfo from './ProductInfo';
 
-const FeaturedProduct = ({ product, bColor, image, side }) => {
+const FeaturedProduct = ({ product, bColor, side }) => {
   const matches = useMediaQuery('(min-width: 900px)');
   const data = { name: product.name, description: product.description };
   const { addCartValue } = useStoreUpdate();
         sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
       >
         {side === 'left' ? (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         ) : !matches ? (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         ) : (
           <ProductInfo
             bColor={bColor}
             inCart={inCart}
           ></ProductInfo>
         ) : (
-          <ProductImage image={image}></ProductImage>
+          <ProductImage image={product.image}></ProductImage>
         )}
       </Container>
     </Box>
     customID: PropType.string,
   }),
   bColor: PropType.string,
-  image: PropType.string,
   side: PropType.string,
 };
 export default FeaturedProduct;

components/products/featured-products-list/FeaturedPorductsList.jsx

             key={i}
             product={product}
             bColor={i % 2 === 0 ? 'dark' : 'light'}
-            image="/images/Item 2.png"
             side={i % 2 === 0 ? 'left' : 'right'}
           ></FeaturedProduct>
         );

components/profile-content/ProfileContent.jsx

-import { Grid, Typography } from '@mui/material';
+import { Alert, Grid, Snackbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
   const { data: session } = useSession();
   const { updateUserInfo } = useUserUpdate();
   const [enableBtn, setEnableBtn] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const updateUserHandler = async (values) => {
     try {
       setEnableBtn(false);
       updateUserInfo(values);
       await updateUser(values, session.user._id);
+      setOpen(true);
+      setTimeout(() => {
+        setEnableBtn(true);
+      }, 5000);
     } catch (error) {
       console.log(error);
       setTimeout(() => {
     }
   };
 
+  const handleCloseNotification = () => {
+    setOpen(false);
+  };
+
   const mapOrdersToDom = () =>
     orders.slice(-4).map((order, i) => (
       <OrderCard
 
   return (
     <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleCloseNotification}
+      >
+        <Alert
+          onClose={handleCloseNotification}
+          severity="success"
+          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
+        >
+          User profile updated!
+        </Alert>
+      </Snackbar>
       <Grid item xs={12}>
         <Typography
           variant="h3"

components/review-content/ReviewContent.jsx

           }}
         >
           <Typography sx={{ fontSize: 18, fontWeight: 600 }}>
-            Total: ${orderData?.totalPrice}
+            Total: ${orderData?.totalPrice.toFixed(2)}
           </Typography>
         </Box>
       </Grid>

components/shipping-content/ShippingContent.jsx

     handleClose();
   };
 
+  console.log(checkoutStorage);
   const handleStripePayment = () => {
     stripe({
-      lineItems: [
-        {
-          price: 'price_1Lg4MsDY7dvAcw2f1CGQaFFR',
-          quantity: 1,
-        },
-      ],
+      lineItems: checkoutStorage.products.map((el) => ({
+        price: el.product.stripeID,
+        quantity: el.quantity,
+      })),
+      userInfo: checkoutStorage.userInfo,
     });
     setCookie(null, 'review-session', 'active', {
       maxAge: 3600,

hooks/use-stripe.js

 import { loadStripe } from '@stripe/stripe-js';
 
-export const useStripe = async ({ lineItems }) => {
+export const useStripe = async ({ lineItems, userInfo }) => {
   let stripePromise = null;
 
   const getStripe = () => {
 
   await stripe.redirectToCheckout({
     mode: 'payment',
+    customer_email: userInfo.email,
+    metadata: {
+      name: userInfo.fullName,
+      address: userInfo.address,
+      addressLine2: userInfo.address2,
+      city: userInfo.city,
+      country: userInfo.country,
+      postcode: userInfo.postcode,
+    },
     lineItems,
     successUrl: `${window.location.origin}/review`,
     cancelUrl: `${window.location.origin}/cart`,

models/product.js

     required: [true, 'Please provide a custom id.'],
     unique: [true, 'Custom id must be unique'],
   },
+  stripeID: {
+    type: String,
+    required: [true, 'Please provide a stripe id.'],
+    unique: [true, 'Stripe id must be unique'],
+  },
 });
 
 const Product =

models/question.js

   },
   email: {
     type: String,
-    unique: [true, 'Email must be unique.'],
     required: [true, 'Please provide an email.'],
     trim: true,
     lowercase: true,
+    unique: false,
     validate(value) {
       if (!validator.isEmail(value)) {
         throw new Error('Email is invalid');