Manage ActivationPanel in store and close when sidebar opens

[MAILPOET-4769]

mailpoet/assets/js/src/automation/editor/components/header/index.tsx

@@ -23,7 +23,7 @@ import {
 //   https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/header/index.js
 //   https://github.com/WordPress/gutenberg/blob/0ee78b1bbe9c6f3e6df99f3b967132fa12bef77d/packages/edit-site/src/components/header/index.js
 
-function ActivateButton({ onClick, label }): JSX.Element {
+function ActivateButton({ label }): JSX.Element {
   const { errors, isDeactivating } = useSelect(
     (select) => ({
       errors: select(storeName).getErrors(),
@@ -33,12 +33,13 @@ function ActivateButton({ onClick, label }): JSX.Element {
     }),
     [],
   );
+  const { openActivationPanel } = useDispatch(storeName);
 
   const button = (
     <Button
       variant="primary"
       className="editor-post-publish-button"
-      onClick={onClick}
+      onClick={openActivationPanel}
       disabled={isDeactivating || !!errors}
     >
       {label}
@@ -201,13 +202,9 @@ function DeactivateNowButton(): JSX.Element {
 
 type Props = {
   showInserterToggle: boolean;
-  toggleActivatePanel: () => void;
 };
 
-export function Header({
-  showInserterToggle,
-  toggleActivatePanel,
-}: Props): JSX.Element {
+export function Header({ showInserterToggle }: Props): JSX.Element {
   const { setWorkflowName } = useDispatch(storeName);
   const { workflowName, workflowStatus } = useSelect(
     (select) => ({
@@ -255,10 +252,7 @@ export function Header({
           {workflowStatus === WorkflowStatus.DRAFT && (
             <>
               <SaveDraftButton />
-              <ActivateButton
-                onClick={toggleActivatePanel}
-                label={__('Activate', 'mailpoet')}
-              />
+              <ActivateButton label={__('Activate', 'mailpoet')} />
             </>
           )}
           {workflowStatus === WorkflowStatus.ACTIVE && (
@@ -270,10 +264,7 @@ export function Header({
           {workflowStatus === WorkflowStatus.DEACTIVATING && (
             <>
               <DeactivateNowButton />
-              <ActivateButton
-                onClick={toggleActivatePanel}
-                label={__('Update & Activate', 'mailpoet')}
-              />
+              <ActivateButton label={__('Update & Activate', 'mailpoet')} />
             </>
           )}
           <PinnedItems.Slot scope={storeName} />

mailpoet/assets/js/src/automation/editor/components/panel/activate-panel.tsx

@@ -100,7 +100,7 @@ function PostStep({ onClose }): JSX.Element {
   );
 }
 
-export function ActivatePanel({ onClose }): JSX.Element {
+export function ActivatePanel(): JSX.Element {
   const { workflow, errors } = useSelect(
     (select) => ({
       errors: select(storeName).getErrors(),
@@ -109,11 +109,13 @@ export function ActivatePanel({ onClose }): JSX.Element {
     [],
   );
 
+  const { closeActivationPanel } = useDispatch(storeName);
+
   useEffect(() => {
     if (errors) {
-      onClose();
+      closeActivationPanel();
     }
-  }, [errors, onClose]);
+  }, [errors, closeActivationPanel]);
 
   if (errors) {
     return null;
@@ -121,8 +123,8 @@ export function ActivatePanel({ onClose }): JSX.Element {
   const isActive = workflow.status === WorkflowStatus.ACTIVE;
   return (
     <div className="mailpoet-automation-activate-panel">
-      {isActive && <PostStep onClose={onClose} />}
-      {!isActive && <PreStep onClose={onClose} />}
+      {isActive && <PostStep onClose={closeActivationPanel} />}
+      {!isActive && <PreStep onClose={closeActivationPanel} />}
     </div>
   );
 }

mailpoet/assets/js/src/automation/editor/index.tsx

@@ -76,6 +76,7 @@ function Editor(): JSX.Element {
   const {
     isFullscreenActive,
     isInserterOpened,
+    isActivationPanelOpened,
     isSidebarOpened,
     showIconLabels,
     workflow,
@@ -84,12 +85,12 @@ function Editor(): JSX.Element {
       isFullscreenActive: select(storeName).isFeatureActive('fullscreenMode'),
       isInserterOpened: select(storeName).isInserterSidebarOpened(),
       isSidebarOpened: select(storeName).isSidebarOpened(),
+      isActivationPanelOpened: select(storeName).isActivationPanelOpened(),
       showIconLabels: select(storeName).isFeatureActive('showIconLabels'),
       workflow: select(storeName).getWorkflowData(),
     }),
     [],
   );
-  const [showActivatePanel, setShowActivatePanel] = useState(false);
   const [isBooting, setIsBooting] = useState(true);
 
   useEffect(() => {
@@ -111,10 +112,6 @@ function Editor(): JSX.Element {
     return null;
   }
 
-  const toggleActivatePanel = () => {
-    setShowActivatePanel(!showActivatePanel);
-  };
-
   return (
     <ShortcutProvider>
       <SlotFillProvider>
@@ -135,12 +132,7 @@ function Editor(): JSX.Element {
               </div>
             )
           }
-          header={
-            <Header
-              showInserterToggle={showInserterSidebar}
-              toggleActivatePanel={toggleActivatePanel}
-            />
-          }
+          header={<Header showInserterToggle={showInserterSidebar} />}
           content={
             <>
               <EditorNotices />
@@ -152,7 +144,7 @@ function Editor(): JSX.Element {
             showInserterSidebar && isInserterOpened ? <InserterSidebar /> : null
           }
         />
-        {showActivatePanel && <ActivatePanel onClose={toggleActivatePanel} />}
+        {isActivationPanelOpened && <ActivatePanel />}
         <Popover.Slot />
       </SlotFillProvider>
     </ShortcutProvider>

mailpoet/assets/js/src/automation/editor/store/actions.ts

@@ -29,10 +29,20 @@ const trackErrors = (errors) => {
   });
 };
 
-export const openSidebar =
-  (key) =>
-  ({ registry }) =>
+export const openActivationPanel = () => ({
+  type: 'SET_ACTIVATION_PANEL_VISIBILITY',
+  value: true,
+});
+export const closeActivationPanel = () => ({
+  type: 'SET_ACTIVATION_PANEL_VISIBILITY',
+  value: false,
+});
+
+export const openSidebar = (key) => {
+  dispatch(storeName).closeActivationPanel();
+  return ({ registry }) =>
     registry.dispatch(interfaceStore).enableComplementaryArea(storeName, key);
+};
 
 export const closeSidebar =
   () =>

mailpoet/assets/js/src/automation/editor/store/initial_state.ts

@@ -11,6 +11,9 @@ export const getInitialState = (): State => ({
   inserterSidebar: {
     isOpened: false,
   },
+  activationPanel: {
+    isOpened: false,
+  },
   inserterPopover: undefined,
   errors: undefined,
 });

mailpoet/assets/js/src/automation/editor/store/reducer.ts

@@ -3,6 +3,14 @@ import { State } from './types';
 
 export function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case 'SET_ACTIVATION_PANEL_VISIBILITY':
+      return {
+        ...state,
+        activationPanel: {
+          ...state.activationPanel,
+          isOpened: action.value,
+        },
+      };
     case 'TOGGLE_INSERTER_SIDEBAR':
       return {
         ...state,

mailpoet/assets/js/src/automation/editor/store/selectors.ts

@@ -21,6 +21,10 @@ export function isInserterSidebarOpened(state: State): boolean {
   return state.inserterSidebar.isOpened;
 }
 
+export function isActivationPanelOpened(state: State): boolean {
+  return state.activationPanel.isOpened;
+}
+
 export function getContext(state: State): Context {
   return state.context;
 }

mailpoet/assets/js/src/automation/editor/store/types.ts

@@ -54,6 +54,9 @@ export type State = {
   inserterSidebar: {
     isOpened: boolean;
   };
+  activationPanel: {
+    isOpened: boolean;
+  };
   inserterPopover?: {
     anchor: HTMLElement;
     type: 'steps' | 'triggers';