From 747af447c59d25aa1359f7409cf6fffd99eef244 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 12 Apr 2022 13:25:53 -0500
Subject: [PATCH] Onboarding: i18n

---
 .../onboarding/steps/avatar-selection-step.tsx    | 15 +++++++++++----
 .../features/onboarding/steps/bio-step.tsx        | 15 +++++++++++----
 .../features/onboarding/steps/completed-step.tsx  | 12 +++++++-----
 .../steps/cover-photo-selection-step.tsx          |  9 ++++++---
 .../onboarding/steps/display-name-step.tsx        |  9 ++++++---
 .../onboarding/steps/suggested-accounts-step.tsx  |  9 ++++++---
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 3f2fec1978..7df4f8628b 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,6 +1,7 @@
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -61,11 +62,11 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
           <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
-                Choose a profile picture
+                <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
               </Text>
 
               <Text theme='muted' align='center'>
-                Just have fun with it.
+                <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
               </Text>
             </Stack>
           </div>
@@ -100,11 +101,17 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
               <Stack justifyContent='center' space={2}>
                 <Button block theme='primary' type='submit' disabled={isDisabled || isSubmitting}>
-                  {isSubmitting ? 'Saving...' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
                 {isDisabled && (
-                  <Button block theme='link' type='button' onClick={onNext}>Skip for now</Button>
+                  <Button block theme='link' type='button' onClick={onNext}>
+                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+                  </Button>
                 )}
               </Stack>
             </Stack>
diff --git a/app/soapbox/features/onboarding/steps/bio-step.tsx b/app/soapbox/features/onboarding/steps/bio-step.tsx
index 384adc311b..cd443dd1db 100644
--- a/app/soapbox/features/onboarding/steps/bio-step.tsx
+++ b/app/soapbox/features/onboarding/steps/bio-step.tsx
@@ -1,5 +1,6 @@
 import { AxiosError } from 'axios';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -44,11 +45,11 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
           <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
-                Write a short bio
+                <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
               </Text>
 
               <Text theme='muted' align='center'>
-                You can always edit this later.
+                <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
               </Text>
             </Stack>
           </div>
@@ -78,10 +79,16 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
                   disabled={isDisabled || isSubmitting}
                   onClick={handleSubmit}
                 >
-                  {isSubmitting ? 'Saving...' : 'Next'}
+                  {isSubmitting ? (
+                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
+                  ) : (
+                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+                  )}
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>Skip for now</Button>
+                <Button block theme='link' type='button' onClick={onNext}>
+                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+                </Button>
               </Stack>
             </div>
           </Stack>
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 7f5e165c95..94a5552a75 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FormattedMessage } from'react-intl';
 
 import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
 
@@ -9,13 +10,14 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
         <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' />
 
         <Text size='2xl' align='center' weight='bold'>
-          Onboarding complete
+          <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
         </Text>
 
         <Text theme='muted' align='center'>
-          We are very excited to welcome you to our Truth Seeking
-          community! Tap the button below to start enjoying
-          Truth Social.
+          <FormattedMessage
+            id='onboarding.finished.message'
+            defaultMessage='We are very excited to welcome you to our Truth Seeking community! Tap the button below to start enjoying Truth Social.'
+          />
         </Text>
       </Stack>
 
@@ -26,7 +28,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
             theme='primary'
             onClick={onComplete}
           >
-            View Feed
+            <FormattedMessage id='onboarding.view_feed' defaultMessage='View Feed' />
           </Button>
         </Stack>
       </div>
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index 841e20f4c7..e34cae71fe 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,6 +1,7 @@
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -64,11 +65,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
           <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
-                Pick a cover image
+                <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
               </Text>
 
               <Text theme='muted' align='center'>
-                This will be shown at the top of your profile.
+                <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
               </Text>
             </Stack>
           </div>
@@ -128,7 +129,9 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 </Button>
 
                 {isDisabled && (
-                  <Button block theme='link' type='button' onClick={onNext}>Skip for now</Button>
+                  <Button block theme='link' type='button' onClick={onNext}>
+                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+                  </Button>
                 )}
               </Stack>
             </Stack>
diff --git a/app/soapbox/features/onboarding/steps/display-name-step.tsx b/app/soapbox/features/onboarding/steps/display-name-step.tsx
index bea8a2f700..cea1c4af23 100644
--- a/app/soapbox/features/onboarding/steps/display-name-step.tsx
+++ b/app/soapbox/features/onboarding/steps/display-name-step.tsx
@@ -1,5 +1,6 @@
 import { AxiosError } from 'axios';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { patchMe } from 'soapbox/actions/me';
@@ -51,11 +52,11 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
           <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
-                Choose a display name
+                <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
               </Text>
 
               <Text theme='muted' align='center'>
-                You can always edit this later.
+                <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
               </Text>
             </Stack>
           </div>
@@ -87,7 +88,9 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
                   {isSubmitting ? 'Saving...' : 'Next'}
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>Skip for now</Button>
+                <Button block theme='link' type='button' onClick={onNext}>
+                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+                </Button>
               </Stack>
             </Stack>
           </div>
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index a85c3b954a..e739bc744e 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -1,5 +1,6 @@
 import { Map as ImmutableMap } from 'immutable';
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
@@ -29,11 +30,11 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
           <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
             <Stack space={2}>
               <Text size='2xl' align='center' weight='bold'>
-                Suggested accounts
+                <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
               </Text>
 
               <Text theme='muted' align='center'>
-                Here are a few of the most popular accounts you might like.
+                <FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
               </Text>
             </Stack>
           </div>
@@ -63,7 +64,9 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
                   Done
                 </Button>
 
-                <Button block theme='link' type='button' onClick={onNext}>Skip for now</Button>
+                <Button block theme='link' type='button' onClick={onNext}>
+                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+                </Button>
               </Stack>
             </Stack>
           </div>