From 38d96f7fe930db85d5aac93479b4bb671b3cb576 Mon Sep 17 00:00:00 2001
From: ashrithapradeep <46500357+ashrithapradeep@users.noreply.github.com>
Date: Tue, 29 Nov 2022 21:20:09 +0530
Subject: [PATCH] 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 <ashritha.belghatta@newfold.com>
---
 src/components/AdvancedFeatures.js       |   5 +-
 src/components/Card.js                   |   3 +-
 src/components/CustomizeStore.js         |   7 +-
 src/components/Dashboard.js              |   5 +-
 src/components/ExtendedCard.js           |   1 +
 src/components/GeneralSettings.js        |  11 ++-
 src/components/ManageProducts.js         |   4 +-
 src/components/MinimalCard.js            |   8 +-
 src/components/SiteStatus.js             |  12 ++-
 src/components/StandardCard.js           |   1 +
 src/configs/AdvancedFeatures.config.js   |   6 ++
 src/configs/GeneralSettings.config.js    |  12 ++-
 src/configs/ManageProducts.config.js     |   9 +-
 src/sections/SiteStatus.scss             |   4 +
 src/sections/StoreAnalytics.scss         |  22 +++++
 src/sections/WooCommerceUnavailable.scss |  75 +++++++++++++++
 styles.scss                              | 117 +++--------------------
 17 files changed, 174 insertions(+), 128 deletions(-)
 create mode 100644 src/sections/StoreAnalytics.scss
 create mode 100644 src/sections/WooCommerceUnavailable.scss

diff --git a/src/components/AdvancedFeatures.js b/src/components/AdvancedFeatures.js
index 3ec9780e..88ead2cd 100644
--- 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
index 453c4fef..c3d9b54a 100644
--- 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
index 9b1d357d..4b0d5f38 100644
--- 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
index b8e7677d..bd9d1c23 100644
--- 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
index 8ea186da..e592bf75 100644
--- 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
index 37d19dfa..c8699133 100644
--- 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
index e4698dd3..7ee19da9 100644
--- 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
index 5de23cdc..804c3f35 100644
--- 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
index 2d07d46b..fc87dc8f 100644
--- 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
index fe6111cb..2082e57f 100644
--- 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
index 27d4629b..ca7d261b 100644
--- 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
index 5f1ead65..430fe095 100644
--- 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
index a56b7cdc..d635a0e5 100644
--- 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
index ccd15949..7ecaddc6 100644
--- 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
new file mode 100644
index 00000000..41a459ea
--- /dev/null
+++ 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;
+  }
+}
diff --git a/src/sections/WooCommerceUnavailable.scss b/src/sections/WooCommerceUnavailable.scss
new file mode 100644
index 00000000..1896128b
--- /dev/null
+++ b/src/sections/WooCommerceUnavailable.scss
@@ -0,0 +1,75 @@
+.nfd-ecommerce-woocommerce-unavailable {
+  background-color: var(--nfd-ecommerce-bg-primary);
+  border-radius: 2px;
+  border: 1px solid var(--nfd-ecommerce-border-primary);
+  display: grid;
+  padding: 0 22px;
+  grid-template-areas:
+    "title illustration"
+    "actions illustration";
+  h1 {
+    color: var(--nfd-ecommerce-accent-primary);
+  }
+
+  .status-notice {
+    color: var(--nfd-ecommerce-text-secondary);
+    font-size: 16px;
+    margin-top: 24px;
+  }
+
+  button {
+    display: block;
+    width: 272px;
+    padding: 10px 24px;
+    border: 2px solid var(--nfd-ecommerce-accent-primary);
+    margin-top: 24px;
+    background-color: var(--nfd-ecommerce-accent-primary);
+    color: white;
+    margin-bottom: 16px;
+    cursor: grab;
+  }
+
+  a {
+    display: block;
+    width: 220px;
+    padding: 10px 24px;
+    border: 2px solid var(--nfd-ecommerce-accent-primary);
+    background-color: white;
+    color: var(--nfd-ecommerce-accent-primary);
+    text-align: center;
+    cursor: grab;
+    text-decoration: none;
+    margin-bottom: 32px;
+  }
+
+  .title {
+    grid-area: title;
+    margin-top: 24px;
+  }
+
+  .actions-container {
+    grid-area: actions;
+  }
+
+  .banner-image {
+    grid-area: illustration;
+    display: flex;
+    align-self: center;
+  }
+
+  @media (max-width: 600px) {
+    grid-template-areas:
+      "title"
+      "illustration"
+      "actions";
+    .wcUnAvailableIllustaration {
+      width: 100%;
+    }
+    h1 {
+      text-align: center;
+    }
+    .status-notice {
+      text-align: center;
+    }
+  }
+}
diff --git a/styles.scss b/styles.scss
index 9ae39e69..725f4d77 100644
--- a/styles.scss
+++ b/styles.scss
@@ -3,87 +3,14 @@
 @import "./src/sections/Banner.scss";
 @import "./src/sections/MultipleActionsCard.scss";
 @import "./src/sections/SiteStatus.scss";
