@graphcommerce/magento-product 9.0.0-canary.70 → 9.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 9.0.0-canary.72
+
+### Minor Changes
+
+- [#2332](https://github.com/graphcommerce-org/graphcommerce/pull/2332) [`73e897a`](https://github.com/graphcommerce-org/graphcommerce/commit/73e897a5a5f266d9ec274807720c71eb1a639074) - Use custom_attributesV2 for product specs when running on magento 247 or higher ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 9.0.0-canary.71
+
 ## 9.0.0-canary.70
 
 ## 9.0.0-canary.69

package/components/ProductSpecs/ProductSpecs.graphql

@@ -1,5 +1,5 @@
 fragment ProductSpecs on Products {
-  aggregations {
+  aggregations @skip(if: $useCustomAttributes) {
     attribute_code
     count
     label
@@ -9,4 +9,24 @@ fragment ProductSpecs on Products {
       value
     }
   }
+  items {
+    __typename
+    uid
+    ...ProductListItem
+    custom_attributesV2(filters: { is_visible_on_front: true }) @include(if: $useCustomAttributes) {
+      items {
+        code
+        __typename
+        ... on AttributeValue {
+          value
+        }
+        ... on AttributeSelectedOptions {
+          selected_options {
+            label
+            value
+          }
+        }
+      }
+    }
+  }
 }

package/components/ProductSpecs/ProductSpecs.tsx

@@ -1,6 +1,8 @@
 import { responsiveVal, Row, SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ProductSpecsFragment } from './ProductSpecs.gql'
+import { ProductSpecsAggregations } from './ProductSpecsAggregations'
+import { ProductSpecsCustomAttributes } from './ProductSpecsCustomAttributes'
 
 export type ProductSpecsProps = ProductSpecsFragment & {
   title?: string
@@ -13,7 +15,7 @@ const parts = ['root', 'specs', 'options'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function ProductSpecs(props: ProductSpecsProps) {
-  const { aggregations, title, children, sx = [] } = props
+  const { aggregations, items, title, children, sx = [] } = props
   const filter = ['price', 'category_id', 'size', 'new', 'sale', 'color']
   const specs = aggregations?.filter(
     (attr) => !filter.includes(attr?.attribute_code ?? '') && attr?.options?.[0]?.value !== '0',
@@ -46,16 +48,8 @@ export function ProductSpecs(props: ProductSpecsProps) {
             },
           })}
         >
-          {specs?.map((aggregation) => (
-            <li key={aggregation?.attribute_code}>
-              <div>{aggregation?.label}</div>
-              <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
-                {aggregation?.options?.map((option) => (
-                  <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
-                ))}
-              </Box>
-            </li>
-          ))}
+          {aggregations && <ProductSpecsAggregations aggregations={aggregations} />}
+          {items && <ProductSpecsCustomAttributes items={items} />}
         </Box>
         {children}
       </SectionContainer>

package/components/ProductSpecs/ProductSpecsAggregations.tsx

@@ -0,0 +1,34 @@
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { ProductSpecsFragment } from './ProductSpecs.gql'
+
+const name = 'ProductSpecs' as const
+const parts = ['root', 'specs', 'options'] as const
+const { classes } = extendableComponent(name, parts)
+
+export type ProductSpecsAggregationsProps = Pick<ProductSpecsFragment, 'aggregations'>
+
+export function ProductSpecsAggregations(props: ProductSpecsAggregationsProps) {
+  const { aggregations } = props
+  const filter = ['price', 'category_id', 'size', 'new', 'sale', 'color']
+  const specs = aggregations?.filter(
+    (attr) => !filter.includes(attr?.attribute_code ?? '') && attr?.options?.[0]?.value !== '0',
+  )
+
+  if (specs?.length === 0) return null
+
+  return (
+    <>
+      {specs?.map((aggregation) => (
+        <li key={aggregation?.attribute_code}>
+          <div>{aggregation?.label}</div>
+          <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
+            {aggregation?.options?.map((option) => (
+              <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+            ))}
+          </Box>
+        </li>
+      ))}
+    </>
+  )
+}

package/components/ProductSpecs/ProductSpecsCustomAttributes.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { extendableComponent } from '@graphcommerce/next-ui'
+import { Box } from '@mui/material'
+import { ProductSpecsFragment } from './ProductSpecs.gql'
+import { ProductSpecsTypesDocument } from './ProductSpecsTypes.gql'
+
+const name = 'ProductSpecs' as const
+const parts = ['root', 'specs', 'options'] as const
+const { classes } = extendableComponent(name, parts)
+
+export type ProductSpecsCustomAttributesProps = Pick<ProductSpecsFragment, 'items'>
+
+export function ProductSpecsCustomAttributes(props: ProductSpecsCustomAttributesProps) {
+  const { items } = props
+
+  const specs = items?.[0]?.custom_attributesV2?.items
+
+  const productSpecsTypes = useQuery(ProductSpecsTypesDocument)
+
+  if (items?.length === 0) return null
+
+  return (
+    <>
+      {specs?.map((item) => (
+        <li key={item?.code}>
+          <div>
+            {
+              productSpecsTypes?.data?.attributesList?.items?.find(
+                (type) => type?.code === item?.code,
+              )?.label
+            }
+          </div>
+          <Box className={classes.options} sx={{ display: 'grid', gridAutoFlow: 'row' }}>
+            {item?.__typename === 'AttributeSelectedOptions' && (
+              <>
+                {item?.selected_options?.map((option) => (
+                  <span key={option?.value}>{option?.label === '1' ? 'Yes' : option?.label}</span>
+                ))}
+              </>
+            )}
+            {item?.__typename === 'AttributeValue' && <span key={item?.value}>{item.value}</span>}
+          </Box>
+        </li>
+      ))}
+    </>
+  )
+}

package/components/ProductSpecs/ProductSpecsTypes.graphql

@@ -0,0 +1,8 @@
+query ProductSpecsTypes {
+  attributesList(entityType: CATALOG_PRODUCT, filters: { is_visible_on_front: true }) {
+    items {
+      code
+      label
+    }
+  }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.70",
+  "version": "9.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,19 +18,19 @@
     "typescript": "5.5.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.70",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.70",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.70",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.70",
-    "@graphcommerce/graphql": "^9.0.0-canary.70",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.70",
-    "@graphcommerce/image": "^9.0.0-canary.70",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.70",
-    "@graphcommerce/magento-category": "^9.0.0-canary.70",
-    "@graphcommerce/magento-store": "^9.0.0-canary.70",
-    "@graphcommerce/next-ui": "^9.0.0-canary.70",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.70",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.70",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.72",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.72",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.72",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.72",
+    "@graphcommerce/graphql": "^9.0.0-canary.72",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.72",
+    "@graphcommerce/image": "^9.0.0-canary.72",
+    "@graphcommerce/magento-cart": "^9.0.0-canary.72",
+    "@graphcommerce/magento-category": "^9.0.0-canary.72",
+    "@graphcommerce/magento-store": "^9.0.0-canary.72",
+    "@graphcommerce/next-ui": "^9.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.72",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",