Hide error message when value changes

canonical · Mar 4, 2024 · 9303cc5 · 9303cc5
1 parent 118a569
commit 9303cc5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/static/js/src/advantage/subscribe/checkout/components/Checkout/Checkout.tsx b/static/js/src/advantage/subscribe/checkout/components/Checkout/Checkout.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Formik } from "formik";
 import {
   Col,
@@ -32,6 +32,33 @@ const Checkout = ({ product, quantity, action }: Props) => {
   const canTrial = canBeTrialled(productCanBeTrialled, userCanTrial);
   const initialValues = getInitialFormValues(product, canTrial, userInfo);
 
+  useEffect(() => {
+    const handleInputChange = () => {
+      error ? setError(null) : null;
+    };
+
+    const inputElements = document.querySelectorAll("input");
+    const selectElements = document.querySelectorAll("select");
+
+    inputElements.forEach((input) => {
+      input.addEventListener("change", handleInputChange);
+    });
+
+    selectElements.forEach((select) => {
+      select.addEventListener("change", handleInputChange);
+    });
+
+    return () => {
+      inputElements.forEach((input) => {
+        input.removeEventListener("change", handleInputChange);
+      });
+
+      selectElements.forEach((select) => {
+        select.removeEventListener("change", handleInputChange);
+      });
+    };
+  }, [error]);
+
   if (!localStorage.getItem("gaEventTriggered")) {
     localStorage.setItem("gaEventTriggered", "true");
     checkoutEvent(window.GAFriendlyProduct, "2");

diff --git a/static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.tsx b/static/js/src/advantage/subscribe/checkout/components/UserInfoForm/UserInfoForm.tsx
@@ -90,6 +90,7 @@ const UserInfoForm = ({ setError }: Props) => {
           queryClient.invalidateQueries("preview");
           setIsButtonDisabled(false);
           setIsEditing(false);
+          setError(null);
         },
         onError: (error) => {
           setFieldValue("Description", false);

diff --git a/templates/account/checkout.html b/templates/account/checkout.html
@@ -7,25 +7,25 @@
 endblock meta_copydoc %} {% block content %}
 
 <div id="shop-checkout-app">
-    <div class="p-strip">
-        <div class="u-fixed-width">
-            <h1 class="p-heading--2">
-                Checkout
-            </h1>
-        </div>
+  <div class="p-strip">
+    <div class="u-fixed-width">
+      <h1 class="p-heading--2">
+        Checkout
+      </h1>
     </div>
-    <div class="p-strip u-no-padding--top">
-        <div class="row">
-            <div class="u-no-margin--bottom p-card">
-                <div class="p-card__content">
-                    <span class="p-text--default">
-                        <i class="p-icon--spinner u-animation--spin"></i>
-                    </span>
-                    Loading…
-                </div>
-            </div>
+  </div>
+  <div class="p-strip u-no-padding--top">
+    <div class="row">
+      <div class="u-no-margin--bottom p-card">
+        <div class="p-card__content">
+          <span class="p-text--default">
+            <i class="p-icon--spinner u-animation--spin"></i>
+          </span>
+          Loading…
         </div>
+      </div>
     </div>
+  </div>
 </div>
 
 <script>