+@import "./src/sections/StoreAnalytics.scss";
+@import "./src/sections/WooCommerceUnavailable.scss";
+
 
 .nfd-ecommerce-setup {
   margin: 0;
   padding: 0;
 
-  .nfd-ecommerce-woocommerce-unavailable {
-    background-color: var(--nfd-ecommerce-bg-primary);
-    border-radius: 2px;
-    border: 1px solid var(--nfd-ecommerce-border-primary);
-    display: grid;
-    padding: 0 22px;
-    grid-template-areas:
-      "title illustration"
-      "actions illustration";
-    h1 {
-      color: var(--nfd-ecommerce-accent-primary);
-    }
-
-    .status-notice {
-      color: var(--nfd-ecommerce-text-secondary);
-      font-size: 16px;
-      margin-top: 24px;
-    }
-
-    button {
-      display: block;
-      width: 272px;
-      padding: 10px 24px;
-      border: 2px solid var(--nfd-ecommerce-accent-primary);
-      margin-top: 24px;
-      background-color: var(--nfd-ecommerce-accent-primary);
-      color: white;
-      margin-bottom: 16px;
-      cursor: grab;
-    }
-
-    a {
-      display: block;
-      width: 220px;
-      padding: 10px 24px;
-      border: 2px solid var(--nfd-ecommerce-accent-primary);
-      background-color: white;
-      color: var(--nfd-ecommerce-accent-primary);
-      text-align: center;
-      cursor: grab;
-      text-decoration: none;
-      margin-bottom: 32px;
-    }
-
-    .title {
-      grid-area: title;
-      margin-top: 24px;
-    }
-
-    .actions-container {
-      grid-area: actions;
-    }
-
-    .banner-image {
-      grid-area: illustration;
-      display: flex;
-      align-self: center;
-    }
-
-    @media (max-width: 600px) {
-      grid-template-areas:
-        "title"
-        "illustration"
-        "actions";
-      .wcUnAvailableIllustaration {
-        width: 100%;
-      }
-      h1 {
-        text-align: center;
-      }
-      .status-notice {
-        text-align: center;
-      }
-    }
-  }
-
   .nfd-ecommerce-dashboard {
     min-height: 500px;
     background-color: var(--nfd-ecommerce-bg-tertiary);
@@ -215,6 +142,11 @@
       background: var(--nfd-ecommerce-bg-secondary);
       border-color: var(--nfd-ecommerce-accent-secondary);
     }
+
+    &:disabled {
+      pointer-events: none;
+      filter: opacity(0.2);
+    }
   }
 
   .nfd-ecommerce-card[data-variant="minimal"] {
@@ -271,6 +203,7 @@
       visibility: visible;
     }
   }
+
   .nfd-ecommerce-taskCompleted {
     position: relative;
     .nfd-ecommerce-taskCompleted-image {
@@ -377,11 +310,6 @@
       }
     }
 
-    &:disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-    }
-
     @media (max-width: 960px) {
       grid-template-areas:
         "image description"
@@ -452,30 +380,7 @@
   }
 }
 
-.disableDashboardContent {
-  pointer-events: none;
-  filter: opacity(0.2);
+.nfd-wc-unavailable-msg {
+  color: #f72f26;
 }
 
-.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;
-  }
-}