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;