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 '
';
echo do_action( 'nfd-ecommerce-captive-flow-paypal' );
- if (get_option('nfd-ecommerce-captive-flow-paypal', 'false') == 'true') {
- echo '';
- }
echo '
';
echo PHP_EOL;
}
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
);
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 = {
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 (
_.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;