Add KB link to the error message "Your MSS key is already used on another site"

MAILPOET-5162

mailpoet/assets/js/src/common/premium-key/key-messages/mss-messages.tsx

@@ -1,7 +1,9 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
+import ReactStringReplace from 'react-string-replace';
 import { useSelector } from 'settings/store/hooks';
 import { MssStatus } from 'settings/store/types';
+import { getLinkRegex } from '../../utils';
 
 type MssActiveMessageProps = { canUseSuccessClass: boolean };
 
@@ -22,11 +24,22 @@ type NotValidMessageProps = { message?: string };
 function NotValidMessage({ message }: NotValidMessageProps) {
   return (
     <div className="mailpoet_error">
-      {message ||
+      {message
-        __(
+        ? ReactStringReplace(message, getLinkRegex(), (text) => (
-          'Your key is not valid for the MailPoet Sending Service',
+            <a
-          'mailpoet',
+              className="mailpoet-link"
-        )}
+              key={text}
+              href="https://kb.mailpoet.com/article/249-how-to-change-the-domain-associated-with-a-key"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {text}
+            </a>
+          ))
+        : __(
+            'Your key is not valid for the MailPoet Sending Service',
+            'mailpoet',
+          )}
     </div>
   );
 }

mailpoet/assets/js/src/common/premium-key/key-messages/premium-messages.tsx

@@ -1,11 +1,13 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
+import ReactStringReplace from 'react-string-replace';
 import { useSelector } from 'settings/store/hooks';
 import { PremiumStatus } from 'settings/store/types';
 import { Button } from 'common/button/button';
 import { PremiumModal } from 'common/premium-modal';
 import { useState } from 'react';
 import { Data } from '../../premium-modal/upgrade-info';
+import { getLinkRegex } from '../../utils';
 
 type ActiveMessageProps = { canUseSuccessClass: boolean };
 
@@ -67,7 +69,19 @@ type NotValidMessageProps = { message?: string };
 function NotValidMessage({ message }: NotValidMessageProps) {
   return (
     <div className="mailpoet_error">
-      {message || __('Your key is not valid for MailPoet Premium', 'mailpoet')}
+      {message
+        ? ReactStringReplace(message, getLinkRegex(), (text) => (
+            <a
+              className="mailpoet-link"
+              key={text}
+              href="https://kb.mailpoet.com/article/249-how-to-change-the-domain-associated-with-a-key"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {text}
+            </a>
+          ))
+        : __('Your key is not valid for MailPoet Premium', 'mailpoet')}
     </div>
   );
 }

mailpoet/lib/API/JSON/v1/Services.php

@@ -140,7 +140,7 @@ class Services extends APIEndpoint {
         $error = __('Your key is not valid for the MailPoet Sending Service', 'mailpoet');
         break;
       case Bridge::KEY_ALREADY_USED:
-        $error = __('Your MailPoet Sending Service key is already used on another site', 'mailpoet');
+        $error = __('Your MailPoet Sending Service key is already [link]used on another site[/link]', 'mailpoet');
         break;
       default:
         $code = !empty($result['code']) ? $result['code'] : Bridge::CHECK_ERROR_UNKNOWN;
@@ -209,7 +209,7 @@ class Services extends APIEndpoint {
         $error = __('Your key is not valid for MailPoet Premium', 'mailpoet');
         break;
       case Bridge::KEY_ALREADY_USED:
-        $error = __('Your Premium key is already used on another site', 'mailpoet');
+        $error = __('Your Premium key is already [link]used on another site[/link]', 'mailpoet');
         break;
       default:
         $code = !empty($result['code']) ? $result['code'] : Bridge::CHECK_ERROR_UNKNOWN;