@graphcommerce/magento-customer 9.0.0-canary.99 → 9.0.0

package/components/TrackingLink/TrackingLink.tsx

@@ -1,7 +1,8 @@
 import { IconSvg, iconLocation } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
-import { TrackingLinkFragment } from './TrackingLink.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
+import type { TrackingLinkFragment } from './TrackingLink.gql'
 
 export type TrackingLinkProps = TrackingLinkFragment & { sx?: SxProps<Theme> }
 

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { PasswordElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
@@ -11,15 +12,14 @@ import {
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
-import {
-  UpdateCustomerEmailDocument,
+import type {
   UpdateCustomerEmailMutation,
   UpdateCustomerEmailMutationVariables,
 } from './UpdateCustomerEmail.gql'
+import { UpdateCustomerEmailDocument } from './UpdateCustomerEmail.gql'
 
-type UpdateCustomerEmailFormProps = {
+export type UpdateCustomerEmailFormProps = {
   email: string
 }
 

package/components/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

@@ -3,7 +3,7 @@ import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
-import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
+import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { UpdateDefaultAddressDocument } from '../AccountAddresses/UpdateDefaultAddress.gql'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 

package/components/ValidatedPasswordElement/ValidatedPasswordElement.tsx

@@ -1,7 +1,8 @@
-import { PasswordElement, PasswordElementProps } from '@graphcommerce/ecommerce-ui'
+import type { PasswordElementProps } from '@graphcommerce/ecommerce-ui'
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 
 export type ValidatedPasswordElementProps<T extends FieldValues> = PasswordElementProps<T>

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -1,12 +1,14 @@
-import { mergeErrors, WaitForQueries, WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
-import { FullPageMessage, FullPageMessageProps, iconPerson, IconSvg } from '@graphcommerce/next-ui'
+import type { WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
+import { WaitForQueries, mergeErrors } from '@graphcommerce/ecommerce-ui'
+import type { FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage, IconSvg, iconPerson } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, CircularProgress } from '@mui/material'
 import React from 'react'
 import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustomerErrorFullPage'
 
-type WaitForCustomerProps = Omit<WaitForQueriesProps, 'fallback' | 'waitFor'> &
+export type WaitForCustomerProps = Omit<WaitForQueriesProps, 'fallback' | 'waitFor'> &
   Pick<FullPageMessageProps, 'disableMargin'> & {
     waitFor?: WaitForQueriesProps['waitFor']
     fallback?: React.ReactNode

package/components/index.ts

@@ -32,6 +32,7 @@ export * from './OrderCard/OrderCard'
 export * from './OrderCardItem/OrderCardItem'
 export * from './OrderCardItemImage/OrderCardItemImage'
 export * from './OrderDetails/OrderDetails'
+export * from './OrderDetails/OrderDetails.gql'
 export * from './OrderDetails/OrderTotals'
 export * from './OrderItem/OrderItem'
 export * from './OrderItems/OrderItems'

package/hooks/index.ts

@@ -9,6 +9,7 @@ export * from './useAccountSignInUpForm'
 export * from './useCustomerPermissions'
 export * from './useCustomerQuery'
 export * from './useCustomerSession'
+export * from './UseCustomerValidateToken.gql'
 export * from './useGuestQuery'
 export { default as useOrderCardItemImages } from './useOrderCardItemImages'
 export * from './useSignInForm'

package/hooks/useAccountSignInUpForm.tsx

@@ -3,12 +3,9 @@ import { useQuery } from '@graphcommerce/graphql'
 import { useUrlQuery } from '@graphcommerce/next-ui'
 import { useFormGqlQuery } from '@graphcommerce/react-hook-form'
 import { useEffect } from 'react'
-import { CustomerDocument } from './Customer.gql'
-import {
-  IsEmailAvailableDocument,
-  IsEmailAvailableQuery,
-  IsEmailAvailableQueryVariables,
-} from './IsEmailAvailable.gql'
+import type { IsEmailAvailableQuery, IsEmailAvailableQueryVariables } from './IsEmailAvailable.gql'
+import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'
+import { UseCustomerValidateTokenDocument } from './UseCustomerValidateToken.gql'
 import { useCustomerAccountCanSignUp } from './useCustomerPermissions'
 import { useCustomerSession } from './useCustomerSession'
 
@@ -27,7 +24,7 @@ export function useAccountSignInUpForm(props: UseFormIsEmailAvailableProps = {})
 
   const [queryState, setRouterQuery] = useUrlQuery<{ email?: string | null }>()
 
-  const customerQuery = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
+  const customerQuery = useQuery(UseCustomerValidateTokenDocument, { fetchPolicy: 'cache-only' })
   const cachedEmail = customerQuery?.data?.customer?.email
 
   const form = useFormGqlQuery<

package/hooks/useCustomerQuery.ts

@@ -1,10 +1,10 @@
-import {
-  useQuery,
-  TypedDocumentNode,
+import type {
+  OperationVariables,
   QueryHookOptions,
   QueryResult,
-  OperationVariables,
+  TypedDocumentNode,
 } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
 import { useCustomerSession } from './useCustomerSession'
 
 /** Will only execute when the customer is signed in. */

package/hooks/useCustomerSession.ts

@@ -1,9 +1,7 @@
-import { QueryResult, useQuery } from '@graphcommerce/graphql'
-import {
-  CustomerTokenDocument,
-  CustomerTokenQuery,
-  CustomerTokenQueryVariables,
-} from './CustomerToken.gql'
+import type { QueryResult } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
+import type { CustomerTokenQuery, CustomerTokenQueryVariables } from './CustomerToken.gql'
+import { CustomerTokenDocument } from './CustomerToken.gql'
 
 export type UseCustomerSessionOptions = Record<string, unknown>
 

package/hooks/useGuestQuery.ts

@@ -1,9 +1,9 @@
-import {
-  useQuery,
-  TypedDocumentNode,
-  QueryHookOptions,
+import type {
   OperationVariables,
+  QueryHookOptions,
+  TypedDocumentNode,
 } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
 import { useCustomerSession } from './useCustomerSession'
 
 /** Will only execute when the customer is not signed in. */

package/hooks/useOrderCardItemImages.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { OrderCardItemImageFragment } from './OrderCardItemImage.gql'
+import type { OrderCardItemImageFragment } from './OrderCardItemImage.gql'
 import { OrderCardItemImagesDocument } from './OrderCardItemImages.gql'
-import { UseOrderCardItemImagesFragment } from './UseOrderCardItemImages.gql'
+import type { UseOrderCardItemImagesFragment } from './UseOrderCardItemImages.gql'
 
 type UseOrderCardItemImagesProps = UseOrderCardItemImagesFragment | null
 

package/hooks/useSignInForm.ts

@@ -1,11 +1,9 @@
 import { useApolloClient } from '@graphcommerce/graphql'
 import { setCssFlag } from '@graphcommerce/next-ui'
-import { UseFormGraphQlOptions, useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import {
-  SignInDocument,
-  SignInMutation,
-  SignInMutationVariables,
-} from '../components/SignInForm/SignIn.gql'
+import type { UseFormGraphQlOptions } from '@graphcommerce/react-hook-form'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import type { SignInMutation, SignInMutationVariables } from '../components/SignInForm/SignIn.gql'
+import { SignInDocument } from '../components/SignInForm/SignIn.gql'
 import { signOut } from '../components/SignOutForm/signOut'
 import { CustomerDocument } from './Customer.gql'
 
@@ -14,9 +12,11 @@ type UseSignInFormProps = {
 } & UseFormGraphQlOptions<SignInMutation, SignInMutationVariables>
 
 /**
- * To extend the actions that happen after a successful sign in, you can use the `onComplete` option.
+ * To extend the actions that happen after a successful sign in, you can use the `onComplete`
+ * option.
  *
- * @example @graphcommerce/magento-cart/plugins/useSignInFormMergeCart
+ * @example
+ *   @graphcommerce/magento-cart/plugins/useSignInFormMergeCart
  */
 export function useSignInForm({ email, ...options }: UseSignInFormProps) {
   const client = useApolloClient()
@@ -39,7 +39,7 @@ export function useSignInForm({ email, ...options }: UseSignInFormProps) {
         return options?.onBeforeSubmit ? options.onBeforeSubmit(newValues) : newValues
       },
       onComplete: (...args) => {
-        setCssFlag('in-context', true)
+        setCssFlag('private-query', true)
         return options.onComplete?.(...args)
       },
     },

package/link/customerLink.ts

@@ -1,14 +1,9 @@
 import { globalApolloClient } from '@graphcommerce/graphql'
-import {
-  ApolloCache,
-  ApolloLink,
-  fromPromise,
-  onError,
-  setContext,
-} from '@graphcommerce/graphql/apollo'
-import { ErrorCategory } from '@graphcommerce/magento-graphql'
-import { GraphQLError } from 'graphql'
-import { NextRouter } from 'next/router'
+import type { ApolloCache } from '@graphcommerce/graphql/apollo'
+import { ApolloLink, fromPromise, onError, setContext } from '@graphcommerce/graphql/apollo'
+import type { ErrorCategory } from '@graphcommerce/magento-graphql'
+import type { GraphQLFormattedError } from 'graphql'
+import type { NextRouter } from 'next/router'
 import { signOut } from '../components/SignOutForm/signOut'
 import { CustomerTokenDocument } from '../hooks'
 
@@ -50,7 +45,7 @@ export async function pushWithPromise(router: Pick<NextRouter, 'push' | 'events'
   })
 }
 
-function isErrorCategory(err: GraphQLError, category: ErrorCategory) {
+function isErrorCategory(err: GraphQLFormattedError, category: ErrorCategory) {
   return err.extensions?.category === category
 }
 

package/link/xMagentoCacheIdHeader.ts

@@ -1,4 +1,5 @@
-import { ApolloLink, DefaultContext } from '@graphcommerce/graphql'
+import type { DefaultContext } from '@graphcommerce/graphql'
+import { ApolloLink } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '../hooks'
 
 export const xMagentoCacheIdHeader = new ApolloLink((operation, forward) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.99",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,24 +12,24 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.99",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.99",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.99",
-    "@graphcommerce/graphql": "^9.0.0-canary.99",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.99",
-    "@graphcommerce/image": "^9.0.0-canary.99",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.99",
-    "@graphcommerce/magento-store": "^9.0.0-canary.99",
-    "@graphcommerce/next-ui": "^9.0.0-canary.99",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.99",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.99",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.99",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-next-pages": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/graphql-mesh": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/magento-graphql": "^9.0.0",
+    "@graphcommerce/magento-store": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/react-hook-form": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "graphql": "^16.0.0",
     "next": "*",
     "react": "^18.2.0",

package/plugins/MagentoCustomerGraphqlProvider.tsx

@@ -1,7 +1,7 @@
-import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { useEventCallback } from '@mui/material'
-import { NextRouter } from 'next/router'
+import type { NextRouter } from 'next/router'
 import { useMemo } from 'react'
 import { customerLink } from '../link/customerLink'
 import { customerTypePolicies, migrateCustomer } from '../typePolicies'

package/plugins/SessionDebuggerPlugin.tsx

@@ -25,9 +25,9 @@ export function FramerNextPages(props: PluginProps<PagesProps>) {
           onClick={() => {
             const currentToken = client.readQuery({ query: CustomerTokenDocument })
             if (!currentToken?.customerToken?.token) {
-              console.log('No customerToken available, nothing to break')
+              console.warn('No customerToken available, nothing to break')
             } else {
-              console.log(`Changing current token to a random one`)
+              console.warn('Changing current token to a random one')
 
               client.writeQuery({
                 query: CustomerTokenDocument,

package/plugins/XMagentoCacheIdGraphQLProvider.tsx

@@ -1,4 +1,4 @@
-import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { GraphQLProviderProps } from '@graphcommerce/graphql'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { xMagentoCacheIdHeader } from '../link/xMagentoCacheIdHeader'
 

package/plugins/{magentoCustomerGetInContext.ts → magentoCustomerPrivateQueryContext.ts}

@@ -1,6 +1,6 @@
 import {
-  type getInContextInput as getInContextInputType,
-  type useInContextInput as useInContextInputType,
+  type getPrivateQueryContext as getPrivateQueryContextType,
+  type usePrivateQueryContext as usePrivateQueryContextType,
 } from '@graphcommerce/graphql'
 import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 import { CustomerTokenDocument } from '../hooks/CustomerToken.gql'
@@ -11,7 +11,7 @@ export const config: PluginConfig = {
   module: '@graphcommerce/graphql',
 }
 
-export const getInContextInput: FunctionPlugin<typeof getInContextInputType> = (
+export const getPrivateQueryContext: FunctionPlugin<typeof getPrivateQueryContextType> = (
   prev,
   client,
   ...args
@@ -23,7 +23,10 @@ export const getInContextInput: FunctionPlugin<typeof getInContextInputType> = (
   return { ...res, loggedIn: true }
 }
 
-export const useInContextInput: FunctionPlugin<typeof useInContextInputType> = (prev, ...args) => {
+export const usePrivateQueryContext: FunctionPlugin<typeof usePrivateQueryContextType> = (
+  prev,
+  ...args
+) => {
   const { loggedIn } = useCustomerSession()
   const res = prev(...args)
   if (!loggedIn) return res

package/test/authentication.playwright.ts

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
+
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { waitForGraphQlResponse } from '@graphcommerce/graphql/test/apolloClient.fixture'
-import { SignUpDocument, SignUpMutation } from '@graphcommerce/magento-customer/components'
-import {
-  SignUpConfirmDocument,
-  SignUpConfirmMutation,
-} from '@graphcommerce/magento-customer/components/SignUpForm/SignUpConfirm.gql'
+import type { SignUpMutation } from '@graphcommerce/magento-customer/components'
+import { SignUpDocument } from '@graphcommerce/magento-customer/components'
+import type { SignUpConfirmMutation } from '@graphcommerce/magento-customer/components/SignUpForm/SignUpConfirm.gql'
+import { SignUpConfirmDocument } from '@graphcommerce/magento-customer/components/SignUpForm/SignUpConfirm.gql'
 import { test } from '@playwright/test'
 
 function isSignUp(

package/typePolicies.ts

@@ -31,5 +31,7 @@ export const customerTypePolicies: StrictTypedTypePolicies = {
 
 export const migrateCustomer: MigrateCache = (oldCache, newCache) => {
   const token = oldCache.readQuery({ query: CustomerTokenDocument })
-  newCache.writeQuery({ query: CustomerTokenDocument, data: token, broadcast: true })
+  if (token) {
+    newCache.writeQuery({ query: CustomerTokenDocument, data: token, broadcast: true })
+  }
 }

package/utils/orderState.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { OrderDetailsFragment } from '../components/OrderDetails/OrderDetails.gql'
-import { OrderStateLabelFragment } from '../components/OrderStateLabel/OrderStateLabel.gql'
+import type { OrderDetailsFragment } from '../components/OrderDetails/OrderDetails.gql'
+import type { OrderStateLabelFragment } from '../components/OrderStateLabel/OrderStateLabel.gql'
 
 export type OrderState = 'pending' | 'processing' | 'complete' | 'closed'