feat(achievements): show achievement rewards as XP

packages/shared/src/components/filters/AchievementTrackerButton.spec.tsx

@@ -99,7 +99,7 @@ const mockTrackedAchievement: UserAchievement = {
     image: 'https://daily.dev/ach1.png',
     type: AchievementType.Milestone,
     criteria: { targetCount: 5 },
-    points: 10,
+    xp: 10,
     rarity: null,
     unit: 'steps',
   },
@@ -123,7 +123,7 @@ const defaultProfileAchievementsHook = {
   achievements: [mockTrackedAchievement],
   unlockedCount: 0,
   totalCount: 1,
-  totalPoints: 0,
+  totalAchievementXp: 0,
   isPending: false,
   isError: false,
 };

packages/shared/src/components/modals/AchievementCompletionModal.tsx

@@ -209,7 +209,7 @@ export const AchievementCompletionModal = ({
                     {unlockedAchievement.achievement.description}
                   </Typography>
                   <div className="text-text-invert rounded-14 bg-accent-cabbage-default px-3 py-1 font-bold typo-subhead">
-                    +{unlockedAchievement.achievement.points} points
+                    +{unlockedAchievement.achievement.xp} XP
                   </div>
                 </div>
 
@@ -353,7 +353,7 @@ export const AchievementCompletionModal = ({
                           type={TypographyType.Footnote}
                           color={TypographyColor.Tertiary}
                         >
-                          {userAchievement.achievement.points} pts
+                          {userAchievement.achievement.xp} XP
                         </Typography>
                       </div>
                       <div className="rounded-sm mt-1 h-1.5 w-full overflow-hidden bg-accent-pepper-subtler">

packages/shared/src/components/modals/AchievementPickerModal.spec.tsx

@@ -27,7 +27,7 @@ const createLockedAchievement = (
     image: 'https://daily.dev/achievement.png',
     type: AchievementType.Milestone,
     criteria: { targetCount: 10 },
-    points: 50,
+    xp: 50,
     rarity: null,
     unit: null,
   },

packages/shared/src/components/modals/AchievementPickerModal.tsx

@@ -165,7 +165,7 @@ export const AchievementPickerModal = ({
                       type={TypographyType.Footnote}
                       color={TypographyColor.Tertiary}
                     >
-                      {userAchievement.achievement.points} pts
+                      {userAchievement.achievement.xp} XP
                     </Typography>
                   </div>
                   <ProgressBar

packages/shared/src/components/modals/AchievementShowcaseModal.tsx

@@ -54,7 +54,7 @@ export const AchievementShowcaseModal = ({
       if (aSelected !== bSelected) {
         return aSelected ? -1 : 1;
       }
-      return b.achievement.points - a.achievement.points;
+      return b.achievement.xp - a.achievement.xp;
     });
   }, [unlockedAchievements, initialSelectedIds]);
 
@@ -168,7 +168,7 @@ export const AchievementShowcaseModal = ({
                       type={TypographyType.Footnote}
                       color={TypographyColor.Tertiary}
                     >
-                      {userAchievement.achievement.points} pts
+                      {userAchievement.achievement.xp} XP
                     </Typography>
                     <div
                       className={classNames(

packages/shared/src/components/modals/achievement/CompareAchievementsModal.tsx

@@ -28,7 +28,7 @@ interface CompareAchievementsModalProps extends ModalProps {
 /**
  * Sorts achievements by the logged user's unlock status, matching AchievementsList:
  * 1. Unlocked first
- * 2. Among unlocked: rarest first, then highest points
+ * 2. Among unlocked: rarest first, then highest xp
  * 3. Among locked: highest progress ratio first
  */
 const sortByMyStatus = (
@@ -54,7 +54,7 @@ const sortByMyStatus = (
       if (rarityA !== rarityB) {
         return rarityA - rarityB;
       }
-      return b.achievement.points - a.achievement.points;
+      return b.achievement.xp - a.achievement.xp;
     }
 
     const targetA = getTargetCount(a.achievement);
@@ -112,7 +112,7 @@ export const CompareAchievementsModal = ({
     };
   }, [myAchievements, profileAchievements]);
 
-  const handleClose = (event?: React.MouseEvent | React.KeyboardEvent): void =>
+  const handleClose = (event: React.MouseEvent | React.KeyboardEvent): void =>
     onRequestClose?.(event);
 
   return (
@@ -127,7 +127,9 @@ export const CompareAchievementsModal = ({
       <Modal.Body className="flex flex-col gap-4">
         <div className="flex items-center justify-between px-2">
           <div className="flex flex-col items-center gap-1">
-            <ProfilePicture user={loggedUser} size={ProfileImageSize.Large} />
+            {loggedUser && (
+              <ProfilePicture user={loggedUser} size={ProfileImageSize.Large} />
+            )}
             <Typography
               type={TypographyType.Callout}
               bold
@@ -211,7 +213,7 @@ export const CompareAchievementsModal = ({
                         bold
                         className="shrink-0"
                       >
-                        {ua.achievement.points} pts
+                        {ua.achievement.xp} XP
                       </Typography>
                     </div>
                     <Typography

packages/shared/src/components/modals/achievement/sortAchievements.spec.ts

@@ -5,13 +5,13 @@ import { sortLockedAchievements } from './sortAchievements';
 const createAchievement = ({
   id,
   progress,
-  points,
+  xp,
   targetCount,
   unlockedAt = null,
 }: {
   id: string;
   progress: number;
-  points: number;
+  xp: number;
   targetCount: number;
   unlockedAt?: string | null;
 }): UserAchievement => ({
@@ -22,7 +22,7 @@ const createAchievement = ({
     image: 'https://daily.dev/default-achievement.png',
     type: AchievementType.Milestone,
     criteria: { targetCount },
-    points,
+    xp,
     rarity: null,
     unit: null,
   },
@@ -33,31 +33,31 @@ const createAchievement = ({
 });
 
 describe('sortLockedAchievements', () => {
-  it('should filter unlocked achievements and sort by ratio, progress, then points', () => {
+  it('should filter unlocked achievements and sort by ratio, progress, then xp', () => {
     const achievements: UserAchievement[] = [
       createAchievement({
         id: 'ratio-high',
         progress: 8,
         targetCount: 10,
-        points: 10,
+        xp: 10,
       }),
       createAchievement({
         id: 'ratio-equal-progress-high',
         progress: 6,
         targetCount: 10,
-        points: 5,
+        xp: 5,
       }),
       createAchievement({
-        id: 'ratio-equal-progress-low-points-high',
+        id: 'ratio-equal-progress-low-xp-high',
         progress: 6,
         targetCount: 10,
-        points: 50,
+        xp: 50,
       }),
       createAchievement({
         id: 'unlocked',
         progress: 10,
         targetCount: 10,
-        points: 100,
+        xp: 100,
         unlockedAt: new Date().toISOString(),
       }),
     ];
@@ -66,7 +66,7 @@ describe('sortLockedAchievements', () => {
 
     expect(sorted.map((item) => item.achievement.id)).toEqual([
       'ratio-high',
-      'ratio-equal-progress-low-points-high',
+      'ratio-equal-progress-low-xp-high',
       'ratio-equal-progress-high',
     ]);
   });

packages/shared/src/components/modals/achievement/sortAchievements.ts

@@ -26,6 +26,6 @@ export const sortLockedAchievements = (
         return b.progress - a.progress;
       }
 
-      return b.achievement.points - a.achievement.points;
+      return b.achievement.xp - a.achievement.xp;
     });
 };

packages/shared/src/features/profile/components/ProfileWidgets/AchievementSyncModal.tsx

@@ -98,7 +98,7 @@ const AchievementRevealCard = ({
         {achievement.achievement.description}
       </Typography>
       <Typography type={TypographyType.Subhead} bold>
-        +{achievement.achievement.points} points
+        +{achievement.achievement.xp} XP
       </Typography>
     </div>
   );
@@ -152,7 +152,7 @@ export const AchievementSyncModal = ({
       return;
     }
 
-    const baseScore = result.totalPoints - result.pointsGained;
+    const baseScore = result.totalAchievementXp - result.xpGained;
 
     setScore(baseScore);
     setCurrentIndex(0);
@@ -169,7 +169,7 @@ export const AchievementSyncModal = ({
 
     if (currentIndex >= result.newlyUnlockedAchievements.length) {
       setIsRevealComplete(true);
-      if (result.pointsGained > 0) {
+      if (result.xpGained > 0) {
         setShowSparkles(true);
       }
       return undefined;
@@ -182,8 +182,7 @@ export const AchievementSyncModal = ({
     const nextTimer = setTimeout(() => {
       setScore(
         (value) =>
-          value +
-          result.newlyUnlockedAchievements[currentIndex].achievement.points,
+          value + result.newlyUnlockedAchievements[currentIndex].achievement.xp,
       );
       setIsScoreShaking(true);
       setCurrentIndex((value) => value + 1);
@@ -230,7 +229,9 @@ export const AchievementSyncModal = ({
     logEvent({
       event_name: LogEvent.CompleteSyncAchievements,
       extra: JSON.stringify({
-        points_gained: result.pointsGained,
+        xp_gained: result.xpGained,
+        // kept so dashboards built on the points era keep reporting
+        points_gained: result.xpGained,
         newly_unlocked: result.newlyUnlockedAchievements.length,
       }),
     });
@@ -285,7 +286,7 @@ export const AchievementSyncModal = ({
             type={TypographyType.Footnote}
             color={TypographyColor.Tertiary}
           >
-            Achievement points
+            Achievement XP
           </Typography>
           <Typography
             type={TypographyType.LargeTitle}
@@ -340,8 +341,8 @@ export const AchievementSyncModal = ({
                 Sync complete
               </Typography>
               <Typography type={TypographyType.Title4} bold>
-                {result.pointsGained > 0
-                  ? `Congrats! +${result.pointsGained} points earned.`
+                {result.xpGained > 0
+                  ? `Congrats! +${result.xpGained} XP earned.`
                   : 'No new achievements unlocked this time.'}
               </Typography>
             </div>

packages/shared/src/features/profile/components/ProfileWidgets/AchievementsWidget.spec.tsx

@@ -24,13 +24,13 @@ const createUserAchievement = ({
   id,
   name,
   rarity,
-  points,
+  xp,
   unlockedAt = '2024-01-01T00:00:00.000Z',
 }: {
   id: string;
   name: string;
   rarity: number | null;
-  points: number;
+  xp: number;
   unlockedAt?: string | null;
 }): UserAchievement => ({
   achievement: {
@@ -39,7 +39,7 @@ const createUserAchievement = ({
     description: `${name} description`,
     image: `https://daily.dev/${id}.png`,
     type: AchievementType.Instant,
-    points,
+    xp,
     rarity,
     unit: null,
   },
@@ -84,52 +84,52 @@ describe('AchievementsWidget', () => {
         id: 'common',
         name: 'Common',
         rarity: 20,
-        points: 10,
+        xp: 10,
       }),
       createUserAchievement({
-        id: 'rarity-tie-low-points',
+        id: 'rarity-tie-low-xp',
         name: 'Rarity Tie Low Points',
         rarity: 5,
-        points: 10,
+        xp: 10,
       }),
       createUserAchievement({
         id: 'locked',
         name: 'Locked',
         rarity: 1,
-        points: 100,
+        xp: 100,
         unlockedAt: null,
       }),
       createUserAchievement({
         id: 'rare',
         name: 'Rare',
         rarity: 1,
-        points: 30,
+        xp: 30,
       }),
       createUserAchievement({
         id: 'unknown-rarity',
         name: 'Unknown Rarity',
         rarity: null,
-        points: 100,
+        xp: 100,
       }),
       createUserAchievement({
-        id: 'rarity-tie-high-points',
+        id: 'rarity-tie-high-xp',
         name: 'Rarity Tie High Points',
         rarity: 5,
-        points: 50,
+        xp: 50,
       }),
       createUserAchievement({
         id: 'uncommon',
         name: 'Uncommon',
         rarity: 5,
-        points: 20,
+        xp: 20,
       }),
     ];
 
     mockUseProfileAchievements.mockReturnValue({
       achievements,
       unlockedCount: 6,
       totalCount: achievements.length,
-      totalPoints: 220,
+      totalAchievementXp: 220,
       isPending: false,
       isError: false,
     });

packages/shared/src/features/profile/components/ProfileWidgets/AchievementsWidget.tsx

@@ -55,9 +55,9 @@ function RecentAchievements({
         return rarityA - rarityB;
       }
 
-      const pointsDelta = b.achievement.points - a.achievement.points;
-      if (pointsDelta !== 0) {
-        return pointsDelta;
+      const xpDelta = b.achievement.xp - a.achievement.xp;
+      if (xpDelta !== 0) {
+        return xpDelta;
       }
 
       const unlockedDateA = a.unlockedAt ? new Date(a.unlockedAt).getTime() : 0;

packages/shared/src/features/profile/components/achievements/AchievementCard.spec.tsx

@@ -15,7 +15,7 @@ const createLockedAchievement = (
     image: 'https://daily.dev/achievement.png',
     type: AchievementType.Milestone,
     criteria: { targetCount: 1 },
-    points: 10,
+    xp: 10,
     rarity: null,
     unit: null,
   },

packages/shared/src/features/profile/components/achievements/AchievementCard.tsx

@@ -129,7 +129,7 @@ export function AchievementCard({
             }
             bold
           >
-            {achievement.points}
+            {achievement.xp}
           </Typography>
         </div>
       </div>