Progress on translations (#9703)

Start adding a few translations on setting pages, introduce
pseudo-locale, switch to dynamic import, add eslint rule

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
@@ -35,26 +36,28 @@ type SwitchInfo = {
   impact: string;
 };
 
-const MONTHLY_SWITCH_INFO: SwitchInfo = {
-  newInterval: SubscriptionInterval.Year,
-  to: 'to yearly',
-  from: 'from monthly to yearly',
-  impact: 'You will be charged immediately for the full year.',
-};
-
-const YEARLY_SWITCH_INFO: SwitchInfo = {
-  newInterval: SubscriptionInterval.Month,
-  to: 'to monthly',
-  from: 'from yearly to monthly',
-  impact: 'Your credit balance will be used to pay the monthly bills.',
-};
-
-const SWITCH_INFOS = {
-  year: YEARLY_SWITCH_INFO,
-  month: MONTHLY_SWITCH_INFO,
-};
-
 export const SettingsBilling = () => {
+  const { t } = useLingui();
+
+  const MONTHLY_SWITCH_INFO: SwitchInfo = {
+    newInterval: SubscriptionInterval.Year,
+    to: t`to yearly`,
+    from: t`from monthly to yearly`,
+    impact: t`You will be charged immediately for the full year.`,
+  };
+
+  const YEARLY_SWITCH_INFO: SwitchInfo = {
+    newInterval: SubscriptionInterval.Month,
+    to: t`to monthly`,
+    from: t`from yearly to monthly`,
+    impact: t`Your credit balance will be used to pay the monthly bills.`,
+  };
+
+  const SWITCH_INFOS = {
+    year: YEARLY_SWITCH_INFO,
+    month: MONTHLY_SWITCH_INFO,
+  };
+
   const { enqueueSnackBar } = useSnackBar();
   const onboardingStatus = useOnboardingStatus();
   const subscriptionStatus = useSubscriptionStatus();
@@ -94,6 +97,10 @@ export const SettingsBilling = () => {
     setIsSwitchingIntervalModalOpen(true);
   };
 
+  const from = switchingInfo.from;
+  const to = switchingInfo.to;
+  const impact = switchingInfo.impact;
+
   const switchInterval = async () => {
     try {
       await updateBillingSubscription();
@@ -107,28 +114,25 @@ export const SettingsBilling = () => {
         };
         setCurrentWorkspace(newCurrentWorkspace);
       }
-      enqueueSnackBar(`Subscription has been switched ${switchingInfo.to}`, {
+      enqueueSnackBar(t`Subscription has been switched ${to}`, {
         variant: SnackBarVariant.Success,
       });
     } catch (error: any) {
-      enqueueSnackBar(
-        `Error while switching subscription ${switchingInfo.to}.`,
-        {
-          variant: SnackBarVariant.Error,
-        },
-      );
+      enqueueSnackBar(t`Error while switching subscription ${to}.`, {
+        variant: SnackBarVariant.Error,
+      });
     }
   };
 
   return (
     <SubMenuTopBarContainer
-      title="Billing"
+      title={t`Billing`}
       links={[
         {
-          children: 'Workspace',
+          children: t`Workspace`,
           href: getSettingsPagePath(SettingsPath.Workspace),
         },
-        { children: 'Billing' },
+        { children: t`Billing` },
       ]}
     >
       <SettingsPageContainer>
@@ -137,12 +141,12 @@ export const SettingsBilling = () => {
           <>
             <Section>
               <H2Title
-                title="Manage your subscription"
-                description="Edit payment method, see your invoices and more"
+                title={t`Manage your subscription`}
+                description={t`Edit payment method, see your invoices and more`}
               />
               <Button
                 Icon={IconCreditCard}
-                title="View billing details"
+                title={t`View billing details`}
                 variant="secondary"
                 onClick={openBillingPortal}
                 disabled={billingPortalButtonDisabled}
@@ -150,12 +154,12 @@ export const SettingsBilling = () => {
             </Section>
             <Section>
               <H2Title
-                title="Edit billing interval"
-                description={`Switch ${switchingInfo.from}`}
+                title={t`Edit billing interval`}
+                description={t`Switch ${from}`}
               />
               <Button
                 Icon={IconCalendarEvent}
-                title={`Switch ${switchingInfo.to}`}
+                title={t`Switch ${to}`}
                 variant="secondary"
                 onClick={openSwitchingIntervalModal}
                 disabled={switchIntervalButtonDisabled}
@@ -163,12 +167,12 @@ export const SettingsBilling = () => {
             </Section>
             <Section>
               <H2Title
-                title="Cancel your subscription"
-                description="Your workspace will be disabled"
+                title={t`Cancel your subscription`}
+                description={t`Your workspace will be disabled`}
               />
               <Button
                 Icon={IconCircleX}
-                title="Cancel Plan"
+                title={t`Cancel Plan`}
                 variant="secondary"
                 accent="danger"
                 onClick={openBillingPortal}
@@ -181,15 +185,10 @@ export const SettingsBilling = () => {
       <ConfirmationModal
         isOpen={isSwitchingIntervalModalOpen}
         setIsOpen={setIsSwitchingIntervalModalOpen}
-        title={`Switch billing ${switchingInfo.to}`}
-        subtitle={
-          <>
-            {`Are you sure that you want to change your billing interval? 
-            ${switchingInfo.impact}`}
-          </>
-        }
+        title={t`Switch billing ${to}`}
+        subtitle={t`Are you sure that you want to change your billing interval? ${impact}`}
         onConfirmClick={switchInterval}
-        deleteButtonText={`Change ${switchingInfo.to}`}
+        deleteButtonText={t`Change ${to}`}
         confirmButtonAccent={'blue'}
       />
     </SubMenuTopBarContainer>