mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
add order details page
This commit is contained in:
tedraykov
328
app/account/orders/[id]/page.tsx
Normal file
328
app/account/orders/[id]/page.tsx
Normal file
@@ -0,0 +1,328 @@
|
||||
import { CheckCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
|
||||
import Image from 'next/image';
|
||||
import { Button } from 'components/button';
|
||||
import { Card } from 'components/ui/card';
|
||||
import Heading from 'components/ui/heading';
|
||||
import Label from 'components/ui/label';
|
||||
import { getCustomerOrder } from 'lib/shopify';
|
||||
import { Fulfillment, Order } from 'lib/shopify/types';
|
||||
import Text from 'components/ui/text';
|
||||
import Price from 'components/price';
|
||||
import Badge from 'components/ui/badge';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
function toPrintDate(date: string) {
|
||||
return new Date(date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
function Unfulfilled({ order }: { order: Order }) {
|
||||
// Build a map of line item IDs to quantities fulfilled
|
||||
const fulfilledLineItems = order.fulfillments.reduce<Map<string, number>>((acc, fulfillment) => {
|
||||
fulfillment.fulfilledLineItems.forEach((lineItem) => {
|
||||
acc.set(lineItem.id, (acc.get(lineItem.id) || 0) + lineItem.quantity);
|
||||
});
|
||||
return acc;
|
||||
}, new Map<string, number>());
|
||||
|
||||
// Filter out line items that have not been fulfilled
|
||||
const unfulfilledLineItems = order.lineItems.filter((lineItem) => {
|
||||
const fulfilledQuantity = fulfilledLineItems.get(lineItem.id) || 0;
|
||||
return lineItem.quantity! > fulfilledQuantity;
|
||||
});
|
||||
|
||||
if (unfulfilledLineItems.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleIcon className="h-4 w-4" />
|
||||
<Heading as="h3" size="sm">
|
||||
Confirmed
|
||||
</Heading>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex w-4 justify-center">
|
||||
<span className="border border-dashed border-content-subtle" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label>{toPrintDate(order.processedAt)}</Label>
|
||||
<Label>We've received your order.</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function FulfillmentCard({
|
||||
fulfillment,
|
||||
processedAt,
|
||||
isPartial
|
||||
}: {
|
||||
fulfillment: Fulfillment;
|
||||
processedAt: string;
|
||||
isPartial: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
{isPartial && (
|
||||
<div className="mb-6 flex flex-wrap gap-2">
|
||||
{fulfillment.fulfilledLineItems.map((lineItem, index) => (
|
||||
<Badge key={index} content={lineItem.quantity}>
|
||||
<Image
|
||||
alt={lineItem.image.altText}
|
||||
src={lineItem.image.url}
|
||||
width={62}
|
||||
height={62}
|
||||
className="flex flex-col gap-2 rounded border"
|
||||
/>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-6 flex flex-col gap-2">
|
||||
{fulfillment.trackingInformation.map((tracking, index) => (
|
||||
<div key={index} className="flex w-fit flex-col">
|
||||
<Label>Courier: {tracking.company}</Label>
|
||||
<Label>
|
||||
{' '}
|
||||
Tracking number: <span className="text-primary">{tracking.number}</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<TruckIcon className="h-4 w-4" />
|
||||
<Heading size="sm">On its way</Heading>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex w-4 justify-center">
|
||||
<span className="border border-dashed border-content-subtle" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label>Updated {toPrintDate(fulfillment.createdAt)}</Label>
|
||||
<Label>This shipment is on its way.</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircleIcon className="h-4 w-4" />
|
||||
<Heading as="h3" size="sm">
|
||||
Confirmed
|
||||
</Heading>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex w-4 justify-center">
|
||||
<span className="border border-dashed border-content-subtle" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label>{toPrintDate(processedAt)}</Label>
|
||||
<Label>We've received your order.</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Fulfillments({ order }: { order: Order }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{order.fulfillments.map((fulfillment, index) => (
|
||||
<FulfillmentCard
|
||||
key={index}
|
||||
fulfillment={fulfillment}
|
||||
processedAt={order.processedAt}
|
||||
isPartial={order.fulfillments.length > 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PaymentsDetails({ order }: { order: Order }) {
|
||||
return (
|
||||
<>
|
||||
{order.transactions.map((transaction, index) => (
|
||||
<div key={index} className="flex items-start gap-2">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={transaction.paymentIcon.url} alt={transaction.paymentIcon.altText} width={36} />
|
||||
<div>
|
||||
<Text>
|
||||
Ending with {transaction.paymentDetails.last4} -
|
||||
<Price
|
||||
as="span"
|
||||
amount={transaction.transactionAmount.amount}
|
||||
currencyCode={transaction.transactionAmount.currencyCode}
|
||||
/>
|
||||
</Text>
|
||||
<Label>{toPrintDate(transaction.processedAt)}</Label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function OrderDetails({ order }: { order: Order }) {
|
||||
return (
|
||||
<Card className="flex flex-col gap-4">
|
||||
<Heading size="sm">Order Details</Heading>
|
||||
<div className="flex flex-col justify-between sm:flex-row">
|
||||
<div className="flex flex-1 flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Contact Information</Label>
|
||||
<div>
|
||||
<Text>{order.customer!.displayName}</Text>
|
||||
<Text>{order.customer!.emailAddress}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Shipping Address</Label>
|
||||
<div>
|
||||
<Text>
|
||||
{order.shippingAddress.firstName} {order.shippingAddress.lastName}
|
||||
</Text>
|
||||
<Text>{order.shippingAddress.address1}</Text>
|
||||
{order.shippingAddress.address2 && <Text>{order.shippingAddress.address2}</Text>}
|
||||
<Text>
|
||||
{order.shippingAddress.city} {order.shippingAddress.provinceCode}{' '}
|
||||
{order.shippingAddress.zip}
|
||||
</Text>
|
||||
<Text>{order.shippingAddress.country}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Shipping Method</Label>
|
||||
<Text>{order.shippingMethod.name}</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Payment</Label>
|
||||
<PaymentsDetails order={order} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label>Billing Address</Label>
|
||||
<div>
|
||||
<Text>
|
||||
{order.billingAddress.firstName} {order.billingAddress.lastName}
|
||||
</Text>
|
||||
<Text>{order.billingAddress.address1}</Text>
|
||||
{order.billingAddress.address2 && <Text>{order.billingAddress.address2}</Text>}
|
||||
<Text>
|
||||
{order.billingAddress.city} {order.billingAddress.provinceCode}{' '}
|
||||
{order.billingAddress.zip}
|
||||
</Text>
|
||||
<Text>{order.billingAddress.country}</Text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<Heading as="h1">Order {order.name}</Heading>
|
||||
<Label>Confirmed {toPrintDate(order.processedAt)}</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Button>Activate Warranty</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="flex flex-1 flex-col gap-6">
|
||||
<Fulfillments order={order} />
|
||||
<Unfulfilled order={order} />
|
||||
<OrderDetails order={order} />
|
||||
</div>
|
||||
<Card className="hidden md:block md:basis-5/12">
|
||||
<OrderSummary order={order} />
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +1,104 @@
|
||||
import { headers } from 'next/headers';
|
||||
import { AccountProfile } from 'components/account/account-profile';
|
||||
import { AccountOrdersHistory } from 'components/account/account-orders-history';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { shopifyCustomerFetch } from 'lib/shopify/customer/index';
|
||||
import { CUSTOMER_DETAILS_QUERY } from 'lib/shopify/customer/queries/customer';
|
||||
import { CustomerDetailsData } from 'lib/shopify/customer/types';
|
||||
import { TAGS } from 'lib/shopify/customer/constants';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { getCustomerOrders } from 'lib/shopify';
|
||||
import Price from 'components/price';
|
||||
import Divider from 'components/divider';
|
||||
import { Button } from 'components/button';
|
||||
|
||||
export const runtime = 'edge';
|
||||
|
||||
export default async function AccountPage() {
|
||||
const headersList = headers();
|
||||
const access = headersList.get('x-shop-customer-token');
|
||||
if (!access) {
|
||||
console.log('ERROR: No access header account');
|
||||
//I'm not sure what's better here. Throw error or just log out??
|
||||
//redirect gets rid of call cookies
|
||||
redirect('/logout');
|
||||
//throw new Error("No access header")
|
||||
}
|
||||
//console.log("Authorize Access code header:", access)
|
||||
if (access === 'denied') {
|
||||
console.log('Access Denied for Auth account');
|
||||
redirect('/logout');
|
||||
//throw new Error("No access allowed")
|
||||
}
|
||||
const customerAccessToken = access;
|
||||
|
||||
//this is needed b/c of strange way server components handle redirects etc.
|
||||
//see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#redirecting
|
||||
//can only redirect outside of try/catch!
|
||||
let success = true;
|
||||
let errorMessage;
|
||||
let customerData;
|
||||
let orders;
|
||||
|
||||
try {
|
||||
const responseCustomerDetails = await shopifyCustomerFetch<CustomerDetailsData>({
|
||||
customerToken: customerAccessToken,
|
||||
cache: 'no-store',
|
||||
query: CUSTOMER_DETAILS_QUERY,
|
||||
tags: [TAGS.customer]
|
||||
});
|
||||
//console.log("userDetails", responseCustomerDetails)
|
||||
const userDetails = responseCustomerDetails.body;
|
||||
if (!userDetails) {
|
||||
throw new Error('Error getting actual user data Account page.');
|
||||
}
|
||||
customerData = userDetails?.data?.customer;
|
||||
orders = customerData?.orders?.edges;
|
||||
//console.log ("Details",orders)
|
||||
} catch (e) {
|
||||
//they don't recognize this error in TS!
|
||||
//@ts-ignore
|
||||
errorMessage = e?.error?.toString() ?? 'Unknown Error';
|
||||
console.log('error customer fetch account', e);
|
||||
if (errorMessage !== 'unauthorized') {
|
||||
throw new Error('Error getting actual user data Account page.');
|
||||
} else {
|
||||
console.log('Unauthorized access. Set to false and redirect');
|
||||
success = false;
|
||||
}
|
||||
}
|
||||
if (!success && errorMessage === 'unauthorized') redirect('/logout');
|
||||
//revalidateTag('posts') // Update cached posts //FIX
|
||||
// if (!access) {
|
||||
// redirect('/logout');
|
||||
// }
|
||||
// if (access === 'denied') {
|
||||
// redirect('/logout');
|
||||
// }
|
||||
//
|
||||
// const customerAccessToken = access;
|
||||
//
|
||||
// //this is needed b/c of strange way server components handle redirects etc.
|
||||
// //see https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#redirecting
|
||||
// //can only redirect outside of try/catch!
|
||||
// let success = true;
|
||||
// let errorMessage;
|
||||
// let customerData;
|
||||
// let orders;
|
||||
//
|
||||
// try {
|
||||
// const responseCustomerDetails = await shopifyCustomerFetch<CustomerDetailsData>({
|
||||
// customerToken: customerAccessToken,
|
||||
// query: CUSTOMER_DETAILS_QUERY,
|
||||
// tags: [TAGS.customer]
|
||||
// });
|
||||
// const userDetails = responseCustomerDetails.body;
|
||||
// if (!userDetails) {
|
||||
// throw new Error('Error getting actual user data Account page.');
|
||||
// }
|
||||
// customerData = userDetails?.data?.customer;
|
||||
// orders = customerData?.orders?.edges;
|
||||
// //console.log ("Details",orders)
|
||||
// } catch (e) {
|
||||
// //they don't recognize this error in TS!
|
||||
// //@ts-ignore
|
||||
// errorMessage = e?.error?.toString() ?? 'Unknown Error';
|
||||
// console.log('error customer fetch account', e);
|
||||
// if (errorMessage !== 'unauthorized') {
|
||||
// throw new Error('Error getting actual user data Account page.');
|
||||
// } else {
|
||||
// console.log('Unauthorized access. Set to false and redirect');
|
||||
// success = false;
|
||||
// }
|
||||
// }
|
||||
// if (!success && errorMessage === 'unauthorized') redirect('/logout');
|
||||
// // revalidateTag('posts') // Update cached posts //FIX
|
||||
const orders = await getCustomerOrders();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto max-w-screen-2xl px-4">
|
||||
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
|
||||
<div className="h-full w-full">
|
||||
<div> Welcome: {customerData?.emailAddress.emailAddress}</div>
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
<div className="mt-5">
|
||||
<AccountProfile />
|
||||
<div className="mx-auto mt-4 max-w-screen-2xl px-4">
|
||||
<h3 className="pb-4 text-2xl font-bold">Orders</h3>
|
||||
{orders.map((order, index) => (
|
||||
<div className="relative" key={index}>
|
||||
<Link
|
||||
className="absolute left-0 top-0 h-full w-full"
|
||||
href={`/account/orders/${order.id}`}
|
||||
></Link>
|
||||
<div className="flex w-full flex-col rounded border bg-white p-6 md:w-fit">
|
||||
<div className="flex flex-col gap-2">
|
||||
{order.lineItems.slice(0, 2).map((lineItem, index) => (
|
||||
<div key={index}>
|
||||
<div className="flex gap-2">
|
||||
<Image
|
||||
src={lineItem?.image?.url}
|
||||
alt={lineItem?.image?.altText}
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div>
|
||||
<p>{lineItem.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Divider />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
<div className="mt-5">{orders && <AccountOrdersHistory orders={orders} />}</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<p className="font-bold">
|
||||
{order.lineItems.length} item{order.lineItems.length > 1 && 's'}
|
||||
</p>
|
||||
<p className="text-gray-500">Order {order.name}</p>
|
||||
</div>
|
||||
<Price
|
||||
className="text-lg font-medium text-gray-900"
|
||||
amount={order.totalPrice!.amount}
|
||||
currencyCode={order.totalPrice!.currencyCode}
|
||||
/>
|
||||
</div>
|
||||
<Button size="lg">Activate Warranty</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user