feat: Display selected configurable product image and price in UI

Author: Sanjeev Yadav

src/apollo/queries/configurableProductFragment.ts

@@ -1,4 +1,9 @@
 import { gql } from '@apollo/client';
+import {
+  MEDIA_GALLERY_FRAGMENT,
+  MediaGalleryItemType,
+} from './mediaGalleryFragment';
+import { PriceRangeType, PRODUCT_PRICE_FRAGMENT } from './productPriceFragment';
 
 export interface ConfigurableOptionType {
   id: number;
@@ -17,6 +22,22 @@ export interface ConfigurableProductOptionValueType {
   };
 }
 
+export interface ConfigurableProductVariant {
+  attributes: Array<ConfigurableProductVariantAttribute>;
+  product: ConfigurableProductVariantProduct;
+}
+
+export interface ConfigurableProductVariantAttribute {
+  code: string;
+  valueIndex: number;
+}
+
+export interface ConfigurableProductVariantProduct {
+  sku: string;
+  mediaGallery: Array<MediaGalleryItemType>;
+  priceRange: PriceRangeType;
+}
+
 export const CONFIGURABLE_PRODUCT_FRAGMENT = gql`
   fragment ConfigurableProduct on ConfigurableProduct {
     configurableOptions: configurable_options {
@@ -32,5 +53,18 @@ export const CONFIGURABLE_PRODUCT_FRAGMENT = gql`
         }
       }
     }
+    variants {
+      attributes {
+        code
+        valueIndex: value_index
+      }
+      product {
+        sku
+        ...MediaGallery
+        ...ProductPrice
+      }
+    }
   }
+  ${MEDIA_GALLERY_FRAGMENT}
+  ${PRODUCT_PRICE_FRAGMENT}
 `;

src/apollo/queries/getProductDetails.ts

@@ -1,13 +1,14 @@
 import { gql } from '@apollo/client';
 import {
   ConfigurableOptionType,
+  ConfigurableProductVariant,
   CONFIGURABLE_PRODUCT_FRAGMENT,
 } from './configurableProductFragment';
 import {
   MEDIA_GALLERY_FRAGMENT,
   MediaGalleryItemType,
 } from './mediaGalleryFragment';
-import { PriceRangeType } from './productsFragment';
+import { PriceRangeType, PRODUCT_PRICE_FRAGMENT } from './productPriceFragment';
 
 export interface GetProductDetailsVars {
   sku: string;
@@ -43,6 +44,7 @@ export interface ConfigurableProductDetailsType
   extends ProductInterfaceDetailsType {
   type: ProductTypeEnum.CONFIGURED;
   configurableOptions: Array<ConfigurableOptionType>;
+  variants: Array<ConfigurableProductVariant>;
 }
 
 export interface GroupedProductDetailsType extends ProductInterfaceDetailsType {
@@ -66,19 +68,13 @@ export const GET_PRODUCT_DETAILS = gql`
           html
         }
         type: __typename
-        priceRange: price_range {
-          maximumPrice: maximum_price {
-            finalPrice: final_price {
-              currency
-              value
-            }
-          }
-        }
+        ...ProductPrice
         ...MediaGallery
         ...ConfigurableProduct
       }
     }
   }
