Production Release (#527)

Includes issue(s):
Issue #515 Update USWDS from 3.71 to 3.8 | Training Website
Issue #510 Bug: Update content in email sent to GSPC Attendees
Issue #509 Add button to the Send Invitations for GSA SmartPay Program Certification screen

training-front-end/.pa11yci-desktop

@@ -2,6 +2,7 @@
   "defaults": {
     "concurrency": 1,
     "standard": "WCAG2AA",
+    "hideElements": "iframe",
     "timeout": 10000,
     "chromeLaunchConfig": {
         "args": ["--no-sandbox"]

training-front-end/.pa11yci-mobile

@@ -2,6 +2,7 @@
   "defaults": {
     "concurrency": 1,
     "standard": "WCAG2AA",
+    "hideElements": "iframe",
     "timeout": 10000,
     "chromeLaunchConfig": {
         "args": ["--no-sandbox"]

training-front-end/package.json

@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@uswds/compile": "^1.1.0",
-    "@uswds/uswds": "^3.7.1",
+    "@uswds/uswds": "^3.8.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitest/coverage-c8": "^0.30.1",
     "@vue/cli-plugin-eslint": "^5.0.8",

training-front-end/src/components/AdminGSPC.vue

@@ -23,7 +23,7 @@
   const emit = defineEmits(['startLoading', 'endLoading', 'error'])
 
   const user_input = reactive({
-    emailAddresses: undefined,
+    emailAddresses: "",
     certificationExpirationDate: undefined
   })
 
@@ -49,6 +49,18 @@
 
   const v_all_info$ = useVuelidate(validations_all_info, user_input)
 
+  async function cancel(){
+    isLoading.value = true;
+    showSpinner.value = true;
+
+    // Clear out the fields
+    user_input.emailAddresses = "";
+    user_input.certificationExpirationDate = undefined;
+
+    isLoading.value = false;
+    showSpinner.value = false;
+  }
+
   async function submitGspcInvites(){
     const validation = v_all_info$
     const isFormValid = await validation.value.$validate()
@@ -59,8 +71,8 @@
     }
 
     emit('startLoading')
-    isLoading.value = true
-    showSpinner.value = true
+    isLoading.value = true;
+    showSpinner.value = true;
 
     const apiURL = new URL(`${base_url}/api/v1/gspc-invite`)
 
@@ -124,7 +136,8 @@
       Please fill out the form below by entering the attendees' email addresses as a comma-separated list and selecting an expiration date for their certificate. The expiration date should be three years from the date of the GSA SmartPay Training Forum. This form will verify the entered email addresses and notify you if any are invalid.
     </p>
     <form
-      class="usa-form usa-form--large margin-bottom-3 "
+      ref="form"
+      class="usa-form usa-form--large margin-bottom-3"
       data-test="gspc-form"
       @submit.prevent="submitGspcInvites"
     >
@@ -161,15 +174,24 @@
           Emails successfully sent to {{ successCount }} people.
         </USWDSAlert>
       </div>
-      <div class="grid-row">
-        <div class="grid-col tablet:grid-col-3 ">
+      <div class="grid-row grid-gap margin-top-3">
+        <div class="grid-col">
           <input
             class="usa-button"
             type="submit"
-            value="Submit"
+            value="Send Invitations"
             :disabled="isLoading"
             data-test="submit"
           >
+          <button
+            id="cancel"
+            type="button"
+            class="usa-button usa-button--outline"
+            :disabled="isLoading"
+            @click="cancel"
+          >
+            Cancel
+          </button>
         </div>
         <!--display spinner along with submit button in one row for desktop-->
         <div

training-front-end/src/components/ValidatedDatepicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import {computed , reactive} from 'vue'  
+  import {computed , reactive, watch} from 'vue'  
   
   const props = defineProps({
     'modelValue': {
@@ -40,13 +40,26 @@
     const year = user_input.year;
     const month = user_input.month;
     const day = user_input.day;
-    if (year && month && day) {
+    if (year.length == 4 && month && day) {
       const newDate = new Date(`${year}-${month}-${day}`);
       if (!isNaN(newDate)) {
         emit('update:modelValue', newDate);
       } 
     }
   }
+
+  watch(() => props.modelValue, (newValue) => {
+    const newDate = new Date(newValue);
+    if (!isNaN(newDate)) {
+      user_input.day = newDate?.getDate()
+      user_input.month = newDate?.getMonth() + 1 //+1 to convert from 0 index array 
+      user_input.year = newDate?.getFullYear()
+    } else{
+      user_input.day = '';
+      user_input.month = '';
+      user_input.year = '';
+    }
+  });
   
 </script>
 <template>

training-front-end/src/components/ValidatedTextArea.vue

@@ -51,6 +51,7 @@
     </span>
     <textarea
       :id="name"
+      :value="modelValue"
       class="usa-textarea tablet:grid-col-12"
       :class="{ 'usa-input--error':validator.$error, 'error-focus': validator.$error }"
       :name="name"

training-front-end/src/pages/training_fleet_pc/[...slug].astro

@@ -28,7 +28,6 @@ const { Content } = await entry.render();
   >
   <div
     class="
-      usa-layout-docs__main
       desktop:grid-col-9
       usa-prose usa-layout-docs
     "

training-front-end/src/pages/training_purchase/[...slug].astro

@@ -27,7 +27,6 @@ const { Content } = await entry.render();
   >
   <div
     class="
-      usa-layout-docs__main
       desktop:grid-col-9
       usa-prose usa-layout-docs
     "

training-front-end/src/pages/training_purchase_pc/[...slug].astro

@@ -27,7 +27,6 @@ const { Content } = await entry.render();
   >
   <div
     class="
-      usa-layout-docs__main
       desktop:grid-col-9
       usa-prose usa-layout-docs
     "

training-front-end/src/pages/training_travel/[...slug].astro

@@ -27,7 +27,6 @@ const { Content } = await entry.render();
   >
   <div
     class="
-      usa-layout-docs__main
       desktop:grid-col-9
       usa-prose usa-layout-docs
     "

training-front-end/src/pages/training_travel_pc/[...slug].astro

@@ -27,7 +27,6 @@ const { Content } = await entry.render();
   >
   <div
     class="
-      usa-layout-docs__main
       desktop:grid-col-9
       usa-prose usa-layout-docs
     "

training/api/email.py

@@ -26,10 +26,11 @@
 ''')
 
 GSPC_INVITE_EMAIL_TEMPLATE = Template('''
-<p>Hello</p>
+<p>Greetings!</p>
 
 <p>
-During the GSA SmartPay Training Forum, you completed the required coursework for the GSA SmartPay Program Certification (GSPC) defined by Smart Bulletin 22.
+During the GSA SmartPay® Training Forum, you completed the required coursework for the GSA SmartPay Program Certification (GSPC)
+ defined by <a href="https://smartpay.gsa.gov/policies-and-audits/smart-bulletins/022/">Smart Bulletin 22</a>.
 </p>
 <p>
 GSPC recipients are also required to have a minimum of six (6) months of continuous, hands-on experience working with the GSA SmartPay program.
@@ -42,7 +43,7 @@
 
 <p>
 After completing this action, your GSPC will be immediately emailed to you and available for download within the training system.
-If you have any questions or need further assistance, email us at [email protected].
+If you have any questions or need further assistance, email us at <a href="mailto:[email protected]">[email protected]</a>.
 </p>
 <p>Thank you.</p>
 ''')
@@ -84,7 +85,7 @@ def send_gspc_invite_email(to_email: EmailStr, link: str) -> None:
     body = GSPC_INVITE_EMAIL_TEMPLATE.substitute({"link": link})
     message = EmailMessage()
     message.set_content(body, subtype="html")
-    message["Subject"] = "Paceholder"
+    message["Subject"] = "Verify your GSA SmartPay Program Certification (GSPC) Coursework and Experience"
     message["From"] = f"{settings.EMAIL_FROM_NAME} <{settings.EMAIL_FROM}>"
     message["To"] = to_email