From 42f565af2177eb21ca7840a191911635736490c6 Mon Sep 17 00:00:00 2001
From: Nath <nathinabob@gmail.com>
Date: Wed, 18 Dec 2024 13:41:41 +0000
Subject: [PATCH] feat: add ability to skip steps

---
 .../admin/components/setup-wizard-celebration.js |  7 +++++++
 .../admin/components/setup-wizard-controls.js    | 16 ++++++++++++++--
 dt-core/admin/components/setup-wizard-intro.js   |  1 +
 dt-core/admin/components/setup-wizard-modules.js |  5 +++++
 dt-core/admin/components/setup-wizard-plugins.js |  4 ++++
 .../admin/components/setup-wizard-use-cases.js   |  5 +++++
 dt-core/admin/components/setup-wizard.js         | 12 +++++++++++-
 dt-core/admin/menu/menu-setup-wizard.php         |  2 ++
 8 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/dt-core/admin/components/setup-wizard-celebration.js b/dt-core/admin/components/setup-wizard-celebration.js
index b68e7b21f..9ddd79c91 100644
--- a/dt-core/admin/components/setup-wizard-celebration.js
+++ b/dt-core/admin/components/setup-wizard-celebration.js
@@ -8,6 +8,11 @@ export class SetupWizardCelebration extends OpenLitElement {
     };
   }
 
+  constructor() {
+    super();
+    this.translations = window.setupWizardShare.translations;
+  }
+
   back() {
     this.dispatchEvent(new CustomEvent('back'));
   }
