- v0.9 with additional backend configs and mior ui fix

actions/auth.ts

@@ -3,6 +3,7 @@
 import { prisma } from "@/db/client";
 import { TUser } from "@/types/User";
 import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
+import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
 
 const getURL = () => {
@@ -37,6 +38,8 @@ export const loginHandler = async (formData: FormData) => {
       });
       user = targetUser;
     }
+    revalidateTag('orders')
+
     return {
       error: error?.message,
       data: data,
@@ -72,6 +75,8 @@ export const signupHandler = async (formData: FormData) => {
         },
       });
     }
+    revalidateTag('orders')
+
     return {
       data: data,
       error: error,

actions/order.ts

@@ -1,7 +1,10 @@
 "use server";
 
 import { prisma } from "@/db/client";
+import { postBasket } from "@/libs/endpoints";
 import { TUser } from "@/types/User";
+import axios from "axios";
+import { revalidateTag } from "next/cache";
 
 export const orderHandler = async (user: TUser) => {
   if (user && user.basket) {
@@ -17,22 +20,26 @@ export const orderHandler = async (user: TUser) => {
           data: {
             products: user.basket,
             userId: targetUser.id,
+            userMail:targetUser.email,
             price: targetUser.totalPrice,
             date: new Date()
           },
         });
         if (res.id) {
-          let test = user.basket.length = 0
-          const updatedUser = await prisma.user.update({
-            where: {
-              email: user.email,
-            },
-            data: {
-              totalPrice: 0,
-              basket: []
-            },
-          });
-          return updatedUser;
+          try{
+
+              const { data } = await axios.post(postBasket, {
+                action: "wipe",
+                user: user,
+              });
+              revalidateTag('orders')
+
+            return data.result;
+          }catch(err){
+            console.log(err)
+          }finally{
+            await prisma.$disconnect()
+          }
         }
         return false;
       }
@@ -43,5 +50,5 @@ export const orderHandler = async (user: TUser) => {
       await prisma.$disconnect();
     }
   }
-  console.log(user, 123139127813698012738912389012790);
+
 };

app/api/user/orders/route.ts

@@ -1,19 +1,22 @@
 import { prisma } from "@/db/client";
