Translation followup (#9735)

Address PR comments and more progress on translation

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx

@@ -6,6 +6,7 @@ import { Key } from 'ts-key-enum';
 import { z } from 'zod';
 
 import { TextInput } from '@/ui/input/components/TextInput';
+import { useLingui } from '@lingui/react/macro';
 import { Button } from 'twenty-ui';
 import { isDomain } from '~/utils/is-domain';
 
@@ -24,28 +25,6 @@ type SettingsAccountsBlocklistInputProps = {
   blockedEmailOrDomainList: string[];
 };
 
-const validationSchema = (blockedEmailOrDomainList: string[]) =>
-  z
-    .object({
-      emailOrDomain: z
-        .string()
-        .trim()
-        .email('Invalid email or domain')
-        .or(
-          z
-            .string()
-            .refine(
-              (value) => value.startsWith('@') && isDomain(value.slice(1)),
-              'Invalid email or domain',
-            ),
-        )
-        .refine(
-          (value) => !blockedEmailOrDomainList.includes(value),
-          'Email or domain is already in blocklist',
-        ),
-    })
-    .required();
-
 type FormInput = {
   emailOrDomain: string;
 };
@@ -54,6 +33,30 @@ export const SettingsAccountsBlocklistInput = ({
   updateBlockedEmailList,
   blockedEmailOrDomainList,
 }: SettingsAccountsBlocklistInputProps) => {
+  const { t } = useLingui();
+
+  const validationSchema = (blockedEmailOrDomainList: string[]) =>
+    z
+      .object({
+        emailOrDomain: z
+          .string()
+          .trim()
+          .email(t`Invalid email or domain`)
+          .or(
+            z
+              .string()
+              .refine(
+                (value) => value.startsWith('@') && isDomain(value.slice(1)),
+                t`Invalid email or domain`,
+              ),
+          )
+          .refine(
+            (value) => !blockedEmailOrDomainList.includes(value),
+            t`Email or domain is already in blocklist`,
+          ),
+      })
+      .required();
+
   const { reset, handleSubmit, control, formState } = useForm<FormInput>({
     mode: 'onSubmit',
     resolver: zodResolver(validationSchema(blockedEmailOrDomainList)),
@@ -99,7 +102,7 @@ export const SettingsAccountsBlocklistInput = ({
             )}
           />
         </StyledLinkContainer>
-        <Button title="Add to blocklist" type="submit" />
+        <Button title={t`Add to blocklist`} type="submit" />
       </StyledContainer>
     </form>
   );

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -2,6 +2,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import {
   Button,
@@ -38,14 +39,16 @@ export const SettingsAccountsListEmptyStateCard = ({
     FeatureFlagKey.IsMicrosoftSyncEnabled,
   );
 
+  const { t } = useLingui();
+
   return (
     <Card>
-      <StyledHeader>{label || 'No connected account'}</StyledHeader>
+      <StyledHeader>{label || t`No connected account`}</StyledHeader>
       <StyledBody>
         {currentWorkspace?.isGoogleAuthEnabled && (
           <Button
             Icon={IconGoogle}
-            title="Connect with Google"
+            title={t`Connect with Google`}
             variant="secondary"
             onClick={() => triggerApisOAuth('google')}
           />
@@ -53,7 +56,7 @@ export const SettingsAccountsListEmptyStateCard = ({
         {isMicrosoftSyncEnabled && currentWorkspace?.isMicrosoftAuthEnabled && (
           <Button
             Icon={IconMicrosoft}
-            title="Connect with Microsoft"
+            title={t`Connect with Microsoft`}
             variant="secondary"
             onClick={() => triggerApisOAuth('microsoft')}
           />

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistInput.stories.tsx

@@ -3,6 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 
 const updateBlockedEmailListJestFn = fn();
 
@@ -16,7 +17,7 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
 const meta: Meta<typeof SettingsAccountsBlocklistInput> = {
   title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistInput',
   component: SettingsAccountsBlocklistInput,
-  decorators: [ComponentDecorator, ClearMocksDecorator],
+  decorators: [ComponentDecorator, ClearMocksDecorator, I18nFrontDecorator],
   args: {
     updateBlockedEmailList: updateBlockedEmailListJestFn,
     blockedEmailOrDomainList: [],

packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsBlocklistSection.stories.tsx

@@ -3,11 +3,12 @@ import { ComponentDecorator } from 'twenty-ui';
 
 import { SettingsAccountsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsBlocklistInput';
 import { SettingsAccountsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsBlocklistSection';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 
 const meta: Meta<typeof SettingsAccountsBlocklistSection> = {
   title: 'Modules/Settings/Accounts/Blocklist/SettingsAccountsBlocklistSection',
   component: SettingsAccountsBlocklistInput,
-  decorators: [ComponentDecorator],
+  decorators: [ComponentDecorator, I18nFrontDecorator],
 };
 
 export default meta;