From 9303cc51b88f2105ea1b4b17cb0d51f3c65deec0 Mon Sep 17 00:00:00 2001
From: Britney Wang <britney.wang@canonical.com>
Date: Thu, 29 Feb 2024 16:23:11 +0800
Subject: [PATCH] Hide error message when value changes

---
 .../checkout/components/Checkout/Checkout.tsx | 29 ++++++++++++++++-
 .../components/UserInfoForm/UserInfoForm.tsx  |  1 +
 templates/account/checkout.html               | 32 +++++++++----------
 3 files changed, 45 insertions(+), 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
index a8d83483ba4..c0c38890686 100644
--- 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
index 1cb85b58bec..3aad36915ae 100644
--- 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
index 418f940f0a3..80b2144e1df 100644
--- 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>