feat: PDF for ready to refund v0

Author: aeltorio

client/src/locales/base/ar-SA.json

@@ -162,5 +162,6 @@
   "transaction-id": "معرف المعاملة",
   "utilities": "المرافق",
   "oldest-ready-to-refund-pdf": "أقدم استعداد لاسترداد الأموال (PDF)",
-  "oldest-ready-to-refund": "أقدم عمليات الشراء جاهزة لاسترداد الأموال"
+  "oldest-ready-to-refund": "أقدم عمليات الشراء جاهزة لاسترداد الأموال",
+  "oldest-ready-to-refund-description": "قم بإنشاء ملف PDF لأقدم 10 عمليات شراء جاهزة لاستردادها"
 }

client/src/locales/base/en-US.json

@@ -162,5 +162,6 @@
   "optional-transaction-id": "Optional transaction Id",
   "utilities": "Utilities",
   "oldest-ready-to-refund-pdf": "Oldest ready to refund (PDF)",
-  "oldest-ready-to-refund": "Oldest purchases ready for refund"
+  "oldest-ready-to-refund": "Oldest purchases ready for refund",
+  "oldest-ready-to-refund-description": "Generate a PDF for the 10 oldest purchases ready to be refunded"
 }

client/src/locales/base/es-ES.json

@@ -162,5 +162,6 @@
   "transaction-id": "ID de transacción",
   "utilities": "Utilidades",
   "oldest-ready-to-refund-pdf": "Más antiguo listo para reembolsar (PDF)",
-  "oldest-ready-to-refund": "Compras más antiguas listas para el reembolso"
+  "oldest-ready-to-refund": "Compras más antiguas listas para el reembolso",
+  "oldest-ready-to-refund-description": "Genere un PDF para las 10 compras más antiguas listas para ser reembolsadas"
 }

client/src/locales/base/fr-FR.json

@@ -162,5 +162,6 @@
   "transaction-id": "ID de transaction",
   "utilities": "Utilitaires",
   "oldest-ready-to-refund-pdf": "Les plus anciens prêts à être remboursés (PDF)",
-  "oldest-ready-to-refund": "Les plus anciens achats prêts à être remboursés"
+  "oldest-ready-to-refund": "Les plus anciens achats prêts à être remboursés",
+  "oldest-ready-to-refund-description": "Générez un PDF pour les 10 plus anciens achats prêts à être remboursés"
 }

client/src/locales/base/he-IL.json

@@ -162,5 +162,6 @@
   "transaction-id": "מזהה עסקה",
   "utilities": "כלי עזר",
   "oldest-ready-to-refund-pdf": "הוותיק ביותר מוכן להחזר (PDF)",
-  "oldest-ready-to-refund": "רכישות ישנות ביותר מוכנות להחזר"
+  "oldest-ready-to-refund": "רכישות ישנות ביותר מוכנות להחזר",
+  "oldest-ready-to-refund-description": "צור PDF עבור 10 הרכישות העתיקות ביותר שמוכנות להחזיר"
 }

client/src/locales/base/zh-CN.json

@@ -162,5 +162,6 @@
   "transaction-id": "事务ID",
   "utilities": "公用事业",
   "oldest-ready-to-refund-pdf": "最古老的准备退款（PDF）",
-  "oldest-ready-to-refund": "最古老的购买准备退款"
+  "oldest-ready-to-refund": "最古老的购买准备退款",
+  "oldest-ready-to-refund-description": "为准备退款的10个最古老的购买生成PDF"
 }

client/src/pages/oldest-ready-to-refund.tsx

@@ -1,23 +1,84 @@
 import { useTranslation } from "react-i18next";
-import { Page, Text, View, Document, PDFViewer } from "@react-pdf/renderer";
+import { useEffect, useState } from "react";
+import {
+  Image as PDFImage,
+  Page,
+  Text,
+  View,
+  Document,
+  PDFViewer,
+} from "@react-pdf/renderer";
 
+import { useSecuredApi } from "@/components/auth0";
 import { title } from "@/components/primitives";
 import DefaultLayout from "@/layouts/default";
