5837 certificate adjustments (#1091)

* feat(marketplace): Add some typings to pdfgenerator, lint it and remove styles that does not work

* fix(marketplace): Type fixes

* fix(marketplace): Replace 'Materials' with 'Material Tracking Events' and the tracking event id with 'Registration Date'

* feat(marketplace): In certificates, replace ipfs to https protocol in links

* fix(marketplace): In certificates, update the first page text to have more fireworks

frontend/marketplace/src/pages/CertificatePage.vue

@@ -6,6 +6,18 @@ import { useRoute } from "@/router";
 import { toast } from "vue3-toastify";
 import { generatePDF } from "../pdfGenerator/pdfGenerator";
 import CustomSpinner from "@/components/CustomSpinner.vue";
+import { ipfsToHttpsProtocol } from "@/utils/utils";
+
+interface CertificateDataNode {
+  amount: string;
+  denom: string;
+  id: string;
+  nodeId: string;
+  retiringEntityAdditionalData: string;
+  retiringEntityName: string;
+  walletId: string;
+  timestamp?: string;
+}
 
 const router = useRoute();
 const certificateData = ref();
@@ -72,7 +84,7 @@ const queryNow = () => {
   watchEffect(() => {
     if (result.value) {
       processCertificateDataNode(
-        result.value.creditOffsetCertificates.nodes[0]
+        result.value.creditOffsetCertificates.nodes[0],
       );
       getCreditData(result.value.creditOffsetCertificates.nodes[0].denom);
     }
@@ -145,23 +157,21 @@ const getCreditData = (denom: string) => {
     }
   }
 }`;
-  const { result, error } = useQuery(
-    gql`
-      ${query}
-    `
-  );
+  const { result, error } = useQuery(gql`
+    ${query}
+  `);
 
   if (result.value) {
     processCreditCollectionsNode(result.value.creditCollections.nodes[0]);
     processEventDataNode(
       result.value.creditCollections.nodes[0].creditData.nodes[0].eventData
-        .nodes
+        .nodes,
     );
     processCreditDataNode(
-      result.value.creditCollections.nodes[0].creditData.nodes[0]
+      result.value.creditCollections.nodes[0].creditData.nodes[0],
     );
     assignApplicantData(
-      result.value.creditCollections.nodes[0].creditData.nodes[0]
+      result.value.creditCollections.nodes[0].creditData.nodes[0],
     );
     assignAllDataValue();
   }
@@ -172,7 +182,9 @@ const getCreditData = (denom: string) => {
   showSpinner.value = false;
 };
 
-const processCertificateDataNode = (certificateDataNode: any) => {
+const processCertificateDataNode = (
+  certificateDataNode: CertificateDataNode,
+) => {
   certificateData.value = certificateDataNode;
   //Create string for retired date on second page, add timestamp to query when it's available in the index
   if (certificateDataNode.timestamp) {
@@ -197,9 +209,9 @@ const processEventDataNode = (eventDataNode: any) => {
       .map((eventNode: any) =>
         eventNode.material.nodes
           .filter((material: any) => material.key == "plasticType")
-          .map((material: any) => material.value)
+          .map((material: any) => material.value),
       )
-      .flat()
+      .flat(),
   );
   plastciValuesString.value = Array.from(plastciValuesSet).join(", ");
 
@@ -208,7 +220,7 @@ const processEventDataNode = (eventDataNode: any) => {
     const duplicate = unique.find(
       (location: any) =>
         location.longitude === eventNode.longitude &&
-        location.latitude === eventNode.latitude
+        location.latitude === eventNode.latitude,
     );
 
     if (!duplicate) {
@@ -227,14 +239,13 @@ const processEventDataNode = (eventDataNode: any) => {
 
     const uniqueMaterialsSet = new Set();
     const uniqueMaterials: any = [];
-    let eventId = 1;
 
     //Assign new keys to material table variables
     const keyMapping: { [key: string]: string } = {
       granularity: "Shape/Granularity",
       "shape / granularity": "Shape/Granularity",
       plasticType: "Plastic Type",
-      eventId: "Tracking Event",
+      registrationDate: "Registration Date",
       color: "Color",
       kilo: "Weight (kg)",
       condition: "Condition",
@@ -246,7 +257,10 @@ const processEventDataNode = (eventDataNode: any) => {
     eventDataNode.forEach((eventNode: any) => {
       const materialCombination: any = {
         type: "material",
-        [keyMapping["Tracking Event"] || "Tracking Event"]: eventId++,
+        [keyMapping["registrationDate"]]: eventNode.registrationDate.substring(
+          0,
+          10,
+        ),
       };
 
       eventNode.material.nodes.forEach((materialNode: any) => {
@@ -307,7 +321,7 @@ const processCreditDataNode = (creditDataNode: any) => {
         startIndex: 0,
         endIndex: 0,
       };
-    }
+    },
   );
   //Assign data to media table variables
   mediaFileUrls.value = creditDataNode.mediaFiles.nodes.map(
@@ -317,7 +331,7 @@ const processCreditDataNode = (creditDataNode: any) => {
         url: mediaFileNode.url || "N/A",
         type: "media",
       };
-    }
+    },
   );
 };
 
@@ -452,8 +466,8 @@ const onGeneratePDF = () => {
       issuanceDate.value,
       retiredDate.value,
       creditData.value,
-      ID,
-      applicantDataDescription.value
+      ID as string,
+      applicantDataDescription.value,
     );
     toast.success("Certificate downloaded successfully");
   } catch (e) {
@@ -490,13 +504,15 @@ const onGeneratePDF = () => {
         <div class="horizontal-line"></div>
 
         <div class="nameBox"></div>
-
         <h2 class="presented">PROUDLY PRESENTED TO</h2>
         <h1 class="namePage1" v-if="certificateData">
           {{ certificateData.retiringEntityName }}
         </h1>
         <div class="horizontal-line2"></div>
-        <h2 class="presented">FOR OFFSETTING</h2>
+        <h2 class="presented">
+          FOR MAKING AN IMPACT<br />
+          BY NEUTRALIZING AN IMPRESSIVE
+        </h2>
         <p class="weight" v-if="certificateData">
           {{ certificateData.amount + " KG" }}
         </p>
@@ -614,17 +630,19 @@ const onGeneratePDF = () => {
                   >
                     <td>{{ mediaFile.name }}</td>
                     <td>
-                      <a :href="mediaFile.url" target="_blank">{{
-                        mediaFile.url
-                      }}</a>
+                      <a
+                        :href="ipfsToHttpsProtocol(mediaFile.url)"
+                        target="_blank"
+                        >{{ mediaFile.url }}</a
+                      >
                     </td>
                   </tr>
                 </table>
               </div>
 
               <!-- Material Details Table -->
               <div v-if="category.type === 'material'">
-                <p class="certificateHodler">Material</p>
+                <p class="certificateHodler">Material tracking events</p>
                 <table class="certificateTable">
                   <tr class="tableTitle">
                     <th v-for="header in primaryHeaders" :key="header">
@@ -851,6 +869,7 @@ page {
   font-weight: 400;
   color: #231f20;
   letter-spacing: 3px;
+  text-align: center;
 }
 
 .weight {