Show resubmit channel to community library CTA after channel publish

contentcuration/contentcuration/frontend/channelEdit/components/modals/ResubmitChannelModal.vue

@@ -0,0 +1,164 @@
+<template>
+
+  <KModal
+    v-if="value"
+    :title="title"
+    data-test="resubmit-modal"
+    @cancel="handleDismiss"
+  >
+    <div class="resubmit-modal-content">
+      <p class="resubmit-modal-description">{{ description }}</p>
+      <p class="resubmit-modal-question">{{ question }}</p>
+    </div>
+
+    <template #actions>
+      <div class="resubmit-modal-actions">
+        <KButton
+          class="resubmit-modal-dismiss-btn"
+          :style="dismissButtonStyles"
+          data-test="dismiss-button"
+          @click="handleDismiss"
+        >
+          {{ dismissButtonText }}
+        </KButton>
+        <KButton
+          class="resubmit-modal-resubmit-btn"
+          primary
+          data-test="resubmit-button"
+          @click="handleResubmit"
+        >
+          {{ resubmitButtonText }}
+        </KButton>
+      </div>
+    </template>
+  </KModal>
+
+</template>
+
+
+<script>
+
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  export default {
+    name: 'ResubmitChannelModal',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      channel: {
+        type: Object,
+        required: true,
+        validator(value) {
+          return value && typeof value.name === 'string' && typeof value.version === 'number';
+        },
+      },
+    },
+    computed: {
+      title() {
+        return communityChannelsStrings.resubmitModalTitle$();
+      },
+      description() {
+        return communityChannelsStrings.resubmitModalBodyFirst$({
+          channelName: this.channel.name,
+          version: this.channel.version,
+        });
+      },
+      question() {
+        return communityChannelsStrings.resubmitModalBodySecond$();
+      },
+      dismissButtonText() {
+        return communityChannelsStrings.dismissButton$();
+      },
+      resubmitButtonText() {
+        return communityChannelsStrings.resubmitButton$();
+      },
+      dismissButtonStyles() {
+        return {
+          color: this.$themeTokens.primary,
+          backgroundColor: this.$themePalette.grey.v_100,
+          '--hover-bg-color': this.$themePalette.grey.v_200,
+        };
+      },
+    },
+    methods: {
+      handleDismiss() {
+        this.$emit('dismiss');
+        this.$emit('input', false);
+      },
+      handleResubmit() {
+        this.$emit('resubmit');
+        this.$emit('input', false);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss">
+
+  [data-test='resubmit-modal'],
+  [data-test='resubmit-modal'] > *,
+  [data-test='resubmit-modal'] [role='dialog'],
+  [data-test='resubmit-modal'] .KModal,
+  [data-test='resubmit-modal'] .modal {
+    width: 500px !important;
+    max-width: 500px !important;
+    max-height: 284px !important;
+  }
+
+  [data-test='resubmit-modal'] h1,
+  [data-test='resubmit-modal'] h2,
+  [data-test='resubmit-modal'] h3,
+  [data-test='resubmit-modal'] h4,
+  [data-test='resubmit-modal'] .modal-title,
+  [data-test='resubmit-modal'] [class*='title'] {
+    width: 452px;
+    height: 52px;
+    font-family: 'Noto Sans', sans-serif;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 130%;
+    letter-spacing: 0%;
+    vertical-align: middle;
+  }
+
+  .resubmit-modal-content {
+    padding: 8px 0;
+    margin-top: 35px;
+  }
+
+  .resubmit-modal-description,
+  .resubmit-modal-question {
+    width: 100%;
+    min-height: 40px;
+    padding: 0;
+    margin: 0;
+    font-family: 'Noto Sans', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0%;
+    vertical-align: middle;
+  }
+
+  .resubmit-modal-actions {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+    width: 452px;
+    min-height: 40px;
+    padding-top: 16px;
+  }
+
+  .resubmit-modal-dismiss-btn:hover {
+    background-color: var(--hover-bg-color) !important;
+  }
+
+  .resubmit-modal-resubmit-btn {
+    height: 40px;
+  }
+
+</style>

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue

@@ -328,6 +328,8 @@
               });
             }
 
+            emit('published', { channelId: currentChannel.value.id });
+
             await Channel.publish(currentChannel.value.id, version_notes.value);
 
             emit('close');
@@ -402,7 +404,7 @@
       };
     },
 
