feat(clerk-js,types,localizations): Add maintenance mode banner to Si…

…gnIn and SignUp
clerk · Apr 6, 2024 · 222acd8 · 222acd8
1 parent 064af2c
commit 222acd8
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 4 deletions.
diff --git a/.changeset/polite-toys-explode.md b/.changeset/polite-toys-explode.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.
diff --git a/packages/clerk-js/src/core/resources/Environment.ts b/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) {
@@ -71,6 +72,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;
   }

diff --git a/packages/clerk-js/src/ui/elements/Alert.tsx b/packages/clerk-js/src/ui/elements/Alert.tsx
@@ -4,6 +4,7 @@ import type { LocalizationKey } from '../customizables';
 import { Alert as AlertCust, AlertIcon, Col, descriptors, Text } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { animations } from '../styledSystem';
+import { colors } from '../utils';
 
 type _AlertProps = {
   variant?: 'danger' | 'warning';
@@ -24,7 +25,14 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
     <AlertCust
       elementDescriptor={descriptors.alert}
       elementId={descriptors.alert.setId(variant)}
+      align='start'
       {...rest}
+      sx={[
+        t => ({
+          backgroundColor: variant === 'warning' ? colors.makeTransparent(t.colors.$warning500, 0.94) : undefined,
+        }),
+        rest.sx,
+      ]}
     >
       <AlertIcon
         elementId={descriptors.alert.setId(variant)}
@@ -41,9 +49,10 @@ export const Alert = (props: AlertProps): JSX.Element | null => {
         <Text
           elementDescriptor={descriptors.alertText}
           elementId={descriptors.alert.setId(variant)}
-          colorScheme='neutral'
+          colorScheme={variant === 'danger' ? 'neutral' : 'warning'}
           variant='smallRegular'
           localizationKey={title}
+          sx={{ textAlign: 'left' }}
         >
           {children}
         </Text>

diff --git a/packages/clerk-js/src/ui/elements/Card.tsx b/packages/clerk-js/src/ui/elements/Card.tsx
@@ -1,11 +1,20 @@
 import React from 'react';
 
 import { useEnvironment } from '../contexts';
-import { descriptors, Flex, generateFlowPartClassname, Icon, useAppearance } from '../customizables';
+import {
+  descriptors,
+  Flex,
+  generateFlowPartClassname,
+  Icon,
+  localizationKeys,
+  useAppearance,
+  useLocalizations,
+} from '../customizables';
 import type { ElementDescriptor } from '../customizables/elementDescriptors';
 import { Close } from '../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { mqu } from '../styledSystem';
+import { CardAlert } from './Alert';
 import { ApplicationLogo } from './ApplicationLogo';
 import { useFlowMetadata } from './contexts';
 import { IconButton } from './IconButton';
@@ -22,6 +31,8 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
   const appearance = useAppearance();
   const flowMetadata = useFlowMetadata();
   const { branded } = useEnvironment().displayConfig;
+  const { maintenanceMode } = useEnvironment();
+  const { t } = useLocalizations();
 
   return (
     <>
@@ -58,6 +69,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
         ]}
         ref={ref}
       >
+        {maintenanceMode && <CardAlert variant='warning'>{t(localizationKeys('maintenanceMode'))}</CardAlert>}
         {appearance.parsedLayout.logoPlacement === 'inside' && <ApplicationLogo sx={insideAppLogoSx} />}
         {children}
         {branded && <PoweredByClerkTag />}

diff --git a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx b/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)}

diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx
@@ -22,6 +22,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
         primary: { color: theme.colors.$colorText },
         onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
         danger: { color: theme.colors.$danger500 },
+        warning: { color: theme.colors.$warning500 },
         success: { color: theme.colors.$success500 },
         neutral: { color: theme.colors.$colorTextSecondary },
         inherit: { color: 'inherit' },

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -14,6 +14,8 @@ const commonTexts = {
 
 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.",
   socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
   dividerText: 'or',
   formFieldLabel__emailAddress: 'Email address',

diff --git a/packages/types/src/environment.ts b/packages/types/src/environment.ts
@@ -13,4 +13,5 @@ export interface EnvironmentResource extends ClerkResource {
   isProduction: () => boolean;
   isDevelopmentOrStaging: () => boolean;
   onWindowLocationHost: () => boolean;
+  maintenanceMode: boolean;
 }
diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
@@ -60,6 +60,7 @@ export interface EnvironmentJSON extends ClerkResourceJSON {
   display_config: DisplayConfigJSON;
   user_settings: UserSettingsJSON;
   organization_settings: OrganizationSettingsJSON;
+  maintenance_mode: boolean;
 }
 
 export interface ClientJSON extends ClerkResourceJSON {

diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
@@ -752,6 +752,7 @@ type _LocalizationResource = {
     next6Days: LocalizationValue;
     numeric: LocalizationValue;
   };
+  maintenanceMode: LocalizationValue;
 };
 
 type WithParamName<T> = T &