Order Confirmation

app/account/(orderId)/orders/[id]/page.tsx

@@ -1,18 +1,19 @@
 import { ArrowLeftIcon, CheckCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
-import ActivateWarranty from 'components/orders/activate-warranty';
+import OrderConfirmation from 'components/orders/order-confirmation';
+import PaymentsDetails from 'components/orders/payment-details';
 import OrderSummary from 'components/orders/order-summary';
 import OrderSummaryMobile from 'components/orders/order-summary-mobile';
-import Price from 'components/price';
 import Badge from 'components/ui/badge';
-import { Card } from 'components/ui/card';
+import { Card } from 'components/ui';
 import Heading from 'components/ui/heading';
 import Label from 'components/ui/label';
 import Text from 'components/ui/text';
-import { getCustomerOrder, getOrderMetafields } from 'lib/shopify';
+import { getCustomerOrder } from 'lib/shopify';
 import { Fulfillment, Order } from 'lib/shopify/types';
 import { toPrintDate } from 'lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
+import ActivateWarranty from 'components/orders/activate-warranty';
 
 function Unfulfilled({ order }: { order: Order }) {
   // Build a map of line item IDs to quantities fulfilled
@@ -144,30 +145,6 @@ function Fulfillments({ order }: { order: Order }) {
   );
 }
 
-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">
@@ -228,10 +205,7 @@ function OrderDetails({ order }: { order: Order }) {
 }
 
 export default async function OrderPage({ params }: { params: { id: string } }) {
-  const [order, orderMetafields] = await Promise.all([
-    getCustomerOrder(params.id),
-    getOrderMetafields(params.id)
-  ]);
+  const order = await getCustomerOrder(params.id);
 
   return (
     <>
@@ -247,7 +221,10 @@ export default async function OrderPage({ params }: { params: { id: string } })
               <Label>Confirmed {toPrintDate(order.processedAt)}</Label>
             </div>
           </div>
-          <ActivateWarranty order={order} orderMetafields={orderMetafields} />
+          <div className="flex items-start gap-2">
+            <OrderConfirmation order={order} />
+            <ActivateWarranty order={order} />
+          </div>
         </div>
         <div className="flex items-start gap-6">
           <div className="flex flex-1 flex-col gap-6">

app/account/(orders)/page.tsx

@@ -1,18 +1,17 @@
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import OrderConfirmation from 'components/orders/order-confirmation';
 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 { getCustomerOrders } from 'lib/shopify';
+import { isBeforeToday, toPrintDate } from 'lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
+import { Button } from 'components/ui';
 
 export default async function AccountPage() {
-  const [orders, ordersMetafields] = await Promise.all([
-    getCustomerOrders(),
-    getOrdersMetafields()
-  ]);
+  const orders = await getCustomerOrders();
 
   return (
     <div className="py-5 sm:py-10">
@@ -54,17 +53,19 @@ export default async function AccountPage() {
                     )}
                   </dl>
 
-                  <MobileOrderActions order={order} orderMetafields={ordersMetafields[order.id]} />
+                  <MobileOrderActions order={order} />
 
                   <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 href={`/account/orders/${order.normalizedId}`} passHref legacyBehavior>
+                      <Button as="a">
+                        View Order
+                        <span className="sr-only">{order.normalizedId}</span>
+                      </Button>
                     </Link>
-                    <ActivateWarranty order={order} orderMetafields={ordersMetafields[order.id]} />
+                    {!isBeforeToday(order?.warrantyActivationDeadline) && (
+                      <ActivateWarranty order={order} />
+                    )}
+                    {!order.orderConfirmation && <OrderConfirmation order={order} />}
                   </div>
                 </div>