Skip to content

Commit

Permalink
feat: implement order history view
Browse files Browse the repository at this point in the history
  • Loading branch information
@SwiichyCode
SwiichyCode committed Feb 6, 2024
1 parent 57eec90 commit 83b071a
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 115 deletions.
1 change: 0 additions & 1 deletion src/app/shop/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { db } from "@/server/db";

import { ProductList } from "@/features/Shop/components/ProductList";

export default async function ShopPage() {
Expand Down
15 changes: 15 additions & 0 deletions src/features/Shop/components/Editor.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import StarterKit from "@tiptap/starter-kit";
import { EditorContent, useEditor } from "@tiptap/react";

type Props = {
content: string;
};

export const Editor = ({ content }: Props) => {
const editor = useEditor({
extensions: [StarterKit.configure({})],
content: content,
editable: false,
});
return <EditorContent editor={editor} />;
};
125 changes: 21 additions & 104 deletions src/features/Shop/components/OrderHistory/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,14 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";

import { Menu } from "@headlessui/react";
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { Order, OrderItem, Prisma, Product } from "@prisma/client";
import { Prisma } from "@prisma/client";
import { formatPriceCents } from "../../utils/formatPrice";
import { Editor } from "../Editor";

export const revalidate = 10;

const orders = [
{
number: "WU88191111",
href: "#",
invoiceHref: "#",
createdDate: "Jul 6, 2021",
createdDatetime: "2021-07-06",
deliveredDate: "July 12, 2021",
deliveredDatetime: "2021-07-12",
total: "$160.00",
products: [
{
id: 1,
name: "Micro Backpack",
description:
"Are you a minimalist looking for a compact carry option? The Micro Backpack is the perfect size for your essential everyday carry items. Wear it like a backpack or carry it like a satchel for all-day use.",
href: "#",
price: "$70.00",
imageSrc:
"https://tailwindui.com/img/ecommerce-images/order-history-page-03-product-01.jpg",
imageAlt:
"Moss green canvas compact backpack with double top zipper, zipper front pouch, and matching carry handle and backpack straps.",
},
// More products...
],
},
// More orders...
];

function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}

type OrderWithOrderItems = Prisma.OrderGetPayload<{
include: { orderItem: { include: { product: true } } };
}>;
Expand All @@ -50,8 +18,6 @@ type Props = {
};

