Merge branch 'master' of github.com:rapidez/core into feature/blade-r…

…eviews

CHANGELOG.md

@@ -1,6 +1,40 @@
 # Changelog 
 
-[Unreleased changes](https://github.com/rapidez/core/compare/3.0.0...3.0.0)
+[Unreleased changes](https://github.com/rapidez/core/compare/3.1.0...3.1.0)
+## [3.1.0](https://github.com/rapidez/core/releases/tag/3.1.0) - 2025-01-24
+
+### Added
+
+- Shadow, outline and ring colors (#691)
+- Autocomplete additionals fuzziness config (#708)
+
+### Changed
+
+- Frontend improvements (#682)
+- Dynamic product listing image and redirect + swatch logic fix (#698)
+- Changed the default border color (#699)
+- Global slideover using teleport (#703)
+- Show configured variant image in the cart (#688)
+- Check the autocomplete resultsType outside of partial (#684)
+- Renamed the country select component (#678)
+
+### Fixed
+
+- ReactiveSearch update (#697)
+- Null coalescing for csrf token (#686)
+- Fix error on file removal (#687)
+- Slideover prevent-scroll (#700)
+
+## [3.0.1](https://github.com/rapidez/core/releases/tag/3.0.1) - 2024-12-20
+
+### Fixed
+
+- Review stars closing (4bd7a4a)
+- Properly use of dt/dd within dl (#674)
+- Listen to newsletter/general/active (#676)
+- Small frontend fixes (#677)
+- Get pagesize from url if Turbo is not yet loaded (#681)
+
 ## [3.0.0](https://github.com/rapidez/core/releases/tag/3.0.0) - 2024-12-13
 
 See the upgrade guide: https://docs.rapidez.io/3.x/upgrading.html
@@ -28,13 +62,6 @@ See the upgrade guide: https://docs.rapidez.io/3.x/upgrading.html
 
 - Reduce javascript bundle size (#604)
 
-## [2.19.0](https://github.com/rapidez/core/releases/tag/2.19.0) - 2024-12-13
-
-### Added
-
-- URLs from Magento option + config refactor with multi-cache (#567)
-- Global slideover (#619)
-
 ## [2.13.0](https://github.com/rapidez/core/releases/tag/2.13.0) - 2024-09-27
 
 ### Changed

composer.json

@@ -27,7 +27,7 @@
         "lcobucci/clock": "^2.0|^3.2",
         "lcobucci/jwt": "^4.0|^5.3",
         "mailerlite/laravel-elasticsearch": "^11.1",
-        "rapidez/blade-components": "^1.0",
+        "rapidez/blade-components": "^1.4",
         "rapidez/blade-directives": "^1.0",
         "tormjens/eventy": "^0.8"
     },

config/rapidez/system.php

@@ -27,4 +27,9 @@
 
     // Should the stock qty be exposed and indexed within Elasticsearch?
     'expose_stock' => false,
+
+    'standalone_checkout' => [
+        // What cache store should be used to store temporary standalone checkout credentials
+        'cache_store' => env('STANDALONE_CHECKOUT_CACHE_STORE', config('cache.default')),
+    ],
 ];

lang/nl.json

@@ -2,7 +2,7 @@
     ":count of the requested quantity will be backordered": ":count van de aangevraagde hoeveelheid zal worden nageleverd",
     "Accept cookies": "Accepteer cookies",
     "Account": "Account",
-    "Add to cart": "Toevoegen aan winkelwagen",
+    "Add to cart": "In winkelwagen",
     "Added": "Toegevoegd",
     "Adding": "Aan het toevoegen",
     "Addition": "Toevoeging",

package.json

@@ -7,7 +7,7 @@
         "prod": "vite build"
     },
     "devDependencies": {
-        "@appbaseio/reactivesearch-vue": "https://gitpkg.vercel.app/api/pkg?url=rapidez/reactivesearch/packages/vue&commit=fixes&scripts.postinstall=yarn%20install%20--ignore-scripts%20%26%26%20yarn%20run%20build-es&scripts.build-es=nps%20build.es",
+        "@appbaseio/reactivesearch-vue": "https://gitpkg.vercel.app/api/pkg?url=rapidez/reactivesearch/packages/vue&commit=v1.34.0-vue&scripts.postinstall=yarn%20install%20--ignore-scripts%20%26%26%20yarn%20run%20build-es&scripts.build-es=nps%20build.es",
         "@babel/core": "^7.23.9",
         "@hotwired/turbo": "^8.0.2",
         "@tailwindcss/forms": "^0.5.3",
@@ -34,7 +34,8 @@
         "vue-clickaway": "^2.2.2",
         "vue-cookies": "^1.8.2",
         "vue-template-compiler": "^2.7.14",
-        "vue-turbolinks": "^2.2.2"
+        "vue-turbolinks": "^2.2.2",
+        "vue2-teleport": "^1.1.4"
     },
     "dependencies": {}
 }

resources/css/components/price-slider.css

@@ -4,7 +4,7 @@ div.vue-slider {
 
 div.vue-slider-process,
 div.vue-slider-rail {
-    @apply h-2 bg !important;
+    @apply h-2 bg-primary !important;
 }
 
 div.vue-slider-rail {

resources/js/components/GlobalSlideover.vue

@@ -3,14 +3,23 @@ export default {
     props: {
         title: String,
         position: String,
-        content: String,
+    },
+    data() {
+        return {
+            isCurrentSlideover: false,
+        }
     },
     render() {
         return this.$scopedSlots.default(this)
     },
+    mounted() {
+        this.$root.$on('global-slideover-open', (data) => {
+            this.isCurrentSlideover = data.initiator === this
+        })
+    },
     methods: {
         open() {
-            this.$root.$emit('global-slideover-open', { content: this.content, title: this.title, position: this.position })
+            this.$root.$emit('global-slideover-open', { title: this.title, position: this.position, initiator: this })
         },
     },
 }

resources/js/components/GlobalSlideoverInstance.vue

@@ -5,14 +5,12 @@ export default {
     },
     data() {
         return {
-            content: '',
             title: '',
             position: 'left',
         }
     },
     mounted() {
         this.$root.$on('global-slideover-open', (data) => {
-            this.content = data.content || ''
             this.title = data.title || ''
             this.position = data.position || 'left'
             this.$el.querySelector('#slideover-global').checked = true

resources/js/components/Listing/Listing.vue

@@ -35,7 +35,9 @@ export default {
     data: () => ({
         loaded: false,
         attributes: useAttributes(),
-        pageSize: Turbo.navigator.location.searchParams.get('pageSize') || config.grid_per_page,
+        pageSize:
+            (Turbo?.navigator?.location?.searchParams || new URLSearchParams(window.location.search)).get('pageSize') ||
+            config.grid_per_page,
     }),
 
     render() {

resources/js/components/Product/AddToCart.vue

@@ -59,11 +59,7 @@ export default {
 
     methods: {
         async add() {
-            if (
-                window.location.pathname !== this.product.url &&
-                (this.product?.has_options ||
-                    ('children' in this.product && Object.values(this.product.children).length && !config.show_swatches))
-            ) {
+            if (this.shouldRedirectToProduct) {
                 Turbo.visit(window.url(this.product.url))
                 return
             }
@@ -173,6 +169,11 @@ export default {
 
         setCustomOptionFile(event, optionId) {
             let file = event.target.files[0]
+
+            if (!file) {
+                return
+            }
+
             let reader = new FileReader()
             reader.onerror = (error) => alert(error)
             reader.onload = () => {
@@ -257,6 +258,25 @@ export default {
     },
 
     computed: {
+        currentThumbnail: function () {
+            return this.simpleProduct?.thumbnail || this.simpleProduct?.images?.[0] || this.product?.thumbnail
+        },
+
+        shouldRedirectToProduct: function () {
+            // Never redirect if we're already on the product page
+            if (window.location.pathname === this.product.url) {
+                return false
+            }
+
+            // Products with product options always have to be set on the product page
+            if (this.product?.has_options) {
+                return true
+            }
+
+            // Check if all super_attributes have an option selected
+            return Object.keys(this.product?.super_attributes).join(',') !== Object.keys(this.options).join(',')
+        },
+
         simpleProduct: function () {
             var product = this.product
 

resources/js/components/Search/Autocomplete.vue

@@ -63,13 +63,14 @@ export default {
                 let fields = data['fields'] ?? data
                 let size = data['size'] ?? self.size ?? undefined
                 let sort = data['sort'] ?? undefined
+                let fuzziness = data['fuzziness'] ?? 'AUTO'
 
                 let multimatch = self.multiMatchTypes.map((type) => ({
                     multi_match: {
                         query: query,
                         type: type,
                         fields: fields,
-                        fuzziness: type.includes('phrase') ? undefined : 'AUTO',
+                        fuzziness: type.includes('phrase') ? undefined : fuzziness,
                     },
                 }))
 

resources/js/package.js

@@ -101,7 +101,7 @@ function init() {
                 loadingCount: 0,
                 loading: false,
                 loadAutocomplete: false,
-                csrfToken: document.querySelector('[name=csrf-token]').content,
+                csrfToken: document.querySelector('[name=csrf-token]')?.content,
                 cart: useCart(),
                 order: useOrder(),
                 user: useUser(),

resources/js/stores/useUser.js

@@ -173,6 +173,10 @@ export const user = computed({
 
 // If token gets changed or emptied we should update the user.
 watch(token, refresh)
+if (userStorage.value?.email && !token.value) {
+    token.value = ''
+    userStorage.value = {}
+}
 
 document.addEventListener('vue:loaded', function (event) {
     event.detail.vue.$on('logout', async function (data = {}) {

resources/js/vue-components.js

@@ -1,3 +1,6 @@
+import Teleport from 'vue2-teleport'
+Vue.component('teleport', Teleport)
+
 import toggler from './components/Elements/Toggler.vue'
 Vue.component('toggler', toggler)
 

resources/views/cart/item.blade.php

@@ -4,6 +4,14 @@
             <td class="w-24">
                 <a :href="item.product.url_key + item.product.url_suffix | url">
                     <img
+                        v-if="item.configured_variant?.image"
+                        class="mx-auto"
+                        :alt="item.product.name"
+                        :src="resizedPath(item.configured_variant.image.url + '.webp', '80x80')"
+                        height="80"
+                    />
+                    <img
+                        v-else-if="item.product.image"
                         class="mx-auto"
                         :alt="item.product.name"
                         :src="resizedPath(item.product.image.url + '.webp', '80x80')"

resources/views/cart/queries/fragments/cart.graphql

@@ -38,6 +38,9 @@ fragment cart on Cart {
                 option_label
                 value_label
             }
+            configured_variant {
+                ...product
+            }
         }
         ... on BundleCartItem {
             @include('rapidez::cart.queries.partials.customizable_options')

resources/views/checkout/partials/address.blade.php

@@ -148,7 +148,7 @@
         <div class="col-span-12 sm:col-span-6">
             <label>
                 <x-rapidez::label>@lang('Country')</x-rapidez::label>
-                <x-rapidez::country-select
+                <x-rapidez::input.select.country
                     name="{{ $type }}_country"
                     dusk="{{ $type }}_country"
                     v-model="variables.country_code"

resources/views/checkout/partials/progressbar.blade.php

@@ -10,7 +10,7 @@
                 'pointer-events-none cursor-default' => $currentStepKey < $checkoutStepKey,
                 'bg-emphasis' => $checkoutStepKey <= $currentStepKey,
                 'bg-white' => $checkoutStepKey > $currentStepKey,
-                'bg-emphasis shadow-md pointer-events-none cursor-default' => $checkoutStepKey === $currentStepKey
+                'bg-emphasis shadow-md shadow-emphasis pointer-events-none cursor-default' => $checkoutStepKey === $currentStepKey
             ])>
                 {{ $checkoutStepKey + 1 }}
             </a>

resources/views/checkout/steps/agreements.blade.php

@@ -1,23 +1,30 @@
 <graphql query="{ checkoutAgreements { agreement_id name checkbox_text content is_html mode } }" cache="checkout.agreements" v-cloak>
     <div slot-scope="{ data }" v-if="data">
         <div v-for="agreement in data.checkoutAgreements" :key="agreement.agreement_id">
-            <global-slideover :title="agreement.name" :content="'<div class=&quot;p-3' + (!agreement.is_html ? ' whitespace-pre-line' : '') + '&quot;>' + agreement.content + '</div>'" v-slot="slideover">
-                <template v-if="agreement.mode == 'AUTO'">
-                    <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
-                        @{{ agreement.checkbox_text }}
-                    </label>
-                </template>
-                <div v-else>
-                    <x-rapidez::input.checkbox
-                        name="agreement_ids[]"
-                        v-bind:value="agreement.agreement_id"
-                        dusk="agreements"
-                        required
-                    >
+            <global-slideover :title="agreement.name" v-slot="slideover">
+                <div>
+                    <div class="hidden">
+                        <teleport to="#global-slideover-content" :disabled="!slideover.isCurrentSlideover">
+                            <div v-bind:class="{'p-3': true, 'whitespace-pre-line': !agreement.is_html}" v-html="agreement.content"></div>
+                        </teleport>
+                    </div>
+                    <template v-if="agreement.mode == 'AUTO'">
                         <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
                             @{{ agreement.checkbox_text }}
                         </label>
-                    </x-rapidez::input.checkbox>
+                    </template>
+                    <template v-else>
+                        <x-rapidez::input.checkbox
+                            name="agreement_ids[]"
+                            v-bind:value="agreement.agreement_id"
+                            dusk="agreements"
+                            required
+                        >
+                            <label class="text-gray-700 cursor-pointer underline hover:no-underline" v-on:click="slideover.open">
+                                @{{ agreement.checkbox_text }}
+                            </label>
+                        </x-rapidez::input.checkbox>
+                    </template>
                 </div>
             </global-slideover>
         </div>

resources/views/checkout/steps/success.blade.php

@@ -44,7 +44,7 @@ class="mx-auto"
                 </div>
             </div>
             <div class="flex flex-col mt-4 gap-x-4 md:flex-row">
-                <div class="w-full p-8 bg-white shadow-sm rounded border border-l-2 border-l-primary md:w-1/2" v-if="order.billing_address">
+                <div class="w-full p-8 bg-white shadow-sm shadow-default rounded border border-l-2 border-l-primary md:w-1/2" v-if="order.billing_address">
                     <p class="text font-lg font-bold mb-2">@lang('Billing address')</p>
                     <ul>
                         <li>@{{ order.billing_address.firstname }} @{{ order.billing_address.lastname }}</li>
@@ -53,7 +53,7 @@ class="mx-auto"
                         <li>@{{ order.billing_address.telephone }}</li>
                     </ul>
                 </div>
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
+                <div class="w-full p-8 bg-white shadow-sm shadow-default rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
                     <p class="text font-lg font-bold mb-2">@lang('Shipping address')</p>
                     <ul>
                         <li>@{{ order.shipping_address.firstname }} @{{ order.shipping_address.lastname }}</li>
@@ -65,11 +65,11 @@ class="mx-auto"
             </div>
 
             <div class="flex flex-col mt-4 gap-x-4 md:flex-row">
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary md:w-1/2" v-if="order.shipping_method">
+                <div class="w-full p-8 bg-white shadow-sm shadow-default rounded border-l-2 border border-l-primary md:w-1/2" v-if="order.shipping_method">
                     <p class="text font-lg font-bold mb-2">@lang('Shipping method')</p>
                     <p>@{{ order.shipping_method }}</p>
                 </div>
-                <div class="w-full p-8 bg-white shadow-sm rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2">
+                <div class="w-full p-8 bg-white shadow-sm shadow-default rounded border-l-2 border border-l-primary mt-4 md:mt-0 md:w-1/2">
                     <p class="text font-lg font-bold mb-2">@lang('Payment method')</p>
                     <p v-for="method in order.payment_methods">@{{ method.name || method.type }}</p>
                 </div>

resources/views/components/listing.blade.php

@@ -35,7 +35,7 @@
 
                 {{ $before ?? '' }}
                 @if ($slot->isEmpty())
-                    <div class="flex flex-col lg:flex-row gap-x-4">
+                    <div class="flex flex-col lg:flex-row gap-x-6 gap-y-3">
                         <div class="xl:w-1/5">
                             @include('rapidez::listing.filters')
                         </div>

resources/views/components/notifications.blade.php

@@ -12,7 +12,7 @@
             >
                 <component :is="link ? 'a' : 'div'" v-if="show" class="relative flex items-end justify-center pointer-events-none mb-3 sm:items-start sm:justify-end" :class="{ 'pointer-events-none': !link }">
 
-                    <div class="max-w-sm w-full shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden border" :class="classes">
+                    <div class="max-w-sm w-full shadow-lg shadow-default rounded-lg pointer-events-auto ring-1 ring-emphasis/10 overflow-hidden border" :class="classes">
                         <div class="p-4">
                             <div class="flex items-start">
                                 <div class="flex-shrink-0">