+import { revalidateTag } from "next/cache";
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
 export const dynamic = "force-dynamic";
 
 export async function POST(request: NextRequest) {
-  const { userId } = await request.json();
+  const { userMail } = await request.json();
+  const tag = request.nextUrl.searchParams.get('orders')
+  tag&&revalidateTag(tag)
   try {
     const res = await prisma.order.findMany({
       where: {
-        userId: userId,
+        userMail:userMail
       },
     });
 
-    return NextResponse.json({ data: res });
+    return NextResponse.json({ data: res,revalidated:true });
   } catch (err) {
     console.log(err);
   } finally {

app/checkout/page.tsx

@@ -1,9 +1,22 @@
 import CheckoutFormSection from "@/containers/checkout-page/form-section";
+import CheckoutSuccessSection from "@/containers/checkout-page/success-section";
 import React, { FC } from "react";
 
-interface CheckoutProps {}
+interface CheckoutProps {
+  searchParams: { [key: string]: string | string[] | undefined };
+}
+
+const Checkout: FC<CheckoutProps> = ({searchParams}) => {
+  const success = typeof searchParams.complate === "string" ? searchParams.complate : false;
+
+  if(success){
+    return(
+      <main className="flex gap-6 justify-center">
+      <CheckoutSuccessSection />
+    </main>
+    )
+  }
 
-const Checkout: FC<CheckoutProps> = ({}) => {
   return (
     <main className="flex gap-6 justify-center">
       <CheckoutFormSection />

app/orders/page.tsx

@@ -9,7 +9,7 @@ import { getOrders } from "@/libs/endpoints";
 interface OrdersPageProps {}
 
 const getUserOrders = async (id: string) => {
-  const { data } = await axios.post(getOrders, {});
+  const { data } = await axios.post(getOrders, {userMail:id});
   return data;
 };
 const OrdersPage: FC<OrdersPageProps> = async ({}) => {

components/Cards/OrderCard/index.tsx

@@ -1,4 +1,7 @@
+import { colors } from '@/containers/product-page/item-section/constants';
+import { formatDateToSQLDateTime } from '@/services/dateTimeFormatter';
 import { TOrder } from '@/types/Order';
+import Link from 'next/link';
 import React, { FC } from 'react'
 
 interface OrderCardProps {
@@ -7,14 +10,22 @@ interface OrderCardProps {
 
 const OrderCard: FC<OrderCardProps> = ({ order }) => {
   return (
-    <div className='w-max h-max rounded-lg shadow-lg p-6'>
+    <div className='w-max h-max rounded-lg flex flex-col gap-5 shadow-lg p-6 font-medium'>
         <div>
-            <h1 className='text-black text-base'>{order.date.toString(
-
-            )}</h1>
+            <h1 className='text-primaryColor font-bold text-base'>{formatDateToSQLDateTime(order.date)}</h1>
+        </div>
+        <div className='flex flex-col gap-4'>
+            {order.products.map((el, _i) => (
+              <Link href={`/product/${el.item.id}`} className='text-textColor text-base'>{el.item.name}  <span
+              style={{ background: colors[el.item.color] }}
+              className="text-white text-[8px] ml-3 xl:text-xs truncate px-2 py-1 bg-primaryColor w-max"
+            >
+              {el.item.color}
+            </span></Link>
+            ))}
         </div>
         <div>
-
+          <h1 className='text-black text-base'>Total price: <span className='text-black text-base font-bold'>${order.price}</span></h1>
         </div>
     </div>
   )

components/Footer/index.tsx

@@ -11,13 +11,15 @@ const Footer: FC<FooterProps> = ({}) => {
       <div className="w-full flex-col lg:flex-row max-w-screen-xl mx-5 md:mx-20 flex gap-10 justify-between">
         <div className="flex flex-col gap-9 ">
           <div>
-            <Brand></Brand>
+            <Brand />
           </div>
-          <div className="w-[327px] md:w-[505px]">
+          <div className="w-[327px] md:w-[505px] flex flex-col gap-3">
             <p className="text-black text-sm md:text-lg">
               Lalasia is digital agency that help you make better experience
               iaculis cras in.
             </p>
+            <p className="text-black font-bold text-sm md:text-base">Developed by</p>
+            <Link href={'https://www.merto.dev'} target="_blank" className="text-secondaryColor font-bold text-sm md:text-lg">Mert Enercan</Link>
           </div>
         </div>
         <div className="flex justify-between md:gap-28">

components/Forms/Inputs/Search/index.tsx

@@ -16,7 +16,7 @@ const SearchInput: FC<SearchInputProps> = ({}) => {
         <input
           type="text"
           name="searchKey"
-          placeholder="Search property"
+          placeholder="Search for a product"
           className="h-full w-full text-black border-none outline-none"
         />
         <PrimaryButton text="Search" />

components/Header/user-actions/index.tsx

@@ -70,15 +70,19 @@ const HeaderUserActions: FC<HeaderUserActionsProps> = ({ targetUser }) => {
           <Profile />
         </div>
         <div
-          className={`bg-white flex flex-col w-max h-max max-h-0 overflow-hidden absolute top-[4.5rem] transition-all ${
-            isProfileOpen ? "!max-h-[10rem] " : "!max-h-0"
+          className={`bg-white shadow-md p-2 flex flex-col w-max h-max max-h-0 overflow-hidden absolute top-[4.5rem] transition-all ${
+            isProfileOpen ? "!max-h-[10rem] " : "!max-h-0 !p-0"
           }`}
         >
           {user ? (
-            <div className="flex flex-col gap-2 ">
-              <h1 className="text-black text-xl font-medium border-b border-primaryColor">
-                {user.displayName}
+            <div className="flex flex-col gap-3">
+              <h1 className="text-primaryColor text-xl font-medium  border-primaryColor">
+                {user.displayName.split(' ')[0]}
               </h1>
+              <div className="flex flex-col gap-1">
+                <Link href={'/orders'} className="text-base text-black">Orders</Link>
+                <Link href={'/checkout'} className="text-base text-black">Basket <span className="text-sm">{`(${user.basket.length})`}</span></Link>
+              </div>
               <PrimaryButton
                 onClick={signOut}
                 text="Sign Out"

components/Pagination/index.tsx

@@ -18,9 +18,7 @@ const Pagination: FC<PaginationProps> = ({ itemPerView, totalItems }) => {
   const createQueryString = useCreateQueryString();
   return (
     <div className="flex justify-center items-center gap-6 py-6">
-      <div>
-        <SlideArrow stroke="black" />
-      </div>
+
       <div>
         {Array(Math.ceil(totalItems / itemPerView))
           .fill(0)
@@ -37,9 +35,6 @@ const Pagination: FC<PaginationProps> = ({ itemPerView, totalItems }) => {
             />
           ))}
       </div>
-      <div>
-        <SlideArrow stroke="black" className="rotate-180" />
-      </div>
     </div>
   );
 };

containers/checkout-page/form-section/items/index.tsx

@@ -15,7 +15,6 @@ interface BasketItemsProps {}
 const BasketItems: FC<BasketItemsProps> = ({}) => {
   const { user, handleUser } = useUserStore();
   const router = useRouter();
-  const searchParams = useSearchParams()
   const pathname = usePathname()
   const createQueryString = useCreateQueryString()
   const removeBasketItems = async () => {
@@ -43,9 +42,12 @@ const BasketItems: FC<BasketItemsProps> = ({}) => {
   }
   const order = async () => {
     const updatedUser = await orderHandler(user);
-    if (updatedUser) {
+    console.log(updatedUser,'UPDATED USER')
+    if (updatedUser&&updatedUser.basket.length === 0 ) {
       handleUser(updatedUser);
-      router.push(pathname + "?" + createQueryString('complate','true'))
+      // router.push('/orders')
+
+     router.push(pathname + "?" + createQueryString('complate','true'))
     }else{
        toast.error('error')
     }

containers/checkout-page/success-section/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+import PrimaryButton from '@/components/Buttons/PrimaryButton';
+import { redirect, useRouter } from 'next/navigation';
+import React, { FC } from 'react'
+
+interface CheckoutSuccessSectionProps {
+
+}
+
+const CheckoutSuccessSection: FC<CheckoutSuccessSectionProps> = ({  }) => {
+    const router = useRouter()
+  return (
+    <section className="flex w-full justify-center">
+      <div className="flex flex-col py-10 md:py-28 items-center text-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
+
+        <h1 className="text-black max-w-[50rem] text-2xl  md:text-6xl font-bold">
+          Thank you for choosing Lalasia.
+        </h1>
+        <PrimaryButton
+          text="See Your Orders"
+          className="!font-bold"
+          onClick={() => router.push('/orders')}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default CheckoutSuccessSection;

containers/orders-page/orders-section/index.tsx

@@ -13,9 +13,11 @@ console.log(orders)
   return (
     <section className="flex w-full justify-center">
       <div className="flex flex-col py-10 md:py-28 items-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
+        <div className='flex justify-center gap-6 flex-wrap'>
         {orders.map((el,_i) => (
-            <OrderCard key={_i} order={el}/>
-        ))}
+          <OrderCard key={_i} order={el}/>
+          ))}
+          </div>
       </div>
     </section>
   )

containers/orders-page/title-section/index.tsx

@@ -7,7 +7,7 @@ interface OrdersTitleSectionProps {
 const OrdersTitleSection: FC<OrdersTitleSectionProps> = ({  }) => {
   return (
     <section className="flex w-full justify-center">
-      <div className="flex flex-col py-10 md:py-28 items-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
+      <div className="flex flex-col py-10 md:pt-28 items-center  gap-8 md:gap-24 w-full max-w-screen-xl mx-5 md:mx-20">
         <h1 className="text-2xl lg:text-6xl text-black font-bold">Your Orders</h1>
       </div>
     </section>

prisma/migrations/20230914143927_/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `userMail` to the `Order` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Order" ADD COLUMN     "userMail" TEXT NOT NULL;

prisma/schema.prisma

@@ -40,12 +40,14 @@ model Product {
   colors      Color[]
 }
 
+
 model Order {
   id        Int     @id @default(autoincrement())
   products Json[]
   user      User    @relation(fields: [userId], references: [id])
   userId    Int
   price Float
+  userMail String
   date  DateTime
 }
 

services/dateTimeFormatter.ts

@@ -1,10 +1,10 @@
 export const formatDateToSQLDateTime = (date: Date) : string => {
     // Get the ISO string of the Date object
-    const isoString = date.toISOString();
+    const dateString = date.toString();
 
     // Extract the date and time components
-    const datePart = isoString.slice(0, 10);
-    const timePart = isoString.slice(11, 19);
+    const datePart = dateString.slice(0, 10);
+    const timePart = dateString.slice(11, 16);
 
     // Combine them in the SQL datetime format
     const sqlDateTime = `${datePart} ${timePart}`;

types/BasketItem.ts

@@ -9,6 +9,7 @@ export type TBasketItem = {
     color: string;
     colors: string[];
     userId: number;
+    id:number
   };
   id: string;
   color: string;