Added cookies fallback page (#1280)

Author: norberttech

web/landing/assets/controllers/cookie_consent_controller.js

@@ -14,6 +14,7 @@ export default class extends Controller {
             // If accepted previously, inject GA
             if (consentStatus === "accepted") {
                 this.consentGranted();
+            } else {
                 this.showButton();
             }
         } else {
@@ -25,7 +26,6 @@ export default class extends Controller {
         localStorage.setItem("cookie-consent", "accepted");
         this.consentGranted();
         this.hideBanner();
-        this.showButton()
     }
 
     reject() {
@@ -38,6 +38,7 @@ export default class extends Controller {
         });
         this.hideBanner();
         this.showButton();
+        window.location.href = '/cookies';
     }
 
     consentGranted() {

web/landing/assets/controllers/cookie_fallback_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    connect() {}
+
+    accept() {
+        localStorage.setItem("cookie-consent", "accepted");
+
+        this.consentGranted();
+
+        window.location = '/';
+    }
+
+    consentGranted() {
+        gtag("consent", "update", {
+            ad_user_data: 'granted',
+            ad_personalization: 'granted',
+            ad_storage: 'granted',
+            analytics_storage: 'granted'
+        });
+    }
+}

web/landing/src/Flow/Website/Controller/HomeController.php

@@ -16,6 +16,13 @@ public function __construct(
     ) {
     }
 
+    #[Route('/cookies', name: 'cookies', options: ['sitemap' => false])]
+    public function cookies() : Response
+    {
+        return $this->render('main/cookies.html.twig', [
+        ]);
+    }
+
     #[Route('/', name: 'home', options: ['sitemap' => true])]
     public function home() : Response
     {

web/landing/templates/base.html.twig

@@ -38,6 +38,7 @@
         <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
     {% endblock %}
 
+    {% block tracking %}
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() {
@@ -53,6 +54,7 @@
         gtag('config', '{{ google_analytics_id }}');
     </script>
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ google_analytics_id }}">gtag('config', '{{ google_conversion_tag }}');</script>
+    {% endblock %}
 
     {% block javascripts %}
         <script>
@@ -147,26 +149,29 @@
     </footer>
 
     <div data-controller="cookie-consent" data-cookie-consent-ga-id-value="{{ google_analytics_id }}">
-        <div data-cookie-consent-target="banner" class="hidden fixed bottom-0 left-0 w-full bg-black text-white text-sm p-5 flex flex-col items-center justify-center space-y-2 md:space-y-0 md:flex-row md:justify-between z-50">
+        <div data-cookie-consent-target="banner"
+             class="border-t-4 border-orange-100 hidden fixed bottom-0 left-0 w-full bg-black text-white text-lg p-5 flex flex-col items-center justify-center space-y-2 md:space-y-0 md:flex-row md:justify-between z-50"
+        >
             <span>
-                We use cookies to understand how you interact with our site, so we can improve our content and tailor it to your interests.<br/>
-                By clicking “Accept” you’ll help us analyze user behavior, deliver more relevant features, and optimize your overall experience.
+                Oops, sorry we have to ask this—but we need your okay to use cookies for page view stats. <br/>
+                It helps us improve this open-source project and keep it awesome!<br/>
+                Care to help out?
             </span>
 
             <div class="flex space-x-4 mt-2 md:mt-0">
                 <button
                         type="button"
-                        class="border border-blue-100 hover:border-blue-200 text-white px-4 py-2 rounded"
-                        data-action="click->cookie-consent#reject"
+                        class="bg-blue-100 hover:bg-blue-200 text-white px-4 py-2 rounded ml-4"
+                        data-action="click->cookie-consent#accept"
                 >
-                    Reject All
+                    Accept All
                 </button>
                 <button
                         type="button"
-                        class="bg-blue-100 hover:bg-blue-200 text-white px-4 py-2 rounded ml-4"
-                        data-action="click->cookie-consent#accept"
+                        class="border border-blue-100 hover:border-blue-200 text-white px-4 py-2 rounded"
+                        data-action="click->cookie-consent#reject"
                 >
-                    Accept All
+                    Reject All
                 </button>
             </div>
         </div>

web/landing/templates/main/cookies.html.twig

@@ -0,0 +1,73 @@
+{% extends 'base.html.twig' %}
+
+{%- block title -%}
+    Flow PHP - Data Processing Framework
+{%- endblock -%}
+
+{%- block description -%}
+    Flow is a PHP-based, strongly typed data processing framework with low memory footprint that can process various data sources consistently.
+    It offers a unified API for all data sources, including CSV, JSON, XML, Text, Parquet, Avro, Rest API, RDBMS, Elasticsearch / Meilisearch.
+    Flow not only enables you to process various data sources consistently, but also strives to accurately detect data types and cast them to the appropriate PHP types.
+{%- endblock -%}
+
+{#{% block tracking %}#}
+{#{% endblock %}#}
+
+{% block hero %}
+{% endblock %}
+
+{% block main %}
+    <div class="max-w-screen-xl mx-auto" data-controller="cookie-fallback">
+        <section class="rounded max-w-4xl p-8 overflow-auto shadow-2xl shadow-gray rounded border-gray border-2 mx-auto my-10">
+            <h1 class="font-bold text-4xl">Too bad... But your Privacy is our Motivation</h1>
+            <p class="mt-4">
+                We completely respect your decision to reject cookies. However, before you go,
+                we’d like to share why these cookies are so vital for our open-source project’s
+                progress.
+            </p>
+
+            <h2 class="font-bold text-2xl">1. Showing Us What Matters</h2>
+            <p class="mt-2">
+                Cookies let us see which features people use the most and where improvements
+                are truly needed. We don’t track personal information—only anonymized statistics
+                that reveal which parts of our project spark the most interest.
+            </p>
+
+            <h2 class="font-bold text-2xl">2. Fueling Our Motivation</h2>
+            <p class="mt-2">
+                We’re a team of open-source enthusiasts, and seeing active engagement gives us
+                a real morale boost. When we notice spikes in traffic or a rise in feature usage,
+                it affirms that the community finds our work valuable, and it inspires us to
+                keep innovating.
+            </p>
+
+            <h2 class="font-bold text-2xl">3. Free & Always Improving</h2>
+            <p class="mt-2">
+                By understanding usage trends, we can direct our time and limited resources
+                toward the features that matter most. This ensures our project remains free,
+                relevant, and beneficial for everyone who relies on it.
+            </p>
+
+            <h2 class="font-bold text-2xl">4. Respecting Your Data</h2>
+            <p class="mt-2">
+                We take privacy seriously. Any information gathered remains anonymous and
+                helps us enhance functionality based on collective interests rather than
+                individual profiles.
+            </p>
+
+            <p class="mt-4">
+                Thank you for considering how essential cookies are to our open-source efforts!
+            </p>
+            <!-- This button can redirect or open a small dialog to change cookie preferences -->
+
+            <div class="text-center mt-8">
+                <button data-action="click->cookie-fallback#accept"
+                        type="button"
+                        class="bg-blue-100 hover:bg-blue-200 text-white px-4 py-2 rounded ml-4"
+                >
+                    Return &amp; Re-enable Cookies
+                </button>
+            </div>
+        </section>
+    </div>
+{% endblock %}