From 9e01091de8b9c0b90d76a1a9203d130f81ba7d67 Mon Sep 17 00:00:00 2001
From: AndreiaPena <andreia.pena@pix.fr>
Date: Tue, 24 Sep 2024 16:40:59 +0200
Subject: [PATCH] Todo

---
 addon/components/pix-toast-container.hbs |  8 ++++++
 addon/components/pix-toast-container.js  |  6 +++++
 addon/components/pix-toast.hbs           |  7 ++----
 addon/components/pix-toast.js            | 18 ++++++++------
 addon/services/pix-toast.js              | 23 +++++++-----------
 addon/styles/_pix-toast.scss             | 16 ++++++------
 app/components/pix-toast-container.js    |  1 +
 app/stories/pix-toast.stories.js         | 31 +++++-------------------
 8 files changed, 50 insertions(+), 60 deletions(-)
 create mode 100644 addon/components/pix-toast-container.hbs
 create mode 100644 addon/components/pix-toast-container.js
 create mode 100644 app/components/pix-toast-container.js

diff --git a/addon/components/pix-toast-container.hbs b/addon/components/pix-toast-container.hbs
new file mode 100644
index 000000000..dd4df35f9
--- /dev/null
+++ b/addon/components/pix-toast-container.hbs
@@ -0,0 +1,8 @@
+<div class="ember-cli-notifications-notification">
+  {{#if this.pixToast}}
+    <PixToast
+      @message={{this.pixToast.message}}
+      @ariaLabelForCloseButton={{this.pixToast.ariaLabel}}
+    />
+  {{/if}}
+</div>
\ No newline at end of file
diff --git a/addon/components/pix-toast-container.js b/addon/components/pix-toast-container.js
new file mode 100644
index 000000000..6ea4a5490
--- /dev/null
+++ b/addon/components/pix-toast-container.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class PixToastContainer extends Component {
+  @service pixToast;
+}
diff --git a/addon/components/pix-toast.hbs b/addon/components/pix-toast.hbs
index fc094eecf..ac01771f6 100644
--- a/addon/components/pix-toast.hbs
+++ b/addon/components/pix-toast.hbs
@@ -1,12 +1,9 @@
-<div
-  class="pix-toast {{concat 'pix-toast--' this.type}} {{unless @showToast ' pix-toast--hidden'}}"
-  ...attributes
->
+<div class="pix-toast {{concat 'pix-toast--' this.type}}" ...attributes>
   <div class="pix-toast__icon {{concat 'pix-toast__icon--' this.type}}">
     <FaIcon @icon={{this.iconClass}} />
   </div>
   <p class="pix-toast__content">
-    {{yield}}
+    {{@message}}
   </p>
   <div class="pix-toast__close-button-container">
     <PixIconButton
diff --git a/addon/components/pix-toast.js b/addon/components/pix-toast.js
index 979d3e9f8..83f6ac1d4 100644
--- a/addon/components/pix-toast.js
+++ b/addon/components/pix-toast.js
@@ -1,21 +1,25 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { action } from '@ember/object';
+import { warn } from '@ember/debug';
 const TYPE_SUCCESS = 'success';
 const TYPE_ERROR = 'error';
 const TYPE_INFORMATION = 'information';
 const TYPE_WARNING = 'warning';
 
 export default class PixToast extends Component {
-  @service toast;
+  @service pixToast;
 
   get type() {
     const correctTypes = [TYPE_SUCCESS, TYPE_ERROR, TYPE_INFORMATION, TYPE_WARNING];
-    const isACorrectType = correctTypes.includes(this.args.type);
-    if (!isACorrectType) {
-      throw new Error('ERROR in PixToast component, you need to provide a type.');
-    }
-    return this.args.type;
+    warn(
+      'PixToast: you need to provide a type',
+      [correctTypes].includes(this.args.type),
+      {
+        id: 'pix-ui.toast.type.not-provided',
+      },
+    );
+    return this.args.type ?? 'success';
   }
 
   get iconClass() {
@@ -32,6 +36,6 @@ export default class PixToast extends Component {
   removeNotification(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.toast.removeNotification(this.toast);
+    this.pixToast.removeNotification(this.pixToast);
   }
 }
diff --git a/addon/services/pix-toast.js b/addon/services/pix-toast.js
index f9165d98d..f5414ea58 100644
--- a/addon/services/pix-toast.js
+++ b/addon/services/pix-toast.js
@@ -1,27 +1,22 @@
 import Service from '@ember/service';
-import { A } from '@ember/array';
 import EmberObject from '@ember/object';
 
 export default class ToastService extends Service {
-  content = A();
   addNotification(options) {
     if (!options.message) {
       throw new Error('No notification message provided');
     }
 
-    const notification = EmberObject.create({
+    return EmberObject.create({
+      ariaLabel: options.ariaLabel,
       message: options.message,
       type: options.type || 'success',
       onClick: options.onClick,
       htmlContent: options.htmlContent || false,
     });
-
-    this.content.pushObject(notification);
-
-    return notification;
   }
 
-  sendErrorNotification(message, options) {
+  sendErrorNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
@@ -29,7 +24,7 @@ export default class ToastService extends Service {
     });
   }
 
-  sendSuccessNotification(message, options) {
+  sendSuccessNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
@@ -37,7 +32,7 @@ export default class ToastService extends Service {
     });
   }
 
-  sendInformationNotification(message, options) {
+  sendInformationNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
@@ -45,7 +40,7 @@ export default class ToastService extends Service {
     });
   }
 
-  sendWarningNotification(message, options) {
+  sendWarningNotification({ message, options }) {
     return this.addNotification({
       ...options,
       message,
@@ -53,11 +48,11 @@ export default class ToastService extends Service {
     });
   }
 
-  removeNotification(notification) {
-    if (!notification) {
+  removeNotification(toast) {
+    if (!toast) {
       return;
     }
 
-    notification.set('dismiss', true);
+    toast.destroy();
   }
 }
diff --git a/addon/styles/_pix-toast.scss b/addon/styles/_pix-toast.scss
index 8ef28d349..eb99ff203 100644
--- a/addon/styles/_pix-toast.scss
+++ b/addon/styles/_pix-toast.scss
@@ -1,19 +1,10 @@
 .pix-toast {
-  position: fixed;
-  right: 12px;
-  bottom: 30px;
-  z-index: 1000;
   display: flex;
   max-width: 400px;
   margin: 0 auto;
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
 
-  &--hidden {
-    visibility: hidden;
-    opacity: 0;
-  }
-
   &--error {
     color: var(--pix-error-700);
     background-color: var(--pix-error-50);
@@ -138,3 +129,10 @@
     }
   }
 }
+
+.ember-cli-notifications-notification{
+  position: fixed;
+  right: 12px;
+  bottom: 30px;
+  z-index: 1000;
+}
diff --git a/app/components/pix-toast-container.js b/app/components/pix-toast-container.js
new file mode 100644
index 000000000..9d5b68fe1
--- /dev/null
+++ b/app/components/pix-toast-container.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-toast-container';
diff --git a/app/stories/pix-toast.stories.js b/app/stories/pix-toast.stories.js
index 4cada693b..b6e28dbeb 100644
--- a/app/stories/pix-toast.stories.js
+++ b/app/stories/pix-toast.stories.js
@@ -5,14 +5,9 @@ export default {
   render: (args) => ({
     template: hbs`<PixToast
   @type={{this.type}}
-  @showToast={{this.showToast}}
+  @message={{this.message}}
   @ariaLabelForCloseButton='Fermer'
-  @onCloseButtonClick={{fn (mut this.showToast)}}
->
-  ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
-  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-  dicta sunt explicabo.
-</PixToast>`,
+/>`,
     context: args,
   }),
   argTypes: {
@@ -21,16 +16,6 @@ export default {
       description: 'Type de la notification : success, error, information, warning',
       type: { name: 'string', required: true },
     },
-    onCloseButtonClick: {
-      name: 'onCloseButtonClick',
-      description: 'Fonction à exécuter à la fermeture de la notification',
-      type: { name: 'function', required: true },
-    },
-    showToast: {
-      name: 'showToast',
-      description: "Gérer l'affichage de la notification",
-      type: { name: 'boolean', required: true },
-    },
     ariaLabelForCloseButton: {
       name: 'ariaLabelForCloseButton',
       description: 'Aria-label pour le bouton de fermeture de la notification',
@@ -42,34 +27,30 @@ export default {
 export const success = {
   args: {
     type: 'success',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 export const error = {
   args: {
     type: 'error',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 
 export const information = {
   args: {
     type: 'information',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };
 
 export const warning = {
   args: {
     type: 'warning',
-    showToast: true,
+    message: "ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\n  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\n  dicta sunt explicabo.",
     ariaLabelForCloseButton: 'Fermer',
-    onCloseButtonClick: () => {},
   },
 };