@@ -38,6 +43,8 @@ export class SetupWizardCelebration extends OpenLitElement {
           </a>
         </div>
         <setup-wizard-controls
+          hideSkip
+          nextLabel=${this.translations.finish}
           @next=${this.next}
           @back=${this.back}
         ></setup-wizard-controls>
diff --git a/dt-core/admin/components/setup-wizard-controls.js b/dt-core/admin/components/setup-wizard-controls.js
index 6bf031a69..6be49e1cc 100644
--- a/dt-core/admin/components/setup-wizard-controls.js
+++ b/dt-core/admin/components/setup-wizard-controls.js
@@ -5,8 +5,10 @@ export class SetupWizardControls extends OpenLitElement {
   static get properties() {
     return {
       hideBack: { type: Boolean },
+      hideSkip: { type: Boolean },
       backLabel: { type: String },
       nextLabel: { type: String },
+      skipLabel: { type: String },
     };
   }
   back() {
@@ -15,16 +17,26 @@ export class SetupWizardControls extends OpenLitElement {
   next() {
     this.dispatchEvent(new CustomEvent('next'));
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('skip'));
+  }
   render() {
     return html`
       <div class="cluster" position="end">
+        ${this.hideSkip
+          ? ''
+          : html`
+              <button @click=${this.skip} class="btn-outline">
+                ${this.skipLabel ?? 'Skip'}
+              </button>
+            `}
         ${this.hideBack
           ? ''
           : html`
-              <button @click=${this.back}>${this.backLabel ?? 'back'}</button>
+              <button @click=${this.back}>${this.backLabel ?? 'Back'}</button>
             `}
         <button @click=${this.next} class="btn-primary">
-          ${this.nextLabel ?? 'next'}
+          ${this.nextLabel ?? 'Next'}
         </button>
       </div>
     `;
diff --git a/dt-core/admin/components/setup-wizard-intro.js b/dt-core/admin/components/setup-wizard-intro.js
index cdb6fd995..96eaee140 100644
--- a/dt-core/admin/components/setup-wizard-intro.js
+++ b/dt-core/admin/components/setup-wizard-intro.js
@@ -41,6 +41,7 @@ export class SetupWizardIntro extends OpenLitElement {
         </div>
         <setup-wizard-controls
           hideBack
+          hideSkip
           @next=${this.next}
           @back=${this.back}
         ></setup-wizard-controls>
diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
index a17d5d4e9..2a4f862e5 100644
--- a/dt-core/admin/components/setup-wizard-modules.js
+++ b/dt-core/admin/components/setup-wizard-modules.js
@@ -71,6 +71,9 @@ export class SetupWizardModules extends OpenLitElement {
         break;
     }
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   nextLabel() {
     return this.translations.next;
   }
@@ -164,8 +167,10 @@ export class SetupWizardModules extends OpenLitElement {
         <setup-wizard-controls
           nextLabel=${this.nextLabel()}
           backLabel=${this.translations.back}
+          skipLabel=${this.translations.skip}
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;
diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js
index 1311a4b15..4758a38ba 100644
--- a/dt-core/admin/components/setup-wizard-plugins.js
+++ b/dt-core/admin/components/setup-wizard-plugins.js
@@ -28,6 +28,9 @@ export class SetupWizardPlugins extends OpenLitElement {
   back() {
     this.dispatchEvent(new CustomEvent('back'));
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   async next() {
     const plugins_to_install = this.plugins.filter((plugin) => plugin.selected);
 
@@ -123,6 +126,7 @@ export class SetupWizardPlugins extends OpenLitElement {
           nextLabel="install and activate selected plugins"
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;
diff --git a/dt-core/admin/components/setup-wizard-use-cases.js b/dt-core/admin/components/setup-wizard-use-cases.js
index 81191de45..8bf366ef3 100644
--- a/dt-core/admin/components/setup-wizard-use-cases.js
+++ b/dt-core/admin/components/setup-wizard-use-cases.js
@@ -77,6 +77,9 @@ export class SetupWizardUseCases extends OpenLitElement {
         break;
     }
   }
+  skip() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
   nextLabel() {
     switch (this.stage) {
       case 'work':
@@ -167,8 +170,10 @@ export class SetupWizardUseCases extends OpenLitElement {
           ?hideBack=${this.firstStep && this.stage === 'prompt'}
           nextLabel=${this.nextLabel()}
           backLabel=${this.translations.back}
+          skipLabel=${this.translations.skip}
           @next=${this.next}
           @back=${this.back}
+          @skip=${this.skip}
         ></setup-wizard-controls>
       </div>
     `;
diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
index b1e1ad71f..21c722643 100644
--- a/dt-core/admin/components/setup-wizard.js
+++ b/dt-core/admin/components/setup-wizard.js
@@ -60,7 +60,7 @@ export class SetupWizard extends LitElement {
         border-radius: 8px;
         cursor: pointer;
         background-color: var(--default-color);
-        transition: background-color 120ms linear;
+        transition: all 120ms linear;
       }
       button:hover,
       button:active,
@@ -165,6 +165,16 @@ export class SetupWizard extends LitElement {
       .btn-primary:active {
         background-color: var(--primary-hover-color);
       }
+      .btn-outline {
+        border: 1px solid transparent;
+        background-color: transparent;
+        color: var(--primary-color);
+      }
+      .btn-outline:hover,
+      .btn-outline:focus {
+        border-color: var(--primary-color);
+        background-color: transparent;
+      }
       .btn-card {
         background-color: var(--primary-color);
         color: var(--default-color);
diff --git a/dt-core/admin/menu/menu-setup-wizard.php b/dt-core/admin/menu/menu-setup-wizard.php
index 778476bad..b0e419c26 100644
--- a/dt-core/admin/menu/menu-setup-wizard.php
+++ b/dt-core/admin/menu/menu-setup-wizard.php
@@ -59,6 +59,8 @@ public function enqueue_scripts(){
                 'submit' => esc_html__( 'Submit', 'disciple_tools' ),
                 'confirm' => esc_html__( 'Confirm', 'disciple_tools' ),
                 'back' => esc_html__( 'Back', 'disciple_tools' ),
+                'skip' => esc_html__( 'Skip', 'disciple_tools' ),
+                'finish' => esc_html__( 'Finish', 'disciple_tools' ),
             ],
             'steps' => $this->setup_wizard_steps(),
             'data' => $this->setup_wizard_data(),