@graphcommerce/magento-product 4.4.25 → 4.5.2

package/Api/ProductListItem.graphql

@@ -8,9 +8,6 @@ fragment ProductListItem on ProductInterface @injectable {
     label
   }
   price_range {
-    maximum_price {
-      ...ProductListPrice
-    }
     minimum_price {
       ...ProductListPrice
     }

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Change Log
 
+## 4.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`755d2cf83`](https://github.com/graphcommerce-org/graphcommerce/commit/755d2cf83343a5ad3d61063eff595d821de360aa), [`dc7f2dda4`](https://github.com/graphcommerce-org/graphcommerce/commit/dc7f2dda40ff8572fc11161de6eb62ca13e720dd)]:
+  - @graphcommerce/next-ui@4.23.0
+  - @graphcommerce/framer-scroller@2.1.34
+  - @graphcommerce/magento-cart@4.7.2
+  - @graphcommerce/magento-store@4.2.30
+
+## 4.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`448c77681`](https://github.com/graphcommerce-org/graphcommerce/commit/448c77681f9a7794e84ec93139d7e0f16afafbd9)]:
+  - @graphcommerce/graphql-mesh@4.1.9
+  - @graphcommerce/magento-store@4.2.29
+  - @graphcommerce/magento-cart@4.7.1
+
+## 4.5.0
+
+### Minor Changes
+
+- [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
+
+  - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
+  - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
+  - Replaced responsiveVal usage with better performaning breakpointVal where possible
+  - All buttons are now Pill by default.
+  - Cleaned up checkout styles
+
+### Patch Changes
+
+- [#1590](https://github.com/graphcommerce-org/graphcommerce/pull/1590) [`b40a352f7`](https://github.com/graphcommerce-org/graphcommerce/commit/b40a352f7bccdb831dce1d45baf98d51b0921d58) Thanks [@paales](https://github.com/paales)! - Split ProductList query into two separate queries so the backend can use varnish more effectively
+
+* [#1590](https://github.com/graphcommerce-org/graphcommerce/pull/1590) [`40983df17`](https://github.com/graphcommerce-org/graphcommerce/commit/40983df170ed0435c47496285dfe30aafeb2eeac) Thanks [@paales](https://github.com/paales)! - Implement search results with a base static page and dynamic pages after paginating/filtering
+
+- [#1590](https://github.com/graphcommerce-org/graphcommerce/pull/1590) [`ec96a0eb0`](https://github.com/graphcommerce-org/graphcommerce/commit/ec96a0eb049ee2204f32f9c578455cf9c131dbd2) Thanks [@paales](https://github.com/paales)! - Filtered category pages are now servered by a separate route with getServerSideProps. Since there are practically infinite variations of filters, it doesn't make sense to query those on a URL level and we're leveraging the backend caching possibilities.
+
+- Updated dependencies [[`3ff0e7f2d`](https://github.com/graphcommerce-org/graphcommerce/commit/3ff0e7f2d26edad228848268d24e9aaf56cd2c30), [`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619), [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30), [`b0dc4e2e1`](https://github.com/graphcommerce-org/graphcommerce/commit/b0dc4e2e1982d502d38dd50a0f493396360a7a15), [`4a5286dfe`](https://github.com/graphcommerce-org/graphcommerce/commit/4a5286dfeaa1719e594a0078f274fbab53969c4e), [`d46d5ed0c`](https://github.com/graphcommerce-org/graphcommerce/commit/d46d5ed0cc5794391b7527fc17bbb68ec2212e33), [`e573278e4`](https://github.com/graphcommerce-org/graphcommerce/commit/e573278e43506a6b17a2981e61d0e9fad41eb2eb), [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315), [`ac6eedbb1`](https://github.com/graphcommerce-org/graphcommerce/commit/ac6eedbb14d3abd8cf1231a98dc2a8b7f4659f1f)]:
+  - @graphcommerce/graphql-mesh@4.1.8
+  - @graphcommerce/next-ui@4.22.0
+  - @graphcommerce/magento-cart@4.7.0
+  - @graphcommerce/magento-store@4.2.28
+  - @graphcommerce/framer-scroller@2.1.33
+  - @graphcommerce/graphql@3.4.7
+  - @graphcommerce/image@3.1.9
+
 ## 4.4.25
 
 ### Patch Changes

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -8,11 +8,9 @@ import {
   iconChevronRight,
   IconSvg,
   extendableComponent,
-  AnimatedRow,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
-import { AnimatePresence } from 'framer-motion'
+import { Divider, Typography, ButtonProps, Box, Alert, useMediaQuery, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -100,13 +98,11 @@ export function ProductAddToCart(
 
       <ApolloCartErrorAlert error={error} />
 
-      <AnimatePresence initial={false}>
-        {data?.addProductsToCart?.user_errors.map((e) => (
-          <AnimatedRow layout key={e?.code}>
-            <Alert severity='error'>{e?.message}</Alert>
-          </AnimatedRow>
-        ))}
-      </AnimatePresence>
+      {data?.addProductsToCart?.user_errors.map((e) => (
+        <Box key={e?.code}>
+          <Alert severity='error'>{e?.message}</Alert>
+        </Box>
+      ))}
 
       <MessageSnackbar
         open={
@@ -116,6 +112,7 @@ export function ProductAddToCart(
           !data?.addProductsToCart?.user_errors?.length
         }
         variant='pill'
+        autoHide
         action={
           <PageLink href='/cart' passHref>
             <Button

package/components/ProductList/ProductList.graphql

@@ -4,8 +4,6 @@ query ProductList(
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}
   $search: String = ""
-  $categoryUid: String!
 ) {
   ...ProductListQueryFragment
-  ...ProductFiltersQueryFragment
 }

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -30,7 +30,7 @@ export function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       filters={{ ...params.filters, [attribute_code]: filter }}
       currentPage={undefined}
       noLink
-      link={{ scroll: false, replace: true }}
+      link={{ replace: true, prefetch: false }}
     >
       <Chip
         component='button'

package/components/ProductListFilters/FilterEqualType.tsx

@@ -115,7 +115,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
               currentPage={undefined}
               key={option?.value}
               color='inherit'
-              link={{ replace: anyFilterActive }}
+              link={{ replace: anyFilterActive, prefetch: false }}
             >
               <ListItem
                 dense

package/components/ProductListFilters/ProductFilters.graphql

@@ -0,0 +1,5 @@
+query ProductFilters($filters: ProductAttributeFilterInput = {}, $search: String) {
+  filters: products(filter: $filters, currentPage: 1, pageSize: 1, search: $search) {
+    ...ProductListFilters
+  }
+}

package/components/ProductListItem/ProductListItem.tsx

@@ -1,5 +1,10 @@
 import { Image, ImageProps } from '@graphcommerce/image'
-import { responsiveVal, extendableComponent, useNumberFormat } from '@graphcommerce/next-ui'
+import {
+  responsiveVal,
+  extendableComponent,
+  useNumberFormat,
+  breakpointVal,
+} from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { ButtonBase, Typography, Box, styled, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
@@ -83,7 +88,12 @@ export function ProductListItem(props: ProductListItemProps) {
             display: 'block',
             position: 'relative',
             height: '100%',
-            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
           }),
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
@@ -93,7 +103,13 @@ export function ProductListItem(props: ProductListItemProps) {
           sx={(theme) => ({
             display: 'grid',
             bgcolor: 'background.image',
-            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
+            overflow: 'hidden',
             padding: responsiveVal(8, 12),
             '& > picture': {
               gridArea: `1 / 1 / 3 / 3`,

package/components/ProductListItems/filteredProductList.tsx

@@ -18,7 +18,7 @@ export function parseParams(
   let error = false
   query.reduce<string | undefined>((param, value) => {
     // We parse everything in pairs, every second loop we parse
-    if (!param) return value
+    if (!param || param === 'q') return value
 
     if (param === 'page') {
       categoryVariables.currentPage = Number(value)
@@ -64,10 +64,12 @@ export function parseParams(
 export function extractUrlQuery(params?: { url: string[] }) {
   if (!params?.url) return [undefined, undefined] as const
 
-  const queryIndex = params.url.findIndex((slug) => slug === 'q')
+  const queryIndex = params.url.findIndex(
+    (slug) => slug === 'q' || slug === 'page' || slug === 'dir',
+  )
   const qIndex = queryIndex < 0 ? params.url.length : queryIndex
   const url = params.url.slice(0, qIndex).join('/')
-  const query = params.url.slice(qIndex + 1)
+  const query = params.url.slice(qIndex)
 
   if (queryIndex > 0 && !query.length) return [undefined, undefined] as const
   return [url, query] as const

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -2,7 +2,7 @@ import {
   ColumnTwoWithTop,
   ColumnTwoWithTopProps,
   extendableComponent,
-  responsiveVal,
+  breakpointVal,
 } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 import { Variant } from '@mui/material/styles/createTypography'
@@ -52,11 +52,12 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
                   display: 'inline',
                 },
               },
-              fontSize === 'responsive' && {
-                '& p, & li': {
-                  fontSize: responsiveVal(16, 30),
-                },
-              },
+              fontSize === 'responsive' &&
+                ((theme) => ({
+                  '& p, & li': {
+                    ...breakpointVal('fontSize', 16, 30, theme.breakpoints.values),
+                  },
+                })),
               fontSize !== 'responsive' && {
                 '& p, & li': {
                   fontSize,

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -1,23 +1,5 @@
 fragment ProductPagePrice on ProductInterface {
   price_range {
-    maximum_price {
-      regular_price {
-        ...Money
-      }
-      discount {
-        amount_off
-        percent_off
-      }
-      final_price {
-        ...Money
-      }
-      fixed_product_taxes {
-        amount {
-          ...Money
-        }
-        label
-      }
-    }
     minimum_price {
       regular_price {
         ...Money

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,5 +1,6 @@
 import {
   responsiveVal,
+  breakpointVal,
   iconOrderBefore,
   IconSvg,
   extendableComponent,
@@ -28,7 +29,12 @@ export function ProductSidebarDelivery() {
             ? darken(theme.palette.background.default, 0.01)
             : lighten(theme.palette.background.default, 0.2),
         padding: theme.spacings.xxs,
-        borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
+        ...breakpointVal(
+          'borderRadius',
+          theme.shape.borderRadius * 3,
+          theme.shape.borderRadius * 4,
+          theme.breakpoints.values,
+        ),
       })}
     >
       <IconSvg

package/components/index.ts

@@ -3,6 +3,7 @@ export * from './ProductAddToCart/ProductAddToCart'
 export * from './ProductAddToCart/ProductAddToCart.gql'
 export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
+export * from './ProductListFilters/ProductFilters.gql'
 export * from './ProductListFilters/ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem/ProductListItem'

package/hooks/useProductListLink.ts

@@ -6,31 +6,40 @@ import {
 } from '../components/ProductListItems/filterTypes'
 
 export function createProductListLink(props: ProductListParams): string {
-  const { url, sort, currentPage, filters } = props
+  const { url, sort, currentPage, filters: incomming } = props
+
+  const filters = { ...incomming, category_uid: undefined }
+  const uid = incomming.category_uid?.eq || incomming.category_uid?.in?.[0]
 
   // base url path generation
-  let href = ``
+  let paginateSort = ``
+  let query = ``
 
-  if (currentPage && currentPage > 1) href += `/page/${currentPage}`
+  if (currentPage && currentPage > 1) paginateSort += `/page/${currentPage}`
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
   const [sortBy] = Object.keys(sort)
-  if (sort && sortBy) href += `/sort/${sortBy}`
-  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') href += `/dir/desc`
+  if (sort && sortBy) query += `/sort/${sortBy}`
+  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') query += `/dir/desc`
 
   // Apply filters
   if (filters)
     Object.entries(filters).forEach(([param, value]) => {
-      if (value && isFilterTypeEqual(value) && value.in?.length)
-        href += `/${param}/${value.in?.join(',')}`
-      if (value && isFilterTypeMatch(value)) href += `/${param}/${value.match}`
-      if (value && isFilterTypeRange(value))
-        href += `/${param}/${value.from ?? '*'}-${value.to ?? '*'}`
+      if (!value) return
+      if (isFilterTypeEqual(value) && value.in?.length) query += `/${param}/${value.in?.join(',')}`
+      if (isFilterTypeEqual(value) && value.eq) query += `/${param}/${value.eq}`
+      if (isFilterTypeMatch(value)) paginateSort += `/${param}/${value.match}`
+      if (isFilterTypeRange(value)) query += `/${param}/${value.from ?? '*'}-${value.to ?? '*'}`
     })
 
-  href = `/${url}${href && `/q${href}`}`
-  return href
+  const result = query
+    ? `/${url.startsWith('search') ? url : `c/${url}`}${paginateSort}/q${
+        uid ? `/category_uid/${uid}` : ''
+      }${query}`
+    : `/${url}${paginateSort}`
+
+  return result
 }
 
 export function useProductListLink(props: ProductListParams): string {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.4.25",
+  "version": "4.5.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,13 +19,13 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.32",
-    "@graphcommerce/graphql": "3.4.6",
-    "@graphcommerce/graphql-mesh": "4.1.7",
-    "@graphcommerce/image": "3.1.8",
-    "@graphcommerce/magento-cart": "4.6.9",
-    "@graphcommerce/magento-store": "4.2.27",
-    "@graphcommerce/next-ui": "4.21.0",
+    "@graphcommerce/framer-scroller": "2.1.34",
+    "@graphcommerce/graphql": "3.4.7",
+    "@graphcommerce/graphql-mesh": "4.1.9",
+    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/magento-cart": "4.7.2",
+    "@graphcommerce/magento-store": "4.2.30",
+    "@graphcommerce/next-ui": "4.23.0",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {

package/components/ProductListFilters/ProductFiltersQueryFragment.graphql

@@ -1,5 +0,0 @@
-fragment ProductFiltersQueryFragment on Query {
-  filters: products(filter: { category_uid: { eq: $categoryUid } }) {
-    ...ProductListFilters
-  }
-}