feat(referral): gate the Plus reward behind referral_plus_reward

Review feedback (capJavert): the page promised and displayed a free
Plus month with no backend granting it and a reward period inferred
from referral timestamps rather than entitlement data. Put the promise
back behind `referral_plus_reward` (default false): with it off the
page reads "Grow the community" and promises nothing; flip it on only
once fulfillment / authoritative entitlement data lands.

Mark the two referral notification types as placeholders in code — no
backend emits them yet, so they are not complete.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

Author: tsahimatsliah

packages/shared/src/components/notifications/utils.ts

@@ -99,6 +99,10 @@ export enum NotificationType {
   WarmIntro = 'warm_intro',
   ExperienceCompanyEnriched = 'experience_company_enriched',
   LiveRoomStarted = 'live_room_started',
+  // Placeholder types for the invite-friends reward. No backend emits either
+  // one yet, so nothing produces these notifications in production — they exist
+  // for the client to render and for Storybook to demo. Not complete until the
+  // backend can emit them (and the Plus reward is actually fulfilled).
   ReferralFriendJoined = 'referral_friend_joined',
   ReferralPlusUnlocked = 'referral_plus_unlocked',
 }

packages/shared/src/lib/featureManagement.ts

@@ -195,6 +195,17 @@ export const featureShortcutsHub = new Feature('shortcuts_hub_v2', false);
 
 export const featureGiveback = new Feature('giveback', isDevelopment);
 
