polish order confirmation in orders list and order details pages

app/account/(orders)/page.tsx

@@ -62,7 +62,7 @@ export default async function AccountPage() {
                         <span className="sr-only">{order.normalizedId}</span>
                       </Button>
                     </Link>
-                    {!isBeforeToday(order?.warrantyActivationDeadline) && (
+                    {!isBeforeToday(order?.warrantyActivationDeadline?.value) && (
                       <ActivateWarranty order={order} />
                     )}
                     {!order.orderConfirmation && <OrderConfirmation order={order} />}

components/filters/hompage-filters.tsx

@@ -1,10 +1,10 @@
-import { getMenu, getMetaobjects } from 'lib/shopify';
+import { getAllMetaobjects, getMenu } from 'lib/shopify';
 import FiltersList from './filters-list';
 
 const HomePageFilters = async () => {
-  const yearsData = getMetaobjects('make_model_year_composite');
-  const modelsData = getMetaobjects('make_model_composite');
-  const makesData = getMetaobjects('make');
+  const yearsData = getAllMetaobjects('make_model_year_composite');
+  const modelsData = getAllMetaobjects('make_model_composite');
+  const makesData = getAllMetaobjects('make');
 
   const [years, models, makes] = await Promise.all([yearsData, modelsData, makesData]);
   const menu = await getMenu('main-menu');

components/orders/actions.ts

@@ -1,95 +0,0 @@
-'use server';
-
-import { handleUploadFile } from 'components/form/file-input/actions';
-import { TAGS } from 'lib/constants';
-import { updateOrderMetafields } from 'lib/shopify';
-import { ShopifyOrderMetafield, UpdateOrderMetafieldInput } from 'lib/shopify/types';
-import { revalidateTag } from 'next/cache';
-
-const getMetafieldValue = (
-  key: keyof ShopifyOrderMetafield,
-  newValue: { value?: string | null; type: string; key: string },
-  orderMetafields?: ShopifyOrderMetafield
-): UpdateOrderMetafieldInput => {
-  return orderMetafields?.[key]?.id
-    ? { id: orderMetafields[key]?.id!, value: newValue.value, key: newValue.key }
-    : { ...newValue, namespace: 'custom' };
-};
-
-export const activateWarranty = async (
-  orderId: string,
-  formData: FormData,
-  orderMetafields?: ShopifyOrderMetafield
-) => {
-  let odometerFileId = null;
-  let installationFileId = null;
-  const odometerFile = formData.get('warranty_activation_odometer');
-  const installationFile = formData.get('warranty_activation_installation');
-  if (odometerFile) {
-    odometerFileId = await handleUploadFile({ file: odometerFile as File });
-  }
-
-  if (installationFile) {
-    installationFileId = await handleUploadFile({ file: installationFile as File });
-  }
-  console.log(formData.get('warranty_activation_self_install'));
-  // https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/orderUpdate
-  const rawFormData = [
-    getMetafieldValue(
-      'warrantyActivationOdometer',
-      {
-        key: 'warranty_activation_odometer',
-        value: odometerFileId,
-        type: 'file_reference'
-      },
-      orderMetafields
-    ),
-    getMetafieldValue(
-      'warrantyActivationInstallation',
-      {
-        key: 'warranty_activation_installation',
-        value: installationFileId,
-        type: 'file_reference'
-      },
-      orderMetafields
-    ),
-    getMetafieldValue(
-      'warrantyActivationSelfInstall',
-      {
-        key: 'warranty_activation_self_install',
-        value: formData.get('warranty_activation_self_install') === 'on' ? 'true' : 'false',
-        type: 'boolean'
-      },
-      orderMetafields
-    ),
-    getMetafieldValue(
-      'warrantyActivationMileage',
-      {
-        key: 'warranty_activation_mileage',
-        value: formData.get('warranty_activation_mileage') as string | null,
-        type: 'number_integer'
-      },
-      orderMetafields
-    ),
-    getMetafieldValue(
-      'warrantyActivationVIN',
-      {
-        key: 'warranty_activation_vin',
-        value: formData.get('warranty_activation_vin') as string | null,
-        type: 'single_line_text_field'
-      },
-      orderMetafields
-    )
-  ];
-
-  try {
-    await updateOrderMetafields({
-      orderId,
-      metafields: rawFormData
-    });
-
-    revalidateTag(TAGS.orderMetafields);
-  } catch (error) {
-    console.log('activateWarranty action', error);
-  }
-};

components/orders/actions.tsx

@@ -5,10 +5,25 @@ import OrderConfirmationPdf from 'components/orders/order-confirmation-pdf';
 import { handleUploadFile } from 'components/form/file-input/actions';
 import { TAGS } from 'lib/constants';
 import { updateOrderMetafields } from 'lib/shopify';
-import { Order, OrderConfirmationContent } from 'lib/shopify/types';
+import {
+  Order,
+  OrderConfirmationContent,
+  ShopifyOrderMetafield,
+  UpdateOrderMetafieldInput
+} from 'lib/shopify/types';
 import { revalidateTag } from 'next/cache';
 
-export const activateWarranty = async (orderId: string, formData: FormData) => {
+const getMetafieldValue = (
+  key: keyof ShopifyOrderMetafield,
+  newValue: { value?: string | null; type: string; key: string },
+  orderMetafields?: ShopifyOrderMetafield
+): UpdateOrderMetafieldInput => {
+  return orderMetafields?.[key]?.id
+    ? { id: orderMetafields[key]?.id!, value: newValue.value, key: newValue.key }
+    : { ...newValue, namespace: 'custom' };
+};
+
+export const activateWarranty = async (order: Order, formData: FormData) => {
   let odometerFileId = null;
   let installationFileId = null;
   const odometerFile = formData.get('warranty_activation_odometer');
@@ -21,24 +36,58 @@ export const activateWarranty = async (orderId: string, formData: FormData) => {
     installationFileId = await handleUploadFile({ file: installationFile as File });
   }
 
+  // https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/orderUpdate
   const rawFormData = [
-    { key: 'warranty_activation_odometer', value: odometerFileId, type: 'file_reference' },
-    { key: 'warranty_activation_installation', value: installationFileId, type: 'file_reference' },
-    {
-      key: 'warranty_activation_mileage',
-      value: formData.get('warranty_activation_mileage') as string | null,
-      type: 'number_integer'
-    },
-    {
-      key: 'warranty_activation_vin',
-      value: formData.get('warranty_activation_vin') as string | null,
-      type: 'single_line_text_field'
-    }
+    getMetafieldValue(
+      'warrantyActivationOdometer',
+      {
+        key: 'warranty_activation_odometer',
+        value: odometerFileId,
+        type: 'file_reference'
+      },
+      order
+    ),
+    getMetafieldValue(
+      'warrantyActivationInstallation',
+      {
+        key: 'warranty_activation_installation',
+        value: installationFileId,
+        type: 'file_reference'
+      },
+      order
+    ),
+    getMetafieldValue(
+      'warrantyActivationSelfInstall',
+      {
+        key: 'warranty_activation_self_install',
+        value: formData.get('warranty_activation_self_install') === 'on' ? 'true' : 'false',
+        type: 'boolean'
+      },
+      order
+    ),
+    getMetafieldValue(
+      'warrantyActivationMileage',
+      {
+        key: 'warranty_activation_mileage',
+        value: formData.get('warranty_activation_mileage') as string | null,
+        type: 'number_integer'
+      },
+      order
+    ),
+    getMetafieldValue(
+      'warrantyActivationVIN',
+      {
+        key: 'warranty_activation_vin',
+        value: formData.get('warranty_activation_vin') as string | null,
+        type: 'single_line_text_field'
+      },
+      order
+    )
   ];
 
   try {
     await updateOrderMetafields({
-      orderId,
+      orderId: order.id,
       metafields: rawFormData
     });
 
@@ -91,7 +140,12 @@ export const confirmOrder = async ({ order, content, formData }: ConfirmOrderOpt
   const confirmationPDFId = await handleUploadFile({ file });
 
   const rawFormData = [
-    { key: 'customer_confirmation', value: confirmationPDFId, type: 'file_reference' }
+    {
+      key: 'customer_confirmation',
+      value: confirmationPDFId,
+      type: 'file_reference',
+      namespace: 'custom'
+    }
   ];
 
   try {

components/orders/activate-warranty-modal.tsx

@@ -6,23 +6,17 @@ import CheckboxField from 'components/form/checkbox-field';
 import FileInput from 'components/form/file-input';
 import Input from 'components/form/input-field';
 import LoadingDots from 'components/loading-dots';
-import { ShopifyOrderMetafield } from 'lib/shopify/types';
+import { Order } from 'lib/shopify/types';
 import { FormEventHandler, useRef, useTransition } from 'react';
 import { activateWarranty } from './actions';
 
 type ActivateWarrantyModalProps = {
   isOpen: boolean;
   onClose: () => void;
-  orderId: string;
-  orderMetafields?: ShopifyOrderMetafield;
+  order: Order;
 };
 
-function ActivateWarrantyModal({
-  onClose,
-  isOpen,
-  orderId,
-  orderMetafields
-}: ActivateWarrantyModalProps) {
+function ActivateWarrantyModal({ onClose, isOpen, order }: ActivateWarrantyModalProps) {
   const [pending, startTransition] = useTransition();
   const formRef = useRef<HTMLFormElement>(null);
 
@@ -33,7 +27,7 @@ function ActivateWarrantyModal({
     const formData = new FormData(form);
 
     startTransition(async () => {
-      await activateWarranty(orderId, formData, orderMetafields);
+      await activateWarranty(order, formData);
       form.reset();
       onClose();
     });
@@ -59,28 +53,28 @@ function ActivateWarrantyModal({
               <FileInput
                 label="Odometer"
                 name="warranty_activation_odometer"
-                fileId={orderMetafields?.warrantyActivationOdometer?.value}
+                fileId={order?.warrantyActivationOdometer?.value}
               />
               <FileInput
                 label="Installation Receipt"
                 name="warranty_activation_installation"
-                fileId={orderMetafields?.warrantyActivationInstallation?.value}
+                fileId={order?.warrantyActivationInstallation?.value}
               />
               <CheckboxField
                 label="Self Installed"
                 name="warranty_activation_self_install"
-                defaultChecked={orderMetafields?.warrantyActivationSelfInstall?.value === 'true'}
+                defaultChecked={order?.warrantyActivationSelfInstall?.value === 'true'}
               />
               <Input
                 label="Customer Mileage"
                 name="warranty_activation_mileage"
                 type="number"
-                defaultValue={orderMetafields?.warrantyActivationMileage?.value}
+                defaultValue={order?.warrantyActivationMileage?.value}
               />
               <Input
                 label="Customer VIN"
                 name="warranty_activation_vin"
-                defaultValue={orderMetafields?.warrantyActivationVIN?.value}
+                defaultValue={order?.warrantyActivationVIN?.value}
               />
             </div>
             <div className="mt-4 flex w-full justify-end gap-4">

components/orders/activate-warranty.tsx

@@ -5,6 +5,7 @@ import { isBeforeToday } from 'lib/utils';
 import { useState } from 'react';
 import ActivateWarrantyModal from './activate-warranty-modal';
 import WarrantyActivatedBadge from './warranty-activated-badge';
+import { Button } from 'components/ui';
 
 type ActivateWarrantyModalProps = {
   order: Order;
@@ -12,7 +13,7 @@ type ActivateWarrantyModalProps = {
 
 const ActivateWarranty = ({ order }: ActivateWarrantyModalProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const isWarrantyActivated = order?.warrantyStatus === WarrantyStatus.Activated;
+  const isWarrantyActivated = order?.warrantyStatus?.value === WarrantyStatus.Activated;
   const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline?.value);
 
   if (isWarrantyActivated) {
@@ -25,13 +26,8 @@ const ActivateWarranty = ({ order }: ActivateWarrantyModalProps) => {
 
   return (
     <>
-      <button
-        className="flex h-fit 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"
-        onClick={() => setIsOpen(true)}
-      >
-        Activate Warranty
-      </button>
-      <ActivateWarrantyModal isOpen={isOpen} onClose={() => setIsOpen(false)} orderId={order.id} />
+      <Button onClick={() => setIsOpen(true)}>Activate Warranty</Button>
+      <ActivateWarrantyModal isOpen={isOpen} onClose={() => setIsOpen(false)} order={order} />
     </>
   );
 };

components/orders/mobile-order-actions.tsx

@@ -16,9 +16,9 @@ const MobileOrderActions = ({ order }: { order: Order }) => {
   const [isWarrantyOpen, setIsWarrantyOpen] = useState(false);
   const [isOrderConfirmaionOpen, setIsOrderConfirmationOpen] = useState(false);
 
-  const isWarrantyActivated = order?.warrantyStatus === WarrantyStatus.Activated;
-  const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline);
-  const isOrderConfirmed = order?.orderConfirmation;
+  const isWarrantyActivated = order?.warrantyStatus?.value === WarrantyStatus.Activated;
+  const isPassDeadline = isBeforeToday(order?.warrantyActivationDeadline?.value);
+  const isOrderConfirmed = order?.orderConfirmation?.value;
 
   return (
     <>
@@ -84,7 +84,7 @@ const MobileOrderActions = ({ order }: { order: Order }) => {
       <ActivateWarrantyModal
         isOpen={isWarrantyOpen}
         onClose={() => setIsWarrantyOpen(false)}
-        orderId={order.id}
+        order={order}
       />
       {!isOrderConfirmed && (
         <OrderConfirmationModal

components/orders/order-confirmation-modal.tsx

@@ -1,12 +1,6 @@
 import Image from 'next/image';
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
-import Text from 'components/ui/text';
-import { Input } from 'components/ui/input';
-import { InputLabel } from 'components/ui/input-label';
-import Skeleton from 'components/ui/skeleton';
 import { toPrintDate } from 'lib/utils';
-import Label from 'components/ui/label';
-import Heading from 'components/ui/heading';
 import PaymentsDetails from './payment-details';
 import Price from 'components/price';
 import Divider from 'components/divider';
@@ -14,7 +8,7 @@ import Markdown from 'markdown-to-jsx';
 import { Order, OrderConfirmationContent } from 'lib/shopify/types';
 import { FormEventHandler, useEffect, useRef, useState, useTransition } from 'react';
 import { confirmOrder } from 'components/orders/actions';
-import { Button } from 'components/ui';
+import { Button, Heading, Text, Label, Skeleton, InputLabel, Input } from 'components/ui';
 
 function OrderConfirmationDetails({
   content,
@@ -218,6 +212,7 @@ export default function OrderConfirmationModal({
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
+    setLoading(true);
     const form = formRef.current;
     if (!form) return;
     const formData = new FormData(form);
@@ -276,11 +271,15 @@ export default function OrderConfirmationModal({
                 </InputLabel>
                 <Input id="signature2" name="signature2" required />
               </div>
-              <div className="space-x-2">
-                <Button variant="outlined" color="content">
-                  Cancel
-                </Button>
-                <Button type="submit" disabled={loading}>
+              <div className="flex justify-end gap-2">
+                <Button variant="text">Cancel</Button>
+                <Button
+                  type="submit"
+                  variant="solid"
+                  color="primary"
+                  disabled={loading}
+                  isLoading={loading}
+                >
                   Submit
                 </Button>
               </div>

components/ui/button.tsx

@@ -17,7 +17,6 @@ const buttonVariants = tv({
       'transition-all duration-100 ease-in-out',
       // disabled
       'disabled:pointer-events-none disabled:shadow-none',
-      'shadow-sm',
       focusInput
     ],
     loading: 'pointer-events-none flex shrink-0 items-center justify-center gap-1.5'
@@ -40,12 +39,14 @@ const buttonVariants = tv({
     },
     variant: {
       solid: {
-        root: 'border border-transparent'
+        root: 'border border-transparent shadow-sm'
       },
       outlined: {
-        root: 'border bg-white'
+        root: 'border bg-white shadow-sm'
       },
-      text: {}
+      text: {
+        root: 'border border-transparent'
+      }
     }
   },
   compoundVariants: [
@@ -118,6 +119,22 @@ const buttonVariants = tv({
           'disabled:border-content-muted disabled:text-content-muted'
         ]
       }
+    },
+    {
+      color: 'content',
+      variant: 'text',
+      class: {
+        root: [
+          // text color
+          'text-content-emphasis',
+          // background color
+          'bg-transparent',
+          // hover color
+          'hover:bg-content/5',
+          // disabled
+          'disabled:text-content-muted'
+        ]
+      }
     }
   ],
   defaultVariants: {

components/ui/checkbox.tsx

@@ -25,4 +25,4 @@ const Checkbox = forwardRef<
 
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export default Checkbox;

components/ui/index.ts

@@ -5,7 +5,6 @@ export * from './button';
 export { default as Card } from './card';
 export * from './card';
 export { default as Checkbox } from './checkbox';
-export * from './checkbox';
 export { default as Heading } from './heading';
 export { default as InputLabel } from './input-label';
 export * from './input-label';

components/ui/input-label.tsx

@@ -3,7 +3,8 @@ import * as LabelPrimitives from '@radix-ui/react-label';
 
 import { cx } from 'lib/utils';
 
-interface InputLabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> {
+export interface InputLabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> {
   disabled?: boolean;
 }
 
@@ -29,4 +30,4 @@ const InputLabel = React.forwardRef<React.ElementRef<typeof LabelPrimitives.Root
 );
 InputLabel.displayName = 'InputLabel';
 
-export { InputLabel };
+export default InputLabel;

components/ui/input.tsx

@@ -41,7 +41,7 @@ const inputStyles = tv({
   }
 });
 
-interface InputProps
+export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
     VariantProps<typeof inputStyles> {
   inputClassName?: string;
@@ -67,4 +67,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-export { Input, inputStyles, type InputProps };
+export default Input;

lib/shopify/index.ts

@@ -37,7 +37,7 @@ import {
 import { getCustomerQuery } from './queries/customer';
 import { getMenuQuery } from './queries/menu';
 import { getMetaobjectQuery, getMetaobjectsQuery } from './queries/metaobject';
-import { getImageQuery, getMetaobjectsByIdsQuery } from './queries/node';
+import { getFileQuery, getImageQuery, getMetaobjectsByIdsQuery } from './queries/node';
 import { getCustomerOrdersQuery } from './queries/orders';
 import { getPageQuery, getPagesQuery } from './queries/page';
 import {
@@ -52,6 +52,7 @@ import {
   Collection,
   Connection,
   Customer,
+  File,
   FileCreateInput,
   Filter,
   Fulfillment,
@@ -313,7 +314,7 @@ export async function shopifyCustomerFetch<T>({
   }
 }
 
-const removeEdgesAndNodes = (array: Connection<any>) => {
+const removeEdgesAndNodes = <T = any>(array: Connection<T>) => {
   return array.edges.map((edge) => edge?.node);
 };
 
@@ -439,7 +440,7 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
   const flattened = removeEdgesAndNodes(images);
 
   return flattened.map((image) => {
-    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    const filename = (image.url.match(/.*\/(.*)\..*/) || [])[1];
     return {
       ...image,
       altText: image.altText || `${productTitle} - ${filename}`
@@ -621,25 +622,21 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
     shippingMethod: {
       name: shopifyOrder.shippingLine?.title,
       price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)!
-    }
+    },
+    warrantyActivationDeadline: shopifyOrder.warrantyActivationDeadline,
+    warrantyStatus: shopifyOrder.warrantyStatus,
+    warrantyActivationInstallation: shopifyOrder.warrantyActivationInstallation,
+    warrantyActivationMileage: shopifyOrder.warrantyActivationMileage,
+    warrantyActivationOdometer: shopifyOrder.warrantyActivationOdometer,
+    warrantyActivationSelfInstall: shopifyOrder.warrantyActivationSelfInstall,
+    warrantyActivationVIN: shopifyOrder.warrantyActivationVIN,
+    orderConfirmation: shopifyOrder.orderConfirmation
   };
 
   if (shopifyOrder.customer) {
     order.customer = reshapeCustomer(shopifyOrder.customer);
   }
 
-  if (shopifyOrder.warrantyStatus) {
-    order.warrantyStatus = shopifyOrder.warrantyStatus.value as WarrantyStatus;
-  }
-
-  if (shopifyOrder.warrantyActivationDeadline) {
-    order.warrantyActivationDeadline = new Date(shopifyOrder.warrantyActivationDeadline.value);
-  }
-
-  if (shopifyOrder.orderConfirmation) {
-    order.orderConfirmation = shopifyOrder.orderConfirmation.value;
-  }
-
   return order;
 }
 
@@ -891,6 +888,31 @@ export async function getMetaobjects(type: string) {
   return reshapeMetaobjects(removeEdgesAndNodes(res.body.data.metaobjects));
 }
 
+export async function getAllMetaobjects(type: string) {
+  const allMetaobjects: Metaobject[] = [];
+  let hasNextPage = true;
+  let after: string | undefined;
+
+  while (hasNextPage) {
+    const res = await shopifyFetch<ShopifyMetaobjectsOperation>({
+      query: getMetaobjectsQuery,
+      tags: [TAGS.collections, TAGS.products],
+      variables: { type, after }
+    });
+
+    const metaobjects = reshapeMetaobjects(removeEdgesAndNodes(res.body.data.metaobjects));
+
+    for (const metaobject of metaobjects) {
+      allMetaobjects.push(metaobject);
+    }
+
+    hasNextPage = res.body.data.metaobjects.pageInfo?.hasNextPage || false;
+    after = res.body.data.metaobjects.pageInfo?.endCursor;
+  }
+
+  return allMetaobjects;
+}
+
 export async function getMetaobjectsByIds(ids: string[]) {
   if (!ids.length) return [];
 
@@ -1147,3 +1169,19 @@ export const updateOrderMetafields = async ({
 
   return response.body.data.orderUpdate.order.id;
 };
+
+export const getFile = async (id: string) => {
+  const res = await shopifyFetch<{
+    data: {
+      node: File;
+    };
+    variables: {
+      id: string;
+    };
+  }>({
+    query: getFileQuery,
+    variables: { id }
+  });
+
+  return res.body.data.node;
+};

lib/shopify/queries/metaobject.ts

@@ -1,6 +1,6 @@
 export const getMetaobjectsQuery = /* GraphQL */ `
-  query getMetaobjects($type: String!) {
-    metaobjects(type: $type, first: 200) {
+  query getMetaobjects($type: String!, $after: String) {
+    metaobjects(type: $type, first: 200, after: $after) {
       edges {
         node {
           id
@@ -16,6 +16,10 @@ export const getMetaobjectsQuery = /* GraphQL */ `
           }
         }
       }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
     }
   }
 `;

lib/shopify/types.ts

@@ -3,6 +3,7 @@ export type Maybe<T> = T | null;
 
 export type Connection<T> = {
   edges: Array<Edge<T>>;
+  pageInfo?: PageInfo;
 };
 
 export type Edge<T> = {
@@ -152,10 +153,7 @@ export type Order = {
     name: string;
     price: Money;
   };
-  warrantyStatus?: WarrantyStatus | null;
-  warrantyActivationDeadline?: Date | null;
-  orderConfirmation?: string | null;
-};
+} & ShopifyOrderMetafield;
 
 export type ShopifyOrder = {
   id: string;
@@ -184,10 +182,7 @@ export type ShopifyOrder = {
   requiresShipping: boolean;
   shippingLine: ShopifyShippingLine;
   note: string | null;
-  warrantyStatus?: ShopifyMetafield;
-  warrantyActivationDeadline?: ShopifyMetafield;
-  orderConfirmation?: ShopifyMetafield;
-};
+} & ShopifyOrderMetafield;
 
 type ShopifyShippingLine = {
   title: string;
@@ -685,7 +680,7 @@ export type ShopifyImageOperation = {
 
 export type ShopifyMetaobjectsOperation = {
   data: { metaobjects: Connection<ShopifyMetaobject> };
-  variables: { type: string };
+  variables: { type: string; after?: string };
 };
 
 export type ShopifyPagesOperation = {
@@ -878,20 +873,15 @@ export enum WarrantyStatus {
   LimitedActivated = 'Limited Activation'
 }
 
-export type OrderMetafieldValue<T = string> = {
-  value: T;
-  id: string;
-  key: string;
-};
-
 export type ShopifyOrderMetafield = {
-  warrantyStatus: OrderMetafieldValue | null;
-  warrantyActivationDeadline: OrderMetafieldValue | null;
-  warrantyActivationOdometer: OrderMetafieldValue | null;
-  warrantyActivationInstallation: OrderMetafieldValue | null;
-  warrantyActivationSelfInstall: OrderMetafieldValue | null;
-  warrantyActivationVIN: OrderMetafieldValue | null;
-  warrantyActivationMileage: OrderMetafieldValue | null;
+  orderConfirmation: ShopifyMetafield | null;
+  warrantyStatus: ShopifyMetafield | null;
+  warrantyActivationDeadline: ShopifyMetafield | null;
+  warrantyActivationOdometer: ShopifyMetafield | null;
+  warrantyActivationInstallation: ShopifyMetafield | null;
+  warrantyActivationSelfInstall: ShopifyMetafield | null;
+  warrantyActivationVIN: ShopifyMetafield | null;
+  warrantyActivationMileage: ShopifyMetafield | null;
 };
 
 export type File = {

lib/utils.ts

@@ -124,12 +124,13 @@ export function toPrintDate(date: string) {
   });
 }
 
-export const isBeforeToday = (date?: Date | null) => {
+export const isBeforeToday = (date?: string | null) => {
   if (!date) return false;
   const today = new Date();
+  const compareDate = new Date(date);
 
   today.setHours(0, 0, 0, 0);
-  date.setHours(0, 0, 0, 0);
+  compareDate.setHours(0, 0, 0, 0);
 
-  return date <= today;
+  return compareDate <= today;
 };