feat(referral): redesign the invite friends settings page

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

@@ -22,6 +22,7 @@ import {
   AddUserIcon,
   SquadIcon,
   MegaphoneIcon,
+  DevPlusIcon,
 } from '../icons';
 import type { NotificationPromptSource } from '../../lib/log';
 import { BookmarkReminderIcon } from '../icons/Bookmark/Reminder';
@@ -98,6 +99,8 @@ export enum NotificationType {
   WarmIntro = 'warm_intro',
   ExperienceCompanyEnriched = 'experience_company_enriched',
   LiveRoomStarted = 'live_room_started',
+  ReferralFriendJoined = 'referral_friend_joined',
+  ReferralPlusUnlocked = 'referral_plus_unlocked',
 }
 
 export enum NotificationIconType {
@@ -118,6 +121,7 @@ export enum NotificationIconType {
   Core = 'Core',
   Analytics = 'Analytics',
   Opportunity = 'Opportunity',
+  DevPlus = 'DevPlus',
 }
 
 export const notificationIcon: Record<
@@ -141,6 +145,7 @@ export const notificationIcon: Record<
   [NotificationIconType.Core]: CoreIcon,
   [NotificationIconType.Analytics]: AnalyticsIcon,
   [NotificationIconType.Opportunity]: JobIcon,
+  [NotificationIconType.DevPlus]: DevPlusIcon,
 };
 
 export const notificationIconAsPrimary: NotificationIconType[] = [
@@ -166,6 +171,7 @@ export const notificationIconTypeTheme: Record<NotificationIconType, string> = {
   [NotificationIconType.Core]: '',
   [NotificationIconType.Analytics]: 'text-brand-default',
   [NotificationIconType.Opportunity]: 'text-black',
+  [NotificationIconType.DevPlus]: 'text-action-plus-default',
 };
 
 export const notificationIconStyle: Record<
@@ -189,6 +195,7 @@ export const notificationIconStyle: Record<
   [NotificationIconType.Core]: null,
   [NotificationIconType.Analytics]: null,
   [NotificationIconType.Opportunity]: { background: briefButtonBg },
+  [NotificationIconType.DevPlus]: null,
 };
 
 export const notificationTypeTheme: Partial<Record<NotificationType, string>> =
@@ -430,6 +437,8 @@ export const notificationCategoryToTypes: Record<
     NotificationType.WarmIntro,
     NotificationType.ExperienceCompanyEnriched,
     NotificationType.LiveRoomStarted,
+    NotificationType.ReferralFriendJoined,
+    NotificationType.ReferralPlusUnlocked,
   ],
 };
 

packages/shared/src/components/referral/InviteLinkInput.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import type { TextFieldProps } from '../fields/TextField';
 import { TextField } from '../fields/TextField';
 import { useCopyLink } from '../../hooks/useCopy';
 import { useLogContext } from '../../contexts/LogContext';
