strapi-plugin-payone-provider 1.6.6 → 4.6.9

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/components/paymentActions/ApplePayPanel.jsx

@@ -4,11 +4,30 @@ import PaymentMethodSelector from "./PaymentMethodSelector";
 import AuthorizationForm from "./AuthorizationForm";
 
 const ApplePayOnlyPanel = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  isProcessingPayment,
+  onAuthorization,
   paymentMethod,
+  settings,
+  setGooglePayToken,
   setPaymentMethod,
   captureMode,
   setCaptureMode,
   onNavigateToConfig,
+  isLiveMode,
+  setCardcvc2,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  applePayToken,
+  setApplePayToken,
 }) => {
   return (
     <Box
@@ -42,7 +61,32 @@ const ApplePayOnlyPanel = ({
         captureMode={captureMode}
         setCaptureMode={setCaptureMode}
         onNavigateToConfig={onNavigateToConfig}
-        isLiveMode={false}
+        isLiveMode={isLiveMode}
+      />
+
+      <hr className="payment-divider" />
+
+      <AuthorizationForm
+        paymentAmount={paymentAmount}
+        setPaymentAmount={setPaymentAmount}
+        authReference={authReference}
+        setAuthReference={setAuthReference}
+        isProcessingPayment={isProcessingPayment}
+        onAuthorization={onAuthorization}
+        paymentMethod={paymentMethod}
+        settings={settings}
+        setGooglePayToken={setGooglePayToken}
+        applePayToken={applePayToken}
+        setApplePayToken={setApplePayToken}
+        cardtype={cardtype}
+        setCardtype={setCardtype}
+        cardpan={cardpan}
+        setCardpan={setCardpan}
+        cardexpiredate={cardexpiredate}
+        setCardexpiredate={setCardexpiredate}
+        cardcvc2={cardcvc2}
+        setCardcvc2={setCardcvc2}
+        isLiveMode={isLiveMode}
       />
     </Box>
   );

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

@@ -110,9 +110,12 @@ const App = () => {
             onSave={settings.handleSave}
             onTestConnection={settings.handleTestConnection}
             onInputChange={settings.handleInputChange}
+            onPaymentMethodToggle={settings.handlePaymentMethodToggle}
             filters={transactionHistory.filters}
             onFilterChange={transactionHistory.handleFilterChange}
             onFilterApply={transactionHistory.handleFilterApply}
+            sorting={transactionHistory.sorting}
+            onSort={transactionHistory.handleSort}
             isLoadingHistory={transactionHistory.isLoadingHistory}
             transactionHistory={transactionHistory.transactionHistory}
             paginatedTransactions={transactionHistory.paginatedTransactions}
@@ -121,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/useSettings.js

@@ -41,6 +41,31 @@ const useSettings = () => {
     setSettings((prev) => ({ ...prev, [field]: value }));
   };
 
+  const handlePaymentMethodToggle = async (field, value) => {
+    let updatedSettings;
+    setSettings((prev) => {
+      updatedSettings = { ...prev, [field]: value };
+      return updatedSettings;
+    });
+
+    setIsSaving(true);
+    try {
+      await payoneRequests.updateSettings(updatedSettings);
+      toggleNotification({
+        type: "success",
+        message: "Payment method updated successfully"
+      });
+    } catch (error) {
+      setSettings((prev) => ({ ...prev, [field]: !value }));
+      toggleNotification({
+        type: "warning",
+        message: "Failed to update payment method"
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -103,6 +128,7 @@ const useSettings = () => {
     isTesting,
     testResult,
     handleInputChange,
+    handlePaymentMethodToggle,
     handleSave,
     handleTestConnection
   };

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,13 +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({
-    status: "",
+    search: "",
     request_type: "",
-    txid: "",
-    reference: "",
-    date_from: "",
-    date_to: ""
+    payment_method: "",
+    date_from: getDefaultDateFrom(),
+    date_to: getDefaultDateTo(),
+    status: ""
+  });
+
+  const [sorting, setSorting] = useState({
+    sortBy: null,
+    sortOrder: null // 'asc' or 'desc'
   });
 
   useEffect(() => {
@@ -26,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) {
@@ -47,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);
@@ -60,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 {
@@ -72,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.6",
+  "version": "4.6.9",
   "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",