From 82928f0167377e1dd2eb5d0a017b04eb5659eecc Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 08:57:16 +0100
Subject: [PATCH 1/8] fix(marketplace): Rename auction to project (listing
 internally) and fix page names

---
 frontend/marketplace/.eslintrc.cjs            |  3 +++
 .../{AuctionDetails.vue => ListingPage.vue}   |  7 ++---
 .../{AuctionPage.vue => ListingsPage.vue}     |  0
 ...CallbackView.vue => LoginCallbackPage.vue} |  0
 ...Cancelled.vue => PaymentCancelledPage.vue} |  0
 ...ccessful.vue => PaymentSuccessfulPage.vue} |  0
 .../{UserProfile.vue => UserProfilePage.vue}  |  0
 frontend/marketplace/src/router/index.ts      | 26 +++++++++----------
 8 files changed, 19 insertions(+), 17 deletions(-)
 rename frontend/marketplace/src/pages/{AuctionDetails.vue => ListingPage.vue} (97%)
 rename frontend/marketplace/src/pages/{AuctionPage.vue => ListingsPage.vue} (100%)
 rename frontend/marketplace/src/pages/{CallbackView.vue => LoginCallbackPage.vue} (100%)
 rename frontend/marketplace/src/pages/{AuctionPaymentCancelled.vue => PaymentCancelledPage.vue} (100%)
 rename frontend/marketplace/src/pages/{AuctionPaymentSuccessful.vue => PaymentSuccessfulPage.vue} (100%)
 rename frontend/marketplace/src/pages/{UserProfile.vue => UserProfilePage.vue} (100%)

diff --git a/frontend/marketplace/.eslintrc.cjs b/frontend/marketplace/.eslintrc.cjs
index 0b2a030f7..a27c6e32f 100644
--- a/frontend/marketplace/.eslintrc.cjs
+++ b/frontend/marketplace/.eslintrc.cjs
@@ -15,4 +15,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: "latest",
   },
+  rules: {
+    "vue/multi-word-component-names": "off",
+  },
 };
diff --git a/frontend/marketplace/src/pages/AuctionDetails.vue b/frontend/marketplace/src/pages/ListingPage.vue
similarity index 97%
rename from frontend/marketplace/src/pages/AuctionDetails.vue
rename to frontend/marketplace/src/pages/ListingPage.vue
index e0b8f75c9..60b281591 100644
--- a/frontend/marketplace/src/pages/AuctionDetails.vue
+++ b/frontend/marketplace/src/pages/ListingPage.vue
@@ -7,7 +7,8 @@ import ImageCarousel from "@/components/ImageCarousel.vue";
 import ImageGallery from "@/components/ImageGallery.vue";
 import ProjectDetailContent from "@/components/ProjectDetailContent.vue";
 import ProjectDetailMaterial from "@/components/ProjectDetailMaterial.vue";
