fix(marketplace): New listing card and new listing list view component

frontend/marketplace/src/components/FeaturedListings.vue

@@ -1,31 +1,18 @@
 <script setup lang="ts">
 import ListingCard from "@/components/ListingCard.vue";
-import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { PageNames } from "@/router";
+import viewAllIcon from "@/assets/viewAllIcon.svg";
+
 export interface FeaturedListingsProps {
   listings: any[];
   filterValues: any;
 }
 
-const props = defineProps<FeaturedListingsProps>();
-
-const viewAllListingsUrl = computed(() => {
-  const params = new URLSearchParams();
-  const objectOfArrays = props.filterValues;
-  if (!objectOfArrays) {
-    return "/auction";
-  }
-  for (const key in objectOfArrays) {
-    if (Object.prototype.hasOwnProperty.call(objectOfArrays, key)) {
-      params.append(key, JSON.stringify(objectOfArrays[key]));
-    }
-  }
-  const queryString = params.toString();
-  const url = `/auction?${queryString}`;
-  return url;
-});
+defineProps<FeaturedListingsProps>();
 </script>
 <template>
-  <!--Auctions section-->
+  <!--Listings section-->
   <div class="mt-5">
     <p class="font-Inter text-white text-title24 mb-3 md:text-title38">
       Feature projects
