@graphcommerce/magento-customer 9.0.0-canary.81 → 9.0.0-canary.82

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.82
+
+### Minor Changes
+
+- [#2366](https://github.com/graphcommerce-org/graphcommerce/pull/2366) [`3612c99`](https://github.com/graphcommerce-org/graphcommerce/commit/3612c994b80bb3b1bc02de10668f69a332402dc4) - Add `permissions` config so the website or store can be configurated to run in different modes. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
 ## 9.0.0-canary.81
 
 ## 9.0.0-canary.80

package/components/AccountSignInUpForm/AccountSignInUpForm.tsx

@@ -10,22 +10,25 @@ import {
   extendableComponent,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, CircularProgress, Link, SxProps, Theme, Typography } from '@mui/material'
+import { Alert, Box, CircularProgress, Link, SxProps, Theme, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
-import { CustomerDocument, useAccountSignInUpForm } from '../../hooks'
+import { CustomerDocument, useAccountSignInUpForm, useCustomerAccountCanSignUp } from '../../hooks'
 import { useCustomerQuery } from '../../hooks/useCustomerQuery'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError'
 import { SignInForm } from '../SignInForm/SignInForm'
 import { signOut } from '../SignOutForm/signOut'
 import { SignUpForm } from '../SignUpForm/SignUpForm'
 
-export type AccountSignInUpFormProps = { sx?: SxProps<Theme> }
+export type AccountSignInUpFormProps = {
+  sx?: SxProps<Theme>
+  signUpDisabled?: React.ReactNode
+}
 
 const parts = ['root', 'titleContainer'] as const
 const { classes } = extendableComponent('AccountSignInUpForm', parts)
 
 export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
-  const { sx = [] } = props
+  const { sx = [], signUpDisabled } = props
   const customerQuery = useCustomerQuery(CustomerDocument)
 
   const { email, firstname = '' } = customerQuery.data?.customer ?? {}
@@ -36,6 +39,15 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
 
   const client = useApolloClient()
 
+  const canSignUp = useCustomerAccountCanSignUp()
+  const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogin || !canSignUp
+
+  const showEmail =
+    mode === 'email' ||
+    mode === 'session-expired' ||
+    mode === 'signin' ||
+    (mode === 'signup' && canSignUp)
+
   return (
     <FormDiv sx={sx} className={classes.root}>
       <Box
@@ -53,7 +65,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
           </>
         )}
 
-        {mode === 'signin' && (
+        {(mode === 'signin' || (mode === 'signup' && !canSignUp)) && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
               <Trans id='Sign in' />
@@ -64,7 +76,7 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
           </>
         )}
 
-        {mode === 'signup' && (
+        {mode === 'signup' && canSignUp && (
           <>
             <LayoutTitle variant='h2' gutterBottom={false}>
               <Trans id='Create account!' />
@@ -106,33 +118,32 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         )}
       </Box>
 
-      {!import.meta.graphCommerce.enableGuestCheckoutLogin &&
-        (mode === 'signin' || mode === 'signup' || mode === 'email') && (
-          <FormRow>
-            <ActionCardListForm
-              control={form.control}
-              name='requestedMode'
-              layout='grid'
-              size='large'
-              render={ActionCard}
-              sx={(theme) => ({
-                '&.layoutGrid': {
-                  gridTemplateColumns: 'auto auto',
-                  justifyContent: 'center',
-                },
-                '& .ActionCard-root.sizeLarge': {
-                  px: theme.spacings.md,
-                },
-              })}
-              items={[
-                { value: 'signin', title: <Trans id='Sign in' /> },
-                { value: 'signup', title: <Trans id='Create Account' /> },
-              ]}
-            />
-          </FormRow>
-        )}
+      {isToggleMethod && (mode === 'signin' || mode === 'signup' || mode === 'email') && (
+        <FormRow>
+          <ActionCardListForm
+            control={form.control}
+            name='requestedMode'
+            layout='grid'
+            size='large'
+            render={ActionCard}
+            sx={(theme) => ({
+              '&.layoutGrid': {
+                gridTemplateColumns: 'auto auto',
+                justifyContent: 'center',
+              },
+              '& .ActionCard-root.sizeLarge': {
+                px: theme.spacings.md,
+              },
+            })}
+            items={[
+              { value: 'signin', title: <Trans id='Sign in' /> },
+              { value: 'signup', title: <Trans id='Create Account' /> },
+            ]}
+          />
+        </FormRow>
+      )}
 
-      {mode !== 'signedin' && (
+      {showEmail && (
         <form onSubmit={submit}>
           <FormAutoSubmit {...form} submit={submit} />
           <Box>
@@ -193,11 +204,20 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
         </Box>
       )}
 
-      {mode === 'signup' && (
+      {mode === 'signup' && canSignUp && (
         <Box>
           <SignUpForm email={watch('email')} />
         </Box>
       )}
+      {mode === 'signup' && !canSignUp && (
+        <Box>
+          {signUpDisabled || (
+            <Alert severity='success'>
+              <Trans id='Sign up is disabled, please contact us for more information.' />
+            </Alert>
+          )}
+        </Box>
+      )}
     </FormDiv>
   )
 }

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -1,7 +1,6 @@
 import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/ecommerce-ui'
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { useCustomerSession } from '../../hooks/useCustomerSession'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
 export type ApolloCustomerErrorAlertProps = ApolloErrorAlertProps
@@ -9,7 +8,6 @@ export type ApolloCustomerErrorAlertProps = ApolloErrorAlertProps
 export function ApolloCustomerErrorAlert(props: ApolloCustomerErrorAlertProps) {
   const { error, graphqlErrorAlertProps } = props
   const [newError, unauthorized] = useAuthorizationErrorMasked(error)
-  const { query } = useCustomerSession()
 
   return (
     <ApolloErrorAlert
@@ -20,7 +18,7 @@ export function ApolloCustomerErrorAlert(props: ApolloCustomerErrorAlertProps) {
           <>
             {graphqlErrorAlertProps?.action}
             <Button href='/account/signin' color='error' size='small'>
-              {query.data?.customerToken ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+              <Trans id='Sign in' />
             </Button>
           </>
         ) : (

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -3,7 +3,7 @@ import { iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import type { SetOptional } from 'type-fest'
-import { useCustomerSession } from '../../hooks/useCustomerSession'
+import { useCustomerAccountCanSignUp } from '../../hooks'
 import { useAuthorizationErrorMasked } from './useAuthorizationErrorMasked'
 
 export type ApolloCustomerErrorFullPageProps = {
@@ -16,7 +16,7 @@ export type ApolloCustomerErrorFullPageProps = {
 export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPageProps) {
   const { error, icon, altButton, button, ...alertProps } = props
   const [newError, unauthorized] = useAuthorizationErrorMasked(error)
-  const { token } = useCustomerSession()
+  const canSignUp = useCustomerAccountCanSignUp()
 
   return (
     <ApolloErrorFullPage
@@ -26,7 +26,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
       button={
         unauthorized ? (
           <Button href='/account/signin' variant='pill' color='primary' size='large'>
-            {token ? <Trans id='Sign in' /> : <Trans id='Sign in or create an account!' />}
+            {canSignUp ? <Trans id='Sign in or create an account!' /> : <Trans id='Sign in' />}
           </Button>
         ) : (
           button

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -11,7 +11,7 @@ export function useAuthorizationErrorMasked(error?: ApolloError) {
     error,
     mask: token
       ? i18n._(/* i18n */ 'Please reauthenticate and try again')
-      : i18n._(/* i18n */ 'You must sign in to continue'),
+      : i18n._(/* i18n */ 'You must be signed in to continue'),
     extract: false,
   })
 }

package/components/CustomerFab/CustomerFab.tsx

@@ -7,7 +7,11 @@ import {
 import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks'
+import {
+  useCustomerAccountCanSignIn,
+  useCustomerSession,
+  UseCustomerSessionReturn,
+} from '../../hooks'
 
 type CustomerFabContentProps = {
   icon?: React.ReactNode
@@ -52,6 +56,9 @@ export type CustomerFabProps = Omit<CustomerFabContentProps, 'session'>
 
 export function CustomerFab(props: CustomerFabProps) {
   const session = useCustomerSession()
+  const canSignIn = useCustomerAccountCanSignIn()
+
+  if (!canSignIn) return null
 
   return (
     <NoSsr fallback={<CustomerFabContent {...props} />}>

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,6 +1,7 @@
 import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
 import React, { MouseEventHandler } from 'react'
+import { useCustomerAccountCanSignIn } from '../../hooks'
 import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
 
 type CustomerMenuFabItemProps = {
@@ -40,6 +41,9 @@ function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
 export function CustomerMenuFabItem(props: CustomerMenuFabItemProps) {
   const session = useCustomerSession()
 
+  const canSignIn = useCustomerAccountCanSignIn()
+  if (!canSignIn) return null
+
   return (
     <NoSsr fallback={<CustomerMenuFabItemContent {...props} />}>
       <CustomerMenuFabItemContent session={session} {...props} />

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -1,5 +1,5 @@
 import { mergeErrors, WaitForQueries, WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
-import { FullPageMessage, FullPageMessageProps, IconSvg, iconPerson } from '@graphcommerce/next-ui'
+import { FullPageMessage, FullPageMessageProps, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Button, CircularProgress } from '@mui/material'
 import React from 'react'

package/graphql/Config.graphqls

@@ -0,0 +1,12 @@
+enum CustomerAccountPermissions {
+  ENABLED
+  DISABLE_REGISTRATION
+  DISABLED
+}
+
+extend input GraphCommercePermissions {
+  """
+  Enables / disabled the account section of the website. DISABLE_REGISTRATION will only disable the registration page.
+  """
+  customerAccount: CustomerAccountPermissions
+}

package/hooks/index.ts

@@ -6,6 +6,7 @@ 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 './useGuestQuery'

package/hooks/useAccountSignInUpForm.tsx

@@ -9,6 +9,7 @@ import {
   IsEmailAvailableQuery,
   IsEmailAvailableQueryVariables,
 } from './IsEmailAvailable.gql'
+import { useCustomerAccountCanSignUp } from './useCustomerPermissions'
 import { useCustomerSession } from './useCustomerSession'
 
 export type UseFormIsEmailAvailableProps = {
@@ -17,11 +18,13 @@ export type UseFormIsEmailAvailableProps = {
 
 export type AccountSignInUpState = 'email' | 'signin' | 'signup' | 'signedin' | 'session-expired'
 
-export const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogin
-
 export function useAccountSignInUpForm(props: UseFormIsEmailAvailableProps = {}) {
   const { onSubmitted } = props
   const { token, valid } = useCustomerSession()
+
+  const canSignUp = useCustomerAccountCanSignUp()
+  const isToggleMethod = !import.meta.graphCommerce.enableGuestCheckoutLogin || !canSignUp
+
   const [queryState, setRouterQuery] = useUrlQuery<{ email?: string | null }>()
 
   const customerQuery = useQuery(CustomerDocument, { fetchPolicy: 'cache-only' })

package/hooks/useCustomerPermissions.ts

@@ -0,0 +1,17 @@
+import { useStorefrontConfig } from '@graphcommerce/next-ui'
+
+function useCustomerAccountPermission() {
+  return (
+    useStorefrontConfig().permissions?.customerAccount ??
+    import.meta.graphCommerce.permissions?.customerAccount ??
+    'ENABLED'
+  )
+}
+
+export function useCustomerAccountCanSignIn() {
+  return useCustomerAccountPermission() !== 'DISABLED'
+}
+
+export function useCustomerAccountCanSignUp() {
+  return useCustomerAccountPermission() === 'ENABLED'
+}

package/link/customerLink.ts

@@ -7,12 +7,12 @@ import {
   setContext,
 } from '@graphcommerce/graphql/apollo'
 import { ErrorCategory } from '@graphcommerce/magento-graphql'
-import type { GraphQLError } from 'graphql'
+import { GraphQLError } from 'graphql'
 import { NextRouter } from 'next/router'
 import { signOut } from '../components/SignOutForm/signOut'
 import { CustomerTokenDocument } from '../hooks'
 
-export type PushRouter = Pick<NextRouter, 'push' | 'events'>
+export type PushRouter = Pick<NextRouter, 'push' | 'events' | 'locale'>
 
 declare module '@apollo/client' {
   interface DefaultContext {
@@ -21,7 +21,7 @@ declare module '@apollo/client' {
   }
 }
 
-async function pushWithPromise(router: Pick<NextRouter, 'push' | 'events'>, url: string) {
+export async function pushWithPromise(router: Pick<NextRouter, 'push' | 'events'>, url: string) {
   try {
     await router.push(url)
   } catch {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.81",
+  "version": "9.0.0-canary.82",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.81",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.81",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.81",
-    "@graphcommerce/graphql": "^9.0.0-canary.81",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.81",
-    "@graphcommerce/image": "^9.0.0-canary.81",
-    "@graphcommerce/magento-graphql": "^9.0.0-canary.81",
-    "@graphcommerce/magento-store": "^9.0.0-canary.81",
-    "@graphcommerce/next-ui": "^9.0.0-canary.81",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.81",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.81",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.81",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.82",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.82",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.82",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.82",
+    "@graphcommerce/graphql": "^9.0.0-canary.82",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.82",
+    "@graphcommerce/image": "^9.0.0-canary.82",
+    "@graphcommerce/magento-graphql": "^9.0.0-canary.82",
+    "@graphcommerce/magento-store": "^9.0.0-canary.82",
+    "@graphcommerce/next-ui": "^9.0.0-canary.82",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.82",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.82",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.82",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/MagentoCustomerGraphqlProvider.tsx

@@ -15,6 +15,7 @@ export function GraphQLProvider(props: PluginProps<GraphQLProviderProps>) {
   const { Prev, links = [], policies = [], migrations = [], router, ...rest } = props
 
   const push = useEventCallback<NextRouter['push']>((...args) => router.push(...args))
+
   const customerLinkMemo = useMemo(
     () => customerLink({ push, events: router.events }),
     [push, router.events],

package/utils/customerPermissions.ts

@@ -0,0 +1,17 @@
+import { storefrontConfig } from '@graphcommerce/next-ui'
+
+function getCustomerAccountPermission(locale: string | undefined) {
+  return (
+    storefrontConfig(locale)?.permissions?.customerAccount ??
+    import.meta.graphCommerce.permissions?.customerAccount ??
+    'ENABLED'
+  )
+}
+
+export function getCustomerAccountIsDisabled(locale: string | undefined) {
+  return getCustomerAccountPermission(locale) === 'DISABLED'
+}
+
+export function getCustomerAccountCanSignIn(locale: string | undefined) {
+  return getCustomerAccountPermission(locale) !== 'DISABLED'
+}

package/utils/index.ts

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