@graphcommerce/magento-customer 6.0.2-canary.9 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # Change Log
 
+## 6.1.0
+
+### Minor Changes
+
+- [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Faster page rendering on all pages that use Apollo Client: Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart/customer.
+
+  This comes with a caviat: When using `<Suspense>` to defer rendering you might run into hydration errors. In the case where the Suspense boundaries are used to improve performance, you are required to remove those. We have a follow-up [PR](https://github.com/graphcommerce-org/graphcommerce/pull/1878) in the works that allows getting the hydration performance improvement, but not have the hydration errors. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1866](https://github.com/graphcommerce-org/graphcommerce/pull/1866) [`eafe3a17d`](https://github.com/graphcommerce-org/graphcommerce/commit/eafe3a17d6c6b4a9ca524361498ffa382d44c63f) - useOrderCardItemImages was triggered when there were no urlKeys present, causing unnessary requests to be made to the backend. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#1889](https://github.com/graphcommerce-org/graphcommerce/pull/1889) [`38bf4b6bc`](https://github.com/graphcommerce-org/graphcommerce/commit/38bf4b6bc6e705d9d124d50b775ba3f440599482) - put the country field first, so the address fields will not be changed afterwards when postcode service is active. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#1899](https://github.com/graphcommerce-org/graphcommerce/pull/1899) [`3de184ee2`](https://github.com/graphcommerce-org/graphcommerce/commit/3de184ee28d48d8f1c1c092f264ac6b86fdf3ec6) - Make order states translatable ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#1896](https://github.com/graphcommerce-org/graphcommerce/pull/1896) [`4f846293f`](https://github.com/graphcommerce-org/graphcommerce/commit/4f846293f3b020dc7bae885fe4ccd1cbd0cb10d7) - When a customer would log in the current guest information would be lost ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.22
+
+## 6.0.2-canary.21
+
+### Patch Changes
+
+- [#1899](https://github.com/graphcommerce-org/graphcommerce/pull/1899) [`3de184ee2`](https://github.com/graphcommerce-org/graphcommerce/commit/3de184ee28d48d8f1c1c092f264ac6b86fdf3ec6) - Make order states translatable ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.0.2-canary.20
+
+## 6.0.2-canary.19
+
+## 6.0.2-canary.18
+
+### Patch Changes
+
+- [#1889](https://github.com/graphcommerce-org/graphcommerce/pull/1889) [`38bf4b6bc`](https://github.com/graphcommerce-org/graphcommerce/commit/38bf4b6bc6e705d9d124d50b775ba3f440599482) - put the country field first, so the address fields will not be changed afterwards when postcode service is active. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.0.2-canary.17
+
+## 6.0.2-canary.16
+
+### Patch Changes
+
+- [#1896](https://github.com/graphcommerce-org/graphcommerce/pull/1896) [`4f846293f`](https://github.com/graphcommerce-org/graphcommerce/commit/4f846293f3b020dc7bae885fe4ccd1cbd0cb10d7) - When a customer would log in the current guest information would be lost ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.15
+
+## 6.0.2-canary.14
+
+## 6.0.2-canary.13
+
+### Patch Changes
+
+- [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.12
+
+## 6.0.2-canary.11
+
+## 6.0.2-canary.10
+
 ## 6.0.2-canary.9
 
 ## 6.0.2-canary.8

package/components/AddressFields/AddressFields.tsx

@@ -22,10 +22,14 @@ export type AddressFieldValues = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AddressFieldsProps = { form: UseFormReturn<any>; readOnly?: boolean }
+export type AddressFieldsProps = {
+  form: UseFormReturn<any>
+  readOnly?: boolean
+  countryFirst?: boolean
+}
 
 export function AddressFields(props: AddressFieldsProps) {
-  const { form, readOnly } = props
+  const { form, readOnly, countryFirst } = props
 
   const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
   const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
@@ -54,8 +58,49 @@ export function AddressFields(props: AddressFieldsProps) {
     return availableRegions?.sort(compare)
   }, [country, countryList])
 
+  const countryFields = (
+    <FormRow>
+      <SelectElement
+        control={control}
+        name='countryCode'
+        SelectProps={{ autoWidth: true }}
+        variant='outlined'
+        label={<Trans id='Country' />}
+        required={required.countryCode}
+        InputProps={{
+          readOnly,
+          endAdornment: <InputCheckmark show={valid.countryCode} select />,
+        }}
+        options={filterNonNullableKeys(countryList, [
+          'two_letter_abbreviation',
+          'full_name_locale',
+        ]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
+      />
+
+      {regionList.length > 0 && (
+        <SelectElement
+          control={control}
+          name='regionId'
+          // SelectProps={{ native: true, displayEmpty: true }}
+          variant='outlined'
+          label={<Trans id='Region' />}
+          required
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.regionId} select />,
+          }}
+          options={filterNonNullableKeys(regionList, ['id', 'name']).map(({ id, name: label }) => ({
+            id,
+            label,
+          }))}
+        />
+      )}
+    </FormRow>
+  )
+
   return (
     <>
+      {countryFirst && countryFields}
       <FormRow>
         <TextFieldElement
           variant='outlined'
@@ -129,42 +174,7 @@ export function AddressFields(props: AddressFieldsProps) {
           }}
         />
       </FormRow>
-      <FormRow>
-        <SelectElement
-          control={control}
-          name='countryCode'
-          SelectProps={{ autoWidth: true }}
-          variant='outlined'
-          label={<Trans id='Country' />}
-          required={required.countryCode}
-          InputProps={{
-            readOnly,
-            endAdornment: <InputCheckmark show={valid.countryCode} select />,
-          }}
-          options={filterNonNullableKeys(countryList, [
-            'two_letter_abbreviation',
-            'full_name_locale',
-          ]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
-        />
-
-        {regionList.length > 0 && (
-          <SelectElement
-            control={control}
-            name='regionId'
-            // SelectProps={{ native: true, displayEmpty: true }}
-            variant='outlined'
-            label={<Trans id='Region' />}
-            required
-            InputProps={{
-              readOnly,
-              endAdornment: <InputCheckmark show={valid.regionId} select />,
-            }}
-            options={filterNonNullableKeys(regionList, ['id', 'name']).map(
-              ({ id, name: label }) => ({ id, label }),
-            )}
-          />
-        )}
-      </FormRow>
+      {!countryFirst && countryFields}
     </>
   )
 }

package/components/OrderCard/OrderCard.tsx

@@ -6,6 +6,7 @@ import { OrderCardItemImage } from '../OrderCardItemImage/OrderCardItemImage'
 import { OrderStateLabel } from '../OrderStateLabel/OrderStateLabel'
 import { TrackingLink } from '../TrackingLink/TrackingLink'
 import { OrderCardFragment } from './OrderCard.gql'
+import { Trans } from '@lingui/react'
 
 type OrderCardProps = Partial<OrderCardFragment> & {
   loading?: boolean
@@ -101,13 +102,13 @@ export function OrderCard(props: OrderCardProps) {
           <OrderStateLabel
             items={items}
             renderer={{
-              Ordered: () => <span>Your order is being processed</span>,
-              Invoiced: () => <span>Your order has been invoiced</span>,
-              Shipped: () => <span>Your order is on its way!</span>,
-              Refunded: () => <span>Your order has been refunded</span>,
-              Canceled: () => <span>Your order has been canceled</span>,
-              Returned: () => <span>Your order has been returned</span>,
-              Partial: () => <span>Your order has been partially processed</span>,
+              Ordered: () => <Trans id='Your order is being processed' />,
+              Invoiced: () => <Trans id='Your order has been invoiced' />,
+              Shipped: () => <Trans id='Your order is on its way!' />,
+              Refunded: () => <Trans id='Your order has been refunded' />,
+              Canceled: () => <Trans id='Your order has been canceled' />,
+              Returned: () => <Trans id='Your order has been returned' />,
+              Partial: () => <Trans id='Your order has been partially processed' />,
             }}
           />
         </OrderRow>

package/components/SignInForm/SignInForm.tsx

@@ -19,10 +19,13 @@ export function SignInForm(props: SignInFormProps) {
     {
       defaultValues: { email },
       onBeforeSubmit: async (values) => {
-        const oldEmail = client.cache.readQuery({ query: CustomerDocument })
-        if (oldEmail?.customer?.email !== email) {
-          await client.resetStore()
-        }
+        const oldEmail = client.cache.readQuery({ query: CustomerDocument })?.customer?.email
+
+        /**
+         * We are logging in because the session expired, but we're logging in with a different
+         * email address, we need to reset the store.
+         */
+        if (oldEmail && oldEmail !== email) await client.resetStore()
         return { ...values, email }
       },
     },

package/hooks/useCustomerQuery.ts

@@ -10,16 +10,8 @@ import { useCustomerSession } from './useCustomerSession'
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
+  options: QueryHookOptions<Q, V> = {},
 ): QueryResult<Q, V> {
-  const { hydration, ...queryOptions } = options
-  const { loggedIn } = useCustomerSession({ hydration })
-
-  const result = useQuery(document, {
-    ...queryOptions,
-    ssr: false,
-    skip: !loggedIn,
-  })
-
-  return result
+  const { loggedIn } = useCustomerSession()
+  return useQuery(document, { ...options, ssr: false, skip: !loggedIn })
 }

package/hooks/useCustomerSession.ts

@@ -1,13 +1,11 @@
-import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryResult, useQuery } from '@graphcommerce/graphql'
-import { startTransition, useState } from 'react'
 import {
   CustomerTokenDocument,
   CustomerTokenQuery,
   CustomerTokenQueryVariables,
 } from './CustomerToken.gql'
 
-export type UseCustomerSessionOptions = { hydration?: boolean }
+export type UseCustomerSessionOptions = Record<string, unknown>
 
 export type UseCustomerSessionReturn =
   | {
@@ -16,33 +14,9 @@ export type UseCustomerSessionReturn =
       query: QueryResult<CustomerTokenQuery, CustomerTokenQueryVariables>
     } & Partial<Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>>
 
-export function useCustomerSession(options: UseCustomerSessionOptions = {}) {
-  /**
-   * We current always assume the initial render is during hydration.
-   *
-   * How can we determine we're not actually hydrating? Classically you could just use some global
-   * state to track this because when the initial render is done, we're not hydrating anymore.
-   *
-   * However, <Suspense/> can be used to defer the rendering to a later moment. This means that the
-   * useCustomerSession hook is called later and we're still in the hydration phase for this
-   * component while other components are rendering for the second time.
-   */
-  const { hydration = false } = options
-  const [hydrating, setHydrating] = useState(!hydration)
-
-  /**
-   * After the initital render we are definitely sure we're not hydrating anymore so we can flip the
-   * switch and rerender.
-   */
-  useIsomorphicLayoutEffect(() => {
-    if (!hydrating) return
-    startTransition(() => setHydrating(false))
-  }, [hydrating])
-
-  const skip = hydrating
-
-  const query = useQuery(CustomerTokenDocument, { skip })
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useCustomerSession(_: UseCustomerSessionOptions = {}) {
+  const query = useQuery(CustomerTokenDocument)
   const token = query.data?.customerToken
 
   return {

package/hooks/useGuestQuery.ts

@@ -9,8 +9,8 @@ import { useCustomerSession } from './useCustomerSession'
 /** Will only execute when the customer is not signed in. */
 export function useGuestQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  queryOptions: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
+  queryOptions: QueryHookOptions<Q, V> = {},
 ) {
-  const { token } = useCustomerSession({ hydration: queryOptions.hydration })
+  const { token } = useCustomerSession()
   return useQuery(document, { ...queryOptions, ssr: false, skip: !!token })
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.9",
+  "version": "6.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.9",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.9",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.9"
+    "@graphcommerce/eslint-config-pwa": "6.1.0",
+    "@graphcommerce/prettier-config-pwa": "6.1.0",
+    "@graphcommerce/typescript-config-pwa": "6.1.0"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.0.2-canary.9",
-    "@graphcommerce/framer-utils": "6.0.2-canary.9",
-    "@graphcommerce/graphql": "6.0.2-canary.9",
-    "@graphcommerce/graphql-mesh": "6.0.2-canary.9",
-    "@graphcommerce/image": "6.0.2-canary.9",
-    "@graphcommerce/magento-graphql": "6.0.2-canary.9",
-    "@graphcommerce/magento-store": "6.0.2-canary.9",
-    "@graphcommerce/next-ui": "6.0.2-canary.9",
-    "@graphcommerce/react-hook-form": "6.0.2-canary.9"
+    "@graphcommerce/ecommerce-ui": "6.1.0",
+    "@graphcommerce/framer-utils": "6.1.0",
+    "@graphcommerce/graphql": "6.1.0",
+    "@graphcommerce/graphql-mesh": "6.1.0",
+    "@graphcommerce/image": "6.1.0",
+    "@graphcommerce/magento-graphql": "6.1.0",
+    "@graphcommerce/magento-store": "6.1.0",
+    "@graphcommerce/next-ui": "6.1.0",
+    "@graphcommerce/react-hook-form": "6.1.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",