fix(ui): Add tip & validation for Discord ID input (#966)

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -10,11 +10,15 @@ import Error from '../../../../pages/_error';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import * as Yup from 'yup';
 
 const messages = defineMessages({
   notificationsettings: 'Notification Settings',
   enableNotifications: 'Enable Notifications',
-  discordId: 'Discord ID',
+  discordId: 'Discord User ID',
+  discordIdTip:
+    'The <FindDiscordIdLink>18-digit ID number</FindDiscordIdLink> for your Discord user account',
+  validationDiscordId: 'You must provide a valid Discord user ID',
   save: 'Save Changes',
   saving: 'Saving…',
   plexuser: 'Plex User',
@@ -32,6 +36,12 @@ const UserNotificationSettings: React.FC = () => {
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 
+  const UserNotificationSettingsSchema = Yup.object().shape({
+    discordId: Yup.string()
+      .optional()
+      .matches(/^\d{18}$/, intl.formatMessage(messages.validationDiscordId)),
+  });
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -52,6 +62,7 @@ const UserNotificationSettings: React.FC = () => {
           enableNotifications: data?.enableNotifications,
           discordId: data?.discordId,
         }}
+        validationSchema={UserNotificationSettingsSchema}
         enableReinitialize
         onSubmit={async (values) => {
           try {
@@ -97,7 +108,23 @@ const UserNotificationSettings: React.FC = () => {
               </div>
               <div className="form-row">
                 <label htmlFor="discordId" className="text-label">
-                  {intl.formatMessage(messages.discordId)}
+                  <span>{intl.formatMessage(messages.discordId)}</span>
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.discordIdTip, {
+                      FindDiscordIdLink: function FindDiscordIdLink(msg) {
+                        return (
+                          <a
+                            href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="text-gray-100 underline transition duration-300 hover:text-white"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                    })}
+                  </span>
                 </label>
                 <div className="form-input">
                   <div className="flex max-w-lg rounded-md shadow-sm">