From 3db897781f3bddde55808a7ffb7130ce2d862dba Mon Sep 17 00:00:00 2001
From: Wes Copeland <wlcopeland1@gmail.com>
Date: Tue, 21 Jan 2025 15:59:16 -0500
Subject: [PATCH] fix(AchievementOfTheWeek): apply gold unlock border
 conditionally

---
 .../AchievementOfTheWeek.test.tsx             | 50 +++++++++++++++++++
 .../AchievementOfTheWeek.tsx                  |  1 +
 2 files changed, 51 insertions(+)

diff --git a/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.test.tsx b/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.test.tsx
index 484cac279c..783112d417 100644
--- a/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.test.tsx
+++ b/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.test.tsx
@@ -253,4 +253,54 @@ describe('Component: AchievementOfTheWeek', () => {
     expect(screen.queryByText(/ends/i)).not.toBeInTheDocument();
     expect(screen.queryByText(/from now/i)).not.toBeInTheDocument();
   });
+
+  it('given the user has unlocked the achievement of the week, gives the achievement badge a border', () => {
+    // ARRANGE
+    const sourceAchievement = createAchievement({
+      id: 9,
+      title: 'That Was Easy',
+      description: 'foo',
+    });
+    const achievementOfTheWeek = createAchievementOfTheWeekProps({
+      currentEventAchievement: createEventAchievement({
+        achievement: sourceAchievement,
+        sourceAchievement,
+        activeUntil: undefined,
+      }),
+      doesUserHaveUnlock: true, // !!
+    });
+
+    render<App.Http.Data.HomePageProps>(<AchievementOfTheWeek />, {
+      pageProps: createHomePageProps({ achievementOfTheWeek }),
+    });
+
+    // ASSERT
+    const imgEl = screen.getByRole('img', { name: /that was easy/i });
+    expect(imgEl).toHaveClass('outline outline-[gold]');
+  });
+
+  it('given the user has not unlocked the achievement of the week, does not give the achievement badge a border', () => {
+    // ARRANGE
+    const sourceAchievement = createAchievement({
+      id: 9,
+      title: 'That Was Easy',
+      description: 'foo',
+    });
+    const achievementOfTheWeek = createAchievementOfTheWeekProps({
+      currentEventAchievement: createEventAchievement({
+        achievement: sourceAchievement,
+        sourceAchievement,
+        activeUntil: undefined,
+      }),
+      doesUserHaveUnlock: false, // !!
+    });
+
+    render<App.Http.Data.HomePageProps>(<AchievementOfTheWeek />, {
+      pageProps: createHomePageProps({ achievementOfTheWeek }),
+    });
+
+    // ASSERT
+    const imgEl = screen.getByRole('img', { name: /that was easy/i });
+    expect(imgEl).not.toHaveClass('outline outline-[gold]');
+  });
 });
diff --git a/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.tsx b/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.tsx
index 39cfc5533a..19a14a06bf 100644
--- a/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.tsx
+++ b/resources/js/features/home/components/+sidebar/AchievementOfTheWeek/AchievementOfTheWeek.tsx
@@ -44,6 +44,7 @@ export const AchievementOfTheWeek: FC = () => {
                 hasTooltip={false}
                 size={64}
                 showLabel={false}
+                showHardcoreUnlockBorder={achievementOfTheWeek?.doesUserHaveUnlock}
               />
 
               <div className="flex flex-col gap-0.5 self-start">