@graphcommerce/magento-cart-shipping-address 10.0.0-canary.66 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 10.0.0-canary.68
+
+## 10.0.0-canary.67
+
+### Patch Changes
+
+- [#2540](https://github.com/graphcommerce-org/graphcommerce/pull/2540) [`36e2bac`](https://github.com/graphcommerce-org/graphcommerce/commit/36e2bacb4fe765ce1fcd24dc36736e90bb17a7dc) - Add billingAddress permission (EDITABLE | READONLY) that controls whether the end user can update their billing address in the account section and checkout. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 10.0.0-canary.66
 
 ## 10.0.0-canary.65

package/components/CustomerAddressForm/CustomerAddressForm.tsx

@@ -12,7 +12,7 @@ import {
   useCartQuery,
   useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
-import { CustomerDocument } from '@graphcommerce/magento-customer'
+import { CustomerDocument, useBillingAddressPermission } from '@graphcommerce/magento-customer'
 import { customerAddressNoteEnable } from '@graphcommerce/next-config/config'
 import { filterNonNullableKeys, FormRow } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
@@ -44,6 +44,8 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
   const cart = cartQuery.data?.cart
   const isVirtual = cart?.is_virtual ?? false
 
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
+
   const customerAddresses = filterNonNullableKeys(customer.data?.customer?.addresses, ['id'])
 
   const cartShipping = cart?.shipping_addresses?.[0]
@@ -80,6 +82,13 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
     mode = 'billing'
   }
 
+  // If the billingAddress permission is READONLY we are never allowed to update the billing address.
+  if (billingAddressReadonly) {
+    Mutation = SetCustomerShippingAddressOnCartDocument
+    cartAddressId = cartShippingId
+    mode = 'shipping'
+  }
+
   const form = useFormGqlMutationCart<
     SetCustomerShippingBillingAddressOnCartMutation,
     SetCustomerShippingBillingAddressOnCartMutationVariables & {

package/components/ShippingAddressForm/ShippingAddressForm.tsx

@@ -19,6 +19,7 @@ import {
   CompanyFields,
   CustomerDocument,
   NameFields,
+  useBillingAddressPermission,
   useCustomerQuery,
 } from '@graphcommerce/magento-customer'
 import { CountryRegionsDocument, StoreConfigDocument } from '@graphcommerce/magento-store'
@@ -45,6 +46,7 @@ export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'> & {
   sx?: SxProps<Theme>
 }
 
+// eslint-disable-next-line react/display-name
 export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props) => {
   const { step, sx } = props
   const { data: cartQuery } = useCartQuery(GetAddressesDocument)
@@ -53,6 +55,8 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
   const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
   const { data: customerQuery } = useCustomerQuery(CustomerDocument)
 
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
+
   const shopCountry = config?.storeConfig?.locale?.split('_')?.[1].toUpperCase()
 
   const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
@@ -86,6 +90,11 @@ export const ShippingAddressForm = React.memo<ShippingAddressFormProps>((props)
     Mutation = SetBillingAddressDocument
   }
 
+  // If the billingAddress permission is READONLY we are never allowed to update the billing address.
+  if (billingAddressReadonly) {
+    Mutation = SetShippingAddressDocument
+  }
+
   const form = useFormGqlMutationCart(Mutation, {
     defaultValues: isCartAddressACustomerAddress(customerQuery?.customer?.addresses, currentAddress)
       ? { saveInAddressBook: true, isCompany: false }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-shipping-address",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.66",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -15,21 +15,21 @@
     ".": "./index.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.66",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/graphql": "^10.0.0-canary.66",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.66",
-    "@graphcommerce/image": "^10.0.0-canary.66",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.66",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.66",
-    "@graphcommerce/magento-store": "^10.0.0-canary.66",
-    "@graphcommerce/next-ui": "^10.0.0-canary.66",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.68",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^19.2.0",