From 0535bea5fe6c60e4d20718d216f1d48853f613c3 Mon Sep 17 00:00:00 2001
From: Marcos <mrigoli@2u.com>
Date: Thu, 16 Jan 2025 14:00:35 -0300
Subject: [PATCH 1/2] fix: Updated trial upgrade banner to be closer to the
 design

---
 src/components/Sidebar/Sidebar.scss | 14 +++++++---
 src/components/Sidebar/index.jsx    | 40 ++++++++++++++---------------
 src/utils/_variables.scss           |  5 ++++
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
index 0e6e4b4..a033c41 100644
--- a/src/components/Sidebar/Sidebar.scss
+++ b/src/components/Sidebar/Sidebar.scss
@@ -1,4 +1,4 @@
-@use '../../utils/variables';
+@use '../../utils/variables' as var;
 
 .sidebar {
   box-shadow: 0 0 1rem 0 #00000026,0 0 .625rem 0 #00000026;
@@ -6,7 +6,7 @@
   right: 0;
   bottom: 0;
   z-index: 9999;
-  background-color: white;
+  background-color: var.$white;
   width: 100%;
   max-width: 25rem;
 
@@ -44,6 +44,14 @@
 
   .trial-header {
     font-size: 0.9em;
-    background-color: #F49974;
+    background-color: var.$brand-100;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    padding: 0.5rem 0.75rem;
+    color: var.$black;
+
+    a {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index f8cb8e2..a3af554 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -65,21 +65,22 @@ const Sidebar = ({
     </a>
   );
 
-  const getDaysRemainingMessage = () => { // eslint-disable-line consistent-return
-    if (auditTrialDaysRemaining > 1) {
-      const intlRelativeTime = new Intl.RelativeTimeFormat({ style: 'long' });
-      return (
-        <div data-testid="days-remaining-message">
-          Your trial ends {intlRelativeTime.format(auditTrialDaysRemaining, 'day')}. {getUpgradeLink()} for full access to Xpert.
-        </div>
-      );
-    } if (auditTrialDaysRemaining === 1) {
-      return (
-        <div data-testid="trial-ends-today-message">
-          Your trial ends today! {getUpgradeLink()} for full access to Xpert.
-        </div>
-      );
-    }
+  const getDaysRemainingMessage = () => {
+    if (!upgradeable || auditTrialDaysRemaining < 0) { return null; }
+
+    return (
+      <div className="trial-header" data-testid="get-days-remaining-message">
+        {auditTrialDaysRemaining === 1 ? (
+          <div data-testid="trial-ends-today-message">
+            Your trial ends today! {getUpgradeLink()} for full access to Xpert.
+          </div>
+        ) : (
+          <div data-testid="days-remaining-message">
+            {auditTrialDaysRemaining} days remaining. {getUpgradeLink()} for full access to Xpert.
+          </div>
+        )}
+      </div>
+    );
   };
 
   const getSidebar = () => (
@@ -90,12 +91,9 @@ const Sidebar = ({
       <div className="sidebar-header" data-testid="sidebar-xpert-header">
         <XpertLogo />
       </div>
-      {upgradeable
-        && (
-          <div className="p-3 trial-header" data-testid="get-days-remaining-message">
-            {getDaysRemainingMessage()}
-          </div>
-        )}
+
+      {getDaysRemainingMessage()}
+
       <ChatBox messageList={messageList} />
       {
         apiError
diff --git a/src/utils/_variables.scss b/src/utils/_variables.scss
index 25626ed..150796d 100644
--- a/src/utils/_variables.scss
+++ b/src/utils/_variables.scss
@@ -5,3 +5,8 @@ $accent-yellow: #f0cc00;
 $gray-200: #cccccc !default;
 $gray-300: #adadad !default;
 $gray-400: #8f8f8f !default;
+
+$brand-100: #F49974;
+
+$black: #000;
+$white: #fff;

From 2ab0d6805f43ea36ef467a9a481a8f773d7db8fd Mon Sep 17 00:00:00 2001
From: Marcos <mrigoli@2u.com>
Date: Thu, 16 Jan 2025 14:21:11 -0300
Subject: [PATCH 2/2] chore: Updated tests

---
 src/components/Sidebar/index.jsx      | 2 +-
 src/components/Sidebar/index.test.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar/index.jsx b/src/components/Sidebar/index.jsx
index a3af554..71e722c 100644
--- a/src/components/Sidebar/index.jsx
+++ b/src/components/Sidebar/index.jsx
@@ -66,7 +66,7 @@ const Sidebar = ({
   );
 
   const getDaysRemainingMessage = () => {
-    if (!upgradeable || auditTrialDaysRemaining < 0) { return null; }
+    if (!upgradeable || auditTrialDaysRemaining < 1) { return null; }
 
     return (
       <div className="trial-header" data-testid="get-days-remaining-message">
diff --git a/src/components/Sidebar/index.test.jsx b/src/components/Sidebar/index.test.jsx
index 2f6f542..5b81808 100644
--- a/src/components/Sidebar/index.test.jsx
+++ b/src/components/Sidebar/index.test.jsx
@@ -114,7 +114,7 @@ describe('<Sidebar />', () => {
       render(undefined, { disclosureAcknowledged: true });
       expect(screen.queryByTestId('sidebar-xpert')).toBeInTheDocument();
       expect(screen.queryByTestId('get-days-remaining-message')).toBeInTheDocument();
-      expect(screen.queryByTestId('trial-ends-today')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('trial-ends-today-message')).toBeInTheDocument();
     });
 
     it('should call track event on click', () => {
@@ -141,9 +141,9 @@ describe('<Sidebar />', () => {
       });
       render(undefined, { disclosureAcknowledged: true });
       expect(screen.queryByTestId('sidebar-xpert')).toBeInTheDocument();
-      expect(screen.queryByTestId('get-days-remaining-message')).toBeInTheDocument();
+      expect(screen.queryByTestId('get-days-remaining-message')).not.toBeInTheDocument();
       expect(screen.queryByTestId('days-remaining-message')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('trial-ends-today')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('trial-ends-today-message')).not.toBeInTheDocument();
     });
   });