Change title and description of the key activation settings tab

This commit changes the text of the title and the description of the key
activation settings tab to hopefully make it more clear the meaning of the
key and what they should do if they don't have one or if they are unsure
where they can get their key.

[MAILPOET-4749]

mailpoet/assets/js/src/settings/pages/key_activation/key_activation.tsx

@@ -10,6 +10,7 @@ import { Input } from 'common/form/input/input';
 import { KeyActivationState, MssStatus } from 'settings/store/types';
 import { Inputs, Label } from 'settings/components';
 import { SetFromAddressModal } from 'common/set_from_address_modal';
+import ReactStringReplace from 'react-string-replace';
 import {
   KeyMessages,
   MssMessages,
@@ -81,7 +82,11 @@ function Messages(
   );
 }
 
-export function KeyActivation() {
+type Props = {
+  subscribersCount: number;
+};
+
+export function KeyActivation({ subscribersCount }: Props) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { notices } = useContext<any>(GlobalContext);
   const state = useSelector('getKeyActivationState')();
@@ -147,7 +152,53 @@ export function KeyActivation() {
       <Label
         htmlFor="mailpoet_premium_key"
         title={t('premiumTabActivationKeyLabel')}
-        description={t('premiumTabDescription')}
+        description={
+          <>
+            {ReactStringReplace(
+              t('premiumTabDescription'),
+              /\[link\](.*?)\[\/link\]/g,
+              (text) => (
+                <a
+                  href="https://account.mailpoet.com/account?utm_source=plugin&utm_medium=settings&utm_campaign=activate-existing-plan&ref=settings-key-activation"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {text}
+                </a>
+              ),
+            )}
+            <br />
+            <br />
+            {ReactStringReplace(
+              t('premiumTabGetKey'),
+              /\[link\](.*?)\[\/link\]/g,
+              (text) => (
+                <a
+                  href="https://account.mailpoet.com/account?utm_source=plugin&utm_medium=settings&utm_campaign=activate-existing-plan&ref=settings-key-activation"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {text}
+                </a>
+              ),
+            )}
+            <br />
+            <br />
+            {ReactStringReplace(
+              t('premiumTabGetPlan'),
+              /\[link\](.*?)\[\/link\]/g,
+              (text) => (
+                <a
+                  href={`https://account.mailpoet.com/?s=${subscribersCount}&utm_source=plugin&utm_medium=settings&utm_campaign=create-new-plan&ref=settings-key-activation`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {text}
+                </a>
+              ),
+            )}
+          </>
+        }
       />
       <Inputs>
         <Input

mailpoet/assets/js/src/settings/settings.tsx

@@ -78,7 +78,7 @@ export function Settings() {
           title={t('keyActivationTab')}
           automationId="activation_settings_tab"
         >
-          <KeyActivation />
+          <KeyActivation subscribersCount={window.mailpoet_subscribers_count} />
         </Tab>
       </RoutedTabs>
     </>

mailpoet/views/settings.html

@@ -179,8 +179,10 @@
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),
     'announcementParagraph2': __('(You can turn this feature off if it’s too many emails.)'),
 
-    'premiumTabActivationKeyLabel': __('Activation Key', 'mailpoet'),
-    'premiumTabDescription': __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.', 'mailpoet'),
+    'premiumTabActivationKeyLabel': __('MailPoet Activation Key', 'mailpoet'),
+    'premiumTabDescription': __('Activate your [link]MailPoet plan[/link] to access advanced features like detailed analytics or subscriber segmentation, faster customer support and more.', 'mailpoet'),
+    'premiumTabGetKey': __('Already have a MailPoet plan? [link]Get your activation key[/link].', 'mailpoet'),
+    'premiumTabGetPlan': __('Don\'t yet have a plan? [link]Sign up for one[/link].', 'mailpoet'),
     'premiumTabNoKeyNotice': __('Please specify a license key before validating it.', 'mailpoet'),
     'premiumTabVerifyButton': __('Verify', 'mailpoet'),
     'premiumTabKeyValidMessage': __('Your key is valid', 'mailpoet'),