Add details to submit panel about acceptance criteria

marcellamaki · marcellamaki · commit 3ffe13904d9b · 2026-04-13T11:30:11.000-04:00
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/__tests__/SubmitToCommunityLibrarySidePanel.spec.js
@@ -30,8 +30,14 @@ jest.mock('shared/data/resources', () => ({
 
 const store = factory();
 
-const { nonePrimaryInfo$, flaggedPrimaryInfo$, approvedPrimaryInfo$, submittedPrimaryInfo$ } =
-  communityChannelsStrings;
+const {
+  nonePrimaryInfo$,
+  flaggedPrimaryInfo$,
+  approvedPrimaryInfo$,
+  submittedPrimaryInfo$,
+  moreDetails$,
+  countriesInfoText$,
+} = communityChannelsStrings;
 
 async function makeWrapper({ channel, publishedData, latestSubmission }) {
   const isLoading = ref(true);
@@ -246,26 +252,54 @@ describe('SubmitToCommunityLibrarySidePanel', () => {
       expect(moreDetailsButton.exists()).toBe(false);
     });
 
-    it('when clicked, shows additional info', async () => {
+    it('when clicked, shows additional info and a hide button', async () => {
       const wrapper = await makeWrapper({
         channel: publishedNonPublicChannel,
         publishedData,
         latestSubmission: null,
       });
 
-      const infoText = wrapper.find('.info-text');
-      expect(infoText.text()).not.toContain('The Kolibri Community Library features channels');
-
       const moreDetailsButton = wrapper.find('[data-test="more-details-button"]');
+      expect(wrapper.text()).not.toContain(moreDetails$());
       await moreDetailsButton.trigger('click');
 
-      expect(infoText.text()).toContain('The Kolibri Community Library features channels');
+      expect(wrapper.text()).toContain(moreDetails$());
 
       const lessDetailsButton = wrapper.find('[data-test="less-details-button"]');
       expect(lessDetailsButton.exists()).toBe(true);
     });
   });
 
+  describe('show more country info button', () => {
+    it('is always displayed', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: { channel_version: 1, status: CommunityLibraryStatus.APPROVED },
+      });
+
+      const moreCountryInfoButton = wrapper.find('[data-test="more-country-info-button"]');
+      expect(moreCountryInfoButton.exists()).toBe(true);
+    });
+
+    it('when clicked, shows country info and a hide button', async () => {
+      const wrapper = await makeWrapper({
+        channel: publishedNonPublicChannel,
+        publishedData,
+        latestSubmission: null,
+      });
+
+      const moreCountryInfoButton = wrapper.find('[data-test="more-country-info-button"]');
+      expect(wrapper.text()).not.toContain(countriesInfoText$());
+      await moreCountryInfoButton.trigger('click');
+
+      expect(wrapper.text()).toContain(countriesInfoText$());
+
+      const lessCountryInfoButton = wrapper.find('[data-test="less-country-info-button"]');
+      expect(lessCountryInfoButton.exists()).toBe(true);
+    });
+  });
+
   describe('publishing state', () => {
     beforeEach(() => {
       jest.useFakeTimers();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/index.vue
@@ -152,6 +152,43 @@
               :channel-version-id="channelVersionId"
               @update:allChecked="allSpecialPermissionsChecked = $event"
             />
+            <hr >
+            <div class="info-text">
+              <p class="checklist-intro">
+                {{ channelFitChecklistIntro$() }}
+              </p>
+              <ul
+                v-if="showingCriteria"
+                class="checklist"
+              >
+                <li>
+                  <strong>{{ channelFitLicenseLabel$() }}:</strong>
+                  {{ channelFitChecklistLicense$() }}
+                </li>
+                <li>
+                  <strong>{{ channelFitOfflineUseLabel$() }}:</strong>
+                  {{ channelFitChecklistOfflineUse$() }}
+                </li>
+                <li>
+                  <strong>{{ channelFitAttributionLabel$() }}:</strong>
+                  {{ channelFitChecklistAttribution$() }}
+                </li>
+                <li>
+                  <strong>{{ channelFitQualityLabel$() }}:</strong>
+                  {{ channelFitChecklistQuality$() }}
+                </li>
+                <li>
+                  <strong>{{ channelFitChannelInfoLabel$() }}:</strong>
+                  {{ channelFitChecklistChannelInfo$() }}
+                </li>
+              </ul>
+              <KButton
+                appearance="basic-link"
+                @click="showingCriteria = !showingCriteria"
+              >
+                {{ showingCriteria ? hideCriteriaAction$() : viewCriteriaAction$() }}
+              </KButton>
+            </div>
             <div class="country-area">
               <KTransition kind="component-fade-out-in">
                 <div
@@ -171,6 +208,25 @@
                 />
               </KTransition>
             </div>
+            <div v-if="showingCountriesInfo">
+              <div class="info-text">{{ countriesInfoText$() }}</div>
+              <KButton
+                appearance="basic-link"
+                data-test="less-country-info-button"
+                @click="showingCountriesInfo = false"
+              >
+                {{ lessDetailsButton$() }}
+              </KButton>
+            </div>
+            <div v-else>
+              <KButton
+                appearance="basic-link"
+                data-test="more-country-info-button"
+                @click="showingCountriesInfo = true"
+              >
+                {{ moreDetailsButton$() }}
+              </KButton>
+            </div>
             <KTextbox
               v-model="description"
               :disabled="!canBeEdited"
@@ -275,6 +331,7 @@
         moreDetailsButton$,
         lessDetailsButton$,
         countryLabel$,
+        countriesInfoText$,
         descriptionLabel$,
         descriptionRequired$,
         notPublishedWarningTitle$,
@@ -295,12 +352,27 @@
         submittingSnackbar$,
         publishingMessage$,
         confirmReplacementText$,
+        channelFitChecklistIntro$,
+        channelFitLicenseLabel$,
+        channelFitChecklistLicense$,
+        channelFitOfflineUseLabel$,
+        channelFitChecklistOfflineUse$,
+        channelFitAttributionLabel$,
+        channelFitChecklistAttribution$,
+        channelFitQualityLabel$,
+        channelFitChecklistQuality$,
+        channelFitChannelInfoLabel$,
+        channelFitChecklistChannelInfo$,
+        viewCriteriaAction$,
+        hideCriteriaAction$,
       } = communityChannelsStrings;
 
       const annotationColor = computed(() => tokensTheme.annotation);
       const infoTextColor = computed(() => paletteTheme.grey.v_700);
 
       const showingMoreDetails = ref(false);
+      const showingCriteria = ref(false);
+      const showingCountriesInfo = ref(false);
       const countries = ref([]);
       const description = ref('');
       const isPublishing = computed(() => props.channel?.publishing === true);
@@ -542,6 +614,8 @@
         annotationColor,
         infoTextColor,
         showingMoreDetails,
+        showingCriteria,
+        showingCountriesInfo,
         countries,
         description,
         replacementConfirmed,
@@ -571,6 +645,7 @@
         moreDetailsButton$,
         lessDetailsButton$,
         countryLabel$,
+        countriesInfoText$,
         descriptionLabel$,
         descriptionRequired$,
         channelVersion$,
@@ -587,6 +662,19 @@
         confirmReplacementText$,
         checkedSpecialPermissions,
         allSpecialPermissionsChecked,
+        channelFitChecklistIntro$,
+        channelFitLicenseLabel$,
+        channelFitChecklistLicense$,
+        channelFitOfflineUseLabel$,
+        channelFitChecklistOfflineUse$,
+        channelFitAttributionLabel$,
+        channelFitChecklistAttribution$,
+        channelFitQualityLabel$,
+        channelFitChecklistQuality$,
+        channelFitChannelInfoLabel$,
+        channelFitChecklistChannelInfo$,
+        viewCriteriaAction$,
+        hideCriteriaAction$,
       };
     },
     props: {
@@ -628,6 +716,14 @@
     color: v-bind('annotationColor');
   }
 
+  .checklist {
+    padding-bottom: 12px;
+  }
+
+  .checklist-intro {
+    font-weight: 600;
+  }
+
   .content {
     display: flex;
     flex-direction: column;
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -164,7 +164,8 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
       'Information shown in the "Submit to Community Library" panel when a previous version was flagged',
   },
   nonePrimaryInfo: {
-    message: 'Your published channel will be added to the Community Library review queue.',
+    message:
+      "We're inviting members of the Kolibri community to submit channels they've created for offline learning in low-resource settings. ",
     context:
       'Information shown in the "Submit to Community Library" panel when there are no previous submissions',
   },
@@ -180,10 +181,15 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
   },
   moreDetails: {
     message:
-      "The Kolibri Community Library features channels created by the community. Share your openly licensed work for review, and once it's approved, it will be available to users in your selected region or language.",
+      "After your submission is approved, the channel will be available to other Kolibri Studio users on the 'Community Library' page.",
     context:
       'Detailed description of the Community Library shown in the "Submit to Community Library" panel',
   },
+  countriesInfoText: {
+    message:
+      'Select one or more countries to tag your channels submission with. For example, if your channel contains materials aligned to a national curriculum or regionally-specific content, selecting the relevant countries will help users find it. Otherwise, leave this blank.',
+    context: 'Help text for the country selection field in the "Submit to Community Library" panel',
+  },
   notPublishedWarningTitle: {
     message: "This channel isn't published to Kolibri Studio yet",
     context:
@@ -216,7 +222,7 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
       'Description of warning shown in the "Submit to Community Library" panel when the current version is already submitted',
   },
   descriptionLabel: {
-    message: "Describe what's new in this submission",
+    message: "Describe what's included in this submission",
     context:
       'Label for the submission description field in the "Submit to Community Library" panel',
   },
@@ -273,6 +279,63 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     context:
       'Label for the notes that admins can add to a submission in the Community Library for themselves',
   },
