Cookie notice with popup component (#253)

rapidez · Jul 5, 2023 · 59585cc · 59585cc
1 parent 89b6b32
commit 59585cc
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 21 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -50,6 +50,7 @@ Vue.component('listing', () => import('./components/Listing/Listing.vue'))
 Vue.component('coupon', () => import('./components/Coupon/Coupon.vue'))
 Vue.component('checkout', () => import('./components/Checkout/Checkout.vue'))
 Vue.component('checkout-success', () => import('./components/Checkout/CheckoutSuccess.vue'))
+Vue.component('popup', () => import('./components/Popup.vue'))
 
 function init() {
     // https://vuejs.org/api/application.html#app-config-performance

diff --git a/resources/js/axios.js b/resources/js/axios.js
@@ -22,7 +22,7 @@ instances.forEach(function (instance) {
         },
         function (error) {
             return Promise.reject(error)
-        }
+        },
     )
 
     instance.interceptors.response.use(
@@ -33,6 +33,6 @@ instances.forEach(function (instance) {
         function (error) {
             window.app.$data.loadingCount--
             return Promise.reject(error)
-        }
+        },
     )
 })
diff --git a/resources/js/components/Checkout/Checkout.vue b/resources/js/components/Checkout/Checkout.vue
@@ -187,7 +187,7 @@ export default {
             }
 
             const optionalFields = Object.keys(
-                Object.fromEntries(Object.entries(window.config.customer_fields_show).filter(([key, value]) => !value || value === 'opt'))
+                Object.fromEntries(Object.entries(window.config.customer_fields_show).filter(([key, value]) => !value || value === 'opt')),
             )
             Object.entries(this.checkout.shipping_address).forEach(([key, val]) => {
                 if (!val && !['region_id', 'customer_address_id'].concat(optionalFields).includes(key)) {
@@ -284,7 +284,7 @@ export default {
                     this.backEvent = true
                     this.checkout.step = this.steps.indexOf(window.location.hash.substring(1))
                 },
-                false
+                false,
             )
 
             history.replaceState(null, null, '#' + this.steps[this.checkout.step])

diff --git a/resources/js/components/Graphql.vue b/resources/js/components/Graphql.vue
@@ -74,7 +74,7 @@ export default {
                         query: this.query,
                         variables: this.variables,
                     },
-                    options
+                    options,
                 )
 
                 if (response.data.errors) {

diff --git a/resources/js/components/GraphqlMutation.vue b/resources/js/components/GraphqlMutation.vue
@@ -124,7 +124,7 @@ export default {
                         query: query,
                         variables: variables,
                     },
-                    options
+                    options,
                 )
 
                 if (response.data.errors) {
@@ -166,7 +166,7 @@ export default {
                             () => {
                                 Notify(this.notify.message, this.notify.type ?? 'success')
                             },
-                            { once: true }
+                            { once: true },
                         )
                     }
                     this.mutating = false

diff --git a/resources/js/components/Listing/Filters/CategoryFilter.vue b/resources/js/components/Listing/Filters/CategoryFilter.vue
@@ -73,7 +73,7 @@ export default {
                             }
                         })
                         .filter((bucket) =>
-                            getCategoryPaths(allCategoryPaths, currentCategory).find((path) => path.key.includes(bucket.id))
+                            getCategoryPaths(allCategoryPaths, currentCategory).find((path) => path.key.includes(bucket.id)),
                         )
 
                     return buildCategoryStructure(lowestCategories).children
@@ -88,7 +88,7 @@ export default {
                     let categoryPaths = allCategoryPaths.filter(
                         (bucket) =>
                             bucket.key.includes(String(currentCategory.entity_id)) &&
-                            bucket.key.at(-1) !== String(currentCategory.entity_id)
+                            bucket.key.at(-1) !== String(currentCategory.entity_id),
                     )
 
                     if (categoryPaths.length > 1) {
@@ -98,7 +98,7 @@ export default {
                     // No child categories, get siblings instead.
                     let parentCategoryId = categoryPaths[0].key.at(-2)
                     return allCategoryPaths.filter(
-                        (bucket) => bucket.key.includes(parentCategoryId) && bucket.key.at(-1) !== parentCategoryId
+                        (bucket) => bucket.key.includes(parentCategoryId) && bucket.key.at(-1) !== parentCategoryId,
                     )
                 }
 
@@ -138,7 +138,7 @@ export default {
             this.results = await getCategoryStructureWorker(
                 this.aggregations.categories.buckets,
                 this.aggregations.category_paths.buckets,
-                this.currentCategory
+                this.currentCategory,
             )
         },
     },

diff --git a/resources/js/components/Listing/Listing.vue b/resources/js/components/Listing/Listing.vue
@@ -68,7 +68,7 @@ export default {
                 window.filter(this.attributes, function (attribute) {
                     return attribute.filter
                 }),
-                'position'
+                'position',
             )
         },
         sortings: function () {
@@ -106,9 +106,9 @@ export default {
                                     dataField: sorting.code + (sorting.code != 'price' ? '.keyword' : ''),
                                     sortBy: directionKey,
                                 }
-                            }
+                            },
                         )
-                    })
+                    }),
                 )
                 .concat(this.additionalSorting)
         },

