PRESS4-79 (#25)

* Move SiteStatus to its own section

* Update Banner with new styles

* Add view counter for ecommerce flow

* Refactor styles into different sections

* prioritize comingSoon before view counter

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n'), 'version' => 'e201f968d2ef103319f5');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n'), 'version' => '85f825e716a6d7983399');

includes/ECommerce.php

@@ -22,6 +22,7 @@ class ECommerce {
 		'nfd-ecommerce-captive-flow-paypal',
 		'nfd-ecommerce-captive-flow-shippo',
 		'nfd-ecommerce-onboarding-check',
+		'nfd-ecommerce-counter',
 		'woocommerce_store_address',
 		'woocommerce_store_address_2',
 		'woocommerce_store_city',

src/components/Banner.js

@@ -1,30 +1,55 @@
-import { __ } from "@wordpress/i18n";
-import { ReactComponent as WIPIllustration } from "../icons/wip-illustration.svg";
+import { __ } from '@wordpress/i18n';
+import useSWRImmutable from 'swr/immutable';
+import { ReactComponent as WIPIllustration } from '../icons/store-in-progress.svg';
+import { ReactComponent as StoreLiveIllustration } from '../icons/store-live-illustration.svg';
+import { ReactComponent as NewStoreIllustration } from '../icons/store-online.svg';
+import { Endpoints } from '../services';
+
+const BannerContent = {
+  firstTime: {
+    title: __('Congrats on your new store!', 'wp-module-ecommerce'),
+    notice: __(
+      "You're just a few steps away from sharing your site with the world!",
+      'wp-module-ecommerce'
+    ),
+    Illustration: NewStoreIllustration,
+  },
+  comingSoon: {
+    title: __('Keep up the good work!', 'wp-module-ecommerce'),
+    notice: __(
+      'Your website is currently displaying a "Coming Soon" page.\nFollow the steps below to get your store ready to launch.',
+      'wp-module-ecommerce'
+    ),
+    Illustration: WIPIllustration,
+  },
+  live: {
+    title: __('Ready to go to the next level?', 'wp-module-ecommerce'),
+    notice: __(
+      "Increase your store's performance by helping people find your store and engaging more with them once they have.",
+      'wp-module-ecommerce'
+    ),
+    Illustration: StoreLiveIllustration,
+  },
+};
+
 export function Banner({ state }) {
-  if (state.wp.comingSoon === false) {
-    return null;
-  }
+  let { data: settings } = useSWRImmutable(Endpoints.WP_SETTINGS);
+  let { title, notice, Illustration } = state.wp.comingSoon
+    ? Number(settings?.['nfd-ecommerce-counter'] ?? 0) <= 1
+      ? BannerContent.firstTime
+      : BannerContent.comingSoon
+    : BannerContent.live;
   return (
     <>
-      <div className="nfd-ecommerce-banner">
-        <div style={{ margin: "32px 0 22px" }}>
-          <WIPIllustration />
+      <div className='nfd-ecommerce-banner'>
+        <div>
+          <h1>{title}</h1>
+          <div style={{ height: '24px' }} />
+          <span className='status-notice'>{notice}</span>
         </div>
-        <h1>
-          {__(
-            "Congrats on your new store! Let's get it ready to launch!",
-            "wp-module-ecommerce"
-          )}
-        </h1>
-        <span className="status-notice">
-          {__(
-            `Your site is currently displaying a "Coming Soon" page. Once you are ready, launch your site.`,
-            "wp-module-ecommerce"
-          )}
-        </span>
-        <div style={{ height: "32px" }} />
+        <Illustration className='illustration' />
       </div>
-      <div style={{ height: "32px" }} />
+      <div style={{ height: '32px' }} />
     </>
   );
 }

src/components/Dashboard.js

@@ -9,11 +9,10 @@ import { AdvancedFeatures } from "./AdvancedFeatures";
 import { CustomizeStore } from "./CustomizeStore";
 import { GeneralSettings } from "./GeneralSettings";
 import { ManageProducts } from "./ManageProducts";
-import { SiteStatus } from "./SiteStatus";
 import { useOnboardingCleanup } from "./useOnboardingCleanup";
 import { useSetupYITHWonderTheme } from "./useSetupYITHWonderTheme";
 
-function getStepName(stepKey, state) {
+function getStepName(stepKey) {
   switch (stepKey) {
     case "general":
       return __("Store Info", "wp-module-ecommerce");
@@ -23,10 +22,6 @@ function getStepName(stepKey, state) {
       return __("Pages", "wp-module-ecommerce");
     case "features":
       return __("Additional Features", "wp-module-ecommerce");
-    case "status":
-      return state.wp.comingSoon
-        ? __("Launch Your Store", "wp-module-ecommerce")
-        : __("Site Status", "wp-module-ecommerce");
     default:
       return null;
   }
@@ -36,12 +31,11 @@ const guideSteps = [
   { key: "general", StepContent: GeneralSettings },
   { key: "products", StepContent: ManageProducts },
   { key: "pages", StepContent: CustomizeStore },
-  { key: "features", StepContent: AdvancedFeatures },
-  { key: "status", StepContent: SiteStatus },
+  { key: "features", StepContent: AdvancedFeatures }
 ];
 
 export function Dashboard(props) {
-  const {navigate} = props.wpModules;
+  const { navigate } = props.wpModules;
   const isLargeViewport = useViewportMatch("mobile", ">=");
   let { key, StepContent } =
     guideSteps.find((step) => step.key === props.section) ?? guideSteps[0];
@@ -63,11 +57,11 @@ export function Dashboard(props) {
         >
           {guideSteps.map((step) => (
             <a
-              key={getStepName(step.key, props.state)}
+              key={getStepName(step.key)}
               data-active={key === step.key}
               href={`#/home/store/${step.key}`}
             >
-              <li>{getStepName(step.key, props.state)}</li>
+              <li>{getStepName(step.key)}</li>
             </a>
           ))}
         </nav>
@@ -80,7 +74,7 @@ export function Dashboard(props) {
             {guideSteps.map((tab) => (
               <NavigationItem
                 key={tab.key}
-                title={getStepName(tab.key, props.state)}
+                title={getStepName(tab.key)}
                 navigateToMenu={tab.key}
                 href={`#/home/store/${tab.key}`}
               />

src/components/SiteStatus.js

@@ -1,114 +1,91 @@
 import { useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { ReactComponent as ComingSoonIllustration } from "../icons/coming-soon-illustration.svg";
-import { ReactComponent as LaunchStoreIllustration } from "../icons/launch-store.svg";
 import { ReactComponent as StoreOnlineIllustration } from "../icons/store-online.svg";
-import { DashboardContent } from "./DashboardContent";
 
 const SiteStatusContent = {
-  comingSoon: {
-    title: __("Launch Your Store!", "wp-module-ecommerce"),
-    subtitle: __(
-      "Once you're ready, click the button below to make your store live to the world!",
-      "wp-module-ecommerce"
-    ),
-    Illustration: LaunchStoreIllustration,
-    cta: __("Launch your store", "wp-module-ecommerce"),
-    status: {
-      text: __("Live", "wp-module-ecommerce"),
-      color: "#048200",
-    },
-  },
-  live: {
-    title: __("Change your site status", "wp-module-ecommerce"),
-    subtitle: __(
-      `Your site is currently "Live", but you can disable your site and put back the "Coming Soon" page if needed.`,
-      "wp-module-ecommerce"
-    ),
-    Illustration: ComingSoonIllustration,
-    cta: __(`Switch back to "Coming Soon" mode`, "wp-module-ecommerce"),
-    status: {
-      text: __("Coming Soon", "wp-module-ecommerce"),
-      color: "#E01C1C",
-    },
-  },
+  title: __("Ready to go live?", "wp-module-ecommerce"),
+  subtitle: __(
+    "Preview your store before setting it live to make sure everything is how you want it. Once you're ready, set your store live!",
+    "wp-module-ecommerce"
+  ),
+  cta: __("Launch your store", "wp-module-ecommerce"),
+  status: { text: __("Live", "wp-module-ecommerce"), color: "#048200" },
 };
 
 export function SiteStatus(props) {
   let { wp } = props.state;
   let { toggleComingSoon } = props.actions;
   let { Modal } = props.wpModules;
   let [showModal, setModal] = useState(false);
-  let { title, subtitle, Illustration, cta, status } = wp.comingSoon
-    ? SiteStatusContent.comingSoon
-    : SiteStatusContent.live;
+  let { title, subtitle, cta, status } = SiteStatusContent;
+  if (!wp.comingSoon && !showModal) {
+    return null;
+  }
   return (
-    <DashboardContent title={title} subtitle={subtitle}>
-      <div
-        style={{ display: "grid", placeItems: "center", paddingBottom: "32px" }}
-      >
-        {!wp.comingSoon ? <div style={{ height: "24px" }} /> : null}
-        <Illustration />
-        {!wp.comingSoon ? (
-          <>
-            <div style={{ height: "3px" }} />
-            <button
-              className="nfd-ecommerce-button"
-              data-variant="flat"
-              onClick={() => window.open(window.location.origin, "_blank")}
-            >
-              <h3>{__("Go to your site!", "wp-module-ecommerce")}</h3>
-            </button>
-            <div style={{ height: "16px" }} />
-          </>
+    <>
+      <div style={{ height: "32px" }} />
+      <div className="site-status-banner">
+        <h2>{title}</h2>
+        <div style={{ height: "24px" }} />
+        <div className="content">
+          <p>{subtitle}</p>
+          <button
+            className="nfd-ecommerce-button"
+            data-variant="hollow"
+            onClick={() => window.open(window.location.origin, "_blank")}
+          >
+            <h3>{__("Preview your store", "wp-module-ecommerce")}</h3>
+          </button>
+          <button
+            className="nfd-ecommerce-button"
+            data-variant="flat"
+            onClick={() => {
+              setModal(true);
+              toggleComingSoon().then(() => {
+                let $statusText = document.getElementById(
+                  "nfd-site-status-text"
+                );
+                if ($statusText) {
+                  $statusText.textContent = status.text;
+                  $statusText.style.setProperty("color", status.color);
+                }
+              });
+            }}
+          >
+            <h3>{cta}</h3>
+          </button>
+        </div>
+        {showModal ? (
+          <Modal
+            __experimentalHideHeader
+            overlayClassName="nfd-ecommerce-modal-overlay"
+            className="nfd-ecommerce-atoms nfd-ecommerce-modal nfd-site-live-modal"
+            shouldCloseOnClickOutside
+            onRequestClose={() => setModal(false)}
+          >
+            <div className="nfd-ecommerce-modal-content">
+              <StoreOnlineIllustration style={{ width: "100%" }} className="nfd-ecommerce-hero" />
+              <h1>
+                {__(
+                  "Your store is online and ready for business!",
+                  "wp-module-ecommerce"
+                )}
+              </h1>
+              <span>
+                {__(
+                  `Not ready? You can re-enable the "Coming Soon" mode if you need.`,
+                  "wp-module-ecommerce"
+                )}
+              </span>
+            </div>
+            <div className="nfd-ecommerce-modal-actions">
+              <button onClick={() => setModal(false)}>
+                <h3>{__("Continue", "wp-module-ecommerce")}</h3>
+              </button>
+            </div>
+          </Modal>
         ) : null}
-        <button
-          className="nfd-ecommerce-button"
-          data-variant={wp.comingSoon ? "flat" : "link"}
-          onClick={() => {
-            toggleComingSoon().then(() => {
-              let $statusText = document.getElementById("nfd-site-status-text");
-              if ($statusText) {
-                $statusText.textContent = status.text;
-                $statusText.style.setProperty("color", status.color);
-              }
-              setModal(wp.comingSoon);
-            });
-          }}
-        >
-          <h3>{cta}</h3>
-        </button>
       </div>
-      {showModal ? (
-        <Modal
-          __experimentalHideHeader
-          overlayClassName="nfd-ecommerce-modal-overlay"
-          className="nfd-ecommerce-atoms nfd-ecommerce-modal"
-          shouldCloseOnClickOutside
-          onRequestClose={() => setModal(false)}
-        >
-          <div className="nfd-ecommerce-modal-content">
-            <StoreOnlineIllustration className="nfd-ecommerce-hero" />
-            <h1>
-              {__(
-                "Your store is online and ready for business!",
-                "wp-module-ecommerce"
-              )}
-            </h1>
-            <span>
-              {__(
-                "Not ready? You can re-enable the 'Coming Soon' mode if you need.",
-                "wp-module-ecommerce"
-              )}
-            </span>
-          </div>
-          <div className="nfd-ecommerce-modal-actions">
-            <button onClick={() => setModal(false)}>
-              <h3>{__("Continue", "wp-module-ecommerce")}</h3>
-            </button>
-          </div>
-        </Modal>
-      ) : null}
-    </DashboardContent>
+    </>
   );
 }

src/components/useOnboardingCleanup.js

@@ -26,6 +26,12 @@ export function useOnboardingCleanup(hash) {
       let previousCheckpoint = Number(
         settings['nfd-ecommerce-onboarding-check']
       );
+      let viewCounter = Number(settings['nfd-ecommerce-counter']);
+      await updateWPSettings({
+        'nfd-ecommerce-counter': String(
+          isNaN(viewCounter) ? 1 : viewCounter + 1
+        ),
+      });
       if (isNaN(previousCheckpoint) || previousCheckpoint < flowCheckpoint) {
         let { productInfo } = flow.storeDetails;
         let wcOnboardingProfile = {};

src/index.js

@@ -2,6 +2,7 @@ import apiFetch from "@wordpress/api-fetch";
 import useSWR, { SWRConfig } from "swr";
 import { Banner } from "./components/Banner";
 import { Dashboard } from "./components/Dashboard";
+import { SiteStatus } from "./components/SiteStatus";
 import { StoreAnalytics } from "./components/StoreAnalytics";
 import { WooCommerceUnavailable } from "./components/WooCommerceUnavailable";
 import { Endpoints } from "./services";
@@ -43,6 +44,7 @@ window.NewfoldECommerce = function NewfoldECommerce(props) {
             <Hero plugins={plugins} {...props} />
             <StoreAnalytics plugins={plugins} {...props}/>
             <Dashboard plugins={plugins} {...props} />
+            <SiteStatus plugins={plugins} {...props} />
           </>
         )}
       </div>