@@ -17,7 +18,13 @@ interface InviteLinkInputProps {
   text?: Text;
   onCopy?: () => void;
   className?: FieldClassName;
-  logProps: LogEvent;
+  // Logged on copy. Only the built-in button copies, so surfaces that pass
+  // their own `actionButton` log from there instead.
+  logProps?: LogEvent;
+  // Replaces the built-in copy button, for surfaces that need a richer control
+  // (e.g. the split copy/share button). Optional so every other consumer keeps
+  // its original button and copy handling.
+  actionButton?: TextFieldProps['actionButton'];
 }
 
 export function InviteLinkInput({
@@ -26,12 +33,16 @@ export function InviteLinkInput({
   onCopy,
   className,
   logProps,
+  actionButton,
 }: InviteLinkInputProps): ReactElement {
   const [copied, onCopyLink] = useCopyLink(() => link);
   const { logEvent } = useLogContext();
   const onCopyClick = () => {
     onCopyLink();
-    logEvent(logProps);
+
+    if (logProps) {
+      logEvent(logProps);
+    }
 
     if (onCopy) {
       onCopy();
@@ -56,13 +67,15 @@ export function InviteLinkInput({
       value={link}
       fieldType="tertiary"
       actionButton={
-        <Button
-          size={ButtonSize.Small}
-          variant={ButtonVariant.Primary}
-          onClick={onCopyClick}
-        >
-          {renderText()}
-        </Button>
+        actionButton ?? (
+          <Button
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Primary}
+            onClick={onCopyClick}
+          >
+            {renderText()}
+          </Button>
+        )
       }
       readOnly
     />

packages/shared/src/components/referral/InviteRewardProgress.tsx

@@ -0,0 +1,177 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { format } from 'date-fns';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../typography/Typography';
+import { ProfileImageSize, ProfilePicture } from '../ProfilePicture';
+import { AddUserIcon, DevPlusIcon, VIcon } from '../icons';
+import { IconSize } from '../Icon';
+import type { UserShortProfile } from '../../lib/user';
+
+export const INVITE_GOAL = 3;
+
+export interface InviteRewardPeriod {
+  startsAt: Date;
+  endsAt: Date;
+}
+
+interface InviteRewardProgressProps {
+  // The raw number of developers who joined. Values outside 0..INVITE_GOAL are
+  // clamped here, so callers can pass the referral count as-is.
+  joinedCount: number;
+  referredUsers: UserShortProfile[];
+  // When the free month runs. Optional: the referral list can still be loading
+  // when the count already says the goal is met, and the unlocked state reads
+  // fine without it.
+  rewardPeriod?: InviteRewardPeriod;
+  className?: string;
+}
+
+const formatRewardDate = (date: Date): string => format(date, 'd MMM yyyy');
+
+// The row of avatars/slots, one per friend needed. Filled slots use the same
+// rounded-rect radius as ProfilePicture so filled and empty share a silhouette.
+const InviteSlots = ({
+  joined,
+  referredUsers,
+  // The unlocked card keeps the row as a footnote under the reward, so it runs
+  // one size down from the standalone tracker.
+  isCompact = false,
+}: {
+  joined: number;
+  referredUsers: UserShortProfile[];
+  isCompact?: boolean;
+}): ReactElement => (
+  // The caption states the progress and every referred developer is named in
+  // the list further down the page, so the slot row is presentational.
+  <div
+    aria-hidden
+    className={classNames(
+      'flex flex-wrap items-center',
+      isCompact ? 'gap-1.5' : 'gap-2',
+    )}
+  >
+    {Array.from({ length: INVITE_GOAL }, (_, index) => {
+      const isFilled = index < joined;
+      const referredUser = referredUsers[index];
+
+      if (isFilled && referredUser) {
+        return (
+          <ProfilePicture
+            key={`invite-slot-${index}`}
+            user={referredUser}
+            size={isCompact ? ProfileImageSize.Small : ProfileImageSize.Medium}
+          />
+        );
+      }
+
+      return (
+        <span
+          key={`invite-slot-${index}`}
+          className={classNames(
+            'flex items-center justify-center',
+            isCompact ? 'size-6 rounded-8' : 'size-8 rounded-10',
+            isFilled
+              ? 'bg-surface-float text-text-secondary'
+              : 'border border-dashed border-border-subtlest-primary text-text-quaternary',
+          )}
+        >
+          {isFilled ? <VIcon /> : <AddUserIcon secondary />}
+        </span>
+      );
+    })}
+  </div>
+);
+
+// The referral reward tracker. While the goal is open it stays a quiet one-line
+// row; once it's met the reward is the point of the section, so it becomes a
+// full-width Plus-accented card that names the reward and when it runs.
+export const InviteRewardProgress = ({
+  joinedCount,
+  referredUsers,
+  rewardPeriod,
+  className,
+}: InviteRewardProgressProps): ReactElement => {
+  const joined = Math.min(Math.max(0, joinedCount), INVITE_GOAL);
+  const isCompleted = joined >= INVITE_GOAL;
+
+  if (isCompleted) {
+    return (
+      <div
+        className={classNames(
+          'w-full rounded-16 bg-action-plus-float p-3',
+          className,
+        )}
+      >
+        <div className="flex items-start gap-2.5">
+          <span className="relative shrink-0 motion-safe:animate-reward-pop">
+            <span className="grid size-8 place-items-center rounded-10 bg-action-plus-default text-white">
+              <DevPlusIcon secondary size={IconSize.XSmall} />
+            </span>
+            {/* The "earned it" mark, notched into the corner the way a badge
+                sits on an avatar. */}
+            <span className="absolute -bottom-0.5 -right-0.5 grid size-4 place-items-center rounded-full border-2 border-background-default bg-status-success text-white">
+              <VIcon size={IconSize.XXSmall} />
+            </span>
+          </span>
+          <div className="flex min-w-0 flex-1 flex-col">
+            <Typography type={TypographyType.Body} bold>
+              1 month of Plus unlocked
+            </Typography>
+            {rewardPeriod && (
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+              >
+                <time dateTime={rewardPeriod.startsAt.toISOString()}>
+                  {formatRewardDate(rewardPeriod.startsAt)}
+                </time>
+                {' – '}
+                <time dateTime={rewardPeriod.endsAt.toISOString()}>
+                  {formatRewardDate(rewardPeriod.endsAt)}
+                </time>
+              </Typography>
+            )}
+          </div>
+        </div>
+        <div className="mt-2.5 flex items-center gap-2 border-t border-border-subtlest-tertiary pt-2.5">
+          <InviteSlots
+            isCompact
+            joined={joined}
+            referredUsers={referredUsers}
+          />
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            All {INVITE_GOAL} friends joined
+          </Typography>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames('flex flex-col items-start gap-2', className)}>
+      <Typography
+        type={TypographyType.Footnote}
+        color={TypographyColor.Tertiary}
+      >
+        {joined} of {INVITE_GOAL} friends joined
+      </Typography>
+      <div className="flex flex-wrap items-center gap-2">
+        <InviteSlots joined={joined} referredUsers={referredUsers} />
+        {/* The connector is the first thing to go on narrow phones, where the
+            slots and the reward chip only just fit on one line. */}
+        <span className="hidden h-px w-3 bg-border-subtlest-tertiary mobileL:block" />
+        <span className="flex h-8 items-center gap-1 rounded-10 border border-transparent bg-action-plus-float px-3 font-bold text-action-plus-default typo-footnote">
+          <DevPlusIcon secondary size={IconSize.Size16} />1 month of Plus
+        </span>
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/share/CopyStateIcon.tsx

@@ -0,0 +1,47 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { CopyIcon, VIcon } from '../icons';
+import type { IconProps } from '../Icon';
+
+/**
+ * easeOutExpo — the curve the design-system dropdown animates on. It
+ * decelerates into the target with no overshoot, which is what keeps a swap
+ * from reading as a wobble.
+ */
+export const EASE_OUT_EXPO = 'ease-[cubic-bezier(0.16,1,0.3,1)]';
+
+/**
+ * A copy is a rare, deliberate moment, so the confirmation earns real motion.
+ * Both glyphs share one grid cell so the label never shifts mid-swap, and the
+ * transition collapses to an instant swap under `prefers-reduced-motion`.
+ */
+export const CopyStateIcon = ({
+  copied,
+  className,
+  ...props
+}: IconProps & { copied: boolean }): ReactElement => {
+  const layer = classNames(
+    className,
+    'col-start-1 row-start-1 transition-[opacity,transform,filter] duration-200 motion-reduce:transition-none',
+    EASE_OUT_EXPO,
+  );
+
+  return (
+    <span className="inline-grid">
+      <CopyIcon
+        {...props}
+        className={classNames(layer, copied && 'scale-50 opacity-0 blur-[2px]')}
+      />
+      <VIcon
+        {...props}
+        secondary
+        className={classNames(
+          layer,
+          'text-status-success',
+          !copied && 'scale-50 opacity-0 blur-[2px]',
+        )}
+      />
+    </span>
+  );
+};