diff --git a/resources/js/components/Popup.vue b/resources/js/components/Popup.vue
@@ -0,0 +1,81 @@
+<script>
+export default {
+    render() {
+        return this.$scopedSlots.default({
+            close: this.close,
+        })
+    },
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        duration: {
+            type: Number,
+        },
+        delay: {
+            type: Number,
+            default: 0,
+        },
+        showOnce: {
+            type: Boolean,
+            default: false,
+        },
+        showUntilClose: {
+            type: Boolean,
+            default: false,
+        },
+        overlay: {
+            type: Boolean,
+            default: false,
+        },
+        callback: {
+            type: Function,
+        },
+    },
+    methods: {
+        open() {
+            this.$el.show()
+            if (this.overlay) {
+                this.$root.custom.overlay = true
+            }
+        },
+        close() {
+            this.$el.close()
+
+            if (this.overlay) {
+                this.$root.custom.overlay = false
+            }
+
+            if (this.showUntilClose) {
+                localStorage.setItem(this.name, true)
+            }
+
+            if (this.callback) {
+                this.callback()
+            }
+        },
+    },
+    mounted() {
+        setTimeout(() => {
+            if (!this.showOnce && !this.showUntilClose) {
+                this.open()
+            }
+
+            if ((this.showOnce || this.showUntilClose) && !localStorage.getItem(this.name)) {
+                this.open()
+
+                if (this.showOnce) {
+                    localStorage.setItem(this.name, true)
+                }
+            }
+
+            if (this.duration > 1) {
+                setTimeout(() => {
+                    this.close()
+                }, this.duration)
+            }
+        }, this.delay)
+    },
+}
+</script>
diff --git a/resources/js/components/User/mixins/InteractWithUser.js b/resources/js/components/User/mixins/InteractWithUser.js
@@ -106,7 +106,7 @@ export default {
                 {
                     customer_address_id: address.id,
                 },
-                address
+                address,
             )
         },
     },

diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
@@ -5,7 +5,7 @@
 $baseClasses[] = 'inline-block font-semibold py-2 px-4 border rounded disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-75';
 $variants = [
     'primary' => 'bg-primary border-primary text-white',
-    'outline' => 'bg-transparent hover:bg-primary text-primary hover:text-white border-primary hover:border-transparent',
+    'outline' => 'bg-transparent hover:bg-primary text-primary hover:text-primary border-primary hover:border-transparent',
     'slider' => ['flex items-center justify-center rounded-full w-12 h-12 bg-white border hover:bg-primary hover:text-white'],
 ];
 @endphp

diff --git a/resources/views/components/cookie-notice.blade.php b/resources/views/components/cookie-notice.blade.php
@@ -0,0 +1,24 @@
+@if(!App::runningUnitTests() || request()->has('show-cookie-notice'))
+    <popup
+        name="cookie-notice"
+        :callback="() => {
+            window.$cookies.set('accept-cookies', 'true')
+            window.location.reload();
+        }"
+        show-until-close
+        v-cloak
+    >
+        <dialog slot-scope="{ close }" class="container rounded bg-white p-6 shadow fixed inset-x-0 bottom-4 z-30">
+            <div class="flex flex-wrap items-center justify-between">
+                <div class="flex-1 items-center">
+                    <div class="text-sm text-black">
+                        {{ $slot }}
+                    </div>
+                </div>
+                <x-rapidez::button @click="close" variant="outline" class="mt-3 w-full shrink-0 md:ml-6 md:w-auto">
+                    {{ $button ?? __('Accept cookies') }}
+                </x-rapidez::button>
+            </div>
+        </dialog>
+    </popup>
+@endif
diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php
@@ -1,5 +1,9 @@
 @includeWhen(Route::currentRouteName() !== 'checkout', 'rapidez::layouts.partials.footer.newsletter')
 <x-rapidez::notifications />
+<x-rapidez::cookie-notice>
+    @lang('This website uses cookies')
+    <x-slot:button>@lang('Accept cookies')</x-slot:button>
+</x-rapidez::cookie-notice>
 <footer class="border-t mt-12">
     <div class="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden space-y-8 sm:px-6 lg:px-8">
         @if(Route::currentRouteName() !== 'checkout')

diff --git a/tests/Browser/CheckoutTest.php b/tests/Browser/CheckoutTest.php
@@ -45,11 +45,10 @@ public function checkoutAsUser()
 
     public function addProductToCart($browser)
     {
-        $browser
-            ->visit($this->testProduct->url)
-            ->waitUntilIdle()
-            ->click('@add-to-cart')
-            ->waitUntilIdle();
+        $browser->visit($this->testProduct->url)
+                ->waitUntilIdle()
+                ->click('@add-to-cart')
+                ->waitUntilIdle();
 
         return $browser;
     }

diff --git a/tests/Browser/DialogTest.php b/tests/Browser/DialogTest.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace Rapidez\Core\Tests\Browser;
+
+use Laravel\Dusk\Browser;
+use Rapidez\Core\Tests\DuskTestCase;
+
+class DialogTest extends DuskTestCase
+{
+    /**
+     * @test
+     */
+    public function test()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/?show-cookie-notice')
+                    ->waitUntilIdle()
+                    ->assertSee('Accept cookies')
+                    ->waitForReload(function (Browser $browser) {
+                        $browser->press('Accept cookies');
+                    })
+                    ->assertScript("window.localStorage['cookie-notice']");
+        });
+    }
+}