Merge pull request #4 from Car-Part-Planet/CPP-153

Add Customer Authentication and Order Details

app/(auth)/authorize/page.tsx

@@ -0,0 +1,27 @@
+import { headers } from 'next/headers';
+
+export const runtime = 'edge';
+
+export default async function AuthorizationPage() {
+  const headersList = headers();
+  const access = headersList.get('x-shop-access');
+  if (!access) {
+    console.log('ERROR: No access header');
+    throw new Error('No access header');
+  }
+  console.log('Authorize Access code header:', access);
+  if (access === 'denied') {
+    console.log('Access Denied for Auth');
+    throw new Error('No access allowed');
+  }
+
+  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">Loading...</div>
+        </div>
+      </div>
+    </>
+  );
+}

app/(auth)/login/page.tsx

@@ -0,0 +1,17 @@
+import { LoginMessage } from 'components/auth/login-message';
+
+export const runtime = 'edge';
+
+export default async function LoginPage() {
+  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">
+            <LoginMessage />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

app/(auth)/logout/page.tsx

@@ -0,0 +1,13 @@
+export const runtime = 'edge';
+
+export default async function LogoutPage() {
+  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">Loading...</div>
+        </div>
+      </div>
+    </>
+  );
+}

app/[page]/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({ params }: { params: { page: string } }) {
           {page.title}
         </h1>
       </div>
-      <main>
+      <div>
         <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
           <div className="flex flex-col space-y-16">
             {page.metaobjects?.map((content) => (
@@ -48,7 +48,7 @@ export default async function Page({ params }: { params: { page: string } }) {
             ))}
           </div>
         </div>
-      </main>
+      </div>
     </>
   );
 }

app/account/layout.tsx

@@ -0,0 +1,3 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div className="mx-auto max-w-screen-2xl">{children}</div>;
+}

app/account/loading.tsx

@@ -0,0 +1,34 @@
+import Divider from 'components/divider';
+import Heading from 'components/ui/heading';
+import Skeleton from 'components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="p-6">
+      <Heading className="pb-4" as="h1">
+        Orders
+      </Heading>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="flex w-full flex-col rounded border bg-white p-6">
+          <div className="flex flex-col gap-4">
+            <div>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-20 w-20 flex-none" />
+                <Skeleton />
+              </div>
+            </div>
+          </div>
+          <Divider />
+          <div className="flex flex-col gap-4">
+            <div>
+              <Skeleton className="mb-2 h-5 w-14" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <Skeleton className="w-20" />
+          </div>
+          <Skeleton className="mt-4 h-11" />
+        </div>
+      </div>
+    </div>
+  );
+}

app/account/orders/[id]/loading.tsx

@@ -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>
+  );
+}

app/account/orders/[id]/page.tsx

@@ -0,0 +1,276 @@
+import { CheckCircleIcon, TruckIcon, ArrowLeftIcon } 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';
+import Link from 'next/link';
+import OrderSummaryMobile from 'components/account/orders/order-summary-mobile';
+import { Suspense } from 'react';
+import OrderSummary from 'components/account/orders/order-summary';
+
+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&apos;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&apos;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>
+  );
+}
+
+export default async function OrderPage({ params }: { params: { id: string } }) {
+  const order = await getCustomerOrder(params.id);
+
+  return (
+    <>
+      <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>
+              <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
+            </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">
+            <Fulfillments order={order} />
+            <Unfulfilled order={order} />
+            <OrderDetails order={order} />
+          </div>
+          <Card className="hidden lg:block lg:basis-5/12">
+            <OrderSummary order={order} />
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+}

app/account/page.tsx

@@ -0,0 +1,71 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { getCustomerOrders } from 'lib/shopify';
+import Text from 'components/ui/text';
+import Price from 'components/price';
+import Divider from 'components/divider';
+import { Button } from 'components/button';
+import Heading from 'components/ui/heading';
+import Label from 'components/ui/label';
+import Badge from 'components/ui/badge';
+import { Card } from 'components/ui/card';
+
+export const runtime = 'edge';
+
+export default async function AccountPage() {
+  const orders = await getCustomerOrders();
+
+  return (
+    <div className="p-6">
+      <Heading className="pb-4" as="h1">
+        Orders
+      </Heading>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {orders.map((order, index) => (
+          <div className="relative" key={index}>
+            <Link
+              className="peer absolute left-0 top-0 h-full w-full"
+              href={`/account/orders/${order.id}`}
+            />
+            <Card className="flex h-full flex-col transition-shadow peer-hover:shadow-lg peer-active:shadow-lg">
+              <div className="flex flex-col gap-4">
+                {order.lineItems.map((lineItem, index) => (
+                  <div key={index}>
+                    <div className="flex items-center gap-2">
+                      <Badge content={lineItem.quantity!}>
+                        <Image
+                          src={lineItem?.image?.url}
+                          alt={lineItem?.image?.altText}
+                          width={80}
+                          height={80}
+                          className="rounded border"
+                        />
+                      </Badge>
+                      <Text>{lineItem.title}</Text>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <Divider />
+              <div className="flex flex-1 flex-col justify-end gap-4">
+                <div>
+                  <Text>
+                    {order.lineItems.length} item{order.lineItems.length > 1 && 's'}
+                  </Text>
+                  <Label>Order {order.name}</Label>
+                </div>
+                <Price
+                  amount={order.totalPrice!.amount}
+                  currencyCode={order.totalPrice!.currencyCode}
+                />
+              </div>
+              <Button size="lg" className="mt-4">
+                Activate Warranty
+              </Button>
+            </Card>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -4,6 +4,7 @@ import { GeistSans } from 'geist/font/sans';
 import { ensureStartsWith } from 'lib/utils';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
+import { AuthProvider } from 'contexts/auth-context';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
@@ -35,14 +36,20 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.variable}>
-      <body className="bg-white text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
-        <header>
-          <Banner />
-          <Navbar />
-        </header>
-        <Suspense>
-          <main>{children}</main>
-        </Suspense>
+      <body className="min-h-screen bg-white text-black selection:bg-primary-muted dark:bg-neutral-900 dark:text-white dark:selection:bg-primary-emphasis dark:selection:text-white">
+        <AuthProvider>
+          {/* We need to have this wrapper div because the headless ui popover clickaway event is not working properly */}
+          {/* https://github.com/tailwindlabs/headlessui/issues/2752#issuecomment-1724096430 */}
+          <div className="flex h-screen flex-col">
+            <header>
+              <Banner />
+              <Navbar />
+            </header>
+            <Suspense>
+              <main className="main group flex-1">{children}</main>
+            </Suspense>
+          </div>
+        </AuthProvider>
       </body>
     </html>
   );