@graphcommerce/magento-cart-shipping-address 3.2.5 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`db5d485a2`](https://github.com/graphcommerce-org/graphcommerce/commit/db5d485a23b6b90cfabc9a1320d3c05acbaeb8e2) Thanks [@NickdeK](https://github.com/NickdeK)! - Pickup in store functionality added to checkout
+
+### Patch Changes
+
+- Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50), [`d03f0860b`](https://github.com/graphcommerce-org/graphcommerce/commit/d03f0860b882db4f280d9467aef9d66e56c1c030), [`b68d0b44a`](https://github.com/graphcommerce-org/graphcommerce/commit/b68d0b44a87688c80fb0aa4a5c840f262ce48d2f)]:
+  - @graphcommerce/graphql@3.4.2
+  - @graphcommerce/magento-cart@4.6.0
+  - @graphcommerce/magento-customer@4.8.0
+  - @graphcommerce/react-hook-form@3.3.1
+  - @graphcommerce/next-ui@4.14.0
+  - @graphcommerce/magento-store@4.2.18
+
+## 3.2.7
+
+### Patch Changes
+
+- Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794), [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43)]:
+  - @graphcommerce/graphql@3.4.1
+  - @graphcommerce/magento-customer@4.7.2
+  - @graphcommerce/next-ui@4.13.1
+  - @graphcommerce/magento-cart@4.5.2
+  - @graphcommerce/magento-store@4.2.17
+
+## 3.2.6
+
+### Patch Changes
+
+- Updated dependencies [[`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a), [`d41cff721`](https://github.com/graphcommerce-org/graphcommerce/commit/d41cff7211230561ceeb7786cf75790efd6377cd), [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373)]:
+  - @graphcommerce/next-ui@4.13.0
+  - @graphcommerce/magento-store@4.2.16
+  - @graphcommerce/magento-cart@4.5.1
+  - @graphcommerce/magento-customer@4.7.1
+
 ## 3.2.5
 
 ### Patch Changes

package/components/CustomerAddressForm/CustomerAddressActionCard.tsx

@@ -1,7 +1,6 @@
 import { CustomerAddressFragment } from '@graphcommerce/magento-customer/components/CreateCustomerAddressForm/CustomerAddress.gql'
 import { useFindCountry } from '@graphcommerce/magento-store'
-import { ActionCard, IconSvg, iconHome } from '@graphcommerce/next-ui'
-import { ActionCardItemRenderProps } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+import { ActionCard, IconSvg, iconHome, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { useRouter } from 'next/router'

package/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -5,14 +5,14 @@ import {
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
 import { CustomerDocument } from '@graphcommerce/magento-customer'
-import { Form } from '@graphcommerce/next-ui'
-import { ActionCardListForm } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
+import { Form, ActionCardListForm } from '@graphcommerce/next-ui'
 import {
   useFormPersist,
   useFormCompose,
   UseFormComposeOptions,
   useFormAutoSubmit,
 } from '@graphcommerce/react-hook-form'
+import { Box, SxProps, Theme } from '@mui/material'
 import React, { useEffect } from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
@@ -20,12 +20,17 @@ import { CustomerAddressActionCard } from './CustomerAddressActionCard'
 import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
 import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
 
-type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & { children?: React.ReactNode }
+type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & {
+  children?: React.ReactNode
+  sx?: SxProps<Theme>
+}
 
 export function CustomerAddressForm(props: CustomerAddressListProps) {
+  const { step, children, sx } = props
+
   const customerAddresses = useQuery(CustomerDocument)
   const addresses = customerAddresses.data?.customer?.addresses
-  const { step, children } = props
+
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
 
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
@@ -90,7 +95,7 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
 
   return (
     <>
-      <Form onSubmit={submit} noValidate>
+      <Box component='form' onSubmit={submit} noValidate sx={sx}>
         <ActionCardListForm
           control={control}
           name='customerAddressId'
@@ -105,7 +110,7 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
           render={CustomerAddressActionCard}
         />
         <ApolloCartErrorAlert error={error} />
-      </Form>
+      </Box>
       {customerAddressId === -1 && children}
     </>
   )

package/components/ShippingAddressForm/SetBillingAddress.graphql

@@ -0,0 +1,44 @@
+mutation SetBillingAddress(
+  $cartId: String!
+  $company: String
+  $firstname: String!
+  $lastname: String!
+  $postcode: String!
+  $city: String!
+  $countryCode: String!
+  $regionId: Int
+  $region: String
+  $street: String!
+  $houseNumber: String!
+  $addition: String
+  $telephone: String = "000 - 000 0000"
+  $saveInAddressBook: Boolean!
+) {
+  setBillingAddressOnCart(
+    input: {
+      cart_id: $cartId
+      billing_address: {
+        address: {
+          company: $company
+          firstname: $firstname
+          lastname: $lastname
+          postcode: $postcode
+          city: $city
+          country_code: $countryCode
+          region: $region
+          region_id: $regionId
+          street: [$street, $houseNumber, $addition]
+          telephone: $telephone
+          save_in_address_book: $saveInAddressBook
+        }
+        same_as_shipping: false
+      }
+    }
+  ) {
+    cart {
+      id
+      __typename
+      ...BillingAddress
+    }
+  }
+}

package/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -4,6 +4,7 @@ import {
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
+import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
 import { AddressFields, CustomerDocument, NameFields } from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Form, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
@@ -16,19 +17,22 @@ import {
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
+import { SxProps, TextField, Theme } from '@mui/material'
 import { AnimatePresence } from 'framer-motion'
+import React from 'react'
 import { isSameAddress } from '../../utils/isSameAddress'
 import { GetAddressesDocument } from './GetAddresses.gql'
+import { SetBillingAddressDocument } from './SetBillingAddress.gql'
 import { SetShippingAddressDocument } from './SetShippingAddress.gql'
 import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql'
 
 export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'> & {
   ignoreCache?: boolean
+  sx?: SxProps<Theme>
 }
 
-export function ShippingAddressForm(props: ShippingAddressFormProps) {
-  const { step, ignoreCache = false } = props
+export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props) => {
+  const { step, sx, ignoreCache = false } = props
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const { data: countriesData } = useQuery(CountryRegionsDocument)
@@ -36,26 +40,44 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
 
   const shopCountry = config?.storeConfig?.locale?.split('_')?.[1].toUpperCase()
 
-  const currentAddress = cartQuery?.cart?.shipping_addresses?.[0]
-  const currentCustomer = customerQuery?.customer
-  const currentCountryCode = currentAddress?.country.code ?? shopCountry
-
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
   const billingAddress = cartQuery?.cart?.billing_address
+  let currentAddress: CartAddressFragment | undefined | null = shippingAddress
+
+  let Mutation = SetShippingBillingAddressDocument
+
+  // Customer has a different shipping address than the billing address we only need to update the shipping address here.
+  if (!isSameAddress(shippingAddress, billingAddress)) Mutation = SetShippingAddressDocument
 
-  const Mutation = isSameAddress(shippingAddress, billingAddress)
-    ? SetShippingBillingAddressDocument
-    : SetShippingAddressDocument
+  // TODO: This is a hard dependency on Magento's MSI and should be removed, how can we get to this value?
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore The pickup_location_code is optional
+  const isAddressAPickupLocation = Boolean(shippingAddress?.pickup_location_code)
+  const isShippingMethodPickup =
+    shippingAddress?.selected_shipping_method?.carrier_code === 'instore'
 
-  // 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.
+  // If the address is a pick up location, we never want to show it in this form.
+  // TODO: Do we want to restore the previous shipping address here, how would we go about that?
+  if (isAddressAPickupLocation) currentAddress = billingAddress
+
+  // The customer is choosing to pick up the order from a store, therefor we are never allowed to update the shipping address.
+  // TODO: instead of submitting the billing address here, we can also choose to make the form readOnly and show a message to the customer.
+  if (isAddressAPickupLocation && isShippingMethodPickup) Mutation = SetBillingAddressDocument
+
+  // TODO: For a virtual cart this form should is only interested in setting the billing address.
+  const isVirtual = cartQuery?.cart?.is_virtual ?? false
+  if (isVirtual) {
+    currentAddress = billingAddress
+    Mutation = SetBillingAddressDocument
+  }
 
   const form = useFormGqlMutationCart(Mutation, {
     defaultValues: ignoreCache
       ? { saveInAddressBook: true }
       : {
           // todo(paales): change to something more sustainable
-          firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
-          lastname: currentAddress?.lastname ?? currentCustomer?.lastname ?? '',
+          firstname: currentAddress?.firstname ?? customerQuery?.customer?.firstname ?? '',
+          lastname: currentAddress?.lastname ?? customerQuery?.customer?.lastname ?? '',
           telephone:
             currentAddress?.telephone !== '000 - 000 0000' ? currentAddress?.telephone : '',
           city: currentAddress?.city ?? '',
@@ -65,7 +87,7 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
           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,
+          countryCode: currentAddress?.country.code ?? shopCountry, // todo: replace by the default shipping country of the store + geoip,
           saveInAddressBook: true,
         },
     mode: 'onChange',
@@ -96,7 +118,7 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
   const readOnly = formState.isSubmitting && !autoSubmitting
 
   return (
-    <Form onSubmit={submit} noValidate>
+    <Form onSubmit={submit} noValidate sx={sx}>
       <AnimatePresence initial={false}>
         <NameFields form={form} key='name' readOnly={readOnly} />
         <AddressFields form={form} key='addressfields' readOnly={readOnly} />
@@ -122,4 +144,4 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
       </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.2.5",
+  "version": "3.3.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.0",
+    "@graphcommerce/graphql": "3.4.2",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-cart": "4.5.0",
-    "@graphcommerce/magento-customer": "4.7.0",
-    "@graphcommerce/magento-store": "4.2.15",
-    "@graphcommerce/next-ui": "4.12.0",
-    "@graphcommerce/react-hook-form": "3.3.0"
+    "@graphcommerce/magento-cart": "4.6.0",
+    "@graphcommerce/magento-customer": "4.8.0",
+    "@graphcommerce/magento-store": "4.2.18",
+    "@graphcommerce/next-ui": "4.14.0",
+    "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",