From 6246c3d48e4b0f5cfa8b55a9a65047c53917f20c Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 17 Sep 2019 10:47:45 +0200
Subject: [PATCH] Move wizard body to own component

[MAILPOET-2142]
---
 assets/js/src/wizard/layout/step_layout.jsx   | 23 ++++++--------
 .../js/src/wizard/layout/step_layout_body.jsx | 31 +++++++++++++++++++
 2 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 assets/js/src/wizard/layout/step_layout_body.jsx

diff --git a/assets/js/src/wizard/layout/step_layout.jsx b/assets/js/src/wizard/layout/step_layout.jsx
index 0d6e1a781e..574326cc2e 100644
--- a/assets/js/src/wizard/layout/step_layout.jsx
+++ b/assets/js/src/wizard/layout/step_layout.jsx
@@ -1,25 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import SteppedProgressBar from '../../common/stepped_progess_bar.jsx';
+
+import WelcomeWizardStepLayoutBody from './step_layout_body.jsx';
 
 const WelcomeWizardStepLayout = (props) => (
   <>
     <div className="mailpoet_welcome_wizard_header">
       <img src={window.mailpoet_logo_url} width="200" height="87" alt="MailPoet logo" />
     </div>
-    <div className="mailpoet_welcome_wizard_flex">
-      <div className="mailpoet_welcome_wizard_illustration">
-        <img src={props.illustrationUrl} alt="" />
-      </div>
-      <div className="mailpoet_welcome_wizard_step">
-        { props.step <= props.stepsCount
-          ? (
-            <SteppedProgressBar steps_count={props.stepsCount} step={props.step} />
-          ) : null
-        }
-        {props.children}
-      </div>
-    </div>
+    <WelcomeWizardStepLayoutBody
+      illustrationUrl={props.illustrationUrl}
+      step={props.step}
+      stepsCount={props.stepsCount}
+    >
+      {props.children}
+    </WelcomeWizardStepLayoutBody>
   </>
 );
 
diff --git a/assets/js/src/wizard/layout/step_layout_body.jsx b/assets/js/src/wizard/layout/step_layout_body.jsx
new file mode 100644
index 0000000000..f97ec520e3
--- /dev/null
+++ b/assets/js/src/wizard/layout/step_layout_body.jsx
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SteppedProgressBar from '../../common/stepped_progess_bar.jsx';
+
+const WelcomeWizardStepLayoutBody = (props) => (
+  <div className="mailpoet_welcome_wizard_flex">
+    <div className="mailpoet_welcome_wizard_illustration">
+      <img src={props.illustrationUrl} alt="" />
+    </div>
+    <div className="mailpoet_welcome_wizard_step">
+      { props.step <= props.stepsCount
+        ? (
+          <SteppedProgressBar steps_count={props.stepsCount} step={props.step} />
+        ) : null
+      }
+      {props.children}
+    </div>
+  </div>
+);
+
+WelcomeWizardStepLayoutBody.propTypes = {
+  illustrationUrl: PropTypes.string.isRequired,
+  step: PropTypes.number.isRequired,
+  stepsCount: PropTypes.number.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default WelcomeWizardStepLayoutBody;