strapi-plugin-payone-provider 4.6.9 → 5.6.10

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

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { Typography, Box, Button, Flex } from "@strapi/design-system";
+import { Table, Pagination } from "@strapi/strapi/admin";
+import { ChevronDownIcon, ChevronUpIcon } from "../icons";
+import {
+  formatAmount,
+  formatDate,
+  getPaymentMethodName,
+} from "../../../utils/transactionTableUtils";
+import TransactionDetails from "./details/TransactionDetails";
+import FiltersPanel from "./FiltersPanel";
+import useTransactionHistory from "../../../hooks/useTransactionHistory";
+import StatusBadge from "../StatusBadge";
+const TransactionTable = () => {
+  const {
+    transactions,
+    isLoadingHistory,
+    selectedTransaction,
+    handleTransactionSelect,
+    filters,
+    handleFiltersChange,
+    pagination,
+  } = 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" },
+  ];
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4} minHeight={"800px"}>
+      <FiltersPanel
+        filters={filters}
+        handleFiltersChange={handleFiltersChange}
+      />
+
+      <Box>
+        <Table.Root
+          rows={transactions}
+          headers={headers}
+          isLoading={isLoadingHistory}
+        >
+          <Table.Content>
+            <Table.Head>
+              {headers.map((header) => (
+                <Table.HeaderCell
+                  key={header.name}
+                  name={header.name}
+                  label={header.label}
+                />
+              ))}
+            </Table.Head>
+            <Table.Body>
+              <Table.Loading />
+              <Table.Empty />
+              {transactions.length > 0 &&
+                transactions.map((transaction) => {
+                  const isSelected = selectedTransaction?.id === transaction.id;
+                  return (
+                    <React.Fragment key={transaction.id}>
+                      <Table.Row>
+                        <Table.Cell>
+                          <Typography variant="pi" textColor="neutral600">
+                            {transaction.txid || "N/A"}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi" fontWeight="medium">
+                            {transaction.reference || "N/A"}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatAmount(
+                              transaction.amount,
+                              transaction.currency
+                            )}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi">
+                            {getPaymentMethodName(
+                              transaction.raw_request?.clearingtype,
+                              transaction.raw_request?.wallettype
+                            )}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi" fontWeight="semiBold">
+                            {transaction.request_type || "N/A"}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <StatusBadge status={transaction?.status} size="M" />
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatDate(transaction.created_at)}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Typography variant="pi" textColor="neutral600">
+                            {formatDate(transaction.updated_at)}
+                          </Typography>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <Button
+                            size="S"
+                            variant="tertiary"
+                            minWidth="100px"
+                            onClick={() => handleTransactionSelect(transaction)}
+                            startIcon={
+                              isSelected ? (
+                                <ChevronUpIcon size={16} />
+                              ) : (
+                                <ChevronDownIcon size={16} />
+                              )
+                            }
+                          >
+                            {isSelected ? "Hide" : "Details"}
+                          </Button>
+                        </Table.Cell>
+                      </Table.Row>
+                      {isSelected && (
+                        <Table.Row>
+                          <Table.Cell colSpan={10}>
+                            <TransactionDetails transaction={transaction} />
+                          </Table.Cell>
+                        </Table.Row>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+            </Table.Body>
+          </Table.Content>
+        </Table.Root>
+      </Box>
+
+      {transactions.length > 0 && (
+        <Box paddingTop={6} paddingBottom={4}>
+          <Pagination.Root
+            pageCount={pagination.pageCount}
+            defaultPage={pagination.page}
+            defaultPageSize={pagination.pageSize}
+            total={pagination.total}
+          >
+            <Pagination.PageSize options={["5", "10", "20", "50", "100"]} />
+            <Pagination.Links boundaryCount={1} siblingCount={1} />
+          </Pagination.Root>
+        </Box>
+      )}
+    </Flex>
+  );
+};
+
+export default TransactionTable;

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

@@ -0,0 +1,156 @@
+import * as React from "react";
+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}
+            style={githubDarkTheme}
+            displayDataTypes={false}
+            enableClipboard
+            collapsed={false}
+            displayObjectSize={false}
+          />
+        </Box>
+      </Box>
+    </Flex>
+  );
+};
+
+export default TransactionDetails;

package/admin/src/pages/App/components/{TransactionHistoryItem.jsx → transaction-history/details/TransactionHistoryItem.jsx}

@@ -1,17 +1,17 @@
-import React, { useState } from "react";
+import * as React from "react";
 import {
   Box,
   Card,
   CardBody,
   Flex,
-  Stack,
   Typography,
   Badge,
   Button,
 } from "@strapi/design-system";
