84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import OrderHistory from '@/components/shopify/order-history';
|
|
import type { Customer } from '@/services/shopify/customer';
|
|
|
|
export interface AccountOrdersProps {
|
|
title?: string;
|
|
/** Shown while signed out — the route guard normally redirects first. */
|
|
signedOutMessage?: string;
|
|
emptyMessage?: string;
|
|
limit?: number;
|
|
}
|
|
|
|
/**
|
|
* Client-side wrapper so order history can live in a page.json alongside the
|
|
* other blocks. `/account/page.tsx` still guards the route server-side; this
|
|
* re-reads the session through `/api/account/orders` so the block works the
|
|
* same whether it is rendered by the page or previewed in the editor.
|
|
*/
|
|
const AccountOrders: React.FC<AccountOrdersProps> = ({
|
|
title = 'Order history',
|
|
signedOutMessage = 'Sign in to see your orders.',
|
|
emptyMessage = "You haven't placed any orders yet.",
|
|
limit = 20,
|
|
}) => {
|
|
const [customer, setCustomer] = useState<Customer | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
fetch(`/api/account/orders?orders=${limit}`)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (!cancelled) setCustomer(data.customer ?? null);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setCustomer(null);
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [limit]);
|
|
|
|
const orderCount = customer?.orders?.edges.length ?? 0;
|
|
|
|
return (
|
|
<main className="max-w-screen-2xl mx-auto w-full px-8 py-12">
|
|
<h1 className="text-2xl md:text-3xl font-normal text-foreground">
|
|
{title}
|
|
</h1>
|
|
|
|
{customer && (
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{customer.displayName} · {customer.email}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-10">
|
|
{loading ? (
|
|
<div className="animate-pulse space-y-3">
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="h-20 bg-zinc-100" />
|
|
))}
|
|
</div>
|
|
) : !customer ? (
|
|
<p className="text-sm text-muted-foreground">{signedOutMessage}</p>
|
|
) : orderCount === 0 ? (
|
|
<p className="text-sm text-muted-foreground">{emptyMessage}</p>
|
|
) : (
|
|
<OrderHistory customer={customer} />
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default AccountOrders;
|