feat: add premium tier to badges (#4558)

Author: jproberson

.snaplet/dataModel.json

@@ -5600,6 +5600,20 @@
           "isId": false,
           "maxLength": null
         },
+        {
+          "id": "public.profile_badges.premium_tier",
+          "name": "premium_tier",
+          "columnName": "premium_tier",
+          "type": "int4",
+          "isRequired": false,
+          "kind": "scalar",
+          "isList": false,
+          "isGenerated": false,
+          "sequence": false,
+          "hasDefaultValue": false,
+          "isId": false,
+          "maxLength": null
+        },
         {
           "name": "news",
           "type": "news",

seed.ts

@@ -147,6 +147,7 @@ const seedBadges = (): Partial<profile_badgesScalars>[] => [
     display_name: 'PRO',
     image_url:
       'https://wbskztclbriekwpehznv.supabase.co/storage/v1/object/public/one-army/icons/pro.svg',
+    premium_tier: 1,
   },
 ];
 

shared/mocks/data/badges.ts

@@ -7,12 +7,14 @@ export const badges: Partial<DBProfileBadge>[] = [
     image_url:
       'https://wbskztclbriekwpehznv.supabase.co/storage/v1/object/public/one-army/icons/pro.svg',
     action_url: '',
+    premium_tier: 1,
   },
   {
     name: 'supporter',
     display_name: 'Supporter',
     image_url:
       'https://wbskztclbriekwpehznv.supabase.co/storage/v1/object/public/one-army/icons/supporter.svg',
     action_url: '',
+    premium_tier: null,
   },
 ];

shared/models/profileBadge.ts

@@ -4,6 +4,7 @@ export class DBProfileBadge {
   display_name: string;
   image_url: string;
   action_url: string | null;
+  premium_tier: number | null;
 
   constructor(obj: Partial<DBProfileBadge>) {
     Object.assign(this, obj);
@@ -20,6 +21,7 @@ export class ProfileBadge {
   displayName: string;
   imageUrl: string;
   actionUrl?: string;
+  premiumTier?: number;
 
   constructor(obj: Partial<ProfileBadge>) {
     Object.assign(this, obj);
@@ -33,6 +35,7 @@ export class ProfileBadge {
       displayName: badge.display_name,
       imageUrl: badge.image_url,
       actionUrl: badge.action_url || undefined,
+      premiumTier: badge.premium_tier || undefined,
     });
   }
 
@@ -43,6 +46,7 @@ export class ProfileBadge {
       displayName: value.display_name,
       imageUrl: value.image_url,
       actionUrl: value.action_url || undefined,
+      premiumTier: value.premium_tier || undefined,
     });
   }
 }

src/common/PremiumTierWrapper.test.tsx

@@ -0,0 +1,64 @@
+import { render } from '@testing-library/react';
+import { ProfileStoreProvider } from 'src/stores/Profile/profile.store';
+import { FactoryUser } from 'src/test/factories/User';
+import { describe, expect, it, vi } from 'vitest';
+
+import { PremiumTierWrapper } from './PremiumTierWrapper';
+
+vi.mock('src/stores/Profile/profile.store', () => ({
+  useProfileStore: () => ({
+    profile: FactoryUser({
+      badges: [
+        {
+          id: 1,
+          name: 'supporter',
+          displayName: 'Supporter',
+          imageUrl: 'https://example.com/icons/supporter.svg',
+        },
+        {
+          id: 2,
+          name: 'pro',
+          displayName: 'PRO',
+          imageUrl: 'https://example.com/icons/pro.svg',
+          premiumTier: 1,
+        },
+      ],
+    }),
+  }),
+  ProfileStoreProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+describe('PremiumTierWrapper', () => {
+  it('renders fallback when user does not have required tier', () => {
+    const { getByText } = render(
+      <ProfileStoreProvider>
+        <PremiumTierWrapper tierRequired={2} fallback={<div>Fallback Content</div>}>
+          <div>Test Content</div>
+        </PremiumTierWrapper>
+      </ProfileStoreProvider>,
+    );
+    expect(getByText('Fallback Content')).toBeTruthy();
+  });
+
+  it('renders child components when user has required tier', () => {
+    const { getByText } = render(
+      <ProfileStoreProvider>
+        <PremiumTierWrapper tierRequired={1}>
+          <div>Test Content</div>
+        </PremiumTierWrapper>
+      </ProfileStoreProvider>,
+    );
+    expect(getByText('Test Content')).toBeTruthy();
+  });
+
+  it('renders child components when tierRequired is 0', () => {
+    const { getByText } = render(
+      <ProfileStoreProvider>
+        <PremiumTierWrapper tierRequired={0}>
+          <div>Test Content</div>
+        </PremiumTierWrapper>
+      </ProfileStoreProvider>,
+    );
+    expect(getByText('Test Content')).toBeTruthy();
+  });
+});

src/common/PremiumTierWrapper.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { useProfileStore } from 'src/stores/Profile/profile.store';
+
+import type { Profile } from 'oa-shared';
+
+interface IProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  tierRequired: number;
+}
+
+export const PremiumTierWrapper = observer((props: IProps) => {
+  const { children, fallback, tierRequired } = props;
+  const { profile } = useProfileStore();
+
+  const hasRequiredTier = userHasPremiumTier(profile, tierRequired);
+
+  return <>{hasRequiredTier ? children : fallback || null}</>;
+});
+
+export const userHasPremiumTier = (user?: Profile | null, tierRequired?: number): boolean => {
+  if (!tierRequired || tierRequired <= 0) {
+    return true;
+  }
+
+  if (!user?.badges || user.badges.length === 0) {
+    return false;
+  }
+
+  return user.badges.some((badge) => badge.premiumTier === tierRequired);
+};

src/services/profileService.server.ts

@@ -9,6 +9,7 @@ import type { DBAuthorVotes, DBMedia, DBProfile, ProfileFormData, ProfileType }
 export class ProfileServiceServer {
   constructor(private client: SupabaseClient) {}
 
+  // TODO: add premium_tier to profile_badges selection once migration is applied
   async getByAuthId(id: string): Promise<DBProfile | null> {
     const { data } = await this.client
       .from('profiles')
@@ -74,6 +75,7 @@ export class ProfileServiceServer {
     return data as DBProfile;
   }
 
+  // TODO: add premium_tier to profile_badges selection once migration is applied
   async getUsersByUsername(usernames: string[]): Promise<DBProfile[] | null> {
     const { data } = await this.client
       .from('profiles')
@@ -275,6 +277,7 @@ export class ProfileServiceServer {
             action_url
           )
         )`,
+        // TODO: add premium_tier to profile_badges selection once migration is applied to CI test database
       )
       .single();
     if (error) {

src/test/factories/User.ts

@@ -30,6 +30,7 @@ export const FactoryUser = (userOverloads: Partial<Profile> = {}): Partial<Profi
       name: 'pro',
       displayName: 'PRO',
       imageUrl: faker.image.avatar(),
+      premiumTier: 1,
     },
     {
       id: 2,