Production Release (Sprint 41): (#730)

Contract Payment on Homepage #591
Change State Tax Information by State > Select a State/U.S. Territory to a Combo Box #597
Dependabot Alert: Vite DOM Clobbering gadget found in vite bundled scripts that leads to XSS #600
Create Mockup of Home Screen with Contract Payments #725

src/components/Callout.astro

@@ -2,7 +2,7 @@
 //This componet is for Home page call out section under hero section: Section 889 Search, State Tax Information, 25th anniversary celebration 
 import callout_889 from "@assets/images/callout_889.svg";
 import callout_map from "@assets/images/callout_map.svg";
-import callout_cards from "@assets/images/callout_cards.png";
+import red_card_with_background from "@assets/images/red_card_with_background.png";
 
 const baseUrl = import.meta.env.BASE_URL;
 ---
@@ -58,25 +58,25 @@ const baseUrl = import.meta.env.BASE_URL;
     </div>
     <div class="grid-row grid-gap">
       <div class="tablet:grid-col-6 margin-top-1">
-        <a href={`${baseUrl}smarttax/recognizing-your-account/`}>
+        <a href="https://www.youtube.com/watch?v=tYNWRHNvCEs">
           <img
             width="464"
-            height="286.5"
-            src={callout_cards.src}
-            alt="A series of yellow, silver, green, blue, and red GSA SmartPay charge cards stacked on each other, descending towards the bottom left."
+            height="256"
+            src={red_card_with_background.src}
+            alt="Red GSA SmartPay charge card, with application form in the background."
           />
         </a>
       </div>
       <div class="tablet:grid-col-6">
         <h2 class="margin-top-0 margin-bottom-1">
-          Recognizing Charge Cards
+          Contract Payments to Vendors
         </h2>
         <p>
-          Learn how to identify the different types of GSA SmartPay cards/accounts.
+          Learn about the advantages of using a GSA SmartPay Purchase card/account to make contract payments to vendors.
         </p>
         <p>
-          <a class="usa-link" href={`${baseUrl}smarttax/recognizing-your-account/`}
-            >Recognizing your cards/accounts</a>
+          <a class="usa-link--external" href="https://www.youtube.com/watch?v=tYNWRHNvCEs"
+            >Go to the Contract Payments video</a>
         </p>
       </div>
     </div>

src/components/StateTaxSelection.astro

@@ -8,12 +8,13 @@ states.sort((a, b) => a.data.name.localeCompare(b.data.name));
 ---
 <label class="usa-label text-bold" for="ddlstates">{label} </label>
 <form id="state-tax-form" class="usa-form sp-inline-form margin-bottom-4">
-    <select class="usa-select sp-inline-form-input" name="ddlstates" id="ddlstates">
-      <option value="">Select a state</option>
-      {states.map(state => (
-         <option selected={state.data.name === current_state} value={state.slug}>{ state.data.name }</option>
-      ))}
-    </select>
+    <div class="usa-combo-box">
+        <select class="usa-select sp-inline-form-input" name="ddlstates" id="ddlstates">
+            {states.map(state => (
+                    <option selected={state.data.name === current_state} value={state.slug}>{ state.data.name }</option>
+            ))}
+        </select>
+    </div>
 
     <button class="usa-button sp-inline-form-submit-button" type="submit" aria-label="Go to selected state">Go</button>
 </form>
@@ -25,7 +26,8 @@ states.sort((a, b) => a.data.name.localeCompare(b.data.name));
         const state = dropdown.value;
 
         if (state) {
-            const target=`${base_url}smarttax/tax-information-by-state/${state.toLowerCase()}/`;
+            // Create State Tax URL, replaced spaces in the selected value with dash to match URL pattern and prevent URL encoding
+            const target=`${base_url}smarttax/tax-information-by-state/${state.replace(/\s+/g, '-').toLowerCase()}/`;
             window.location.href = target;
         }
     }