feat: Display off days banner if donation banner was hidden (#10566)

### What We have to integrate off days 2024 banner, but we want to display it only if donnation banner was closed --------- Co-authored-by: Stéphane Gigandet <[email protected]> Co-authored-by: Open Food Facts Bot <[email protected]>
openfoodfacts · Jul 30, 2024 · 5107f3e · 5107f3e
1 parent 2389be1
commit 5107f3e
Show file tree

Hide file tree

Showing 60 changed files with 2,103 additions and 159 deletions.
diff --git a/html/images/misc/banners/ENG.png b/html/images/misc/banners/ENG.png
diff --git a/html/images/misc/banners/FR.png b/html/images/misc/banners/FR.png
diff --git a/po/common/en.po b/po/common/en.po
@@ -19,6 +19,14 @@ msgstr ""
 
 # OFF
 
+msgctxt "src_off_days_banner"
+msgid "ENG"
+msgstr "ENG"
+
+msgctxt "link_off_days_banner"
+msgid "https://connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register"
+msgstr "https://connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register"
+
 msgctxt "site_description_off"
 msgid "A collaborative, free and open database of ingredients, nutrition facts and information on food products from around the world"
 msgstr "A collaborative, free and open database of ingredients, nutrition facts and information on food products from around the world"

diff --git a/po/common/fr.po b/po/common/fr.po
@@ -15,6 +15,14 @@ msgstr ""
 "X-Crowdin-Language: fr\n"
 "X-Crowdin-File-ID: 3123\n"
 
+msgctxt "src_off_days_banner"
+msgid "ENG"
+msgstr "FR"
+
+msgctxt "link_off_days_banner"
+msgid "https://connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register"
+msgstr "https://connect.openfoodfacts.org/fr/event/open-food-facts-days-2024-22/register"
+
 msgctxt "1_product"
 msgid "1 product"
 msgstr "1 produit"

diff --git a/scss/_off.scss b/scss/_off.scss
@@ -1210,6 +1210,25 @@ $section-sand: #FFFAF1;
 $background-orange: #FF8714;
 $font-green: #008c8c;
 
+.off-days-banner {
+  background-color: $section-cyan;
+  // background-image: url('/images/misc/banners/FR.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 300px;
+  @media #{$small-only} {
+    background-size: contain;
+    height: 25vw; ;
+  }
+  &__FR {
+    background-image: url('/images/misc/banners/FR.png');
+  }
+  &__ENG {
+    background-image: url('/images/misc/banners/ENG.png');
+  }
+}
+
 .donation-banner,
 .donation-banner-footer {
   overflow: hidden;

diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html
@@ -50,11 +50,11 @@
   }
 
   function DonationButton() {
-    setBannerCookie('off-donation-banner-2023-a', 1, 180);
+    setBannerCookie('off_donation_banner_2023_a', 1, 180);
     bannerID.style.display = 'none';
   }
 
