From fad9fa604453cd543c9a0ba1a799dd8f60b99947 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Smink?= <smink83@gmail.com>
Date: Wed, 29 Nov 2023 09:14:17 +0100
Subject: [PATCH 1/5] Update Turbo so 404s are correctly handled, disable Turbo
 on 404 so follow up pages work correctly

---
 package.json                         |  2 +-
 resources/views/errors/404.blade.php |  8 ++++++++
 yarn.lock                            | 14 ++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 2099c9a32..d8feb0d67 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     },
     "devDependencies": {
         "@appbaseio/reactivesearch-vue": "^1.33.13",
-        "@hotwired/turbo": "^7.2.4",
+        "@hotwired/turbo": "^8.0.0-beta.1",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index c42cd1477..99f867276 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -6,6 +6,14 @@
 @section('title', $page->meta_title ?: $page->title)
 @section('description', $page->meta_description)
 
+@push('head')
+    <script>
+        document.addEventListener('turbo:load', function() {
+            window.Turbo.session.drive = false;
+        });
+    </script>
+@endpush
+
 @section('content')
     <div class="container">
         <h1 class="mb-5 text-4xl font-bold">{{ $page->content_heading }}</h1>
diff --git a/yarn.lock b/yarn.lock
index 4de33064b..a1fd44c5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -269,10 +269,12 @@
     fast-deep-equal "^3.1.3"
     supercluster "^7.1.3"
 
-"@hotwired/turbo@^7.2.4":
-  version "7.2.4"
-  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.2.4.tgz#0d35541be32cfae3b4f78c6ab9138f5b21f28a21"
-  integrity sha512-c3xlOroHp/cCZHDOuLp6uzQYEbvXBUVaal0puXoGJ9M8L/KHwZ3hQozD4dVeSN9msHWLxxtmPT1TlCN7gFhj4w==
+"@hotwired/turbo@^8.0.0-beta.1":
+  version "8.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.0-beta.1.tgz#35a7086c4c959445db059ea4a9b9af85cdafa616"
+  integrity sha512-g66YmO/Oa+EThB3KkNDhrM9mFnNyRn6tqgwGiBHh4Vf+d3XjCznuWSG2o2e2cO/RlddVRtCwvBSMuG6sYQWX+g==
+  dependencies:
+    idiomorph "https://github.com/basecamp/idiomorph#rollout-build"
 
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
@@ -939,6 +941,10 @@ hotkeys-js@^3.8.7:
   resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.10.1.tgz#0c67e72298f235c9200e421ab112d156dc81356a"
   integrity sha512-mshqjgTqx8ee0qryHvRgZaZDxTwxam/2yTQmQlqAWS3+twnq1jsY9Yng9zB7lWq6WRrjTbTOc7knNwccXQiAjQ==
 
+"idiomorph@git+https://github.com/basecamp/idiomorph.git#rollout-build":
+  version "0.0.8"
+  resolved "git+https://github.com/basecamp/idiomorph.git#e906820368e4c9c52489a3336b8c3826b1bf6de5"
+
 import-fresh@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"

From 5269b0922898f2898b2bf0be5befcfe38f27084a Mon Sep 17 00:00:00 2001
From: danielsmink <danielsmink@users.noreply.github.com>
Date: Wed, 29 Nov 2023 08:15:53 +0000
Subject: [PATCH 2/5] Apply fixes from Prettier

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index a1fd44c5d..d0614b920 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -941,9 +941,9 @@ hotkeys-js@^3.8.7:
   resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.10.1.tgz#0c67e72298f235c9200e421ab112d156dc81356a"
   integrity sha512-mshqjgTqx8ee0qryHvRgZaZDxTwxam/2yTQmQlqAWS3+twnq1jsY9Yng9zB7lWq6WRrjTbTOc7knNwccXQiAjQ==
 
-"idiomorph@git+https://github.com/basecamp/idiomorph.git#rollout-build":
+"idiomorph@https://github.com/basecamp/idiomorph#rollout-build":
   version "0.0.8"
-  resolved "git+https://github.com/basecamp/idiomorph.git#e906820368e4c9c52489a3336b8c3826b1bf6de5"
+  resolved "https://github.com/basecamp/idiomorph#e906820368e4c9c52489a3336b8c3826b1bf6de5"
 
 import-fresh@^3.1.0:
   version "3.3.0"

From 3e4aa40ea8d4d4e205c718c088b44b60863aab53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Smink?= <smink83@gmail.com>
Date: Wed, 29 Nov 2023 13:55:29 +0100
Subject: [PATCH 3/5] Fallback for autocomplete styling

---
 .../partials/header/autocomplete.blade.php    | 100 +++++++++---------
 1 file changed, 51 insertions(+), 49 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 8ca7f4480..08fc3149d 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -8,61 +8,63 @@ class="{{ $inputClasses }}"
     v-on:focus="$root.loadAutocomplete = true; window.setTimeout(() => window.document.getElementById('autocomplete-input').focus(), 200)"
     v-if="!$root.loadAutocomplete">
 
-<autocomplete
-    v-if="$root.loadAutocomplete"
-    v-cloak
-    :additionals="{ categories: ['name^3', 'meta_description^1'] }"
->
-    <x-rapidez::reactive-base slot-scope="{ results, searchAdditionals, additionals }">
-        <data-search
-            placeholder="@lang('Search')"
-            v-on:value-selected="search"
-            component-id="autocomplete"
-            :inner-class="{ input: '{{ $inputClasses }}' }"
-            class="[&_*]:!m-0 [&_[isclearicon=]]:!mr-2"
-            :data-field="Object.keys(config.searchable)"
-            :field-weights="Object.values(config.searchable)"
-            :show-icon="false"
-            fuzziness="AUTO"
-            :debounce="100"
-            :size="10"
-            v-on:value-change="searchAdditionals($event)"
-        >
-            <div
-                slot="render"
-                slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
+<div class="w-full">
+    <autocomplete
+        v-if="$root.loadAutocomplete"
+        v-cloak
+        :additionals="{ categories: ['name^3', 'meta_description^1'] }"
+    >
+        <x-rapidez::reactive-base slot-scope="{ results, searchAdditionals, additionals }">
+            <data-search
+                placeholder="@lang('Search')"
+                v-on:value-selected="search"
+                component-id="autocomplete"
+                :inner-class="{ input: '{{ $inputClasses }}' }"
+                class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
+                :data-field="Object.keys(config.searchable)"
+                :field-weights="Object.values(config.searchable)"
+                :show-icon="false"
+                fuzziness="AUTO"
+                :debounce="100"
+                :size="10"
+                v-on:value-change="searchAdditionals($event)"
             >
                 <div
-                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
-                    v-if="isOpen && (suggestions.length || results.count)"
+                    slot="render"
+                    slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
                 >
-                    <div class="flex gap-5 pb-5 my-2" v-if="results.categories && results.categories.hits.length">
-                        <div class="font-bold">
-                            @lang('Categories')
+                    <div
+                        class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
+                        v-if="isOpen && (suggestions.length || results.count)"
+                    >
+                        <div class="flex gap-5 pb-5 my-2" v-if="results.categories && results.categories.hits.length">
+                            <div class="font-bold">
+                                @lang('Categories')
+                            </div>
+                            <ul class="flex flex-col gap-1">
+                                <li v-for="hit in results.categories.hits" class="w-full">
+                                    <a :href="hit._source.url" class="w-full hover:text-primary flex gap-1">
+                                        <span class="ml-2">@{{ hit._source.name }}</span>
+                                    </a>
+                                </li>
+                            </ul>
                         </div>
-                        <ul class="flex flex-col gap-1">
-                            <li v-for="hit in results.categories.hits" class="w-full">
-                                <a :href="hit._source.url" class="w-full hover:text-primary flex gap-1">
-                                    <span class="ml-2">@{{ hit._source.name }}</span>
+                        <ul class="gap-5 grid md:grid-cols-2">
+                            <li
+                                v-for="suggestion in suggestions"
+                                :key="suggestion.source._id">
+                                <a :href="suggestion.source.url | url" class="flex flex-wrap flex-1" key="suggestion.source._id">
+                                    <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="self-center object-contain w-14 aspect-square" />
+                                    <div class="flex flex-1 flex-wrap px-2">
+                                        <strong class="hyphens block w-full">@{{ suggestion.source.name }}</strong>
+                                        <div class="self-end">@{{ suggestion.source.price | price }}</div>
+                                    </div>
                                 </a>
                             </li>
                         </ul>
                     </div>
-                    <ul class="gap-5 grid md:grid-cols-2">
-                        <li
-                            v-for="suggestion in suggestions"
-                            :key="suggestion.source._id">
-                            <a :href="suggestion.source.url | url" class="flex flex-wrap flex-1" key="suggestion.source._id">
-                                <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="self-center object-contain w-14 aspect-square" />
-                                <div class="flex flex-1 flex-wrap px-2">
-                                    <strong class="hyphens block w-full">@{{ suggestion.source.name }}</strong>
-                                    <div class="self-end">@{{ suggestion.source.price | price }}</div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
                 </div>
-            </div>
-        </data-search>
-    </x-rapidez::reactive-base>
-</autocomplete>
+            </data-search>
+        </x-rapidez::reactive-base>
+    </autocomplete>
+</div>

From 0f76a375963f9d1a01883aa7bfbe62baf6748d79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20Smink?= <smink83@gmail.com>
Date: Thu, 30 Nov 2023 09:35:25 +0100
Subject: [PATCH 4/5] Move class to component and remove obsolete div

---
 .../partials/header/autocomplete.blade.php    | 102 +++++++++---------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 08fc3149d..309a253e9 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -8,63 +8,63 @@ class="{{ $inputClasses }}"
     v-on:focus="$root.loadAutocomplete = true; window.setTimeout(() => window.document.getElementById('autocomplete-input').focus(), 200)"
     v-if="!$root.loadAutocomplete">
 
-<div class="w-full">
-    <autocomplete
-        v-if="$root.loadAutocomplete"
-        v-cloak
-        :additionals="{ categories: ['name^3', 'meta_description^1'] }"
-    >
-        <x-rapidez::reactive-base slot-scope="{ results, searchAdditionals, additionals }">
-            <data-search
-                placeholder="@lang('Search')"
-                v-on:value-selected="search"
-                component-id="autocomplete"
-                :inner-class="{ input: '{{ $inputClasses }}' }"
-                class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
-                :data-field="Object.keys(config.searchable)"
-                :field-weights="Object.values(config.searchable)"
-                :show-icon="false"
-                fuzziness="AUTO"
-                :debounce="100"
-                :size="10"
-                v-on:value-change="searchAdditionals($event)"
+
+<autocomplete
+    class="w-full"
+    v-if="$root.loadAutocomplete"
+    v-cloak
+    :additionals="{ categories: ['name^3', 'meta_description^1'] }"
+>
+    <x-rapidez::reactive-base slot-scope="{ results, searchAdditionals, additionals }">
+        <data-search
+            placeholder="@lang('Search')"
+            v-on:value-selected="search"
+            component-id="autocomplete"
+            :inner-class="{ input: '{{ $inputClasses }}' }"
+            class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
+            :data-field="Object.keys(config.searchable)"
+            :field-weights="Object.values(config.searchable)"
+            :show-icon="false"
+            fuzziness="AUTO"
+            :debounce="100"
+            :size="10"
+            v-on:value-change="searchAdditionals($event)"
+        >
+            <div
+                slot="render"
+                slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
             >
                 <div
-                    slot="render"
-                    slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
+                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
+                    v-if="isOpen && (suggestions.length || results.count)"
                 >
-                    <div
-                        class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
-                        v-if="isOpen && (suggestions.length || results.count)"
-                    >
-                        <div class="flex gap-5 pb-5 my-2" v-if="results.categories && results.categories.hits.length">
-                            <div class="font-bold">
-                                @lang('Categories')
-                            </div>
-                            <ul class="flex flex-col gap-1">
-                                <li v-for="hit in results.categories.hits" class="w-full">
-                                    <a :href="hit._source.url" class="w-full hover:text-primary flex gap-1">
-                                        <span class="ml-2">@{{ hit._source.name }}</span>
-                                    </a>
-                                </li>
-                            </ul>
+                    <div class="flex gap-5 pb-5 my-2" v-if="results.categories && results.categories.hits.length">
+                        <div class="font-bold">
+                            @lang('Categories')
                         </div>
-                        <ul class="gap-5 grid md:grid-cols-2">
-                            <li
-                                v-for="suggestion in suggestions"
-                                :key="suggestion.source._id">
-                                <a :href="suggestion.source.url | url" class="flex flex-wrap flex-1" key="suggestion.source._id">
-                                    <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="self-center object-contain w-14 aspect-square" />
-                                    <div class="flex flex-1 flex-wrap px-2">
-                                        <strong class="hyphens block w-full">@{{ suggestion.source.name }}</strong>
-                                        <div class="self-end">@{{ suggestion.source.price | price }}</div>
-                                    </div>
+                        <ul class="flex flex-col gap-1">
+                            <li v-for="hit in results.categories.hits" class="w-full">
+                                <a :href="hit._source.url" class="w-full hover:text-primary flex gap-1">
+                                    <span class="ml-2">@{{ hit._source.name }}</span>
                                 </a>
                             </li>
                         </ul>
                     </div>
+                    <ul class="gap-5 grid md:grid-cols-2">
+                        <li
+                            v-for="suggestion in suggestions"
+                            :key="suggestion.source._id">
+                            <a :href="suggestion.source.url | url" class="flex flex-wrap flex-1" key="suggestion.source._id">
+                                <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="self-center object-contain w-14 aspect-square" />
+                                <div class="flex flex-1 flex-wrap px-2">
+                                    <strong class="hyphens block w-full">@{{ suggestion.source.name }}</strong>
+                                    <div class="self-end">@{{ suggestion.source.price | price }}</div>
+                                </div>
+                            </a>
+                        </li>
+                    </ul>
                 </div>
-            </data-search>
-        </x-rapidez::reactive-base>
-    </autocomplete>
-</div>
+            </div>
+        </data-search>
+    </x-rapidez::reactive-base>
+</autocomplete>

From 7892be6f23ea60f98823587ba6bde23a2e7c4e42 Mon Sep 17 00:00:00 2001
From: Roy Duineveld <royduineveld@gmail.com>
Date: Thu, 30 Nov 2023 09:42:49 +0100
Subject: [PATCH 5/5] Apply suggestions from code review

---
 .../views/layouts/partials/header/autocomplete.blade.php     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 309a253e9..ce997ff25 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -8,12 +8,11 @@ class="{{ $inputClasses }}"
     v-on:focus="$root.loadAutocomplete = true; window.setTimeout(() => window.document.getElementById('autocomplete-input').focus(), 200)"
     v-if="!$root.loadAutocomplete">
 
-
 <autocomplete
-    class="w-full"
     v-if="$root.loadAutocomplete"
     v-cloak
     :additionals="{ categories: ['name^3', 'meta_description^1'] }"
+    class="w-full"
 >
     <x-rapidez::reactive-base slot-scope="{ results, searchAdditionals, additionals }">
         <data-search
@@ -21,6 +20,8 @@ class="w-full"
             v-on:value-selected="search"
             component-id="autocomplete"
             :inner-class="{ input: '{{ $inputClasses }}' }"
+            {{-- These classes are only used when you come from a page with a product listing, --}}
+            {{-- click on a link that leads to a 404 page and try to use the search there --}}
             class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
             :data-field="Object.keys(config.searchable)"
             :field-weights="Object.values(config.searchable)"