@graphcommerce/magento-product-grouped 9.1.0-canary.44 → 9.1.0-canary.45

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.1.0-canary.45
+
+### Patch Changes
+
+- [`f915f65`](https://github.com/graphcommerce-org/graphcommerce/commit/f915f655f5965bab1d50eca9b275199c02e7b7d1) - Make sure the default quantity is selected on the product page for grouped products. Products are sorted correctly and create a separate GroupedProductItem fragment for easier etensibility. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.44
 
 ## 9.1.0-canary.43
@@ -113,7 +119,6 @@
 ### Patch Changes
 
 - [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
-
   - Updated the @mui/material package
   - Removed dependencies on react-hook-form-mui and @playwright/test
   - Upgraded dependencies including type-fest and graphql-mesh

package/GroupedProducts/GroupedProductActionCard.tsx

@@ -2,21 +2,18 @@ import { Image } from '@graphcommerce/image'
 import type { AddToCartItemSelector } from '@graphcommerce/magento-product'
 import {
   AddProductsToCartQuantity,
-  ProductListPrice,
+  ProductPagePrice,
   useFormAddProductsToCart,
 } from '@graphcommerce/magento-product'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
-import { ActionCard, actionCardImageSizes, responsiveVal } from '@graphcommerce/next-ui'
+import { ActionCard, actionCardImageSizes } from '@graphcommerce/next-ui'
 import { Link } from '@mui/material'
-import type { GroupedProductFragment } from '../GroupedProduct.gql'
+import type { GroupedProductItemFragment } from '../graphql/fragments/GroupedProductItem.gql'
 
-type GroupedProductItem = NonNullable<
-  NonNullable<GroupedProductFragment['items']>[number]
->['product']
-
-export type GroupedProductActionCardProps = GroupedProductItem &
-  Omit<ActionCardProps, 'value' | 'image' | 'price' | 'title' | 'action'> &
-  AddToCartItemSelector
+export type GroupedProductActionCardProps = {
+  item: GroupedProductItemFragment
+} & AddToCartItemSelector &
+  Omit<ActionCardProps, 'value' | 'image' | 'price' | 'title' | 'action'>
 
 const typographySizes = {
   small: 'body2',
@@ -25,23 +22,16 @@ const typographySizes = {
 }
 
 export function GroupedProductActionCard(props: GroupedProductActionCardProps) {
-  const {
-    uid,
-    name,
-    small_image,
-    price_range,
-    url_key,
-    sx = [],
-    size = 'large',
-    index = 0,
-    sku,
-    url_rewrites,
-    ...rest
-  } = props
-
+  const { item, sx = [], size = 'large', index = 0, ...rest } = props
+  const { product } = item
   const { control, register } = useFormAddProductsToCart()
-  if (!sku) return null
+
+  if (!product?.sku) return null
+
+  const { uid, name, small_image, url_key, sku, url_rewrites } = product
   const hasUrl = (url_rewrites ?? []).length > 0
+  const qty = item.qty ?? 0
+
   return (
     <>
       <input type='hidden' {...register(`cartItems.${index}.sku`)} value={sku} />
@@ -126,12 +116,20 @@ export function GroupedProductActionCard(props: GroupedProductActionCardProps) {
         secondaryAction={
           <AddProductsToCartQuantity
             size='small'
-            defaultValue={1}
             index={index}
+            defaultValue={qty}
             onMouseDown={(e) => e.stopPropagation()}
+            inputProps={{ min: 0 }}
+          />
+        }
+        price={
+          <ProductPagePrice
+            index={index}
+            product={product}
+            defaultValue={qty ?? 0}
+            variant='total'
           />
         }
-        price={<ProductListPrice {...price_range.minimum_price} />}
         {...rest}
       />
     </>

package/GroupedProducts/GroupedProducts.tsx

@@ -1,6 +1,6 @@
-import { ActionCardLayout, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { ActionCardLayout, filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import { useMemo } from 'react'
-import type { GroupedProductFragment } from '../GroupedProduct.gql'
+import type { GroupedProductFragment } from '../graphql/fragments/GroupedProduct.gql'
 import { GroupedProductActionCard } from './GroupedProductActionCard'
 
 export type GroupedProductsProps = {
@@ -9,21 +9,15 @@ export type GroupedProductsProps = {
 
 export function GroupedProducts(props: GroupedProductsProps) {
   const { product } = props
-  const productItems = useMemo(() => {
-    if (product?.__typename !== 'GroupedProduct') return null
-    const { items } = product
-    return filterNonNullableKeys(items, ['product']).map((item, i) => ({
-      ...item.product,
-      value: item.product.sku ?? '',
-      index: i,
-    }))
-  }, [product])
-  if (!productItems) return null
+
+  const items = filterNonNullableKeys(product.items, ['position', 'product']).sort(
+    (a, b) => a.position - b.position,
+  )
 
   return (
     <ActionCardLayout>
-      {productItems.map((item) => (
-        <GroupedProductActionCard {...item} key={item.value ?? ''} size='medium' />
+      {items.map((item, index) => (
+        <GroupedProductActionCard index={index} item={item} key={item.position} size='medium' />
       ))}
     </ActionCardLayout>
   )

package/graphql/fragments/GroupedProduct.graphql

@@ -0,0 +1,6 @@
+fragment GroupedProduct on GroupedProduct {
+  __typename
+  items {
+    ...GroupedProductItem
+  }
+}

package/graphql/fragments/GroupedProductItem.graphql

@@ -0,0 +1,11 @@
+fragment GroupedProductItem on GroupedProductItem {
+  position
+  qty
+  product {
+    url_key
+    url_rewrites {
+      url
+    }
+    ...ProductListItem
+  }
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-grouped",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.44",
+  "version": "9.1.0-canary.45",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,18 +12,18 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.44",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.44",
-    "@graphcommerce/graphql": "^9.1.0-canary.44",
-    "@graphcommerce/image": "^9.1.0-canary.44",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.44",
-    "@graphcommerce/magento-product": "^9.1.0-canary.44",
-    "@graphcommerce/magento-product-simple": "^9.1.0-canary.44",
-    "@graphcommerce/magento-product-virtual": "^9.1.0-canary.44",
-    "@graphcommerce/magento-store": "^9.1.0-canary.44",
-    "@graphcommerce/next-ui": "^9.1.0-canary.44",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.44",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.44",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.45",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.45",
+    "@graphcommerce/graphql": "^9.1.0-canary.45",
+    "@graphcommerce/image": "^9.1.0-canary.45",
+    "@graphcommerce/magento-cart": "^9.1.0-canary.45",
+    "@graphcommerce/magento-product": "^9.1.0-canary.45",
+    "@graphcommerce/magento-product-simple": "^9.1.0-canary.45",
+    "@graphcommerce/magento-product-virtual": "^9.1.0-canary.45",
+    "@graphcommerce/magento-store": "^9.1.0-canary.45",
+    "@graphcommerce/next-ui": "^9.1.0-canary.45",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.45",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.45",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/GroupedProduct.graphql

@@ -1,15 +0,0 @@
-fragment GroupedProduct on GroupedProduct {
-  __typename
-  items {
-    position
-    qty
-    product {
-      uid
-      __typename
-      url_rewrites {
-        url
-      }
-      ...ProductListItem
-    }
-  }
-}