Merge branch 'main' of github.com:Car-Part-Planet/storefront

components/filters/filters-list.tsx

@@ -6,7 +6,7 @@ import { Menu, Metaobject } from 'lib/shopify/types';
 import { createUrl, findParentCollection } from 'lib/utils';
 import get from 'lodash.get';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { fetMetaobjects } from './actions';
 import FilterField from './field';
 
@@ -136,6 +136,31 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
     router.push(createUrl(`/search/${partType?.value}`, newSearchParams), { scroll: false });
   };
 
+  // Sorting logic
+  const sortedMakes = useMemo(() => {
+    return [...makes].sort((a, b) => {
+      const makeA = get(a, 'display_name').toLowerCase();
+      const makeB = get(b, 'display_name').toLowerCase();
+      return makeA.localeCompare(makeB);
+    });
+  }, [makes]);
+
+  const sortedModelOptions = useMemo(() => {
+    return [...modelOptions].sort((a, b) => {
+      const modelA = get(a, 'name').toLowerCase();
+      const modelB = get(b, 'name').toLowerCase();
+      return modelA.localeCompare(modelB);
+    });
+  }, [modelOptions]);
+
+  const sortedYearOptions = useMemo(() => {
+    return [...yearOptions].sort((a, b) => {
+      const yearA = parseInt(get(a, 'name'), 10);
+      const yearB = parseInt(get(b, 'name'), 10);
+      return yearB - yearA; // Descending order for years
+    });
+  }, [yearOptions]);
+
   return (
     <>
       <FilterField
@@ -151,7 +176,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Make"
         onChange={onChangeMake}
         selectedValue={make}
-        options={makes}
+        options={sortedMakes}
         getId={(option) => option.id}
         disabled={!partType}
         autoFocus={autoFocusField === 'make'}
@@ -161,7 +186,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Model"
         onChange={onChangeModel}
         selectedValue={model}
-        options={modelOptions}
+        options={sortedModelOptions}
         getId={(option) => option.id}
         disabled={!make}
         autoFocus={autoFocusField === 'model'}
@@ -171,7 +196,7 @@ const FiltersList = ({ makes, menu, autoFocusField }: FiltersListProps) => {
         label="Year"
         onChange={onChangeYear}
         selectedValue={year}
-        options={yearOptions}
+        options={sortedYearOptions}
         getId={(option) => option.id}
         disabled={!model || !make}
         autoFocus={autoFocusField === 'year'}

components/grid/tile.tsx

@@ -72,7 +72,7 @@ export function GridTileImage({
           >
             {props.src ? (
               // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
-              <Image className={clsx('h-full w-full object-cover object-center')} {...props} />
+              <Image className={clsx('h-full w-full object-contain object-center')} {...props} />
             ) : (
               <div
                 className="flex h-full w-full items-center justify-center text-gray-400"
@@ -157,7 +157,7 @@ export const TileImage = ({
     >
       {props.src ? (
         // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
-        <Image className={clsx('h-full w-full object-cover object-center')} {...props} />
+        <Image className={clsx('h-full w-full object-contain object-center')} {...props} />
       ) : (
         <div
           className="flex h-full w-full items-center justify-center text-gray-400"

components/product/vairant-details.tsx

@@ -30,12 +30,19 @@ const VariantDetails = ({ variants, defaultPrice }: VariantDetailsProps) => {
       <div className="mt-2 flex items-center justify-start gap-x-2">
         {variant?.availableForSale ? (
           <div className="flex items-center gap-1 text-sm text-green-500">
-            <CheckCircleIcon className="size-5" /> In Stock
+            <CheckCircleIcon className="size-5" /> <strong>In Stock</strong>
           </div>
         ) : (
           <span className="text-sm text-red-600">Out of Stock</span>
         )}
-        <p className="text-sm">Condition: {variant?.condition || 'N/A'}</p>
+        <span className="text-sm">|</span>
+        <p className="text-sm">
+          <strong>SKU:</strong> {variant?.sku || 'N/A'}
+        </p>
+        <span className="text-sm">|</span>
+        <p className="text-sm">
+          <strong>Condition:</strong> {variant?.condition || 'N/A'}
+        </p>
       </div>
     </div>
   );

components/product/variant-selector.tsx

@@ -96,7 +96,7 @@ export function VariantSelector({
             leaveFrom="opacity-100 backdrop-blur-[.5px]"
             leaveTo="opacity-0 backdrop-blur-none"
           >
-            <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+            <div className="bg-black/30 fixed inset-0" aria-hidden="true" />
           </TransitionChild>
           <TransitionChild
             as={Fragment}
@@ -107,7 +107,7 @@ export function VariantSelector({
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <DialogPanel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[500px]">
+            <DialogPanel className="text-black fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 backdrop-blur-xl md:w-[500px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">Manufactured & Used Options</p>
 
@@ -209,10 +209,10 @@ export function VariantSelector({
                                     />
                                   ) : null}
                                   <div className="flex items-center gap-1">
-                                    <span className="text-xs font-medium text-gray-600">
+                                    <span className="text-xs font-medium text-gray-600">SKU:</span>
-                                      {option.name}:
+                                    <span className="text-xs text-gray-600">
+                                      {variant?.sku || 'N/A'}
                                     </span>
-                                    <span className="text-xs text-gray-600">{value}</span>
                                   </div>
                                 </div>
                                 {!isAvailableForSale ? <span>Out of Stock</span> : null}