+  ${PRODUCT_PRICE_FRAGMENT}
   ${MEDIA_GALLERY_FRAGMENT}
   ${CONFIGURABLE_PRODUCT_FRAGMENT}
 `;

src/apollo/queries/productPriceFragment.ts

@@ -0,0 +1,23 @@
+import { gql } from '@apollo/client';
+
+export interface PriceRangeType {
+  maximumPrice: {
+    finalPrice: {
+      currency: string;
+      value: number;
+    };
+  };
+}
+
+export const PRODUCT_PRICE_FRAGMENT = gql`
+  fragment ProductPrice on ProductInterface {
+    priceRange: price_range {
+      maximumPrice: maximum_price {
+        finalPrice: final_price {
+          value
+          currency
+        }
+      }
+    }
+  }
+`;

src/apollo/queries/productsFragment.ts

@@ -1,4 +1,6 @@
 import { gql } from '@apollo/client';
+import { PRODUCT_PRICE_FRAGMENT } from './productPriceFragment';
+import type { PriceRangeType } from './productPriceFragment';
 
 export interface ProductInListType {
   id: number;
@@ -10,15 +12,6 @@ export interface ProductInListType {
   priceRange: PriceRangeType;
 }
 
-export interface PriceRangeType {
-  maximumPrice: {
-    finalPrice: {
-      currency: string;
-      value: number;
-    };
-  };
-}
-
 export const PRODUCTS_FRAGMENT = gql`
   fragment ProductListFragment on Products {
     items {
@@ -28,14 +21,8 @@ export const PRODUCTS_FRAGMENT = gql`
       smallImage: small_image {
         url
       }
-      priceRange: price_range {
-        maximumPrice: maximum_price {
-          finalPrice: final_price {
-            currency
-            value
-          }
-        }
-      }
+      ...ProductPrice
     }
   }
+  ${PRODUCT_PRICE_FRAGMENT}
 `;

src/logic/products/useProductDetails.ts

@@ -1,11 +1,15 @@
 import { useQuery, ApolloError } from '@apollo/client';
-import { useState } from 'react';
+import { useState, useEffect, useReducer } from 'react';
 import {
   GET_PRODUCT_DETAILS,
   GetProductDetailsVars,
   ProductDetailsDataType,
   ProductDetailsType,
+  ProductTypeEnum,
 } from '../../apollo/queries/getProductDetails';
+import type { ConfigurableProductVariant } from '../../apollo/queries/configurableProductFragment';
+import { PriceRangeType } from '../../apollo/queries/productPriceFragment';
+import type { MediaGalleryItemType } from '../../apollo/queries/mediaGalleryFragment';
 
 interface Props {
   sku: string;
@@ -18,19 +22,51 @@ export type HandleSelectedConfigurableOptions = (
   valueIndex: number,
 ) => void;
 
-interface Result {
+interface Result extends ProductState {
   productDetails?: ProductDetailsType | null;
   loading: boolean;
   error: ApolloError | undefined;
   selectedConfigurableProductOptions: SelectedConfigurableProductOptions;
   handleSelectedConfigurableOptions: HandleSelectedConfigurableOptions;
 }
 
+interface ProductState {
+  priceRange: PriceRangeType | null;
+  mediaGallery: Array<MediaGalleryItemType>;
+}
+
+const findSelectedProductVariant = (
+  selectedConfigurableProductOptions: SelectedConfigurableProductOptions,
+  productData: ProductDetailsType,
+): ConfigurableProductVariant | null => {
+  if (productData.type !== ProductTypeEnum.CONFIGURED) {
+    return null;
+  }
+  let variants = productData.variants;
+  Object.keys(selectedConfigurableProductOptions).forEach(code => {
+    variants = variants.filter(variant => {
+      const attribute = variant.attributes.find(attr => attr.code === code);
+      return attribute?.valueIndex === selectedConfigurableProductOptions[code];
+    });
+  });
+  return variants?.[0];
+};
+
 export const useProductDetails = ({ sku }: Props): Result => {
   const [
     selectedConfigurableProductOptions,
     setSelectedConfigurableProductOptions,
   ] = useState<SelectedConfigurableProductOptions>({});
+  const [
+    selectedVariant,
+    setSelectedVariant,
+  ] = useState<ConfigurableProductVariant | null>(null);
+  const [{ priceRange, mediaGallery }, setState] = useReducer<
+    React.Reducer<ProductState, ProductState>
+  >((prevState, newState) => ({ ...prevState, ...newState }), {
+    priceRange: null,
+    mediaGallery: [],
+  });
   const { data, loading, error } = useQuery<
     ProductDetailsDataType,
     GetProductDetailsVars
@@ -40,6 +76,39 @@ export const useProductDetails = ({ sku }: Props): Result => {
     },
   });
 
+  useEffect(() => {
+    // User has selected configurable options, find the matching simple product
+    if (
+      data?.products?.items?.[0] &&
+      Object.keys(selectedConfigurableProductOptions).length > 0
+    ) {
+      const variant = findSelectedProductVariant(
+        selectedConfigurableProductOptions,
+        data?.products?.items?.[0],
+      );
+      setSelectedVariant(variant);
+    }
+  }, [data, selectedConfigurableProductOptions]);
+
+  useEffect(() => {
+    if (data?.products?.items?.[0]) {
+      if (selectedVariant) {
+        setState({
+          priceRange: selectedVariant.product.priceRange,
+          mediaGallery: [
+            ...selectedVariant.product.mediaGallery,
+            ...data?.products?.items?.[0].mediaGallery,
+          ],
+        });
+      } else {
+        setState({
+          priceRange: data?.products?.items?.[0].priceRange,
+          mediaGallery: data?.products?.items?.[0].mediaGallery,
+        });
+      }
+    }
+  }, [data, selectedVariant]);
+
   const handleSelectedConfigurableOptions: HandleSelectedConfigurableOptions = (
     optionCode,
     valueIndex,
@@ -52,6 +121,8 @@ export const useProductDetails = ({ sku }: Props): Result => {
 
   return {
     productDetails: data?.products?.items?.[0],
+    priceRange,
+    mediaGallery,
     loading,
     error,
     selectedConfigurableProductOptions,

src/screens/ProductDetailsScreen/ProductDetailsScreen.tsx

@@ -40,6 +40,8 @@ const ProductDetailsScreen = ({
   const {
     error,
     loading,
+    priceRange,
+    mediaGallery,
     productDetails,
     selectedConfigurableProductOptions,
     handleSelectedConfigurableOptions,
@@ -105,10 +107,10 @@ const ProductDetailsScreen = ({
   };
 
   const renderPrice = (): React.ReactNode => {
-    if (productDetails) {
+    if (productDetails && priceRange) {
       return (
         <Text h2 style={styles.price}>
-          {formatPrice(productDetails.priceRange.maximumPrice.finalPrice)}
+          {formatPrice(priceRange.maximumPrice.finalPrice)}
         </Text>
       );
     }
@@ -160,7 +162,7 @@ const ProductDetailsScreen = ({
       }
     >
       <View>
-        <MediaGallery items={productDetails?.mediaGallery ?? []} />
+        <MediaGallery items={mediaGallery} />
         <Text h1 style={styles.name}>
           {productDetails?.name}
         </Text>