strapi-plugin-payone-provider 1.6.7 → 4.6.10

package/admin/src/pages/App/components/TransactionHistoryTable/TransactionHistoryTableFilters.jsx

@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  Box,
+  Flex,
+  Select,
+  Option,
+  Button,
+  TextInput,
+  Typography,
+} from "@strapi/design-system";
+import { Search } from "@strapi/icons";
+
+const TransactionHistoryTableFilters = ({
+  filters,
+  onFilterChange,
+  onFilterApply,
+  isLoading,
+}) => {
+  const handleDateFromClick = (e) => {
+    const input = e.target.closest('div')?.querySelector('input[type="date"]');
+    if (input) {
+      input.showPicker?.();
+    }
+  };
+
+  const handleDateToClick = (e) => {
+    const input = e.target.closest('div')?.querySelector('input[type="date"]');
+    if (input) {
+      input.showPicker?.();
+    }
+  };
+  return (
+    <Box marginBottom={2}>
+      <Flex gap={3} marginBottom={3} alignItems="center">
+        <TextInput
+          label="Search"
+          name="search"
+          value={filters?.search || ""}
+          onChange={(e) => onFilterChange("search", e.target.value)}
+          placeholder="Search by Status, Transaction ID, or Reference"
+          style={{ flex: 1, minWidth: "250px" }}
+        />
+        <Select
+          label="Status"
+          name="status"
+          value={filters?.status || ""}
+          onChange={(value) => onFilterChange("status", value)}
+          placeholder="All Statuses"
+          style={{ width: "180px", minWidth: "180px" }}
+        >
+          <Option value="">All Statuses</Option>
+          <Option value="APPROVED">APPROVED</Option>
+          <Option value="PENDING">PENDING</Option>
+          <Option value="ERROR">ERROR</Option>
+          <Option value="CANCELLED">CANCELLED</Option>
+          <Option value="REDIRECT">REDIRECT</Option>
+          <Option value="CREATED">CREATED</Option>
+        </Select>
+        <Select
+          label="Request Type"
+          name="request_type"
+          value={filters?.request_type || ""}
+          onChange={(value) => onFilterChange("request_type", value)}
+          placeholder="Select request type"
+          style={{ width: "220px", minWidth: "220px" }}
+        >
+          <Option value="">All Types</Option>
+          <Option value="preauthorization">Preauthorization</Option>
+          <Option value="authorization">Authorization</Option>
+          <Option value="capture">Capture</Option>
+          <Option value="refund">Refund</Option>
+        </Select>
+      </Flex>
+      <Flex gap={3} marginBottom={3} alignItems="center">
+        <Box onClick={handleDateFromClick} style={{ cursor: "pointer" }}>
+          <TextInput
+            label="Date From"
+            name="date_from"
+            value={filters?.date_from || ""}
+            onChange={(e) => onFilterChange("date_from", e.target.value)}
+            placeholder="YYYY-MM-DD"
+            type="date"
+            style={{ minWidth: "150px" }}
+          />
+        </Box>
+        <Box onClick={handleDateToClick} style={{ cursor: "pointer" }}>
+          <TextInput
+            label="Date To"
+            name="date_to"
+            value={filters?.date_to || ""}
+            onChange={(e) => onFilterChange("date_to", e.target.value)}
+            placeholder="YYYY-MM-DD"
+            type="date"
+            style={{ minWidth: "150px" }}
+          />
+        </Box>
+        <Typography variant="pi" textColor="neutral600" style={{ fontSize: "12px", marginTop: "20px" }}>
+          By default, the last 30 days are shown
+        </Typography>
+      </Flex>
+      <Button
+        variant="default"
+        onClick={onFilterApply}
+        loading={isLoading}
+        startIcon={<Search />}
+      >
+        Apply Filters
+      </Button>
+    </Box>
+  );
+};
+
+export default TransactionHistoryTableFilters;

