Disabling cards while WooCommerce plugin is unavailable (#43)

* Disabling cards while WooCommerce plugin is unavailable * Added disabled property to button and pseudo class * Fixed typo Co-authored-by: Ashritha <[email protected]>
newfold-labs · Nov 29, 2022 · 38d96f7 · 38d96f7
1 parent 4db5864
commit 38d96f7
Show file tree

Hide file tree

Showing 17 changed files with 174 additions and 128 deletions.
diff --git a/src/components/AdvancedFeatures.js b/src/components/AdvancedFeatures.js
@@ -9,8 +9,9 @@ export function AdvancedFeatures(props) {
   const isLoading = !(cards ?? []).every(
     (cardConfig) => cardConfig.isLoading == false
   );
-
-  if (isLoading)
+  let WCUnavailable = plugins?.status?.woocommerce !== "Active";
+
+  if (isLoading && !WCUnavailable)
     return (
       <div style={{ height: "100%", display: "grid", placeContent: "center" }}>
         <div className="bwa-loader" />

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -7,6 +7,7 @@ export function Card({
   action,
   href,
   variant,
+  disable,
   status = "ready",
   ...props
 }) {
@@ -19,7 +20,7 @@ export function Card({
       className="nfd-ecommerce-card"
       data-variant={variant}
       type="button"
-      disabled={status !== "ready"}
+      disabled={status !== "ready" || disable}
       onClick={() => {
         let [page, qs] = href.split("?");
         let query = new URLSearchParams(qs);

diff --git a/src/components/CustomizeStore.js b/src/components/CustomizeStore.js
@@ -30,8 +30,9 @@ export function CustomizeStore({ plugins }) {
   let pagesByName = Object.fromEntries(
     pages?.map((_) => [_["meta_value"], _["ID"]]) ?? []
   );
+  let WCUnavailable = plugins?.status?.woocommerce !== "Active";
 
-  if (status === undefined) {
+  if (status === undefined && !WCUnavailable) {
     return (
       <div style={{ height: "100%", display: "grid", placeContent: "center" }}>
         {error ? (
@@ -62,6 +63,7 @@ export function CustomizeStore({ plugins }) {
               key={title}
               variant="standard"
               title={title}
+              disable = {WCUnavailable}
               status={status === undefined ? "inprogress" : "ready"}
               action={__("Setup", "wp-module-ecommerce")}
               href={`post.php?action=edit&post=${pagesByName[dcpage]}`}
@@ -73,6 +75,7 @@ export function CustomizeStore({ plugins }) {
           <Card
             variant="standard"
             title={__("Add a Page", "wp-module-ecommerce")}
+            disable = {WCUnavailable}
             action={__("Setup", "wp-module-ecommerce")}
             href={`post-new.php?post_type=page`}
           >
@@ -81,6 +84,7 @@ export function CustomizeStore({ plugins }) {
         <Card
           variant="standard"
           title={__("Store Layout", "wp-module-ecommerce")}
+          disable = {WCUnavailable}
           action={__("Configure", "wp-module-ecommerce")}
           href={`customize.php?return=${encodeURIComponent(
             window.location.href.replace(window.location.origin, "")
@@ -91,6 +95,7 @@ export function CustomizeStore({ plugins }) {
         <Card
           variant="standard"
           title={__("Customer Account Page", "wp-module-ecommerce")}
+          disable = {WCUnavailable}
           action={__("Setup", "wp-module-ecommerce")}
           data-action-gutter={"s"}
           status={plugins.status !== undefined ? "ready" : "inprogress"}

diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
@@ -42,14 +42,11 @@ export function Dashboard(props) {
   useSetupYITHWonderTheme();
   let isCleanUpInProgress = useOnboardingCleanup(props.plugins.token?.hash);
   let addCurtain = props.plugins?.status?.woocommerce !== "Active";
-  let className = `nfd-ecommerce-dashboard ${
-    addCurtain ? "disableDashboardContent" : ""
-  }`;
   function onBackButtonClick() {
     navigate("/home/store");
   }
   return (
-    <div className={className}>
+    <div className="nfd-ecommerce-dashboard">
       {isLargeViewport ? (
         <nav
           aria-label={__("Setup Guide", "wp-module-ecommerce")}

diff --git a/src/components/ExtendedCard.js b/src/components/ExtendedCard.js
@@ -18,6 +18,7 @@ export function ExtendedCard(props) {
       data-variant="extended"
       type="button"
       data-completed="false"
+      disabled={props.state.isDisabled}
     >
       <div className="nfd-ecommerce-card-image">
         <div className="nfd-ecommerce-card-circle">

diff --git a/src/components/GeneralSettings.js b/src/components/GeneralSettings.js
@@ -9,8 +9,8 @@ export function GeneralSettings(props) {
   const isLoading = !(cards ?? []).every(
     (cardConfig) => cardConfig.isLoading == false
   );
-
-  if (isLoading)
+  let WCUnavailable = plugins?.status?.woocommerce !== "Active";
+  if (isLoading && !WCUnavailable)
     return (
       <div style={{ height: "100%", display: "grid", placeContent: "center" }}>
         <div className="bwa-loader" />
@@ -32,6 +32,13 @@ export function GeneralSettings(props) {
             return <Card key={title} {...props} />;
           })}
         </div>
+        <div style={{ height: "24px" }} />
+        {WCUnavailable && (
+          <div className="nfd-wc-unavailable-msg">
+            WooCommerce is required for these features to work, install it now
+            or contact our support team for more assistance.{" "}
+          </div>
+        )}
       </DashboardContent>
     </>
   );

diff --git a/src/components/ManageProducts.js b/src/components/ManageProducts.js
@@ -10,8 +10,9 @@ export function ManageProducts(props) {
   const isLoading = !(cards ?? []).every(
     (cardConfig) => cardConfig.isLoading == false
   );
+  let WCUnavailable = props?.plugins?.status?.woocommerce !== "Active";
 
-  if (isLoading)
+  if (isLoading && !WCUnavailable)
     return (
       <div style={{ height: "100%", display: "grid", placeContent: "center" }}>
         <div className="bwa-loader" />
@@ -47,6 +48,7 @@ export function ManageProducts(props) {
             variant="minimal"
             title={__("How to add products", "wp-module-ecommerce")}
             action={__("Learn More", "wp-module-ecommerce")}
+            disable = {WCUnavailable}
             onClick={() =>
               window.open(
                 "https://woocommerce.com/document/managing-products/",

diff --git a/src/components/MinimalCard.js b/src/components/MinimalCard.js
@@ -8,7 +8,6 @@ export function MinimalCard(props) {
   let { image: Icon } = props.assets(props.state);
   const taskCompleted = props.state.taskCompleted;
   let { title, actionName } = props.text(taskCompleted);
-
   const buttonClickHandler = () => {
     const data = {
       taskCompleted: taskCompleted,
@@ -19,12 +18,13 @@ export function MinimalCard(props) {
   return (
     <>
       <button
-        className={`nfd-ecommerce-card ${
-          taskCompleted ? "nfd-ecommerce-taskCompleted" : ""
-        }`}
+        className={`nfd-ecommerce-card
+         ${taskCompleted ? "nfd-ecommerce-taskCompleted" : ""} 
+        `}
         data-variant="minimal"
         type="button"
         onClick={buttonClickHandler}
+        disabled={props.state.isDisabled}
       >
         {taskCompleted && (
           <div className="nfd-ecommerce-taskCompleted-image">

diff --git a/src/components/SiteStatus.js b/src/components/SiteStatus.js
@@ -18,13 +18,18 @@ export function SiteStatus(props) {
   let { Modal } = props.wpModules;
   let [showModal, setModal] = useState(false);
   let { title, subtitle, cta, status } = SiteStatusContent;
+  let addCurtain = props.plugins?.status?.woocommerce !== "Active";
   if (!wp.comingSoon && !showModal) {
     return null;
   }
   return (
     <>
       <div style={{ height: "32px" }} />
-      <div className="site-status-banner">
+      <div
+        className={`site-status-banner ${
+          addCurtain ? "nfd-site-status-disable" : ""
+        }`}
+      >
         <h2>{title}</h2>
         <div style={{ height: "24px" }} />
         <div className="content">
@@ -64,7 +69,10 @@ export function SiteStatus(props) {
             onRequestClose={() => setModal(false)}
           >
             <div className="nfd-ecommerce-modal-content">
-              <StoreOnlineIllustration style={{ width: "100%" }} className="nfd-ecommerce-hero" />
+              <StoreOnlineIllustration
+                style={{ width: "100%" }}
+                className="nfd-ecommerce-hero"
+              />
               <h1>
                 {__(
                   "Your store is online and ready for business!",

diff --git a/src/components/StandardCard.js b/src/components/StandardCard.js
@@ -25,6 +25,7 @@ export function StandardCard(props) {
         data-variant="standard"
         type="button"
         onClick={buttonClickHandler}
+        disabled={props.state.isDisabled}
       >
         {taskCompleted && (
           <div className="nfd-ecommerce-taskCompleted-image">

diff --git a/src/configs/AdvancedFeatures.config.js b/src/configs/AdvancedFeatures.config.js
@@ -33,6 +33,7 @@ const GeneralSettings = (plugins) => [
           (queue) => queue.slug === "nfd_slug_yith_woocommerce_booking"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {
@@ -75,6 +76,7 @@ const GeneralSettings = (plugins) => [
           (queue) => queue.slug === "yith-woocommerce-ajax-search"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {
@@ -113,6 +115,7 @@ const GeneralSettings = (plugins) => [
           (queue) => queue.slug === "nfd_slug_yith_woocommerce_wishlist"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {
@@ -166,6 +169,7 @@ const GeneralSettings = (plugins) => [
             queue.slug === "nfd_slug_yith_woocommerce_ajax_product_filter"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {
@@ -206,6 +210,7 @@ const GeneralSettings = (plugins) => [
           (queue) => queue.slug === "nfd_slug_yith_woocommerce_gift_cards"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {
@@ -250,6 +255,7 @@ const GeneralSettings = (plugins) => [
             queue.slug === "nfd_slug_yith_woocommerce_customize_myaccount_page"
         ),
       isQueueEmpty: () => plugins?.status?.["queue-status"].length === 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (actionCompleted) => {

diff --git a/src/configs/GeneralSettings.config.js b/src/configs/GeneralSettings.config.js
@@ -39,6 +39,7 @@ const GeneralSettings = (plugins) => [
     }),
     state: {
       taskCompleted: (state) => state?.wcTasksRefresh?.isCompleted,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (data, setShowModal) => {
@@ -78,6 +79,7 @@ const GeneralSettings = (plugins) => [
     }),
     state: {
       taskCompleted: (state) => state?.yithOnboardingRefresh?.isCompleted,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (data, setShowModal) => {
@@ -111,8 +113,8 @@ const GeneralSettings = (plugins) => [
         pluginUnavailable: {
           contentType: "component",
           content: PluginsUnavailable,
-          pluginName:"Paypal",
-          token:plugins.token,
+          pluginName: "Paypal",
+          token: plugins.token,
           isFullScreen: false,
           onClose: [],
         },
@@ -135,6 +137,7 @@ const GeneralSettings = (plugins) => [
     }),
     state: {
       taskCompleted: (state) => state?.yithOnboardingShippoRefresh?.isCompleted,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (data, setShowModal) => {
@@ -170,8 +173,8 @@ const GeneralSettings = (plugins) => [
         pluginUnavailable: {
           contentType: "component",
           content: PluginsUnavailable,
-          pluginName:"Shippo",
-          token:plugins.token,
+          pluginName: "Shippo",
+          token: plugins.token,
           isFullScreen: false,
           onClose: [],
         },
@@ -194,6 +197,7 @@ const GeneralSettings = (plugins) => [
     }),
     state: {
       taskCompleted: (state) => state?.wcTasksTaxRefresh?.isCompleted,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (data, setShowModal) => {

diff --git a/src/configs/ManageProducts.config.js b/src/configs/ManageProducts.config.js
@@ -36,6 +36,7 @@ const ManageProducts = (plugins) => [
     state: {
       hasAddedProduct: (data) => data?.wcProductsList?.length > 0,
       showCompletedIcon: (data) => false,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (state, setShowModal) => {
@@ -65,10 +66,13 @@ const ManageProducts = (plugins) => [
     }),
     state: {
       showCompletedIcon: (data) => false,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (state, setShowModal) => {
-        window.location.href = getUrl("edit.php?post_type=product&page=product_importer");
+        window.location.href = getUrl(
+          "edit.php?post_type=product&page=product_importer"
+        );
       },
     },
     dataDependencies: [],
@@ -88,6 +92,7 @@ const ManageProducts = (plugins) => [
       showCompletedIcon: (data) => false,
       hasUsedPlugin: (data) =>
         data.yith_woocommerce_gift_cards_panel.length > 0,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (state, setShowModal) => {
@@ -118,6 +123,7 @@ const ManageProducts = (plugins) => [
         { title: "View/Edit a gift card", action: "view_gift_card" },
         { title: "Manage gift card settings", action: "manage_gift_card" },
       ],
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       onSelectAction: (state, action, opts) => {
@@ -152,6 +158,7 @@ const ManageProducts = (plugins) => [
       hasUsedPlugin: (data) =>
         data.nfd_slug_yith_woocommerce_booking.length > 0,
       showCompletedIcon: (data) => false,
+      isDisabled: () => plugins.status?.woocommerce !== "Active",
     },
     actions: {
       buttonClick: (state, setShowModal) => {

diff --git a/src/sections/SiteStatus.scss b/src/sections/SiteStatus.scss
@@ -59,7 +59,11 @@
       }
     }
   }
+}
 
+.nfd-site-status-disable{
+  pointer-events: none;
+  filter: opacity(0.2);
 }
 
 .nfd-site-live-modal {

diff --git a/src/sections/StoreAnalytics.scss b/src/sections/StoreAnalytics.scss
@@ -0,0 +1,22 @@
+.nfd-ecommerce-store-analytics {
+  border: 1px solid #d7dbe0;
+  background-color: white;
+  padding: 24px 24px 19px;
+
+  .store-analytics-notice {
+    font-size: 16px;
+    color: var(--nfd-ecommerce-text-secondary);
+  }
+
+  a {
+    display: block;
+    font: 400 18px/1.2 var(--nfd-ecommerce-font-primary);
+    padding: 10px 40px;
+    width: fit-content;
+    border: 1px solid var(--nfd-ecommerce-accent-primary);
+    border-radius: 2px;
+    background-color: white;
+    color: var(--nfd-ecommerce-accent-primary);
+    text-decoration: none;
+  }
+}