From fef66a7cfe021c64d7691d9f027cc810c682e3ea Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Sun, 19 Jun 2022 11:08:01 +1000
Subject: [PATCH] guided tour for book search

Adds a guided tour for book search page including logic for differing messages depending on what results are visible.
---
 bookwyrm/templates/guided_tour/search.html | 191 +++++++++++++++++++++
 bookwyrm/templates/search/book.html        |   8 +-
 bookwyrm/templates/search/layout.html      |  10 +-
 3 files changed, 203 insertions(+), 6 deletions(-)
 create mode 100644 bookwyrm/templates/guided_tour/search.html

diff --git a/bookwyrm/templates/guided_tour/search.html b/bookwyrm/templates/guided_tour/search.html
new file mode 100644
index 000000000..868d9b819
--- /dev/null
+++ b/bookwyrm/templates/guided_tour/search.html
@@ -0,0 +1,191 @@
+{% load i18n %}
+
+<script>
+
+    let localResult = document.querySelector(".local-book-search-result");
+    let remoteResult = document.querySelector(".remote-book-search-result");
+    let otherCatalogues = document.querySelector("#load-from-other-catalogues");
+    let manuallyAdd = document.querySelector("#manually-add-book");
+    const tour = new Shepherd.Tour({
+        exitOnEsc: true,
+    });
+
+    console.log("remote", remoteResult)
+
+    if (remoteResult) {
+        tour.addStep(
+        {
+            text: "{% trans 'If the book you are looking for is available on a remote catalogue such as Open Library, click on' %}\
+            <code>\
+            {% trans 'Import book' %}\
+            </code>.",
+            title: "{% trans 'Searching' %}",
+            attachTo: {
+                element: ".remote-book-search-result",
+                on: "top",
+            },
+            buttons: [
+                {
+                    action() {
+                        disableGuidedTour(csrf_token);
+                        return this.complete();
+                    },
+                    secondary: true,
+                    text: "{% trans 'End Tour' %}",
+                    classes: "is-danger guided-tour-cancel-button",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        });
+    } else if (localResult) {
+    tour.addStep(
+        {
+            text: "{% trans 'If the book you are looking for is already on this server, you can click on the title to go to the book\'s page.' %}",
+            title: "{% trans 'Searching' %}",
+            attachTo: {
+                element: ".local-book-search-result",
+                on: "top",
+            },
+            buttons: [
+                {
+                    action() {
+                        disableGuidedTour(csrf_token);
+                        return this.complete();
+                    },
+                    secondary: true,
+                    text: "{% trans 'End Tour' %}",
+                    classes: "is-danger guided-tour-cancel-button",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        });
+    }
+
+    if (otherCatalogues) {
+        tour.addStep({
+            text: "{% trans 'If the book you are looking for is not listed, try loading more records from other sources like Open Library or Inventaire.' %}",
+            title: "{% trans 'Load more records' %}",
+            attachTo: {
+                element: "#load-from-other-catalogues",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        })
+    }
+
+    if (manuallyAdd) {
+        tour.addSteps([ 
+            {
+            text: "{% trans 'If your book is not in the results, try adjusting your search terms.' %}",
+            title: "{% trans 'Search again' %}",
+            attachTo: {
+                element: '#search-page-input',
+                on: "right",
+            },
+            buttons: [
+                    {
+                        action() {
+                            return this.back();
+                        },
+                        secondary: true,
+                        text: "{% trans 'Back' %}",
+                    },
+                    {
+                        action() {
+                            return this.next();
+                        },
+                        text: "{% trans 'Next' %}",
+                    },
+                ],
+            },
+            {
+            text: "{% trans 'If you still cannot find your book, you can add a record manually.' %}",
+            title: "{% trans 'Add a record manally' %}",
+            attachTo: {
+                element: "#manually-add-book",
+                on: "right",
+            },
+            buttons: [
+                {
+                    action() {
+                        return this.back();
+                    },
+                    secondary: true,
+                    text: "{% trans 'Back' %}",
+                },
+                {
+                    action() {
+                        return this.next();
+                    },
+                    text: "{% trans 'Next' %}",
+                },
+            ],
+        }])
+    }
+
+    tour.start()
+</script>
+
+
+
+    // {
+    //     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' %}",
+    //         },
+    //     ],
+    // },
diff --git a/bookwyrm/templates/search/book.html b/bookwyrm/templates/search/book.html
index d2828eabf..d8835b3ef 100644
--- a/bookwyrm/templates/search/book.html
+++ b/bookwyrm/templates/search/book.html
@@ -7,7 +7,7 @@
 {% with results|first as local_results %}
 <ul class="block">
 {% for result in local_results.results %}
-    <li class="pd-4 mb-5">
+    <li class="pd-4 mb-5 local-book-search-result">
         <div class="columns is-mobile is-gapless mb-0">
             <div class="column is-cover">
                 {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
@@ -39,7 +39,7 @@
         <details class="details-panel box" open>
         {% endif %}
             {% if not result_set.connector.local %}
-            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
+            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2 remote-book-search-result">
                 <span class="mb-0 title is-5">
                     {% trans 'Results from' %}
                     <a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
@@ -102,11 +102,11 @@
 <p class="block">
     {% if request.user.is_authenticated %}
         {% if not remote %}
-        <a href="{{ request.path }}?q={{ query }}&type=book&remote=true">
+        <a href="{{ request.path }}?q={{ query }}&type=book&remote=true" id="load-from-other-catalogues">
             {% trans "Load results from other catalogues" %}
         </a>
         {% else %}
-        <a href="{% url 'create-book' %}">
+        <a href="{% url 'create-book' %}" id="manually-add-book">
             {% trans "Manually add book" %}
         </a>
         {% endif %}
diff --git a/bookwyrm/templates/search/layout.html b/bookwyrm/templates/search/layout.html
index af9129450..a92bd8745 100644
--- a/bookwyrm/templates/search/layout.html
+++ b/bookwyrm/templates/search/layout.html
@@ -13,7 +13,7 @@
 <form class="block" action="{% url 'search' %}" method="GET">
     <div class="field has-addons">
         <div class="control">
-            <input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}">
+            <input type="text" class="input" name="q" value="{{ query }}" aria-label="{% trans 'Search query' %}" id="search-page-input">
         </div>
         <div class="control">
             <div class="select" aria-label="{% trans 'Search type' %}">
@@ -52,7 +52,7 @@
     </ul>
 </nav>
 
-<section class="block">
+<section class="block" id="search-results-block">
     {% if not results %}
     <p>
         <em>{% blocktrans %}No results found for "{{ query }}"{% endblocktrans %}</em>
@@ -68,3 +68,9 @@
 {% endif %}
 
 {% endblock %}
+
+{% block scripts %}
+{% if user.show_guided_tour %}
+    {% include 'guided_tour/search.html' %}
+{% endif %}
+{% endblock %}