Add badge-specific notifications (#714)

backend/clubs/migrations/0113_badge_message.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.4 on 2024-08-30 20:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("clubs", "0112_clubfair_virtual"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="badge",
+            name="message",
+            field=models.TextField(blank=True, null=True),
+        ),
+    ]

backend/clubs/models.py

@@ -1454,6 +1454,9 @@ class Badge(models.Model):
     # whether or not users can view and filter by this badge
     visible = models.BooleanField(default=False)
 
+    # optional message to display on club pages with the badge
+    message = models.TextField(null=True, blank=True)
+
     def __str__(self):
         return self.label
 

backend/clubs/serializers.py

@@ -132,7 +132,7 @@ class BadgeSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Badge
-        fields = ("id", "purpose", "label", "color", "description")
+        fields = ("id", "purpose", "label", "color", "description", "message")
 
 
 class SchoolSerializer(serializers.ModelSerializer):

frontend/pages/club/[club]/index.tsx

@@ -178,13 +178,21 @@ const ClubPage = ({
     testimonials,
     signature_events: signatureEvents,
   } = club
-
   return (
     <WideContainer background={SNOW} fullHeight>
       <ClubMetadata club={club} />
       {userInfo != null && (
         <ClubApprovalDialog club={club} userInfo={userInfo} />
       )}
+      {club.badges.length > 0 &&
+        club.badges
+          .filter((badge) => badge.message && badge.message.length > 0)
+          .map((badge) => (
+            <div className="notification is-info is-light" key={badge.id}>
+              <Icon name="alert-circle" style={{ marginTop: '-3px' }} />{' '}
+              {badge.message}
+            </div>
+          ))}
       <div className="columns">
         <div className="column">
           {isActive || (

frontend/types.ts

@@ -126,6 +126,7 @@ export interface Badge {
   color: string
   purpose: string
   description: string
+  message?: string
 }
 
 export interface QuestionAnswer {