From bc4a1c6c41a60436c143ada8e8f38a9f51628240 Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Sun, 19 Jun 2022 14:06:36 +1000
Subject: [PATCH] Guided tour of book page

This is intended to be one of the earlier pages in the tour. It should show users the concept of reading status, editions, and other useful points.
---
 bookwyrm/templates/book/book.html        |   7 +-
 bookwyrm/templates/guided_tour/book.html | 149 +++++++++++++++++++++++
 2 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 bookwyrm/templates/guided_tour/book.html

diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html
index e7d10f4f3..fe0b87e7e 100644
--- a/bookwyrm/templates/book/book.html
+++ b/bookwyrm/templates/book/book.html
@@ -210,7 +210,7 @@
 
                 {% with work=book.parent_work %}
                 <p>
-                    <a href="{{ work.local_path }}/editions">
+                    <a href="{{ work.local_path }}/editions" id="other-editions-link">
                         {% blocktrans trimmed count counter=work.editions.count with count=work.editions.count|intcomma %}
                             {{ count }} edition
                             {% plural %}
@@ -392,7 +392,7 @@
             </section>
             {% endif %}
 
-            <section class="content block">
+            <section class="content block" id="book-file-links">
                 {% include "book/file_links/links.html" %}
             </section>
         </div>
@@ -405,4 +405,7 @@
 {% block scripts %}
 <script src="{% static "js/tabs.js" %}?v={{ js_cache }}"></script>
 <script src="{% static "js/autocomplete.js" %}?v={{ js_cache }}"></script>
+{% if user.show_guided_tour %}
+    {% include 'guided_tour/book.html' %}
+{% endif %}
 {% endblock %}
diff --git a/bookwyrm/templates/guided_tour/book.html b/bookwyrm/templates/guided_tour/book.html
new file mode 100644
index 000000000..33001b256
--- /dev/null
+++ b/bookwyrm/templates/guided_tour/book.html
@@ -0,0 +1,149 @@
+{% load i18n %}
+
+<script>
+    const tour = new Shepherd.Tour({
+        exitOnEsc: true,
+    });
+
+    tour.addSteps([
+        {
+            text: "{% trans 'This is home page of a book. Let\s see what you can do while you are here!' %}",
+            title: "{% trans 'Book page' %}",
+            buttons: [
+                {
+                    action() {
+                        disableGuidedTour(csrf_token);
+                        return this.complete();
+                    },
+                    secondary: true,
+                    text: "{% trans 'End Tour' %}",
+                    classes: "is-danger",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'This is where you can set a reading status for this book. You can press the button to move to the next stage, or use the drop down button to select the reading status you want to set.' %}",
+            title: "{% trans 'Reading status' %}",
+            attachTo: {
+                element: "div[data-shelve-button-book]",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'There can be multiple editions of a book, in various formats or languages. You may wish to view a different edition (for example if you are setting a reading status). ' %}",
+            title: "{% trans 'Other editions' %}",
+            attachTo: {
+                element: "#other-editions-link",
+                on: "top-start",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Some ebooks can be downloaded for free from external sources. They will be shown here.' %}",
+            title: "{% trans 'Download links' %}",
+            attachTo: {
+                element: "#book-file-links",
+                on: "left",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'If you have already read this book you can add your reading dates here. Note that adding read-through dates manually will not automatically add them to your ' %}\
+            <code>\
+            {% trans 'Read' %}\
+            </code>\
+            {% trans ' or '%}\
+            <code>\
+            {% trans 'Reading' %}\
+            </code>\
+            {% trans ' shelves.'%}",
+            title: "{% trans 'Add readthrough dates' %}",
+            attachTo: {
+                element: "button[data-modal-open='add-readthrough']",
+                on: "top",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        },
+        {
+            text: "{% trans 'Let\'s continue the tour by selecting \'Your Books\' from the drop down menu.' %}",
+            title: "{% trans 'Next' %}",
+            attachTo: {
+                element: "summary[aria-label='View profile and more']",
+                on: "left",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.complete();
+                    },
+                    text: "{% trans 'Ok' %}",
+                },
+            ],
+        },
+    ])
+
+    tour.start()
+</script>