Merge pull request #1473 from NYPL/MLN-1304

Disable button when user place a orders and cancellations
NYPL · Dec 18, 2024 · ab72f05 · ab72f05
2 parents 0d442c1 + d23cfa7
commit ab72f05
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/app/javascript/components/CancelOrderDetails/CancelTeacherSetOrder.jsx b/app/javascript/components/CancelOrderDetails/CancelTeacherSetOrder.jsx
@@ -23,6 +23,7 @@ export default function TeacherSetOrder() {
   const [teacher_set, setTeacherSet] = useState("");
   const [comment, setComment] = useState("");
   const { colorMode } = useColorMode();
+  const [disabledButton, setDisabledButton] = useState(false);
 
   useEffect(() => {
     document.title = "Cancel Order | MyLibraryNYC";
@@ -45,6 +46,7 @@ export default function TeacherSetOrder() {
 
   const handleSubmit = (event) => {
     event.preventDefault();
+    setDisabledButton(true)
     axios
       .put("/holds/" + access_key, {
         hold_change: { status: "cancelled", comment: comment },
@@ -62,6 +64,8 @@ export default function TeacherSetOrder() {
       })
       .catch(function (error) {
         console.log(error);
+      }).finally(() => {
+        setDisabledButton(false);
       });
   };
 
@@ -99,6 +103,7 @@ export default function TeacherSetOrder() {
               buttonType="noBrand"
               onClick={handleSubmit}
               marginTop="xs"
+              isDisabled={disabledButton}
             >
               Cancel my order
             </Button>

diff --git a/app/javascript/components/TeacherSetDetails/TeacherSetDetails.jsx b/app/javascript/components/TeacherSetDetails/TeacherSetDetails.jsx
@@ -54,6 +54,7 @@ export default function TeacherSetDetails(props) {
   const { isLargerThanMobile } = useNYPLBreakpoints();
   const [isLoading, setIsLoading] = useState(true);
   const [currentUserStatus, setCurrentUserStatus] = useState();
+  const [disabledButton, setDisabledButton] = useState(false);
   const heroBgColor = useColorModeValue(
     "var(--nypl-colors-brand-primary)",
     "var(--nypl-colors-dark-ui-bg-hover)"
@@ -122,7 +123,7 @@ export default function TeacherSetDetails(props) {
       .catch(function (error) {
         console.log(error);
         console.error(error);
-      });
+      })
   }, []);
 
   const handleQuantity = (event) => {
@@ -148,6 +149,7 @@ export default function TeacherSetDetails(props) {
 
   const handleSubmit = (event) => {
     event.preventDefault();
+    setDisabledButton(true);
     axios.defaults.headers.common["X-CSRF-TOKEN"] = document
       .querySelector("meta[name='csrf-token']")
       .getAttribute("content");
@@ -175,7 +177,10 @@ export default function TeacherSetDetails(props) {
         }
       })
       .catch(function (error) {
+        setDisabledButton(false);
         console.log(error);
+      }).finally(() => {
+        setDisabledButton(false);
       });
   };
 
@@ -439,6 +444,7 @@ export default function TeacherSetDetails(props) {
                 id="ts-order-submit"
                 buttonType="noBrand"
                 onClick={handleSubmit}
+                isDisabled={disabledButton}
               >
                 {" "}
                 Place order{" "}

diff --git a/app/javascript/components/TeacherSetOrder/TeacherSetOrder.jsx b/app/javascript/components/TeacherSetOrder/TeacherSetOrder.jsx
@@ -66,22 +66,24 @@ export default function TeacherSetOrder(props) {
     return hold && hold.status === "cancelled" ? "none" : "block";
   };
 
+  const handleSubmit = () => {
+    window.scrollTo({ top: 10 })
+    const href = "/holds/" + params["access_key"] + "/cancel";
+    window.location.href = href;
+  };
+
   const CancelButton = () => {
     return (
       <div style={{ display: showCancelButton() }}>
         <Button
           id="order-cancel-button"
-          className="cancel-button"
-          buttonType="secondary"
-          onClick={() => window.scrollTo({ top: 10 })}
+          buttonType="noBrand"
+          marginTop="s"
+          type="button"
+          screenreaderOnlyText="Confirmation cancel button"
+          onClick={() => handleSubmit()}
         >
-          <Link
-            className={`${colorMode} cancelOrderButton`}
-            href={"/holds/" + params["access_key"] + "/cancel"}
-          >
-            {" "}
-            Cancel my order{" "}
-          </Link>
+          Cancel my order
         </Button>
       </div>
     );