-  if (getBannerCookie('off-donation-banner-2023-a') !== '') {
+  if (getBannerCookie('off_donation_banner_2023_a') !== '') {
     bannerID.style.display = 'none';
   } else { 
     bannerID.style.display = 'flex';

diff --git a/templates/web/common/includes/off_days_2024_banner.tt.html b/templates/web/common/includes/off_days_2024_banner.tt.html
@@ -0,0 +1,35 @@
+<!-- start templates/[% component.name %] -->
+
+[% banner_off_days_2024_top = BLOCK %]
+
+<a href="[% lang('link_off_days_banner') %]">
+    <section id="off-days-2024-banner-top" class="off-days-banner off-days-banner__[% lang('src_off_days_banner') %]">
+    </section>
+</a>
+
+<script>
+    const offDaysBannerID = document.getElementById('off-days-2024-banner-top');
+
+    function getBannerCookie(bcname) {
+        const name = bcname + '=';
+        const decodedCookies = decodeURIComponent(document.cookie);
+        const cookies = decodedCookies.split(';');
+        for (const cookie of cookies) {
+        let c = cookie;
+        while (c.charAt(0) == ' ') { c = c.substring(1); }
+        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+
+        return '';
+    }
+
+    if (getBannerCookie('off_donation_banner_2023_a') !== '') {
+        console.log('cookie found');
+        offDaysBannerID.style.display = 'flex';
+    } else {
+        console.log('cookie not found');
+        offDaysBannerID.style.display = 'none';
+    }
+</script>
+
+[% END %]
diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html
@@ -271,7 +271,9 @@
 								[% INCLUDE 'web/common/includes/packagings_banner.tt.html' %]
 							[% ELSE %]
 								[%# we keep the old code so that we can easily put back the donation banner %]
-          						[% PROCESS 'web/common/includes/donate_banner.tt.html' %]
+								[% PROCESS 'web/common/includes/off_days_2024_banner.tt.html' %]
+								[% banner_off_days_2024_top %]
+								[% PROCESS 'web/common/includes/donate_banner.tt.html' %]
 								[% banner_main %]
 							[% END %]
 						[% END %]

diff --git a/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html b/tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html
@@ -230,7 +230,43 @@
 
 
 
-          						<!-- start templates/web/common/includes/donate_banner.tt.html -->
+								<!-- start templates/web/common/includes/off_days_2024_banner.tt.html -->
+
+
+
+
+<a href="//connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register">
+    <section id="off-days-2024-banner-top" class="off-days-banner off-days-banner__ENG">
+    </section>
+</a>
+
+<script>
+    const offDaysBannerID = document.getElementById('off-days-2024-banner-top');
+
+    function getBannerCookie(bcname) {
+        const name = bcname + '=';
+        const decodedCookies = decodeURIComponent(document.cookie);
+        const cookies = decodedCookies.split(';');
+        for (const cookie of cookies) {
+        let c = cookie;
+        while (c.charAt(0) == ' ') { c = c.substring(1); }
+        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+
+        return '';
+    }
+
+    if (getBannerCookie('off_donation_banner_2023_a') !== '') {
+        console.log('cookie found');
+        offDaysBannerID.style.display = 'flex';
+    } else {
+        console.log('cookie not found');
+        offDaysBannerID.style.display = 'none';
+    }
+</script>
+
+
+								<!-- start templates/web/common/includes/donate_banner.tt.html -->
 
 
 
@@ -289,11 +325,11 @@
   }
 
   function DonationButton() {
-    setBannerCookie('off-donation-banner-2023-a', 1, 180);
+    setBannerCookie('off_donation_banner_2023_a', 1, 180);
     bannerID.style.display = 'none';
   }
 
-  if (getBannerCookie('off-donation-banner-2023-a') !== '') {
+  if (getBannerCookie('off_donation_banner_2023_a') !== '') {
     bannerID.style.display = 'none';
   } else { 
     bannerID.style.display = 'flex';

diff --git a/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html b/...ation/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html
@@ -230,7 +230,43 @@
 
 
 
-          						<!-- start templates/web/common/includes/donate_banner.tt.html -->
+								<!-- start templates/web/common/includes/off_days_2024_banner.tt.html -->
+
+
+
+
+<a href="//connect.openfoodfacts.org/fr/event/open-food-facts-days-2024-22/register">
+    <section id="off-days-2024-banner-top" class="off-days-banner off-days-banner__FR">
+    </section>
+</a>
+
+<script>
+    const offDaysBannerID = document.getElementById('off-days-2024-banner-top');
+
+    function getBannerCookie(bcname) {
+        const name = bcname + '=';
+        const decodedCookies = decodeURIComponent(document.cookie);
+        const cookies = decodedCookies.split(';');
+        for (const cookie of cookies) {
+        let c = cookie;
+        while (c.charAt(0) == ' ') { c = c.substring(1); }
+        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+
+        return '';
+    }
+
+    if (getBannerCookie('off_donation_banner_2023_a') !== '') {
+        console.log('cookie found');
+        offDaysBannerID.style.display = 'flex';
+    } else {
+        console.log('cookie not found');
+        offDaysBannerID.style.display = 'none';
+    }
+</script>
+
+
+								<!-- start templates/web/common/includes/donate_banner.tt.html -->
 
 
 
@@ -289,11 +325,11 @@
   }
 
   function DonationButton() {
-    setBannerCookie('off-donation-banner-2023-a', 1, 180);
+    setBannerCookie('off_donation_banner_2023_a', 1, 180);
     bannerID.style.display = 'none';
   }
 
-  if (getBannerCookie('off-donation-banner-2023-a') !== '') {
+  if (getBannerCookie('off_donation_banner_2023_a') !== '') {
     bannerID.style.display = 'none';
   } else { 
     bannerID.style.display = 'flex';

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html
@@ -232,7 +232,43 @@
 
 
 
-          						<!-- start templates/web/common/includes/donate_banner.tt.html -->
+								<!-- start templates/web/common/includes/off_days_2024_banner.tt.html -->
+
+
+
+
+<a href="//connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register">
+    <section id="off-days-2024-banner-top" class="off-days-banner off-days-banner__ENG">
+    </section>
+</a>
+
+<script>
+    const offDaysBannerID = document.getElementById('off-days-2024-banner-top');
+
+    function getBannerCookie(bcname) {
+        const name = bcname + '=';
+        const decodedCookies = decodeURIComponent(document.cookie);
+        const cookies = decodedCookies.split(';');
+        for (const cookie of cookies) {
+        let c = cookie;
+        while (c.charAt(0) == ' ') { c = c.substring(1); }
+        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+
+        return '';
+    }
+
+    if (getBannerCookie('off_donation_banner_2023_a') !== '') {
+        console.log('cookie found');
+        offDaysBannerID.style.display = 'flex';
+    } else {
+        console.log('cookie not found');
+        offDaysBannerID.style.display = 'none';
+    }
+</script>
+
+
+								<!-- start templates/web/common/includes/donate_banner.tt.html -->
 
 
 
@@ -291,11 +327,11 @@
   }
 
   function DonationButton() {
-    setBannerCookie('off-donation-banner-2023-a', 1, 180);
+    setBannerCookie('off_donation_banner_2023_a', 1, 180);
     bannerID.style.display = 'none';
   }
 
-  if (getBannerCookie('off-donation-banner-2023-a') !== '') {
+  if (getBannerCookie('off_donation_banner_2023_a') !== '') {
     bannerID.style.display = 'none';
   } else { 
     bannerID.style.display = 'flex';

diff --git a/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html b/tests/integration/expected_test_results/page_crawler/crawler-access-product-page.html
@@ -243,7 +243,43 @@
 
 
 
-          						<!-- start templates/web/common/includes/donate_banner.tt.html -->
+								<!-- start templates/web/common/includes/off_days_2024_banner.tt.html -->
+
+
+
+
+<a href="//connect.openfoodfacts.org/event/open-food-facts-days-2024-22/register">
+    <section id="off-days-2024-banner-top" class="off-days-banner off-days-banner__ENG">
+    </section>
+</a>
+
+<script>
+    const offDaysBannerID = document.getElementById('off-days-2024-banner-top');
+
+    function getBannerCookie(bcname) {
+        const name = bcname + '=';
+        const decodedCookies = decodeURIComponent(document.cookie);
+        const cookies = decodedCookies.split(';');
+        for (const cookie of cookies) {
+        let c = cookie;
+        while (c.charAt(0) == ' ') { c = c.substring(1); }
+        if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+        }
+
+        return '';
+    }
+
+    if (getBannerCookie('off_donation_banner_2023_a') !== '') {
+        console.log('cookie found');
+        offDaysBannerID.style.display = 'flex';
+    } else {
+        console.log('cookie not found');
+        offDaysBannerID.style.display = 'none';
+    }
+</script>
+
+
+								<!-- start templates/web/common/includes/donate_banner.tt.html -->
 
 
 
@@ -302,11 +338,11 @@
   }
 
   function DonationButton() {
-    setBannerCookie('off-donation-banner-2023-a', 1, 180);
+    setBannerCookie('off_donation_banner_2023_a', 1, 180);
     bannerID.style.display = 'none';
   }
 
-  if (getBannerCookie('off-donation-banner-2023-a') !== '') {
+  if (getBannerCookie('off_donation_banner_2023_a') !== '') {
     bannerID.style.display = 'none';
   } else { 
     bannerID.style.display = 'flex';