From 8f80b527f5883adbdc8c3b70183a84754f1e151a Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Fri, 5 May 2017 13:46:58 -0500
Subject: [PATCH] start onboarding-panel-4 for site assignments

---
 webextension/js/popup.js | 28 ++++++++++++++++++++++++++--
 webextension/popup.html  |  7 +++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 7ed2b50..71a123f 100644
--- a/webextension/js/popup.js
+++ b/webextension/js/popup.js
@@ -12,6 +12,7 @@ const DEFAULT_ICON = "circle";
 const P_ONBOARDING_1     = "onboarding1";
 const P_ONBOARDING_2     = "onboarding2";
 const P_ONBOARDING_3     = "onboarding3";
+const P_ONBOARDING_4     = "onboarding4";
 const P_CONTAINERS_LIST  = "containersList";
 const P_CONTAINERS_EDIT  = "containersEdit";
 const P_CONTAINER_INFO   = "containerInfo";
@@ -69,8 +70,10 @@ const Logic = {
     // Routing to the correct panel.
     .then(() => {
       // If localStorage is disabled, we don't show the onboarding.
-      if (!localStorage || localStorage.getItem("onboarded3")) {
+      if (!localStorage || localStorage.getItem("onboarded4")) {
         this.showPanel(P_CONTAINERS_LIST);
+      } else if (localStorage.getItem("onboarded3")) {
+        this.showPanel(P_ONBOARDING_4);
       } else if (localStorage.getItem("onboarded2")) {
         this.showPanel(P_ONBOARDING_3);
       } else if (localStorage.getItem("onboarded1")) {
@@ -215,8 +218,29 @@ Logic.registerPanel(P_ONBOARDING_3, {
   // This method is called when the object is registered.
   initialize() {
     // Let's move to the containers list panel.
-    document.querySelector("#onboarding-done-button").addEventListener("click", () => {
+    document.querySelector("#onboarding-almost-done-button").addEventListener("click", () => {
       localStorage.setItem("onboarded3", true);
+      Logic.showPanel(P_ONBOARDING_4);
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});
+
+// P_ONBOARDING_4: Fourth page for Onboarding.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_ONBOARDING_4, {
+  panelSelector: ".onboarding-panel-4",
+
+  // This method is called when the object is registered.
+  initialize() {
+    // Let's move to the containers list panel.
+    document.querySelector("#onboarding-done-button").addEventListener("click", () => {
+      localStorage.setItem("onboarded4", true);
       Logic.showPanel(P_CONTAINERS_LIST);
     });
   },
diff --git a/webextension/popup.html b/webextension/popup.html
index fafc66d..5264b11 100644
--- a/webextension/popup.html
+++ b/webextension/popup.html
@@ -27,6 +27,13 @@
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
     <p>Start with the containers we've created, or create your own.</p>
+    <a href="#" id="onboarding-almost-done-button" class="onboarding-button">Next</a>
+  </div>
+
+  <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
+    <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
+    <h3 class="onboarding-title">Assign your favorite sites to containers..</h3>
+    <p>Assign your favorite sites to automatically open in containers.</p>
     <a href="#" id="onboarding-done-button" class="onboarding-button">Done</a>
   </div>