Add user and brand details to page status. (#52)

As we need more features around user's plan and brand settings, we need to be able to access such information on the client side. We can think of renaming page-status to something more appropriate in the future.
newfold-labs · Feb 17, 2023 · fdb116d · fdb116d
1 parent a8aa51f
commit fdb116d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/includes/RestApi/UserController.php b/includes/RestApi/UserController.php
@@ -4,6 +4,7 @@
 
 use NewfoldLabs\WP\Module\ECommerce\Permissions;
 use function NewfoldLabs\WP\ModuleLoader\container;
+use NewfoldLabs\WP\Module\Onboarding\Data\Data;
 
 class UserController {
 
@@ -33,7 +34,21 @@ public function get_page_status() {
 		);
 		$pages = \get_pages( $args );
 		$theme = \wp_get_theme();
+		$brand = 'newfold';
+		$customer = array(
+			plan_subtype => 'wc_premium'
+		);
+		if (class_exists('NewfoldLabs\WP\Module\Onboarding\Data\Data')) {
+			$brand_details = Data::current_brand();
+			$brand = $brand_details['brand'];
+			$customer_from_options = Data::customer_data();
+			if ($customer_from_options != false) {
+				$customer = $customer_from_options;
+			}
+		}
 		return array(
+			'details' => $customer,
+			'brand' => $brand,
 			'theme' => array(
 				'manage'   => Permissions::rest_can_manage_themes(),
 				'template' => $theme->get_template(),

diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
@@ -39,7 +39,7 @@ export function Dashboard(props) {
   const isLargeViewport = useViewportMatch("mobile", ">=");
   let { key, StepContent } =
     guideSteps.find((step) => step.key === props.section) ?? guideSteps[0];
-  useSetupYITHWonderTheme();
+  useSetupYITHWonderTheme(props.user);
   let isCleanUpInProgress = useOnboardingCleanup(props.plugins.token?.hash);
   let addCurtain = props.plugins?.status?.woocommerce !== "Active";
   function onBackButtonClick() {

diff --git a/src/components/useSetupYITHWonderTheme.js b/src/components/useSetupYITHWonderTheme.js
@@ -1,7 +1,5 @@
 import apiFetch from '@wordpress/api-fetch';
 import { useEffect } from '@wordpress/element';
-import useSWRImmutable from 'swr/immutable';
-import { Endpoints } from '../services';
 
 async function createPage(page) {
   apiFetch({
@@ -40,11 +38,10 @@ function getPage(slug, template) {
 
 let PagesToBeCreated = ['home', 'about', 'contact'];
 
-export function useSetupYITHWonderTheme() {
-  let { data: status } = useSWRImmutable(Endpoints.PAGE_STATUS);
+export function useSetupYITHWonderTheme(user) {
   useEffect(async () => {
-    if (status !== undefined) {
-      let { theme, pages } = status;
+    if (user !== undefined) {
+      let { theme, pages } = user;
       if (
         theme.name?.toLowerCase() !== 'yith wonder' ||
         theme.manage === false
@@ -59,5 +56,5 @@ export function useSetupYITHWonderTheme() {
         await createPage({ slug, ...getPage(slug, 'yith-wonder') });
       }
     }
-  }, [status]);
+  }, [user]);
 }
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import apiFetch from "@wordpress/api-fetch";
 import useSWR, { SWRConfig } from "swr";
+import useSWRImmutable from "swr/immutable";
 import { Banner } from "./components/Banner";
 import { Dashboard } from "./components/Dashboard";
 import { SiteStatus } from "./components/SiteStatus";
@@ -18,6 +19,7 @@ window.NewfoldECommerce = function NewfoldECommerce(props) {
     revalidateOnReconnect: false,
     refreshInterval: 10 * 1000,
   });
+  let { data: user } = useSWRImmutable(Endpoints.PAGE_STATUS, fetcher);
   let plugins = {
     errors: error,
     ...(data ?? {}),
@@ -42,10 +44,10 @@ window.NewfoldECommerce = function NewfoldECommerce(props) {
           </div>
         ) : (
           <>
-            <Hero plugins={plugins} {...props} />
-            <StoreAnalytics plugins={plugins} {...props} />
-            <Dashboard plugins={plugins} {...props} />
-            <SiteStatus plugins={plugins} {...props} />
+            <Hero plugins={plugins} user={user} {...props} />
+            <StoreAnalytics plugins={plugins} user={user} {...props} />
+            <Dashboard plugins={plugins} user={user} {...props} />
+            <SiteStatus plugins={plugins} user={user} {...props} />
           </>
         )}
       </div>