feat: add metafields to variant options

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

components/product/variant-selector.tsx

@@ -127,13 +127,12 @@ export function VariantSelector({
                   <XMarkIcon className="h-6" />
                 </button>
               </div>
-              <div className="mt-5 flex h-full flex-col justify-between overflow-hidden ">
+              <div className="mt-5 flex h-full flex-col justify-between overflow-hidden">
-                <div>
                 {options.map((option) => {
                   return (
                     <ul
                       key={option.id}
-                        className="flex-grow flex-col space-y-4 overflow-auto px-1 py-4"
+                      className="flex-grow flex-col space-y-4 overflow-auto px-2 py-4"
                     >
                       {option.values.map((value) => {
                         const optionNameLowerCase = option.name.toLowerCase();
@@ -252,6 +251,20 @@ export function VariantSelector({
                                   </button>
                                 ))}
                               </div>
+                              <div className="mt-2 flex w-full flex-col gap-1 border-t border-gray-300 pl-1 pt-2 text-xs tracking-normal">
+                                <div className="flex flex-row items-center gap-2">
+                                  <span>Condition:</span>
+                                  <span>{variant?.condition || 'N/A'}</span>
+                                </div>
+                                <div className="flex flex-row items-center gap-2">
+                                  <span>Estimated Delivery:</span>
+                                  <span>{variant?.estimatedDelivery || 'N/A'}</span>
+                                </div>
+                                <div className="flex flex-row items-center gap-2">
+                                  <span>Mileage:</span>
+                                  <span>{variant?.mileage || 'N/A'}</span>
+                                </div>
+                              </div>
                             </button>
                           </li>
                         );
@@ -260,7 +273,6 @@ export function VariantSelector({
                   );
                 })}
               </div>
-              </div>
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>

lib/shopify/fragments/product.ts

@@ -55,6 +55,15 @@ const productFragment = /* GraphQL */ `
           coreVariantId: metafield(namespace: "custom", key: "coreVariant") {
             value
           }
+          estimatedDelivery: metafield(namespace: "custom", key: "delivery") {
+            value
+          }
+          mileage: metafield(namespace: "custom", key: "mileage") {
+            value
+          }
+          condition: metafield(namespace: "custom", key: "condition") {
+            value
+          }
         }
       }
     }

lib/shopify/index.ts

@@ -185,7 +185,10 @@ const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] =>
     ...variant,
     waiverAvailable: parseMetaFieldValue<boolean>(variant.waiverAvailable),
     coreVariantId: variant.coreVariantId?.value || null,
-    coreCharge: parseMetaFieldValue<Money>(variant.coreCharge)
+    coreCharge: parseMetaFieldValue<Money>(variant.coreCharge),
+    mileage: variant.mileage?.value ?? null,
+    estimatedDelivery: variant.estimatedDelivery?.value || null,
+    condition: variant.condition?.value || null
   }));
 };
 

lib/shopify/types.ts

@@ -87,15 +87,21 @@ export type ProductVariant = {
   barcode: string | null;
   sku: string | null;
   coreVariantId: string | null;
+  mileage: number | null;
+  estimatedDelivery: string | null;
+  condition: string | null;
 };
 
 export type ShopifyProductVariant = Omit<
   ProductVariant,
-  'coreCharge' | 'waiverAvailable' | 'coreVariantId'
+  'coreCharge' | 'waiverAvailable' | 'coreVariantId' | 'mileage' | 'estimatedDelivery' | 'condition'
 > & {
   waiverAvailable: { value: string };
   coreVariantId: { value: string } | null;
   coreCharge: { value: string } | null;
+  mileage: { value: number } | null;
+  estimatedDelivery: { value: string } | null;
+  condition: { value: string } | null;
 };
 
 export type SEO = {