Pass next step to flow separator

[MAILPOET-6230]

mailpoet/assets/js/src/automation/editor/components/automation/flow-ending.tsx

@@ -3,14 +3,23 @@ import { FlowSeparator } from './flow-separator';
 import { Step as StepData } from './types';
 
 type Props = {
-  stepData: StepData;
+  previousStepData: StepData;
   index: number;
+  nextStepData?: StepData;
 };
 
-export function FlowEnding({ stepData, index }: Props): JSX.Element {
+export function FlowEnding({
+  previousStepData,
+  index,
+  nextStepData,
+}: Props): JSX.Element {
   return (
     <div className="mailpoet-automation-editor-step-wrapper">
-      <FlowSeparator stepData={stepData} index={index} />
+      <FlowSeparator
+        previousStepData={previousStepData}
+        nextStepData={nextStepData}
+        index={index}
+      />
       <Icon
         className="mailpoet-automation-editor-automation-end"
         icon={check}

mailpoet/assets/js/src/automation/editor/components/automation/flow-separator.tsx

@@ -6,8 +6,9 @@ import { Step as StepData } from './types';
 import { RenderStepSeparatorType } from '../../../types/filters';
 
 type Props = {
-  stepData: StepData;
+  previousStepData: StepData;
   index: number;
+  nextStepData?: StepData;
 };
 
 export function FlowSeparator(props: Props): JSX.Element {
@@ -35,5 +36,9 @@ export function FlowSeparator(props: Props): JSX.Element {
       ),
     [context],
   );
-  return renderSeparator(props.stepData, props.index);
+  return renderSeparator(
+    props.previousStepData,
+    props.index,
+    props.nextStepData,
+  );
 }

mailpoet/assets/js/src/automation/editor/components/automation/flow.tsx

@@ -40,13 +40,24 @@ export function Flow({ stepData, row }: Props): JSX.Element {
 
           return nextStepData ? (
             <div key={id}>
-              {row > 0 && <FlowSeparator stepData={stepData} index={i} />}
+              {row > 0 && (
+                <FlowSeparator
+                  previousStepData={stepData}
+                  index={i}
+                  nextStepData={nextStepData}
+                />
+              )}
               <FlowStep stepData={nextStepData} index={i} />
               <Flow stepData={nextStepData} row={row + 1} />
             </div>
           ) : (
-            // eslint-disable-next-line react/no-array-index-key
-            <FlowEnding key={i} stepData={stepData} index={i} />
+            <FlowEnding
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              previousStepData={stepData}
+              index={i}
+              nextStepData={nextStepData}
+            />
           );
         })}
       </div>

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/automation-flow/hooks/index.tsx

@@ -50,6 +50,7 @@ export function initHooks() {
       return function StatisticSeparatorWrapper(
         previousStepData: StepData,
         index: number,
+        nextStepData: StepData,
       ) {
         return (
           <>
@@ -62,7 +63,11 @@ export function initHooks() {
                 }
               />
             )}
-            <StatisticSeparator previousStep={previousStepData} index={index} />
+            <StatisticSeparator
+              previousStep={previousStepData}
+              nextStep={nextStepData}
+              index={index}
+            />
           </>
         );
       };

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/automation-flow/statistic-separator.tsx

@@ -8,11 +8,13 @@ import { Step } from '../../../../../../editor/components/automation/types';
 type Props = {
   previousStep: Step;
   index: number;
+  nextStep?: Step;
 };
 
 export function StatisticSeparator({
   previousStep,
   index,
+  nextStep,
 }: Props): JSX.Element | null {
   const { section, stepType } = useSelect(
     (s) => ({

mailpoet/assets/js/src/automation/types/filters.ts

@@ -37,8 +37,9 @@ export type RenderStepFooterType = JSX.Element | null;
 
 // mailpoet.automation.render_step_separator
 export type RenderStepSeparatorType = (
-  step: Step,
+  previousStep: Step,
   index: number,
+  nextStep?: Step,
 ) => JSX.Element;
 
 // mailpoet.automation.editor.create_store