From da01ce11609ce3da0d3df58391912eb2fef07cba Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 09:27:58 +0100
Subject: [PATCH] fix(marketplace): Byebye auction

---
 .../src/pages/CreditCollectionPage.vue        | 32 +++++++++----------
 .../marketplace/src/pages/ListingPage.vue     | 28 ++++++++--------
 .../src/pages/PaymentSuccessfulPage.vue       | 22 ++++++-------
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/frontend/marketplace/src/pages/CreditCollectionPage.vue b/frontend/marketplace/src/pages/CreditCollectionPage.vue
index ce5103d3..be4304c5 100644
--- a/frontend/marketplace/src/pages/CreditCollectionPage.vue
+++ b/frontend/marketplace/src/pages/CreditCollectionPage.vue
@@ -12,7 +12,7 @@ import { onMounted, ref } from "vue";
 import { GET_MARKETPLACE_LISTING } from "@/graphql/queries";
 import { formatListingDetails } from "@/utils/formatListingDetails";
 
-interface AuctionDetails {
+interface ListingDetails {
   applicant: string;
   location: string[];
   material: MaterialProperty[][];
@@ -34,7 +34,7 @@ const router = useRoute();
 
 const data = ref();
 const showSpinner = ref(true);
-const auctionDetails = ref<AuctionDetails>({
+const listingDetails = ref<ListingDetails>({
   applicant: "",
   location: [""],
   material: [],
@@ -46,7 +46,7 @@ const auctionDetails = ref<AuctionDetails>({
   plasticType: "",
 });
 
-const getAuctionDetails = (id: string | string[]) => {
+const getListingDetails = (id: string | string[]) => {
   try {
     const { result, loading, error, onResult } = useQuery(
       GET_MARKETPLACE_LISTING,
@@ -62,7 +62,7 @@ const getAuctionDetails = (id: string | string[]) => {
           loading,
           error,
         };
-        auctionDetails.value = formatListingDetails(
+        listingDetails.value = formatListingDetails(
           result.value.marketplaceListings?.nodes[0].creditCollection.creditData
             .nodes,
           parseInt(
@@ -78,12 +78,12 @@ const getAuctionDetails = (id: string | string[]) => {
     });
     showSpinner.value = false;
   } catch (error) {
-    console.log("Error in getAuctionDetails", error);
+    console.log("Error in getListingDetails", error);
   }
 };
 
 onMounted(() => {
-  getAuctionDetails(router.params.denom);
+  getListingDetails(router.params.denom);
 });
 </script>
 <template>
@@ -98,15 +98,15 @@ onMounted(() => {
         data?.result?.marketplaceListings?.nodes[0].creditCollection?.creditData
           ?.nodes[0].applicantDataByCreditDataId.nodes[0].name
       }}
-      - {{ auctionDetails.plasticType }}
+      - {{ listingDetails.plasticType }}
     </h1>
 
     <!--    Gallery-->
     <ImageCarousel
       class="md:hidden my-5"
-      :image-array="auctionDetails?.image"
+      :image-array="listingDetails?.image"
     />
-    <ImageGallery class="hidden md:flex" :image-array="auctionDetails?.image" />
+    <ImageGallery class="hidden md:flex" :image-array="listingDetails?.image" />
 
     <!--    Project Details-->
     <div class="flex flex-col md:flex-row w-full mt-5 justify-between">
@@ -122,25 +122,25 @@ onMounted(() => {
         />
         <ProjectDetailMaterial
           label="Material"
-          :materials="auctionDetails?.material"
+          :materials="listingDetails?.material"
         />
         <ProjectDetailContent label="Kgs per credit" value="1" />
         <ProjectDetailContent
           label="Registration date"
-          :value="auctionDetails?.registrationDate"
+          :value="listingDetails?.registrationDate"
         />
         <ProjectDetailContent
           label="Location"
-          :value="auctionDetails?.location"
+          :value="listingDetails?.location"
           list
         />
         <ProjectDetailContent
           label="Collection organisation"
-          :value="auctionDetails?.applicant"
+          :value="listingDetails?.applicant"
         />
         <ProjectDetailContent
           label="Volume"
-          :value="auctionDetails?.volume + 'kg'"
+          :value="listingDetails?.volume + 'kg'"
         />
       </div>
 
@@ -148,7 +148,7 @@ onMounted(() => {
       <div
         class="mt-5 md:mt-0 md:w-[60%] md:ml-5 h-[330px] md:h-auto rounded-lg relative"
       >
-        <CustomGoogleMap :locations="auctionDetails?.locationPointers" />
+        <CustomGoogleMap :locations="listingDetails?.locationPointers" />
       </div>
     </div>
 
@@ -172,7 +172,7 @@ onMounted(() => {
       <ul class="pl-5">
         <li
           class="text-title14 text-greenPrimary underline truncate"
-          v-for="file in auctionDetails?.file"
+          v-for="file in listingDetails?.file"
           :key="file.name"
         >
           <a target="_blank" :href="file.url">{{ file.name }}</a>
diff --git a/frontend/marketplace/src/pages/ListingPage.vue b/frontend/marketplace/src/pages/ListingPage.vue
index 60b28159..c0dc8fb4 100644
--- a/frontend/marketplace/src/pages/ListingPage.vue
+++ b/frontend/marketplace/src/pages/ListingPage.vue
@@ -18,7 +18,7 @@ import { useQuery } from "@vue/apollo-composable";
 import { ref, watch, computed } from "vue";
 import { GET_MARKETPLACE_LISTING } from "@/graphql/queries";
 
-interface AuctionDetails {
+interface ListingDetails {
   applicant: string;
   location: string[];
   material: MaterialProperty[][];
@@ -43,7 +43,7 @@ const data = ref();
 const showSpinner = ref(true);
 const denom = ref("");
 const owner = ref("");
-const auctionDetails = ref<AuctionDetails>({
+const listingDetails = ref<ListingDetails>({
   applicant: "",
   location: [""],
   material: [],
@@ -112,7 +112,7 @@ const getDetailsList = (data: any, materialVolume: number) => {
   };
 };
 
-const getAuctionDetails = (id: string | string[]) => {
+const getListingDetails = (id: string | string[]) => {
   const { result, loading, error, onResult } = useQuery(
     GET_MARKETPLACE_LISTING,
     {
@@ -130,7 +130,7 @@ const getAuctionDetails = (id: string | string[]) => {
   };
 
   onResult(({ data }) => {
-    auctionDetails.value = getDetailsList(
+    listingDetails.value = getDetailsList(
       data.marketplaceListings?.nodes[0].creditCollection.creditData.nodes,
       parseInt(
         data.marketplaceListings?.nodes[0].creditCollection.activeAmount,
@@ -150,7 +150,7 @@ const getAuctionDetails = (id: string | string[]) => {
 
 const handlePageLoadAndCollectionIdChange = (newId: string, oldId?: string) => {
   if (newId && newId !== oldId) {
-    getAuctionDetails(newId);
+    getListingDetails(newId);
   }
 };
 
@@ -176,9 +176,9 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
     <!--    Gallery-->
     <ImageCarousel
       class="md:hidden my-5"
-      :image-array="auctionDetails?.image"
+      :image-array="listingDetails?.image"
     />
-    <ImageGallery class="hidden md:flex" :image-array="auctionDetails?.image" />
+    <ImageGallery class="hidden md:flex" :image-array="listingDetails?.image" />
 
     <!--    Buy Credits-->
     <BuyCredits
@@ -209,25 +209,25 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
         />
         <ProjectDetailMaterial
           label="Material"
-          :materials="auctionDetails?.material"
+          :materials="listingDetails?.material"
         />
         <ProjectDetailContent label="Kgs per credit" value="1" />
         <ProjectDetailContent
           label="Registration date"
-          :value="auctionDetails?.registrationDate"
+          :value="listingDetails?.registrationDate"
         />
         <ProjectDetailContent
           label="Location"
-          :value="auctionDetails?.location"
+          :value="listingDetails?.location"
           list
         />
         <ProjectDetailContent
           label="Collection organisation"
-          :value="auctionDetails?.applicant"
+          :value="listingDetails?.applicant"
         />
         <ProjectDetailContent
           label="Volume"
-          :value="auctionDetails?.volume + 'kg'"
+          :value="listingDetails?.volume + 'kg'"
         />
       </div>
 
@@ -235,7 +235,7 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
       <div
         class="mt-5 md:mt-0 md:w-[60%] md:ml-5 h-[330px] md:h-auto rounded-lg relative"
       >
-        <CustomGoogleMap :locations="auctionDetails?.locationPointers" />
+        <CustomGoogleMap :locations="listingDetails?.locationPointers" />
       </div>
     </div>
 
@@ -259,7 +259,7 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
       <ul class="pl-5">
         <li
           class="text-title14 text-greenPrimary underline"
-          v-for="file in auctionDetails?.file"
+          v-for="file in listingDetails?.file"
           :key="file.name"
         >
           <a target="_blank" :href="file.url">{{ file.name }}</a>
diff --git a/frontend/marketplace/src/pages/PaymentSuccessfulPage.vue b/frontend/marketplace/src/pages/PaymentSuccessfulPage.vue
index d7e40af1..6ee72021 100644
--- a/frontend/marketplace/src/pages/PaymentSuccessfulPage.vue
+++ b/frontend/marketplace/src/pages/PaymentSuccessfulPage.vue
@@ -22,7 +22,7 @@ interface AuctionStatusResponse {
   id: string;
 }
 
-const auctionStatus = ref<PaymentStatus | undefined>(undefined);
+const paymentStatus = ref<PaymentStatus | undefined>(undefined);
 const isCheckingStatus = ref(false);
 const route = useRoute();
 
@@ -34,7 +34,7 @@ const handleFetchResponse = async (response: Response | null) => {
 
   try {
     const body = (await response.json()) as AuctionStatusResponse;
-    auctionStatus.value = body.status;
+    paymentStatus.value = body.status;
     if (body.status === PaymentStatus.COMPLETE) {
       return false;
     }
@@ -45,7 +45,7 @@ const handleFetchResponse = async (response: Response | null) => {
   return true;
 };
 
-const checkAuctionStatus = async () => {
+const checkPaymentStatus = async () => {
   const { getAccessToken } = useAuth();
   const accessToken = await getAccessToken(PC_BACKEND_ENDPOINT);
   const paymentId = route.query.paymentId as string;
@@ -65,14 +65,14 @@ const checkAuctionStatus = async () => {
     );
   } catch (e) {
     console.log("e", e);
-    auctionStatus.value = PaymentStatus.ERROR;
+    paymentStatus.value = PaymentStatus.ERROR;
   } finally {
     isCheckingStatus.value = false;
   }
 };
 
 onMounted(async () => {
-  await checkAuctionStatus();
+  await checkPaymentStatus();
 });
 </script>
 
@@ -85,13 +85,13 @@ onMounted(async () => {
       Processing...
     </h1>
     <h1
-      v-if="auctionStatus === PaymentStatus.COMPLETE"
+      v-if="paymentStatus === PaymentStatus.COMPLETE"
       class="text-white text-title38 md:mt-10 mb-10 text-center"
     >
       Payment confirmation
     </h1>
     <h1
-      v-else-if="auctionStatus === PaymentStatus.ERROR"
+      v-else-if="paymentStatus === PaymentStatus.ERROR"
       class="text-white text-title38 md:mt-10 mb-10 text-center"
     >
       Transaction error
@@ -104,7 +104,7 @@ onMounted(async () => {
     </h1>
     <div class="pointer-events-none">
       <Vue3Lottie
-        v-if="auctionStatus === PaymentStatus.COMPLETE"
+        v-if="paymentStatus === PaymentStatus.COMPLETE"
         class="absolute top-0"
         :animation-data="FireworksAnimation"
         :loop="false"
@@ -125,14 +125,14 @@ onMounted(async () => {
             class="bg-white/10 rounded-lg md:rounded-sm p-4 max-w-xl text-center"
           >
             <span
-              v-if="auctionStatus === PaymentStatus.COMPLETE"
+              v-if="paymentStatus === 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"
+              v-else-if="paymentStatus === PaymentStatus.ERROR"
               class="font-Inter text-white text-title18"
             >
               Transaction couldn't be completed. You will receive a refund
@@ -148,7 +148,7 @@ onMounted(async () => {
               of your transaction.
             </span>
             <a
-              v-if="auctionStatus === PaymentStatus.COMPLETE"
+              v-if="paymentStatus === 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