Merge pull request #49 from newfold-labs/bugfix/paypal

Bugfix - PayPal Onboarding Flow

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;
 	}

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
   );

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 = {

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"

src/components/useCardManager.js

@@ -6,15 +6,15 @@ function createDependencyTree(config) {
     .map((_) => _.dataDependencies)
     .flat()
     .reduce(
-      (tree, { endpoint, refresh}) => ({
+      (tree, { endpoint, refresh }) => ({
         ...tree,
         [endpoint]: tree[endpoint] ? [...tree[endpoint], refresh] : [refresh],
       }),
       {}
     );
 }
 
-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;