Translate /compatibility, /delete-account and /donate

web/messages/fr.json

@@ -174,5 +174,40 @@
   "register.button.email": "S'inscrire avec l'e‑mail",
   "register.or_sign_up_with": "Ou inscrivez-vous avec",
   "register.already_account": "Vous avez déjà un compte ?",
-  "register.link_signin": "Se connecter"
+  "register.link_signin": "Se connecter",
+  "compatibility.title": "Vos questions de compatibilité",
+  "compatibility.tabs.answered": "Répondu",
+  "compatibility.tabs.to_answer": "À répondre",
+  "compatibility.tabs.skipped": "Ignorés",
+  "compatibility.sign_in_prompt": "Veuillez vous connecter pour voir vos questions de compatibilité",
+  "compatibility.empty.answered": "Vous n'avez répondu à aucune question pour le moment.",
+  "compatibility.empty.not_answered": "Toutes les questions ont été répondues !",
+  "compatibility.empty.skipped": "Vous n'avez ignoré aucune question.",
+  "delete.seo.title": "Supprimer le compte",
+  "delete.seo.description": "Demander la suppression du compte pour Compass",
+  "delete.title": "Supprimer votre compte",
+  "delete.intro": "Nous sommes désolés de vous voir partir. Vous pouvez supprimer votre compte depuis la page Paramètres. Sinon, voici comment demander la suppression de votre compte par e‑mail.",
+  "delete.how.title": "Comment supprimer votre compte",
+  "delete.how.step1": "Envoyez un e‑mail à",
+  "delete.how.step1_subject": "avec l'objet « Demande de suppression de compte »",
+  "delete.how.step2": "Incluez votre nom d'utilisateur et l'adresse e‑mail associée à votre compte",
+  "delete.how.step3": "Indiquez si vous souhaitez télécharger vos données avant la suppression",
+  "delete.how.step4": "Nous traiterons votre demande sous 30 jours",
+  "delete.request_button": "Demander la suppression du compte",
+  "delete.what_happens.title": "Ce qui se passe lorsque vous supprimez votre compte",
+  "delete.what_happens.profile": "Votre profil, y compris toutes les photos et informations personnelles, sera supprimé définitivement",
+  "delete.what_happens.messages": "Vos messages seront supprimés de nos serveurs",
+  "delete.what_happens.username": "Votre nom d'utilisateur pourra être réutilisé par d'autres",
+  "delete.what_happens.history": "Votre historique d'activité sera anonymisé",
+  "delete.data.title": "Données que nous conservons",
+  "delete.data.intro": "Pour des raisons légales et opérationnelles, nous pouvons conserver certaines informations après la suppression du compte :",
+  "delete.data.item1": "Dossiers de transaction (le cas échéant) pour la comptabilité et la conformité",
+  "delete.data.item2": "Copies des communications avec notre équipe de support",
+  "delete.data.item3": "Informations nécessaires pour prévenir la fraude, respecter des obligations légales ou faire respecter nos conditions",
+  "delete.data.note": "Nous ne conservons ces données que le temps nécessaire à ces fins et conformément à notre Politique de confidentialité.",
+  "delete.need_help.title": "Besoin d'aide ?",
+  "delete.need_help.text": "Si vous avez des questions concernant la suppression du compte ou besoin d'assistance, veuillez contacter notre équipe de support à",
+  "donate.seo.title": "Faire un don",
+  "donate.seo.description": "Faites un don pour soutenir Compass",
+  "donate.title": "Faire un don"
 }

web/pages/compatibility.tsx

@@ -12,6 +12,7 @@ import {User} from "common/user";
 import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator";
 import {useIsMobile} from "web/hooks/use-is-mobile";
 import {LoadMoreUntilNotVisible} from "web/components/widgets/visibility-observer";
