Merge pull request #4278 from bbc/conal/IMAGEDAM-1674-notificationBannerWithModal

IMAGEDAM-1674: Notification banner displays messages about send to PhotoSales success/failure

Author: paperboyo

kahuna/public/js/components/gr-notifications-banner/gr-notifications-banner.tsx

@@ -151,6 +151,11 @@ const NotificationsBanner: React.FC = () => {
       });
   };
 
+  const newNotification = (event:any) => {
+    const notification = event.detail;
+    setNotifications(prev_notifs => mergeArraysByKey(prev_notifs, [notification], 'announceId'));
+  };
+
   useEffect(() => {
     const announce = window._clientConfig.announcements;
     const tdy = todayStr();
@@ -169,6 +174,7 @@ const NotificationsBanner: React.FC = () => {
     document.addEventListener("mouseup", autoHideListener);
     document.addEventListener("scroll", autoHideListener);
     document.addEventListener("keydown", autoHideListener);
+    window.addEventListener("newNotification", newNotification);
 
     // clean up cookie
     if (notif_cookie) {
@@ -183,6 +189,7 @@ const NotificationsBanner: React.FC = () => {
       document.removeEventListener("mouseup", autoHideListener);
       document.removeEventListener("scroll", autoHideListener);
       document.removeEventListener("keydown", autoHideListener);
+      window.removeEventListener("newNotification", newNotification);
       clearInterval(checkNotificationsRef);
     };
 
@@ -220,7 +227,7 @@ const NotificationsBanner: React.FC = () => {
                     key={"notification-inner-" + notification.announceId}>
                 {notification.description} 
               </span>
-              {(notification.url != "") &&
+              {(notification.url && notification.url != "") &&
                 <span tabIndex={0}
                       key={"notification-url-" + notification.announceId}
                       role="link"

kahuna/public/js/notifications/notifications.html

@@ -1,3 +1,3 @@
-<div ng-if="notifctrl.hasNotifications" class="global-notifications">
+<div class="global-notifications">
     <notifications-banner class="notifications-banner"></notifications-banner>
 </div>

kahuna/public/js/notifications/notifications.js

@@ -13,7 +13,6 @@ notifications.controller('NotificationsCtrl',
       const notifctrl = this;
       notifctrl.$onInit = () => {
         notifctrl.notifications = window._clientConfig.announcements;
-        notifctrl.hasNotifications = notifctrl.notifications.length > 0;
       };
     }
 ]);

kahuna/public/js/search/results.js

@@ -23,7 +23,8 @@ import '../components/gr-confirmation-modal/gr-confirmation-modal';
 import {
   INVALIDIMAGES,
   sendToCaptureAllValid, sendToCaptureCancelBtnTxt, sendToCaptureConfirmBtnTxt, sendToCaptureInvalid,
-  sendToCaptureMixed, sendToCaptureSingleBtnTxt,
+  sendToCaptureSuccess, sendToCaptureFailure, announcementId,
+  sendToCaptureMixed,
   sendToCaptureTitle,
   VALIDIMAGES
 } from "../util/constants/sendToCapture-config";
@@ -419,18 +420,42 @@ results.controller('SearchResultsCtrl', [
       };
 
       ctrl.sendToPhotoSales = () => {
-        const validImages = validatePhotoSalesSelection(ctrl.selectedImages)[0];
-        validImages.map(image => {
-          mediaApi.syndicateImage(image.data.id, "Capture", "true");
-        });
-        ctrl.clearSelection();
+        try {
+          const validImages = validatePhotoSalesSelection(ctrl.selectedImages)[0];
+          validImages.map(image => {
+            mediaApi.syndicateImage(image.data.id, "Capture", "true");
+          });
+          ctrl.clearSelection();
+          const notificationEvent = new CustomEvent("newNotification", {
+            detail: {
+              announceId: announcementId,
+              description: sendToCaptureSuccess,
+              category: "success",
+              lifespan: "transient"
+            },
+            bubbles: true
+          });
+          window.dispatchEvent(notificationEvent);
+        } catch (err) {
+          console.log(err);
+          const notificationEvent = new CustomEvent("newNotification", {
+            detail: {
+              announceId: announcementId,
+              description: sendToCaptureFailure,
+              category: "error",
+              lifespan: "transient"
+            },
+            bubbles: true
+          });
+          window.dispatchEvent(notificationEvent);
+        }
       };
 
-      ctrl.displayConfirmationModal = () => { // rename to display send to photosales once banner used?
+      ctrl.displayConfirmationModal = () => {
 
         const [validImages, invalidImages] = validatePhotoSalesSelection(ctrl.selectedImages);
         const title = sendToCaptureTitle;
-        let eventType; /// required once banner event is in use
+        let eventType;
         let detailObj;
 
         if (validImages.length !== 0 && invalidImages.length === 0) {
@@ -457,13 +482,12 @@ results.controller('SearchResultsCtrl', [
 
         } else if (validImages.length === 0 && invalidImages.length !== 0) {
           // No valid images selected
-          eventType = "displayModal"; //banner event in final version
+          eventType = "newNotification";
           detailObj = {
-            title: title,
-            message: sendToCaptureInvalid,
-            confirmBtnTxt: sendToCaptureSingleBtnTxt,
-            showSingleBtn: true,
-            okayFn: () => {}
+            announceId: announcementId,
+            description: sendToCaptureInvalid,
+            category: "warning",
+            lifespan: "transient"
           };
         }
 

kahuna/public/js/util/constants/sendToCapture-config.js

@@ -2,6 +2,9 @@ export const sendToCaptureTitle = "Are you sure?";
 export const sendToCaptureAllValid = "Do you want to send these images to Photo Sales?";
 export const sendToCaptureMixed = "Do you want to send these images to Photo Sales?; #VALIDIMAGES# of these images will be sent through to Photo Sales; #INVALIDIMAGES# are already in Photo Sales and will not be sent again; Look out for the Photo Sales logo which will identify these images";
 export const sendToCaptureInvalid = "The image(s) selected are already in Photo Sales. If an image has the Photo Sales logo it already exists there";
+export const sendToCaptureSuccess = "The image(s) is being sent to Photo Sales. Check in Photo Sales that the image has been received.";
+export const sendToCaptureFailure = "Sending the image(s) to Photo Sales has failed. Try again and if the problem continues, contact bbc-images-support@bbc.co.uk.";
+export const announcementId = "sendToCaptureNotification";
 export const VALIDIMAGES = "#VALIDIMAGES#";
 export const INVALIDIMAGES = "#INVALIDIMAGES#";
 export const sendToCaptureCancelBtnTxt = "No";