add module step to wizard (#2617)

* chore: remove translations attribute from controls

* feat: correctly toggle checked state of checkboxes

* feat: add confirm step

* feat: add the real modules into the data set

* feat: split use case selection out of modules

also make multiple use cases selectable

* fix: padding on toggle buttons

* feat: select modules according to use case chosen

* feat: remember options selected if navigating back to use case page

* feat: update modules on api call

* feat: add intro and celebration steps

* fix: use empty to test if module is enabled/disabled

* fix: use a discord link with no expiration or limits

dt-core/admin/admin-settings-endpoints.php

@@ -223,6 +223,31 @@ public function add_api_routes() {
                 'permission_callback' => [ $this, 'default_permission_check' ],
             ]
         );
+
+        register_rest_route(
+            $this->namespace, '/modules-update', [
+                'methods' => 'POST',
+                'callback' => [ $this, 'update_modules' ],
+                'permission_callback' => [ $this, 'default_permission_check' ],
+            ]
+        );
+    }
+
+    public function update_modules( WP_REST_REQUEST $request ) {
+        $modules_option_name = 'dt_post_type_modules';
+        $modules_to_update = $request->get_param( 'modules' );
+        $modules_to_update = dt_recursive_sanitize_array( $modules_to_update );
+
+        $modules = dt_get_option( $modules_option_name );
+
+        foreach ( $modules as $key => $module ) {
+            if ( array_key_exists( $key, $modules_to_update ) ) {
+                $modules[$key]['enabled'] = !empty( $modules_to_update[$key] ) ? true : false;
+            }
+        }
+
+        update_option( $modules_option_name, $modules );
+        return true;
     }
 
     public function update_languages( WP_REST_REQUEST $request ) {

dt-core/admin/components/setup-wizard-celebration.js

@@ -0,0 +1,48 @@
+import { html } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { OpenLitElement } from './setup-wizard-open-element.js';
+
+export class SetupWizardCelebration extends OpenLitElement {
+  static get properties() {
+    return {
+      step: { type: Object },
+    };
+  }
+
+  back() {
+    this.dispatchEvent(new CustomEvent('back'));
+  }
+  next() {
+    window.location.href = window.setupWizardShare.admin_url;
+  }
+
+  render() {
+    return html`
+      <div class="cover">
+        <h2>All finished</h2>
+        <div class="content flow">
+          <p>
+            You can change all of these choices in the Settings (D.T.) tab in
+            the WP admin.
+          </p>
+          <p>
+            D.T. has a huge ability to be customized to serve your needs. If you
+            have any questions or need any further assistance in getting D.T. to
+            work for you, please reach out on our community forum or our discord
+            channel.
+          </p>
+          <a href="https://community.disciple.tools/" target="_blank">
+            Community Forum
+          </a>
+          <a href="https://discord.gg/vrrcXYwwTU" target="_blank">
+            Discord Invitation
+          </a>
+        </div>
+        <setup-wizard-controls
+          @next=${this.next}
+          @back=${this.back}
+        ></setup-wizard-controls>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-celebration', SetupWizardCelebration);

dt-core/admin/components/setup-wizard-controls.js

@@ -4,7 +4,6 @@ import { OpenLitElement } from './setup-wizard-open-element.js';
 export class SetupWizardControls extends OpenLitElement {
   static get properties() {
     return {
-      translations: { type: Object },
       hideBack: { type: Boolean },
       backLabel: { type: String },
       nextLabel: { type: String },

dt-core/admin/components/setup-wizard-intro.js

@@ -0,0 +1,51 @@
+import { html } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { OpenLitElement } from './setup-wizard-open-element.js';
+
+export class SetupWizardIntro extends OpenLitElement {
+  static get properties() {
+    return {
+      step: { type: Object },
+    };
+  }
+
+  back() {
+    this.dispatchEvent(new CustomEvent('back'));
+  }
+  next() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
+
+  render() {
+    return html`
+      <div class="cover">
+        <h2>Setting up D.T. for you</h2>
+        <div class="content">
+          <p>
+            We're glad you are here, and want to help set you up so you can take
+            advantage of the powertool that is D.T.
+          </p>
+          <p>
+            D.T. can be used in many ways from managing connections and
+            relationships, all the way through to tracking and managing a
+            movement of Disciple Making.
+          </p>
+          <p>
+            In order to help you, we want to take you through a series of
+            choices to give you the best start at getting Disiple.Tools setup
+            ready to suit your needs.
+          </p>
+          <p>
+            Feel free to skip this setup stage if you already know what you
+            need. But if this will be helpful for you let's dive in.
+          </p>
+        </div>
+        <setup-wizard-controls
+          hideBack
+          @next=${this.next}
+          @back=${this.back}
+        ></setup-wizard-controls>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-intro', SetupWizardIntro);