@@ -36,17 +23,17 @@ const viewAllListingsUrl = computed(() => {
         :key="listing"
         :listing-data="listing"
       />
-      <a
+      <router-link
         class="grid grid-rows-3 p-4 bg-greenPrimary h-[346px] md: md:min-h-[346px] md:h-full w-full rounded-sm font-Inter text-title32 text-white font-bold cursor-pointer"
-        :href="viewAllListingsUrl"
+        :to="{ name: PageNames.LISTINGS }"
       >
         <div class="row-start-2 flex flex-row justify-center items-center">
           View all projects
         </div>
         <div class="row-start-3 flex flex-row justify-end">
-          <img class="h-14 self-end" src="../assets/viewAllIcon.svg" />
+          <img class="h-14 self-end" :src="viewAllIcon" />
         </div>
-      </a>
+      </router-link>
     </div>
   </div>
 </template>

frontend/marketplace/src/components/ListingCard.vue

@@ -1,66 +1,85 @@
 <script setup lang="ts">
-import router from "@/router";
+import { PageNames } from "@/router";
 import { convertIPFStoHTTPS } from "@/utils/utils";
 import auctionCard from "@/assets/auctionCard.png";
-import { formatDenom } from "@/utils/wallet-utils";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 import tracking, { TrackEvents } from "@/utils/analytics";
 import CustomSpinner from "@/components/CustomSpinner.vue";
+import { findPlasticTypeInMaterial } from "@/utils/utils";
 export interface ListingCardProps {
   listingData: any;
+  class?: string;
 }
 const props = defineProps<ListingCardProps>();
-const denom = ref("");
 const showSpinner = ref(true);
 
+const data = ref({
+  id: props.listingData?.id,
+  ipfsImage:
+    props.listingData?.creditCollection?.creditData?.nodes[0].mediaFiles
+      ?.nodes[0].url,
+  pricePerCreditAmount: props.listingData?.pricePerCreditAmount,
+  projectName:
+    props.listingData?.creditCollection?.creditData?.nodes[0].projectName,
+});
+
+const subheader = computed(() => {
+  const materials =
+    props.listingData.creditCollection.creditData.nodes[0].eventData.nodes[0]
+      .material;
+  const applicant =
+    props.listingData.creditCollection.creditData.nodes[0]
+      .applicantDataByCreditDataId.nodes[0].name;
+  const material = findPlasticTypeInMaterial(materials.nodes)?.value;
+  const country =
+    props.listingData.creditCollection.creditData.nodes[0].eventData.nodes[0]
+      .country;
+  return `${material} from ${country} by ${applicant}`;
+});
+
 onMounted(async () => {
-  denom.value = await formatDenom(props.listingData?.pricePerCreditDenom);
   if (
     props.listingData?.creditCollection?.creditData?.nodes[0].mediaFiles
       ?.nodes[0].url !== ""
   ) {
     showSpinner.value = false;
   }
-  console.log(props);
 });
 
-const handleViewDetailsClick = () => {
+const handleClick = () => {
   tracking.trackEvent(TrackEvents.CLICKED_VIEW_DETAILS, {
     id: props.listingData.id,
     context: "collection list",
   });
-  router.push(`/auction/${encodeURIComponent(props.listingData.id)}`);
 };
 </script>
 <template>
-  <div>
+  <div :class="props.class">
     <router-link
-      :to="`/auction/${encodeURIComponent(props.listingData.id)}`"
-      class="card bg-lightGray border-lightGray card-bordered hover:border-greenPrimary cursor-pointer text-white font-Inter card-compact"
+      :to="{ name: PageNames.LISTING, params: { id: props.listingData.id } }"
+      class="h-full card bg-lightGray border-lightGray card-bordered hover:border-greenPrimary cursor-pointer text-white font-Inter card-compact"
+      @click="handleClick"
     >
       <figure>
         <CustomSpinner v-if="showSpinner" :visible="showSpinner" />
         <CustomImage
           v-else
           image-class="h-[250px] w-full"
-          :src="
-            convertIPFStoHTTPS(
-              listingData?.creditCollection?.creditData?.nodes[0].mediaFiles
-                ?.nodes[0].url,
-            ) || auctionCard
-          "
+          :src="convertIPFStoHTTPS(data.ipfsImage) || auctionCard"
         />
       </figure>
       <div class="card-body">
-        <h2 class="card-title font-bold text-title32">Project clean oceans</h2>
+        <h2 class="card-title font-bold text-title32">
+          {{ data.projectName }}
+        </h2>
         <p class="font-light text-title15 md:text-title18">
-          PET from Sri Lanka by Verra
+          {{ subheader }}
         </p>
         <div class="card-actions justify-between mt-4">
           <dl>
             <dd class="text-title26 font-bold">
-              {{ listingData?.pricePerCreditAmount / 1000000 }} {{ denom }}
+              {{ listingData?.pricePerCreditAmount / 1000000 }} USD
             </dd>
             <dt class="text-title11 md:text-title12 font-light">
               per kilo removed
@@ -79,64 +98,5 @@ const handleViewDetailsClick = () => {
       </div>
     </router-link>
 
-    <div class="bg-lightBlack rounded-lg md:rounded-sm">
-      <div v-if="showSpinner">
-        <CustomSpinner :visible="showSpinner" />
-      </div>
-      <div v-else>
-        <CustomImage
-          image-class="h-[250px] w-full rounded-lg"
-          :src="
-            convertIPFStoHTTPS(
-              listingData?.creditCollection?.creditData?.nodes[0].mediaFiles
-                ?.nodes[0].url,
-            ) || auctionCard
-          "
-        />
-      </div>
-      <div class="grid grid-cols-2 p-3 gap-4">
-        <div>
-          <div>
-            <p
-              class="font-Inter text-white text-title24 md:text-title32 font-bold"
-            >
-              {{ listingData?.pricePerCreditAmount / 1000000 }} ${{ denom }}
-            </p>
-            <p class="font-Inter text-white text-title15 md:text-title18">
-              Price per credit
-            </p>
-          </div>
-        </div>
-        <div>
-          <div class="text-right">
-            <p
-              class="font-Inter text-white text-title13 md:text-title14 font-bold"
-            >
-              <!--            300kg-->
-            </p>
-            <p class="font-Inter text-white text-title11 md:text-title12">
-              <!--            Volume-->
-            </p>
-          </div>
-        </div>
-        <div>
-          <div>
-            <p class="font-Inter text-white text-title14 font-bold">
-              {{ listingData?.amount }}/{{ listingData?.initialAmount }}
-            </p>
-            <p class="font-Inter text-white text-title12">Available credits</p>
-          </div>
-        </div>
-        <div>
-          <button
-            type="button"
-            class="bg-greenPrimary w-full h-full rounded-sm font-Inter text-white md:text-title18 px-2"
-            @click="handleViewDetailsClick"
-          >
-            View details
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>

frontend/marketplace/src/graphql/queries/creditCollections.ts

@@ -23,6 +23,7 @@ export const GET_CREDIT_COLLECTIONS = gql`
         creditData {
           nodes {
             id
+            projectName
             mediaFiles {
               nodes {
                 name

frontend/marketplace/src/graphql/queries/marketPlaceListing.ts

@@ -18,6 +18,7 @@ export const GET_MARKETPLACE_LISTING = gql`
           creditType
           creditData {
             nodes {
+              projectName
               mediaFiles {
                 nodes {
                   name

frontend/marketplace/src/pages/AuctionPage.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import AuctionResultsCard from "@/components/AuctionResultsCard.vue";
 import CustomAlert from "@/components/CustomAlert.vue";
 import CustomPagination from "@/components/CustomPagination.vue";
 import CustomSpinner from "@/components/CustomSpinner.vue";
@@ -9,6 +8,8 @@ import { ListingsQueryBuilder } from "@/utils/query-builder";
 import { useQuery } from "@vue/apollo-composable";
 import gql from "graphql-tag";
 import { computed, onMounted, ref } from "vue";
+import ListingCard from "@/components/ListingCard.vue";
+import ListingCardTable from "@/components/ListingCardTable.vue";
 
 const router = useRoute();
 const pageNumber = ref(1);
@@ -17,7 +18,7 @@ const data = ref();
 const filterVal = ref();
 const showSpinner = ref(true);
 const queryBuilder = new ListingsQueryBuilder();
-const totalNrOfAuctions = computed<number>(() => {
+const totalNrOfListings = computed<number>(() => {
   return data?.value?.result?.marketplaceListings?.totalCount || 0;
 });
 
@@ -117,24 +118,31 @@ const handleSearch = (filterValues: any) => {
 </script>
 <template>
   <div class="p-5 min-h-[50vh] font-Inter">
-    <h1 class="text-title24 md:text-title38 text-white mb-5">Auctions</h1>
+    <h1 class="text-title24 md:text-title38 text-white mb-5">Projects</h1>
     <!-- <SearchBar @search-click="handleSearch" :filter-values="filterVal" /> -->
     <CustomSpinner :visible="showSpinner" />
     <template v-if="!showSpinner">
       <CustomAlert
         :visible="true"
-        :label="`${totalNrOfAuctions} auctions found`"
+        :label="`${totalNrOfListings} projects found`"
       />
-      <div
-        v-for="auction in data?.result?.marketplaceListings?.nodes"
-        :key="auction.id"
-      >
-        <AuctionResultsCard :card-data="auction" />
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4 mt-4">
+        <div
+          v-for="listing in data?.result?.marketplaceListings?.nodes"
+          :key="listing.id"
+        >
+          <div class="h-full lg:hidden">
+            <ListingCard class="h-full" :listing-data="listing" />
+          </div>
+          <div class="hidden lg:block">
+            <ListingCardTable :listing-data="listing" />
+          </div>
+        </div>
       </div>
       <!--    <CustomAlert :visible="true" label="No more auctions found"/>-->
       <div class="flex justify-center md:justify-end my-10">
         <CustomPagination
-          :total="totalNrOfAuctions"
+          :total="totalNrOfListings"
           :item-per-page="itemsPerPage"
           v-model:current-page="pageNumber"
           @page-change="handlePageChange"

frontend/marketplace/src/router/index.ts

@@ -4,18 +4,12 @@ import {
   type RouteLocationNormalized,
 } from "vue-router";
 import tracking, { type EventProperties } from "@/utils/analytics";
+import { PageNames } from "./pageNames";
 
 type PageViewEventWithProperties = (
   to: RouteLocationNormalized,
 ) => [PageNames, EventProperties];
 
-declare module "vue-router" {
-  interface RouteMeta {
-    pageViewEvent?: PageNames | PageViewEventWithProperties;
-    hideNavFooter?: boolean;
-  }
-}
-
 const HomePage = () => import("@/pages/HomePage.vue");
 const FAQPage = () => import("@/pages/FAQPage.vue");
 const CertificatesAndCreditsPage = () =>
@@ -30,19 +24,7 @@ const AuctionPaymentCancelled = () =>
   import("@/pages/AuctionPaymentCancelled.vue");
 const CreditCollectionPage = () => import("@/pages/CreditCollectionPage.vue");
 
-export enum PageNames {
-  START_PAGE = "start_page",
-  CERTIFICATES = "certificates",
-  FAQ = "faq",
-  LISTINGS = "listings",
-  LISTING = "listing",
-  LOGIN_CALLBACK = "login_callback",
-  USER_PROFILE = "user_profile",
-  PAYMENT_SUCCESSFUL = "payment_successful",
-  PAYMENT_CANCELLED = "payment_cancelled",
-  REGISTRY = "registry",
-  UNKNOWN = "unknown",
-}
+export { PageNames };
 
 const router = createRouter({
   scrollBehavior: (to, from) => {

frontend/marketplace/src/router/pageNames.ts

@@ -0,0 +1,14 @@
+// Needed to put this in a separate file for it to work properly with the import in analytics.ts
+export enum PageNames {
+  START_PAGE = "start_page",
+  CERTIFICATES = "certificates",
+  FAQ = "faq",
+  LISTINGS = "listings",
+  LISTING = "listing",
+  LOGIN_CALLBACK = "login_callback",
+  USER_PROFILE = "user_profile",
+  PAYMENT_SUCCESSFUL = "payment_successful",
+  PAYMENT_CANCELLED = "payment_cancelled",
+  REGISTRY = "registry",
+  UNKNOWN = "unknown",
+}

frontend/marketplace/src/types/GraphqlSchema.ts

@@ -120,6 +120,7 @@ interface CreditData {
   id: string;
   issuanceDate: Date;
   creditType: string;
+  projectName: string;
   aggregationLatitude: number;
   aggregationLongitude: number;
   rawJsonData: string;

frontend/marketplace/src/types/index.d.ts

@@ -1,5 +1,6 @@
-export {};
 import { Window as KeplrWindow } from "@keplr-wallet/types";
+import "vue-router";
+export {};
 declare global {
   interface Window {
     keplr: window & KeplrWindow;
@@ -10,3 +11,10 @@ declare global {
 }
 
 export * from "./Credits.ts";
+
+declare module "vue-router" {
+  interface RouteMeta {
+    pageViewEvent?: PageNames | PageViewEventWithProperties;
+    hideNavFooter?: boolean;
+  }
+}