From 6f5c92fc79da4dc4a2bbd250078842f3855c4ebc Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Mon, 16 Jun 2025 08:00:17 -0400
Subject: [PATCH] MM-64591 Fix contact sales button in banner (#31425)

---
 .../feature_discovery/feature_discovery.tsx         |  1 +
 .../__snapshots__/configuration_bar.test.tsx.snap   |  4 ++++
 .../configuration_bar/configuration_bar.tsx         | 11 +++++++++--
 .../purchase_link/purchase_link.tsx                 |  9 ++++++++-
 .../announcement_bar/renewal_link/renew_link.scss   | 13 +------------
 .../announcement_bar/renewal_link/renewal_link.tsx  |  9 ++++++++-
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
index e19baafbe5..994b307574 100644
--- a/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
+++ b/webapp/channels/src/components/admin_console/feature_discovery/feature_discovery.tsx
@@ -123,6 +123,7 @@ export default class FeatureDiscovery extends React.PureComponent<Props, State>
             <div className='purchase-card'>
                 <>
                     <PurchaseLink
+                        className='btn btn-primary btn-lg'
                         eventID='post_trial_purchase_license'
                         buttonTextElement={
                             <FormattedMessage
diff --git a/webapp/channels/src/components/announcement_bar/configuration_bar/__snapshots__/configuration_bar.test.tsx.snap b/webapp/channels/src/components/announcement_bar/configuration_bar/__snapshots__/configuration_bar.test.tsx.snap
index e1c37b2160..06bae5f9d5 100644
--- a/webapp/channels/src/components/announcement_bar/configuration_bar/__snapshots__/configuration_bar.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/configuration_bar/__snapshots__/configuration_bar.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`components/ConfigurationBar should match snapshot, expired 1`] = `
         />
       </React.Fragment>
       <Memo(Connect(RenewalLink))
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense"
         telemetryInfo={
           Object {
             "error": "renew_license_banner_fail",
@@ -79,6 +80,7 @@ exports[`components/ConfigurationBar should match snapshot, expired, in grace pe
         />
       </React.Fragment>
       <Memo(Connect(RenewalLink))
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense"
         telemetryInfo={
           Object {
             "error": "renew_license_banner_fail",
@@ -156,6 +158,7 @@ exports[`components/ConfigurationBar should match snapshot, expiring, trial lice
             id="announcement_bar.error.purchase_a_license_now"
           />
         }
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow"
       />
     </div>
   }
@@ -194,6 +197,7 @@ exports[`components/ConfigurationBar should match snapshot, expiring, trial lice
             id="announcement_bar.error.purchase_a_license_now"
           />
         }
+        className="btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow"
       />
     </div>
   }
diff --git a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
index bccd252ca4..e0ae88512e 100644
--- a/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/configuration_bar/configuration_bar.tsx
@@ -98,7 +98,10 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                     message={
                         <div className='announcement-bar__configuration'>
                             {message}
-                            <RenewalLink telemetryInfo={renewLinkTelemetry}/>
+                            <RenewalLink
+                                className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense'
+                                telemetryInfo={renewLinkTelemetry}
+                            />
                         </div>
                     }
                     tooltipMsg={message}
@@ -112,6 +115,7 @@ const ConfigurationAnnouncementBar = (props: Props) => {
         if (isTrialLicense(props.license) && typeof daysUntilLicenseExpires !== 'undefined' && daysUntilLicenseExpires <= 14 && !props.dismissedExpiringTrialLicense) {
             const purchaseLicense = (
                 <PurchaseLink
+                    className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__purchaseNow'
                     buttonTextElement={
                         <FormattedMessage
                             id='announcement_bar.error.purchase_a_license_now'
@@ -200,7 +204,10 @@ const ConfigurationAnnouncementBar = (props: Props) => {
                     message={
                         <div className='announcement-bar__configuration'>
                             {message}
-                            <RenewalLink telemetryInfo={renewLinkTelemetry}/>
+                            <RenewalLink
+                                className='btn btn-tertiary btn-xs btn-inverted annnouncementBar__renewLicense'
+                                telemetryInfo={renewLinkTelemetry}
+                            />
                         </div>
                     }
                     tooltipMsg={message}
diff --git a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
index f946416b88..fa2c2c8a05 100644
--- a/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
+++ b/webapp/channels/src/components/announcement_bar/purchase_link/purchase_link.tsx
@@ -12,6 +12,7 @@ import './purchase_link.scss';
 export interface Props {
     buttonTextElement: JSX.Element;
     eventID?: string;
+    className?: string;
 }
 
 const PurchaseLink: React.FC<Props> = (props: Props) => {
@@ -24,10 +25,16 @@ const PurchaseLink: React.FC<Props> = (props: Props) => {
         openSalesLink();
     };
 
+    // Default classes for feature discovery context
+    const defaultClassName = 'btn btn-primary';
+
+    // Use provided className or default
+    const buttonClassName = props.className || defaultClassName;
+
     return (
         <button
             id={props.eventID}
-            className={'btn btn-primary btn-lg announcementBar__purchaseNow'}
+            className={buttonClassName}
             onClick={handlePurchaseLinkClick}
         >
             {props.buttonTextElement}
diff --git a/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss b/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss
index b65946b4bb..8101e8b8a5 100644
--- a/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss
+++ b/webapp/channels/src/components/announcement_bar/renewal_link/renew_link.scss
@@ -2,16 +2,5 @@
 
 .annnouncementBar__renewLicense {
     display: block;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 4px;
-    margin-top: 15px;
-    background: var(--sys-button-bg);
-    color: var(--sys-button-color);
-
-    span {
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 14px;
-    }
+    margin-left: 8px;
 }
diff --git a/webapp/channels/src/components/announcement_bar/renewal_link/renewal_link.tsx b/webapp/channels/src/components/announcement_bar/renewal_link/renewal_link.tsx
index 9256097a46..7a27d359ed 100644
--- a/webapp/channels/src/components/announcement_bar/renewal_link/renewal_link.tsx
+++ b/webapp/channels/src/components/announcement_bar/renewal_link/renewal_link.tsx
@@ -17,6 +17,7 @@ export interface RenewalLinkProps {
     };
     isDisabled?: boolean;
     customBtnText?: JSX.Element;
+    className?: string;
 }
 
 const RenewalLink = (props: RenewalLinkProps) => {
@@ -34,9 +35,15 @@ const RenewalLink = (props: RenewalLinkProps) => {
         />
     );
 
+    // Default classes for general context
+    const defaultClassName = 'btn btn-primary';
+
+    // Use provided className or default
+    const buttonClassName = props.className || defaultClassName;
+
     return (
         <button
-            className='btn btn-primary annnouncementBar__renewLicense'
+            className={buttonClassName}
             disabled={props.isDisabled}
             onClick={(e) => handleLinkClick(e)}
         >