From eeefaa3a02dca4be7c072e22556f2e64e2e2d241 Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Fri, 20 Mar 2020 01:55:12 +0100
Subject: [PATCH] Fix React warnings

[MAILPOET-2678]
---
 .../signup_confirmation/email_content.tsx      | 12 ++++++++----
 .../enable_signup_confirmation.tsx             | 18 ++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/assets/js/src/settings/pages/signup_confirmation/email_content.tsx b/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
index 284cfb9751..d31412613c 100644
--- a/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
+++ b/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { Fragment } from 'react';
+import ReactStringReplace from 'react-string-replace';
+
 import { t, onChange } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
 import { useSetting } from 'settings/store/hooks';
@@ -8,15 +10,17 @@ export default function EmailContent() {
   const [body, setBody] = useSetting('signup_confirmation', 'body');
 
   if (!enabled) return null;
+  const descriptionLines = t('emailContentDescription').split('<br />').filter((x) => x);
   return (
     <>
       <Label
         title={t('emailContent')}
-        description={t('emailContentDescription').split('<br />').map((line) => (
-          <>
+        description={descriptionLines.map((line) => (
+          <span key={line}>
             {line}
             <br />
-          </>
+            <br />
+          </span>
         ))}
         htmlFor="signup_confirmation-body"
       />
diff --git a/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx b/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
index a8984a9af9..760fa031ed 100644
--- a/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
+++ b/assets/js/src/settings/pages/signup_confirmation/enable_signup_confirmation.tsx
@@ -1,20 +1,18 @@
 import React from 'react';
-import { t } from 'common/functions';
+import { t, onChange } from 'common/functions';
 import { Label, Inputs } from 'settings/components';
 import { useSelector, useSetting } from 'settings/store/hooks';
 
 export default function EnableSignupConfirmation() {
   const isMssActive = useSelector('isMssActive')();
   const [enabled, setEnabled] = useSetting('signup_confirmation', 'enabled');
-  const enable = () => {
+  const handleChange = (value: '1' | '') => {
     // eslint-disable-next-line no-alert
-    if (window.confirm(t('subscribersNeedToActivateSub'))) {
+    if (value === '1' && window.confirm(t('subscribersNeedToActivateSub'))) {
       setEnabled('1');
     }
-  };
-  const disable = () => {
     // eslint-disable-next-line no-alert
-    if (window.confirm(t('newSubscribersAutoConfirmed'))) {
+    if (value === '' && window.confirm(t('newSubscribersAutoConfirmed'))) {
       setEnabled('');
     }
   };
@@ -45,18 +43,18 @@ export default function EnableSignupConfirmation() {
             <input
               id="signup_confirmation-enabled"
               type="radio"
-              defaultChecked={enabled === '1'}
+              checked={enabled === '1'}
               value="1"
-              onClick={enable}
+              onChange={onChange(handleChange)}
               data-automation-id="enable_signup_confirmation"
             />
             {t('yes')}
             {' '}
             <input
               type="radio"
-              defaultChecked={enabled === ''}
+              checked={enabled === ''}
               value=""
-              onClick={disable}
+              onChange={onChange(handleChange)}
               data-automation-id="disable_signup_confirmation"
             />
             {t('no')}