refactor: move data changes to a plugin for better readability

examples/magento-graphcms/pages/p/[url].tsx

@@ -134,14 +134,11 @@ function ProductPage(props: Props) {
               )}
             </Typography>
 
-            {isTypename(product, ['ConfigurableProduct']) ? (
-              <ConfigurableShortDescription product={product} />
-            ) : (
-              <ProductShortDescription
-                short_description={product?.short_description}
-                sx={(theme) => ({ mb: theme.spacings.xs })}
-              />
-            )}
+            <ProductShortDescription
+              short_description={product?.short_description}
+              sx={(theme) => ({ mb: theme.spacings.xs })}
+              product={product}
+            />
 
             {isTypename(product, ['ConfigurableProduct']) ? (
               <ConfigurableProductReviewChip {...product} />

packages/magento-product-configurable/components/index.ts

@@ -9,7 +9,6 @@ export * from './ConfigurableProductPageGallery'
 export * from './ProductListItemConfigurable'
 export * from './ConfigurableName'
 export * from './ConfigurableProductUrls'
-export * from './ConfigurableShortDescription'
 export * from './ConfigurableJsonLd'
 export * from './ConfigurableProductPageMeta'
 export * from './ConfigurableProductReviewChip'

packages/magento-product-configurable/plugins/ConfigurableProductShortDescription.tsx

@@ -0,0 +1,28 @@
+import type { ProductShortDescriptionProps } from '@graphcommerce/magento-product'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { ConfigurableOptionsFragment } from '../graphql/ConfigurableOptions.gql'
+import { useConfigurableOptionsSelection } from '../hooks'
+
+export const component = 'ProductShortDescription'
+export const exported = '@graphcommerce/magento-product'
+
+function ConfigurableProductShortDescription(
+  props: PluginProps<
+    ProductShortDescriptionProps & { product?: ConfigurableOptionsFragment; index?: number }
+  >,
+) {
+  const { Prev, product, index = 0, short_description, ...rest } = props
+  const { configured } = useConfigurableOptionsSelection({ url_key: product?.url_key, index })
+
+  const isConfigurable = product?.__typename === 'ConfigurableProduct'
+
+  const getConfigurableShortDescription =
+    configured?.configurable_product_options_selection?.variant?.short_description
+  const configurableShortDescription =
+    isConfigurable && getConfigurableShortDescription?.html.length
+      ? getConfigurableShortDescription
+      : short_description
+
+  return <Prev {...rest} short_description={configurableShortDescription} />
+}
+export const Plugin = ConfigurableProductShortDescription

packages/magento-product/components/ProductShortDescription/ProductShortDescription.tsx

@@ -2,7 +2,7 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { SxProps, Theme, Typography } from '@mui/material'
 import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
-type ProductShortDescriptionProps = ProductShortDescriptionFragment & { sx?: SxProps<Theme> }
+export type ProductShortDescriptionProps = ProductShortDescriptionFragment & { sx?: SxProps<Theme> }
 
 const { classes } = extendableComponent('ProductShortDescription', ['description'] as const)