-import { ChevronDownIcon, ChevronUpIcon } from "./icons";
+import { ChevronDownIcon, ChevronUpIcon } from "../icons";
+
 const TransactionHistoryItem = ({ transaction }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(false);
 
   const getStatusColor = (status) => {
     switch (status) {
@@ -82,9 +82,7 @@ const TransactionHistoryItem = ({ transaction }) => {
         padding={6}
         style={{ display: "flex", flexDirection: "column", gap: "6px" }}
       >
-        {/* Main Values in Column Format */}
-        <Stack spacing={3} marginBottom={4}>
-          {/* Reference */}
+        <Flex direction="column" gap={3} style={{ marginBottom: "32px" }}>
           <Flex alignItems="center" gap={2}>
             <Typography variant="pi" textColor="neutral600" fontWeight="medium">
               Reference:
@@ -93,7 +91,6 @@ const TransactionHistoryItem = ({ transaction }) => {
               {transaction.reference}
             </Typography>
           </Flex>
-          {/* Date */}
           <Flex alignItems="center" gap={2}>
             <Typography variant="pi" textColor="neutral600" fontWeight="medium">
               Date:
@@ -103,7 +100,6 @@ const TransactionHistoryItem = ({ transaction }) => {
             </Typography>
           </Flex>
 
-          {/* Payment Method */}
           <Flex alignItems="center" gap={2}>
             <Typography variant="pi" textColor="neutral600" fontWeight="medium">
               Method:
@@ -126,7 +122,6 @@ const TransactionHistoryItem = ({ transaction }) => {
             )}
           </Flex>
 
-          {/* Amount */}
           <Flex alignItems="center" gap={2}>
             <Typography variant="pi" textColor="neutral600" fontWeight="medium">
               Amount:
@@ -146,9 +141,8 @@ const TransactionHistoryItem = ({ transaction }) => {
               {transaction.status}
             </Badge>
           </Flex>
-        </Stack>
+        </Flex>
 
-        {/* Expand/Collapse Button */}
         <Flex justifyContent="center">
           <Button
             size="S"
@@ -166,7 +160,6 @@ const TransactionHistoryItem = ({ transaction }) => {
           </Button>
         </Flex>
 
-        {/* Expanded Details */}
         {isExpanded && (
           <Flex
             marginTop={4}
@@ -175,11 +168,9 @@ const TransactionHistoryItem = ({ transaction }) => {
               gap: "32px",
             }}
           >
-            <Stack spacing={4}>
-              {/* Error Message */}
+            <Flex direction="column" gap={4}>
               {transaction.status === "ERROR" && (
                 <Box
-                  marginBottom={4}
                   padding={3}
                   background="danger100"
                   hasRadius
@@ -204,7 +195,6 @@ const TransactionHistoryItem = ({ transaction }) => {
                   )}
                 </Box>
               )}
-              {/* Customer Information */}
               <Box>
                 <Flex alignItems="center" gap={2} marginBottom={3}>
                   <Typography
@@ -216,7 +206,7 @@ const TransactionHistoryItem = ({ transaction }) => {
                   </Typography>
                 </Flex>
                 <Box paddingLeft={4}>
-                  <Stack spacing={2}>
+                  <Flex direction="column" gap={2}>
                     <Flex justifyContent="space-between" gap={3}>
                       <Typography
                         variant="pi"
@@ -280,11 +270,10 @@ const TransactionHistoryItem = ({ transaction }) => {
                         {transaction.raw_request?.country}
                       </Typography>
                     </Flex>
-                  </Stack>
+                  </Flex>
                 </Box>
               </Box>
 
-              {/* Payment Method Details */}
               <Box>
                 <Flex alignItems="center" gap={2} marginBottom={3}>
                   <Typography
@@ -296,7 +285,7 @@ const TransactionHistoryItem = ({ transaction }) => {
                   </Typography>
                 </Flex>
                 <Box paddingLeft={4}>
-                  <Stack spacing={2}>
+                  <Flex direction="column" gap={2}>
                     <Flex justifyContent="space-between" gap={3}>
                       <Typography
                         variant="pi"
@@ -399,11 +388,10 @@ const TransactionHistoryItem = ({ transaction }) => {
                         </Flex>
                       </>
                     )}
-                  </Stack>
+                  </Flex>
                 </Box>
               </Box>
 
-              {/* Technical Details */}
               <Box>
                 <Typography
                   variant="pi"
@@ -414,7 +402,7 @@ const TransactionHistoryItem = ({ transaction }) => {
                   Technical Details
                 </Typography>
                 <Box paddingLeft={4}>
-                  <Stack spacing={2}>
+                  <Flex direction="column" gap={2}>
                     <Flex justifyContent="space-between" gap={3}>
                       <Typography
                         variant="pi"
@@ -475,12 +463,12 @@ const TransactionHistoryItem = ({ transaction }) => {
                         {transaction.raw_request?.customer_is_present}
                       </Typography>
                     </Flex>
-                  </Stack>
+                  </Flex>
                 </Box>
               </Box>
-            </Stack>
+            </Flex>
 
-            <Stack spacing={4}>
+            <Flex direction="column" gap={4}>
               <Typography variant="pi" fontWeight="bold" textColor="neutral800">
                 Raw Body
               </Typography>
@@ -511,7 +499,7 @@ const TransactionHistoryItem = ({ transaction }) => {
                   {JSON.stringify(transaction?.body || {}, null, 2)}
                 </pre>
               </Box>
-            </Stack>
+            </Flex>
           </Flex>
         )}
       </CardBody>

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

@@ -1,58 +1,38 @@
-import React, { useState, useEffect } from "react";
-import { useLocation, useHistory } from "react-router-dom";
-import { Layout, ContentLayout, Box } from "@strapi/design-system";
+import * as React from "react";
+import { Box } from "@strapi/design-system";
+import { Layouts } from "@strapi/strapi/admin";
 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 "./styles.css";
-import pluginId from "../../pluginId";
 
 const App = () => {
-  const location = useLocation();
-  const history = useHistory();
-  const [activeTab, setActiveTab] = useState(0);
-
-  // Custom hooks
+  const [activeTab, setActiveTab] = React.useState(1);
+  const [currentView, setCurrentView] = React.useState("main");
   const settings = useSettings();
-  const transactionHistory = useTransactionHistory();
   const paymentActions = usePaymentActions();
 
-  useEffect(() => {
-    if (
-      location.pathname.includes("/apple-pay-config") ||
-      location.pathname.includes("/google-pay-config")
-    ) {
-    } else {
-      const tabFromPath = location.pathname.includes("/history")
-        ? 1
-        : location.pathname.includes("/payment-actions")
-        ? 2
-        : location.pathname.includes("/documentation")
-        ? 3
-        : 0;
-      setActiveTab(tabFromPath);
-    }
-  }, [location.pathname]);
+  const handleNavigate = (view) => {
+    setCurrentView(view);
+  };
 
-  const isApplePayConfigPage = location.pathname.includes("/apple-pay-config");
-  const isGooglePayConfigPage =
-    location.pathname.includes("/google-pay-config");
+  const isApplePayConfigPage = currentView === "apple-pay-config";
+  const isGooglePayConfigPage = currentView === "google-pay-config";
 
   if (isApplePayConfigPage) {
     return (
-      <Layout>
+      <Layouts.Root>
         <AppHeader
           title="Apple Pay Configuration"
           activeTab={null}
           isSaving={settings.isSaving}
           onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
+          onBack={() => handleNavigate("main")}
         />
-        <ContentLayout>
+        <Layouts.Content>
           <Box padding={6}>
             <ApplePayConfigPanel
               settings={settings.settings}
@@ -61,78 +41,55 @@ const App = () => {
               onSave={settings.handleSave}
             />
           </Box>
-        </ContentLayout>
-      </Layout>
+        </Layouts.Content>
+      </Layouts.Root>
     );
   }
 
   if (isGooglePayConfigPage) {
     return (
-      <Layout>
+      <Layouts.Root>
         <AppHeader
           title="Google Pay Configuration"
           activeTab={null}
           isSaving={settings.isSaving}
           onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
+          onBack={() => handleNavigate("main")}
         />
-        <ContentLayout>
+        <Layouts.Content>
           <Box padding={6}>
             <GooglePayConfigPanel
               settings={settings.settings}
               onInputChange={settings.handleInputChange}
               isSaving={settings.isSaving}
               onSave={settings.handleSave}
-              onBack={() => history.push(`/plugins/${pluginId}`)}
+              onBack={() => handleNavigate("main")}
             />
           </Box>
-        </ContentLayout>
-      </Layout>
+        </Layouts.Content>
+      </Layouts.Root>
     );
   }
 
   return (
-    <Layout>
+    <Layouts.Root>
       <AppHeader
         activeTab={activeTab}
         isSaving={settings.isSaving}
         onSave={settings.handleSave}
       />
-      <ContentLayout>
+      <Layouts.Content>
         <Box padding={6}>
           <AppTabs
             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}
+            onNavigateToConfig={handleNavigate}
+            settings={settings}
             paymentActions={paymentActions}
-            history={history}
           />
         </Box>
-      </ContentLayout>
-    </Layout>
+      </Layouts.Content>
+    </Layouts.Root>
   );
 };