@graphcommerce/magento-cart-shipping-address 3.0.15 → 3.0.18

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # Change Log
 
+## 3.0.18
+
+### Patch Changes
+
+- Updated dependencies [[`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397), [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d), [`00f6167ff`](https://github.com/graphcommerce-org/graphcommerce/commit/00f6167ff4096bf7432f3d8e8e739ecbf6ab0dd2), [`7159d3ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/7159d3ab31e937c9c921023c46e80db5813e789c), [`32370574b`](https://github.com/graphcommerce-org/graphcommerce/commit/32370574bef6345b857ae911049ca27a64bc7e08), [`ed2b67a06`](https://github.com/graphcommerce-org/graphcommerce/commit/ed2b67a0618d9db97e79ed2a8226e0ae12403943), [`4c146c682`](https://github.com/graphcommerce-org/graphcommerce/commit/4c146c68242e6edc616807fb73173cc959c26034)]:
+  - @graphcommerce/next-ui@4.8.0
+  - @graphcommerce/magento-customer@4.3.0
+  - @graphcommerce/magento-cart@4.2.15
+  - @graphcommerce/magento-store@4.2.4
+
+## 3.0.17
+
+### Patch Changes
+
+- Updated dependencies [[`c30893857`](https://github.com/graphcommerce-org/graphcommerce/commit/c3089385791291e812a48c2691a39a2325ee0439)]:
+  - @graphcommerce/magento-store@4.2.3
+  - @graphcommerce/magento-cart@4.2.14
+  - @graphcommerce/magento-customer@4.2.12
+
+## 3.0.16
+
+### Patch Changes
+
+- [#1451](https://github.com/graphcommerce-org/graphcommerce/pull/1451) [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061) Thanks [@paales](https://github.com/paales)! - Removed all occurences of @lingui/macro and moved to @lingui/macro / @lingui/core in preparation to move to swc.
+
+  Since we've removed @lingui/macro, all occurences need to be replaced with @lingui/core and @lingui/react.
+
+  All occurences of `<Trans>` and `t` need to be replaced:
+
+  ```tsx
+  import { Trans, t } from '@lingui/macro'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={t`Account ${foo}`}>
+        <Trans>My Translation {foo}</Trans>
+      </div>
+    )
+  }
+  ```
+
+  Needs to be replaced with:
+
+  ```tsx
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
+
+  function MyComponent() {
+    const foo = 'bar'
+    return (
+      <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+      </div>
+    )
+  }
+  ```
+
+  [More examples for Trans](https://lingui.js.org/ref/macro.html#examples-of-jsx-macros) and [more examples for `t`](https://lingui.js.org/ref/macro.html#examples-of-js-macros)
+
+- Updated dependencies [[`50188e378`](https://github.com/graphcommerce-org/graphcommerce/commit/50188e378b4c77561ebc600958ea11cd114fa61a), [`f698ff85d`](https://github.com/graphcommerce-org/graphcommerce/commit/f698ff85df6bb0922288471bb3c81856091b8061)]:
+  - @graphcommerce/react-hook-form@3.1.3
+  - @graphcommerce/magento-cart@4.2.13
+  - @graphcommerce/magento-customer@4.2.11
+  - @graphcommerce/magento-store@4.2.2
+  - @graphcommerce/next-ui@4.7.2
+  - @graphcommerce/graphql@3.1.3
+
 ## 3.0.15
 
 ### Patch Changes

package/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -0,0 +1,193 @@
+import { useQuery } from '@graphcommerce/graphql'
+import {
+  ApolloCartErrorAlert,
+  useCartQuery,
+  useFormGqlMutationCart,
+} from '@graphcommerce/magento-cart'
+import { CustomerDocument } from '@graphcommerce/magento-customer'
+import { iconHome, IconSvg, ActionCardList, ActionCard, Form, Button } from '@graphcommerce/next-ui'
+import {
+  useFormPersist,
+  useFormCompose,
+  UseFormComposeOptions,
+  Controller,
+} from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/react'
+import { Box, FormControl, NoSsr } from '@mui/material'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { isSameAddress } from '../../utils/isSameAddress'
+import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
+import { SetCustomerBillingAddressOnCartDocument } from './SetCustomerBillingAddressOnCart.gql'
+import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
+import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
+
+type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & { children?: React.ReactNode }
+
+export function CustomerAddressForm(props: CustomerAddressListProps) {
+  const customerAddresses = useQuery(CustomerDocument)
+  const addresses = customerAddresses.data?.customer?.addresses
+  const { step, children } = props
+  const router = useRouter()
+
+  const { data: cartQuery } = useCartQuery(GetAddressesDocument)
+
+  const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
+  const billingAddress = cartQuery?.cart?.billing_address
+
+  const found = customerAddresses.data?.customer?.addresses?.find(
+    (customerAddr) =>
+      [
+        customerAddr?.firstname === shippingAddress?.firstname,
+        customerAddr?.lastname === shippingAddress?.lastname,
+        customerAddr?.city === shippingAddress?.city,
+        customerAddr?.postcode === shippingAddress?.postcode,
+        customerAddr?.street?.[0] === shippingAddress?.street[0],
+        customerAddr?.street?.[1] === shippingAddress?.street[1],
+        customerAddr?.street?.[2] === shippingAddress?.street[2],
+        customerAddr?.country_code === shippingAddress?.country.code,
+        customerAddr?.region?.region_code === shippingAddress?.region?.code,
+      ].filter((v) => !v).length === 0,
+  )
+
+  const Mutation = isSameAddress(shippingAddress, billingAddress)
+    ? SetCustomerShippingBillingAddressOnCartDocument
+    : SetCustomerShippingAddressOnCartDocument
+
+  // if (cartQuery?.cart?.is_virtual) {
+  //   Mutation = SetCustomerBillingAddressOnCartDocument
+  // }
+
+  const form = useFormGqlMutationCart(Mutation, {
+    // defaultValues: { customerAddressId: defaultCustomerAddressId },
+    mode: 'onChange',
+  })
+  const { handleSubmit, error, control, watch } = form
+
+  // If customer selects 'new address' then we do not have to submit anything so we provide an empty submit function.
+  const customerAddressId = watch('customerAddressId')
+
+  const submit = customerAddressId === -1 ? async () => {} : handleSubmit(() => {})
+
+  useFormPersist({ form, name: 'CustomerAddressForm' })
+  useFormCompose({ form, step, submit, key: 'CustomerAddressForm' })
+
+  if (customerAddresses.loading || !addresses || addresses.length === 0) return null
+
+  return (
+    <>
+      {' '}
+      <Form onSubmit={submit} noValidate>
+        <FormControl>
+          <Controller
+            control={control}
+            defaultValue={found && found.id ? found.id : 0}
+            name='customerAddressId'
+            rules={{ required: true }}
+            render={({ field: { onChange, value }, fieldState, formState }) => (
+              <NoSsr>
+                <ActionCardList
+                  required
+                  value={String(value)}
+                  onChange={(event, incomming) => {
+                    onChange(Number(incomming))
+                  }}
+                  error={formState.isSubmitted && !!fieldState.error}
+                >
+                  {addresses.map((address) => (
+                    <ActionCard
+                      value={String(address?.id)}
+                      key={address?.id}
+                      action={
+                        <Button disableRipple variant='text' color='secondary'>
+                          <Trans id='Select' />
+                        </Button>
+                      }
+                      image={<IconSvg src={iconHome} size='large' />}
+                      title={`${address?.firstname} ${address?.lastname}`}
+                      details={
+                        <Box>
+                          {address?.street?.join(' ')}, {address?.postcode}, {address?.city},{' '}
+                          {address?.country_code}
+                        </Box>
+                      }
+                      onClick={onChange}
+                      secondaryAction={
+                        <Button
+                          disableRipple
+                          color='secondary'
+                          variant='text'
+                          onClick={(e) => {
+                            e.stopPropagation()
+
+                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                            router.push(
+                              `/checkout/customer/addresses/edit?addressId=${address?.id}`,
+                            )
+                          }}
+                        >
+                          <Trans id='Edit address' />
+                        </Button>
+                      }
+                      selected={value === address?.id}
+                      hidden={!!value && value !== address?.id}
+                      reset={
+                        <Button
+                          disableRipple
+                          variant='text'
+                          color='secondary'
+                          onClick={(e) => {
+                            e.preventDefault()
+                            onChange(null)
+                          }}
+                        >
+                          <Trans id='Change' />
+                        </Button>
+                      }
+                    />
+                  ))}
+                  <ActionCard
+                    value='-1'
+                    key='new-address'
+                    title={<Trans id='New address' />}
+                    selected={value === -1}
+                    hidden={!!value && value !== -1}
+                    details={<Trans id='Add new address' />}
+                    image={<IconSvg src={iconHome} size='large' />}
+                    action={
+                      <Button
+                        disableRipple
+                        variant='text'
+                        color='secondary'
+                        onClick={(e) => {
+                          e.preventDefault()
+                        }}
+                      >
+                        <Trans id='Select' />
+                      </Button>
+                    }
+                    reset={
+                      <Button
+                        disableRipple
+                        variant='text'
+                        color='secondary'
+                        onClick={(e) => {
+                          e.preventDefault()
+                          onChange(null)
+                        }}
+                      >
+                        <Trans id='Change' />
+                      </Button>
+                    }
+                  />
+                </ActionCardList>
+              </NoSsr>
+            )}
+          />
+        </FormControl>
+        <ApolloCartErrorAlert error={error} />
+      </Form>
+      {customerAddressId === -1 && children}
+    </>
+  )
+}

package/components/CustomerAddressForm/SetCustomerBillingAddressOnCart.graphql

@@ -0,0 +1,11 @@
+mutation SetCustomerBillingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
+  setBillingAddressOnCart(
+    input: { cart_id: $cartId, billing_address: { customer_address_id: $customerAddressId } }
+  ) {
+    cart {
+      id
+      __typename
+      ...BillingAddress
+    }
+  }
+}

package/components/CustomerAddressForm/SetCustomerShippingAddressOnCart.graphql

@@ -0,0 +1,11 @@
+mutation SetCustomerShippingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
+  setShippingAddressesOnCart(
+    input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $customerAddressId }] }
+  ) {
+    cart {
+      id
+      __typename
+      ...ShippingAddress
+    }
+  }
+}

package/components/CustomerAddressForm/SetCustomerShippingBillingAddressOnCart.graphql

@@ -0,0 +1,21 @@
+mutation SetCustomerShippingBillingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
+  setShippingAddressesOnCart(
+    input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $customerAddressId }] }
+  ) {
+    cart {
+      id
+      __typename
+      ...ShippingAddress
+    }
+  }
+
+  setBillingAddressOnCart(
+    input: { cart_id: $cartId, billing_address: { customer_address_id: $customerAddressId } }
+  ) {
+    cart {
+      id
+      __typename
+      ...BillingAddress
+    }
+  }
+}

