strapi-plugin-payone-provider 4.6.10 → 4.6.12

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

@@ -0,0 +1,49 @@
+import { Box, Divider, Flex, Typography } from "@strapi/design-system";
+import TransactionTable from "./TransactionTable";
+
+const HistoryPanel = () => {
+  return (
+    <Box
+      className="payment-container"
+      paddingTop={8}
+      paddingBottom={8}
+      paddingLeft={8}
+      paddingRight={8}
+    >
+      <Flex direction="column" alignItems="stretch" gap={8}>
+        <Box>
+          <Typography
+            variant="beta"
+            as="h2"
+            className="payment-title"
+            style={{ fontSize: "20px", marginBottom: "4px" }}
+          >
+            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>
+        </Box>
+
+        <Divider />
+
+        <TransactionTable />
+
+        <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.
+          </Typography>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default HistoryPanel;

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

@@ -0,0 +1,199 @@
+import React from "react";
+import { Box, Button, Flex, Typography, Tr, Td } from "@strapi/design-system";
+import { Table } from "@strapi/helper-plugin";
+import { ChevronDown, ChevronUp, ArrowUp, ArrowDown } from "@strapi/icons";
+
+import StatusBadge from "../StatusBadge";
+import FiltersPanel from "./FiltersPanel";
+import TransactionDetails from "./details/TransactionDetails";
+import TransactionTablePagination from "./TransactionTablePagination";
+import useTransactionHistory from "../../../hooks/useTransactionHistory";
+import {
+  formatAmount,
+  formatDate,
+  getPaymentMethodName,
+} from "../../../utils/transactionTableUtils";
+
+const TransactionTable = () => {
+  const {
+    transactions,
+    isLoadingHistory,
+    selectedTransaction,
+    filters,
+    handleFiltersChange,
+    handleTransactionSelect,
+    pagination,
+    sort,
+    handleSort,
+  } = useTransactionHistory();
+
+  const headers = [
+    { name: "txid", label: "TxId", sortKey: "txid", sortable: true },
+    { name: "reference", label: "Reference", sortKey: "reference", sortable: true },
+    { name: "amount", label: "Amount", sortKey: "amount", sortable: true },
+    { name: "paymentMethod", label: "Payment Method", sortKey: null, sortable: false },
+    { name: "type", label: "Type", sortKey: "request_type", sortable: true },
+    { name: "status", label: "Status", sortKey: "status", sortable: true },
+    { name: "created_at", label: "Created At", sortKey: "createdAt", sortable: true },
+    { name: "updated_at", label: "Updated At", sortKey: "updatedAt", sortable: true },
+    { name: "details", label: "Details", sortKey: null, sortable: false },
+  ];
+
+  const renderHeaderLabel = (header) => {
+    const isSorted = header.sortKey && sort.sort_by === header.sortKey;
+    const SortIcon = isSorted && sort.sort_order === "asc" ? ArrowUp : ArrowDown;
+
+    if (!header.sortable || !header.sortKey) {
+      return header.label;
+    }
+
+    return (
+      <Flex
+        alignItems="center"
+        gap={1}
+        onClick={() => handleSort(header.sortKey)}
+        style={{ cursor: "pointer", userSelect: "none" }}
+        title={`Sort by ${header.label}`}
+      >
+        <Typography variant="sigma" textColor="neutral600">
+          {header.label}
+        </Typography>
+        {isSorted ? (
+          <SortIcon width={12} height={12} />
+        ) : (
+          <Box width={12} height={12} aria-hidden />
+        )}
+      </Flex>
+    );
+  };
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4} minHeight={"800px"}>
+      <FiltersPanel
+        filters={filters}
+        handleFiltersChange={handleFiltersChange}
+        isLoading={isLoadingHistory}
+      />
+      <Box>
+        <Table.Root
+          colCount={9}
+          rows={transactions}
+          isLoading={isLoadingHistory}
+          isFetching={isLoadingHistory}
+        >
+          <Table.Content footer={null}>
+            <Table.Head>
+              {headers.map((header) => (
+                <Table.HeaderCell
+                  fieldSchemaType="custom"
+                  isSortable={header.sortable}
+                  key={header.name}
+                  label={renderHeaderLabel(header)}
+                  name={header.name}
+                />
+              ))}
+            </Table.Head>
+            <Table.Body>
+              <Table.LoadingBody />
+              {transactions.length === 0 && !isLoadingHistory && (
+                <Tr>
+                  <Td colSpan={9}>
+                    <Box padding={6}>
+                      <Typography textAlign="center" textColor="neutral600">
+                        No transactions found
+                      </Typography>
+                    </Box>
+                  </Td>
+                </Tr>
+              )}
+              {transactions.length > 0 &&
+                transactions.map((transaction) => {
+                  const isSelected = selectedTransaction?.id === transaction.id;
+                  return (
+                    <React.Fragment key={transaction.id}>
+                      <Tr>
+                        <Td>
+                          <Typography variant="pi" textColor="neutral600">
+                            {transaction.txid || "N/A"}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography variant="pi" fontWeight="medium">
+                            {transaction.reference || "N/A"}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatAmount(
+                              transaction.amount,
+                              transaction.currency
+                            )}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography variant="pi">
+                            {getPaymentMethodName(
+                              transaction.raw_request?.clearingtype,
+                              transaction.raw_request?.wallettype,
+                              transaction.raw_request?.cardtype
+                            )}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography variant="pi" fontWeight="semiBold">
+                            {transaction.request_type || "N/A"}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <StatusBadge
+                            status={transaction?.status}
+                            transaction={transaction}
+                          />
+                        </Td>
+                        <Td>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatDate(transaction.createdAt ?? transaction.created_at)}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatDate(transaction.updatedAt ?? transaction.updated_at)}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Button
+                            variant="tertiary"
+                            size="S"
+                            minWidth="100px"
+                            startIcon={
+                              isSelected ? <ChevronUp /> : <ChevronDown />
+                            }
+                            onClick={() => handleTransactionSelect(transaction)}
+                          >
+                            {isSelected ? "Hide" : "Details"}
+                          </Button>
+                        </Td>
+                      </Tr>
+                      {isSelected && (
+                        <Tr>
+                          <Td colSpan={9}>
+                            <TransactionDetails transaction={transaction} />
+                          </Td>
+                        </Tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+            </Table.Body>
+          </Table.Content>
+        </Table.Root>
+      </Box>
+
+      {transactions.length > 0 && (
+        <TransactionTablePagination pageCount={pagination.pageCount} />
+      )}
+    </Flex>
+  );
+};
+
+export default TransactionTable;

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

@@ -0,0 +1,28 @@
+import { Flex, Box } from "@strapi/design-system";
+import { PageSizeURLQuery, PaginationURLQuery } from "@strapi/helper-plugin";
+
+const TransactionHistoryTablePagination = ({ pageCount }) => {
+  return (
+    <Box paddingTop={6} paddingBottom={4}>
+      <Flex
+        direction="row"
+        gap={2}
+        alignItems="center"
+        justifyContent="space-between"
+        wrap="wrap"
+      >
+        <PageSizeURLQuery
+          options={["5", "10", "20", "50", "100"]}
+          defaultValue={"10"}
+        />
+        <PaginationURLQuery
+          pagination={{ pageCount }}
+          boundaryCount={1}
+          siblingCount={1}
+        />
+      </Flex>
+    </Box>
+  );
+};
+
+export default TransactionHistoryTablePagination;

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

@@ -0,0 +1,155 @@
+import JsonView from "@uiw/react-json-view";
+import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
+import { Box, Flex, Typography } from "@strapi/design-system";
+import { getCardTypeName } from "../../../../utils/transactionTableUtils";
+
+const TransactionDetails = ({ transaction }) => {
+  return (
+    <Flex direction="column" gap={4} alignItems={"stretch"} marginTop={4}>
+      {transaction.status === "ERROR" && (
+        <Box padding={3} background="danger100" hasRadius>
+          <Typography
+            variant="pi"
+            fontWeight="bold"
+            textColor="danger600"
+            marginBottom={1}
+          >
+            Error: {transaction.error_message || "Unknown error"}
+          </Typography>
+          {transaction.customer_message && (
+            <Typography variant="pi" textColor="danger600">
+              Customer Message: {transaction.customer_message}
+            </Typography>
+          )}
+        </Box>
+      )}
+
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit,minmax(400px,1fr))",
+          gap: "16px",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <Flex direction="column" gap={2} alignItems={"stretch"}>
+          <Typography
+            variant="pi"
+            fontWeight="bold"
+            textColor="neutral800"
+            marginBottom={3}
+          >
+            Customer Information
+          </Typography>
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              Name:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.raw_request?.firstname}{" "}
+              {transaction.raw_request?.lastname}
+            </Typography>
+          </Flex>
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              Email:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.raw_request?.email || "N/A"}
+            </Typography>
+          </Flex>
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              Phone:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.raw_request?.telephonenumber || "N/A"}
+            </Typography>
+          </Flex>
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              Address:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.raw_request?.street}, {transaction.raw_request?.zip}{" "}
+              {transaction.raw_request?.city}
+            </Typography>
+          </Flex>
+        </Flex>
+        <Flex direction="column" gap={2} alignItems={"stretch"}>
+          <Typography
+            variant="pi"
+            fontWeight="bold"
+            textColor="neutral800"
+            marginBottom={3}
+          >
+            Payment Details
+          </Typography>
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              TX ID:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.txid || "N/A"}
+            </Typography>
+          </Flex>
+          {transaction.raw_request?.clearingtype === "cc" && (
+            <>
+              <Flex gap={3}>
+                <Typography
+                  variant="pi"
+                  textColor="neutral600"
+                  fontWeight="medium"
+                >
+                  Card Type:
+                </Typography>
+                <Typography variant="pi" textColor="neutral800">
+                  {getCardTypeName(transaction.raw_request?.cardtype)}
+                </Typography>
+              </Flex>
+              <Flex gap={3}>
+                <Typography
+                  variant="pi"
+                  textColor="neutral600"
+                  fontWeight="medium"
+                >
+                  Card Number:
+                </Typography>
+                <Typography variant="pi" textColor="neutral800">
+                  **** **** ****{" "}
+                  {transaction.raw_request?.cardpan?.slice(-4) || "****"}
+                </Typography>
+              </Flex>
+            </>
+          )}
+          <Flex gap={3}>
+            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
+              Mode:
+            </Typography>
+            <Typography variant="pi" textColor="neutral800">
+              {transaction.raw_request?.mode || "N/A"}
+            </Typography>
+          </Flex>
+        </Flex>
+      </Box>
+
+      <Box>
+        <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+          Transaction Data
+        </Typography>
+        <Box marginTop={4}>
+          <JsonView
+            value={transaction?.body  || transaction?.raw_request || {}}
+            style={githubDarkTheme}
+            displayDataTypes={false}
+            enableClipboard
+            collapsed={false}
+            displayObjectSize={false}
+          />
+        </Box>
+      </Box>
+    </Flex>
+  );
+};
+
+export default TransactionDetails;

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