+// Gates the "invite 3 friends, get 1 month of Plus" promo on the invite
+// settings page. MUST stay `false`: no backend grants the free month on the
+// third referral yet and the displayed reward period is inferred from referral
+// timestamps rather than entitlement data, so the promise cannot ship on. Flip
+// it on only once fulfillment / authoritative entitlement data lands. With it
+// off the page reads "Grow the community" and promises nothing.
+export const featureReferralPlusReward = new Feature(
+  'referral_plus_reward',
+  false,
+);
+
 export const featureGivebackSuggestCause = new Feature(
   'giveback_suggest_cause',
   false,

packages/storybook/stories/features/referral/InviteFriends.stories.tsx

@@ -78,13 +78,20 @@ interface InvitePageProps {
   joinedCount?: number;
   isPlus?: boolean;
   showGiveback?: boolean;
+  // Mirrors the `referral_plus_reward` flag on the real page.
+  showReward?: boolean;
 }
 
 // Mirrors packages/webapp/pages/settings/invite.tsx section for section.
-const rewardDescription = (isUnlocked: boolean): string =>
-  isUnlocked
+const rewardDescription = (showReward: boolean, isUnlocked: boolean): string => {
+  if (!showReward) {
+    return "Share daily.dev with developers you know. When they join through your link, they'll show up in your referrals below.";
+  }
+
+  return isUnlocked
     ? 'Keep inviting. Every developer you bring makes the feed sharper.'
     : `When ${INVITE_GOAL} developers join daily.dev through your link, your free month of Plus starts.`;
+};
 
 // Same derivation as the page: the free month runs from the join date of the
 // INVITE_GOALth developer.
@@ -106,6 +113,7 @@ const InvitePage = ({
   joinedCount = 0,
   isPlus = false,
   showGiveback = true,
+  showReward = true,
 }: InvitePageProps): ReactElement => {
   const referredUsers = mockReferredUsers().slice(0, joinedCount);
   const isUnlocked = joinedCount >= INVITE_GOAL;
@@ -114,10 +122,14 @@ const InvitePage = ({
     <SettingsCard>
       <Section
         isFirst
-        title={`Invite ${INVITE_GOAL} friends, get 1 month of Plus`}
-        description={rewardDescription(isUnlocked)}
+        title={
+          showReward
+            ? `Invite ${INVITE_GOAL} friends, get 1 month of Plus`
+            : 'Grow the community'
+        }
+        description={rewardDescription(showReward, isUnlocked)}
       >
-        {isPlus && !isUnlocked && (
+        {showReward && isPlus && !isUnlocked && (
           <Typography
             className="mt-1"
             type={TypographyType.Footnote}
@@ -126,12 +138,14 @@ const InvitePage = ({
             Already on Plus? The free month is added to your subscription.
           </Typography>
         )}
-        <InviteRewardProgress
-          className="mt-4"
-          joinedCount={joinedCount}
-          referredUsers={referredUsers}
-          rewardPeriod={rewardPeriodFor(referredUsers)}
-        />
+        {showReward && (
+          <InviteRewardProgress
+            className="mt-4"
+            joinedCount={joinedCount}
+            referredUsers={referredUsers}
+            rewardPeriod={rewardPeriodFor(referredUsers)}
+          />
+        )}
       </Section>
       <Section title="Your invitation link">
         <InviteLinkInput
@@ -284,6 +298,20 @@ export const ExistingPlusMember: Story = {
   },
 };
 
+export const RewardFlagOff: Story = {
+  name: 'Reward flag off (default)',
+  args: { joinedCount: 1, showReward: false },
+  decorators: [withInvite()],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'What ships until `referral_plus_reward` is switched on: no reward promise and no tracker, just the referral tooling. The flag defaults off because no backend grants the free month yet.',
+      },
+    },
+  },
+};
+
 export const GivebackDisabled: Story = {
   name: 'Giveback flag off',
   args: { joinedCount: 1, showGiveback: false },

packages/webapp/__tests__/AccountInvitePage.tsx

@@ -19,7 +19,10 @@ import {
   REFERRED_USERS_QUERY,
 } from '@dailydotdev/shared/src/graphql/users';
 import type { Feature } from '@dailydotdev/shared/src/lib/featureManagement';
-import { featureGiveback } from '@dailydotdev/shared/src/lib/featureManagement';
+import {
+  featureGiveback,
+  featureReferralPlusReward,
+} from '@dailydotdev/shared/src/lib/featureManagement';
 import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
 import { LogEvent, TargetId } from '@dailydotdev/shared/src/lib/log';
 import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
@@ -145,7 +148,20 @@ const renderComponent = (
   );
 };
 
+it('should not promise the Plus reward while the flag is off', async () => {
+  mockedFeatures.set(featureReferralPlusReward, false);
+  mockReferralCampaign(2);
+  renderComponent();
+
+  expect(await screen.findByText('Grow the community')).toBeInTheDocument();
+  expect(
+    screen.queryByText('Invite 3 friends, get 1 month of Plus'),
+  ).not.toBeInTheDocument();
+  expect(screen.queryByText('2 of 3 friends joined')).not.toBeInTheDocument();
+});
+
 it('should render the 3-invites promo with the progress at zero', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(0);
   renderComponent();
 
@@ -157,13 +173,15 @@ it('should render the 3-invites promo with the progress at zero', async () => {
 });
 
 it('should reflect partial progress from the referral campaign', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(2);
   renderComponent();
 
   expect(await screen.findByText('2 of 3 friends joined')).toBeInTheDocument();
 });
 
 it('should show the unlocked state once three friends joined', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(3);
   renderComponent();
 
@@ -174,6 +192,7 @@ it('should show the unlocked state once three friends joined', async () => {
 });
 
 it('should keep the unlocked copy count-agnostic beyond the goal', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(12);
   renderComponent();
 
@@ -185,6 +204,7 @@ it('should keep the unlocked copy count-agnostic beyond the goal', async () => {
 });
 
 it('should run the free month from the join date of the third referral', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(3);
   renderComponent(loggedUser, [
     // Deliberately out of order — the period is derived from the third
@@ -199,6 +219,7 @@ it('should run the free month from the join date of the third referral', async (
 });
 
 it('should fill the progress slots with the referred users avatars', async () => {
+  mockedFeatures.set(featureReferralPlusReward, true);
   mockReferralCampaign(2);
   renderComponent(loggedUser, [
     referredUser('ref-1', 'idakern'),

packages/webapp/pages/settings/invite.tsx

@@ -45,7 +45,10 @@ import {
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { usePlusSubscription } from '@dailydotdev/shared/src/hooks/usePlusSubscription';
 import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
-import { featureGiveback } from '@dailydotdev/shared/src/lib/featureManagement';
+import {
+  featureGiveback,
+  featureReferralPlusReward,
+} from '@dailydotdev/shared/src/lib/featureManagement';
 import {
   INVITE_GOAL,
   InviteRewardProgress,
@@ -76,6 +79,10 @@ const AccountInvitePage = (): ReactElement => {
     feature: featureGiveback,
     shouldEvaluate: !!user,
   });
+  const { value: isRewardEnabled } = useConditionalFeature({
+    feature: featureReferralPlusReward,
+    shouldEvaluate: !!user,
+  });
   const usersResult = useInfiniteQuery<ReferredUsersData>({
     queryKey: referredKey,
     queryFn: ({ pageParam }) =>
@@ -147,11 +154,18 @@ const AccountInvitePage = (): ReactElement => {
     });
   };
 
-  // The card below already announces the reward, so the unlocked copy only has
-  // to give a reason to keep going.
-  const rewardDescription = isRewardUnlocked
-    ? 'Keep inviting. Every developer you bring makes the feed sharper.'
-    : `When ${INVITE_GOAL} developers join daily.dev through your link, your free month of Plus starts.`;
+  const getRewardDescription = () => {
+    if (!isRewardEnabled) {
+      return "Share daily.dev with developers you know. When they join through your link, they'll show up in your referrals below.";
+    }
+
+    // The card below already announces the reward, so the unlocked copy only
+    // has to give a reason to keep going.
+    return isRewardUnlocked
+      ? 'Keep inviting. Every developer you bring makes the feed sharper.'
+      : `When ${INVITE_GOAL} developers join daily.dev through your link, your free month of Plus starts.`;
+  };
+  const rewardDescription = getRewardDescription();
 
   const onGivebackClick = () => {
     logEvent({
@@ -164,10 +178,14 @@ const AccountInvitePage = (): ReactElement => {
     <AccountPageContainer title="Invite friends">
       <AccountContentSection
         className={{ heading: 'mt-0' }}
-        title={`Invite ${INVITE_GOAL} friends, get 1 month of Plus`}
+        title={
+          isRewardEnabled
+            ? `Invite ${INVITE_GOAL} friends, get 1 month of Plus`
+            : 'Grow the community'
+        }
         description={rewardDescription}
       >
-        {isPlus && !isRewardUnlocked && (
+        {isRewardEnabled && isPlus && !isRewardUnlocked && (
           <Typography
             className="mt-1"
             type={TypographyType.Footnote}
@@ -176,12 +194,14 @@ const AccountInvitePage = (): ReactElement => {
             Already on Plus? The free month is added to your subscription.
           </Typography>
         )}
-        <InviteRewardProgress
-          className="mt-4"
-          joinedCount={referredUsersCount}
-          referredUsers={users}
-          rewardPeriod={rewardPeriod}
-        />
+        {isRewardEnabled && (
+          <InviteRewardProgress
+            className="mt-4"
+            joinedCount={referredUsersCount}
+            referredUsers={users}
+            rewardPeriod={rewardPeriod}
+          />
+        )}
       </AccountContentSection>
       <AccountContentSection title="Your invitation link">
         <InviteLinkInput