paywall fixes (#142366) (#142393)

(cherry picked from commit 764fe0ae43)

Co-authored-by: Steph Milovic <stephanie.milovic@elastic.co>

x-pack/plugins/security_solution/public/common/components/paywall/index.tsx

@@ -14,13 +14,15 @@ import {
   EuiText,
   EuiButton,
   EuiTextColor,
+  EuiImage,
 } from '@elastic/eui';
 import styled from 'styled-components';
 import { useNavigation } from '../../lib/kibana';
 import * as i18n from './translations';
+import paywallPng from '../../images/entity_paywall.png';
 
 const PaywallDiv = styled.div`
-  max-width: 85%;
+  max-width: 75%;
   margin: 0 auto;
   .euiCard__betaBadgeWrapper {
     .euiCard__betaBadge {
@@ -31,8 +33,15 @@ const PaywallDiv = styled.div`
     padding: 0 15%;
   }
 `;
+const StyledEuiCard = styled(EuiCard)`
+  span.euiTitle {
+    max-width: 540px;
+    display: block;
+    margin: 0 auto;
+  }
+`;
 
-export const Paywall = memo(({ featureDescription }: { featureDescription?: string }) => {
+export const Paywall = memo(({ heading }: { heading?: string }) => {
   const { getAppUrl, navigateTo } = useNavigation();
   const subscriptionUrl = getAppUrl({
     appId: 'management',
@@ -43,25 +52,24 @@ export const Paywall = memo(({ featureDescription }: { featureDescription?: stri
   }, [navigateTo, subscriptionUrl]);
   return (
     <PaywallDiv>
-      <EuiCard
+      <StyledEuiCard
         data-test-subj="platinumCard"
         betaBadgeProps={{ label: i18n.PLATINUM }}
         icon={<EuiIcon size="xl" type="lock" />}
         display="subdued"
         title={
           <h3>
-            <strong>{i18n.UPGRADE_CTA}</strong>
+            <strong>{heading}</strong>
           </h3>
         }
         description={false}
+        paddingSize="xl"
       >
         <EuiFlexGroup className="platinumCardDescription" direction="column" gutterSize="none">
           <EuiText>
             <EuiFlexItem>
               <p>
-                <EuiTextColor color="subdued">
-                  {i18n.UPGRADE_MESSAGE(featureDescription)}
-                </EuiTextColor>
+                <EuiTextColor color="subdued">{i18n.UPGRADE_MESSAGE}</EuiTextColor>
               </p>
             </EuiFlexItem>
             <EuiFlexItem>
@@ -73,7 +81,12 @@ export const Paywall = memo(({ featureDescription }: { featureDescription?: stri
             </EuiFlexItem>
           </EuiText>
         </EuiFlexGroup>
-      </EuiCard>
+      </StyledEuiCard>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiImage alt={i18n.UPGRADE_MESSAGE} src={paywallPng} size="fullWidth" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </PaywallDiv>
   );
 });

x-pack/plugins/security_solution/public/common/components/paywall/translations.ts

@@ -11,17 +11,10 @@ export const PLATINUM = i18n.translate('xpack.securitySolution.paywall.platinum'
   defaultMessage: 'Platinum',
 });
 
-export const UPGRADE_CTA = i18n.translate('xpack.securitySolution.paywall.upgradeButton', {
-  defaultMessage: 'Available from Platinum',
+export const UPGRADE_MESSAGE = i18n.translate('xpack.securitySolution.paywall.upgradeMessage', {
+  defaultMessage: 'This feature is available with Platinum or higher subscription',
 });
 
-export const UPGRADE_MESSAGE = (description?: string) =>
-  i18n.translate('xpack.securitySolution.paywall.upgradeMessage', {
-    values: { description: description ? description : 'this feature' },
-    defaultMessage:
-      'To turn use {description}, you must upgrade your license to Platinum, start a free 30-days trial, or spin up a cloud deployment on AWS, GCP, or Azure.',
-  });
-
-export const UPGRADE_BUTTON = i18n.translate('xpack.securitySolution.paywall.upgradeCta', {
+export const UPGRADE_BUTTON = i18n.translate('xpack.securitySolution.paywall.upgradeButton', {
   defaultMessage: 'Upgrade to Platinum',
 });

x-pack/plugins/security_solution/public/overview/pages/entity_analytics.tsx

@@ -45,7 +45,7 @@ const EntityAnalyticsComponent = () => {
               )}
             </HeaderPage>
             {!isPlatinumOrTrialLicense && capabilitiesFetched ? (
-              <Paywall featureDescription={i18n.ENTITY_ANALYTICS_LICENSE_DESC} />
+              <Paywall heading={i18n.ENTITY_ANALYTICS_LICENSE_DESC} />
             ) : isSourcererLoading ? (
               <EuiLoadingSpinner size="l" data-test-subj="entityAnalyticsLoader" />
             ) : (

x-pack/plugins/security_solution/public/overview/pages/translations.ts

@@ -53,7 +53,8 @@ export const DETECTION_RESPONSE_TITLE = i18n.translate(
 export const ENTITY_ANALYTICS_LICENSE_DESC = i18n.translate(
   'xpack.securitySolution.entityAnalytics.pageDesc',
   {
-    defaultMessage: 'Entity Analytics features',
+    defaultMessage:
+      'Detect threats from users and devices within your network with Entity Analytics',
   }
 );