From d36dd9ce965e9114d3dd2612d1a3463c34c33578 Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Sat, 18 Jun 2022 10:48:14 +1000
Subject: [PATCH] guided tour for user groups

Includes adding creating a new group.
---
 bookwyrm/templates/groups/group.html      |   8 +-
 bookwyrm/templates/groups/members.html    |   2 +-
 bookwyrm/templates/guided_tour/group.html | 131 ++++++++++++++++++++++
 3 files changed, 139 insertions(+), 2 deletions(-)
 create mode 100644 bookwyrm/templates/guided_tour/group.html

diff --git a/bookwyrm/templates/groups/group.html b/bookwyrm/templates/groups/group.html
index 5f5b58601..2e2f12437 100644
--- a/bookwyrm/templates/groups/group.html
+++ b/bookwyrm/templates/groups/group.html
@@ -22,7 +22,7 @@
         </p>
     </div>
     {% if request.user.is_authenticated and group|is_member:request.user %}
-    <div class="column is-narrow is-flex">
+    <div class="column is-narrow is-flex" id="create_group_list_button">
         {% trans "Create List" as button_text %}
         {% include 'snippets/toggle/open_button.html' with controls_text="create_list" icon_with_text="plus" text=button_text focus="create_list_header" %}
     </div>
@@ -80,3 +80,9 @@
 </div>
 
 {% endblock %}
+
+{% block scripts %}
+{% if user.show_guided_tour %}
+    {% include 'guided_tour/group.html' %}
+{% endif %}
+{% endblock %}
diff --git a/bookwyrm/templates/groups/members.html b/bookwyrm/templates/groups/members.html
index e9c9047c9..2fb48b25c 100644
--- a/bookwyrm/templates/groups/members.html
+++ b/bookwyrm/templates/groups/members.html
@@ -10,7 +10,7 @@
         <div class="control">
             <input type="text" name="user_query" value="{{ request.GET.user_query }}" class="input" placeholder="{% trans 'Search to add a user' %}" aria-label="{% trans 'Search to add a user' %}">
         </div>
-        <div class="control">
+        <div class="control" id="group_member_search_button">
             <button class="button" type="submit">
                 <span class="icon icon-search" title="{% trans 'Search' %}">
                     <span class="is-sr-only">{% trans "Search" %}</span>
diff --git a/bookwyrm/templates/guided_tour/group.html b/bookwyrm/templates/guided_tour/group.html
new file mode 100644
index 000000000..619c48929
--- /dev/null
+++ b/bookwyrm/templates/guided_tour/group.html
@@ -0,0 +1,131 @@
+{% load i18n %}
+{% csrf_token %}
+
+<script>
+    // TODO: put this with the token back in general layout so it can be called from any tour
+    // TODO: account for smaller screen view in all tours
+    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+    function disableTour() {
+        fetch('/guided-tour/False', {
+            headers: {
+                'X-CSRFToken': csrftoken,
+            },
+            method: 'POST', 
+            redirect: 'follow',
+            mode: 'same-origin',
+        })
+        .then( resp => {console.log(resp.statusText) })
+    }
+    const tour = new Shepherd.Tour({
+        exitOnEsc: true,
+    });
+
+    tour.addSteps([
+        {
+            text: "{% trans 'This is the home page of your new group! This is where you can add and remove users, create user-curated lists, and edit the group details.' %}",
+            title: "{% trans 'Your group' %}",
+            buttons: [
+                {
+                    action() {
+                        disableTour();
+                        return this.complete();
+                    },
+                    secondary: true,
+                    text: "{% trans 'End Tour' %}",
+                    classes: "is-danger",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Use this search box to find users to join your group. Currently users must be invited by the group owner.' %}",
+            title: "{% trans 'Find users' %}",
+            attachTo: {
+                element: "#group_member_search_button",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Your group members will appear here. The group owner is marked with a star symbol.' %}",
+            title: "{% trans 'Group members' %}",
+            attachTo: {
+                element: '[title="Manager"]',
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Groups can have group-curated lists. We haven\'t discussed lists yet, so now let\s fix that.' %}\
+            <br><br>\
+            {% trans 'Click on the button to create a list.' %}",
+            title: "{% trans 'Group lists' %}",
+            attachTo: {
+                element: "#create_group_list_button",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'todo' %}",
+            title: "{% trans 'TODO' %}",
+            buttons: [
+                {
+                    action() {
+                        return this.complete();
+                    },
+                    text: "{% trans 'Ok' %}",
+                },
+            ],
+        },
+    ])
+
+    tour.start()
+</script>