Add help text descriptions for social media fields in public profile (#4515)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Marco Acierno <marcoacierno@users.noreply.github.com>

Author: marcoacierno

frontend/src/components/public-profile-card/index.tsx

@@ -109,7 +109,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               {null}
             </InputWrapper>
           </GridColumn>
-          <InputWrapper title="Website">
+          <InputWrapper
+            title="Website"
+            description={
+              <FormattedMessage id="profile.publicProfile.website.description" />
+            }
+          >
             <Input
               {...url("participantWebsite")}
               required={false}
@@ -118,7 +123,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("website")}
             />
           </InputWrapper>
-          <InputWrapper title="Mastodon">
+          <InputWrapper
+            title="Mastodon"
+            description={
+              <FormattedMessage id="profile.publicProfile.mastodon.description" />
+            }
+          >
             <Input
               {...text("participantMastodonHandle")}
               required={false}
@@ -127,7 +137,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("mastodonHandle")}
             />
           </InputWrapper>
-          <InputWrapper title="Instagram">
+          <InputWrapper
+            title="Instagram"
+            description={
+              <FormattedMessage id="profile.publicProfile.instagram.description" />
+            }
+          >
             <Input
               {...text("participantInstagramHandle")}
               required={false}
@@ -136,7 +151,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("instagramHandle")}
             />
           </InputWrapper>
-          <InputWrapper title="LinkedIn URL">
+          <InputWrapper
+            title="LinkedIn URL"
+            description={
+              <FormattedMessage id="profile.publicProfile.linkedin.description" />
+            }
+          >
             <Input
               {...url("participantLinkedinUrl")}
               required={false}
@@ -145,7 +165,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("linkedinUrl")}
             />
           </InputWrapper>
-          <InputWrapper title="Facebook URL">
+          <InputWrapper
+            title="Facebook URL"
+            description={
+              <FormattedMessage id="profile.publicProfile.facebook.description" />
+            }
+          >
             <Input
               {...url("participantFacebookUrl")}
               required={false}
@@ -154,7 +179,12 @@ export const PublicProfileCard = <T extends ParticipantFormFields>({
               errors={getParticipantValidationError("facebookUrl")}
             />
           </InputWrapper>
-          <InputWrapper title="Twitter">
+          <InputWrapper
+            title="Twitter"
+            description={
+              <FormattedMessage id="profile.publicProfile.twitter.description" />
+            }
+          >
             <Input
               {...text("participantTwitterHandle")}
               required={false}

frontend/src/locale/index.ts

@@ -91,6 +91,18 @@ Let's get in touch to find the best solution for your business' needs!`,
     "profile.publicProfile.yourBio.description":
       "Write something about yourself: your interests, your current occupation and more!",
     "profile.publicProfile.yourSocials": "Your socials",
+    "profile.publicProfile.website.description":
+      "Your website URL (e.g., https://example.com)",
+    "profile.publicProfile.mastodon.description":
+      "Your Mastodon handle (e.g., user@mastodon.social)",
+    "profile.publicProfile.instagram.description":
+      "Your Instagram handle without @ (e.g., pycon.it)",
+    "profile.publicProfile.linkedin.description":
+      "Your LinkedIn profile URL (e.g., https://www.linkedin.com/in/your-profile-here)",
+    "profile.publicProfile.facebook.description":
+      "Your Facebook profile URL (e.g., https://www.facebook.com/pythonitalia)",
+    "profile.publicProfile.twitter.description":
+      "Your Twitter handle without @ (e.g., pyconit)",
     "profile.ticketsEdit.qrCodeDescription":
       "The QR Code links to your public profile and can be used to quickly share contact details with fellow attendees and sponsors!",
     "profile.ticketsEdit.editProfile":
@@ -2200,6 +2212,18 @@ Usa il pulsante 'Gestisci' nella pagina per confermare o rifiutare il grant. Hai
     "profile.publicProfile.yourBio.description":
       "Scrivi qualcosa su di te: i tuoi interessi, il tuo lavoro attuale e cosi via!",
     "profile.publicProfile.yourSocials": "I tuoi social",
+    "profile.publicProfile.website.description":
+      "L'URL del tuo sito web (es., https://example.com)",
+    "profile.publicProfile.mastodon.description":
+      "Il tuo handle Mastodon (es., utente@mastodon.social)",
+    "profile.publicProfile.instagram.description":
+      "Il tuo handle Instagram senza @ (es., pycon.it)",
+    "profile.publicProfile.linkedin.description":
+      "L'URL del tuo profilo LinkedIn (es., https://www.linkedin.com/in/il-tuo-profilo)",
+    "profile.publicProfile.facebook.description":
+      "L'URL del tuo profilo Facebook (es., https://www.facebook.com/pythonitalia)",
+    "profile.publicProfile.twitter.description":
+      "Il tuo handle Twitter senza @ (es., pyconit)",
     "profile.ticketsEdit.qrCodeDescription":
       "Il QR Code porta al tuo profilo e può essere utilizzato per condividere rapidamente i tuoi contatti con altri partecipanti o sponsors!",
     "profile.ticketsEdit.editProfile":