chore: improve install workflow and use filter

Codeinwp · Jul 12, 2023 · 69bf34f · 69bf34f
1 parent 2b1b58e
commit 69bf34f
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 113 deletions.
diff --git a/assets/js/build/about/about.asset.php b/assets/js/build/about/about.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-components', 'wp-element'), 'version' => '8520c84cc054a28168ba');
+<?php return array('dependencies' => array('wp-components', 'wp-element'), 'version' => '2355cd85367fea2bdefa');
diff --git a/assets/js/build/about/about.css b/assets/js/build/about/about.css
diff --git a/assets/js/build/about/about.js b/assets/js/build/about/about.js
diff --git a/assets/js/src/about/components/ProductPage.js b/assets/js/src/about/components/ProductPage.js
@@ -9,7 +9,7 @@ function Page( props ) {
     return <CurrentPage page={ props.page } />;
 }
 export default function ProductPage({page= {}}) {
-    return (<div className="product-page">
+    return (<div className={'product-page' + ( page && page.product ? ' ' + page.product : '' ) }>
         <Page id={ page.id } page={page}/>
     </div>);
 }
diff --git a/assets/js/src/about/components/pages/Otter.js b/assets/js/src/about/components/pages/Otter.js
@@ -10,15 +10,16 @@ export default function Otter( { page = {} } ) {
 
     const [productStatus, setProductStatus] = useState(plugin.status);
     const [loading, setLoading] = useState(false);
+    const loadingText = 'In Progress';
 
     const runInstall = async () => {
         setLoading(true);
-        await installPluginOrTheme(slug, slug === 'neve').then((res) => {
+        await installPluginOrTheme(product, false).then((res) => {
             if (res.success) {
                 setProductStatus('installed');
+                runActivate();
             }
         });
-        setLoading(false);
     }
 
     const runActivate = async () => {
@@ -40,10 +41,16 @@ export default function Otter( { page = {} } ) {
               <span className="label">Neve + Otter = New Possibilities 🤝</span>
               <h1>{ strings.heading }</h1>
               <p>{ strings.text }</p>
-              {productStatus === 'not-installed' &&
-                  <Button variant="primary" className="otter-button" onClick={runInstall}>{strings.buttons.install_otter_free}</Button>}
-              {productStatus === 'installed' &&
-                  <Button variant="primary" className="otter-button" onClick={runActivate}>{strings.buttons.install_otter_free}</Button>}
+              { ( productStatus === 'not-installed' || productStatus === 'installed') &&
+                  <Button
+                      variant="primary"
+                      disabled={loading}
+                      className={'otter-button' + ( loading ? ' is-loading' : '' )}
+                      onClick={ productStatus === 'not-installed' ? runInstall : runActivate}>
+                      {loading ? (<span><span className="dashicons dashicons-update spin"/>{loadingText}</span>) :  strings.buttons.install_otter_free }
+
+                  </Button>
+              }
           </div>
           <div className="col-3-highlights">
               <div className="col">
@@ -90,10 +97,15 @@ export default function Otter( { page = {} } ) {
               <div className="col">
                   <h2>{strings.testimonials.heading}</h2>
                   <div className="button-row">
-                      {productStatus === 'not-installed' &&
-                          <Button variant="primary" className="otter-button" onClick={runInstall}>{strings.buttons.install_now}</Button>}
-                      {productStatus === 'installed' &&
-                          <Button variant="primary" className="otter-button" onClick={runActivate}>{strings.buttons.install_now}</Button>}
+                      {(productStatus === 'not-installed' || productStatus === 'installed' ) &&
+                          <Button
+                              variant="primary"
+                              disabled={loading}
+                              className={'otter-button' + ( loading ? ' is-loading' : '' )}
+                              onClick={ productStatus === 'not-installed' ? runInstall : runActivate}>
+                              {loading ? (<span><span className="dashicons dashicons-update spin"/>{loadingText}</span>) :  strings.buttons.install_now }
+                          </Button>
+                      }
                       <Button variant="secondary" className="otter-button">{strings.buttons.learn_more}</Button>
                   </div>
               </div>

diff --git a/assets/js/src/about/scss/pages/_generic.scss b/assets/js/src/about/scss/pages/_generic.scss
@@ -86,74 +86,9 @@
     }
   }
 
-  .testimonial-nav {
-    display: flex;
-    gap: 8px;
-    .testimonial-button {
-      width: 10px;
-      height: 10px;
-      background-color: #D9D9D9;
-      margin: 0;
-      padding: 0;
-      border-radius: 50%;
-      &.active {
-        background-color: #ED6F57;
-      }
-    }
-  }
-
-  .testimonial-container {
-    width: 100%;
-    max-width: 450px;
-    display: flex;
-    overflow-x: scroll;
-    scroll-behavior: smooth;
-    margin: 0;
-    padding: 0;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .testimonial {
-      width: 100%;
-      flex: 1 0 100%;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: left;
-      gap: 14px;
-      align-items: center;
-      p {
-        width: 100%;
-        font-size: 14px;
-        line-height: 24px;
-      }
-      h3 {
-        font-size: 16px;
-        line-height: 20px;
-        font-weight: 700;
-        color: #1C1C1C;
-      }
-      img {
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-      }
-    }
-  }
-
   .button-row {
     display: flex;
     gap: 12px;
     margin-top: 48px;
   }
-
-  .otter-button {
-    &.is-primary {
-      background-color: #ED6F57;
-    }
-    &.is-secondary {
-      color: #ED6F57;
-      box-shadow: inset 0 0 0 1px #ED6F57;
-    }
-  }
 }
diff --git a/assets/js/src/about/scss/pages/_otter.scss b/assets/js/src/about/scss/pages/_otter.scss
@@ -0,0 +1,71 @@
+.otter-blocks {
+  .testimonial-nav {
+    display: flex;
+    gap: 8px;
+    .testimonial-button {
+      width: 10px;
+      height: 10px;
+      background-color: #D9D9D9;
+      margin: 0;
+      padding: 0;
+      border-radius: 50%;
+      &.active {
+        background-color: #ED6F57;
+      }
+    }
+  }
+
+  .testimonial-container {
+    width: 100%;
+    max-width: 450px;
+    display: flex;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    margin: 0;
+    padding: 0;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .testimonial {
+      width: 100%;
+      flex: 1 0 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: left;
+      gap: 14px;
+      align-items: center;
+      p {
+        width: 100%;
+        font-size: 14px;
+        line-height: 24px;
+      }
+      h3 {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 700;
+        color: #1C1C1C;
+      }
+      img {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .otter-button {
+    &.is-primary {
+      background-color: #ED6F57;
+    }
+    &.is-secondary {
+      color: #ED6F57;
+      box-shadow: inset 0 0 0 1px #ED6F57;
+    }
+    &.is-loading {
+      background-color: #6C6C6C;
+      color: #FFFFFF;
+    }
+  }
+}
+
diff --git a/src/Modules/About_us.php b/src/Modules/About_us.php
@@ -174,7 +174,7 @@ public function enqueue_about_page_script() {
 	 */
 	private function get_about_localization_data() {
 		$links         = isset( $this->about_data['page_menu'] ) ? $this->about_data['page_menu'] : [];
-		$product_pages = isset( $this->about_data['product_pages'] ) ? $this->about_data['product_pages'] : [ 'otter-page' ];
+		$product_pages = isset( $this->about_data['product_pages'] ) ? $this->about_data['product_pages'] : [];
 
 		return [
 			'links'          => $links,