feat: add ReturnPurchaseModal component with delete functionality for purchases and localization updates

Author: aeltorio

client/src/components/auth0.tsx

@@ -383,6 +383,41 @@ export const postJsonToSecuredApi = async (
   }
 };
 
+/**
+ * Execute a DELETE request to a secured API endpoint using Auth0 token authentication.
+ * Handles the token acquisition and authorization header setup automatically.
+ * @param {string} url - The URL of the secured API endpoint to delete data from
+ * @param {GetAccessTokenFunction} getAccessTokenFunction - Function to retrieve an access token, typically Auth0's getAccessTokenSilently
+ * @returns {Promise<any>} Promise resolving to the JSON response from the API
+ */
+export const deleteJsonFromSecuredApi = async (
+  url: string,
+  getAccessTokenFunction: GetAccessTokenFunction,
+) => {
+  try {
+    const accessToken = await getAccessTokenFunction({
+      authorizationParams: {
+        audience: import.meta.env.AUTH0_AUDIENCE,
+        scope: import.meta.env.AUTH0_SCOPE,
+      },
+    });
+    const apiResponse = await fetch(url, {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+
+    return await apiResponse.json();
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    throw error;
+  }
+};
+
+
 /**
  * Checks if the user has a specific permission.
  * @param permission - The permission to check for

client/src/components/modals/return-purchase.tsx

@@ -0,0 +1,119 @@
+/**
+ * @copyright Copyright (c) 2024-2025 Ronan LE MEILLAT
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { FormEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useAuth0 } from "@auth0/auth0-react";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalProps,
+} from "@heroui/modal";
+import { Form } from "@heroui/form";
+import { Button } from "@heroui/button";
+import { addToast } from "@heroui/toast";
+
+import { deleteJsonFromSecuredApi } from "../auth0";
+
+export default function ReturnPurchaseModal({
+  purchaseId,
+  onSuccess,
+  ...props
+}: {
+  purchaseId: string;
+  purchaseAmount?: number;
+  onSuccess?: () => void;
+} & ModalProps) {
+  const { t } = useTranslation();
+  const { getAccessTokenSilently } = useAuth0();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    setIsSubmitting(true);
+
+    try {
+      // Use the selected date or today
+
+      const response = await deleteJsonFromSecuredApi(
+        `${import.meta.env.API_BASE_URL}/purchase/${purchaseId}`,
+        getAccessTokenSilently,
+      );
+
+      if (response.success) {
+        addToast({
+          title: t("success"),
+          description: t("refund-processed-successfully"),
+          variant: "solid",
+          timeout: 5000,
+        });
+
+        if (onSuccess) {
+          onSuccess();
+        }
+        props.onClose?.();
+      } else {
+        addToast({
+          title: t("error"),
+          description: t("error-processing-refund"),
+          variant: "solid",
+          timeout: 5000,
+        });
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error processing refund:", error);
+      addToast({
+        title: t("error"),
+        description: t("error-processing-refund"),
+        variant: "solid",
+        timeout: 5000,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      {...props}
+      aria-labelledby="refund-purchase-title"
+      isDismissable={!isSubmitting}
+    >
+      <ModalContent>
+        <ModalHeader>{t("return-item")}</ModalHeader>
+        <ModalBody>
+          <p>{t("are-you-sure-you-want-to-return-this-item")}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Form onSubmit={handleSubmit}>
+            <Button color="primary" type="submit">
+              {t("confirm")}
+            </Button>
+            <Button variant="light" onPress={props.onClose}>
+              {t("cancel")}
+            </Button>
+          </Form>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

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

@@ -154,5 +154,8 @@
   "click-to-see-the-screenshot": "انقر لرؤية لقطة الشاشة",
   "add-a-feedback-to-this-purchase": "أضف ملاحظات إلى هذا الشراء",
   "cancel-this-purchase-and-return-the-item": "إلغاء هذا الشراء وإرجاع العنصر",
-  "return-this-item": "إرجاع هذا العنصر"
+  "return-this-item": "إرجاع هذا العنصر",
+  "are-you-sure-you-want-to-return-this-item": "هل أنت متأكد أنك تريد إرجاع هذا العنصر؟",
+  "confirm": "يتأكد",
+  "return-item": "العنصر الإرجاع"
 }

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

@@ -154,5 +154,8 @@
   "click-to-see-the-screenshot": "Click to see the screenshot",
   "return-this-item": "Return this item",
   "add-a-feedback-to-this-purchase": "Add a feedback to this purchase",
-  "cancel-this-purchase-and-return-the-item": "Cancel this purchase and return the item"
+  "cancel-this-purchase-and-return-the-item": "Cancel this purchase and return the item",
+  "return-item": "Return item",
+  "are-you-sure-you-want-to-return-this-item": "Are you sure you want to return this item ?",
+  "confirm": "Confirm"
 }

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

@@ -154,5 +154,8 @@
   "click-to-see-the-screenshot": "Haga clic para ver la captura de pantalla",
   "add-a-feedback-to-this-purchase": "Agregue un comentario a esta compra",
   "cancel-this-purchase-and-return-the-item": "Cancelar esta compra y devolver el artículo",
-  "return-this-item": "Devuelve este artículo"
+  "return-this-item": "Devuelve este artículo",
+  "are-you-sure-you-want-to-return-this-item": "¿Estás seguro de que quieres devolver este artículo?",
+  "confirm": "Confirmar",
+  "return-item": "Artículo de devolución"
 }

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

@@ -154,5 +154,8 @@
   "click-to-see-the-screenshot": "Cliquez pour voir la capture d'écran",
   "add-a-feedback-to-this-purchase": "Ajouter une rétroaction à cet achat",
   "cancel-this-purchase-and-return-the-item": "Annuler cet achat et retourner l'article",
-  "return-this-item": "Retourner cet article"
+  "return-this-item": "Retourner cet article",
+  "are-you-sure-you-want-to-return-this-item": "Êtes-vous sûr de vouloir retourner cet article?",
+  "confirm": "Confirmer",
+  "return-item": "Retourner un achat"
 }

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

@@ -154,5 +154,8 @@
   "click-to-see-the-screenshot": "לחץ כדי לראות את צילום המסך",
   "add-a-feedback-to-this-purchase": "הוסף משוב לרכישה זו",
   "cancel-this-purchase-and-return-the-item": "בטל רכישה זו והחזיר את הפריט",
-  "return-this-item": "להחזיר פריט זה"
+  "return-this-item": "להחזיר פריט זה",
+  "are-you-sure-you-want-to-return-this-item": "האם אתה בטוח שאתה רוצה להחזיר את הפריט הזה?",
+  "confirm": "לְאַשֵׁר",
+  "return-item": "פריט החזר"
 }

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

@@ -151,5 +151,11 @@
   "oauth-id-format-hint": "OAuth ID格式提示",
   "please-enter-valid-oauth-id": "请输入有效的OAuth ID",
   "api-server": "API服务器",
-  "click-to-see-the-screenshot": "点击查看屏幕截图"
+  "click-to-see-the-screenshot": "点击查看屏幕截图",
+  "add-a-feedback-to-this-purchase": "在此购买中添加反馈",
+  "are-you-sure-you-want-to-return-this-item": "您确定要退还此项目吗？",
+  "cancel-this-purchase-and-return-the-item": "取消此购买并退货",
+  "confirm": "确认",
+  "return-item": "返回项目",
+  "return-this-item": "返回此项目"
 }

client/src/pages/index.tsx

@@ -36,6 +36,7 @@ import RefundPurchaseModal from "@/components/modals/refund-purchase-modal";
 import CreatePurchaseModal from "@/components/modals/create-purchase-modal";
 import { ScreenshotModal } from "@/components/modals/screenshot-modal";
 import ButtonAddFeedbackOrReturn from "@/components/button-add-feedback-or-return";
+import ReturnPurchaseModal from "@/components/modals/return-purchase";
 
 /**
  * Main page of the application displaying purchase data in a tabular format
@@ -53,14 +54,15 @@ import ButtonAddFeedbackOrReturn from "@/components/button-add-feedback-or-retur
 export default function IndexPage() {
   const { t } = useTranslation();
   const { isAuthenticated } = useAuth0();
-  const [createNewPurchase, setCreateNewPurchase] = useState(false);
-  const [refundPurchases, setRefundPurchases] = useState(false);
   const [createFeedbackPurchase, setCreateFeedbackPurchase] = useState(false);
+  const [createNewPurchase, setCreateNewPurchase] = useState(false);
   const [publishFeedbackPurchase, setPublishFeedbackPurchase] = useState(false);
-  const [toggleAllPurchases, setToggleAllPurchases] = useState(false);
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
   const [purchase, setPurchase] = useState({ purchaseId: "", amount: 0 });
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [refundPurchases, setRefundPurchases] = useState(false);
+  const [returnPurchase, setReturnPurchase] = useState(false);
   const [screenshot, setScreenshot] = useState<string | null>(null);
+  const [toggleAllPurchases, setToggleAllPurchases] = useState(false);
 
   // Function to refresh the table
   const refreshTable = () => {
@@ -195,13 +197,17 @@ export default function IndexPage() {
 
   /**
    * Handles opening the return modal for a specific purchase
+   * Show a confirmation Modal to confirm the return
+   * and then call the API to directly set the purchase as refunded
+   * the refund amount is set to the purchase amount
+   * the date is set to the current date
    *
    * @param {string} purchaseId - The ID of the purchase to return
    * @param {number} amount - The purchase amount
    */
   const handleReturnItem = (purchaseId: string, amount: number) => {
     setPurchase({ purchaseId, amount });
-    window.alert("This feature is not implemented yet.");
+    setReturnPurchase(true);
   };
 
   /**
@@ -391,6 +397,17 @@ export default function IndexPage() {
           onClose={() => setScreenshot(null)}
         />
       )}
+
+      {/* Return Modal */}
+      {returnPurchase && (
+        <ReturnPurchaseModal
+          children={undefined}
+          isOpen={returnPurchase}
+          purchaseId={purchase.purchaseId}
+          onClose={() => setReturnPurchase(false)}
+          onSuccess={refreshTable}
+        />
+      )}
     </DefaultLayout>
   );
 }