Simplify DOM and get rid of IDs in CSS

[MAILPOET-2804]

assets/css/src/components-plugin/_set-from-address-modal.scss

@@ -1,14 +1,14 @@
-#set-from-address-modal {
+.set-from-address-modal {
   p:first-child {
     margin-top: 0;
   }
 
-  #mailpoet_set_from_address_modal_address {
+  input[type=text] {
     display: block;
     width: 230px;
   }
 
-  #mailpoet_set_from_address_modal_save {
+  input[type=submit] {
     display: block;
     margin-top: 30px;
   }

assets/js/src/common/set_from_address_modal.tsx

@@ -72,67 +72,65 @@ const SetFromAddressModal = ({ onRequestClose }: Props) => {
     <Modal
       title={MailPoet.I18n.t('setFromAddressModalTitle')}
       onRequestClose={onRequestClose}
+      contentClassName="set-from-address-modal"
     >
-      <div id="set-from-address-modal">
+      <p>
-        <p>
+        {
-          {
+          ReactStringReplace(
-            ReactStringReplace(
+            MailPoet.I18n.t('setFromAddressModalDescription'),
-              MailPoet.I18n.t('setFromAddressModalDescription'),
+            /\[link\](.*?)\[\/link\]/g,
-              /\[link\](.*?)\[\/link\]/g,
+            (match) => (
-              (match) => (
+              <a
-                <a
+                key="setFromAddressModalDescriptionLink"
-                  key="setFromAddressModalDescriptionLink"
+                href="https://account.mailpoet.com/authorization"
-                  href="https://account.mailpoet.com/authorization"
+                target="_blank"
-                  target="_blank"
+                rel="noopener noreferrer"
-                  rel="noopener noreferrer"
+              >
-                >
+                {match}
-                  {match}
+              </a>
-                </a>
-              )
             )
+          )
+        }
+      </p>
+
+      <input
+        id="mailpoet-set-from-address-modal-input"
+        type="text"
+        placeholder="from@mydomain.com"
+        data-parsley-required
+        data-parsley-type="email"
+        onChange={(event) => {
+          setAddress(event.target.value.trim() || null);
+          const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
+          addressValidator.removeError('saveError');
+        }}
+      />
+
+      <input
+        className="button button-primary"
+        type="submit"
+        value={MailPoet.I18n.t('setFromAddressModalSave')}
+        onClick={async () => {
+          const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
+          addressValidator.validate();
+          if (!addressValidator.isValid()) {
+            return;
           }
-        </p>
+          if (!address) {
-
+            return;
-        <input
+          }
-          id="mailpoet_set_from_address_modal_address"
+          try {
-          type="text"
+            await handleSave(address);
-          placeholder="from@mydomain.com"
+            onRequestClose();
-          data-parsley-required
+            removeUnauthorizedEmailNotices();
-          data-parsley-type="email"
+            notices.success(getSuccessMessage(), { timeout: false });
-          onChange={(event) => {
+          } catch (e) {
-            setAddress(event.target.value.trim() || null);
+            const error = e.errors && e.errors[0] ? e.errors[0] : null;
-            const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
+            const message = getErrorMessage(error);
-            addressValidator.removeError('saveError');
+            addressValidator.addError('saveError', { message });
-          }}
+          }
-        />
+        }}
-
+      />
-        <input
-          id="mailpoet_set_from_address_modal_save"
-          className="button button-primary"
-          type="submit"
-          value={MailPoet.I18n.t('setFromAddressModalSave')}
-          onClick={async () => {
-            const addressValidator = jQuery('#mailpoet_set_from_address_modal_address').parsley();
-            addressValidator.validate();
-            if (!addressValidator.isValid()) {
-              return;
-            }
-            if (!address) {
-              return;
-            }
-            try {
-              await handleSave(address);
-              onRequestClose();
-              removeUnauthorizedEmailNotices();
-              notices.success(getSuccessMessage(), { timeout: false });
-            } catch (e) {
-              const error = e.errors && e.errors[0] ? e.errors[0] : null;
-              const message = getErrorMessage(error);
-              addressValidator.addError('saveError', { message });
-            }
-          }}
-        />
-      </div>
     </Modal>
   );
 };

tests/acceptance/AddSendingKeyCest.php

@@ -45,12 +45,12 @@ class AddSendingKeyCest {
     $i->waitForText('It’s time to set your default FROM address!');
     $i->waitForText('Set one of your authorized email addresses as the default FROM email for your MailPoet emails.');
 
-    $i->fillField(['id' => 'mailpoet_set_from_address_modal_address'], 'invalid@email.com');
+    $i->fillField(['id' => 'mailpoet-set-from-address-modal-input'], 'invalid@email.com');
-    $i->click('Save', '#set-from-address-modal');
+    $i->click('Save', '.set-from-address-modal');
     $i->waitForText('Can’t use this email yet! Please authorize it first.');
 
-    $i->fillField(['id' => 'mailpoet_set_from_address_modal_address'], 'staff@mailpoet.com');
+    $i->fillField(['id' => 'mailpoet-set-from-address-modal-input'], 'staff@mailpoet.com');
-    $i->click('Save', '#set-from-address-modal');
+    $i->click('Save', '.set-from-address-modal');
     $i->waitForText('Excellent. Your authorized email was saved. You can change it in the Basics tab of the MailPoet settings.');
     $i->dontSee('Sending all of your emails has been paused because your email address %s hasn’t been authorized yet.');