T3088 capture published UI

kahuna/public/js/components/gr-icon/gr-icon.css

@@ -57,6 +57,12 @@ gr-icon-label .icon-label {
   padding-right: 6px;
 }
 
+.gr-sent-to-photosales-unpub-icon svg {
+  width: 42px;
+  height: 32px;
+  padding-right: 6px;
+}
+
 gr-library-add-icon    svg,
 gr-library-added-icon  svg,
 gr-library-locked-icon svg,

kahuna/public/js/components/gr-icon/gr-icon.js

@@ -10,6 +10,7 @@ import libraryLockedIcon from './icons/library-locked.svg';
 import libraryRemoveIcon from './icons/library-remove.svg';
 
 import sentToPhotoSalesIcon from './icons/sent-to-photosales.svg';
+import sentToPhotoSalesUnpubIcon from './icons/sent-to-photosales-unpub.svg';
 
 export var icon = angular.module('grIcon', []);
 
@@ -59,3 +60,4 @@ defineIcon('grLibraryLockedIcon', libraryLockedIcon);
 defineIcon('grLibraryRemoveIcon', libraryRemoveIcon);
 
 defineIcon('grSentToPhotosalesIcon', sentToPhotoSalesIcon);
+defineIcon('grSentToPhotosalesUnpubIcon', sentToPhotoSalesUnpubIcon);

kahuna/public/js/preview/image.html

@@ -196,7 +196,12 @@
         <span class="bottom-bar__meta-item preview__has-syndication-usages preview__bottom-icons-align-right"
               title="This image exists in BBC Photo Sales"
               ng-if="(ctrl.hasSyndicationUsages || ctrl.uploadedByCapture) && ctrl.showSendToPhotoSales() && ctrl.showPaid">
-              <gr-sent-to-photosales-icon class="gr-sent-to-photosales-icon"></gr-sent-to-photosales-icon>
+              <span ng-if="ctrl.sentToPhotosalesPublished()">
+                  <gr-sent-to-photosales-icon class="gr-sent-to-photosales-icon"></gr-sent-to-photosales-icon>
+              </span>
+              <span ng-if="!ctrl.sentToPhotosalesPublished()">
+                  <gr-sent-to-photosales-unpub-icon class="gr-sent-to-photosales-unpub-icon"></gr-sent-to-photosales-unpub-icon>
+              </span>
         </span>
     </div>
 </div>

kahuna/public/js/preview/image.js

@@ -66,6 +66,10 @@ image.controller('uiPreviewImageCtrl', [
 
       ctrl.showSendToPhotoSales = () => $window._clientConfig.showSendToPhotoSales;
       ctrl.uploadedByCapture = ctrl.image.data.uploadedBy === "Capture_AutoIngest";
+      ctrl.sentToPhotosalesPublished = () => {
+        const isPublished = ctrl.image.data.metadata.domainMetadata?.archives?.isPublished ?? "True";
+        return isPublished === "True";
+      };
       mediaApi.getSession().then(session => {
         ctrl.showPaid = session.user.permissions.showPaid ? session.user.permissions.showPaid : undefined;
       });