export const OrderHistory = ({ orders }: Props) => {
// const createdDateTime = new Date(orders[0]?.createdAt);
console.log(orders[0]);
return (
<div className="bg-white">
<div className="py-16 sm:py-24">
Expand Down Expand Up @@ -125,103 +91,54 @@ export const OrderHistory = ({ orders }: Props) => {
>
<div className="flex items-center">
<Menu.Button className="-m-2 flex items-center p-2 text-gray-400 hover:text-gray-500">
{/* <span className="sr-only">
Options for order {order.number}
</span> */}
<EllipsisVerticalIcon
className="h-6 w-6"
aria-hidden="true"
/>
</Menu.Button>
</div>

<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
{/* <Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-bottom-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href={order.href}
className={classNames(
active
? "bg-gray-100 text-gray-900"
: "text-gray-700",
"block px-4 py-2 text-sm",
)}
>
View
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href={order.invoiceHref}
className={classNames(
active
? "bg-gray-100 text-gray-900"
: "text-gray-700",
"block px-4 py-2 text-sm",
)}
>
Invoice
</a>
)}
</Menu.Item>
</div>
</Menu.Items> */}
</Transition>
</Menu>

{/* <div className="hidden lg:col-span-2 lg:flex lg:items-center lg:justify-end lg:space-x-4">
<div className="hidden lg:col-span-2 lg:flex lg:items-center lg:justify-end lg:space-x-4">
<a
href={order.href}
href="#"
className="flex items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span>View Order</span>
<span className="sr-only">{order.number}</span>
<span className="sr-only">{order.orderNumber}</span>
</a>
<a
href={order.invoiceHref}
href="#"
className="flex items-center justify-center rounded-md border border-gray-300 bg-white px-2.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span>View Invoice</span>
<span className="sr-only">
for order {order.number}
for order {order.orderNumber}
</span>
</a>
</div> */}
</div>
</div>

{/* Products */}
{/* <h4 className="sr-only">Items</h4>
<h4 className="sr-only">Items</h4>
<ul role="list" className="divide-y divide-gray-200">
{order.products.map((product) => (
{order.orderItem.map(({ product }) => (
<li key={product.id} className="p-4 sm:p-6">
<div className="flex items-center sm:items-start">
<div className="h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-gray-200 sm:h-40 sm:w-40">
<img
src={product.imageSrc}
alt={product.imageAlt}
src={product.pictures[0]}
className="h-full w-full object-cover object-center"
/>
</div>
<div className="ml-6 flex-1 text-sm">
<div className="font-medium text-gray-900 sm:flex sm:justify-between">
<h5>{product.name}</h5>
<p className="mt-2 sm:mt-0">{product.price}</p>
<p className="mt-2 sm:mt-0">${product.price}</p>
</div>
<div className="hidden text-gray-500 sm:mt-2 sm:block">
<Editor content={product.description} />
</div>
<p className="hidden text-gray-500 sm:mt-2 sm:block">
{product.description}
</p>
</div>
</div>

Expand All @@ -233,16 +150,16 @@ export const OrderHistory = ({ orders }: Props) => {
/>
<p className="ml-2 text-sm font-medium text-gray-500">
Delivered on{" "}
<time dateTime={order.deliveredDatetime}>
{/* <time dateTime={order.deliveredDatetime}>
{order.deliveredDate}
</time>
</time> */}
</p>
</div>

<div className="mt-6 flex items-center space-x-4 divide-x divide-gray-200 border-t border-gray-200 pt-4 text-sm font-medium sm:ml-4 sm:mt-0 sm:border-none sm:pt-0">
<div className="flex flex-1 justify-center">
<a
href={product.href}
href={product.slug}
className="whitespace-nowrap text-indigo-600 hover:text-indigo-500"
>
View product
Expand All @@ -260,7 +177,7 @@ export const OrderHistory = ({ orders }: Props) => {
</div>
</li>
))}
</ul> */}
</ul>
</div>
))}
</div>
Expand Down
13 changes: 3 additions & 10 deletions src/features/Shop/components/ProductOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@
import Image from "next/image";
import { useTransition } from "react";
import { useToast } from "@/components/ui/use-toast";
import StarterKit from "@tiptap/starter-kit";
import { EditorContent, useEditor } from "@tiptap/react";
import { CheckIcon, StarIcon } from "@heroicons/react/20/solid";
import { ShieldCheckIcon } from "@heroicons/react/24/outline";
import { Breadcrumb } from "./Breadcrumb";
import ValidationService from "../services/validation.service";

import { addProduct } from "../actions/cart/addproduct.action";
import type { Product } from "@prisma/client";
import type { Session } from "next-auth";
import { isProductAvailable } from "../actions/cart/productavailable.action";
import { useCartContext } from "./CartContext";
import { Editor } from "./Editor";

const reviews = { average: 4, totalCount: 1624 };

Expand All @@ -32,12 +31,6 @@ export const ProductOverview = ({ session, product }: Props) => {
const [isPending, startTransition] = useTransition();
const [optimisticCart, setOptimisticCart] = useCartContext();

const editor = useEditor({
extensions: [StarterKit.configure({})],
content: description,
editable: false,
});

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();

Expand Down Expand Up @@ -139,7 +132,7 @@ export const ProductOverview = ({ session, product }: Props) => {

<div className="mt-4 space-y-6">
<div className="text-base text-gray-500">
<EditorContent editor={editor} />
<Editor content={description} />
</div>
</div>

Expand Down

0 comments on commit 83b071a

Please sign in to comment.