@graphcommerce/magento-customer 10.0.0-canary.66 → 10.0.0-canary.67

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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/AccountAddress/AccountAddress.tsx

@@ -2,6 +2,7 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
+import { useBillingAddressPermission } from '../../hooks'
 import { AddressMultiLine } from '../AddressMultiLine/AddressMultiLine'
 import { DeleteCustomerAddressForm } from '../DeleteCustomerAddressForm/DeleteCustomerAddressForm'
 import { UpdateDefaultAddressForm } from '../UpdateDefaultAddressForm/UpdateDefaultAddressForm'
@@ -16,6 +17,8 @@ const { classes } = extendableComponent(name, parts)
 export function AccountAddress(props: AccountAddressProps) {
   const { id, sx = [], ...addressProps } = props
 
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
+
   return (
     <Box
       className={classes.root}
@@ -48,7 +51,9 @@ export function AccountAddress(props: AccountAddressProps) {
         <Link href={`/account/addresses/edit?addressId=${id}`} color='primary' underline='hover'>
           <Trans>Edit</Trans>
         </Link>
-        <DeleteCustomerAddressForm addressId={id ?? undefined} />
+        {!(billingAddressReadonly && addressProps.default_billing) && (
+          <DeleteCustomerAddressForm addressId={id ?? undefined} />
+        )}
       </Box>
     </Box>
   )

package/components/EditAddressForm/EditAddressForm.tsx

@@ -6,6 +6,7 @@ import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
+import { useBillingAddressPermission } from '../../hooks'
 import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { AddressFields } from '../AddressFields/AddressFields'
 import { CompanyFields } from '../CompanyFields'
@@ -24,10 +25,12 @@ export function EditAddressForm(props: EditAddressFormProps) {
   const { address, sx } = props
 
   const router = useRouter()
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
 
   const form = useFormGqlMutation(
     UpdateCustomerAddressDocument,
     {
+      disabled: billingAddressReadonly && (address?.default_billing ?? false),
       defaultValues: {
         id: address?.id ?? undefined,
         firstname: address?.firstname,
@@ -97,17 +100,24 @@ export function EditAddressForm(props: EditAddressFormProps) {
           />
         </FormRow>
 
-        <FormActions sx={{ paddingBottom: 0 }}>
-          <Button
-            type='submit'
-            variant='pill'
-            color='primary'
-            size='large'
-            loading={formState.isSubmitting}
-          >
-            <Trans>Save changes</Trans>
-          </Button>
-        </FormActions>
+        {billingAddressReadonly && address?.default_billing ? (
+          <Trans>
+            You can not change this address as it is your billing address. Not correct? Please
+            contact our support to update this.
+          </Trans>
+        ) : (
+          <FormActions sx={{ paddingBottom: 0 }}>
+            <Button
+              type='submit'
+              variant='pill'
+              color='primary'
+              size='large'
+              loading={formState.isSubmitting}
+            >
+              <Trans>Save changes</Trans>
+            </Button>
+          </FormActions>
+        )}
       </Form>
 
       <ApolloErrorSnackbar error={error} />

package/components/UpdateDefaultAddressForm/UpdateDefaultAddressForm.tsx

@@ -3,6 +3,7 @@ import { Trans } from '@lingui/react/macro'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
+import { useBillingAddressPermission } from '../../hooks'
 import type { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { UpdateDefaultAddressDocument } from '../AccountAddresses/UpdateDefaultAddress.gql'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
@@ -33,6 +34,8 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
 
   const submit = handleSubmit(() => {})
 
+  const billingAddressReadonly = useBillingAddressPermission() === 'READONLY'
+
   useEffect(() => {
     reset(defaultValues)
   }, [defaultValues, reset])
@@ -74,6 +77,7 @@ export function UpdateDefaultAddressForm(props: UpdateDefaultAddressFormProps) {
               onBlur={onBlur}
               name={name}
               onChange={(e) => onChange((e as React.ChangeEvent<HTMLInputElement>).target.checked)}
+              disabled={billingAddressReadonly}
             />
 
             {formState.errors.defaultBilling?.message && (

package/graphql/Config.graphqls

@@ -4,9 +4,18 @@ enum CustomerAccountPermissions {
   DISABLED
 }
 
+enum BillingAddressPermissions {
+  EDITABLE
+  READONLY
+}
+
 extend input GraphCommercePermissions {
   """
   Enables / disabled the account section of the website. DISABLE_REGISTRATION will only disable the registration page.
   """
   customerAccount: CustomerAccountPermissions
+  """
+  Allows customers to change their billing address or locks it down.
+  """
+  billingAddress: BillingAddressPermissions
 }

package/hooks/index.ts

@@ -4,12 +4,13 @@ export * from './CustomerToken.gql'
 export * from './IsEmailAvailable.gql'
 export * from './OrderCardItemImage.gql'
 export * from './OrderCardItemImages.gql'
-export * from './UseOrderCardItemImages.gql'
 export * from './useAccountSignInUpForm'
 export * from './useCustomerPermissions'
 export * from './useCustomerQuery'
 export * from './useCustomerSession'
 export * from './UseCustomerValidateToken.gql'
 export * from './useGuestQuery'
+export * from './useBillingAddressPermission'
 export { default as useOrderCardItemImages } from './useOrderCardItemImages'
+export * from './UseOrderCardItemImages.gql'
 export * from './useSignInForm'

package/hooks/useBillingAddressPermission.tsx

@@ -0,0 +1,8 @@
+import { permissions } from '@graphcommerce/next-config/config'
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+export function useBillingAddressPermission() {
+  return (
+    useStorefrontConfig().permissions?.billingAddress ?? permissions?.billingAddress ?? 'EDITABLE'
+  )
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.66",
+  "version": "10.0.0-canary.67",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -21,19 +21,20 @@
     "./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.66",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.66",
-    "@graphcommerce/framer-utils": "^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-graphql": "^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/react-hook-form": "^10.0.0-canary.66",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
+    "@graphcommerce/graphql": "^10.0.0-canary.67",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.67",
+    "@graphcommerce/image": "^10.0.0-canary.67",
+    "@graphcommerce/magento-graphql": "^10.0.0-canary.67",
+    "@graphcommerce/magento-store": "^10.0.0-canary.67",
+    "@graphcommerce/next-config": "^10.0.0-canary.67",
+    "@graphcommerce/next-ui": "^10.0.0-canary.67",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",

package/utils/billingAddressPermission.tsx

@@ -0,0 +1,10 @@
+import { permissions } from '@graphcommerce/next-config/config'
+import { storefrontConfig } from '@graphcommerce/next-ui'
+
+export function getBillingAddressPermission(locale: string | undefined) {
+  return (
+    storefrontConfig(locale)?.permissions?.billingAddress ??
+    permissions?.billingAddress ??
+    'EDITABLE'
+  )
+}

package/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './customerPermissions'
+export * from './billingAddressPermission'
 export * from './orderState'