feat: add setup wizard menu page

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

@@ -0,0 +1,34 @@
+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 SetupWizardControls extends OpenLitElement {
+  static get properties() {
+    return {
+      translations: { type: Object },
+      hideBack: { type: Boolean },
+      backLabel: { type: String },
+      nextLabel: { type: String },
+    };
+  }
+  back() {
+    this.dispatchEvent(new CustomEvent('back'));
+  }
+  next() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
+  render() {
+    return html`
+      <div class="cluster" position="end">
+        ${this.hideBack
+          ? ''
+          : html`
+              <button @click=${this.back}>${this.backLabel ?? 'back'}</button>
+            `}
+        <button @click=${this.next} class="btn-primary">
+          ${this.nextLabel ?? 'next'}
+        </button>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-controls', SetupWizardControls);

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

@@ -0,0 +1,43 @@
+import {
+  html,
+  css,
+} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { OpenLitElement } from './setup-wizard-open-element.js';
+
+export class SetupWizardDetails extends OpenLitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      step: { type: Object },
+      firstStep: { type: Boolean },
+    };
+  }
+
+  back() {
+    this.dispatchEvent(new CustomEvent('back'));
+  }
+  next() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
+
+  render() {
+    return html`
+      <div class="cover">
+        <div class="content">Sort out details here</div>
+        <setup-wizard-controls
+          ?hideBack=${this.firstStep}
+          @next=${this.next}
+          @back=${this.back}
+        ></setup-wizard-controls>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-details', SetupWizardDetails);

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

@@ -0,0 +1,189 @@
+import {
+  html,
+  css,
+  repeat,
+} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { OpenLitElement } from './setup-wizard-open-element.js';
+
+export class SetupWizardModules extends OpenLitElement {
+  static get properties() {
+    return {
+      step: { type: Object },
+      firstStep: { type: Boolean },
+      stage: { type: String, attribute: false },
+      useCases: { type: Array, attribute: false },
+      option: { type: Object, attribute: false },
+      availableModules: { type: Array, attribute: false },
+      selectedModules: { type: Array, attribute: false },
+    };
+  }
+
+  constructor() {
+    super();
+    this.stage = 'work';
+    this.data = window.setupWizardShare.data;
+    this.useCases = [];
+    this.option = {};
+    this.availableModules = [];
+    this.selectedModules = [];
+  }
+
+  firstUpdated() {
+    /* Reduce the keys down to ones that exist in the details list of use cases */
+    const useCaseKeys = this.step.config.reduce((keys, key) => {
+      if (this.data.use_cases[key]) {
+        return [...keys, key];
+      }
+      return keys;
+    }, []);
+    this.useCases = useCaseKeys.map(
+      (useCaseKey) => this.data.use_cases[useCaseKey],
+    );
+    this.availableModules = this.data.modules;
+  }
+
+  back() {
+    switch (this.stage) {
+      case 'follow-up':
+        this.stage = 'work';
+        break;
+      case 'work':
+        this.stage = 'prompt';
+        break;
+      case 'prompt':
+        this.dispatchEvent(new CustomEvent('back'));
+        break;
+    }
+  }
+  next() {
+    switch (this.stage) {
+      case 'prompt':
+        this.stage = 'work';
+        break;
+      case 'work':
+        /* TODO: fire off to the API here */
+        this.stage = 'follow-up';
+        break;
+      case 'follow-up':
+        this.dispatchEvent(new CustomEvent('next'));
+        break;
+    }
+  }
+  selectOption(option) {
+    this.option = option;
+    this.selectedModules = option.recommended_modules;
+  }
+  toggleModule(key) {
+    if (this.selectedModules.includes(key)) {
+      const index = this.selectedModules.findIndex((module) => module === key);
+      this.selectedModules = [
+        ...this.selectedModules.slice(0, index),
+        ...this.selectedModules.slice(index + 1),
+      ];
+    } else {
+      this.selectedModules = [...this.selectedModules, key];
+    }
+  }
+
+  render() {
+    return html`
+      <div class="cover">
+        <div class="content flow">
+          ${this.stage === 'prompt'
+            ? html`
+                <h2>Time to customize what fields are available.</h2>
+                <p>
+                  In the next step you will be able to choose between some
+                  common use cases of Disciple.Tools
+                </p>
+                <p>
+                  You will still be able to customize to your particular use
+                  case.
+                </p>
+              `
+            : ''}
+          ${this.stage === 'work'
+            ? html`
+                <h2>Choose a use case</h2>
+                <p>
+                  Choose one of these use cases to tailor what parts of
+                  Disciple.Tools to turn on.
+                </p>
+                <p>
+                  You can fine tune those choices further to your own needs.
+                </p>
+                <div class="decisions">
+                  <div class="grid">
+                    ${this.useCases && this.useCases.length > 0
+                      ? this.useCases.map(
+                          (option) => html`
+                            <button
+                              class="btn-card ${this.option.key === option.key
+                                ? 'selected'
+                                : ''}"
+                              data-key=${option.key}
+                              @click=${() => this.selectOption(option)}
+                            >
+                              <h3 class="white">${option.name}</h3>
+                              <p>${option.description ?? ''}</p>
+                            </button>
+                          `,
+                        )
+                      : ''}
+                  </div>
+                </div>
+                <section>
+                  <h2>Available Modules</h2>
+                  <div class="modules">
+                    ${Object.keys(this.availableModules).length > 0
+                      ? html`
+                          <div class="flow" size="small">
+                            ${repeat(
+                              this.availableModules,
+                              (module) => module.key,
+                              (module) => {
+                                return html`
+                                  <label class="toggle" key=${module.key}>
+                                    <input
+                                      type="checkbox"
+                                      ?checked=${this.selectedModules.includes(
+                                        module.key,
+                                      )}
+                                      @change=${() =>
+                                        this.toggleModule(module.key)}
+                                    />
+                                    <div class="flow">
+                                      <h3>${module.name}</h3>
+                                      <p>${module.description}</p>
+                                    </div>
+                                  </label>
+                                `;
+                              },
+                            )}
+                          </div>
+                        `
+                      : ''}
+                  </div>
+                </section>
+              `
+            : ''}
+          ${this.stage === 'follow-up'
+            ? html`
+                <h2>Your choices have been implemented</h2>
+                <p>
+                  You can make further changes to the way D.T. works in the
+                  'Settings (DT)' section of the Wordpress admin.
+                </p>
+              `
+            : ''}
+        </div>
+        <setup-wizard-controls
+          ?hideBack=${this.firstStep && this.stage === 'prompt'}
+          @next=${this.next}
+          @back=${this.back}
+        ></setup-wizard-controls>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-modules', SetupWizardModules);

dt-core/admin/components/setup-wizard-open-element.js

@@ -0,0 +1,7 @@
+import { LitElement } from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+
+export class OpenLitElement extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+}

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

@@ -0,0 +1,43 @@
+import {
+  html,
+  css,
+} from 'https://cdn.jsdelivr.net/gh/lit/[email protected]/all/lit-all.min.js';
+import { OpenLitElement } from './setup-wizard-open-element.js';
+
+export class SetupWizardPlugins extends OpenLitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
+
+  static get properties() {
+    return {
+      step: { type: Object },
+      firstStep: { type: Boolean },
+    };
+  }
+
+  back() {
+    this.dispatchEvent(new CustomEvent('back'));
+  }
+  next() {
+    this.dispatchEvent(new CustomEvent('next'));
+  }
+
+  render() {
+    return html`
+      <div class="cover">
+        <div class="content">Sort out plugins here</div>
+        <setup-wizard-controls
+          ?hideBack=${this.firstStep}
+          @next=${this.next}
+          @back=${this.back}
+        ></setup-wizard-controls>
+      </div>
+    `;
+  }
+}
+customElements.define('setup-wizard-plugins', SetupWizardPlugins);