From 983afffe285c689377a3639bb827ace250d7981a Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 7 Aug 2024 16:29:01 +0200
Subject: [PATCH] introducing the new notification popup

---
 resources/js/notifications.js                 | 18 +++++
 .../notifications/notifications-popup.css     | 81 +++++++++++++++++++
 .../notifications/notifications-popup.php     | 44 ++++++++++
 3 files changed, 143 insertions(+)
 create mode 100644 resources/js/notifications.js
 create mode 100644 template-components/notifications/notifications-popup.css
 create mode 100644 template-components/notifications/notifications-popup.php

diff --git a/resources/js/notifications.js b/resources/js/notifications.js
new file mode 100644
index 0000000..87f4f3f
--- /dev/null
+++ b/resources/js/notifications.js
@@ -0,0 +1,18 @@
+export default function NotificationsInit() {
+  const notificationsContainer = document.querySelector('.homegrade-notifications');
+
+  if (!notificationsContainer) return;
+  const notifications = notificationsContainer.querySelectorAll('.notification');
+
+  notifications.forEach((notification) => {
+    const notificationClose = notification.querySelector('.notification__close');
+    const notificationId = notification.getAttribute('data-notification-id');
+    console.log(notificationId);
+
+    notificationClose.addEventListener('click', () => {
+      notification.classList.add('notification--dismissed');
+      document.cookie = `${notificationId}=dismissed; path=/; max-age=30`;
+      // document.cookie = `${notificationId}=dismissed; path=/; max-age=${30 * 86400}`; // 86400 = 1 day
+    });
+  });
+}
diff --git a/template-components/notifications/notifications-popup.css b/template-components/notifications/notifications-popup.css
new file mode 100644
index 0000000..b9e5479
--- /dev/null
+++ b/template-components/notifications/notifications-popup.css
@@ -0,0 +1,81 @@
+.notification {
+  @apply p-8 relative;
+  z-index: ;
+
+  &--alert {
+    @apply bg-secondary-light text-secondary;
+
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-red.svg');
+    }
+    .notification__close {
+      @apply filter-secondary;
+    }
+    a[target='_blank'] {
+      @apply !text-secondary;
+      &:after {
+        @apply filter-secondary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-secondary;
+        /* background: rgba(253, 245, 246, 1) !important; */
+        background: rgba(223, 30, 30, 0.1) !important;
+      }
+    }
+  }
+  &--info {
+    @apply bg-primary-light text-primary;
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-purple.svg');
+    }
+    .notification__close {
+      @apply filter-primary;
+    }
+    a[target='_blank'] {
+      @apply !text-primary;
+      &:after {
+        @apply filter-primary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-primary;
+        background: rgba(47, 1, 84, 0.1) !important;
+      }
+    }
+  }
+
+  &--dismissed {
+    @apply hidden;
+  }
+  &__inner {
+    @apply max-w-screen-xl px-8 mx-auto relative;
+    &:before {
+      @apply absolute top-1 left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
+      content: '';
+    }
+  }
+  &__title,
+  &__content {
+    @apply inline;
+  }
+  &__title {
+    @apply font-bold text-lg mr-2;
+  }
+  &__content {
+    @apply !text-base;
+
+    > * {
+      @apply inline;
+    }
+    a {
+      @apply font-bold underline;
+    }
+  }
+  &__close {
+    @apply absolute flex justify-center items-center top-0  right-0 z-10;
+    z-index: 10 !important;
+
+    @apply inline-block w-6 h-6;
+  }
+}
diff --git a/template-components/notifications/notifications-popup.php b/template-components/notifications/notifications-popup.php
new file mode 100644
index 0000000..ca8717f
--- /dev/null
+++ b/template-components/notifications/notifications-popup.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Notifications Popup
+ *
+ * @package Deligraph_Homegrade
+ */
+
+$notifications = get_field('notifications', 'option');
+
+
+?>
+
+<div class="homegrade-notifications">
+	<?php if ($notifications) : ?>
+		<?php foreach ($notifications as $notification) : ?>
+			<?php
+			$notification_id = 'homegrade_notification_' . md5($notification['title']);
+			$cookie_already_hidden = isset($_COOKIE[$notification_id]) && $_COOKIE[$notification_id] === 'dismissed';
+			$notificationType = $notification['type'] ?? 'info';
+
+			if (!isset($_COOKIE[$notification_id])) {
+				// setcookie($notification_id, "visible", time() + (86400 * 30), "/"); // 86400 = 1 day
+				setcookie($notification_id, "visible", time() + 30, "/"); // 30 seconds
+			}
+
+			?>
+			<div class="notification notification--<?php echo $notificationType ?> <?php echo $cookie_already_hidden ? "notification--dismissed" : "" ?> " data-notification-id="<?php echo $notification_id; ?>">
+				<div class="notification__inner">
+
+					<h3 class="notification__title"><?php echo $notification['title']; ?></h3>
+					<div class="notification__content"><?php echo $notification['content']; ?></div>
+					<button class="notification__close" aria-label="<?php echo __("Fermer cette notification", "homegrade-theme__texte-fonctionnel") ?>">
+
+						<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon_transparent.svg' ?>" alt="">
+
+					</button>
+				</div>
+
+
+			</div>
+		<?php endforeach; ?>
+	<?php endif; ?>
+</div>
\ No newline at end of file