@@ -2,12 +2,11 @@ import React, { useState, useEffect } from "react";
 import { useLocation, useHistory } from "react-router-dom";
 import { Layout, ContentLayout, Box } from "@strapi/design-system";
 import useSettings from "../hooks/useSettings";
-import useTransactionHistory from "../hooks/useTransactionHistory";
 import usePaymentActions from "../hooks/usePaymentActions";
 import AppHeader from "./components/AppHeader";
 import AppTabs from "./components/AppTabs";
-import ApplePayConfigPanel from "./components/ApplePayConfigPanel";
-import GooglePayConfigPanel from "./components/GooglePayConfigPanel";
+import ApplePayConfigPanel from "./components/configuration/ApplePayConfigPanel";
+import GooglePayConfigPanel from "./components/configuration/GooglePayConfigPanel";
 import "./styles.css";
 import pluginId from "../../pluginId";
 
@@ -18,7 +17,6 @@ const App = () => {
 
   // Custom hooks
   const settings = useSettings();
-  const transactionHistory = useTransactionHistory();
   const paymentActions = usePaymentActions();
 
   useEffect(() => {
@@ -44,13 +42,11 @@ const App = () => {
 
   if (isApplePayConfigPage) {
     return (
-      <Layout>
+      <Layout sideNav={null}>
         <AppHeader
-          title="Apple Pay Configuration"
           activeTab={null}
           isSaving={settings.isSaving}
           onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
         />
         <ContentLayout>
           <Box padding={6}>
@@ -68,13 +64,11 @@ const App = () => {
 
   if (isGooglePayConfigPage) {
     return (
-      <Layout>
+      <Layout sideNav={null}>
         <AppHeader
-          title="Google Pay Configuration"
           activeTab={null}
           isSaving={settings.isSaving}
           onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
         />
         <ContentLayout>
           <Box padding={6}>
@@ -92,7 +86,7 @@ const App = () => {
   }
 
   return (
-    <Layout>
+    <Layout sideNav={null}>
       <AppHeader
         activeTab={activeTab}
         isSaving={settings.isSaving}
@@ -104,29 +98,11 @@ const App = () => {
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             settings={settings.settings}
-            isSaving={settings.isSaving}
             isTesting={settings.isTesting}
             testResult={settings.testResult}
-            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}
-            currentPage={transactionHistory.currentPage}
-            totalPages={transactionHistory.totalPages}
-            pageSize={transactionHistory.pageSize}
-            onRefresh={transactionHistory.loadTransactionHistory}
-            onPageChange={transactionHistory.handlePageChange}
-            onPageSizeChange={transactionHistory.handlePageSizeChange}
-            selectedTransaction={transactionHistory.selectedTransaction}
-            onTransactionSelect={transactionHistory.handleTransactionSelect}
             paymentActions={paymentActions}
             history={history}
           />

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

@@ -52,6 +52,26 @@ const usePaymentActions = () => {
   const [cardexpiredate, setCardexpiredate] = useState("");
   const [cardcvc2, setCardcvc2] = useState("");
 
+  // Additional customer fields
+  const [firstname, setFirstname] = useState("");
+  const [lastname, setLastname] = useState("");
+  const [email, setEmail] = useState("");
+  const [telephonenumber, setTelephonenumber] = useState("");
+  const [gender, setGender] = useState("");
+  const [salutation, setSalutation] = useState("");
+  const [country, setCountry] = useState("");
+  const [currency, setCurrency] = useState("EUR");
+  const [city, setCity] = useState("");
+  const [street, setStreet] = useState("");
+  const [zip, setZip] = useState("");
+
+  // Capture form fields
+  const [captureCurrency, setCaptureCurrency] = useState("EUR");
+  const [captureSequenceNumber, setCaptureSequenceNumber] = useState("1");
+
+  // Refund form fields
+  const [refundCurrency, setRefundCurrency] = useState("EUR");
+
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
   const [paymentResult, setPaymentResult] = useState(null);
   const [paymentError, setPaymentError] = useState(null);
@@ -85,16 +105,27 @@ const usePaymentActions = () => {
         setPreauthReference(finalPreauthReference);
       }
 
-      const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
+      const finalCurrency = currency || ((paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR");
 
       const baseParams = {
         amount: parseInt(paymentAmount),
-        currency: currency,
+        currency: finalCurrency,
         reference: finalPreauthReference,
         enable3DSecure: settings.enable3DSecure !== false,
         invoiceid: finalPreauthReference,
         narrative_text: "Preauthorization for order " + finalPreauthReference,
-        ...DEFAULT_PAYMENT_DATA
+        ...DEFAULT_PAYMENT_DATA,
+        // Override with form values if provided
+        ...(firstname && { firstname }),
+        ...(lastname && { lastname }),
+        ...(email && { email }),
+        ...(telephonenumber && { telephonenumber }),
+        ...(gender && { gender }),
+        ...(salutation && { salutation }),
+        ...(country && { country }),
+        ...(city && { city }),
+        ...(street && { street }),
+        ...(zip && { zip }),
       };
 
       if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
@@ -210,16 +241,27 @@ const usePaymentActions = () => {
         setAuthReference(finalAuthReference);
       }
 
-      const currency = (paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR";
+      const finalCurrency = currency || ((paymentMethod === "cc" && cardtype === "A") ? "USD" : "EUR");
 
       const baseParams = {
         amount: parseInt(paymentAmount),
-        currency: currency,
+        currency: finalCurrency,
         reference: finalAuthReference,
         enable3DSecure: settings.enable3DSecure !== false,
         invoiceid: finalAuthReference,
         narrative_text: "Authorization for order " + finalAuthReference,
-        ...DEFAULT_PAYMENT_DATA
+        ...DEFAULT_PAYMENT_DATA,
+        // Override with form values if provided
+        ...(firstname && { firstname }),
+        ...(lastname && { lastname }),
+        ...(email && { email }),
+        ...(telephonenumber && { telephonenumber }),
+        ...(gender && { gender }),
+        ...(salutation && { salutation }),
+        ...(country && { country }),
+        ...(city && { city }),
+        ...(street && { street }),
+        ...(zip && { zip }),
       };
 
       if (paymentMethod === "cc" && settings.enable3DSecure !== false) {
@@ -337,9 +379,9 @@ const usePaymentActions = () => {
       const params = getCaptureParams(paymentMethod, {
         txid: captureTxid,
         amount: parseInt(paymentAmount),
-        currency: "EUR",
+        currency: captureCurrency || "EUR",
         captureMode: captureMode,
-        sequencenumber: 1
+        sequencenumber: parseInt(captureSequenceNumber) || 1
       });
 
       const result = await payoneRequests.capture(params);
@@ -363,9 +405,9 @@ const usePaymentActions = () => {
     try {
       const params = getRefundParams(paymentMethod, {
         txid: refundTxid,
-        sequencenumber: parseInt(refundSequenceNumber),
+        sequencenumber: parseInt(refundSequenceNumber) || 2,
         amount: parseInt(paymentAmount),
-        currency: "EUR",
+        currency: refundCurrency || "EUR",
         reference: refundReference || `REFUND-${Date.now()}`
       });
 
@@ -427,7 +469,41 @@ const usePaymentActions = () => {
     cardexpiredate,
     setCardexpiredate,
     cardcvc2,
-    setCardcvc2
+    setCardcvc2,
+
+    // Customer fields
+    firstname,
+    setFirstname,
+    lastname,
+    setLastname,
+    email,
+    setEmail,
+    telephonenumber,
+    setTelephonenumber,
+    gender,
+    setGender,
+    salutation,
+    setSalutation,
+    country,
+    setCountry,
+    currency,
+    setCurrency,
+    city,
+    setCity,
+    street,
+    setStreet,
+    zip,
+    setZip,
+
+    // Capture form fields
+    captureCurrency,
+    setCaptureCurrency,
+    captureSequenceNumber,
+    setCaptureSequenceNumber,
+
+    // Refund form fields
+    refundCurrency,
+    setRefundCurrency,
   };
 };