feat(clerk-js,types,localizations): Add maintenance mode banner to SignIn and SignUp

Author: nikosdouvlis

.changeset/popular-rats-sneeze.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add maintenance mode banner to the SignIn and SignUp components. The text can be customized by updating the maintenanceMode localization key.

packages/clerk-js/src/core/resources/Environment.ts

@@ -18,6 +18,7 @@ export class Environment extends BaseResource implements EnvironmentResource {
   displayConfig!: DisplayConfigResource;
   userSettings!: UserSettingsResource;
   organizationSettings!: OrganizationSettingsResource;
+  maintenanceMode!: boolean;
 
   public static getInstance(): Environment {
     if (!Environment.instance) {
@@ -61,6 +62,7 @@ export class Environment extends BaseResource implements EnvironmentResource {
       this.displayConfig = new DisplayConfig(data.display_config);
       this.userSettings = new UserSettings(data.user_settings);
       this.organizationSettings = new OrganizationSettings(data.organization_settings);
+      this.maintenanceMode = data.maintenance_mode;
     }
     return this;
   }

packages/clerk-js/src/ui/elements/Alert.tsx

@@ -22,7 +22,9 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
       elementDescriptor={descriptors.alert}
       elementId={descriptors.alert.setId(variant)}
       colorScheme={variant}
+      align='start'
       {...rest}
+      sx={[t => ({ backgroundColor: t.colors.$warningAlpha100 }), rest.sx]}
     >
       <AlertIcon
         elementId={descriptors.alert.setId(variant)}
@@ -39,9 +41,10 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
         <Text
           elementDescriptor={descriptors.alertText}
           elementId={descriptors.alert.setId(variant)}
-          colorScheme={variant === 'danger' ? 'danger' : 'secondary'}
+          colorScheme={variant === 'danger' ? 'danger' : variant === 'warning' ? 'warning' : 'secondary'}
           variant='body'
           localizationKey={title}
+          sx={{ textAlign: 'left' }}
         >
           {children}
         </Text>

packages/clerk-js/src/ui/elements/Card/CardContent.tsx

@@ -1,17 +1,28 @@
 import React from 'react';
 
-import { descriptors, Flex, generateFlowPartClassname, Icon } from '../../customizables';
+import { useEnvironment } from '../../contexts';
+import {
+  descriptors,
+  Flex,
+  generateFlowPartClassname,
+  Icon,
+  localizationKeys,
+  useLocalizations,
+} from '../../customizables';
 import { Close } from '../../icons';
 import { type PropsOfComponent } from '../../styledSystem';
 import { useFlowMetadata } from '../contexts';
 import { IconButton } from '../IconButton';
 import { useUnsafeModalContext } from '../Modal';
+import { CardAlert } from './CardAlert';
 
 type CardContentProps = PropsOfComponent<typeof Flex>;
 export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((props, ref) => {
   const { children, sx, ...rest } = props;
   const flowMetadata = useFlowMetadata();
   const { toggle } = useUnsafeModalContext();
+  const { maintenanceMode } = useEnvironment();
+  const { t } = useLocalizations();
 
   return (
     <Flex
@@ -63,6 +74,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           })}
         />
       )}
+      {(maintenanceMode || true) && <CardAlert variant={'warning'}>{t(localizationKeys('maintenanceMode'))}</CardAlert>}
       {children}
     </Flex>
   );

packages/clerk-js/src/ui/primitives/AlertIcon.tsx

@@ -1,4 +1,4 @@
-import { ExclamationCircle, ExclamationTriangle } from '../icons';
+import { ExclamationTriangle } from '../icons';
 import type { StyleVariants } from '../styledSystem';
 import { createVariants } from '../styledSystem';
 
@@ -24,7 +24,7 @@ export type AlertIconProps = OwnProps & StyleVariants<typeof applyVariants>;
 
 export const AlertIcon = (props: AlertIconProps): JSX.Element => {
   const { variant, ...rest } = props;
-  const Icon = variant === 'warning' ? ExclamationCircle : ExclamationTriangle;
+  const Icon = ExclamationTriangle;
   return (
     <Icon
       {...filterProps(rest)}

packages/clerk-js/src/ui/primitives/Text.tsx

@@ -19,6 +19,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
         onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
         danger: { color: theme.colors.$danger500 },
         success: { color: theme.colors.$success500 },
+        warning: { color: theme.colors.$warning500 },
         secondary: { color: theme.colors.$colorTextSecondary },
         inherit: { color: 'inherit' },
       },

packages/localizations/src/en-US.ts

@@ -2,6 +2,8 @@ import type { LocalizationResource } from '@clerk/types';
 
 export const enUS: LocalizationResource = {
   locale: 'en-US',
+  maintenanceMode:
+    "We are currently undergoing maintenance, but don't worry, it shouldn't take more than a few minutes.",
   __experimental_formFieldLabel__passkeyName: 'Name of passkey',
   backButton: 'Back',
   badge__default: 'Default',

packages/types/src/environment.ts

@@ -13,4 +13,5 @@ export interface EnvironmentResource extends ClerkResource {
   isProduction: () => boolean;
   isDevelopmentOrStaging: () => boolean;
   onWindowLocationHost: () => boolean;
+  maintenanceMode: boolean;
 }

packages/types/src/json.ts

@@ -58,6 +58,7 @@ export interface EnvironmentJSON extends ClerkResourceJSON {
   display_config: DisplayConfigJSON;
   user_settings: UserSettingsJSON;
   organization_settings: OrganizationSettingsJSON;
+  maintenance_mode: boolean;
 }
 
 export interface ClientJSON extends ClerkResourceJSON {

packages/types/src/localization.ts

@@ -15,6 +15,7 @@ export type LocalizationResource = DeepPartial<_LocalizationResource>;
 
 type _LocalizationResource = {
   locale: string;
+  maintenanceMode: LocalizationValue;
   /**
    * @experimental
    * Add role keys and their localized value