From 2fc9b215a919960347d17adf18647071c2299d78 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 11 Sep 2022 20:17:40 -0500
Subject: [PATCH] Display custom badges on profiles

---
 app/soapbox/components/badge.tsx              | 37 ++++++++++---------
 .../ui/components/profile_info_panel.tsx      | 21 ++++++++---
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 13646bcdb..7ba2d5408 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -3,24 +3,27 @@ import React from 'react';
 
 interface IBadge {
   title: React.ReactNode,
-  slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
+  slug: string,
 }
-
 /** Badge to display on a user's profile. */
-const Badge: React.FC<IBadge> = ({ title, slug }) => (
-  <span
-    data-testid='badge'
-    className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
-      'bg-fuchsia-700 text-white': slug === 'patron',
-      'bg-yellow-500 text-white': slug === 'donor',
-      'bg-black text-white': slug === 'admin',
-      'bg-cyan-600 text-white': slug === 'moderator',
-      'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': slug === 'bot',
-      'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
-    })}
-  >
-    {title}
-  </span>
-);
+const Badge: React.FC<IBadge> = ({ title, slug }) => {
+  const fallback = !['patron', 'admin', 'moderator', 'opaque', 'donor', 'badge:donor'].includes(slug);
+
+  return (
+    <span
+      data-testid='badge'
+      className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+        'bg-fuchsia-700 text-white': slug === 'patron',
+        'bg-yellow-500 text-white': ['donor', 'badge:donor'].includes(slug),
+        'bg-black text-white': slug === 'admin',
+        'bg-cyan-600 text-white': slug === 'moderator',
+        'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
+        'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
+      })}
+    >
+      {title}
+    </span>
+  );
+};
 
 export default Badge;
diff --git a/app/soapbox/features/ui/components/profile_info_panel.tsx b/app/soapbox/features/ui/components/profile_info_panel.tsx
index 2c0a9163b..c6c6d084e 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_info_panel.tsx
@@ -8,6 +8,8 @@ import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
+import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges';
+import { capitalize } from 'soapbox/utils/strings';
 
 import ProfileFamiliarFollowers from './profile_familiar_followers';
 import ProfileStats from './profile_stats';
@@ -52,7 +54,20 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
     }
   };
 
+  const getCustomBadges = (): React.ReactNode[] => {
+    const badges = getAccountBadges(account);
+
+    return badges.map(badge => (
+      <Badge
+        key={badge}
+        slug={badge}
+        title={capitalize(badgeToTag(badge))}
+      />
+    ));
+  };
+
   const getBadges = (): React.ReactNode[] => {
+    const custom = getCustomBadges();
     const staffBadge = getStaffBadge();
     const isPatron = account.getIn(['patron', 'is_patron']) === true;
 
@@ -66,11 +81,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
       badges.push(<Badge slug='patron' title='Patron' key='patron' />);
     }
 
-    if (account.donor) {
-      badges.push(<Badge slug='donor' title='Donor' key='donor' />);
-    }
-
-    return badges;
+    return [...badges, ...custom];
   };
 
   const renderBirthday = (): React.ReactNode => {