feat: add activate warranty to order details page

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/account/(orders)/page.tsx

@@ -0,0 +1,114 @@
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import ActivateWarranty from 'components/orders/activate-warranty';
+import MobileOrderActions from 'components/orders/mobile-order-actions';
+import OrdersHeader from 'components/orders/orders-header';
+import Price from 'components/price';
+import { getCustomerOrders, getOrdersMetafields } from 'lib/shopify';
+import { toPrintDate } from 'lib/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default async function AccountPage() {
+  const [orders, ordersMetafields] = await Promise.all([
+    getCustomerOrders(),
+    getOrdersMetafields()
+  ]);
+
+  return (
+    <div className="py-5 sm:py-10">
+      <OrdersHeader />
+      <div className="mt-10">
+        <h2 className="sr-only">Recent orders</h2>
+        <div className="mx-auto max-w-7xl sm:px-2 lg:px-8">
+          <div className="mx-auto max-w-2xl space-y-8 sm:px-4 lg:max-w-4xl lg:px-0">
+            {orders.map((order) => (
+              <div
+                className="border-b border-t border-gray-200 bg-white shadow-sm sm:rounded-lg sm:border"
+                key={order.normalizedId}
+              >
+                <h3 className="sr-only">
+                  Order placed on <time dateTime={order.createdAt}>{order.createdAt}</time>
+                </h3>
+                <div className="flex items-center border-b border-gray-200 p-4 sm:grid sm:grid-cols-4 sm:gap-x-6 sm:p-6">
+                  <dl className="grid flex-1 grid-cols-2 gap-x-6 text-sm sm:col-span-3 sm:grid-cols-3 lg:col-span-2">
+                    <div>
+                      <dt className="font-medium text-gray-900">Order</dt>
+                      <dd className="mt-1 text-gray-500">{order.name}</dd>
+                    </div>
+                    <div className="hidden sm:block">
+                      <dt className="font-medium text-gray-900">Date placed</dt>
+                      <dd className="mt-1 text-gray-500">
+                        <time dateTime={order.createdAt}>{toPrintDate(order.createdAt)}</time>
+                      </dd>
+                    </div>
+                    {order.totalPrice && (
+                      <div>
+                        <dt className="font-medium text-gray-900">Total amount</dt>
+                        <Price
+                          as="dd"
+                          className="mt-1 font-medium text-gray-900"
+                          amount={order.totalPrice.amount}
+                          currencyCode={order.totalPrice.currencyCode}
+                        />
+                      </div>
+                    )}
+                  </dl>
+
+                  <MobileOrderActions order={order} orderMetafields={ordersMetafields[order.id]} />
+
+                  <div className="hidden lg:col-span-2 lg:flex lg:items-center lg:justify-end lg:space-x-4">
+                    <Link
+                      href={`/account/orders/${order.normalizedId}`}
+                      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-blue-500 focus:ring-offset-2"
+                    >
+                      <span>View Order</span>
+                      <span className="sr-only">{order.normalizedId}</span>
+                    </Link>
+                    <ActivateWarranty order={order} orderMetafields={ordersMetafields[order.id]} />
+                  </div>
+                </div>
+
+                <h4 className="sr-only">Items</h4>
+                <ul role="list" className="divide-y divide-gray-200">
+                  {order.lineItems.map((item) => (
+                    <li key={item.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-100">
+                          {item.image ? (
+                            <Image
+                              src={item.image.url}
+                              width={item.image.width}
+                              height={item.image.height}
+                              alt={item.image.altText || item.title || 'Product Image'}
+                              className="h-full w-full object-cover object-center"
+                            />
+                          ) : (
+                            <div
+                              className="flex h-full w-full items-center justify-center"
+                              title="Missing Product Image"
+                            >
+                              <InformationCircleIcon className="size-8 text-gray-400" />
+                            </div>
+                          )}
+                        </div>
+                        <div className="ml-6 flex-1 text-sm">
+                          <div className="font-medium text-gray-900 sm:flex sm:justify-between">
+                            <h5>{item.title}</h5>
+                            {item.price && <Price {...item.price} className="mt-2 sm:mt-0" />}
+                          </div>
+                          <p className="hidden text-gray-500 sm:mt-2 sm:block">
+                            {item.variantTitle}
+                          </p>
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}