chore(clerk-js,localizations,types): Enhance localization for RestrictedAccess texts,add support btn (#4335)

Author: nikospapcom

.changeset/new-bananas-complain.md

@@ -0,0 +1,7 @@
+---
+"@clerk/localizations": minor
+"@clerk/clerk-js": minor
+"@clerk/types": minor
+---
+
+The "Restricted access" screen has been improved for visual consistency and the ability to contact support. The displayed texts have been made more clear and the sign-in button has been moved to the bottom.

integration/tests/restricted-mode.test.ts

@@ -102,8 +102,8 @@ export default function Page() {
     await u.po.signUp.goTo();
     await u.po.signUp.waitForMounted();
 
-    await expect(u.page.getByText(/Restricted access/i).first()).toBeVisible();
-    const backToSignIn = u.page.getByRole('link', { name: /Back to sign in/i });
+    await expect(u.page.getByText(/Access restricted/i).first()).toBeVisible();
+    const backToSignIn = u.page.getByRole('link', { name: /Sign in/i });
     await backToSignIn.click();
 
     await u.po.signUp.waitForMounted();

packages/clerk-js/src/ui/components/SignUp/SignUpRestrictedAccess.tsx

@@ -1,14 +1,21 @@
 import { useClerk } from '@clerk/shared/react';
 
 import { useSignUpContext } from '../../contexts';
-import { Icon, localizationKeys } from '../../customizables';
+import { Button, Flex, Icon, localizationKeys } from '../../customizables';
 import { Card, Header } from '../../elements';
 import { useCardState } from '../../elements/contexts';
+import { useSupportEmail } from '../../hooks/useSupportEmail';
 import { Block } from '../../icons';
+
 export const SignUpRestrictedAccess = () => {
   const clerk = useClerk();
   const card = useCardState();
   const { signInUrl } = useSignUpContext();
+  const supportEmail = useSupportEmail();
+
+  const handleEmailSupport = () => {
+    window.location.href = `mailto:${supportEmail}`;
+  };
 
   return (
     <Card.Root>
@@ -18,22 +25,36 @@ export const SignUpRestrictedAccess = () => {
             icon={Block}
             sx={t => ({
               margin: 'auto',
-              width: t.sizes.$12,
-              height: t.sizes.$12,
+              width: t.sizes.$10,
+              height: t.sizes.$10,
             })}
           />
           <Header.Title localizationKey={localizationKeys('signUp.restrictedAccess.title')} />
           <Header.Subtitle localizationKey={localizationKeys('signUp.restrictedAccess.subtitle')} />
         </Header.Root>
         <Card.Alert>{card.error}</Card.Alert>
+        {supportEmail && (
+          <Flex
+            direction='col'
+            gap={4}
+          >
+            <Button
+              localizationKey={localizationKeys('signUp.restrictedAccess.blockButton__emailSupport')}
+              onClick={handleEmailSupport}
+              hasArrow
+            />
+          </Flex>
+        )}
+      </Card.Content>
+      <Card.Footer>
         <Card.Action elementId='signUp'>
+          <Card.ActionText localizationKey={localizationKeys('signUp.restrictedAccess.actionText')} />
           <Card.ActionLink
             localizationKey={localizationKeys('signUp.restrictedAccess.actionLink')}
             to={clerk.buildUrlWithAuth(signInUrl)}
           />
         </Card.Action>
-      </Card.Content>
-      <Card.Footer />
+      </Card.Footer>
     </Card.Root>
   );
 };

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpStart.test.tsx

@@ -252,7 +252,7 @@ describe('SignUpStart', () => {
       });
 
       render(<SignUpStart />, { wrapper });
-      screen.getByText('Restricted access');
+      screen.getByText('Access restricted');
     });
   });
 

packages/localizations/src/en-US.ts

@@ -509,9 +509,11 @@ export const enUS: LocalizationResource = {
       title: 'Create your account',
     },
     restrictedAccess: {
-      title: 'Restricted access',
-      subtitle: 'Access to this app is limited, and an invitation is required to sign up.',
-      actionLink: 'Back to sign in',
+      title: 'Access restricted',
+      subtitle: 'Sign ups are currently disabled. If you believe you should have access, please contact support.',
+      actionLink: 'Sign in',
+      actionText: 'Already have an account?',
+      blockButton__emailSupport: 'Email support',
     },
   },
   socialButtonsBlockButton: 'Continue with {{provider|titleize}}',

packages/types/src/localization.ts

@@ -148,6 +148,8 @@ type _LocalizationResource = {
       title: LocalizationValue;
       subtitle: LocalizationValue;
       actionLink: LocalizationValue;
+      actionText: LocalizationValue;
+      blockButton__emailSupport: LocalizationValue;
     };
   };
   signIn: {