Translation followup (#9735)

Address PR comments and more progress on translation

packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx

@@ -8,6 +8,7 @@ import { TrialCard } from '@/billing/components/TrialCard';
 import { useHandleCheckoutSession } from '@/billing/hooks/useHandleCheckoutSession';
 import { billingState } from '@/client-config/states/billingState';
 import styled from '@emotion/styled';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import {
   ActionLink,
@@ -78,16 +79,18 @@ const StyledLinkGroup = styled.div`
   }
 `;
 
-const benefits = [
-  'Full access',
-  'Unlimited contacts',
-  'Email integration',
-  'Custom objects',
-  'API & Webhooks',
-  '1 000 workflow node executions',
-];
 export const ChooseYourPlan = () => {
   const billing = useRecoilValue(billingState);
+  const { t } = useLingui();
+
+  const benefits = [
+    t`Full access`,
+    t`Unlimited contacts`,
+    t`Email integration`,
+    t`Custom objects`,
+    t`API & Webhooks`,
+    t`1 000 workflow node executions`,
+  ];
 
   const { data: prices } = useGetProductPricesQuery({
     variables: { product: 'base-plan' },
@@ -133,20 +136,26 @@ export const ChooseYourPlan = () => {
 
   const { signOut } = useAuth();
 
+  const withCreditCardTrialPeriodDuration = withCreditCardTrialPeriod?.duration;
+
   return (
     isDefined(price) &&
     isDefined(billing) && (
       <>
         <Title noMarginTop>
           {hasWithoutCreditCardTrialPeriod
-            ? 'Choose your Trial'
-            : 'Get your subscription'}
+            ? t`Choose your Trial`
+            : t`Get your subscription`}
         </Title>
         {hasWithoutCreditCardTrialPeriod ? (
-          <SubTitle>Cancel anytime</SubTitle>
+          <SubTitle>
+            <Trans>Cancel anytime</Trans>
+          </SubTitle>
         ) : (
           withCreditCardTrialPeriod && (
-            <SubTitle>{`Enjoy a ${withCreditCardTrialPeriod.duration}-days free trial`}</SubTitle>
+            <SubTitle>
+              {t`Enjoy a ${withCreditCardTrialPeriodDuration}-days free trial`}
+            </SubTitle>
           )
         )}
         <StyledSubscriptionContainer
@@ -186,17 +195,19 @@ export const ChooseYourPlan = () => {
           </StyledChooseTrialContainer>
         )}
         <MainButton
-          title="Continue"
+          title={t`Continue`}
           onClick={handleCheckoutSession}
           width={200}
           Icon={() => isSubmitting && <Loader />}
           disabled={isSubmitting}
         />
         <StyledLinkGroup>
-          <ActionLink onClick={signOut}>Log out</ActionLink>
+          <ActionLink onClick={signOut}>
+            <Trans>Log out</Trans>
+          </ActionLink>
           <span />
           <ActionLink href={CAL_LINK} target="_blank" rel="noreferrer">
-            Book a Call
+            <Trans>Book a Call</Trans>
           </ActionLink>
         </StyledLinkGroup>
       </>