package/admin/src/pages/App/components/TransactionHistoryTable/TransactionHistoryTablePagination.jsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Flex,
+  Button,
+  TextInput,
+  Typography,
+  Select,
+  Option,
+} from "@strapi/design-system";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from "@strapi/icons";
+
+const TransactionHistoryTablePagination = ({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  isLoading,
+}) => {
+  const [pageInput, setPageInput] = useState(currentPage.toString());
+
+  // Update input when currentPage changes externally
+  React.useEffect(() => {
+    setPageInput(currentPage.toString());
+  }, [currentPage]);
+
+  const handlePageInputChange = (e) => {
+    const value = e.target.value;
+    // Allow empty input or valid numbers
+    if (value === "" || /^\d+$/.test(value)) {
+      setPageInput(value);
+    }
+  };
+
+  const handlePageInputBlur = () => {
+    const pageNum = parseInt(pageInput, 10);
+    if (pageNum && pageNum >= 1 && pageNum <= totalPages) {
+      onPageChange(pageNum);
+    } else {
+      // Reset to current page if invalid
+      setPageInput(currentPage.toString());
+    }
+  };
+
+  const handlePageInputKeyPress = (e) => {
+    if (e.key === "Enter") {
+      handlePageInputBlur();
+    }
+  };
+
+  const goToFirstPage = () => {
+    if (currentPage > 1) {
+      onPageChange(1);
+    }
+  };
+
+  const goToLastPage = () => {
+    if (currentPage < totalPages) {
+      onPageChange(totalPages);
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const startItem = totalItems > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  return (
+    <Box>
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        gap={4}
+        wrap="wrap"
+      >
+        <Flex alignItems="center" gap={2}>
+          <Typography variant="pi" textColor="neutral600">
+            {totalItems > 0
+              ? `Showing ${startItem}-${endItem} of ${totalItems} transactions`
+              : `No transactions`}
+          </Typography>
+          <Flex alignItems="center" gap={2}>
+            <Typography variant="pi" textColor="neutral600">
+              Page size:
+            </Typography>
+            <Select
+              value={pageSize.toString()}
+              onChange={(value) => onPageSizeChange(parseInt(value, 10))}
+              disabled={isLoading}
+              style={{ width: "80px", minWidth: "80px" }}
+            >
+              <Option value="10">10</Option>
+              <Option value="20">20</Option>
+              <Option value="30">30</Option>
+              <Option value="50">50</Option>
+              <Option value="100">100</Option>
+            </Select>
+          </Flex>
+        </Flex>
+
+        {totalPages > 1 && (
+          <Flex alignItems="center" gap={2}>
+            <Button
+              variant="tertiary"
+              onClick={goToFirstPage}
+              disabled={currentPage === 1 || isLoading}
+              startIcon={<ChevronLeft />}
+              size="S"
+            >
+              First
+            </Button>
+
+            <Button
+              variant="tertiary"
+              onClick={goToPreviousPage}
+              disabled={currentPage === 1 || isLoading}
+              startIcon={<ArrowLeft />}
+              size="S"
+            >
+              Prev
+            </Button>
+
+            <Flex alignItems="center" gap={2}>
+              <Typography variant="pi" textColor="neutral600">
+                Page
+              </Typography>
+              <TextInput
+                value={pageInput}
+                onChange={handlePageInputChange}
+                onBlur={handlePageInputBlur}
+                onKeyPress={handlePageInputKeyPress}
+                disabled={isLoading}
+                aria-label="Page number"
+                style={{ width: "60px", textAlign: "center" }}
+              />
+              <Typography variant="pi" textColor="neutral600">
+                of {totalPages}
+              </Typography>
+            </Flex>
+
+            <Button
+              variant="tertiary"
+              onClick={goToNextPage}
+              disabled={currentPage === totalPages || isLoading}
+              endIcon={<ArrowRight />}
+              size="S"
+            >
+              Next
+            </Button>
+
+            <Button
+              variant="tertiary"
+              onClick={goToLastPage}
+              disabled={currentPage === totalPages || isLoading}
+              endIcon={<ChevronRight />}
+              size="S"
+            >
+              Last
+            </Button>
+          </Flex>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default TransactionHistoryTablePagination;
+

package/admin/src/pages/App/components/TransactionHistoryTable/index.jsx

@@ -0,0 +1,225 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Typography,
+  Button,
+  Flex,
+} from "@strapi/design-system";
+import { User, File, ArrowUp, ArrowDown } from "@strapi/icons";
+import StatusBadge from "../StatusBadge";
+import CustomerInfoPopover from "../CustomerInfoPopover";
+import RawDataPopover from "../RawDataPopover";
+import TransactionHistoryTableFilters from "./TransactionHistoryTableFilters";
+import TransactionHistoryTablePagination from "./TransactionHistoryTablePagination";
+
+const TransactionHistoryTable = ({
+  transactions,
+  isLoading,
+  filters,
+  onFilterChange,
+  onFilterApply,
+  sorting,
+  onSort,
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+}) => {
+  const SortableHeader = ({ column, label, sortable = true }) => {
+    const isActive = sorting?.sortBy === column;
+    const sortOrder = isActive ? sorting?.sortOrder : null;
+
+    const handleClick = () => {
+      if (sortable && onSort) {
+        onSort(column);
+      }
+    };
+
+    return (
+      <Th>
+        <Flex
+          alignItems="center"
+          gap={2}
+          onClick={handleClick}
+          style={{ cursor: sortable ? "pointer" : "default" }}
+        >
+          <Typography fontWeight="bold" textColor="primary500">
+            {label}
+          </Typography>
+          {sortable && (
+            <Box style={{ display: "flex", alignItems: "center" }}>
+              {sortOrder === "asc" && <ArrowUp size={8} />}
+              {sortOrder === "desc" && <ArrowDown size={8} />}
+              {!isActive && (
+                <Box style={{ opacity: 0.3 }}>
+                  <ArrowUp size={8} />
+                </Box>
+              )}
+            </Box>
+          )}
+        </Flex>
+      </Th>
+    );
+  };
+  const getCardTypeName = (cardtype) => {
+    switch (cardtype) {
+      case "V":
+        return "Visa";
+      case "M":
+        return "MasterCard";
+      default:
+        return cardtype || "";
+    }
+  };
+
+  const getPaymentMethodName = (clearingtype, wallettype, cardtype) => {
+    switch (clearingtype) {
+      case "cc":
+        const cardTypeName = getCardTypeName(cardtype);
+        return cardTypeName ? `CC / ${cardTypeName}` : "Credit Card";
+      case "sb":
+        return "Online Banking";
+      case "wlt":
+        return wallettype === "PPE" ? "PayPal" : "Wallet";
+      case "elv":
+        return "Direct Debit (SEPA)";
+      default:
+        return "Unknown";
+    }
+  };
+
+  const formatAmount = (amount, currency) => {
+    return `${(amount / 100).toFixed(2)} ${currency}`;
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleString("de-DE", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  return (
+    <Box>
+      {/* Table Filters */}
+      <TransactionHistoryTableFilters
+        filters={filters}
+        onFilterChange={onFilterChange}
+        onFilterApply={onFilterApply}
+        isLoading={isLoading}
+      />
+
+
+      <Box style={{ maxHeight: "600px", overflow: "auto", marginBottom: "1rem" }}>
+        <Table colCount={6} rowCount={transactions.length}>
+          <Thead>
+            <Tr>
+              <SortableHeader column="amount" label="Amount" />
+              <SortableHeader column="created_at" label="Created At" />
+              <SortableHeader column="status" label="Status" />
+              <SortableHeader column="reference" label="Reference" />
+              <SortableHeader column="method" label="Method" />
+              <Th>
+                <Typography fontWeight="bold" textColor="primary500">
+                  Actions
+                </Typography>
+              </Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {transactions.length === 0 && !isLoading ? (
+              <Tr>
+                <Td colSpan={6}>
+                  <Box padding={6}>
+                    <Typography textAlign="center" textColor="neutral600">
+                      No transactions found
+                    </Typography>
+                  </Box>
+                </Td>
+              </Tr>
+            ) : (
+              transactions.map((transaction) => (
+                <Tr key={transaction.id}>
+                  <Td>
+                    <Typography variant="pi" fontWeight="bold" textColor="primary600">
+                      {formatAmount(transaction.amount, transaction.currency)}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography variant="pi" textColor="neutral800">
+                      {formatDate(transaction.created_at)}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <StatusBadge status={transaction.status} transaction={transaction} />
+                  </Td>
+                  <Td>
+                    <Typography variant="pi" textColor="neutral800">
+                      {transaction.reference}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Typography variant="pi" textColor="neutral800">
+                      {getPaymentMethodName(
+                        transaction.raw_request?.clearingtype,
+                        transaction.raw_request?.wallettype,
+                        transaction.raw_request?.cardtype
+                      )}
+                    </Typography>
+                  </Td>
+                  <Td>
+                    <Flex gap={2} justifyContent="flex-start">
+                      <CustomerInfoPopover transaction={transaction}>
+                        <Button
+                          variant="secondary"
+                          size="S"
+                          startIcon={<User />}
+                        >
+                          View Customer
+                        </Button>
+                      </CustomerInfoPopover>
+                      <RawDataPopover transaction={transaction}>
+                        <Button
+                          variant="secondary"
+                          size="S"
+                          startIcon={<File />}
+                        >
+                          View Raw Data
+                        </Button>
+                      </RawDataPopover>
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))
+            )}
+          </Tbody>
+        </Table>
+      </Box>
+
+      {/* Pagination */}
+      <TransactionHistoryTablePagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        pageSize={pageSize}
+        totalItems={totalItems}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default TransactionHistoryTable;
+

package/admin/src/pages/App/index.jsx

@@ -114,6 +114,8 @@ const App = () => {
             filters={transactionHistory.filters}
             onFilterChange={transactionHistory.handleFilterChange}
             onFilterApply={transactionHistory.handleFilterApply}
+            sorting={transactionHistory.sorting}
+            onSort={transactionHistory.handleSort}
             isLoadingHistory={transactionHistory.isLoadingHistory}
             transactionHistory={transactionHistory.transactionHistory}
             paginatedTransactions={transactionHistory.paginatedTransactions}
@@ -122,6 +124,7 @@ const App = () => {
             pageSize={transactionHistory.pageSize}
             onRefresh={transactionHistory.loadTransactionHistory}
             onPageChange={transactionHistory.handlePageChange}
+            onPageSizeChange={transactionHistory.handlePageSizeChange}
             selectedTransaction={transactionHistory.selectedTransaction}
             onTransactionSelect={transactionHistory.handleTransactionSelect}
             paymentActions={paymentActions}

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

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useNotification } from "@strapi/helper-plugin";
 import payoneRequests from "../utils/api";
 
-const PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE = 10;
 
 const useTransactionHistory = () => {
   const toggleNotification = useNotification();
@@ -10,12 +10,32 @@ const useTransactionHistory = () => {
   const [isLoadingHistory, setIsLoadingHistory] = useState(false);
   const [selectedTransaction, setSelectedTransaction] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  // Calculate default dates
+  const getDefaultDateFrom = () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 30);
+    return date.toISOString().split('T')[0];
+  };
+
+  const getDefaultDateTo = () => {
+    const date = new Date();
+    date.setDate(date.getDate() + 1); // Add 1 day to include today's transactions
+    return date.toISOString().split('T')[0];
+  };
+
   const [filters, setFilters] = useState({
     search: "",
     request_type: "",
     payment_method: "",
-    date_from: "",
-    date_to: ""
+    date_from: getDefaultDateFrom(),
+    date_to: getDefaultDateTo(),
+    status: ""
+  });
+
+  const [sorting, setSorting] = useState({
+    sortBy: null,
+    sortOrder: null // 'asc' or 'desc'
   });
 
   useEffect(() => {
@@ -25,7 +45,12 @@ const useTransactionHistory = () => {
   const loadTransactionHistory = async () => {
     setIsLoadingHistory(true);
     try {
-      const result = await payoneRequests.getTransactionHistory(filters);
+      const params = { ...filters };
+      if (sorting.sortBy && sorting.sortOrder) {
+        params.sort_by = sorting.sortBy;
+        params.sort_order = sorting.sortOrder;
+      }
+      const result = await payoneRequests.getTransactionHistory(params);
       setTransactionHistory(result.data || []);
       setCurrentPage(1);
     } catch (error) {
@@ -46,6 +71,37 @@ const useTransactionHistory = () => {
     loadTransactionHistory();
   };
 
+  const handleSort = (column) => {
+    setSorting((prev) => {
+      // If clicking the same column, cycle through: null -> asc -> desc -> null
+      if (prev.sortBy === column) {
+        if (!prev.sortOrder) {
+          return { sortBy: column, sortOrder: "asc" };
+        } else if (prev.sortOrder === "asc") {
+          return { sortBy: column, sortOrder: "desc" };
+        } else {
+          return { sortBy: null, sortOrder: null };
+        }
+      } else {
+        // If clicking a different column, reset and set new column to asc
+        return { sortBy: column, sortOrder: "asc" };
+      }
+    });
+  };
+
+  // Reload when sorting changes (but not on initial mount)
+  const [isInitialMount, setIsInitialMount] = useState(true);
+  
+  useEffect(() => {
+    if (isInitialMount) {
+      setIsInitialMount(false);
+      return;
+    }
+    // Only reload if sorting is actually set or cleared
+    loadTransactionHistory();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sorting.sortBy, sorting.sortOrder]);
+
   const handleTransactionSelect = (transaction) => {
     if (selectedTransaction?.id === transaction?.id) {
       setSelectedTransaction(null);
@@ -59,10 +115,16 @@ const useTransactionHistory = () => {
     setSelectedTransaction(null);
   };
 
+  const handlePageSizeChange = (newPageSize) => {
+    setPageSize(newPageSize);
+    setCurrentPage(1); // Reset to first page when page size changes
+    setSelectedTransaction(null);
+  };
+
   // Pagination calculations
-  const totalPages = Math.ceil(transactionHistory.length / PAGE_SIZE);
-  const startIndex = (currentPage - 1) * PAGE_SIZE;
-  const endIndex = startIndex + PAGE_SIZE;
+  const totalPages = Math.ceil(transactionHistory.length / pageSize);
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
   const paginatedTransactions = transactionHistory.slice(startIndex, endIndex);
 
   return {
@@ -71,13 +133,16 @@ const useTransactionHistory = () => {
     isLoadingHistory,
     selectedTransaction,
     filters,
+    sorting,
     currentPage,
     totalPages,
-    pageSize: PAGE_SIZE,
+    pageSize,
     handleFilterChange,
     handleFilterApply,
+    handleSort,
     handleTransactionSelect,
     handlePageChange,
+    handlePageSizeChange,
     loadTransactionHistory
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "1.6.7",
+  "version": "4.6.10",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [
@@ -12,7 +12,8 @@
   "dependencies": {
     "apple-pay-button": "^1.2.1",
     "axios": "^1.6.3",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "@uiw/react-json-view": "^2.0.0-alpha.40"
   },
   "devDependencies": {
     "react": "^18.2.0",