+import { ReadyForRefundPurchase } from "@/types/data";
+
+const MAX_OLDEST_READY_TO_REFUND = 10;
+
+/** Function for converting a webp base64 image url ( data:image/webp;base64,… )to a base64 image containing the image converted to png
+ * @param {string} base64DataUrl - The base64 data URL ( data:image/webp;base64,… ) of the webp image
+ * @returns {Promise<string>} - A promise that resolves to a base64 image url ( data:image/webp;base64,… ) containing the png converted of the webp image
+ */
+function convertWebpToPng(base64DataUrl: string | undefined): Promise<string> {
+  return new Promise((resolve, reject) => {
+    if (!base64DataUrl) {
+      reject(new Error("No base64 data URL provided"));
+
+      return;
+    }
+    const img = new Image();
+
+    img.src = base64DataUrl;
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
+
+      if (ctx) {
+        ctx.drawImage(img, 0, 0);
+        const pngDataUrl = canvas.toDataURL("image/png");
+
+        resolve(pngDataUrl);
+      } else {
+        reject(new Error("Failed to get canvas context"));
+      }
+    };
+    img.onerror = (error) => {
+      reject(error);
+    };
+  });
+}
+
 export default function OldestReadyToRefundPage() {
   const { t } = useTranslation();
-
-  const ReadyToRefundPDF = () => (
-    <Document>
-      <Page size="A4">
-        <View>
-          <Text>Section #1</Text>
-        </View>
-        <View>
-          <Text>Section #2</Text>
-        </View>
-      </Page>
-    </Document>
+  const [readyToRefund, setReadyToRefund] = useState(
+    [] as ReadyForRefundPurchase[],
   );
+  const { getJson } = useSecuredApi();
+  const fetchReadyToRefund = async () => {
+    try {
+      const response = await getJson(
+        `${import.meta.env.API_BASE_URL}/purchases/ready-to-refund?limit=${MAX_OLDEST_READY_TO_REFUND}`,
+      );
+
+      if (response.success) {
+        setReadyToRefund(response.data);
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("Error fetching data:", JSON.stringify(response));
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error fetching data:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchReadyToRefund();
+  }, []);
 
   return (
     <DefaultLayout>
@@ -27,12 +88,33 @@ export default function OldestReadyToRefundPage() {
           <p>{t("oldest-ready-to-refund-description")}</p>
         </div>
       </section>
-      <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-        <div className="inline-block max-w-lg text-center justify-center">
-          <PDFViewer style={{ width: "100%", height: "600px" }}>
-            <ReadyToRefundPDF />
+      <section className="flex flex-col items-center justify-center min-w-full lg:min-w-2xl">
+        {readyToRefund && readyToRefund.length > 0 ? (
+          <PDFViewer className="w-full h-screen">
+            <Document>
+              <Page size="A4">
+                <View>
+                  {readyToRefund.map((purchase) => (
+                    <View key={purchase.id}>
+                      <Text>{`ID: ${purchase.id}`}</Text>
+                      <Text>{`Date: ${purchase.date}`}</Text>
+                      <Text>{`Order: ${purchase.order}`}</Text>
+                      <Text>{`Description: ${purchase.description}`}</Text>
+                      <Text>{`Refunded: ${purchase.refunded}`}</Text>
+                      <Text>{`Amount: ${purchase.amount}`}</Text>
+                      <PDFImage
+                        src={convertWebpToPng(purchase.publicationScreenShot)}
+                        style={{ width: "50%", height: "auto" }}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </Page>
+            </Document>
           </PDFViewer>
-        </div>
+        ) : (
+          <p>{t("no-data-available")}</p>
+        )}
       </section>
     </DefaultLayout>
   );

cloudflare-worker/src/routes/index.ts

@@ -34,6 +34,7 @@ import {
 	testerAllowedSortKeys,
 	TesterSortCriteria,
 	PurchaseSortCriteria,
+	ReadyForRefundPurchase,
 } from "../types/data";
 import { InMemoryDB } from "../db/in-memory-db";
 import { getDatabase } from "../db/db";
@@ -1051,7 +1052,7 @@ const purchaseRoutes = (router: Router, env: Env) => {
 			const { results: purchases, totalCount } = await db.purchases.readyForRefund(testerUuid, pagination);
 
 			// Format response with enhanced data including feedback
-			const formattedPurchases = purchases.map((p) => ({
+			const formattedPurchases:ReadyForRefundPurchase[] = purchases.map((p) => ({
 				id: p.id,
 				date: p.date,
 				order: p.order,

cloudflare-worker/src/types/data.ts

@@ -221,3 +221,58 @@ export type PurchaseSortCriteria = (typeof purchaseAllowedSortKeys)[number];
 // Define valid sort keys for testers
 export const testerAllowedSortKeys = ["uuid", "name"] as const;
 export type TesterSortCriteria = (typeof testerAllowedSortKeys)[number];
+
+/**
+ * Represents a purchase that is ready for refund with feedback and publication data
+ */
+export interface ReadyForRefundPurchase {
+	/**
+	 * Unique identifier of the purchase
+	 */
+	id: string;
+	
+	/**
+	 * Date when the purchase was made
+	 */
+	date: string;
+	
+	/**
+	 * Order number or identifier
+	 */
+	order: string;
+	
+	/**
+	 * Description of the purchased item
+	 */
+	description: string;
+	
+	/**
+	 * Whether the purchase has been refunded
+	 */
+	refunded: boolean;
+	
+	/**
+	 * Amount of the purchase
+	 */
+	amount: number;
+	
+	/**
+	 * Feedback content provided by the tester
+	 */
+	feedback: string;
+	
+	/**
+	 * Date when the feedback was submitted
+	 */
+	feedbackDate: string;
+	
+	/**
+	 * Date when the feedback was published
+	 */
+	publicationDate?: string;
+	
+	/**
+	 * Screenshot of the published feedback
+	 */
+	publicationScreenShot?: string;
+  }