feat: banner to promote the packaging operation (#8167)

scss/_off.scss

@@ -1118,6 +1118,7 @@ span.ico-bold {
 }
 
 $section-blue: #6d85d9;
+$section-cyan: #008c8c;
 
 .donation-banner,
 .donation-banner-footer {
@@ -1203,6 +1204,82 @@ $section-blue: #6d85d9;
   vertical-align: middle;
 }
 
+// Packagings banner
+
+
+.packagings-banner {
+  position: relative;
+  display: flex;
+  padding: 2rem 0;
+  background-color: $section-cyan;
+  @media #{$small-only} {
+    flex-direction: column;
+    padding: 1rem 0;
+  }
+  &__image {
+    display: block;
+    content: "";
+    background: no-repeat bottom url(/images/illustrations/products-scan-2.png);
+    min-width: 150px;
+    height: 81px;
+  }
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 1rem;
+    margin: 0 auto;
+    max-width: 100rem;
+    @media #{$small-only} {
+      flex-direction: column;
+      gap: 0;
+      margin-top: -2rem;
+    }
+    &--button {
+      appearance: button;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      height: fit-content;
+      margin-bottom: 0;
+      @media #{$small-only} {
+        order: 3;
+      }
+    }
+    &-paragraphs {
+      > p { color: $white; }
+      a { color: #ffffcc; }
+      @media #{$small-only} {
+        text-align: center;
+        order: 2;
+        padding: 1rem;
+      }
+      &--thank-you {
+        font-weight: bold;
+        span {
+          color: red;
+          font-size: 1rem;
+        }
+      }
+    }
+    &-close {
+      align-self: flex-start;
+      cursor: pointer;
+      color: white;
+      opacity: 0.5;
+      margin-right: 1rem;
+      @media #{$small-only} { 
+        position: relative;
+        top: -25px;
+        margin-right: 2rem;
+        align-self: flex-end;
+        order: 1;
+      }
+    }
+  }
+}
+
 // Footer: Scan your everyday foods
 
 #footer_scan {

templates/web/common/includes/packagings_banner.tt.html

@@ -0,0 +1,76 @@
+<!-- start templates/[% component.name %] -->
+
+<section id="packagings-banner-top" class="packagings-banner">
+  <span class="packagings-banner__image"></span>
+  <div class="packagings-banner__content">
+  <a
+      class="packagings-banner__content--button button round white-button"
+    [% IF lc == 'fr' %]
+        href="https://blog.openfoodfacts.org/fr/rejoignez-loperation-plein-pot-sur-les-emballages"
+    [% ELSE %]
+        href="https://blog.openfoodfacts.org/en/join-the-tackling-food-packaging-operation"
+    [% END %]
+  >
+    <span class="material-icons">scale</span>
+    [% IF lc == "fr" %]
+        Participer à l'opération emballages
+    [% ELSE %]
+        Join the packaging operation
+    [% END %]
+  </a>
+  <div class="packagings-banner__content-paragraphs">
+    <p class="packagings-banner__content-paragraphs--text">
+        [% IF lc == "fr" %]
+            Aidez-nous à créer la transparence sur les emballages alimentaires avec l'opération
+            <a href="https://blog.openfoodfacts.org/fr/rejoignez-loperation-plein-pot-sur-les-emballages">Plein pot sur les emballages</a>
+            en partenariat avec l'Agence de la transition écologique (ADEME) ! #AVosEmballages
+        [% ELSE %]
+            Help us create transparency on the packaging of food products with the operation
+            <a href="https://blog.openfoodfacts.org/en/join-the-tackling-food-packaging-operation">Tackling Food Packaging</a>
+            in partnership with ADEME, the French Agency for Ecological Transition! #TacklingPackaging            
+        [% END %]
+    </p>
+  </div>
+  <div class="packagings-banner__content-close">
+    <span id="hide-donate-banner" class="packagings-banner__content-close--icon material-icons" onclick="packagingsButton();">close</span>
+  </div>
+</section>
+
+<script>
+  let d = new Date();
+  let bannerID = document.getElementById('packagings-banner-top');
+  let getDomain = window.location.origin.split('.');
+
+  function setBannerCookie(bcname, bcval, bcexdays) {
+    d.setTime(d.getTime() + (bcexdays*60*60*24*1000));
+    let expires = 'expires=' + d.toUTCString();
+    // Apply cookie for every domain contains open...facts
+    let domain = 'domain=.' + getDomain.slice(1).join('.');
+    document.cookie = bcname + '=' + bcval + ';' + expires + ';' + domain + ';SameSite=None;Secure;path=/';
+  }
+
+  function getBannerCookie(bcname) {
+    let name = bcname + '=';
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') { c = c.substring(1); }
+      if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+    }
+    return '';
+  }
+
+  function packagingsButton() {
+    setBannerCookie('off-packagings-banner', 1, 180);
+    bannerID.style.display = 'none';
+  }
+
+  if (getBannerCookie('off-packagings-banner') !== '') {
+    bannerID.style.display = 'none';
+  } else { 
+    bannerID.style.display = 'flex';
+  }
+</script>
+
+<!-- end templates/[% component.name %] -->

templates/web/common/site_layout.tt.html

@@ -273,8 +273,14 @@
 				<div class="main block_light">
 					<div id="main_column">
 						[% IF ! server_options_producers_platform %]
-          					[% PROCESS 'web/common/includes/donate_banner.tt.html' %]
-							[% banner_main %]
+							[%# for now, display the packagings banner in all cases %]
+							[% IF 1 == 1 %]
+								[% 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' %]
+								[% banner_main %]
+							[% END %]
 						[% END %]
 
 						[% IF page_format == "banner" %]