@asd20/ui-next 2.31.7 → 2.32.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.32.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.8...ui-next-v2.32.0) (2026-10-12)
+
+
+### Features
+
+* share handbook translations with multilingual PDF downloads ([a034f23](https://github.com/academydistrict20/asd20-ui-next/commit/a034f237a2021e92376a0ff511f1380286221266))
+
+## [2.31.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.7...ui-next-v2.31.8) (2026-10-12)
+
+
+### Bug Fixes
+
+* refine 'send an email' functionality - help text, failure messaging, rate limits, spam detection ([a9c4a28](https://github.com/academydistrict20/asd20-ui-next/commit/a9c4a28f1fdab4c0c551aa2cfb6808fbc29742d2))
+
 ## [2.31.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.31.6...ui-next-v2.31.7) (2026-10-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.31.7",
+  "version": "2.32.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20ComposeEmailModal/index.vue

@@ -41,7 +41,7 @@
         :validator="validateMessageBody"
         label="Message"
         maxlength="8000"
-        help-text="Please enter at least 5 characters."
+        :help-text="messageHelpText"
         required
         @validated="validationErrors.messageBody = $event"
       />
@@ -124,6 +124,8 @@ import Asd20Button from '../../atoms/Asd20Button'
 import Recaptcha from '../../utils/Recaptcha'
 import sendEmail from '../../../helpers/sendEmail.js'
 
+const MIN_MESSAGE_LENGTH = 10
+
 export default {
   name: 'Asd20ComposeEmailModal',
   components: {
@@ -161,6 +163,11 @@ export default {
     },
   }),
   computed: {
+    messageHelpText() {
+      return String(this.emailMessage.messageBody || '').trim().length < MIN_MESSAGE_LENGTH
+        ? 'Please provide more detail.'
+        : ''
+    },
     modalTitle() {
       return 'Send an Email'
     },
@@ -228,8 +235,8 @@ export default {
     },
     validateMessageBody({ value, validationErrors }) {
       const message = String(value || '').trim()
-      if (message && message.length < 5)
-        validationErrors.push('The message must be at least 5 characters.')
+      if (message && message.length < MIN_MESSAGE_LENGTH)
+        validationErrors.push('Please provide more detail.')
       return validationErrors
     },
     getFormValidationMessages() {
@@ -247,8 +254,8 @@ export default {
         messages.push('Enter a valid email address.')
       if (!subject) messages.push('A subject is required.')
       if (!messageBody) messages.push('A message is required.')
-      else if (messageBody.length < 5)
-        messages.push('The message must be at least 5 characters.')
+      else if (messageBody.length < MIN_MESSAGE_LENGTH)
+        messages.push('Please provide more detail.')
 
       return messages
     },
@@ -304,11 +311,25 @@ export default {
       const statusMatch = String(error?.message || '').match(/\b(\d{3})\b/)
       return statusMatch ? Number(statusMatch[1]) : null
     },
+    isDeliveryUnconfirmed(error) {
+      return this.getSendEmailResponseData(error)?.code === 'delivery_unconfirmed' || this.getSendEmailErrorStatus(error) === null
+    },
     getSendEmailFailureMessage(error) {
+      if (this.isDeliveryUnconfirmed(error)) {
+        return "We couldn't confirm that your message was sent. Please check with the school before sending it again."
+      }
       if (this.getSendEmailErrorStatus(error) === 429) {
+        const response = this.getSendEmailResponseData(error)
+        if (response?.code === 'rate_limited' && typeof response.error === 'string' && response.error.trim()) {
+          return response.error
+        }
         return 'We could not send your message right now. Please wait and try again later.'
       }
 
+      const response = this.getSendEmailResponseData(error)
+      if (['captcha_failed', 'email_unavailable'].includes(response?.code) && typeof response.error === 'string' && response.error.trim()) {
+        return response.error
+      }
       return 'Something went wrong while sending your email. Please try again later.'
     },
     getSendEmailResponseData(error) {
@@ -341,7 +362,7 @@ export default {
           'Enter a valid email address.',
         'messageBody is required.': 'A message is required.',
         'messageBody is too short.':
-          'The message must be at least 5 characters.',
+          'Please provide more detail.',
         'messageBody is too long.':
           'The message must be 8,000 characters or fewer.',
         'Recipient was not found or does not have a public email address.':
@@ -374,15 +395,18 @@ export default {
           response?.code === 'moderation_unavailable'
             ? 'Email temporarily unavailable'
             : 'Message not sent',
-          response?.error ||
-            "We couldn't send your message through this form. For assistance contacting the appropriate staff member, please contact the Academy District 20 Help Desk at help@asd20.org or 719-234-1777.",
+          typeof response?.error === 'string' && response.error.trim()
+            ? response.error
+            : response?.code === 'moderation_unavailable'
+              ? "We couldn't send your message right now. Please try again later. If the problem persists, please contact the Academy District 20 Help Desk at help@asd20.org or 719-234-1777."
+              : 'Your message could not be sent through this form.',
           reference
         )
         return
       }
 
       this.showFeedback(
-        'Email not sent',
+        this.isDeliveryUnconfirmed(error) ? 'Delivery not confirmed' : 'Email not sent',
         this.getSendEmailFailureMessage(error),
         []
       )

package/src/components/templates/Asd20HandbookDocument/index.vue

@@ -2,6 +2,8 @@
   <div
     class="asd20-handbook-document"
     :data-asd20-document-root="documentId"
+    :lang="languageCode"
+    :dir="languageDirection"
   >
     <header class="asd20-handbook-document__cover">
       <div class="asd20-handbook-document__cover-heading">
@@ -13,10 +15,17 @@
           v-if="organization.logoImageUrl"
           class="asd20-handbook-document__logo"
           :src="organization.logoImageUrl"
-          :alt="`${coverTitle.organizationTitle} logo`"
+          :alt="`${coverTitle.organizationTitle} ${documentLabels.logo || 'logo'}`"
         />
       </div>
       <div class="asd20-handbook-document__cover-body">
+        <p
+          v-if="languageCode !== 'en'"
+          class="asd20-handbook-document__translation-notice"
+        >
+          {{ documentLabels.automatedTranslation }}
+          {{ documentLabels.onlineAuthority }}
+        </p>
         <asd20-messaging
           :body-content="messages[0]?.bodyContent || ''"
           :body-json="messages[0]?.bodyJson || ''"
@@ -24,7 +33,10 @@
         />
       </div>
     </header>
-    <asd20-print-contents :headings="document.headings" />
+    <asd20-print-contents
+      :headings="document.headings"
+      :label="documentLabels.contents || 'Contents'"
+    />
     <main>
       <article
         v-for="entry in document.entries"
@@ -75,11 +87,14 @@ export default {
     printMetadata: { type: Object, default: () => ({}) },
     includeIntroductionBody: { type: Boolean, default: true },
     schoolYear: { type: String, default: '' },
+    languageCode: { type: String, default: 'en' },
+    languageDirection: { type: String, default: 'ltr' },
+    documentLabels: { type: Object, default: () => ({}) },
   },
   computed: {
     document() { return buildHandbookDocument(this.$props) },
     coverTitle() {
-      return handbookCoverTitle(this.organization, this.document.introduction.heading || this.title, this.printMetadata.generatedAt || new Date().toISOString())
+      return handbookCoverTitle(this.organization, this.document.introduction.heading || this.title, this.printMetadata.generatedAt || new Date().toISOString(), this.documentLabels)
     },
   },
 }

package/src/components/templates/Asd20HandbookTemplate/index.vue

@@ -34,6 +34,8 @@
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
       :language-code="languageCode"
+      :lang="contentLanguageCode || languageCode || 'en'"
+      :dir="contentDirection"
       @update:languageCode="$emit('update:languageCode', $event)"
     >
       <template #calls-to-action="{ size }">
@@ -95,7 +97,10 @@
           <p>
             Our handbooks are presented in English. You can use the translate button at the top of the page to view the handbook in your preferred language.
           </p>
-          <p>
+          <p v-if="translatedPdfAvailable">
+            When the handbook has finished translating, Download PDF provides a version in that language.
+          </p>
+          <p v-else>
             <strong>Coming Soon:</strong> if you are viewing the handbook in a language other than English, and click Download PDF, you'll get a handbook version in that selected language.
           </p>
           <p>
@@ -123,6 +128,8 @@
 
     <main
       id="handbook-content"
+      :lang="contentLanguageCode || languageCode || 'en'"
+      :dir="contentDirection"
       class="asd20-template-handbook__layout"
       tabindex="-1"
     >
@@ -299,6 +306,9 @@ export default {
   },
   props: {
     documentPrint: { type: Boolean, default: false },
+    contentLanguageCode: { type: String, default: '' },
+    contentDirection: { type: String, default: 'ltr' },
+    translatedPdfAvailable: { type: Boolean, default: false },
     printMetadata: { type: Object, default: () => ({}) },
     publicationDocumentId: { type: String, default: 'handbook' },
     publicationDocumentUrl: { type: String, default: '' },

package/src/helpers/handbookPresentation.js

@@ -30,35 +30,38 @@ export function isDistrictHandbook(organization = {}) {
   )
 }
 
-function handbookTitles(organization, firstMessageTitle) {
+function handbookTitles(organization, firstMessageTitle, labels = {}) {
   const organizationTitle = isDistrictHandbook(organization)
     ? 'Academy District 20'
     : organization.title || organization.name || 'School'
   const handbookTitle = isDistrictHandbook(organization)
-    ? firstMessageTitle || 'School Handbook'
-    : 'School Handbook'
+    ? firstMessageTitle || labels.schoolHandbook || 'School Handbook'
+    : labels.schoolHandbook || 'School Handbook'
   return { organizationTitle, handbookTitle }
 }
 
 export function handbookCoverTitle(
   organization = {},
   firstMessageTitle = '',
-  generatedAt
+  generatedAt,
+  labels = {}
 ) {
-  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle)
+  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle, labels)
   return { organizationTitle, handbookTitle: `${handbookSchoolYear(generatedAt)} ${handbookTitle}` }
 }
 
-export function handbookFooterTitle(organization = {}, firstMessageTitle = '') {
-  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle)
+export function handbookFooterTitle(organization = {}, firstMessageTitle = '', labels = {}) {
+  const { organizationTitle, handbookTitle } = handbookTitles(organization, firstMessageTitle, labels)
   return `${organizationTitle} ${handbookTitle}`
 }
 
 export function handbookDownloadFilename(
   organization = {},
   generatedAt,
-  firstMessageTitle = ''
+  firstMessageTitle = '',
+  language = 'en'
 ) {
+  if (!/^[a-z]{2,3}(?:-[A-Za-z]{2,8})?$/.test(language)) throw new Error('Invalid handbook language.')
   const safe = (value) =>
     String(value || '')
       .replace(/[^a-zA-Z0-9_. ()-]/g, '')
@@ -69,5 +72,5 @@ export function handbookDownloadFilename(
   const title = isDistrictHandbook(organization)
     ? `ASD20 ${safe(firstMessageTitle) || 'School Handbook'}`
     : `${abbreviation ? abbreviation + ' ' : ''}School Handbook`
-  return `${title} - ${year}-${month}-${day}.pdf`
+  return `${title}${language === 'en' ? '' : ` (${language})`} - ${year}-${month}-${day}.pdf`
 }