@asd20/ui-next 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.6.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,59 +9,90 @@
     @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"
-      />
+      <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"
+        />
+        <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
-        class="asd20-compose-email-modal__submit"
-        aria-live="polite"
+        v-else
+        class="asd20-compose-email-modal__rejection"
+        role="status"
       >
-        <Recaptcha
-          v-if="!sending && !sendSucceeded"
-          sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
-          :load-recaptcha-script="true"
-          size="invisible"
-          @verify="captchaVerified"
+        <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
-            :disabled="!isValid"
-            label="Send"
+            label="Contact Our Help Desk"
+            :link="helpDeskUrl"
             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>
+          <asd20-button
+            label="Cancel"
+            horizontal
+            centered
+            bordered
+            transparent
+            @click="$emit('dismiss')"
+          />
+        </div>
       </div>
     </Asd20Viewport>
   </asd20-modal>
@@ -101,6 +132,8 @@ export default {
     composing: false,
     sending: false,
     sendSucceeded: false,
+    sendRejected: false,
+    helpDeskUrl: 'https://asd20.org/help-desk',
     emailMessage: {
       senderName: '',
       senderEmail: '',
@@ -172,6 +205,7 @@ export default {
     resetSendState() {
       this.sending = false
       this.sendSucceeded = false
+      this.sendRejected = false
     },
     waitForSuccessMessage() {
       return new Promise(resolve => {
@@ -192,6 +226,9 @@ export default {
 
       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
 
@@ -224,6 +261,12 @@ export default {
       } catch (error) {
         this.sendSucceeded = false
         console.error('Email send failed:', error?.message || error)
+        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
@@ -253,6 +296,22 @@ export default {
     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) {