Flairs: show unlock status and remaining days

frontend/js/src/settings/Settings.tsx

@@ -17,6 +17,7 @@ import { FlairEnum, Flair } from "../utils/constants";
 import type { FlairName } from "../utils/constants";
 import Username from "../common/Username";
 import queryClient from "../utils/QueryClient";
+import useUserFlairs from "../utils/FlairLoader";
 
 function CustomOption(
   props: OptionProps<{ value: Flair; label: FlairName; username: string }>
@@ -52,6 +53,33 @@ export default function Settings() {
   const [selectedFlair, setSelectedFlair] = React.useState<Flair>(
     currentFlair ?? FlairEnum.None
   );
+  // If this has a value it should tell us if the flair is active,
+  // as calculated on the back-end
+  const currentValidFlair = useUserFlairs(name);
+  // However we also hit the metabrainz nag-check endpoint to comfirm that
+  // and get a number of days left
+  const [flairUnlocked, setFlairUnlocked] = React.useState<boolean>(
+    Boolean(currentValidFlair)
+  );
+  const [unlockDaysLeft, setUnlockDaysLeft] = React.useState<number>(0);
+  React.useEffect(() => {
+    async function fetchNagStatus() {
+      try {
+        const response = await fetch(
+          `https://metabrainz.org/donations/nag-check?editor=${name}`
+        );
+        const values = await response.text();
+        const [shouldNag, daysLeft] = values.split(",");
+        setFlairUnlocked(Number(shouldNag) === 1);
+        setUnlockDaysLeft(Number(daysLeft));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("Could not fetch nag status:", error);
+      }
+    }
+    fetchNagStatus();
+  }, [name]);
+
   const [showToken, setShowToken] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
 
@@ -167,6 +195,17 @@ export default function Settings() {
               .<br />
               Some flairs are only visible on hover.
             </p>
+            {flairUnlocked ? (
+              <div className="alert alert-success">
+                Your flair is unlocked for another{" "}
+                <b>{Math.round(unlockDaysLeft)} days</b>.
+              </div>
+            ) : (
+              <div className="alert alert-warning">
+                Flairs are currently locked; you can choose a flair below but it
+                will not be shown on the website until your next donation.
+              </div>
+            )}
             <div
               className="flex flex-wrap"
               style={{ gap: "1em", alignItems: "center" }}