@graphcommerce/ecommerce-ui 10.0.0-canary.68 → 10.0.0-canary.72

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @graphcommerce/ecommerce-ui
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+### Patch Changes
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`0af3466`](https://github.com/graphcommerce-org/graphcommerce/commit/0af34663f882ad9906dc13ae6c835c158598b945) - Fix NumberFieldElement plus button decreasing the number instead of increasing ([@paales](https://github.com/paales))
+
 ## 10.0.0-canary.68
 
 ### Major Changes

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,5 +1,6 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import type { AlertProps, SxProps, Theme } from '@mui/material'
 import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'
@@ -7,7 +8,7 @@ import { maskNetworkError } from './maskNetworkError'
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
 export type ApolloErrorAlertProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
   sx?: SxProps<Theme>
@@ -15,48 +16,50 @@ export type ApolloErrorAlertProps = {
 export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
   const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
 
+  if (!error) return null
+
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
-    <>
-      {error && (
-        <Box key='alerts'>
-          <Box sx={sx} className={classes.root}>
-            {error.graphQLErrors.map((e, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Box key={index}>
-                <div className={classes.alert}>
-                  <Alert
-                    severity='error'
-                    {...graphqlErrorAlertProps}
-                    sx={(theme) => ({
-                      borderRadius: theme.shape.borderRadius * 1,
-                      marginTop: 0.5,
-                    })}
-                  >
-                    {e.message}
-                  </Alert>
-                </div>
-              </Box>
-            ))}
-            {error.networkError && (
-              <Box key='networkError'>
-                <Box
-                  sx={(theme) => ({
-                    paddingTop: theme.spacings.xxs,
-                    paddingBottom: theme.spacings.xxs,
-                  })}
-                  className={classes.alert}
-                  key='networkError'
-                >
-                  <Alert severity='error' {...networkErrorAlertProps}>
-                    {maskNetworkError(error.networkError)}
-                  </Alert>
-                </Box>
-              </Box>
-            )}
+    <Box key='alerts'>
+      <Box sx={sx} className={classes.root}>
+        {graphQLErrors.map((e, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Box key={index}>
+            <div className={classes.alert}>
+              <Alert
+                severity='error'
+                {...graphqlErrorAlertProps}
+                sx={(theme) => ({
+                  borderRadius: theme.shape.borderRadius * 1,
+                  marginTop: 0.5,
+                })}
+              >
+                {e.message}
+              </Alert>
+            </div>
+          </Box>
+        ))}
+        {!isGraphQLError && error && (
+          <Box key='networkError'>
+            <Box
+              sx={(theme) => ({
+                paddingTop: theme.spacings.xxs,
+                paddingBottom: theme.spacings.xxs,
+              })}
+              className={classes.alert}
+              key='networkError'
+            >
+              <Alert severity='error' {...networkErrorAlertProps}>
+                {maskNetworkError(error)}
+              </Alert>
+            </Box>
           </Box>
-        </Box>
-      )}
-    </>
+        )}
+      </Box>
+    </Box>
   )
 }
 

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,13 +1,14 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
 import { FullPageMessage } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
-  error: ApolloError
+  error: ErrorLike
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
 } & Omit<FullPageMessageProps, 'title' | 'description'>
@@ -21,14 +22,17 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+  const errorCount = graphQLErrors.length + (isGraphQLError ? 0 : 1)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
+        title={graphQLErrors[0]?.message ?? maskNetworkError(error)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,10 +1,11 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { ErrorSnackbarProps } from '@graphcommerce/next-ui'
 import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
@@ -12,11 +13,15 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
 
   if (!error) return null
 
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
-        {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {maskNetworkError(error.networkError)}
+        {graphQLErrors.map((e) => e.message).join(', ')}
+        {!isGraphQLError && maskNetworkError(error)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -1,24 +1,15 @@
-import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import type { ErrorLike } from '@apollo/client'
+import { ServerError, ServerParseError } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 
-function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
-  return 'name' in (error as ServerError)
-}
-
-function isServerParseError(
-  error: Error | ServerParseError | ServerError | null,
-): error is ServerParseError {
-  return 'bodyText' in (error as ServerParseError)
-}
-
-export function maskNetworkError(networkError: Error | ServerParseError | ServerError | null) {
-  if (!networkError) return null
+export function maskNetworkError(error: ErrorLike | null) {
+  if (!error) return null
 
   if (process.env.NODE_ENV === 'development') {
-    console.log(networkError)
+    console.log(error)
   }
 
-  if (isServerParseError(networkError) || isServerError(networkError)) {
+  if (ServerParseError.is(error) || ServerError.is(error)) {
     return <Trans>Something went wrong on the server, please try again later.</Trans>
   }
 

package/components/FormComponents/NumberFieldElement.tsx

@@ -167,7 +167,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
               onClick={() => {
                 if (valueAsNumber >= (inputProps.max ?? Infinity)) return
                 // Round to nearest step with precision fix
-                const newValue = roundToPrecision(Math.round((valueAsNumber - step) / step) * step)
+                const newValue = roundToPrecision(Math.round((valueAsNumber + step) / step) * step)
                 onChange(newValue)
               }}
               sx={sxx(

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,10 +1,10 @@
-import type { QueryResult } from '@graphcommerce/graphql'
+import type { ApolloClient, useQuery } from '@graphcommerce/graphql'
 import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  waitFor: useQuery.Result<any, any> | boolean | (useQuery.Result<any, any> | boolean)[] | undefined
   children: React.ReactNode
   fallback?: React.ReactNode
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.68",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/graphql": "^10.0.0-canary.68",
-    "@graphcommerce/next-ui": "^10.0.0-canary.68",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",