@graphcommerce/magento-cart-shipping-address 2.103.32 → 2.104.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.103.33...@graphcommerce/magento-cart-shipping-address@2.104.0) (2021-10-21)
+
+
+### Features
+
+* ability to change shipping address after changing the billing address ([101f11a](https://github.com/ho-nl/m2-pwa/commit/101f11a6472cd6e72e08152cec961df47411f310))
+
+
+
+
+
 ## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-address@2.103.0...@graphcommerce/magento-cart-shipping-address@2.103.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/magento-cart-shipping-address

package/components/ShippingAddressForm/GetAddresses.graphql

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

package/components/ShippingAddressForm/SetShippingAddress.graphql

@@ -0,0 +1,45 @@
+mutation SetShippingAddress(
+  $cartId: String!
+  $company: String
+  $firstname: String!
+  $lastname: String!
+  $postcode: String!
+  $city: String!
+  $countryCode: String!
+  $regionId: Int
+  $street: String!
+  $houseNumber: String!
+  $addition: String
+  $telephone: String = "000 - 000 0000"
+  $saveInAddressBook: Boolean!
+  $customerNote: String
+) {
+  setShippingAddressesOnCart(
+    input: {
+      cart_id: $cartId
+      shipping_addresses: [
+        {
+          address: {
+            company: $company
+            firstname: $firstname
+            lastname: $lastname
+            postcode: $postcode
+            city: $city
+            country_code: $countryCode
+            region_id: $regionId
+            street: [$street, $houseNumber, $addition]
+            telephone: $telephone
+            save_in_address_book: $saveInAddressBook
+          }
+          customer_notes: $customerNote
+        }
+      ]
+    }
+  ) {
+    cart {
+      id
+      __typename
+      ...ShippingAddress
+    }
+  }
+}

package/{ShippingAddressForm/ShippingAddressForm.graphql → components/ShippingAddressForm/SetShippingBillingAddress.graphql}

@@ -1,4 +1,4 @@
-mutation ShippingAddressForm(
+mutation SetShippingBillingAddress(
   $cartId: String!
   $company: String
   $firstname: String!

package/{ShippingAddressForm → components/ShippingAddressForm}/ShippingAddressForm.tsx

@@ -1,11 +1,11 @@
 import { useQuery } from '@apollo/client'
 import {
+  ApolloCartErrorAlert,
   useCartQuery,
   useFormGqlMutationCart,
-  ApolloCartErrorAlert,
 } from '@graphcommerce/magento-cart'
 import { AddressFields, CustomerDocument, NameFields } from '@graphcommerce/magento-customer'
-import { StoreConfigDocument, CountryRegionsDocument } from '@graphcommerce/magento-store'
+import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Form, FormRow, InputCheckmark } from '@graphcommerce/next-ui'
 import {
   phonePattern,
@@ -16,16 +16,17 @@ import {
 } from '@graphcommerce/react-hook-form'
 import { TextField } from '@material-ui/core'
 import { AnimatePresence } from 'framer-motion'
-import React, { useRef } from 'react'
-import { GetShippingAddressDocument } from './GetShippingAddress.gql'
-import { ShippingAddressFormDocument } from './ShippingAddressForm.gql'
+import React from 'react'
+import { isSameAddress } from '../../utils/isSameAddress'
+import { GetAddressesDocument } from './GetAddresses.gql'
+import { SetShippingAddressDocument } from './SetShippingAddress.gql'
+import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql'
 
 export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'>
 
 export default function ShippingAddressForm(props: ShippingAddressFormProps) {
   const { step } = props
-  const ref = useRef<HTMLFormElement>(null)
-  const { data: cartQuery } = useCartQuery(GetShippingAddressDocument)
+  const { data: cartQuery } = useCartQuery(GetAddressesDocument)
   const { data: config } = useQuery(StoreConfigDocument)
   const { data: countriesData } = useQuery(CountryRegionsDocument)
   const { data: customerQuery } = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })
@@ -36,7 +37,14 @@ export default function ShippingAddressForm(props: ShippingAddressFormProps) {
   const currentCustomer = customerQuery?.customer
   const currentCountryCode = currentAddress?.country.code ?? shopCountry
 
-  const form = useFormGqlMutationCart(ShippingAddressFormDocument, {
+  const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
+  const billingAddress = cartQuery?.cart?.billing_address
+
+  const Mutation = isSameAddress(shippingAddress, billingAddress)
+    ? SetShippingBillingAddressDocument
+    : SetShippingAddressDocument
+
+  const form = useFormGqlMutationCart(Mutation, {
     defaultValues: {
       // todo(paales): change to something more sustainable
       firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
@@ -80,7 +88,7 @@ export default function ShippingAddressForm(props: ShippingAddressFormProps) {
   const readOnly = formState.isSubmitting && !autoSubmitting
 
   return (
-    <Form onSubmit={submit} noValidate ref={ref}>
+    <Form onSubmit={submit} noValidate>
       <AnimatePresence initial={false}>
         <NameFields form={form} key='name' readOnly={readOnly} />
         <AddressFields form={form} key='addressfields' readOnly={readOnly} />

package/index.ts

@@ -1,5 +1,5 @@
 export * from './Api/BillingAddress.gql'
 export * from './Api/ShippingAddress.gql'
 
-export * from './ShippingAddressForm/ShippingAddressForm'
-export { default as ShippingAddressForm } from './ShippingAddressForm/ShippingAddressForm'
+export * from './components/ShippingAddressForm/ShippingAddressForm'
+export { default as ShippingAddressForm } from './components/ShippingAddressForm/ShippingAddressForm'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-cart-shipping-address",
-  "version": "2.103.32",
+  "version": "2.104.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,20 +14,20 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.0.8",
+    "@graphcommerce/eslint-config-pwa": "^3.1.0",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.15.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/graphql": "^2.103.8",
-    "@graphcommerce/image": "^2.104.11",
-    "@graphcommerce/magento-cart": "^3.2.2",
-    "@graphcommerce/magento-customer": "^3.1.5",
-    "@graphcommerce/magento-store": "^3.0.28",
-    "@graphcommerce/next-ui": "^3.7.1",
-    "@graphcommerce/react-hook-form": "^2.102.9",
+    "@graphcommerce/graphql": "^2.104.0",
+    "@graphcommerce/image": "^2.104.12",
+    "@graphcommerce/magento-cart": "^3.2.5",
+    "@graphcommerce/magento-customer": "^3.1.8",
+    "@graphcommerce/magento-store": "^3.0.30",
+    "@graphcommerce/next-ui": "^3.8.1",
+    "@graphcommerce/react-hook-form": "^2.102.11",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -37,5 +37,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "99b31bb867bc0a28b1687fe2c7a67f67f0b1e8e3"
+  "gitHead": "04a7cc74c49054734b71484e1999af6abfe0ebe2"
 }

package/utils/isSameAddress.ts

@@ -0,0 +1,36 @@
+import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
+
+const pluckAddress = ({
+  firstname,
+  lastname,
+  street,
+  city,
+  country,
+  telephone,
+  company,
+  postcode,
+  region,
+}: CartAddressFragment): Omit<CartAddressFragment, '__typename'> => ({
+  firstname,
+  lastname,
+  street,
+  city,
+  country,
+  telephone,
+  company,
+  postcode,
+  region,
+})
+
+export function isSameAddress(
+  address1: CartAddressFragment | null | undefined,
+  address2: CartAddressFragment | null | undefined,
+) {
+  // check if both are undefined/null
+  if (address1 == address2) return true
+
+  // one of the thow is undefined/null the other is defined.
+  if (!address1 || !address2) return false
+
+  return JSON.stringify(pluckAddress(address1)) === JSON.stringify(pluckAddress(address2))
+}

package/ShippingAddressForm/GetShippingAddress.graphql

@@ -1,5 +0,0 @@
-query GetShippingAddress($cartId: String!) {
-  cart(cart_id: $cartId) {
-    ...ShippingAddress
-  }
-}