package/components/ShippingAddressForm/GetAddresses.graphql

@@ -1,5 +1,6 @@
 query GetAddresses($cartId: String!) {
   cart(cart_id: $cartId) {
+    is_virtual
     ...ShippingAddress
     ...BillingAddress
   }

package/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -14,7 +14,8 @@ import {
   UseFormComposeOptions,
   useFormPersist,
 } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
 import { TextField } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
 import React from 'react'
@@ -23,10 +24,12 @@ import { GetAddressesDocument } from './GetAddresses.gql'
 import { SetShippingAddressDocument } from './SetShippingAddress.gql'
 import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql'
 
-export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'>
+export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'> & {
+  ignoreCache?: boolean
+}
 
 export function ShippingAddressForm(props: ShippingAddressFormProps) {
-  const { step } = props
+  const { step, ignoreCache = false } = props
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const { data: countriesData } = useQuery(CountryRegionsDocument)
@@ -45,22 +48,27 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
     ? SetShippingBillingAddressDocument
     : SetShippingAddressDocument
 
+  // If address is an existing customer address then this form is rendered to add a new address so we don't want any default values.
+
   const form = useFormGqlMutationCart(Mutation, {
-    defaultValues: {
-      // todo(paales): change to something more sustainable
-      firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
-      lastname: currentAddress?.lastname ?? currentCustomer?.lastname ?? '',
-      telephone: currentAddress?.telephone !== '000 - 000 0000' ? currentAddress?.telephone : '',
-      city: currentAddress?.city ?? '',
-      company: currentAddress?.company ?? '',
-      postcode: currentAddress?.postcode ?? '',
-      street: currentAddress?.street?.[0] ?? '',
-      houseNumber: currentAddress?.street?.[1] ?? '',
-      addition: currentAddress?.street?.[2] ?? '',
-      regionId: currentAddress?.region?.region_id ?? null,
-      countryCode: currentCountryCode, // todo: replace by the default shipping country of the store + geoip,
-      saveInAddressBook: true,
-    },
+    defaultValues: ignoreCache
+      ? {}
+      : {
+          // todo(paales): change to something more sustainable
+          firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
+          lastname: currentAddress?.lastname ?? currentCustomer?.lastname ?? '',
+          telephone:
+            currentAddress?.telephone !== '000 - 000 0000' ? currentAddress?.telephone : '',
+          city: currentAddress?.city ?? '',
+          company: currentAddress?.company ?? '',
+          postcode: currentAddress?.postcode ?? '',
+          street: currentAddress?.street?.[0] ?? '',
+          houseNumber: currentAddress?.street?.[1] ?? '',
+          addition: currentAddress?.street?.[2] ?? '',
+          regionId: currentAddress?.region?.region_id ?? null,
+          countryCode: currentCountryCode, // todo: replace by the default shipping country of the store + geoip,
+          saveInAddressBook: true,
+        },
     mode: 'onChange',
     onBeforeSubmit: (variables) => {
       const regionId = countriesData?.countries
@@ -93,17 +101,16 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
       <AnimatePresence initial={false}>
         <NameFields form={form} key='name' readOnly={readOnly} />
         <AddressFields form={form} key='addressfields' readOnly={readOnly} />
-
         <FormRow key='telephone'>
           <TextField
             variant='outlined'
             type='text'
             error={!!formState.errors.telephone}
             required={required.telephone}
-            label={<Trans>Telephone</Trans>}
+            label={<Trans id='Telephone' />}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: t`Invalid phone number` },
+              pattern: { value: phonePattern, message: i18n._(/* i18n */ `Invalid phone number`) },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             InputProps={{
@@ -112,7 +119,6 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
             }}
           />
         </FormRow>
-
         <ApolloCartErrorAlert error={error} />
       </AnimatePresence>
     </Form>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-shipping-address",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.15",
+  "version": "3.0.18",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,22 +12,23 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.7",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.1.2",
+    "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.12",
-    "@graphcommerce/magento-customer": "4.2.10",
-    "@graphcommerce/magento-store": "4.2.1",
-    "@graphcommerce/next-ui": "4.7.1",
-    "@graphcommerce/react-hook-form": "3.1.2"
+    "@graphcommerce/magento-cart": "4.2.15",
+    "@graphcommerce/magento-customer": "4.3.0",
+    "@graphcommerce/magento-store": "4.2.4",
+    "@graphcommerce/next-ui": "4.8.0",
+    "@graphcommerce/react-hook-form": "3.1.3"
   },
   "peerDependencies": {
-    "@lingui/macro": "^3.13.2",
+    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
     "next": "12.1.2",

package/utils/isSameAddress.ts

@@ -1,5 +1,11 @@
 import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
 
+type PartialNullable<T> = {
+  [P in keyof T]?: T[P] | null
+}
+
+type AddressSignature = PartialNullable<Omit<CartAddressFragment, '__typename'>>
+
 const pluckAddress = ({
   firstname,
   lastname,
@@ -10,7 +16,7 @@ const pluckAddress = ({
   company,
   postcode,
   region,
-}: CartAddressFragment): Omit<CartAddressFragment, '__typename'> => ({
+}: AddressSignature): AddressSignature => ({
   firstname,
   lastname,
   street,
@@ -23,8 +29,8 @@ const pluckAddress = ({
 })
 
 export function isSameAddress(
-  address1: CartAddressFragment | null | undefined,
-  address2: CartAddressFragment | null | undefined,
+  address1: AddressSignature | null | undefined,
+  address2: AddressSignature | null | undefined,
 ) {
   // check if both are undefined/null
   // eslint-disable-next-line eqeqeq

package/components/ShippingAddressIdForm/ShippingAddressIdForm.graphql

@@ -1,9 +0,0 @@
-mutation ShippingAddressIdForm($cartId: String!, $addressId: Int!) {
-  setShippingAddressesOnCart(
-    input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $addressId }] }
-  ) {
-    cart {
-      ...ShippingAddress
-    }
-  }
-}