From adc957c0afd5897122d391a904fd13a5ae1f9297 Mon Sep 17 00:00:00 2001
From: QSdmitrioul <100569351+QSdmitrioul@users.noreply.github.com>
Date: Fri, 16 Sep 2022 11:21:52 +0300
Subject: [PATCH] fix(FOROME-1636): fix flow of wizard (#949)

* fix(FOROME-1636): fix flow of wizard

* fix(FOROME-1636): extract function
---
 .../selected-dataset-build-flow.tsx           | 31 ++++++++++++++-----
 src/ui/card/card.module.css                   | 17 ++--------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/pages/main/components/selected-dataset/build-flow/selected-dataset-build-flow.tsx b/src/pages/main/components/selected-dataset/build-flow/selected-dataset-build-flow.tsx
index af8d242a4..47f9c771d 100644
--- a/src/pages/main/components/selected-dataset/build-flow/selected-dataset-build-flow.tsx
+++ b/src/pages/main/components/selected-dataset/build-flow/selected-dataset-build-flow.tsx
@@ -3,6 +3,7 @@ import styles from './build-flow.module.css'
 import { ReactElement } from 'react'
 import { observer } from 'mobx-react-lite'
 
+import { IWizardScenario } from '@pages/main/components/selected-dataset/build-flow/components/wizard/wizard.interface'
 import { BuildFlowHeader } from './components/build-flow-header'
 import wizardStore from './components/wizard/wizard.store'
 
@@ -13,19 +14,35 @@ export const SelectedDatasetBuildFlow = observer(
       wizardStore.resetWizard()
     }
 
+    const renderCard = ({ component, ...rest }: IWizardScenario) => {
+      const Component = () =>
+        component({
+          ...rest,
+        })
+      return !rest.hidden && <Component key={rest.id} />
+    }
+
     return (
       <div className={styles.buildFlow}>
         <div className={styles.buildFlow__container}>
           <BuildFlowHeader goBack={handleGoBack} />
 
           <div>
-            {wizardStore.wizardScenario.map(({ component, ...rest }) => {
-              const Component = () =>
-                component({
-                  ...rest,
-                })
-              return !rest.hidden && <Component key={rest.id} />
-            })}
+            {wizardStore.wizardScenario
+              .filter(it => it.position !== 'left' && it.position !== 'right')
+              .map(renderCard)}
+            <div className="flex">
+              <div className="w-[calc(50%-8px)]">
+                {wizardStore.wizardScenario
+                  .filter(it => it.position === 'left')
+                  .map(renderCard)}
+              </div>
+              <div className="ml-4 w-[calc(50%-8px)]">
+                {wizardStore.wizardScenario
+                  .filter(it => it.position === 'right')
+                  .map(renderCard)}
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/ui/card/card.module.css b/src/ui/card/card.module.css
index 4087e2305..6ddd9e478 100644
--- a/src/ui/card/card.module.css
+++ b/src/ui/card/card.module.css
@@ -4,7 +4,8 @@
   border-radius: theme("spacing.2");
   box-shadow: theme("boxShadow.card");
   padding: theme("spacing.4");
-  width: calc(50% - 8px);
+  width: 100%;
+  margin-top: 16px;
 
   &_title {
     font-weight: 700 !important;
@@ -32,19 +33,7 @@
     transform: translateY(40px);
   }
 
-  &_position-right {
-    margin-top: 16px;
-    float: right;
-    clear: right;
-  }
-
-  &_position-left {
-    margin-top: 16px;
-    float: left;
-    clear: left;
-  }
-
   &_position-stretch {
-    width: 100%;
+    margin-top: 0;
   }
 }