-import { useRoute } from "@/router";
+import { useRoute, RouterLink } from "@/router";
+import { PageNames } from "@/router/pageNames";
 import {
   convertIPFStoHTTPS,
   uniqueMaterials,
@@ -160,8 +161,8 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
   <div v-if="!showSpinner" class="p-5 min-h-[60vh] text-white font-Inter">
     <!--  Title Section-->
     <p class="text-title18 mb-5">
-      <a href="/auction">Auctions</a
-      ><span class="text-subTextGray">/ Auction Details</span>
+      <router-link :to="{ name: PageNames.LISTINGS }">Projects</router-link>
+      <span class="text-subTextGray">/ Project details</span>
     </p>
     <h1 class="text-title38">
       {{
diff --git a/frontend/marketplace/src/pages/AuctionPage.vue b/frontend/marketplace/src/pages/ListingsPage.vue
similarity index 100%
rename from frontend/marketplace/src/pages/AuctionPage.vue
rename to frontend/marketplace/src/pages/ListingsPage.vue
diff --git a/frontend/marketplace/src/pages/CallbackView.vue b/frontend/marketplace/src/pages/LoginCallbackPage.vue
similarity index 100%
rename from frontend/marketplace/src/pages/CallbackView.vue
rename to frontend/marketplace/src/pages/LoginCallbackPage.vue
diff --git a/frontend/marketplace/src/pages/AuctionPaymentCancelled.vue b/frontend/marketplace/src/pages/PaymentCancelledPage.vue
similarity index 100%
rename from frontend/marketplace/src/pages/AuctionPaymentCancelled.vue
rename to frontend/marketplace/src/pages/PaymentCancelledPage.vue
diff --git a/frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue b/frontend/marketplace/src/pages/PaymentSuccessfulPage.vue
similarity index 100%
rename from frontend/marketplace/src/pages/AuctionPaymentSuccessful.vue
rename to frontend/marketplace/src/pages/PaymentSuccessfulPage.vue
diff --git a/frontend/marketplace/src/pages/UserProfile.vue b/frontend/marketplace/src/pages/UserProfilePage.vue
similarity index 100%
rename from frontend/marketplace/src/pages/UserProfile.vue
rename to frontend/marketplace/src/pages/UserProfilePage.vue
diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index 0e14e45c7..fd410a2f4 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -14,14 +14,12 @@ const HomePage = () => import("@/pages/HomePage.vue");
 const FAQPage = () => import("@/pages/FAQPage.vue");
 const CertificatesAndCreditsPage = () =>
   import("@/pages/CertificatesAndCreditsPage.vue");
-const AuctionPage = () => import("@/pages/AuctionPage.vue");
-const AuctionDetails = () => import("@/pages/AuctionDetails.vue");
-const CallbackView = () => import("@/pages/CallbackView.vue");
-const UserProfile = () => import("@/pages/UserProfile.vue");
-const AuctionPaymentSuccessful = () =>
-  import("@/pages/AuctionPaymentSuccessful.vue");
-const AuctionPaymentCancelled = () =>
-  import("@/pages/AuctionPaymentCancelled.vue");
+const Listings = () => import("@/pages/ListingsPage.vue");
+const Listing = () => import("@/pages/ListingPage.vue");
+const CallbackView = () => import("@/pages/LoginCallbackPage.vue");
+const UserProfile = () => import("@/pages/UserProfilePage.vue");
+const PaymentSuccessful = () => import("@/pages/PaymentSuccessfulPage.vue");
+const PaymentCancelled = () => import("@/pages/PaymentCancelledPage.vue");
 const CreditCollectionPage = () => import("@/pages/CreditCollectionPage.vue");
 
 export { PageNames };
@@ -52,14 +50,14 @@ const router = createRouter({
       component: FAQPage,
     },
     {
-      path: "/auction",
+      path: "/listings",
       name: PageNames.LISTINGS,
-      component: AuctionPage,
+      component: Listings,
     },
     {
-      path: "/auction/:id",
+      path: "/listings/:id",
       name: PageNames.LISTING,
-      component: AuctionDetails,
+      component: Listing,
       meta: {
         pageViewEvent: (to: RouteLocationNormalized) => {
           const trackProps = {
@@ -85,12 +83,12 @@ const router = createRouter({
     {
       path: "/purchase-successful",
       name: PageNames.PAYMENT_SUCCESSFUL,
-      component: AuctionPaymentSuccessful,
+      component: PaymentSuccessful,
     },
     {
       path: "/purchase-cancelled",
       name: PageNames.PAYMENT_CANCELLED,
-      component: AuctionPaymentCancelled,
+      component: PaymentCancelled,
     },
     {
       path: "/registry/:denom",

From d9f1c6253380b87a9782e67296616e71ea272489 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 09:04:11 +0100
Subject: [PATCH 2/8] fix(marketplace): Rename auctionCard.png

---
 .../{auctionCard.png => defaultListingImage.png}    | Bin
 frontend/marketplace/src/components/AuctionCard.vue |   6 +++---
 .../src/components/AuctionResultsCard.vue           |   6 +++---
 .../marketplace/src/components/CertificateCard.vue  |   4 ++--
 frontend/marketplace/src/components/CustomImage.vue |   5 ++---
 frontend/marketplace/src/components/ListingCard.vue |   4 ++--
 .../marketplace/src/components/ListingCardTable.vue |   4 ++--
 7 files changed, 14 insertions(+), 15 deletions(-)
 rename frontend/marketplace/src/assets/{auctionCard.png => defaultListingImage.png} (100%)

diff --git a/frontend/marketplace/src/assets/auctionCard.png b/frontend/marketplace/src/assets/defaultListingImage.png
similarity index 100%
rename from frontend/marketplace/src/assets/auctionCard.png
rename to frontend/marketplace/src/assets/defaultListingImage.png
diff --git a/frontend/marketplace/src/components/AuctionCard.vue b/frontend/marketplace/src/components/AuctionCard.vue
index 5ffd8039e..78838d91d 100644
--- a/frontend/marketplace/src/components/AuctionCard.vue
+++ b/frontend/marketplace/src/components/AuctionCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import router from "@/router";
 import { convertIPFStoHTTPS } from "@/utils/utils";
-import auctionCard from "@/assets/auctionCard.png";
+import defaultListingImage from "@/assets/defaultListingImage.png";
 import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
 import { RouterLink } from "vue-router";
@@ -45,14 +45,14 @@ const handleViewDetailsClick = () => {
     <div v-if="showSpinner">
       <CustomSpinner :visible="showSpinner" />
     </div>
-    <div v-else="!showSpinner">
+    <div v-else>
       <CustomImage
         image-class="h-[250px] w-full rounded-lg"
         :src="
           convertIPFStoHTTPS(
             auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
               ?.nodes[0].url,
-          ) || auctionCard
+          ) || defaultListingImage
         "
       />
     </div>
diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
index d04fba635..3a0c99628 100644
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ b/frontend/marketplace/src/components/AuctionResultsCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MarketplaceListing } from "@/types/GraphqlSchema";
 import router from "@/router";
-import auctionCard from "@/assets/auctionCard.png";
+import defaultListingImage from "@/assets/defaultListingImage.png";
 import type { MaterialProperty } from "@/types/GraphqlSchema";
 import {
   getDetailsList,
@@ -71,9 +71,9 @@ const handleViewDetailsClick = () => {
     <div v-if="showSpinner">
       <CustomSpinner :visible="showSpinner" />
     </div>
-    <div v-else="!showSpinner">
+    <div v-else>
       <CustomImage
-        :src="cardDetailsList?.thumbnailUrl || auctionCard"
+        :src="cardDetailsList?.thumbnailUrl || defaultListingImage"
         image-class="max-h-[200px] w-full rounded-sm"
       />
     </div>
diff --git a/frontend/marketplace/src/components/CertificateCard.vue b/frontend/marketplace/src/components/CertificateCard.vue
index 07089ca28..95522c024 100644
--- a/frontend/marketplace/src/components/CertificateCard.vue
+++ b/frontend/marketplace/src/components/CertificateCard.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 import { convertIPFStoHTTPS } from "@/utils/utils";
-import auctionCard from "@/assets/auctionCard.png";
+import defaultListingImage from "@/assets/defaultListingImage.png";
 import { useQuery } from "@vue/apollo-composable";
 import {
   GET_CREDIT_COLLECTIONS,
@@ -488,7 +488,7 @@ const generateQRCode = async () => {
     <CustomImage
       v-if="image?.url"
       image-class="h-48 w-full rounded-lg max-w-sm"
-      :src="convertIPFStoHTTPS(image?.url) || auctionCard"
+      :src="convertIPFStoHTTPS(image?.url) || defaultListingImage"
     />
     <!--        Desktop UI-->
     <div class="hidden md:grid md:col-span-2">
diff --git a/frontend/marketplace/src/components/CustomImage.vue b/frontend/marketplace/src/components/CustomImage.vue
index 64d0591f6..754b958cf 100644
--- a/frontend/marketplace/src/components/CustomImage.vue
+++ b/frontend/marketplace/src/components/CustomImage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AuctionCard from "../assets/auctionCard.png";
+import defaultListingImage from "../assets/defaultListingImage.png";
 export interface CustomImageProps {
   src: string;
   imageClass: string;
@@ -7,7 +7,6 @@ export interface CustomImageProps {
 }
 
 const props = defineProps<CustomImageProps>();
-const defaultImage = AuctionCard;
 
 const handleError = (event: Event) => {
   const img = event.target as HTMLImageElement;
@@ -15,7 +14,7 @@ const handleError = (event: Event) => {
   if (props.fallbackImageSrc) {
     img.src = props.fallbackImageSrc;
   } else {
-    img.src = defaultImage;
+    img.src = defaultListingImage;
   }
 };
 </script>
diff --git a/frontend/marketplace/src/components/ListingCard.vue b/frontend/marketplace/src/components/ListingCard.vue
index b536a0095..6726b28a7 100644
--- a/frontend/marketplace/src/components/ListingCard.vue
+++ b/frontend/marketplace/src/components/ListingCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PageNames } from "@/router";
 import { convertIPFStoHTTPS } from "@/utils/utils";
-import auctionCard from "@/assets/auctionCard.png";
+import defaultListingImage from "@/assets/defaultListingImage.png";
 import { onMounted, ref, computed } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 import tracking, { TrackEvents } from "@/utils/analytics";
@@ -69,7 +69,7 @@ const handleClick = () => {
         <CustomImage
           v-else
           image-class="h-[250px] w-full"
-          :src="convertIPFStoHTTPS(data.ipfsImage) || auctionCard"
+          :src="convertIPFStoHTTPS(data.ipfsImage) || defaultListingImage"
         />
       </figure>
       <div class="card-body">
diff --git a/frontend/marketplace/src/components/ListingCardTable.vue b/frontend/marketplace/src/components/ListingCardTable.vue
index 03dd036c3..7c45e3823 100644
--- a/frontend/marketplace/src/components/ListingCardTable.vue
+++ b/frontend/marketplace/src/components/ListingCardTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PageNames } from "@/router";
 import { convertIPFStoHTTPS } from "@/utils/utils";
-import auctionCard from "@/assets/auctionCard.png";
+import defaultListingImage from "@/assets/defaultListingImage.png";
 import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
@@ -94,7 +94,7 @@ const handleClick = () => {
         <CustomImage
           v-else
           image-class="max-h-32 max-w-56"
-          :src="convertIPFStoHTTPS(data.ipfsImage) || auctionCard"
+          :src="convertIPFStoHTTPS(data.ipfsImage) || defaultListingImage"
         />
       </figure>
       <div class="card-body flex-row justify-between">

From 5d7b3bbdd382a642105d4a748b0d847c9281f4cb Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 09:07:12 +0100
Subject: [PATCH 3/8] fix(marketplace): Rename fixAuctionDetails to
 fixListingDetails

---
 frontend/marketplace/src/pages/CreditCollectionPage.vue      | 5 +++--
 .../{formatAuctionDetails.ts => formatListingDetails.ts}     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)
 rename frontend/marketplace/src/utils/{formatAuctionDetails.ts => formatListingDetails.ts} (96%)

diff --git a/frontend/marketplace/src/pages/CreditCollectionPage.vue b/frontend/marketplace/src/pages/CreditCollectionPage.vue
index 2f3767176..db0f9692b 100644
--- a/frontend/marketplace/src/pages/CreditCollectionPage.vue
+++ b/frontend/marketplace/src/pages/CreditCollectionPage.vue
@@ -10,7 +10,7 @@ import { useRoute } from "@/router";
 import { useQuery } from "@vue/apollo-composable";
 import { onMounted, ref, watch } from "vue";
 import { GET_MARKETPLACE_LISTING } from "@/graphql/queries";
-import { formatAuctionDetails } from "@/utils/formatAuctionDetails";
+import { formatListingDetails } from "@/utils/formatListingDetails";
 
 interface AuctionDetails {
   applicant: string;
@@ -62,7 +62,7 @@ const getAuctionDetails = (id: string | string[]) => {
           loading,
           error,
         };
-        auctionDetails.value = formatAuctionDetails(
+        auctionDetails.value = formatListingDetails(
           result.value.marketplaceListings?.nodes[0].creditCollection.creditData
             .nodes,
           parseInt(
@@ -191,3 +191,4 @@ ul li::before {
   margin-left: -1em;
 }
 </style>
+@/utils/formatListingDetails
\ No newline at end of file
diff --git a/frontend/marketplace/src/utils/formatAuctionDetails.ts b/frontend/marketplace/src/utils/formatListingDetails.ts
similarity index 96%
rename from frontend/marketplace/src/utils/formatAuctionDetails.ts
rename to frontend/marketplace/src/utils/formatListingDetails.ts
index a09265400..af0ca642f 100644
--- a/frontend/marketplace/src/utils/formatAuctionDetails.ts
+++ b/frontend/marketplace/src/utils/formatListingDetails.ts
@@ -5,7 +5,7 @@ import {
   uniqueMaterials,
 } from "@/utils/utils";
 
-export const formatAuctionDetails = (data: any, materialVolume: number) => {
+export const formatListingDetails = (data: any, materialVolume: number) => {
   const applicantArray: string[] = [];
   const locationArray: string[] = [];
   const locationPointersArray: {

From b8bf27213e5a5bf42e32efbea2940f4ad725e147 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 09:16:39 +0100
Subject: [PATCH 4/8] fix(marketplace): Delete unused files and update default
 page title

---
 frontend/marketplace/index.html               |   2 +-
 .../src/components/AuctionCard.vue            | 103 -----------
 .../src/components/AuctionResultsCard.vue     | 165 ------------------
 .../marketplace/src/components/SearchBar.vue  |   4 +-
 .../src/pages/CreditCollectionPage.vue        |   2 +-
 .../marketplace/src/pages/ListingsPage.vue    |   2 +-
 6 files changed, 5 insertions(+), 273 deletions(-)
 delete mode 100644 frontend/marketplace/src/components/AuctionCard.vue
 delete mode 100644 frontend/marketplace/src/components/AuctionResultsCard.vue

diff --git a/frontend/marketplace/index.html b/frontend/marketplace/index.html
index 960393438..a482aa0c5 100644
--- a/frontend/marketplace/index.html
+++ b/frontend/marketplace/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Empower Market</title>
+    <title>Plastic credits marketplace - Empower Market</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/marketplace/src/components/AuctionCard.vue b/frontend/marketplace/src/components/AuctionCard.vue
deleted file mode 100644
index 78838d91d..000000000
--- a/frontend/marketplace/src/components/AuctionCard.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script setup lang="ts">
-import router from "@/router";
-import { convertIPFStoHTTPS } from "@/utils/utils";
-import defaultListingImage from "@/assets/defaultListingImage.png";
-import { formatDenom } from "@/utils/wallet-utils";
-import { onMounted, ref } from "vue";
-import { RouterLink } from "vue-router";
-import { PageNames } from "@/router";
-import CustomImage from "@/components/CustomImage.vue";
-import tracking, { TrackEvents } from "@/utils/analytics";
-import CustomSpinner from "./CustomSpinner.vue";
-import { useListingVolume } from "@/utils/useListingVolume";
-export interface AuctionCardProps {
-  auctionData: any;
-}
-const props = defineProps<AuctionCardProps>();
-const denom = ref("");
-const showSpinner = ref(true);
-const creditCollection = ref(props.auctionData.creditCollection);
-const { volume } = useListingVolume(creditCollection);
-
-onMounted(async () => {
-  denom.value = await formatDenom(props.auctionData?.pricePerCreditDenom);
-  if (
-    props.auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
-      ?.nodes[0].url !== ""
-  ) {
-    showSpinner.value = false;
-  }
-});
-
-const handleViewDetailsClick = () => {
-  tracking.trackEvent(TrackEvents.CLICKED_VIEW_DETAILS, {
-    id: props.auctionData.id,
-    context: "collection list",
-  });
-  router.push(`/auction/${encodeURIComponent(props.auctionData.id)}`);
-};
-</script>
-<template>
-  <router-link
-    :to="{ name: PageNames.LISTING, params: { id: props.auctionData.id } }"
-    class="bg-lightBlack rounded-lg md:rounded-sm flex flex-col"
-  >
-    <div v-if="showSpinner">
-      <CustomSpinner :visible="showSpinner" />
-    </div>
-    <div v-else>
-      <CustomImage
-        image-class="h-[250px] w-full rounded-lg"
-        :src="
-          convertIPFStoHTTPS(
-            auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
-              ?.nodes[0].url,
-          ) || defaultListingImage
-        "
-      />
-    </div>
-    <div class="grid grid-cols-2 p-3 gap-4 grow">
-      <div>
-        <div>
-          <p
-            class="font-Inter text-white text-title24 md:text-title32 font-bold leading-tight"
-          >
-            {{ auctionData?.pricePerCreditAmount / 1000000 }} ${{ denom }}
-          </p>
-          <p
-            class="font-Inter text-white text-title15 md:text-title18 font-light leading-tight"
-          >
-            Price per credit
-          </p>
-        </div>
-      </div>
-      <div class="text-right">
-        <p class="font-Inter text-white text-title13 md:text-title14 font-bold">
-          {{ volume }}kg
-        </p>
-        <p
-          class="font-Inter text-white text-title11 md:text-title12 font-light"
-        >
-          Volume
-        </p>
-      </div>
-      <div class="flex flex-col justify-end">
-        <p class="font-Inter text-white text-title14 font-bold">
-          {{ auctionData?.amount }}/{{ auctionData?.initialAmount }}
-        </p>
-        <p class="font-Inter text-white text-title12 font-light">
-          Available credits
-        </p>
-      </div>
-      <div class="grid justify-end">
-        <button
-          type="button"
-          class="btn w-fit self-end bg-greenPrimary border-greenPrimary rounded-sm font-Inter text-white md:text-title18 px-5 max-h-10 hover:bg-greenMedium hover:border-greenMedium font-light"
-          @click="handleViewDetailsClick"
-        >
-          View details
-        </button>
-      </div>
-    </div>
-  </router-link>
-</template>
diff --git a/frontend/marketplace/src/components/AuctionResultsCard.vue b/frontend/marketplace/src/components/AuctionResultsCard.vue
deleted file mode 100644
index 3a0c99628..000000000
--- a/frontend/marketplace/src/components/AuctionResultsCard.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import type { MarketplaceListing } from "@/types/GraphqlSchema";
-import router from "@/router";
-import defaultListingImage from "@/assets/defaultListingImage.png";
-import type { MaterialProperty } from "@/types/GraphqlSchema";
-import {
-  getDetailsList,
-  prettifyCardProperty,
-  stripPlasticTypeFromMaterial,
-  findPlasticTypeInMaterial,
-} from "@/utils/utils";
-import { formatDenom } from "@/utils/wallet-utils";
-import { computed, onMounted, ref } from "vue";
-import CustomImage from "@/components/CustomImage.vue";
-import tracking, { TrackEvents } from "@/utils/analytics";
-import CustomSpinner from "@/components/CustomSpinner.vue";
-
-export interface AuctionResultsCardProps {
-  cardData: MarketplaceListing & {
-    creditCollection: any;
-  };
-}
-
-interface CardDetailsList {
-  applicant: string[];
-  location: string[];
-  material: MaterialProperty[][];
-  volume: number;
-  thumbnailUrl: string;
-  image: string[];
-  locationPointers: {
-    lat: number;
-    lng: number;
-  }[];
-}
-
-const props = defineProps<AuctionResultsCardProps>();
-const denom = ref("");
-const volume = computed(() => {
-  return (
-    parseInt(props.cardData.creditCollection.retiredAmount) +
-    parseInt(props.cardData.creditCollection.activeAmount)
-  );
-});
-const cardDetailsList = ref<CardDetailsList>();
-const showSpinner = ref(true);
-const applicant = computed<string>(() => {
-  return cardDetailsList.value?.applicant[0] ?? "";
-});
-
-onMounted(async () => {
-  denom.value = await formatDenom(props.cardData?.pricePerCreditDenom);
-  cardDetailsList.value = getDetailsList(
-    props.cardData.creditCollection.creditData.nodes,
-  );
-  showSpinner.value = false;
-});
-
-const handleViewDetailsClick = () => {
-  tracking.trackEvent(TrackEvents.CLICKED_VIEW_DETAILS, {
-    id: props.cardData.id,
-    context: "start page",
-  });
-  router.push(`/auction/${encodeURIComponent(props.cardData.id)}`);
-};
-</script>
-<template>
-  <div
-    class="bg-auctionBackground md:bg-lightBlack rounded-lg font-Inter text-white my-5 md:p-3 md:grid md:grid-cols-5 min-h-[180px]"
-  >
-    <div v-if="showSpinner">
-      <CustomSpinner :visible="showSpinner" />
-    </div>
-    <div v-else>
-      <CustomImage
-        :src="cardDetailsList?.thumbnailUrl || defaultListingImage"
-        image-class="max-h-[200px] w-full rounded-sm"
-      />
-    </div>
-
-    <!--      Details for Mobile UI-->
-    <div class="grid grid-cols-2 p-5 gap-4 md:hidden">
-      <div>
-        <p class="text-title24 font-bold">
-          ${{ cardData?.pricePerCreditAmount / 1000000 }}
-        </p>
-        <p class="text-title15 font-light">Price per credit</p>
-      </div>
-      <div class="text-right">
-        <p class="text-title13 font-bold">{{ cardDetailsList?.volume }}kg</p>
-        <p class="text-title11 font-light">Volume</p>
-      </div>
-      <div>
-        <p class="text-title14 font-bold">
-          {{ cardData?.amount }}/{{ cardData?.initialAmount }}
-        </p>
-        <p class="text-title12 font-light">Available credits</p>
-      </div>
-      <div>
-        <button
-          class="btn bg-greenPrimary w-full h-full rounded-sm text-title15 px-2 normal-case font-normal"
-          @click="handleViewDetailsClick"
-        >
-          View details
-        </button>
-      </div>
-    </div>
-
-    <!--      Details for Desktop UI-->
-    <div
-      class="hidden md:grid grid-cols-5 gap-5 w-full col-span-4 py-2 px-6 ml-2 cursor-pointer"
-      @click="handleViewDetailsClick"
-    >
-      <div class="col-span-1 ...">
-        <p class="details-title">Material</p>
-        <div
-          v-for="(material, index) in cardDetailsList?.material"
-          :key="`${cardData.id}-material-${index}`"
-        >
-          <h3>{{ findPlasticTypeInMaterial(material)?.value }}</h3>
-          <ul class="list-disc ml-6">
-            <li
-              v-for="property in stripPlasticTypeFromMaterial(material)"
-              :key="property.key"
-              class="text-title14"
-            >
-              {{ prettifyCardProperty(property) }}
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="col-span-1">
-        <p class="details-title">Location</p>
-        <p>{{ cardData.creditCollection.nodes }}</p>
-        <ul class="list-disc ml-6">
-          <li v-for="location in cardDetailsList?.location" :key="location">
-            {{ location }}
-          </li>
-        </ul>
-      </div>
-      <div class="col-span-1">
-        <p class="details-title">Collection Organisation</p>
-        <h3>{{ applicant }}</h3>
-      </div>
-      <div class="col-span-1">
-        <p class="details-title">Volume</p>
-        <p>{{ volume }}kg</p>
-      </div>
-      <div class="col-span-1 text-right">
-        <p class="text-title32 font-bold leading-7 mt-6">
-          {{ cardData?.pricePerCreditAmount / 1000000 }}
-        </p>
-        <p class="text-title14 font-bold text-textGray leading-6">
-          {{ denom }}
-        </p>
-        <p class="text-title18 leading-3 font-light">Price per credit</p>
-
-        <p class="text-title14 font-bold mt-7 leading-[13px]">
-          {{ cardData?.amount }}/{{ cardData?.initialAmount }}
-        </p>
-        <p class="text-title12 font-bold font-light">Available credits</p>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/marketplace/src/components/SearchBar.vue b/frontend/marketplace/src/components/SearchBar.vue
index 084a9f147..1052ad913 100644
--- a/frontend/marketplace/src/components/SearchBar.vue
+++ b/frontend/marketplace/src/components/SearchBar.vue
@@ -65,7 +65,7 @@ const applicantData: any = useQuery(gql`
 `);
 </script>
 <template>
-  <!--    Search Auction Mobile-->
+  <!--    Search Listings Mobile-->
   <div
     class="md:hidden input-group w-full mb-5 bg-white rounded-full !rounded-lg px-1 border-none font-Inter"
   >
@@ -170,7 +170,7 @@ const applicantData: any = useQuery(gql`
     <div class="flex flex-row bg-darkGray w-full p-4 rounded-t-sm">
       <input
         class="w-full rounded-sm bg-darkGray px-3 h-12 text-lightGray text-title24"
-        placeholder="Search auctions"
+        placeholder="Search projects"
         v-model="filterValues.searchTerm"
       />
       <button
diff --git a/frontend/marketplace/src/pages/CreditCollectionPage.vue b/frontend/marketplace/src/pages/CreditCollectionPage.vue
index db0f9692b..ce5103d35 100644
--- a/frontend/marketplace/src/pages/CreditCollectionPage.vue
+++ b/frontend/marketplace/src/pages/CreditCollectionPage.vue
@@ -8,7 +8,7 @@ import CustomGoogleMap from "@/components/CustomGoogleMap.vue";
 import ImageGallery from "@/components/ImageGallery.vue";
 import { useRoute } from "@/router";
 import { useQuery } from "@vue/apollo-composable";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { GET_MARKETPLACE_LISTING } from "@/graphql/queries";
 import { formatListingDetails } from "@/utils/formatListingDetails";
 
diff --git a/frontend/marketplace/src/pages/ListingsPage.vue b/frontend/marketplace/src/pages/ListingsPage.vue
index 02d10ca4b..d2f356926 100644
--- a/frontend/marketplace/src/pages/ListingsPage.vue
+++ b/frontend/marketplace/src/pages/ListingsPage.vue
@@ -139,7 +139,7 @@ const handleSearch = (filterValues: any) => {
           </div>
         </div>
       </div>
-      <!--    <CustomAlert :visible="true" label="No more auctions found"/>-->
+      <!--    <CustomAlert :visible="true" label="No more projects found"/>-->
       <div class="flex justify-center md:justify-end my-10">
         <CustomPagination
           :total="totalNrOfListings"

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 5/8] 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 ce5103d35..be4304c51 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 60b281591..c0dc8fb41 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 d7e40af19..6ee720219 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

From b0aba8d99e76c60ad5fbed0f9cd7af422bf3898a Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 21:52:30 +0100
Subject: [PATCH 6/8] fix(marketplace): Rename listings url to projects

---
 frontend/marketplace/src/router/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/marketplace/src/router/index.ts b/frontend/marketplace/src/router/index.ts
index fd410a2f4..620dc5bfe 100644
--- a/frontend/marketplace/src/router/index.ts
+++ b/frontend/marketplace/src/router/index.ts
@@ -50,12 +50,12 @@ const router = createRouter({
       component: FAQPage,
     },
     {
-      path: "/listings",
+      path: "/projects",
       name: PageNames.LISTINGS,
       component: Listings,
     },
     {
-      path: "/listings/:id",
+      path: "/projects/:id",
       name: PageNames.LISTING,
       component: Listing,
       meta: {

From b2b460a3c6c08cd8cc9e0dd88e2cb9db117681e4 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 23:02:23 +0100
Subject: [PATCH 7/8] feat(marketplace): Add unhead to get page specific title
 and meta descriptions on public pages

---
 frontend/marketplace/package-lock.json        | 138 ++++++++++++++++++
 frontend/marketplace/package.json             |   1 +
 frontend/marketplace/src/main.ts              |   4 +
 frontend/marketplace/src/pages/FAQPage.vue    |  12 ++
 frontend/marketplace/src/pages/HomePage.vue   |  12 ++
 .../marketplace/src/pages/ListingPage.vue     |  26 +++-
 .../marketplace/src/pages/ListingsPage.vue    |  11 ++
 7 files changed, 197 insertions(+), 7 deletions(-)

diff --git a/frontend/marketplace/package-lock.json b/frontend/marketplace/package-lock.json
index 740b7d446..7cb88c482 100644
--- a/frontend/marketplace/package-lock.json
+++ b/frontend/marketplace/package-lock.json
@@ -13,6 +13,7 @@
         "@keplr-wallet/types": "0.12.64",
         "@logto/vue": "2.2.1",
         "@segment/analytics-next": "1.63.0",
+        "@unhead/vue": "^1.8.10",
         "@vue/apollo-composable": "4.0.1",
         "@vue/apollo-option": "4.0.0",
         "@vuepic/vue-datepicker": "7.4.1",
@@ -4705,6 +4706,58 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.8.10.tgz",
+      "integrity": "sha512-dBeDbHrBjeU+eVgMsD91TGEazb1dwLrY0x/ve01CldMCmm+WcRu++SUW7s1QX84mzGH2EgFz78o1OPn6jpV3zw==",
+      "dependencies": {
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.8.10.tgz",
+      "integrity": "sha512-cy8RGOPkwOVY5EmRoCgGV8AqLjy/226xBVTY54kBct02Om3hBdpB9FZa9frM910pPUXMI8PNmFgABO23O7IdJA==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.8.10.tgz",
+      "integrity": "sha512-pEFryAs3EmV+ShDQx2ZBwUnt5l3RrMrXSMZ50oFf+MImKZNARVvD4+3I8fEI9wZh+Zq0JYG3UAfzo51MUP+Juw==",
+      "dependencies": {
+        "@unhead/schema": "1.8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/vue": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.8.10.tgz",
+      "integrity": "sha512-KF8pftHnxnlBlgNpKXWLTg3ZUtkuDCxRPUFSDBy9CtqRSX/qvAhLZ26mbqRVmHj8KigiRHP/wnPWNyGnUx20Bg==",
+      "dependencies": {
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10",
+        "hookable": "^5.5.3",
+        "unhead": "1.8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      },
+      "peerDependencies": {
+        "vue": ">=2.7 || >=3"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
@@ -7299,6 +7352,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -10623,6 +10681,20 @@
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
       "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
     },
+    "node_modules/unhead": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.8.10.tgz",
+      "integrity": "sha512-dth8FvZkLriO5ZWWOBIYBNSfGiwJtKcqpPWpSOk/Z0e2jdlgwoZEWZHFyte0EKvmbZxKcsWNMqIuv7dEmS5yZQ==",
+      "dependencies": {
+        "@unhead/dom": "1.8.10",
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -11520,6 +11592,14 @@
       "dependencies": {
         "zen-observable": "0.8.15"
       }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
     }
   },
   "dependencies": {
@@ -13690,6 +13770,43 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "@unhead/dom": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.8.10.tgz",
+      "integrity": "sha512-dBeDbHrBjeU+eVgMsD91TGEazb1dwLrY0x/ve01CldMCmm+WcRu++SUW7s1QX84mzGH2EgFz78o1OPn6jpV3zw==",
+      "requires": {
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10"
+      }
+    },
+    "@unhead/schema": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.8.10.tgz",
+      "integrity": "sha512-cy8RGOPkwOVY5EmRoCgGV8AqLjy/226xBVTY54kBct02Om3hBdpB9FZa9frM910pPUXMI8PNmFgABO23O7IdJA==",
+      "requires": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      }
+    },
+    "@unhead/shared": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.8.10.tgz",
+      "integrity": "sha512-pEFryAs3EmV+ShDQx2ZBwUnt5l3RrMrXSMZ50oFf+MImKZNARVvD4+3I8fEI9wZh+Zq0JYG3UAfzo51MUP+Juw==",
+      "requires": {
+        "@unhead/schema": "1.8.10"
+      }
+    },
+    "@unhead/vue": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-1.8.10.tgz",
+      "integrity": "sha512-KF8pftHnxnlBlgNpKXWLTg3ZUtkuDCxRPUFSDBy9CtqRSX/qvAhLZ26mbqRVmHj8KigiRHP/wnPWNyGnUx20Bg==",
+      "requires": {
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10",
+        "hookable": "^5.5.3",
+        "unhead": "1.8.10"
+      }
+    },
     "@vitejs/plugin-vue": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
@@ -15571,6 +15688,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -17992,6 +18114,17 @@
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
       "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
     },
+    "unhead": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.8.10.tgz",
+      "integrity": "sha512-dth8FvZkLriO5ZWWOBIYBNSfGiwJtKcqpPWpSOk/Z0e2jdlgwoZEWZHFyte0EKvmbZxKcsWNMqIuv7dEmS5yZQ==",
+      "requires": {
+        "@unhead/dom": "1.8.10",
+        "@unhead/schema": "1.8.10",
+        "@unhead/shared": "1.8.10",
+        "hookable": "^5.5.3"
+      }
+    },
     "universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -18584,6 +18717,11 @@
       "requires": {
         "zen-observable": "0.8.15"
       }
+    },
+    "zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag=="
     }
   }
 }
diff --git a/frontend/marketplace/package.json b/frontend/marketplace/package.json
index 7f4bce879..63b553171 100644
--- a/frontend/marketplace/package.json
+++ b/frontend/marketplace/package.json
@@ -20,6 +20,7 @@
     "@keplr-wallet/types": "0.12.64",
     "@logto/vue": "2.2.1",
     "@segment/analytics-next": "1.63.0",
+    "@unhead/vue": "^1.8.10",
     "@vue/apollo-composable": "4.0.1",
     "@vue/apollo-option": "4.0.0",
     "@vuepic/vue-datepicker": "7.4.1",
diff --git a/frontend/marketplace/src/main.ts b/frontend/marketplace/src/main.ts
index 1c785c977..0f0870aee 100644
--- a/frontend/marketplace/src/main.ts
+++ b/frontend/marketplace/src/main.ts
@@ -23,6 +23,7 @@ import {
 import { createLogto, type LogtoConfig } from "@logto/vue";
 import "@/utils/analytics";
 import { createAppLogger } from "@/utils/logger";
+import { createHead } from "@unhead/vue";
 
 const cache = new InMemoryCache();
 const apolloClient = new ApolloClient({
@@ -31,6 +32,9 @@ const apolloClient = new ApolloClient({
 });
 
 const app = createApp(App);
+const head = createHead();
+app.use(head);
+
 const logtoConfig: LogtoConfig = {
   endpoint: LOGTO_ENDPOINT,
   appId: LOGTO_APP_ID,
diff --git a/frontend/marketplace/src/pages/FAQPage.vue b/frontend/marketplace/src/pages/FAQPage.vue
index 8e92014a6..b0de165f5 100644
--- a/frontend/marketplace/src/pages/FAQPage.vue
+++ b/frontend/marketplace/src/pages/FAQPage.vue
@@ -1,5 +1,17 @@
 <script setup lang="ts">
 import FAQCollapse from "@/components/FAQCollapse.vue";
+import { useHead } from "@/utils/useHead";
+useHead({
+  title: "FAQs: Learn More About Buying Plastic Credits",
+  meta: [
+    {
+      name: "description",
+      content:
+        "Have questions about buying plastic credits? Our FAQ page provides answers to common questions about our eco-friendly projects and how you can contribute to a sustainable future with Empower Market.",
+    },
+  ],
+});
+
 const faqData = [
   {
     id: "what_are_plastic_credits",
diff --git a/frontend/marketplace/src/pages/HomePage.vue b/frontend/marketplace/src/pages/HomePage.vue
index 6e688e079..4c739027e 100644
--- a/frontend/marketplace/src/pages/HomePage.vue
+++ b/frontend/marketplace/src/pages/HomePage.vue
@@ -7,6 +7,18 @@ import { ListingsQueryBuilder } from "@/utils/query-builder";
 import { useQuery } from "@vue/apollo-composable";
 import gql from "graphql-tag";
 import { onMounted, ref } from "vue";
+import { useHead } from "@/utils/useHead";
+useHead({
+  // Your Marketplace for Buying and Selling Plastic Credits
+  title: "Your Marketplace for Buying Plastic Credits",
+  meta: [
+    {
+      name: "description",
+      content:
+        "Welcome to Empower Market, your go-to marketplace for buying plastic credits. Explore eco-friendly projects, offset your plastic footprint, and contribute to a sustainable future today.",
+    },
+  ],
+});
 
 const queryBuilder = new ListingsQueryBuilder();
 const data = ref();
diff --git a/frontend/marketplace/src/pages/ListingPage.vue b/frontend/marketplace/src/pages/ListingPage.vue
index c0dc8fb41..b4340cf98 100644
--- a/frontend/marketplace/src/pages/ListingPage.vue
+++ b/frontend/marketplace/src/pages/ListingPage.vue
@@ -17,7 +17,7 @@ import {
 import { useQuery } from "@vue/apollo-composable";
 import { ref, watch, computed } from "vue";
 import { GET_MARKETPLACE_LISTING } from "@/graphql/queries";
-
+import { useHead } from "@/utils/useHead";
 interface ListingDetails {
   applicant: string;
   location: string[];
@@ -155,6 +155,22 @@ const handlePageLoadAndCollectionIdChange = (newId: string, oldId?: string) => {
 };
 
 watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
+
+const getProjectName = () =>
+  data.value?.result?.marketplaceListings?.nodes[0].creditCollection?.creditData
+    ?.nodes[0].projectName;
+const projectName = computed(getProjectName);
+useHead({
+  title: projectName,
+  meta: [
+    {
+      name: "description",
+      content: () =>
+        "Support environmental sustainability by buying plastic credits from " +
+        projectName.value,
+    },
+  ],
+});
 </script>
 <template>
   <CustomSpinner :visible="showSpinner" />
@@ -162,14 +178,10 @@ watch(currentId, handlePageLoadAndCollectionIdChange, { immediate: true });
     <!--  Title Section-->
     <p class="text-title18 mb-5">
       <router-link :to="{ name: PageNames.LISTINGS }">Projects</router-link>
-      <span class="text-subTextGray">/ Project details</span>
+      <span class="text-subTextGray"> / Project details</span>
     </p>
     <h1 class="text-title38">
-      {{
-        data?.result?.marketplaceListings?.nodes[0].creditCollection?.creditData
-          ?.nodes[0].applicantDataByCreditDataId.nodes[0].name
-      }}
-      - {{ plasticType }}
+      {{ projectName }}
     </h1>
     <!--    <p class="text-title18 text-subTextGray">Sri Lanka</p>-->
 
diff --git a/frontend/marketplace/src/pages/ListingsPage.vue b/frontend/marketplace/src/pages/ListingsPage.vue
index d2f356926..a7b638d41 100644
--- a/frontend/marketplace/src/pages/ListingsPage.vue
+++ b/frontend/marketplace/src/pages/ListingsPage.vue
@@ -10,6 +10,17 @@ import gql from "graphql-tag";
 import { computed, onMounted, ref } from "vue";
 import ListingCard from "@/components/ListingCard.vue";
 import ListingCardTable from "@/components/ListingCardTable.vue";
+import { useHead } from "@/utils/useHead";
+useHead({
+  title: "Buy Plastic Credits: List of Eco-Friendly Projects",
+  meta: [
+    {
+      name: "description",
+      content:
+        "Explore our curated list of eco-friendly projects selling plastic credits. Invest in a sustainable future and offset your plastic footprint today with Empower Market.",
+    },
+  ],
+});
 
 const router = useRoute();
 const pageNumber = ref(1);

From acb2855a00323c7410f54a33b27d213fc8cd8b0f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@gmail.com>
Date: Sun, 3 Mar 2024 23:06:49 +0100
Subject: [PATCH 8/8] fix(marketplace): Add missing file

---
 frontend/marketplace/src/utils/useHead.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 frontend/marketplace/src/utils/useHead.ts

diff --git a/frontend/marketplace/src/utils/useHead.ts b/frontend/marketplace/src/utils/useHead.ts
new file mode 100644
index 000000000..4fea92ba1
--- /dev/null
+++ b/frontend/marketplace/src/utils/useHead.ts
@@ -0,0 +1,13 @@
+import { useHead as useHeadUnhead } from "@unhead/vue";
+
+type UseHead = typeof useHeadUnhead;
+
+export const useHead: UseHead = (input, options?) => {
+  useHeadUnhead(
+    {
+      titleTemplate: "%s | Empower Market",
+      ...input,
+    },
+    options,
+  );
+};