From 0f8a382179b6489ca17fa255b19a79f0c22158ae Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Wed, 14 Dec 2022 13:55:05 +0530
Subject: [PATCH 1/4] We won't listen to iframe postMessage for closing the
 captive modal

---
 includes/Partials/CaptiveFlow.php |  3 ---
 src/components/ModalCard.js       | 19 -------------------
 2 files changed, 22 deletions(-)

diff --git a/includes/Partials/CaptiveFlow.php b/includes/Partials/CaptiveFlow.php
index e1f320ff..7ec22795 100644
--- a/includes/Partials/CaptiveFlow.php
+++ b/includes/Partials/CaptiveFlow.php
@@ -46,9 +46,6 @@ public static function render_paypal() {
 		echo PHP_EOL;
 		echo '<div id="nfd-ecommerce" class="nfd-ecommerce-captive-flow">';
 		echo do_action( 'nfd-ecommerce-captive-flow-paypal' );
-		if (get_option('nfd-ecommerce-captive-flow-paypal', 'false') == 'true') {
-			echo '<script id="captive-flow-completion"> window.parent && window.parent.postMessage({ type: "captive-flow-completion" }, window.location.origin);</script>';
-		}
 		echo '</div>';
 		echo PHP_EOL;
 	}
diff --git a/src/components/ModalCard.js b/src/components/ModalCard.js
index 944e9593..87c222d2 100644
--- a/src/components/ModalCard.js
+++ b/src/components/ModalCard.js
@@ -1,27 +1,8 @@
 import { Modal } from "@wordpress/components";
-import { useEffect } from "@wordpress/element";
 
 const ModalCard = (props) => {
   const closeModal = () => props.setShowModal(false);
 
-  useEffect(() => {
-    let captiveFlowCompletion = async (e) => {
-      if (
-        e.origin === window.location.origin &&
-        e?.data?.type === "captive-flow-completion"
-      ) {
-        for (let refreshDependency of props.modal?.onClose ?? []) {
-          await props.onRefresh(refreshDependency);
-        }
-        closeModal();
-      }
-    };
-    let iframeEvent = window.addEventListener("message", captiveFlowCompletion);
-    return () => {
-      window.removeEventListener("message", iframeEvent);
-    };
-  }, []);
-
   return (
     <Modal
       overlayClassName="nfd-ecommerce-modal-overlay"

From e7fd1c57c253c41b3119b1911947da91d3f7bb66 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Wed, 14 Dec 2022 13:55:36 +0530
Subject: [PATCH 2/4] Add options to control how data fetching is done for a
 given card config

---
 src/components/useCardManager.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/useCardManager.js b/src/components/useCardManager.js
index d18a9c9d..f4e54613 100644
--- a/src/components/useCardManager.js
+++ b/src/components/useCardManager.js
@@ -6,7 +6,7 @@ function createDependencyTree(config) {
     .map((_) => _.dataDependencies)
     .flat()
     .reduce(
-      (tree, { endpoint, refresh}) => ({
+      (tree, { endpoint, refresh }) => ({
         ...tree,
         [endpoint]: tree[endpoint] ? [...tree[endpoint], refresh] : [refresh],
       }),
@@ -14,7 +14,7 @@ function createDependencyTree(config) {
     );
 }
 
-function useLoadDependencies(tree) {
+function useLoadDependencies(tree, { refreshInterval }) {
   let endpoints = Object.keys(tree);
   let { data, mutate } = useSWR(
     endpoints,
@@ -29,7 +29,8 @@ function useLoadDependencies(tree) {
         }
       }
       return realisedTree;
-    }
+    },
+    { refreshInterval }
   );
 
   async function onRefresh(dependency) {
@@ -57,9 +58,9 @@ function extractDependencies(realisedTree, cardConfig) {
   );
 }
 
-export const useCardManager = (config) => {
+export const useCardManager = (config, fetchOptions = {}) => {
   const tree = createDependencyTree(config);
-  let { realisedTree, onRefresh } = useLoadDependencies(tree);
+  let { realisedTree, onRefresh } = useLoadDependencies(tree, fetchOptions);
   return config
     .map((cardConfig) => {
       let { state: stateDefinition } = cardConfig;

From f92dc342de3caf5688f4624ac439bfc828a2aa66 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Wed, 14 Dec 2022 13:55:56 +0530
Subject: [PATCH 3/4] Close the modal once task is complete and if modal is
 already open

---
 src/components/MinimalCard.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MinimalCard.js b/src/components/MinimalCard.js
index 804c3f35..808d0525 100644
--- a/src/components/MinimalCard.js
+++ b/src/components/MinimalCard.js
@@ -1,4 +1,4 @@
-import { useState } from "@wordpress/element";
+import { useEffect, useState } from "@wordpress/element";
 import { ReactComponent as CompletedTask } from "../icons/task-completed-solid.svg";
 import ModalCard from "./ModalCard";
 
@@ -7,6 +7,11 @@ export function MinimalCard(props) {
   let modal = props.modal();
   let { image: Icon } = props.assets(props.state);
   const taskCompleted = props.state.taskCompleted;
+  useEffect(() => {
+    if (taskCompleted && showModal) {
+      setShowModal(false);
+    }
+  }, [taskCompleted, showModal]);
   let { title, actionName } = props.text(taskCompleted);
   const buttonClickHandler = () => {
     const data = {

From adcdad5e07b8b1fee1ec3813357e8754f3be90a0 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Wed, 14 Dec 2022 13:56:11 +0530
Subject: [PATCH 4/4] Reload GeneralSettings page every 8 seconds

---
 src/components/GeneralSettings.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/GeneralSettings.js b/src/components/GeneralSettings.js
index c8699133..17d2b1be 100644
--- a/src/components/GeneralSettings.js
+++ b/src/components/GeneralSettings.js
@@ -5,7 +5,9 @@ import { DashboardContent } from "./DashboardContent";
 
 export function GeneralSettings(props) {
   let { plugins } = props;
-  let cards = useCardManager(GeneralSettingsConfig(plugins));
+  let cards = useCardManager(GeneralSettingsConfig(plugins), {
+    refreshInterval: 8 * 1000,
+  });
   const isLoading = !(cards ?? []).every(
     (cardConfig) => cardConfig.isLoading == false
   );