handle missing shipping costs and black styling issue

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

@@ -15,7 +15,6 @@ import Image from 'next/image';
 import Link from 'next/link';
 import ActivateWarranty from 'components/orders/activate-warranty';
 import OrderStatuses from 'components/orders/order-statuses';
-import Divider from 'components/divider';
 import { CoreReturn } from 'components/orders/core-return';
 
 function Unfulfilled({ order }: { order: Order }) {
@@ -178,7 +177,7 @@ function OrderDetails({ order }: { order: Order }) {
           </div>
           <div className="flex flex-col gap-2">
             <Label>Shipping Method</Label>
-            <Text>{order.shippingMethod!.name}</Text>
+            <Text>{order.shippingMethod ? order.shippingMethod.name : 'N/A'}</Text>
           </div>
         </div>
         <div className="flex flex-1 flex-col gap-4">

components/engine-sizes/index.tsx

@@ -38,7 +38,7 @@ const EngineSizes = async ({ collection }: { collection: Collection }) => {
 
   return (
     <div>
-      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
+      <h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">
         Browse Engines By Engine Sizes
       </h3>
       <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">

components/home-page/manufacturers.tsx

@@ -17,7 +17,7 @@ const Manufacturers = async ({
 
   return (
     <div>
-      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
+      <h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
       <ManufacturersGrid manufacturers={manufacturers} variant={variant} />
     </div>
   );

components/orders/actions.tsx

@@ -165,59 +165,23 @@ export const confirmOrder = async ({ order, content, formData }: ConfirmOrderOpt
   }
 };
 
-export async function returnCore() {
+export async function returnCore(order: Order, formData: FormData) {
-  // const rawFormData = [
+  const rawFormData = [
-  //   getMetafieldValue(
+    getMetafieldValue(
-  //     'coreReturnZip',
+      'coreReturnZip',
-  //     {
+      {
-  //       key: '',
+        key: '',
-  //       value: formData.get('name') as string | null,
+        value: formData.get('name') as string | null,
-  //       type: 'file_reference'
+        type: 'file_reference'
-  //     },
+      },
-  //     order
+      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({
+    await updateOrderMetafields({
-    //   orderId: order.id,
+      orderId: order.id,
-    //   metafields: rawFormData
+      metafields: rawFormData
-    // });
+    });
 
     revalidateTag(TAGS.orderMetafields);
   } catch (error) {

components/orders/core-return-modal.tsx

@@ -3,7 +3,7 @@ import { Order } from 'lib/shopify/types';
 import { Button, Heading, Input } from 'components/ui';
 import StatesCombobox from 'components/states-combobox';
 import { useTransition } from 'react';
-// import { returnCore } from './actions';
+import { returnCore } from './actions';
 
 export function CoreReturnModal({
   isOpen,
@@ -18,8 +18,7 @@ export function CoreReturnModal({
 
   async function submitCoreReturn(formData: FormData) {
     startTransition(async () => {
-      // returnCore(order, formData);
+      returnCore(order, formData);
-      console.log(formData);
     });
   }
 
@@ -27,7 +26,7 @@ export function CoreReturnModal({
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <DialogBackdrop
         transition
-        className="bg-black/30 fixed inset-0 duration-300 ease-out data-[closed]:opacity-0"
+        className="fixed inset-0 bg-black/30 duration-300 ease-out data-[closed]:opacity-0"
       />
       <div className="fixed inset-0 w-screen overflow-y-auto p-4">
         <div className="flex min-h-full items-center justify-center">

components/orders/order-confirmation-modal.tsx

@@ -121,11 +121,11 @@ function OrderConfirmationDetails({
           </div>
           <div className="flex items-center justify-between">
             <Text>Shipping</Text>
-            {order.shippingMethod.price.amount !== '0.0' ? (
+            {order.shippingMethod && order.shippingMethod.price.amount !== '0.0' ? (
               <Price
                 className="text-sm font-semibold"
-                amount={order.shippingMethod!.price.amount}
+                amount={order.shippingMethod.price.amount}
-                currencyCode={order.shippingMethod!.price.currencyCode}
+                currencyCode={order.shippingMethod.price.currencyCode}
               />
             ) : (
               <Text className="font-semibold">Free</Text>
@@ -228,7 +228,7 @@ export default function OrderConfirmationModal({
     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
       <DialogBackdrop
         transition
-        className="bg-black/30 fixed inset-0 duration-300 ease-out data-[closed]:opacity-0"
+        className="fixed inset-0 bg-black/30 duration-300 ease-out data-[closed]:opacity-0"
       />
       <div className="fixed inset-0 w-screen overflow-y-auto p-4">
         <div className="flex min-h-full items-center justify-center">

components/orders/order-confirmation-pdf.tsx

@@ -216,8 +216,10 @@ export default function OrderConfirmationPdf({
                 <Text style={styles.span}>Shipping</Text>
                 <PDFPrice
                   style={styles.span}
-                  amount={order.shippingMethod!.price.amount}
+                  amount={(order.shippingMethod && order.shippingMethod.price.amount) || '0.0'}
-                  currencyCode={order.shippingMethod!.price.currencyCode}
+                  currencyCode={
+                    (order.shippingMethod && order.shippingMethod.price.currencyCode) || 'USD'
+                  }
                 />
               </View>
               <View

components/orders/order-summary.tsx

@@ -60,11 +60,11 @@ export default function OrderSummary({ order }: { order: Order }) {
           </div>
           <div className="flex items-center justify-between">
             <Text>Shipping</Text>
-            {order.shippingMethod?.price.amount !== '0.0' ? (
+            {order.shippingMethod && order.shippingMethod.price.amount !== '0.0' ? (
               <Price
                 className="text-sm font-semibold"
-                amount={order.shippingMethod!.price.amount}
+                amount={order.shippingMethod.price.amount}
-                currencyCode={order.shippingMethod!.price.currencyCode}
+                currencyCode={order.shippingMethod.price.currencyCode}
               />
             ) : (
               <Text className="font-semibold">Free</Text>

components/page/mini-icon-block.tsx

@@ -23,12 +23,14 @@ const MiniIconBlock = async ({ block }: { block: Metaobject }) => {
           {content.title && content.content && (
             <div>
               {content.title && (
-                <div className="text-sm font-medium text-black-700">{content.title}</div>
+                <div className="text-sm font-medium text-content-strong">{content.title}</div>
+              )}
+              {content.content && (
+                <p className="mt-2 text-sm text-content-strong">{content.content}</p>
               )}
-              {content.content && <p className="mt-2 text-sm text-black-700">{content.content}</p>}
             </div>
           )}
-          {content.title && <div className="text-sm text-black-700">{content.title}</div>}
+          {content.title && <div className="text-sm text-content-strong">{content.title}</div>}
         </div>
       ))}
     </div>

components/page/rich-text-display.tsx

@@ -82,7 +82,7 @@ const RichTextBlock = ({ block, className }: { block: Content; className?: strin
   }
 
   return (
-    <p className="text-black-700">
+    <p className="text-content-strong">
       {block.children.map((child, index) => (
         <RichTextBlock key={index} block={child} />
       ))}

components/page/text-block.tsx

@@ -8,7 +8,7 @@ const TextBlock = ({ block }: { block: Metaobject }) => {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-5 px-4 md:px-0">
         {block.title && (
-          <h3 className="text-xl font-bold leading-6 text-black-700">{block.title}</h3>
+          <h3 className="text-xl font-bold leading-6 text-content-strong">{block.title}</h3>
         )}
 
         <RichTextDisplay contentBlocks={content.children} />

components/plp/default-content.tsx

@@ -17,7 +17,7 @@ const DefaultContent = async () => {
   return (
     <div>
       <Tag text="Learn More" />
-      <h3 className="mb-5 mt-3 text-3xl font-semibold text-black-700 lg:text-4xl">{title}</h3>
+      <h3 className="mb-5 mt-3 text-3xl font-semibold text-content-strong lg:text-4xl">{title}</h3>
       <Suspense fallback={<TabsPlaceholder />}>
         <Tabs fields={fields} />
       </Suspense>

components/plp/dynamic-content.tsx

@@ -9,7 +9,7 @@ const DynamicContent = ({ content }: { content: Metaobject }) => {
   return (
     <div>
       <Tag text="Learn More" />
-      <h3 className="mb-5 mt-3 text-3xl font-semibold text-black-700 lg:text-4xl">
+      <h3 className="mb-5 mt-3 text-3xl font-semibold text-content-strong lg:text-4xl">
         {content.title}
       </h3>
       <Suspense fallback={<TabsPlaceholder />}>

components/plp/tabs.tsx

@@ -13,7 +13,7 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
           {keys.map((key) => (
             <Tab
               key={key}
-              className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-black-700 focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
+              className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
             >
               {startCase(key)}
               <ChevronRightIcon className="size-4" />

components/transmission-codes/index.tsx

@@ -40,7 +40,7 @@ const TransmissionCode = async ({ collection }: { collection: Collection }) => {
 
   return (
     <div>
-      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
+      <h3 className="mb-3 text-3xl font-semibold text-content-strong lg:text-4xl">
         Browse By Transmission Code
       </h3>
       <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">

components/ui/heading.tsx

@@ -26,6 +26,6 @@ export interface HeadingProps extends VariantProps<typeof heading> {
 }
 
 export default function Heading({ children, className, size, as }: HeadingProps) {
-  const Component = as || 'h2';
+  const Component = as || 'span';
   return <Component className={heading({ size, className })}>{children}</Component>;
 }

lib/shopify/index.ts

@@ -643,10 +643,6 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
     totalTax: reshapeMoney(shopifyOrder.totalTax),
     totalPrice: reshapeMoney(shopifyOrder.totalPrice),
     createdAt: shopifyOrder.createdAt,
-    shippingMethod: {
-      name: shopifyOrder.shippingLine?.title,
-      price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)!
-    },
     warrantyActivationDeadline: shopifyOrder.warrantyActivationDeadline,
     warrantyStatus: shopifyOrder.warrantyStatus,
     warrantyActivationInstallation: shopifyOrder.warrantyActivationInstallation,
@@ -667,6 +663,13 @@ function reshapeOrder(shopifyOrder: ShopifyOrder): Order {
     coreReturnDescription: shopifyOrder.coreReturnDescription
   };
 
+  if (shopifyOrder.shippingLine) {
+    order.shippingMethod = {
+      name: shopifyOrder.shippingLine.title,
+      price: reshapeMoney(shopifyOrder.shippingLine.originalPrice)
+    };
+  }
+
   if (shopifyOrder.customer) {
     order.customer = reshapeCustomer(shopifyOrder.customer);
   }

lib/shopify/types.ts

@@ -163,7 +163,7 @@ export type Order = {
   totalShipping: Money;
   totalTax: Money;
   totalPrice: Money;
-  shippingMethod: {
+  shippingMethod?: {
     name: string;
     price: Money;
   };

lib/styles.ts

@@ -18,9 +18,6 @@ export const carPartPlanetColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
-  },
-  black: {
-    700: '#1A1A25'
   }
 };
 
@@ -44,9 +41,6 @@ export const remanTransmissionColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
-  },
-  black: {
-    700: '#1A1A25'
   }
 };
 
@@ -70,8 +64,5 @@ export const transmissionLocatorColor = {
     200: '#666C89',
     500: '#2D3A7B',
     600: '#111C55'
-  },
-  black: {
-    700: '#1A1A25'
   }
 };