OPHJOD-1170: Update free time activities translations

src/components/OsaamisSuosittelija/OsaamisSuosittelija.tsx

@@ -34,6 +34,8 @@ interface OsaamisSuosittelijaProps {
   mode?: OsaamisSuosittelijaMode;
   /** Additional class name */
   className?: string;
+  /** Placeholder text for the textarea */
+  placeholder?: string;
 }
 
 type CategorizedValue = Record<OsaaminenLahdeTyyppi, OsaaminenValue[]>;
@@ -45,6 +47,7 @@ export const OsaamisSuosittelija = ({
   categorized = false,
   mode = 'osaamiset',
   className = '',
+  placeholder,
 }: OsaamisSuosittelijaProps) => {
   const { i18n, t } = useTranslation();
   const { sm } = useMediaQueries();
@@ -138,15 +141,21 @@ export const OsaamisSuosittelija = ({
     />
   );
 
+  const textareaPlaceholder = () => {
+    if (placeholder) {
+      return placeholder;
+    } else if (mode === 'osaamiset') {
+      return t('tool.my-own-data.competences.textarea-placeholder');
+    } else {
+      return t('osaamissuosittelija.interest.textarea-placeholder');
+    }
+  };
+
   return (
     <>
       <div className="mb-6">
         <Textarea
-          placeholder={
-            mode === 'osaamiset'
-              ? t('tool.my-own-data.competences.textarea-placeholder')
-              : t('osaamissuosittelija.interest.textarea-placeholder')
-          }
+          placeholder={textareaPlaceholder()}
           value={taitosi}
           onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setTaitosi(event.target.value)}
           rows={2}

src/i18n/fi/translation.json

@@ -70,19 +70,20 @@
   "found": "Löytyi",
   "free-time-activities": {
     "activity-content": "Toiminnon sisältö",
-    "activity-name": "Toiminnon nimi",
-    "activity-or-proficiency-description": "Toiminto / pätevyys",
-    "add-new-activity": "Lisää uusi vapaa-ajan toiminto",
-    "add-new-free-time-activity": "Lisää uusi toiminto",
-    "add-new-proficiency": "Lisää uusi pätevyys",
+    "add-new-activity": "Lisää uusi toiminto",
+    "add-new-free-time-activity": "Lisää uusi vapaa-ajan toiminto",
+    "add-new-free-time-theme-and-activities": "Lisää uusi vapaa-ajan teema ja toimintoja",
     "confirm-delete-free-time-activity": "Haluatko varmasti poistaa vapaa-ajan toiminnon? Jos vapaa-ajantoimintoon ei liity poiston jälkeen enää yhtään pätevyyttä, myös vapaa-ajantoiminto poistetaan.",
     "confirm-delete-proficiency": "Haluatko varmasti poistaa pätevyyden?",
     "delete-free-time-activity": "Poista vapaa-ajan toiminto",
     "delete-proficiency": "Poista pätevyys",
     "edit-activity": "Muokkaa vapaa-ajan toimintoa",
+    "edit-free-time-theme": "Muokkaa vapaa-ajan teemaa",
     "edit-proficiency": "Muokkaa pätevyyttä",
     "identify-proficiencies": "Tunnista osaamisia",
-    "proficiency": "Pätevyys"
+    "name-of-free-time-activity": "Vapaa-ajan toiminnon nimi",
+    "name-of-free-time-theme": "Vapaa-ajan teeman nimi",
+    "theme-or-activity": "Teema / Toiminto"
   },
   "goals": "Tavoitteet",
   "home": {
@@ -271,6 +272,13 @@
     },
     "free-time-activities": {
       "description": "Löydät alta vapaa-ajan toimintosi. Vapaa-ajan toimintoja voivat olla harrastukset, luottamustoimet sekä erilaiset pätevyydet. Voit lisätä käsin vapaa-ajan toimintojasi sekä kartoittaa niihin liittyviä osaamisiasi.",
+      "modals": {
+        "competences-description": "Kuvaile vapaa-ajan toimintoasi. Kirjoita esimerkiksi mitä olet tehnyt tai millaista tekemistä se on sisältänyt. Osaamistunnistajamme ehdottaa sinulle muodostunutta osaamista, jota voit valita osaamisprofiiliisi.",
+        "competences-placeholder": "Opin tunnistamaan ihmisten osaamisia ja sanoittamaan niitä...",
+        "description": "Kerro tässä vapaa-ajastasi. Vapaa-ajan toimintoja voivat olla esim. harrastustoiminta, luottamustoimet sekä erilaiset pätevyydet ja muut ansiot. Vapaa-ajan tekemisestä syntyy paljon osaamista sinulle ja autamme sinua tunnistamaan sitä. Voit ilmoittaa vapaa-ajan toimintoja teemoittain ja rakentaa itsellesi sopivan näkymän vapaa-ajan tekemiseesi.",
+        "name-of-free-time-activity-placeholder": "Esim. Sukellusmatka/Sihteerinä toimiminen/Valmentaminen",
+        "name-of-free-time-theme-placeholder": "Esim. Sukeltaminen/Taloyhtiön hallitus/Liikunta"
+      },
       "title": "Vapaa-ajan toimintoni"
     },
     "help-text": "Rakenna koulutus- ja työhistoriasi käyttämällä alla olevia työkaluja, jolloin palvelu voi tunnistaa sinulle sopivia osaamisia.",

src/routes/Profile/FreeTimeActivities/FreeTimeActivities.tsx

@@ -92,9 +92,9 @@ const FreeTimeActivities = () => {
       <h1 className="mb-5 text-heading-2 sm:text-heading-1">{title}</h1>
       <p className="mb-9 text-body-lg">{t('profile.free-time-activities.description')}</p>
       <ExperienceTable
-        mainColumnHeader={t('free-time-activities.activity-or-proficiency-description')}
-        addNewLabel={t('free-time-activities.add-new-free-time-activity')}
-        addNewNestedLabel={t('free-time-activities.add-new-proficiency')}
+        mainColumnHeader={t('free-time-activities.theme-or-activity')}
+        addNewLabel={t('free-time-activities.add-new-free-time-theme-and-activities')}
+        addNewNestedLabel={t('free-time-activities.add-new-activity')}
         rows={rows}
         onAddClick={() => setIsWizardOpen(true)}
         onRowClick={onRowClick}

src/routes/Profile/FreeTimeActivities/FreeTimeActivitiesWizard/ActivityStep.tsx

@@ -19,54 +19,41 @@ const ActivityStep = ({ type, patevyys }: ActivityStepProps) => {
   return (
     <>
       <h2 className="mb-4 text-heading-3 text-black sm:mb-5 sm:text-heading-2">
-        {type === 'toiminta' && !id && t('free-time-activities.add-new-activity')}
+        {type === 'toiminta' && !id && t('free-time-activities.add-new-free-time-activity')}
         {type === 'toiminta' && id && t('free-time-activities.edit-activity')}
-        {type === 'patevyys' && !patevyysId && t('free-time-activities.add-new-proficiency')}
+        {type === 'patevyys' && !patevyysId && t('free-time-activities.add-new-activity')}
         {type === 'patevyys' && patevyysId && t('free-time-activities.edit-proficiency')}
       </h2>
-      <p className="mb-7 text-body-sm font-arial sm:mb-9 text-todo">
-        Lorem ipsum dolor sit amet, no vis verear commodo. Vix quot dicta phaedrum ad. Has eu invenire concludaturque,
-        simul accusata no ius. Volumus corpora per te, pri lucilius salutatus iracundia ut. Mutat posse voluptua quo cu,
-        in albucius nominavi principes eum, quem facilisi cotidieque mel no.
-      </p>
+      <p className="mb-7 text-body-sm font-arial sm:mb-9">{t('profile.free-time-activities.modals.description')}</p>
       {type === 'toiminta' && (
         <div className="mb-6">
           <InputField
-            label={t('free-time-activities.activity-name')}
+            label={t('free-time-activities.name-of-free-time-theme')}
             {...register(`nimi.${language}` as const)}
-            placeholder="TODO: Lorem ipsum dolor sit amet"
-            help="TODO: Help text"
+            placeholder={t('profile.free-time-activities.modals.name-of-free-time-theme-placeholder')}
           />
         </div>
       )}
       <div className="mb-6">
         <InputField
-          label={t('free-time-activities.proficiency')}
+          label={t('free-time-activities.name-of-free-time-activity')}
           {...register(`patevyydet.${patevyys}.nimi.${language}` as const)}
-          placeholder="TODO: Lorem ipsum dolor sit amet"
-          help="TODO: Help text"
+          placeholder={t('profile.free-time-activities.modals.name-of-free-time-activity-placeholder')}
         />
       </div>
       <div className="mb-6 flex grow gap-6">
         <div className="block w-full">
           <Controller
             control={control}
-            render={({ field }) => (
-              <Datepicker label={t('started')} {...field} placeholder={t('date-placeholder')} help="TODO: Help text" />
-            )}
+            render={({ field }) => <Datepicker label={t('started')} {...field} placeholder={t('date-placeholder')} />}
             name={`patevyydet.${patevyys}.alkuPvm`}
           />
         </div>
         <div className="block w-full">
           <Controller
             control={control}
             render={({ field }) => (
-              <Datepicker
-                label={t('ended')}
-                {...field}
-                placeholder={t('date-or-continues-placeholder')}
-                help="TODO: Help text"
-              />
+              <Datepicker label={t('ended')} {...field} placeholder={t('date-or-continues-placeholder')} />
             )}
             name={`patevyydet.${patevyys}.loppuPvm`}
           />

src/routes/Profile/FreeTimeActivities/FreeTimeActivitiesWizard/CompetencesStep.tsx

@@ -23,16 +23,19 @@ const CompetencesStep = ({ patevyys }: CompetencesStepProps) => {
       <h3 className="mb-4 text-heading-5 font-arial text-black sm:mb-5 sm:text-heading-3 sm:font-poppins">
         {getValues(`nimi.${language}`)} - {getValues(`patevyydet.${patevyys}.nimi.${language}`)}
       </h3>
-      <p className="mb-7 text-body-sm font-arial sm:mb-9 text-todo">
-        Lorem ipsum dolor sit amet, no vis verear commodo. Vix quot dicta phaedrum ad. Has eu invenire concludaturque,
-        simul accusata no ius. Volumus corpora per te, pri lucilius salutatus iracundia ut. Mutat posse voluptua quo cu,
-        in albucius nominavi principes eum, quem facilisi cotidieque mel no.
+      <p className="mb-7 text-body-sm font-arial sm:mb-9">
+        {t('profile.free-time-activities.modals.competences-description')}
       </p>
       <Controller
         control={control}
         name={`patevyydet.${patevyys}.osaamiset`}
         render={({ field: { onChange, value } }) => (
-          <OsaamisSuosittelija onChange={onChange} value={value} sourceType="PATEVYYS" />
+          <OsaamisSuosittelija
+            onChange={onChange}
+            value={value}
+            sourceType="PATEVYYS"
+            placeholder={t('profile.free-time-activities.modals.competences-placeholder')}
+          />
         )}
       />
     </>

src/routes/Profile/FreeTimeActivities/FreeTimeActivitiesWizard/FreeTimeActivitiesWizard.tsx

@@ -152,7 +152,7 @@ const FreeTimeActivitiesWizard = ({ isOpen, setIsOpen }: FreeTimeActivitiesWizar
                     osaamiset: [],
                   });
                 }}
-                label={t('free-time-activities.add-new-proficiency')}
+                label={t('free-time-activities.add-new-activity')}
                 variant="white"
               />
             )}

src/routes/Profile/FreeTimeActivities/FreeTimeActivitiesWizard/SummaryStep.tsx

@@ -33,12 +33,7 @@ const SummaryStep = () => {
   return (
     <>
       <h2 className="mb-4 text-heading-3 text-black sm:mb-5 sm:text-heading-2">{t('work-history.summary')}</h2>
-      <p className="mb-7 text-body-sm font-arial sm:mb-9 text-todo">
-        Lorem ipsum dolor sit amet, no vis verear commodo. Vix quot dicta phaedrum ad. Has eu invenire concludaturque,
-        simul accusata no ius. Volumus corpora per te, pri lucilius salutatus iracundia ut. Mutat posse voluptua quo cu,
-        in albucius nominavi principes eum, quem facilisi cotidieque mel no.
-      </p>
-      <ExperienceTable mainColumnHeader={t('free-time-activities.activity-or-proficiency-description')} rows={rows} />
+      <ExperienceTable mainColumnHeader={t('free-time-activities.theme-or-activity')} rows={rows} />
     </>
   );
 };

src/routes/Profile/FreeTimeActivities/modals/AddOrEditPatevyysModal.tsx

@@ -37,7 +37,7 @@ interface PatevyysForm {
 }
 
 const PATEVYYDET_API_PATH = '/api/profiili/vapaa-ajan-toiminnot/{id}/patevyydet'; // /{patevyysId}
-const editCompetencesSlug = 'profile.competences.edit';
+const editCompetencesSlug = 'free-time-activities.edit-activity';
 const MainStep = ({ patevyysId }: { patevyysId?: string }) => {
   const {
     t,
@@ -47,13 +47,13 @@ const MainStep = ({ patevyysId }: { patevyysId?: string }) => {
   return (
     <>
       <h2 className="mb-4 text-heading-3 text-black sm:mb-5 sm:text-heading-2">
-        {t(patevyysId ? editCompetencesSlug : 'free-time-activities.add-new-proficiency')}
+        {t(patevyysId ? editCompetencesSlug : 'free-time-activities.add-new-activity')}
       </h2>
       <div className="mb-6">
         <InputField
-          label={t('free-time-activities.proficiency')}
+          label={t('free-time-activities.name-of-free-time-activity')}
           {...register(`nimi.${language}` as const)}
-          placeholder="TODO: Lorem ipsum dolor sit amet"
+          placeholder={t('profile.free-time-activities.modals.name-of-free-time-activity-placeholder')}
         />
       </div>
       <div className="mb-6 flex grow gap-6">
@@ -86,11 +86,19 @@ const OsaamisetStep = ({ patevyysId }: { patevyysId?: string }) => {
       <h2 className="mb-4 text-heading-3 text-black sm:mb-5 sm:text-heading-2">
         {t(patevyysId ? editCompetencesSlug : 'free-time-activities.identify-proficiencies')}
       </h2>
+      <p className="mb-7 text-body-sm font-arial sm:mb-9">
+        {t('profile.free-time-activities.modals.competences-description')}
+      </p>
       <Controller
         control={control}
         name="osaamiset"
         render={({ field: { onChange, value } }) => (
-          <OsaamisSuosittelija onChange={onChange} value={value} sourceType="PATEVYYS" />
+          <OsaamisSuosittelija
+            onChange={onChange}
+            value={value}
+            sourceType="PATEVYYS"
+            placeholder={t('profile.free-time-activities.modals.competences-placeholder')}
+          />
         )}
       />
     </>

src/routes/Profile/FreeTimeActivities/modals/EditVapaaAjanToimintoModal.tsx

@@ -97,14 +97,13 @@ export const EditVapaaAjanToimintoModal = ({ isOpen, onClose, toimintoId: id }:
             }}
           >
             <h2 className="mb-4 text-heading-3 text-black sm:mb-5 sm:text-heading-2">
-              {t('free-time-activities.edit-activity')}
+              {t('free-time-activities.edit-free-time-theme')}
             </h2>
 
             <InputField
-              label={t('free-time-activities.activity-name')}
+              label={t('free-time-activities.name-of-free-time-theme')}
               {...methods.register(`nimi.${language}` as const)}
-              placeholder="TODO: Lorem ipsum dolor sit amet"
-              help="TODO: Help text"
+              placeholder={t('profile.free-time-activities.modals.name-of-free-time-theme-placeholder')}
             />
           </Form>
         </FormProvider>