Merge pull request #277 from TokenScript/release/3.2.0

fix to passive ux.
SmartTokenLabs · Oct 31, 2023 · 9beb09d · 9beb09d
2 parents 1916c9f + a18bbfb
commit 9beb09d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 13 deletions.
diff --git a/hotel-bogota-passive-negotiation-website/src/BookingModal/BookingModal.css b/hotel-bogota-passive-negotiation-website/src/BookingModal/BookingModal.css
@@ -26,18 +26,28 @@
   top: 37px;
   text-align: center;
   height: 100px;
+  max-height: 272px;
+  animation: fadeInSlide 1s;
+  overflow: scroll;
 }
-.discountTicketContainer, .discountAppliedContainer {
+.discountTicketContainer {
   max-height: 272px;
   animation: fadeIn 1s;
+  overflow: scroll;
 }
 
 @keyframes fadeIn {
   0% { opacity: 0; }
-  50% { opacity: 0; }
+  50% { opacity: 0;  }
   100% { opacity: 1; }
 }
 
+@keyframes fadeInSlide {
+  0% { opacity: 0; transform: translateY(-100%); }
+  50% { opacity: 0;  }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
 .smallCopy {
   font-weight: 500;
   text-align: center;
@@ -60,6 +70,10 @@
   transform: scale(0.9);
 }
 
+.ticketWrapper {
+  transform: scale(0.9);
+}
+
 /* override Google Material */
 
 .MuiDialogActions-root {

diff --git a/hotel-bogota-passive-negotiation-website/src/BookingModal/index.js b/hotel-bogota-passive-negotiation-website/src/BookingModal/index.js
@@ -23,6 +23,7 @@ export default function BookingModal({
 }) {
   // Modal State (open boolean)
   const [open, setOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(true);
 
   // Form state.
   const [formInput, setFormInput] = useReducer(
@@ -74,8 +75,13 @@ export default function BookingModal({
       localStorage.removeItem("booking-room-type");
       setOpen(true);
     }
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
   }, [discount]);
 
+
+
   return (
     <div>
       <Button size="small" color="primary" onClick={handleClickOpen}>
@@ -127,15 +133,17 @@ export default function BookingModal({
                   {discount.value ? `🎉 ${discount.value}% discount has been applied to your hotel booking 🎉` : ""}
                 </DialogTitle>
               }
-              {!discount.value &&
+              {!discount.value && loading === false &&
+                <div style={{ paddingTop: "20px" }}>
+                  {tokens.length > 0 && (
+                    <p className="smallCopy">
+                      select token(s) to apply discount:
+                    </p>
+                  )}
+                </div>
+              }
+              {!discount.value && loading === false &&
                 <div className="discountTicketContainer">
-                  <div style={{ paddingTop: "20px" }}>
-                    {tokens.length > 0 && (
-                      <p className="smallCopy">
-                        select token(s) to apply discount:
-                      </p>
-                    )}
-                  </div>
                   <div className="ticketWrapper">
                     {tokens?.map((token, index) => (
                       <div key={index}>
@@ -153,11 +161,13 @@ export default function BookingModal({
                       </div>
                     ))}
                   </div>
-                  <Button className="applyDiscount" disabled={!selectedPendingTokenInstances.length} onClick={applyDiscount} color="primary" variant="contained">
-                    Apply Discount
-                  </Button>
                 </div>
               }
+              {!discount.value && loading === false &&
+                <Button className="applyDiscount" disabled={!selectedPendingTokenInstances.length} onClick={applyDiscount} color="primary" variant="contained">
+                  Apply Discount
+                </Button>
+              }
               <div className="divider"></div>
               <TextField
                 id="booking-name"