Frontend: Profile textbox templates to localizable placeholders (#9248)

Author: tristanlabelle

app/web/features/profile/edit/EditHostingPreference.tsx

@@ -9,7 +9,6 @@ import {
   User,
 } from "../../../proto/api_pb";
 import { HostingPreferenceData } from "../../../service/user";
-import { DEFAULT_ABOUT_HOME_HEADINGS } from "./constants";
 import EditHostingPreferenceForm from "./EditHostingPreferenceForm";
 
 export default function EditHostingPreference() {
@@ -26,7 +25,7 @@ export default function EditHostingPreference() {
       maxGuests: user.maxGuests?.value ?? 1,
       smokingAllowed:
         user.smokingAllowed || SmokingLocation.SMOKING_LOCATION_UNKNOWN,
-      aboutPlace: user.aboutPlace || DEFAULT_ABOUT_HOME_HEADINGS,
+      aboutPlace: user.aboutPlace ?? "",
       sleepingArrangement:
         user.sleepingArrangement ||
         SleepingArrangement.SLEEPING_ARRANGEMENT_UNKNOWN,

app/web/features/profile/edit/EditHostingPreferenceForm.tsx

@@ -32,8 +32,6 @@ import { theme } from "theme";
 import { useUnsavedChangesWarning } from "utils/hooks";
 import { useIsNativeEmbed } from "utils/nativeLink";
 
-import { DEFAULT_ABOUT_HOME_HEADINGS } from "./constants";
-
 interface HostingPreferenceCheckboxProps {
   className?: string;
   name: string;
@@ -315,12 +313,7 @@ export default function HostingPreferenceForm({
     resetUpdate();
     updateHostingPreferences(
       {
-        preferenceData: {
-          ...data,
-          aboutPlace: DEFAULT_ABOUT_HOME_HEADINGS.includes(data.aboutPlace)
-            ? ""
-            : data.aboutPlace,
-        },
+        preferenceData: data,
         setMutationError: setErrorMessage,
       },
       {
@@ -437,7 +430,7 @@ export default function HostingPreferenceForm({
               label={t("profile:home_info_headings.about_home")}
               name="aboutPlace"
               control={control}
-              defaultValue={user.aboutPlace || DEFAULT_ABOUT_HOME_HEADINGS}
+              defaultValue={user.aboutPlace}
             />
           </FieldGroup>
 

app/web/features/profile/edit/EditProfile.tsx

@@ -49,13 +49,9 @@ import {
   nameMaxLength,
   nameMinLength,
   nameValidationPattern,
+  profileAboutMeMinLength,
 } from "utils/validation";
 
-import {
-  ABOUT_ME_MIN_LENGTH,
-  DEFAULT_ABOUT_ME_HEADINGS,
-  DEFAULT_HOBBIES_HEADINGS,
-} from "./constants";
 import StatusCardGroup from "./StatusCard";
 
 export type EditProfileFormValues = Omit<
@@ -297,7 +293,7 @@ export default function EditProfileForm() {
           regionsVisited: user.regionsVisitedList,
           regionsLived: user.regionsLivedList,
           aboutMe: user.aboutMe,
-          thingsILike: user.thingsILike || DEFAULT_HOBBIES_HEADINGS,
+          thingsILike: user.thingsILike,
           additionalInformation: user.additionalInformation,
           location: {
             city: user.city,
@@ -382,9 +378,6 @@ export default function EditProfileForm() {
                 fluency: LanguageAbility.Fluency.FLUENCY_FLUENT,
               })),
             },
-            thingsILike: DEFAULT_HOBBIES_HEADINGS.includes(data.thingsILike)
-              ? ""
-              : data.thingsILike,
           },
           setMutationError: setErrorMessage,
           onSuccess: () => {
@@ -411,7 +404,7 @@ export default function EditProfileForm() {
   const handleSubmitButtonClick = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (aboutMeField.length < ABOUT_ME_MIN_LENGTH || !user?.avatarUrl) {
+    if (aboutMeField.length < profileAboutMeMinLength || !user?.avatarUrl) {
       setShowIncompleteProfileDialog(true);
     } else {
       onSubmit();
@@ -915,15 +908,15 @@ export default function EditProfileForm() {
                   id="aboutMe"
                   label={t("profile:heading.about_me")}
                   name="aboutMe"
-                  placeholder={DEFAULT_ABOUT_ME_HEADINGS}
+                  placeholder={t("profile:about_me_textbox_placeholder")}
                   defaultValue={user.aboutMe}
                   control={control}
-                  warning={aboutMeField.length < ABOUT_ME_MIN_LENGTH}
+                  warning={aboutMeField.length < profileAboutMeMinLength}
                   helperText={
                     <Trans
                       i18nKey="profile:helper_text.characters_remaining"
                       values={{
-                        count: ABOUT_ME_MIN_LENGTH - aboutMeField.length,
+                        count: profileAboutMeMinLength - aboutMeField.length,
                       }}
                       components={{ bold: <strong /> }}
                     />
@@ -956,7 +949,8 @@ export default function EditProfileForm() {
                   id="thingsILike"
                   label={t("profile:heading.hobbies_section")}
                   name="thingsILike"
-                  defaultValue={user.thingsILike || DEFAULT_HOBBIES_HEADINGS}
+                  defaultValue={user.thingsILike}
+                  placeholder={t("profile:hobbies_textbox_placeholder")}
                   control={control}
                 />
               </FieldGroup>
@@ -1070,7 +1064,7 @@ export default function EditProfileForm() {
                 >
                   {t("profile:incomplete_dialog.description")}
                 </Typography>
-                {aboutMeField.length < ABOUT_ME_MIN_LENGTH && (
+                {aboutMeField.length < profileAboutMeMinLength && (
                   <ListItem key={1} style={{ display: "list-item" }}>
                     {`• ${t("profile:incomplete_dialog.about_me_message")}`}
                   </ListItem>

app/web/features/profile/edit/EditProfilePage.test.tsx

@@ -5,8 +5,8 @@ import wrapper from "test/hookWrapper";
 import i18n from "test/i18n";
 import { getLanguages, getRegions, getUser } from "test/serviceMockDefaults";
 import { addDefaultUser } from "test/utils";
+import { profileAboutMeMinLength } from "utils/validation";
 
-import { ABOUT_ME_MIN_LENGTH } from "./constants";
 import EditProfilePage from "./EditProfilePage";
 
 const { t } = i18n;
@@ -220,7 +220,7 @@ describe("Edit profile", () => {
   it("should reject names with invalid characters like !@#$", async () => {
     getUserMock.mockImplementation(async (user) => ({
       ...(await getUser(user)),
-      aboutMe: "a".repeat(ABOUT_ME_MIN_LENGTH),
+      aboutMe: "a".repeat(profileAboutMeMinLength),
     }));
 
     await renderPage();

app/web/features/profile/edit/constants.ts

@@ -49,6 +49,8 @@
     "save_anyway": "Save anyway?",
     "continue_editing": "Continue editing"
   },
+  "about_me_textbox_placeholder": "e.g. Current mission, why you use Couchers.org, favorite travel story...",
+  "hobbies_textbox_placeholder": "e.g. Activities, books, movies, music...",
   "home_info_headings": {
     "about_home": "About my home",
     "general": "General",

app/web/features/profile/locales/en.json

@@ -11,6 +11,8 @@ export const emailValidationPattern =
   /^[0-9a-z]([0-9a-z\-_+]|(\.[0-9a-z\-_+]))*@([0-9a-z-]+\.)*[0-9a-z-]+\.[a-z]{2,}$/i;
 export const timePattern = /\d{2}:\d{2}/;
 
+export const profileAboutMeMinLength = 150;
+
 export function validatePastDate(stringDate: string) {
   const date = new Date(stringDate);
   return !isNaN(date.getTime()) && date < new Date();