@asd20/ui-next 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.7.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.6.0...ui-next-v2.7.0) (2026-05-05)
+
+
+### Features
+
+* implement AI evaluation of email messages ([4ed90b4](https://github.com/academydistrict20/asd20-ui-next/commit/4ed90b413da2b2690b3655c1c701003cbdbb7bd6))
+
+# [2.6.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.5.0...ui-next-v2.6.0) (2026-05-04)
+
+
+### Features
+
+* add rate limit to emails and associated messaging ([66e4099](https://github.com/academydistrict20/asd20-ui-next/commit/66e40994ac924a9dad184227beae4dded0dbf2d9))
+
 # [2.5.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.4.3...ui-next-v2.5.0) (2026-05-04)
 
 

package/package.json

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

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

@@ -9,47 +9,91 @@
     @dismiss="$emit('dismiss')"
   >
     <Asd20Viewport scrollable>
-      <asd20-text-input
-        id="senderName"
-        v-model="emailMessage.senderName"
-        label="Your Full Name"
-        required
-        @validated="validationErrors.senderName = $event"
-      />
-      <asd20-text-input
-        id="senderEmail"
-        v-model="emailMessage.senderEmail"
-        type="email"
-        :validator="validateEmailAddress"
-        label="Your Email Address"
-        required
-        @validated="validationErrors.senderEmail = $event"
-      />
-      <asd20-text-area-input
-        id="messageBody"
-        v-model="emailMessage.messageBody"
-        label="Message"
-        required
-        @validated="validationErrors.messageBody = $event"
-      />
-      <Recaptcha
-        sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
-        :load-recaptcha-script="true"
-        size="invisible"
-        @verify="captchaVerified"
-      >
-        <asd20-button
-          :disabled="!isValid || sending"
-          label="Send"
-          horizontal
-          centered
-          bordered
+      <template v-if="!sendRejected">
+        <asd20-text-input
+          id="senderName"
+          v-model="emailMessage.senderName"
+          label="Your Full Name"
+          required
+          @validated="validationErrors.senderName = $event"
+        />
+        <asd20-text-input
+          id="senderEmail"
+          v-model="emailMessage.senderEmail"
+          type="email"
+          :validator="validateEmailAddress"
+          label="Your Email Address"
+          required
+          @validated="validationErrors.senderEmail = $event"
         />
-      </Recaptcha>
-      <asd20-spinner
-        v-if="sending"
-        size="sm"
-      />
+        <asd20-text-area-input
+          id="messageBody"
+          v-model="emailMessage.messageBody"
+          label="Message"
+          required
+          @validated="validationErrors.messageBody = $event"
+        />
+        <div
+          class="asd20-compose-email-modal__submit"
+          aria-live="polite"
+        >
+          <Recaptcha
+            v-if="!sending && !sendSucceeded"
+            sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+            :load-recaptcha-script="true"
+            size="invisible"
+            @verify="captchaVerified"
+          >
+            <asd20-button
+              :disabled="!isValid"
+              label="Send"
+              horizontal
+              centered
+              bordered
+            />
+          </Recaptcha>
+          <asd20-spinner
+            v-else-if="sending"
+            size="sm"
+          />
+          <p
+            v-else
+            class="asd20-compose-email-modal__success"
+            role="status"
+          >
+            Your message was sent.
+          </p>
+        </div>
+      </template>
+      <div
+        v-else
+        class="asd20-compose-email-modal__rejection"
+        role="status"
+      >
+        <p
+          class="asd20-compose-email-modal__rejection-message"
+        >
+          Please contact the Academy District 20 Help Desk who can evaluate your
+          request and route it appropriately.
+        </p>
+        <div class="asd20-compose-email-modal__rejection-actions">
+          <asd20-button
+            label="Contact Our Help Desk"
+            :link="helpDeskUrl"
+            horizontal
+            centered
+            bordered
+          />
+          <asd20-button
+            label="Cancel"
+            horizontal
+            centered
+            bordered
+            transparent
+            @click="$emit('dismiss')"
+          />
+        </div>
+      </div>
     </Asd20Viewport>
   </asd20-modal>
 </template>
@@ -87,6 +131,9 @@ export default {
     },
     composing: false,
     sending: false,
+    sendSucceeded: false,
+    sendRejected: false,
+    helpDeskUrl: 'https://asd20.org/help-desk',
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -102,6 +149,11 @@ export default {
       )
     },
   },
+  watch: {
+    open(value) {
+      if (value) this.resetSendState()
+    },
+  },
   methods: {
     resolveRuntimeConfig() {
       const runtimeConfig =
@@ -129,7 +181,8 @@ export default {
       )
     },
     validateEmailAddress({ value, validationErrors }) {
-      const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+      const pattern =
+        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
       const regex = RegExp(pattern)
       if (!regex.test(value))
         validationErrors.push('A valid email address is required')
@@ -149,15 +202,40 @@ export default {
     captchaVerified(response) {
       if (response) this.sendEmail(response)
     },
+    resetSendState() {
+      this.sending = false
+      this.sendSucceeded = false
+      this.sendRejected = false
+    },
+    waitForSuccessMessage() {
+      return new Promise(resolve => {
+        setTimeout(resolve, 1200)
+      })
+    },
+    getSendEmailErrorStatus(error) {
+      if (error?.response?.status) return Number(error.response.status)
+      if (error?.status) return Number(error.status)
+
+      const statusMatch = String(error?.message || '').match(/\b(\d{3})\b/)
+      return statusMatch ? Number(statusMatch[1]) : null
+    },
+    getSendEmailFailureMessage(error) {
+      if (this.getSendEmailErrorStatus(error) === 429) {
+        return 'We could not send your message right now. Please wait and try again later.'
+      }
+
+      return 'Something went wrong while sending your email. Please try again later.'
+    },
+    isHelpDeskRejection(error) {
+      return error?.response?.data?.code === 'moderation_rejected'
+    },
     async sendEmail(captchaToken = '') {
       if (!this.isValid) return
 
       const endpoint = this.resolveSendEmailEndpoint()
       const sendEmailClient =
         this.$sendEmail ||
-        (endpoint
-          ? async (message) => await sendEmail(message, endpoint)
-          : null)
+        (endpoint ? async message => await sendEmail(message, endpoint) : null)
 
       if (!sendEmailClient) {
         console.error('Send email endpoint is not configured.')
@@ -168,6 +246,7 @@ export default {
       }
 
       this.sending = true
+      this.sendSucceeded = false
       try {
         await sendEmailClient(
           Object.assign({}, this.emailMessage, {
@@ -175,12 +254,20 @@ export default {
             captchaToken,
           })
         )
+        this.sending = false
+        this.sendSucceeded = true
+        await this.waitForSuccessMessage()
         this.$emit('dismiss')
       } catch (error) {
+        this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
-        alert(
-          'Something went wrong while sending your email. Please try again later.'
-        )
+        if (this.isHelpDeskRejection(error)) {
+          this.helpDeskUrl =
+            error?.response?.data?.helpDeskUrl || 'https://asd20.org/help-desk'
+          this.sendRejected = true
+          return
+        }
+        alert(this.getSendEmailFailureMessage(error))
       } finally {
         this.sending = false
       }
@@ -196,6 +283,35 @@ export default {
   & :deep(.asd20-modal__content .asd20-viewport) {
     padding: space(1);
   }
+
+  &__submit {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-height: 3rem;
+  }
+
+  &__success {
+    font-weight: 600;
+    margin: 0;
+    text-align: center;
+  }
+
+  &__rejection {
+    display: flex;
+    flex-direction: column;
+    gap: space(1);
+  }
+
+  &__rejection-message {
+    margin: 0;
+  }
+
+  &__rejection-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: space(0.75);
+  }
 }
 
 @media (min-width: 1024px) {

package/src/helpers/sendEmail.js

@@ -9,7 +9,7 @@ function emailMessageIsValid(emailMessage) {
   )
 }
 
-export default async function(emailMessage, endpoint) {
+export default async function (emailMessage, endpoint) {
   // Check to see if the parameters is valid
   if (!emailMessageIsValid(emailMessage))
     throw new Error(
@@ -20,13 +20,15 @@ export default async function(emailMessage, endpoint) {
     await axios.post(endpoint, emailMessage)
   } catch (error) {
     if (error.response) {
-      throw new Error(
+      const sendError = new Error(
         `A ${
           error.response.status
         } error occurred while attempting to send email: ${JSON.stringify(
           error.response.data
         )}`
       )
+      sendError.response = error.response
+      throw sendError
     } else {
       // Something happened in setting up the request and triggered an Error
       throw new Error(