crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

add preloading to account's pages

Browse Source
This commit is contained in:
tedraykov
2024-06-21 16:24:45 +03:00
parent 19065c1d82
commit aa29b3071d
12 changed files with 285 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/account/orders/[id]/loading.tsx Normal file
View File

@@ -0,0 +1,29 @@
import Skeleton from 'components/ui/skeleton';
export default function Loading() {
return (
<div className="mx-auto max-w-6xl p-6">
<div className="mb-6 flex justify-between">
<div className="flex items-start gap-2">
<Skeleton className="mt-1 h-6 w-6" />
<div className="flex flex-col gap-2">
<Skeleton className="h-8 w-32" />
<Skeleton className="h-4 w-36" />
</div>
</div>
<div>
<Skeleton className="h-9 w-32" />
</div>
</div>
<div className="flex items-start gap-6">
<div className="flex flex-1 flex-col gap-6">
<Skeleton className="h-72" />
<Skeleton className="h-72" />
</div>
<div className="hidden md:block md:basis-5/12">
<Skeleton className="h-80" />
</div>
</div>
</div>
);
}

118
app/account/orders/[id]/page.tsx
View File

@@ -10,8 +10,9 @@ import Text from 'components/ui/text';
import Price from 'components/price';
import Badge from 'components/ui/badge';
import Link from 'next/link';
import OrderSummaryMobile from 'components/account/orders/order-summary-mobile';
import { Suspense } from 'react';
import Skeleton from 'components/ui/skeleton';
import OrderSummary from 'components/account/orders/order-summary';
export const runtime = 'edge';
@@ -236,105 +237,40 @@ function OrderDetails({ order }: { order: Order }) {
);
}
function OrderSummary({ order }: { order: Order }) {
return (
<div className="flex flex-col gap-6">
<Heading size="sm">Order Summary</Heading>
<div className="flex flex-col gap-6">
{order.lineItems.map((lineItem, index) => (
<div key={index} className="flex items-center gap-4">
<Badge content={lineItem.quantity!}>
<Image
src={lineItem.image.url}
alt={lineItem.image.altText}
width={lineItem.image.width}
height={lineItem.image.height}
className="rounded border"
/>
</Badge>
<div className="flex flex-col gap-2">
<Text>{lineItem.title}</Text>
<Label>{lineItem.sku}</Label>
</div>
<Price
className="text-sm"
amount={lineItem.price!.amount}
currencyCode={lineItem.price!.currencyCode}
/>
</div>
))}
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col">
<div className="flex items-center justify-between">
<Text>Subtotal</Text>
<Price
className="text-sm font-semibold"
amount={order.totalPrice!.amount}
currencyCode={order.totalPrice!.currencyCode}
/>
</div>
<div className="flex items-center justify-between">
<Text>Shipping</Text>
{order.shippingMethod?.price.amount !== '0.0' ? (
<Price
className="text-sm font-semibold"
amount={order.shippingMethod!.price.amount}
currencyCode={order.shippingMethod!.price.currencyCode}
/>
) : (
<Text className="font-semibold">Free</Text>
)}
</div>
</div>
<div className="flex items-center justify-between">
<Heading as="span" size="sm">
Total
</Heading>
<Price
className="font-semibold"
amount={order.totalPrice!.amount}
currencyCode={order.totalPrice!.currencyCode}
/>
</div>
</div>
</div>
);
}
export default async function OrderPage({ params }: { params: { id: string } }) {
const order = await getCustomerOrder(params.id);
return (
<main className="mx-auto max-w-6xl p-6">
<div className="mb-6 flex justify-between">
<div className="flex items-start gap-2">
<Link href="/account">
<ArrowLeftIcon className="mt-1 h-6 w-6" />
</Link>
<div>
<Suspense fallback={<Skeleton />}>
<>
<Suspense>
<OrderSummaryMobile order={order} />
</Suspense>
<div className="mx-auto max-w-6xl p-6">
<div className="mb-6 flex justify-between">
<div className="flex items-start gap-2">
<Link href="/account">
<ArrowLeftIcon className="mt-1 h-6 w-6" />
</Link>
<div>
<Heading as="h1">Order {order.name}</Heading>
</Suspense>
<Label>Confirmed {toPrintDate(order.processedAt)}</Label>
<Label>Confirmed {toPrintDate(order.processedAt)}</Label>
</div>
</div>
<div>
<Button>Activate Warranty</Button>
</div>
</div>
<div>
<Button>Activate Warranty</Button>
</div>
</div>
<div className="flex items-start gap-6">
<div className="flex flex-1 flex-col gap-6">
<Suspense fallback={<Skeleton />}>
<div className="flex items-start gap-6">
<div className="flex flex-1 flex-col gap-6">
<Fulfillments order={order} />
</Suspense>
<Unfulfilled order={order} />
<OrderDetails order={order} />
<Unfulfilled order={order} />
<OrderDetails order={order} />
</div>
<Card className="hidden lg:block lg:basis-5/12">
<OrderSummary order={order} />
</Card>
</div>
<Card className="hidden md:block md:basis-5/12">
<OrderSummary order={order} />
</Card>
</div>
</main>
</>
);
}