Add help text and image popover to friend code input

Users were confused about what friend code means and where to find it.
Added an info popover explaining that friend codes are used for identity
verification by staff, tournament organizers, and SendouQ opponents.
The popover includes an image showing where to find the friend code on
the Nintendo Switch. Also added text noting that once set, only staff
can change it.

app/components/FriendCodeInput.tsx

@@ -2,12 +2,16 @@ import clsx from "clsx";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useFetcher } from "react-router";
+import { Image } from "~/components/Image";
+import { InfoPopover } from "~/components/InfoPopover";
 import { Input } from "~/components/Input";
 import { Label } from "~/components/Label";
 import { SubmitButton } from "~/components/SubmitButton";
 import { FRIEND_CODE_REGEXP_PATTERN } from "~/features/sendouq/q-constants";
 import { SENDOUQ_PAGE } from "~/utils/urls";
 
+const FC_INFO_IMAGE_URL = "/static-assets/img/layout/fc-info";
+
 export function FriendCodeInput({
 	friendCode,
 }: {
@@ -26,7 +30,22 @@ export function FriendCodeInput({
 			>
 				<div>
 					{!friendCode ? (
-						<Label htmlFor={id}>{t("common:fc.title")}</Label>
+						<div className="stack horizontal xs items-center">
+							<Label htmlFor={id}>{t("common:fc.title")}</Label>
+							<InfoPopover tiny>
+								<div className="stack sm">
+									<div>{t("common:fc.helpText")}</div>
+									<div className="text-lighter text-xs font-bold">
+										{t("common:fc.whereToFind")}
+									</div>
+									<Image
+										path={FC_INFO_IMAGE_URL}
+										alt={t("common:fc.whereToFind")}
+										width={320}
+									/>
+								</div>
+							</InfoPopover>
+						</div>
 					) : null}
 					{friendCode ? (
 						<div className="font-bold">SW-{friendCode}</div>
@@ -47,6 +66,11 @@ export function FriendCodeInput({
 					</SubmitButton>
 				) : null}
 			</div>
+			{!friendCode ? (
+				<div className="text-lighter text-xs mt-2">
+					{t("common:fc.onceSetStaffOnly")}
+				</div>
+			) : null}
 		</fetcher.Form>
 	);
 }

locales/da/common.json

@@ -298,6 +298,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/de/common.json

@@ -298,6 +298,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/en/common.json

@@ -298,6 +298,9 @@
 	"chat.systemMsg.userLeft": "{{name}} left the group",
 	"chat.newMessages": "New messages",
 	"fc.title": "Friend code",
+	"fc.helpText": "Used to verify your identity for sendou.ink staff, tournament organizers, and SendouQ opponents. You must always play only on this one account.",
+	"fc.whereToFind": "Find your friend code on your Nintendo Switch (2)",
+	"fc.onceSetStaffOnly": "Once set, only a member of staff can change it",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "Builds: Disable automatic ability sorting",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "Outside of your profile page, build abilities are sorted so that same abilities are next to each other. This setting allows you to see the abilities in the order they were authored everywhere.",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "Scrims: No adding to pickups by untrusted",

locales/es-ES/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "{{name}} se salió del grupo",
 	"chat.newMessages": "",
 	"fc.title": "Clave de amigo",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/es-US/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "{{name}} se salió del grupo",
 	"chat.newMessages": "Nuevo mensajes",
 	"fc.title": "Clave de amigo",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/fr-CA/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/fr-EU/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "{{name}} a quitté le groupe",
 	"chat.newMessages": "Nouveau message",
 	"fc.title": "Code ami ",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "Sets: Désactiver le tri automatique des bonus",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "En dehors de votre profil, les bonus des sets sont triées de manière à ce que les mêmes bonus soient côte à côte. Ce paramètre vous permet de voir les bonus dans l'ordre dans lequel elles ont été créées partout.",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "Scrims: Les ajouts aux pickups peuvent êtres effectuer uniquement par des personnes de confiance",

locales/he/common.json

@@ -299,6 +299,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/it/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "{{name}} ha lasciato il gruppo",
 	"chat.newMessages": "Nuovi messaggi",
 	"fc.title": "Codice amico",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "Build: Disattiva ordinamento automatico delle abilità",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "Aldilà della tua pagina profilo, le build delle abilità sono ordinate in modo tale da rendere vicine le abilità uguali. Quest'impostazione ti permette di vedere le abilità come intese dall'autore ovunque.",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/ja/common.json

@@ -294,6 +294,9 @@
 	"chat.systemMsg.userLeft": "{{name}} がグループから出ました",
 	"chat.newMessages": "新着メッセージ",
 	"fc.title": "フレンドコード",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/ko/common.json

@@ -294,6 +294,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/nl/common.json

@@ -298,6 +298,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/pl/common.json

@@ -301,6 +301,9 @@
 	"chat.systemMsg.userLeft": "",
 	"chat.newMessages": "",
 	"fc.title": "",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/pt-BR/common.json

@@ -300,6 +300,9 @@
 	"chat.systemMsg.userLeft": "{{name}} deixou o grupo",
 	"chat.newMessages": "",
 	"fc.title": "Código de amigo",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",

locales/ru/common.json

@@ -301,6 +301,9 @@
 	"chat.systemMsg.userLeft": "{{name}} покинул группу",
 	"chat.newMessages": "Новые сообщения",
 	"fc.title": "Код друга",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "Сборки: Отключить автоматическую сортировку свойств",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "За исключением вашего профиля, свойства в сборках отсортированы так, что одинаковые свойства находятся друг за другом. Эта настройка позволит вам видеть свойства в сборках в порядке, который задал автор.",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "Скримы: Не добавляться в пик-апы недоверенными лицами",

locales/zh/common.json

@@ -294,6 +294,9 @@
 	"chat.systemMsg.userLeft": "{{name}} 离开了小队",
 	"chat.newMessages": "新消息",
 	"fc.title": "好友码",
+	"fc.helpText": "",
+	"fc.whereToFind": "",
+	"fc.onceSetStaffOnly": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.label": "",
 	"settings.UPDATE_DISABLE_BUILD_ABILITY_SORTING.bottomText": "",
 	"settings.DISALLOW_SCRIM_PICKUPS_FROM_UNTRUSTED.label": "",