fix(product): BACK-400 Fix BO data on PDP for complex products (#3031)

Author: Tharaae

.changeset/fix-variant-bo-info-on-pdp.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Display backorder information for variants on PDP.

core/app/[locale]/(default)/product/[slug]/page-data.ts

@@ -337,9 +337,17 @@ export const getStreamableProduct = cache(
 
 const StreamableProductInventoryQuery = graphql(
   `
-    query StreamableProductInventoryQuery($entityId: Int!) {
+    query StreamableProductInventoryQuery(
+      $entityId: Int!
+      $optionValueIds: [OptionValueId!]
+      $useDefaultOptionSelections: Boolean
+    ) {
       site {
-        product(entityId: $entityId) {
+        product(
+          entityId: $entityId
+          optionValueIds: $optionValueIds
+          useDefaultOptionSelections: $useDefaultOptionSelections
+        ) {
           sku
           inventory {
             hasVariantInventory
@@ -363,7 +371,7 @@ const StreamableProductInventoryQuery = graphql(
   [ProductVariantsInventoryFragment],
 );
 
-type ProductInventoryVariables = VariablesOf<typeof StreamableProductQuery>;
+type ProductInventoryVariables = VariablesOf<typeof StreamableProductInventoryQuery>;
 
 export const getStreamableProductInventory = cache(
   async (variables: ProductInventoryVariables, customerAccessToken?: string) => {

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

@@ -68,6 +68,17 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function Product({ params, searchParams }: Props) {
   const { locale, slug } = await params;
+  const options = await searchParams;
+
+  const optionValueIds = Object.keys(options)
+    .map((option) => ({
+      optionEntityId: Number(option),
+      valueEntityId: Number(options[option]),
+    }))
+    .filter(
+      (option) => !Number.isNaN(option.optionEntityId) && !Number.isNaN(option.valueEntityId),
+    );
+
   const customerAccessToken = await getSessionCustomerAccessToken();
   const detachedWishlistFormId = 'product-add-to-wishlist-form';
 
@@ -91,17 +102,6 @@ export default async function Product({ params, searchParams }: Props) {
   }
 
   const streamableProduct = Streamable.from(async () => {
-    const options = await searchParams;
-
-    const optionValueIds = Object.keys(options)
-      .map((option) => ({
-        optionEntityId: Number(option),
-        valueEntityId: Number(options[option]),
-      }))
-      .filter(
-        (option) => !Number.isNaN(option.optionEntityId) && !Number.isNaN(option.valueEntityId),
-      );
-
     const variables = {
       entityId: Number(productId),
       optionValueIds,
@@ -122,6 +122,8 @@ export default async function Product({ params, searchParams }: Props) {
   const streamableProductInventory = Streamable.from(async () => {
     const variables = {
       entityId: Number(productId),
+      optionValueIds,
+      useDefaultOptionSelections: true,
     };
 
     const product = await getStreamableProductInventory(variables, customerAccessToken);
@@ -155,17 +157,6 @@ export default async function Product({ params, searchParams }: Props) {
   });
 
   const streamableProductPricingAndRelatedProducts = Streamable.from(async () => {
-    const options = await searchParams;
-
-    const optionValueIds = Object.keys(options)
-      .map((option) => ({
-        optionEntityId: Number(option),
-        valueEntityId: Number(options[option]),
-      }))
-      .filter(
-        (option) => !Number.isNaN(option.optionEntityId) && !Number.isNaN(option.valueEntityId),
-      );
-
     const currencyCode = await getPreferredCurrencyCode();
 
     const variables = {