fix: Updated trial upgrade banner to be closer to the design (#80)

* fix: Updated trial upgrade banner to be closer to the design * chore: Updated tests
edx · Jan 16, 2025 · 1b487b4 · 1b487b4
1 parent e9d4363
commit 1b487b4
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss
@@ -1,12 +1,12 @@
-@use '../../utils/variables';
+@use '../../utils/variables' as var;
 
 .sidebar {
   box-shadow: 0 0 1rem 0 #00000026,0 0 .625rem 0 #00000026;
   top: 0;
   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
@@ -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 < 1) { 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/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();
     });
   });
 

diff --git 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;