-    emits: ['close'],
+    emits: ['close', 'published'],
   };
 
 </script>

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue

@@ -235,12 +235,20 @@
     <PublishSidePanel
       v-if="showPublishSidePanel"
       @close="showPublishSidePanel = false"
+      @published="handleChannelPublished"
     />
     <SubmitToCommunityLibrarySidePanel
       v-if="showSubmitToCommunityLibrarySidePanel"
       :channel="currentChannel"
       @close="showSubmitToCommunityLibrarySidePanel = false"
     />
+    <ResubmitChannelModal
+      v-if="resubmitModalChannel || currentChannel"
+      v-model="showResubmitModal"
+      :channel="resubmitModalChannel || currentChannel"
+      @resubmit="handleResubmit"
+      @dismiss="handleDismissResubmit"
+    />
     <template v-if="isPublished">
       <ChannelTokenModal
         v-model="showTokenModal"
@@ -349,6 +357,8 @@
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
   import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
   import SubmitToCommunityLibrarySidePanel from '../../components/sidePanels/SubmitToCommunityLibrarySidePanel';
+  import ResubmitChannelModal from '../../components/modals/ResubmitChannelModal';
+  import { Channel, CommunityLibrarySubmission } from 'shared/data/resources';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import ToolBar from 'shared/views/ToolBar';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
@@ -369,6 +379,7 @@
       ToolBar,
       PublishSidePanel,
       SubmitToCommunityLibrarySidePanel,
+      ResubmitChannelModal,
       ProgressModal,
       ChannelTokenModal,
       SyncResourcesModal,
@@ -392,11 +403,13 @@
         drawer: false,
         showPublishSidePanel: false,
         showSubmitToCommunityLibrarySidePanel: false,
+        showResubmitModal: false,
         showTokenModal: false,
         showSyncModal: false,
         showClipboard: false,
         showDeleteModal: false,
         syncing: false,
+        resubmitModalChannel: null,
       };
     },
     computed: {
@@ -546,6 +559,40 @@
         this.showPublishSidePanel = true;
         this.trackClickEvent('Publish');
       },
+      handleResubmit() {
+        this.showResubmitModal = false;
+        this.showSubmitToCommunityLibrarySidePanel = true;
+      },
+      handleDismissResubmit() {
+        this.showResubmitModal = false;
+        this.resubmitModalChannel = null;
+      },
+      async handleChannelPublished({ channelId }) {
+        if (!channelId || !this.currentChannel || this.currentChannel.id !== channelId) {
+          return;
+        }
+
+        const response = await CommunityLibrarySubmission.fetchCollection({
+          channel: channelId,
+          max_results: 1,
+        });
+
+        let submissions = [];
+        if (Array.isArray(response)) {
+          submissions = response;
+        } else if (response && response.results && Array.isArray(response.results)) {
+          submissions = response.results;
+        }
+
+        if (submissions.length > 0) {
+          const latestSubmission = submissions[0];
+          this.resubmitModalChannel = {
+            ...this.currentChannel,
+            version: latestSubmission.channel_version,
+          };
+          this.showResubmitModal = true;
+        }
+      },
       trackClickEvent(eventLabel) {
         this.$analytics.trackClick('channel_editor_toolbar', eventLabel);
       },

contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js

@@ -208,4 +208,28 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'I understand this will replace my earlier submission on the review queue',
     context: 'Checkbox text shown when there is a pending submission to confirm replacement',
   },
+  resubmitModalTitle: {
+    message: 'Resubmit channel for Community library review?',
+    context:
+      'Title of the modal shown after publishing a channel that already has Community Library submissions',
+  },
+  resubmitModalBodyFirst: {
+    message: '{channelName} v{version} is also published to the Community Library.',
+    context:
+      'First sentence of the body text of the modal shown after publishing a channel that already has Community Library submissions',
+  },
+  resubmitModalBodySecond: {
+    message:
+      'Would you like to resubmit this version with your changes for community library review?',
+    context:
+      'Second sentence of the body text of the modal shown after publishing a channel that already has Community Library submissions',
+  },
+  resubmitButton: {
+    message: 'RESUBMIT',
+    context: 'Button in the resubmit modal to open the submit to Community Library side panel',
+  },
+  dismissButton: {
+    message: 'DISMISS',
+    context: 'Button in the resubmit modal to dismiss the modal',
+  },
 });