From a5bb86094559bb8e63a1b980748ead5ced2ec286 Mon Sep 17 00:00:00 2001
From: Shan <shanpirana@gmail.com>
Date: Thu, 29 Feb 2024 12:40:08 +0530
Subject: [PATCH] payment success page issue fix

---
 .../src/pages/AuctionPaymentSuccessful.vue    | 124 ++++++++++--------
 1 file changed, 68 insertions(+), 56 deletions(-)

diff --git a/frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue b/frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue
index 71d7d9f6..d7e40af1 100644
--- a/frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue
+++ b/frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue
@@ -77,13 +77,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Vue3Lottie
-    v-if="auctionStatus === PaymentStatus.COMPLETE"
-    :animation-data="FireworksAnimation"
-    class="absolute"
-    :loop="false"
-  />
   <div class="p-5 min-h-[50vh] font-Inter">
+    <h1
+      v-if="isCheckingStatus"
+      class="text-white text-title38 md:mt-10 mb-10 text-center"
+    >
+      Processing...
+    </h1>
     <h1
       v-if="auctionStatus === PaymentStatus.COMPLETE"
       class="text-white text-title38 md:mt-10 mb-10 text-center"
@@ -96,59 +96,71 @@ onMounted(async () => {
     >
       Transaction error
     </h1>
-    <h1 v-else class="text-white text-title38 md:mt-10 mb-10 text-center">
+    <h1
+      v-else-if="!isCheckingStatus"
+      class="text-white text-title38 md:mt-10 mb-10 text-center"
+    >
       Credit Transfer Issue
     </h1>
-
-    <div v-if="isCheckingStatus">
-      <div>
-        <span class="block text-center text-white mb-2"
-          >Checking your order status, please wait</span
-        >
-        <span class="block text-center text-white">
-          <span class="loading loading-spinner loading-lg"></span>
-        </span>
-      </div>
-    </div>
-    <div v-else class="flex justify-center">
-      <div
-        class="bg-white/10 rounded-lg md:rounded-sm p-4 max-w-xl text-center"
-      >
-        <span
-          v-if="auctionStatus === PaymentStatus.COMPLETE"
-          class="font-Inter text-white text-title18"
-        >
-          Your plastic credit purchase was successful and a Plastic Credit
-          Offset Certificate has been generated for you.
-        </span>
-        <span
-          v-else-if="auctionStatus === PaymentStatus.ERROR"
-          class="font-Inter text-white text-title18"
-        >
-          Transaction couldn't be completed. You will receive a refund shortly.
-          Please contact us at
-          <a href="mailto:marketplace@empower.eco" class="underline"
-            >marketplace@empower.eco</a
+    <div class="pointer-events-none">
+      <Vue3Lottie
+        v-if="auctionStatus === PaymentStatus.COMPLETE"
+        class="absolute top-0"
+        :animation-data="FireworksAnimation"
+        :loop="false"
+      />
+      <div class="pointer-events-auto">
+        <div v-if="isCheckingStatus">
+          <div>
+            <span class="block text-center text-white mb-2"
+              >Checking your order status, please wait</span
+            >
+            <span class="block text-center text-white">
+              <span class="loading loading-spinner loading-lg"></span>
+            </span>
+          </div>
+        </div>
+        <div v-else class="flex justify-center">
+          <div
+            class="bg-white/10 rounded-lg md:rounded-sm p-4 max-w-xl text-center"
           >
-          if you encounter any issues.
-        </span>
-        <span v-else class="font-Inter text-white text-title18">
-          Transaction processing takes longer than usual due to blockchain
-          traffic. You will receive an email shortly, confirming the status of
-          your transaction.
-        </span>
-        <a
-          v-if="auctionStatus === PaymentStatus.COMPLETE"
-          class="mt-5 text-white btn btn-ghost btn-block normal-case bg-greenPrimary hover:bg-greenDark text-title24 lg:text-title32 lg:btn-lg p-0 px-12 font-normal md:max-w-lg"
-          href="/certificate"
-          >See your certificates</a
-        >
-        <a
-          v-else
-          class="mt-5 text-white btn btn-ghost btn-block normal-case bg-greenPrimary hover:bg-greenDark text-title24 lg:text-title32 lg:btn-lg p-0 px-12 font-normal md:max-w-lg"
-          href="/"
-          >Go to homepage</a
-        >
+            <span
+              v-if="auctionStatus === PaymentStatus.COMPLETE"
+              class="font-Inter text-white text-title18"
+            >
+              Your plastic credit purchase was successful and a Plastic Credit
+              Offset Certificate has been generated for you.
+            </span>
+            <span
+              v-else-if="auctionStatus === PaymentStatus.ERROR"
+              class="font-Inter text-white text-title18"
+            >
+              Transaction couldn't be completed. You will receive a refund
+              shortly. Please contact us at
+              <a href="mailto:marketplace@empower.eco" class="underline"
+                >marketplace@empower.eco</a
+              >
+              if you encounter any issues.
+            </span>
+            <span v-else class="font-Inter text-white text-title18">
+              Transaction processing takes longer than usual due to blockchain
+              traffic. You will receive an email shortly, confirming the status
+              of your transaction.
+            </span>
+            <a
+              v-if="auctionStatus === PaymentStatus.COMPLETE"
+              class="mt-5 text-white btn btn-ghost btn-block normal-case bg-greenPrimary hover:bg-greenDark text-title24 lg:text-title32 lg:btn-lg p-0 px-12 font-normal md:max-w-lg"
+              href="/certificate"
+              >See your certificates</a
+            >
+            <a
+              v-else
+              class="mt-5 text-white btn btn-ghost btn-block normal-case bg-greenPrimary hover:bg-greenDark text-title24 lg:text-title32 lg:btn-lg p-0 px-12 font-normal md:max-w-lg"
+              href="/"
+              >Go to homepage</a
+            >
+          </div>
+        </div>
       </div>
     </div>
   </div>