strapi-plugin-payone-provider 5.6.13 → 5.6.14

package/admin/src/pages/App/components/transaction-history/FiltersPanel.jsx

@@ -1,8 +1,12 @@
-import { Box, Button } from "@strapi/design-system";
+import * as React from "react";
+import { Box } from "@strapi/design-system";
 import RenderInput from "../RenderInput";
-import { ArrowsCounterClockwise } from "@strapi/icons";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
+import ImportExportBar from "./ImportExportBar";
+
+const FiltersPanel = ({ filters, handleFiltersChange , loadTransactionHistory}) => {
+  const { t } = usePluginTranslations();
 
-const FiltersPanel = ({ filters, handleFiltersChange }) => {
   const handleReset = () => {
     handleFiltersChange({
       search: "",
@@ -14,73 +18,72 @@ const FiltersPanel = ({ filters, handleFiltersChange }) => {
     });
   };
 
-  const filterOptions = [
-    {
-      name: "search",
-      label: "Search",
-      type: "text",
-      inputType: "textInput",
-      placeholder: "Search by reference or transaction ID",
-      tooltipContent:
-        "Search by reference or transaction ID to filter transactions",
-      flex: 1,
-    },
-    {
-      name: "status",
-      label: "Status",
-      type: "enumeration",
-      inputType: "select",
-      placeholder: "All Statuses",
-      tooltipContent:
-        "Filter transactions by their status (Approved, Error, Redirect, Invalid, Pending, Cancelled)",
-      options: [
-        { value: "", label: "All Statuses" },
-        { value: "APPROVED", label: "Approved" },
-        { value: "ERROR", label: "Error" },
-        { value: "REDIRECT", label: "Redirect" },
-        { value: "INVALID", label: "Invalid" },
-        { value: "PENDING", label: "Pending" },
-        { value: "CANCELLED", label: "Cancelled" },
-      ],
-      flex: 1,
-    },
-    {
-      name: "request_type",
-      label: "Request Type",
-      type: "enumeration",
-      inputType: "select",
-      placeholder: "All Types",
-      tooltipContent:
-        "Filter transactions by request type (Preauthorization, Authorization, Capture, Refund)",
-      options: [
-        { value: "", label: "All Types" },
-        { value: "preauthorization", label: "Preauthorization" },
-        { value: "authorization", label: "Authorization" },
-        { value: "capture", label: "Capture" },
-        { value: "refund", label: "Refund" },
-      ],
-      flex: 1,
-    },
-    {
-      name: "payment_method",
-      label: "Payment Method",
-      type: "enumeration",
-      inputType: "select",
-      placeholder: "All Methods",
-      tooltipContent:
-        "Filter transactions by payment method (Credit Card, PayPal, Google Pay, Apple Pay, Sofort Banking, SEPA Direct Debit)",
-      options: [
-        { value: "", label: "All Methods" },
-        { value: "credit_card", label: "Credit Card" },
-        { value: "paypal", label: "PayPal" },
-        { value: "google_pay", label: "Google Pay" },
-        { value: "apple_pay", label: "Apple Pay" },
-        { value: "sofort", label: "Sofort Banking" },
-        { value: "sepa", label: "SEPA Direct Debit" },
-      ],
-      flex: 1,
-    },
-  ];
+  const filterOptions = React.useMemo(
+    () => [
+      {
+        name: "search",
+        label: t("filters.search", "Search"),
+        type: "text",
+        inputType: "textInput",
+        placeholder: t("filters.searchPlaceholder", "Search by reference or transaction ID"),
+        tooltipContent: t("filters.searchTooltip", "Search by reference or transaction ID to filter transactions"),
+        flex: 1,
+      },
+      {
+        name: "status",
+        label: t("filters.status", "Status"),
+        type: "enumeration",
+        inputType: "select",
+        placeholder: "",
+        tooltipContent: t("filters.statusTooltip", "Filter transactions by their status (Approved, Error, Redirect, Invalid, Pending, Cancelled)"),
+        options: [
+          { value: "", label: t("filters.allStatuses", "All Statuses") },
+          { value: "APPROVED", label: t("status.approved", "Approved") },
+          { value: "ERROR", label: t("status.error", "Error") },
+          { value: "REDIRECT", label: t("status.redirect", "Redirect") },
+          { value: "INVALID", label: t("status.invalid", "Invalid") },
+          { value: "PENDING", label: t("status.pending", "Pending") },
+          { value: "CANCELLED", label: t("status.cancelled", "Cancelled") },
+        ],
+        flex: 1,
+      },
+      {
+        name: "request_type",
+        label: t("filters.requestType", "Request Type"),
+        type: "enumeration",
+        inputType: "select",
+        placeholder: t("filters.allTypes", "All Types"),
+        tooltipContent: t("filters.requestTypeTooltip", "Filter transactions by request type (Preauthorization, Authorization, Capture, Refund)"),
+        options: [
+          { value: "", label: t("filters.allTypes", "All Types") },
+          { value: "preauthorization", label: t("requestType.preauthorization", "Preauthorization") },
+          { value: "authorization", label: t("requestType.authorization", "Authorization") },
+          { value: "capture", label: t("requestType.capture", "Capture") },
+          { value: "refund", label: t("requestType.refund", "Refund") },
+        ],
+        flex: 1,
+      },
+      {
+        name: "payment_method",
+        label: t("filters.paymentMethod", "Payment Method"),
+        type: "enumeration",
+        inputType: "select",
+        placeholder: t("filters.allMethods", "All Methods"),
+        tooltipContent: t("filters.paymentMethodTooltip", "Filter transactions by payment method (Credit Card, PayPal, Google Pay, Apple Pay, Sofort Banking, SEPA Direct Debit)"),
+        options: [
+          { value: "", label: t("filters.allMethods", "All Methods") },
+          { value: "credit_card", label: t("paymentMethod.creditCard", "Credit Card") },
+          { value: "paypal", label: t("paymentMethod.paypal", "PayPal") },
+          { value: "google_pay", label: t("paymentMethod.googlePay", "Google Pay") },
+          { value: "apple_pay", label: t("paymentMethod.applePay", "Apple Pay") },
+          { value: "sofort", label: t("paymentMethod.sofort", "Sofort Banking") },
+          { value: "sepa", label: t("paymentMethod.sepa", "SEPA Direct Debit") },
+        ],
+        flex: 1,
+      },
+    ],
+    [t]
+  );
 
   return (
     <Box
@@ -88,7 +91,7 @@ const FiltersPanel = ({ filters, handleFiltersChange }) => {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
         gap: "16px",
-        alignItems: "end",
+        alignItems:"start"
       }}
     >
       {filterOptions.map((filter) => (
@@ -117,8 +120,8 @@ const FiltersPanel = ({ filters, handleFiltersChange }) => {
         value={filters.date_from || ""}
         onChange={(e) => handleFiltersChange({ date_from: e.target.value })}
         inputType="dateInput"
-        label="Date From"
-        tooltipContent="Filter transactions from this date onwards. Select the starting date for the date range filter."
+        label={t("filters.dateFrom", "Date From")}
+        tooltipContent={t("filters.dateFromTooltip", "Filter transactions from this date onwards. Select the starting date for the date range filter.")}
       />
 
       <RenderInput
@@ -126,19 +129,15 @@ const FiltersPanel = ({ filters, handleFiltersChange }) => {
         value={filters.date_to || ""}
         onChange={(e) => handleFiltersChange({ date_to: e.target.value })}
         inputType="dateInput"
-        label="Date To"
-        tooltipContent="Filter transactions up to this date. Select the ending date for the date range filter."
+        label={t("filters.dateTo", "Date To")}
+        tooltipContent={t("filters.dateToTooltip", "Filter transactions up to this date. Select the ending date for the date range filter.")}
       />
 
-      <Button
-        variant="secondary"
-        onClick={handleReset}
-        startIcon={<ArrowsCounterClockwise />}
-        size="S"
-        maxWidth="100px"
-      >
-        Reset
-      </Button>
+      <ImportExportBar
+        filters={filters}
+        handleReset={handleReset}
+        onImportDone={loadTransactionHistory}
+      />
     </Box>
   );
 };

package/admin/src/pages/App/components/transaction-history/HistoryPanel.jsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { Box, Flex, Typography, Divider } from "@strapi/design-system";
 import TransactionTable from "./TransactionTable";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const HistoryPanel = () => {
+  const { t } = usePluginTranslations();
   return (
     <Box
       className="payment-container"
@@ -13,21 +15,11 @@ const HistoryPanel = () => {
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
         <Box>
-          <Typography
-            variant="beta"
-            as="h2"
-            className="payment-title"
-            style={{ fontSize: "20px", marginBottom: "4px" }}
-          >
-            Transaction Management
+          <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: "20px", marginBottom: "4px" }}>
+            {t("history.title", "Transaction Management")}
           </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            className="payment-subtitle"
-            style={{ fontSize: "14px", marginTop: "4px" }}
-          >
-            View and filter all payment transactions processed through Payone
+          <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: "14px", marginTop: "4px" }}>
+            {t("history.subtitle", "View and filter all payment transactions processed through Payone")}
           </Typography>
         </Box>
 
@@ -37,9 +29,7 @@ const HistoryPanel = () => {
 
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">
-            Note: This shows all Payone transactions processed through this
-            plugin. Transactions are automatically logged with detailed
-            request/response data.
+            {t("history.note", "This shows all Payone transactions processed through this plugin. Transactions are automatically logged with detailed request/response data.")}
           </Typography>
         </Box>
       </Flex>

package/admin/src/pages/App/components/transaction-history/ImportExportBar.jsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { Box, Button, Flex } from "@strapi/design-system";
+import { ArrowsCounterClockwise, Download, Upload } from "@strapi/icons";
+import { useNotification } from "@strapi/strapi/admin";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
+import usePayoneRequests from "../../../utils/api";
+
+const ImportExportBar = ({ filters, sortBy = "createdAt", sortOrder = "desc", onImportDone, handleReset }) => {
+  const { t } = usePluginTranslations();
+  const { toggleNotification } = useNotification();
+  const { exportTransactions, importTransactions } = usePayoneRequests();
+  const [exporting, setExporting] = React.useState(false);
+  const [importing, setImporting] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+
+  const handleExport = async (format) => {
+    setExporting(true);
+    try {
+      const res = await exportTransactions({
+        format,
+        filters,
+        sort_by: sortBy,
+        sort_order: sortOrder,
+      });
+      const blob = res?.data ?? res;
+      if (!(blob instanceof Blob)) {
+        throw new Error("Invalid export response");
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `transactions.${format}`;
+      a.click();
+      URL.revokeObjectURL(url);
+      toggleNotification({ type: "success", message: t("export.success", "Export completed") });
+    } catch (err) {
+      console.error("Export failed:", err);
+      toggleNotification({ type: "danger", message: t("export.error", "Export failed") });
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImportFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setImporting(true);
+    try {
+      const text = await new Promise((resolve, reject) => {
+        const r = new FileReader();
+        r.onload = () => resolve(r.result ?? "");
+        r.onerror = reject;
+        r.readAsText(file, "utf-8");
+      });
+      const ext = (file.name || "").toLowerCase();
+      let payload;
+      if (ext.endsWith(".csv")) {
+        payload = { format: "csv", data: text };
+      } else {
+        const parsed = JSON.parse(text);
+        payload = Array.isArray(parsed) ? parsed : (parsed?.data ?? []);
+        if (!Array.isArray(payload)) payload = [];
+        payload = { data: payload };
+      }
+      const res = await importTransactions(payload);
+      const data = res?.data ?? res;
+      const imported = data?.imported ?? 0;
+      const failed = data?.failed ?? 0;
+      if (typeof onImportDone === "function") onImportDone();
+      if (failed > 0) {
+        toggleNotification({
+          type: "warning",
+          message: t("import.partial", "Import completed: {{imported}} imported, {{failed}} failed.", { imported, failed }),
+        });
+      } else {
+        toggleNotification({
+          type: "success",
+          message: t("import.success", "Imported  transactions.", { count: imported }),
+        });
+      }
+    } catch (err) {
+      console.error("Import failed:", err);
+      toggleNotification({ type: "danger", message: t("import.error", "Import failed") });
+    } finally {
+      setImporting(false);
+      e.target.value = "";
+    }
+  };
+
+  return (
+    <Flex gap={2}  width={"100%"}>
+      <Box>
+        <Button
+          variant="secondary"
+          size="S"
+          startIcon={<Download />}
+          loading={exporting}
+          onClick={() => handleExport("json")}
+          minWidth={"140px"}
+        >
+          {t("export.json", "Export JSON")}
+        </Button>
+      </Box>
+      {/* <Box>
+        <Button
+          variant="secondary"
+          size="S"
+          startIcon={<Download />}
+          loading={exporting}
+          onClick={() => handleExport("csv")}
+          minWidth={"140px"}
+        >
+          {t("export.csv", "Export CSV")}
+        </Button>
+      </Box> */}
+      <Box>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json,.csv,application/json,text/csv"
+          style={{ display: "none" }}
+          onChange={handleImportFile}
+        />
+        <Button
+          variant="secondary"
+          size="S"
+          startIcon={<Upload/>}
+          loading={importing}
+          minWidth={"140px"}
+          onClick={handleImportClick}
+        >
+          {t("import.button", "Import")}
+        </Button>
+      </Box>
+
+      <Button
+        variant="secondary"
+        onClick={handleReset}
+        startIcon={<ArrowsCounterClockwise />}
+        size="S"
+        maxWidth="100px"
+      >
+        {t("filters.reset", "Reset")}
+      </Button>
+    </Flex>
+  );
+};
+
+export default ImportExportBar;

package/admin/src/pages/App/components/transaction-history/TransactionTable.jsx

@@ -11,8 +11,10 @@ import TransactionDetails from "./details/TransactionDetails";
 import FiltersPanel from "./FiltersPanel";
 import useTransactionHistory from "../../../hooks/useTransactionHistory";
 import StatusBadge from "../StatusBadge";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
 
 const TransactionTable = () => {
+  const { t } = usePluginTranslations();
   const {
     transactions,
     isLoadingHistory,
@@ -21,25 +23,30 @@ const TransactionTable = () => {
     filters,
     handleFiltersChange,
     pagination,
+    loadTransactionHistory,
   } = useTransactionHistory();
 
-  const headers = [
-    { name: "txid", label: "TxId" },
-    { name: "reference", label: "Reference" },
-    { name: "amount", label: "Amount" },
-    { name: "paymentMethod", label: "Payment Method" },
-    { name: "type", label: "Type" },
-    { name: "status", label: "Status" },
-    { name: "created_at", label: "Created At" },
-    { name: "updated_at", label: "Updated At" },
-    { name: "details", label: "Details" },
-  ];
+  const headers = React.useMemo(
+    () => [
+      { name: "txid", label: t("table.txid", "TxId") },
+      { name: "reference", label: t("table.reference", "Reference") },
+      { name: "amount", label: t("table.amount", "Amount") },
+      { name: "paymentMethod", label: t("table.paymentMethod", "Payment Method") },
+      { name: "type", label: t("table.type", "Type") },
+      { name: "status", label: t("table.status", "Status") },
+      { name: "created_at", label: t("table.createdAt", "Created At") },
+      { name: "updated_at", label: t("table.updatedAt", "Updated At") },
+      { name: "details", label: t("table.details", "Details") },
+    ],
+    [t]
+  );
 
   return (
     <Flex direction="column" alignItems="stretch" gap={4} minHeight={"800px"}>
       <FiltersPanel
         filters={filters}
         handleFiltersChange={handleFiltersChange}
+        loadTransactionHistory={loadTransactionHistory}
       />
 
       <Box>
@@ -69,12 +76,12 @@ const TransactionTable = () => {
                       <Table.Row>
                         <Table.Cell>
                           <Typography variant="pi" textColor="neutral600">
-                            {transaction.txid || "N/A"}
+                            {transaction.txid || t("table.na", "N/A")}
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>
                           <Typography variant="pi" fontWeight="medium">
-                            {transaction.reference || "N/A"}
+                            {transaction.reference || t("table.na", "N/A")}
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>
@@ -95,7 +102,7 @@ const TransactionTable = () => {
                         </Table.Cell>
                         <Table.Cell>
                           <Typography variant="pi" fontWeight="semiBold">
-                            {transaction.request_type || "N/A"}
+                            {transaction.request_type || t("table.na", "N/A")}
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>
@@ -125,7 +132,7 @@ const TransactionTable = () => {
                               )
                             }
                           >
-                            {isSelected ? "Hide" : "Details"}
+                            {isSelected ? t("table.hide", "Hide") : t("table.details", "Details")}
                           </Button>
                         </Table.Cell>
                       </Table.Row>

package/admin/src/pages/hooks/usePluginTranslations.js

@@ -0,0 +1,12 @@
+/**
+ * Plugin translations. Uses react-intl from Strapi admin (do NOT install react-intl).
+ */
+import { useIntl } from 'react-intl';
+import pluginId from '../../pluginId';
+
+export function usePluginTranslations() {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage = '') =>
+    formatMessage({ id: `${pluginId}.${id}`, defaultMessage });
+  return { t, formatMessage };
+}

package/admin/src/pages/utils/api.js

@@ -37,6 +37,31 @@ const usePayoneRequests = () => {
     );
   };
 
+  const exportTransactions = (params = {}) => {
+    const queryParams = new URLSearchParams();
+    const format = params.format === "csv" ? "csv" : "json";
+    queryParams.append("format", format);
+    if (params.sort_by) queryParams.append("sort_by", params.sort_by);
+    if (params.sort_order) queryParams.append("sort_order", params.sort_order);
+    if (params.filters && typeof params.filters === "object") {
+      Object.keys(params.filters).forEach((key) => {
+        const value = params.filters[key];
+        const v = value == null ? "" : String(value).trim();
+        if (v !== "" && v.toLowerCase() !== "all") {
+          queryParams.append(`filters[${key}]`, String(value));
+        }
+      });
+    }
+    const queryString = queryParams.toString();
+    return get(`/${pluginId}/transactions/export?${queryString}`);
+  };
+
+  const importTransactions = (payload) => {
+    return post(`/${pluginId}/transactions/import`, payload, {
+      headers: { "Content-Type": "application/json" },
+    });
+  };
+
   const testConnection = () =>
     post(`/${pluginId}/test-connection`);
 
@@ -59,6 +84,8 @@ const usePayoneRequests = () => {
     getSettings,
     updateSettings,
     getTransactionHistory,
+    exportTransactions,
+    importTransactions,
     testConnection,
     preauthorization,
     authorization,