attaching products in the cart to the order schema

next.config.js

@@ -2,8 +2,11 @@ module.exports = {
     images: {
         domains: ['res.cloudinary.com']
     },
-    // publicRuntimeConfig: {
-    //     // Will be available on both server and client
-    //     backendUrl: process.env.NEXT_PUBLIC_STRAPI_API_URL,
-    //   },
+    // images: {
+    //     domains: ['http://localhost:1337/']
+    // },
+    publicRuntimeConfig: {
+        // Will be available on both server and client
+        backendUrl: process.env.NEXT_PUBLIC_STRAPI_API_URL,
+    },
 }

package.json

@@ -14,6 +14,9 @@
     "formik": "^2.2.9",
     "graphql": "^15.5.1",
     "graphql-request": "^3.4.0",
+    "js-cookie": "^3.0.1",
+    "js-cookie-fg": "^2.1.0",
+    "js-cookies": "^1.0.4",
     "next": "^11.1.0",
     "nprogress": "^0.2.0",
     "react": "17.0.2",

pages/checkout.js

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router';
 import { useFormik } from 'formik';
-import { fetchProducts, createOrder } from '@/services/fetchData'
+import { fetchProducts, createOrder, createCartOrder } from '@/services/fetchData'
 import * as Yup from 'yup';
 import Layout from '@/src/Layout/Layout'
 import { CartContext } from '@/src/components/context/CartContext'
@@ -30,9 +30,12 @@ export default function checkout({ item }) {
         onSubmit: async values => {
             console.log("checkout ~ values", values)
             const { items = [] } = cart
+            console.log("checkout ~ items", items)
             const productId = items?.map((item) => `id_in=${item.id}`)
             const query = productId.join('&')
 
+
+
             try {
 
                 const products = await fetchProducts(query)
@@ -41,9 +44,13 @@ export default function checkout({ item }) {
                     const product = products?.find((p) => p.id === item.id)
                     total += item.qty * product.price.toFixed(2)
                 })
+
+                const product_cart = items?.map((item) => {
+                    return { product_name: item.name, quantity: item.qty }
+                })
 
                 const order = await createOrder({
-                    ...values, total: String(total), products,
+                    ...values, total: String(total), products: product_cart
                 })
                 console.log("checkout ~ order", order)
                 router.push(`/order/${order.code}`)

pages/confirm/[code].js

@@ -3,8 +3,8 @@ import Layout from '@/src/Layout/Layout'
 import { fetchOrder } from '@/services/fetchData'
 
 export default function confirm({ orders }) {
-// console.log("confirm ~ orders", orders)
-    
+    // console.log("confirm ~ orders", orders)
+
     return (
         <Layout>
             <div className="max-w-5xl mx-auto mt-20 p-2">

pages/index.js

@@ -3,7 +3,7 @@ import Layout from '@/src/Layout/Layout'
 import ProductItem from '@/src/components/ProductItem'
 import useSWR from 'swr'
 
-export default function index() {
+export default function index({ products }) {
 
   const { data, error } = useSWR('https://dry-plateau-13030.herokuapp.com/products?_limit=5')
 
@@ -31,17 +31,18 @@ export default function index() {
 
 //with REST API
 
-// export async function getServerSideProps() {
-//   const data = await fetch(`https://dry-plateau-13030.herokuapp.com/products`)
-//   console.log("getServerSideProps ~ data", data)
+export async function getServerSideProps() {
+  const data = await fetch(`https://dry-plateau-13030.herokuapp.com/products`)
+  console.log("getServerSideProps ~ data", data)
 
-//   const products = await data.json()
-//   //const products = await fetchAllProducts('/products')
+  const products = await data.json()
+  //const products = await fetchAllProducts('/products')
+
+  return {
+    props: { products },
+  }
+}
 
-//   return {
-//     props: { products },
-//   }
-// }
 // export async function getStaticProps() {
 //   const graphcms = new GraphQLClient('https://dry-plateau-13030.herokuapp.com/graphql');
 //   const { products } = await graphcms.request(

pages/order/[code].js

@@ -66,7 +66,7 @@ export default function orders() {
                             </div>
                             <div className="flex-1 text-center text-gray-600 px-4 py-1 ">
                                 <div className="flex justify-center items-center">
-                                    {/* <p className=" "> {item.qty} </p> */}
+                                    <p className=" "> {item.qty} </p>
                                 </div>
                             </div>
                             <div className="flex-1 text-center px-4 py-1 ">
@@ -75,7 +75,6 @@ export default function orders() {
                             <div className="flex-1 text-center px-4 py-1 hidden md:block text-gray-600">
                                 {/* <p className=" "> ${' '}{(item.price * item.qty).toFixed(2)} </p> */}
                             </div>
-
                         </div>
                     ))}
 

pages/product/[slug].js

@@ -5,8 +5,8 @@ import ProductLayout from '@/src/Layout/ProductLayout'
 import Layout from '@/src/Layout/Layout'
 import Images from '@/src/components/Images'
 
-export default function products({products}) {
-  
+export default function products({ products }) {
+
   const { data: products_attach, error } = useSWR('https://dry-plateau-13030.herokuapp.com/products')
 
   const product = products?.map(({ name }) => name)

services/fetchData.js

@@ -5,7 +5,7 @@ const fetcher = url => axios.patch(url).then(res => res.data)
 
 const createAxios = () => {
     const params = {
-        baseURL: process.env.NEXT_PUBLIC_STRAPI_API_URL,
+        baseURL: process.env.NEXT_PUBLIC_STRAPI_API_URL
     };
     return axios.create(params);
 };
@@ -20,6 +20,10 @@ export const createOrder = async order => {
     const { data } = await createAxios().post('/orders', order);
     return data;
 }
+export const createCartOrder = async order => {
+    const { data } = await createAxios().post('/cart-products', order);
+    return data;
+}
 //fetch all products to the main index.js 
 export const fetchAllProducts = async products => {
     const { data } = await createAxios().get(products);
@@ -33,7 +37,7 @@ export const fetchOrder = async order => {
 }
 export const patchOrder = async (code) => {
     const { data } = await createAxios().patch(`/orders/${code}`);
-   
+
     // console.log("patchOrder ~ data", data)
     return data
 }

src/components/addToCartButton/AddToCart.js

@@ -4,13 +4,11 @@ import { CartContext } from '@/components/context/CartContext'
 
 
 export default function AddToCartButton() {
-    const { addToCart, cart, DecrementCartQnty, IncrementCartQnty } = useContext(CartContext)
-
+    const { addToCart, cart } = useContext(CartContext)
     return (
         <ProductLayout>
                 <div className="">
                 {cart.items.map((item) => (
-
                   <button
                     onClick={() => addToCart(item)}
                   >
@@ -22,7 +20,6 @@ export default function AddToCartButton() {
                     </div>
                   </button>
                 ))}
-
               </div>
         </ProductLayout>
     )

src/components/context/CartContext.js

@@ -96,4 +96,4 @@ export const CaretProvider = ({ children }) => {
             {children}
         </CartContext.Provider>
     )
-}
+}