+  channelFitLicenseLabel: {
+    message: 'License',
+    context: 'Label for the license checklist item in the channel fit checklist',
+  },
+  channelFitOfflineUseLabel: {
+    message: 'Offline use',
+    context: 'Label for the offline use checklist item in the channel fit checklist',
+  },
+  channelFitAttributionLabel: {
+    message: 'Attribution',
+    context: 'Label for the attribution checklist item in the channel fit checklist',
+  },
+  channelFitQualityLabel: {
+    message: 'Quality',
+    context: 'Label for the quality checklist item in the channel fit checklist',
+  },
+  channelFitChannelInfoLabel: {
+    message: 'Channel information',
+    context: 'Label for the channel information checklist item in the channel fit checklist',
+  },
+  channelFitChecklistIntro: {
+    message: 'Is your channel a good fit?',
+    context:
+      'Introductory text before a checklist of criteria for submitting a channel to the Community Library',
+  },
+  viewCriteriaAction: {
+    message: 'View criteria',
+    context: 'Button text to view the channel fit checklist criteria',
+  },
+  hideCriteriaAction: {
+    message: 'Hide criteria',
+    context: 'Button text to hide the channel fit checklist criteria',
+  },
+  channelFitChecklistLicense: {
+    message: 'Is your content openly licensed or in the public domain?',
+    context:
+      'License checklist item asking whether the channel content uses open or public domain licenses',
+  },
+  channelFitChecklistOfflineUse: {
+    message: 'Does your channel work without an internet connection?',
+    context: 'Offline use checklist item asking whether the channel works offline',
+  },
+  channelFitChecklistAttribution: {
+    message: 'Does each piece of content have an author listed?',
+    context: 'Attribution checklist item asking whether content items have authors listed',
+  },
+  channelFitChecklistQuality: {
+    message:
+      'Has anyone on your team or in your organization reviewed it and found it useful for learners?',
+    context:
+      'Quality checklist item asking whether the channel has been reviewed and validated by someone on the team',
+  },
+  channelFitChecklistChannelInfo: {
+    message:
+      "Is your channel's basic information filled in — title, description, thumbnail, language, subject, and level?",
+    context: 'Channel information checklist item asking whether the channel metadata is complete',
+  },
   confirmReplacementText: {
     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',
