feat: add $250 credit message to upgrade button (#4447)

Author: TCL735

src/cloud/components/RateLimitAlertContent.tsx

@@ -93,6 +93,7 @@ export const UpgradeContent: FC<UpgradeProps> = ({
         <UpgradeMessage {...{limitText, link, type}} />
         <CloudUpgradeButton
           className="upgrade-payg--button__rate-alert"
+          showPromoMessage={false}
           metric={() => event(`user.limits.${type}.upgrade`, {location})}
         />
       </FlexBox>

src/shared/components/CloudUpgradeButton.tsx

@@ -15,19 +15,22 @@ import CloudOnly from 'src/shared/components/cloud/CloudOnly'
 
 // Utils
 import {shouldShowUpgradeButton} from 'src/me/selectors'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 interface OwnProps {
-  className?: string
   buttonText?: string
-  size?: ComponentSize
+  className?: string
   metric?: () => void
+  showPromoMessage?: boolean
+  size?: ComponentSize
 }
 
 const CloudUpgradeButton: FC<OwnProps> = ({
-  size = ComponentSize.Small,
-  className,
   buttonText = 'Upgrade Now',
+  className,
   metric,
+  showPromoMessage = true,
+  size = ComponentSize.Small,
 }) => {
   const showUpgradeButton = useSelector(shouldShowUpgradeButton)
 
@@ -44,22 +47,28 @@ const CloudUpgradeButton: FC<OwnProps> = ({
     history.push('/checkout')
   }
 
+  const promoMessage =
+    isFlagEnabled('credit250Experiment') && showPromoMessage ? (
+      <span className="credit-250-experiment-upgrade-button--text">
+        Get $250 free credit
+      </span>
+    ) : null
+
   return (
     <CloudOnly>
       {showUpgradeButton && (
-        <Button
-          icon={IconFont.CrownSolid_New}
-          className={cloudUpgradeButtonClass}
-          size={size}
-          shape={ButtonShape.Default}
-          onClick={handleClick}
-          text={buttonText}
-          style={{
-            background:
-              'linear-gradient(45deg, rgb(52, 187, 85) 0%, rgb(0, 163, 255) 100%)',
-          }}
-          testID="cloud-upgrade--button"
-        />
+        <span>
+          {promoMessage}
+          <Button
+            icon={IconFont.CrownSolid_New}
+            className={cloudUpgradeButtonClass}
+            size={size}
+            shape={ButtonShape.Default}
+            onClick={handleClick}
+            text={buttonText}
+            testID="cloud-upgrade--button"
+          />
+        </span>
       )}
     </CloudOnly>
   )

src/shared/components/cloud/CloudOnly.scss

@@ -91,6 +91,18 @@ a.upgrade-payg--button {
   background-image: url('~assets/images/dashboard-empty--dark.svg');
 }
 
+button.upgrade-payg--button {
+  background: linear-gradient(
+    45deg,
+    rgb(52, 187, 85) 0%,
+    rgb(0, 163, 255) 100%
+  );
+}
+
+.credit-250-experiment-upgrade-button--text {
+  margin: $cf-marg-c;
+}
+
 @media screen and (min-width: $cf-nav-menu--breakpoint) {
   .rate-alert {
     margin-left: $cf-space-l;