+import {useT} from 'web/lib/locale'
 
 type QuestionWithAnswer = Question & {
   answer?: Row<'compatibility_answers'>
@@ -26,6 +27,7 @@ export default function CompatibilityPage() {
   const {compatibilityAnswers, refreshCompatibilityAnswers} = useUserCompatibilityAnswers(user?.id)
   const {compatibilityQuestions, refreshCompatibilityQuestions} = useCompatibilityQuestionsWithAnswerCount()
   const [isLoading, setIsLoading] = useState(true)
+  const t = useT()
 
   const questionsWithAnswers = useMemo(() => {
     if (!compatibilityQuestions) return []
@@ -80,13 +82,13 @@ export default function CompatibilityPage() {
     <PageBase trackPageView={'compatibility'}>
       {user ?
         <Col className="w-full p-4">
-          <Title className="mb-4">Your Compatibility Questions</Title>
+          <Title className="mb-4">{t('compatibility.title','Your Compatibility Questions')}</Title>
           <UncontrolledTabs
             trackingName={'compatibility page'}
             name={'compatibility-page'}
             tabs={[
               {
-                title: `Answered ${sep}(${answered.length})`,
+                title: `${t('compatibility.tabs.answered','Answered')} ${sep}(${answered.length})`,
                 content: (
                   <QuestionList
                     questions={answered}
@@ -98,7 +100,7 @@ export default function CompatibilityPage() {
                 ),
               },
               {
-                title: `To Answer ${sep}(${notAnswered.length})`,
+                title: `${t('compatibility.tabs.to_answer','To Answer')} ${sep}(${notAnswered.length})`,
                 content: (
                   <QuestionList
                     questions={notAnswered}
@@ -110,7 +112,7 @@ export default function CompatibilityPage() {
                 ),
               },
               {
-                title: `Skipped ${sep}(${skipped.length})`,
+                title: `${t('compatibility.tabs.skipped','Skipped')} ${sep}(${skipped.length})`,
                 content: (
                   <QuestionList
                     questions={skipped}
@@ -126,7 +128,7 @@ export default function CompatibilityPage() {
         </Col>
         :
         <div className="flex h-full flex-col items-center justify-center">
-          <div className="text-xl">Please sign in to view your compatibility questions</div>
+          <div className="text-xl">{t('compatibility.sign_in_prompt','Please sign in to view your compatibility questions')}</div>
         </div>
       }
     </PageBase>
@@ -146,6 +148,7 @@ function QuestionList({
   user: User
   refreshCompatibilityAll: () => void
 }) {
+  const t = useT()
   const BATCH_SIZE = 100
   const [visibleCount, setVisibleCount] = useState(BATCH_SIZE)
 
@@ -171,9 +174,9 @@ function QuestionList({
   if (questions.length === 0) {
     return (
       <div className="text-ink-500 p-4">
-        {status === 'answered' && 'You haven\'t answered any questions yet.'}
-        {status === 'not-answered' && 'All questions have been answered!'}
-        {status === 'skipped' && 'You haven\'t skipped any questions.'}
+        {status === 'answered' && t('compatibility.empty.answered',"You haven't answered any questions yet.")}
+        {status === 'not-answered' && t('compatibility.empty.not_answered',"All questions have been answered!")}
+        {status === 'skipped' && t('compatibility.empty.skipped',"You haven't skipped any questions.")}
       </div>
     )
   }

web/pages/delete-account.tsx

@@ -1,8 +1,10 @@
 import {PageBase} from "web/components/page-base";
 import {SEO} from "web/components/SEO";
 import {Button} from "web/components/buttons/button";
+import {useT} from 'web/lib/locale'
 
 export default function DeleteAccountPage() {
+  const t = useT()
 
   const handleRequestDeletion = () => {
     // This would typically open an email client or a form
@@ -15,30 +17,27 @@ export default function DeleteAccountPage() {
       className="max-w-4xl mx-auto p-8 text-gray-800 dark:text-white col-span-8 bg-canvas-0"
     >
       <SEO
-        title={'Delete Your Account'}
-        description={'Request account deletion for Compass'}
+        title={t('delete.seo.title','Delete Your Account')}
+        description={t('delete.seo.description','Request account deletion for Compass')}
         url={'/delete-account'}
       />
 
       <div className="space-y-8">
         <div className="text-center">
-          <h1 className="text-3xl font-semibold mb-4">Delete Your Account</h1>
+          <h1 className="text-3xl font-semibold mb-4">{t('delete.title','Delete Your Account')}</h1>
           <p className="text-lg text-gray-600 dark:text-gray-300">
-            We're sorry to see you go. You can delete your account in the Settings page. Otherwise, here's how to
-            request account deletion by email.
+            {t('delete.intro',"We're sorry to see you go. You can delete your account in the Settings page. Otherwise, here's how to request account deletion by email.")}
           </p>
         </div>
 
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 space-y-6">
           <section>
-            <h2 className="text-xl font-semibold mb-4">How to Delete Your Account</h2>
+            <h2 className="text-xl font-semibold mb-4">{t('delete.how.title','How to Delete Your Account')}</h2>
             <ol className="list-decimal list-inside space-y-4 pl-2">
-              <li>Send an email to <strong>hello@compassmeet.com</strong> with the subject line "Account Deletion
-                Request"
-              </li>
-              <li>Include your username and email address associated with your account</li>
-              <li>Let us know if you'd like to download your data before deletion</li>
-              <li>We'll process your request within 30 days</li>
+              <li>{t('delete.how.step1','Send an email to ')} <strong>hello@compassmeet.com</strong> {t('delete.how.step1_subject','with the subject line "Account Deletion Request"')}</li>
+              <li>{t('delete.how.step2','Include your username and email address associated with your account')}</li>
+              <li>{t('delete.how.step3','Let us know if you\'d like to download your data before deletion')}</li>
+              <li>{t('delete.how.step4','We\'ll process your request within 30 days')}</li>
             </ol>
 
             <div className="mt-6 text-center">
@@ -46,41 +45,39 @@ export default function DeleteAccountPage() {
                 onClick={handleRequestDeletion}
                 className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-md font-medium"
               >
-                Request Account Deletion
+                {t('delete.request_button','Request Account Deletion')}
               </Button>
             </div>
           </section>
 
           <section className="pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">What Happens When You Delete Your Account</h2>
+            <h2 className="text-xl font-semibold mb-4">{t('delete.what_happens.title','What Happens When You Delete Your Account')}</h2>
             <ul className="list-disc list-inside space-y-2 pl-2">
-              <li>Your profile, including all photos and personal information, will be permanently removed</li>
-              <li>Your messages will be deleted from our servers</li>
-              <li>Your username will become available for others to use</li>
-              <li>Your activity history will be anonymized</li>
+              <li>{t('delete.what_happens.profile','Your profile, including all photos and personal information, will be permanently removed')}</li>
+              <li>{t('delete.what_happens.messages','Your messages will be deleted from our servers')}</li>
+              <li>{t('delete.what_happens.username','Your username will become available for others to use')}</li>
+              <li>{t('delete.what_happens.history','Your activity history will be anonymized')}</li>
             </ul>
           </section>
 
           <section className="pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Data We Retain</h2>
-            <p className="mb-4">For legal and operational reasons, we may retain certain information after account
-              deletion:</p>
+            <h2 className="text-xl font-semibold mb-4">{t('delete.data.title','Data We Retain')}</h2>
+            <p className="mb-4">{t('delete.data.intro','For legal and operational reasons, we may retain certain information after account deletion:')}</p>
             <ul className="list-disc list-inside space-y-2 pl-2">
-              <li>Transaction records (if any) for financial reporting and compliance</li>
-              <li>Copies of communications with our support team</li>
-              <li>Information required to prevent fraud, comply with legal obligations, or enforce our terms</li>
+              <li>{t('delete.data.item1','Transaction records (if any) for financial reporting and compliance')}</li>
+              <li>{t('delete.data.item2','Copies of communications with our support team')}</li>
+              <li>{t('delete.data.item3','Information required to prevent fraud, comply with legal obligations, or enforce our terms')}</li>
             </ul>
             <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
-              We retain this data only as long as necessary for these purposes and in accordance with our Privacy
-              Policy.
+              {t('delete.data.note','We retain this data only as long as necessary for these purposes and in accordance with our Privacy Policy.')}
             </p>
           </section>
 
           <section className="pt-6 border-t border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-semibold mb-4">Need Help?</h2>
+            <h2 className="text-xl font-semibold mb-4">{t('delete.need_help.title','Need Help?')}</h2>
             <p>
-              If you have any questions about account deletion or need assistance, please contact our support team
-              at{' '}
+              {t('delete.need_help.text','If you have any questions about account deletion or need assistance, please contact our support team at ')}
+              {' '}
               <a href="mailto:hello@compassmeet.com" className="text-blue-600 dark:text-blue-400 hover:underline">
                 hello@compassmeet.com
               </a>.

web/pages/donate.tsx

@@ -1,17 +1,20 @@
 import {PageBase} from 'web/components/page-base'
 import {SEO} from 'web/components/SEO'
 import {Col} from 'web/components/layout/col'
+import {useT} from 'web/lib/locale'
 
 export default function DonatePage() {
+  const t = useT()
+
   return (
     <PageBase trackPageView={'donate'} className={'relative p-2 sm:pt-0'}>
       <SEO
-        title={`Security`}
-        description={'Donate to support Compass'}
+        title={t('donate.seo.title','Donate')}
+        description={t('donate.seo.description','Donate to support Compass')}
         url={`/donate`}
       />
       <Col className="max-w-3xl w-full mx-auto gap-6 custom-link">
-        <h1 className="text-3xl font-semibold">Donate</h1>
+        <h1 className="text-3xl font-semibold">{t('donate.title','Donate')}</h1>
         <iframe src="https://opencollective.com/embed/compass-connection/donate?hideFAQ=true"
                 style={{width: '100%', minHeight: '100vh'}}></iframe>
       </Col>