feat: Add out-of-stock/backorder message to product lists - Apply comments

Author: Tharaae

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -133,7 +133,7 @@ export default async function Brand(props: Props) {
     const products = search.products.items;
 
     const { defaultOutOfStockMessage, showOutOfStockMessage, showBackorderMessage } =
-      settings?.inventory || {};
+      settings?.inventory ?? {};
 
     return productCardTransformer(
       products,

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -146,7 +146,7 @@ export default async function Category(props: Props) {
     const products = search.products.items;
 
     const { defaultOutOfStockMessage, showOutOfStockMessage, showBackorderMessage } =
-      settings?.inventory || {};
+      settings?.inventory ?? {};
 
     return productCardTransformer(
       products,

core/app/[locale]/(default)/(faceted)/search/page.tsx

@@ -118,7 +118,7 @@ export default async function Search(props: Props) {
     const products = search.products.items;
 
     const { defaultOutOfStockMessage, showOutOfStockMessage, showBackorderMessage } =
-      settings?.inventory || {};
+      settings?.inventory ?? {};
 
     return productCardTransformer(
       products,

core/app/[locale]/(default)/page.tsx

@@ -37,7 +37,7 @@ export default async function Home({ params }: Props) {
     const featuredProducts = removeEdgesAndNodes(data.site.featuredProducts);
 
     const { defaultOutOfStockMessage, showOutOfStockMessage, showBackorderMessage } =
-      data.site.settings?.inventory || {};
+      data.site.settings?.inventory ?? {};
 
     return productCardTransformer(
       featuredProducts,
@@ -53,7 +53,7 @@ export default async function Home({ params }: Props) {
     const newestProducts = removeEdgesAndNodes(data.site.newestProducts);
 
     const { defaultOutOfStockMessage, showOutOfStockMessage, showBackorderMessage } =
-      data.site.settings?.inventory || {};
+      data.site.settings?.inventory ?? {};
 
     return productCardTransformer(
       newestProducts,

core/data-transformers/product-card-transformer.ts

@@ -21,7 +21,7 @@ const getInventoryMessage = (
     return undefined;
   }
 
-  const { availableForBackorder, unlimitedBackorder } = product.inventory.aggregated || {};
+  const { availableForBackorder, unlimitedBackorder } = product.inventory.aggregated ?? {};
 
   const hasBackorderAvailablity = !!availableForBackorder || unlimitedBackorder;
 
@@ -37,7 +37,7 @@ const getInventoryMessage = (
 
   const inventoryByLocation = removeEdgesAndNodes(baseVariant.inventory.byLocation).at(0);
 
-  return inventoryByLocation?.backorderMessage || undefined;
+  return inventoryByLocation?.backorderMessage ?? undefined;
 };
 
 export const singleProductCardTransformer = (

core/vibes/soul/primitives/product-card/index.tsx

@@ -135,18 +135,19 @@ export function ProductCard({
             >
               {title}
             </span>
-
-            <span
-              className={clsx(
-                'mb-1.5 block text-sm font-normal',
-                {
-                  light: 'text-[var(--product-card-light-subtitle,hsl(var(--foreground)/75%))]',
-                  dark: 'text-[var(--product-card-dark-subtitle,hsl(var(--background)/75%))]',
-                }[colorScheme],
-              )}
-            >
-              {subtitle}
-            </span>
+            {subtitle != null && subtitle !== '' && (
+              <span
+                className={clsx(
+                  'mb-1.5 block text-sm font-normal',
+                  {
+                    light: 'text-[var(--product-card-light-subtitle,hsl(var(--foreground)/75%))]',
+                    dark: 'text-[var(--product-card-dark-subtitle,hsl(var(--background)/75%))]',
+                  }[colorScheme],
+                )}
+              >
+                {subtitle}
+              </span>
+            )}
             {price != null && <PriceLabel colorScheme={colorScheme} price={price} />}
             <span
               className={clsx(