strapi-plugin-payone-provider 4.6.19 → 4.6.21

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

@@ -1,7 +1,23 @@
 import React from "react";
-import { Box, Button, Flex, Typography, Tr, Td } from "@strapi/design-system";
+import {
+  Box,
+  Button,
+  Flex,
+  Typography,
+  Tr,
+  Td,
+  SimpleMenu,
+  MenuItem,
+  Checkbox,
+} from "@strapi/design-system";
 import { Table } from "@strapi/helper-plugin";
-import { ChevronDown, ChevronUp, ArrowUp, ArrowDown } from "@strapi/icons";
+import {
+  ChevronDown,
+  ChevronUp,
+  ArrowUp,
+  ArrowDown,
+  Bell,
+} from "@strapi/icons";
 
 import StatusBadge from "../StatusBadge";
 import FiltersPanel from "./FiltersPanel";
@@ -14,7 +30,46 @@ import {
   getPaymentMethodName,
 } from "../../../utils/transactionTableUtils";
 
+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 TransactionTable = () => {
+  const [visibleColumns, setVisibleColumns] = React.useState(
+    headers.reduce((acc, col) => {
+      acc[col.name] = true;
+      return acc;
+    }, {}),
+  );
+
   const {
     transactions,
     isLoadingHistory,
@@ -27,21 +82,21 @@ const TransactionTable = () => {
     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 toggleableHeaders = headers.filter(
+    (header) => header.name !== "details",
+  );
+  const visibleHeaders = headers.filter(
+    (header) => visibleColumns[header.name],
+  );
+  const visibleColumnCount = Math.max(visibleHeaders.length, 1);
+  const areAllToggleableColumnsVisible = toggleableHeaders.every(
+    (header) => visibleColumns[header.name],
+  );
 
   const renderHeaderLabel = (header) => {
     const isSorted = header.sortKey && sort.sort_by === header.sortKey;
-    const SortIcon = isSorted && sort.sort_order === "asc" ? ArrowUp : ArrowDown;
+    const SortIcon =
+      isSorted && sort.sort_order === "asc" ? ArrowUp : ArrowDown;
 
     if (!header.sortable || !header.sortKey) {
       return header.label;
@@ -67,6 +122,115 @@ const TransactionTable = () => {
     );
   };
 
+  const toggleColumn = (key) => {
+    if (key === "details") {
+      return;
+    }
+
+    setVisibleColumns((prev) => {
+      const currentlyVisible = headers.filter(
+        (header) => prev[header.name],
+      ).length;
+      const isTryingToHideLastColumn = prev[key] && currentlyVisible === 1;
+
+      if (isTryingToHideLastColumn) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        [key]: !prev[key],
+      };
+    });
+  };
+
+  const showAllColumns = () => {
+    setVisibleColumns(
+      headers.reduce((acc, col) => {
+        acc[col.name] = true;
+        return acc;
+      }, {}),
+    );
+  };
+
+  const renderCellContent = (headerName, transaction, isSelected) => {
+    switch (headerName) {
+      case "txid":
+        return (
+          <Typography variant="pi" textColor="neutral600">
+            {transaction.txid || "N/A"}
+          </Typography>
+        );
+      case "reference":
+        return (
+          <Typography variant="pi" fontWeight="medium">
+            {transaction.reference || "N/A"}
+          </Typography>
+        );
+      case "amount":
+        return (
+          <Typography variant="pi" textColor="neutral600">
+            {formatAmount(transaction.amount, transaction.currency)}
+          </Typography>
+        );
+      case "paymentMethod":
+        return (
+          <Typography variant="pi">
+            {getPaymentMethodName(
+              transaction.raw_request?.clearingtype ||
+                transaction?.body?.raw_request?.clearingtype,
+              transaction.raw_request?.wallettype ||
+                transaction?.body?.raw_request?.wallettype,
+              transaction.raw_request?.cardtype ||
+                transaction?.body?.raw_request?.cardtype,
+            )}
+          </Typography>
+        );
+      case "type":
+        return (
+          <Typography variant="pi" fontWeight="semiBold">
+            {transaction.request_type ||
+              transaction?.body?.request_type ||
+              "N/A"}
+          </Typography>
+        );
+      case "status":
+        return (
+          <StatusBadge
+            status={transaction.status || transaction?.body?.status}
+            transaction={transaction}
+          />
+        );
+      case "created_at":
+        return (
+          <Typography variant="pi" textColor="neutral600">
+            {formatDate(transaction.createdAt ?? transaction.created_at)}
+          </Typography>
+        );
+      case "updated_at":
+        return (
+          <Typography variant="pi" textColor="neutral600">
+            {formatDate(transaction.updatedAt ?? transaction.updated_at)}
+          </Typography>
+        );
+
+      case "details":
+        return (
+          <Button
+            variant="tertiary"
+            size="S"
+            minWidth="100px"
+            startIcon={isSelected ? <ChevronUp /> : <ChevronDown />}
+            onClick={() => handleTransactionSelect(transaction)}
+          >
+            {isSelected ? "Hide" : "Details"}
+          </Button>
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <Flex direction="column" alignItems="stretch" gap={4} minHeight={"800px"}>
       <FiltersPanel
@@ -74,16 +238,49 @@ const TransactionTable = () => {
         handleFiltersChange={handleFiltersChange}
         isLoading={isLoadingHistory}
       />
+
+      <Flex
+        justifyContent="flex-end"
+        gap={3}
+        alignItems="stretch"
+        marginBottom={2}
+        marginTop={4}
+      >
+        <SimpleMenu
+          label="Actions"
+          id={`actions-menu`}
+          as={Button}
+          onReachEnd={() => {}}
+          variant="secondary"
+        >
+          {toggleableHeaders.map((header) => (
+            <MenuItem
+              to={undefined}
+              href={undefined}
+              onClick={() => toggleColumn(header.name)}
+            >
+              <Flex alignItems="center" gap={2}>
+                <Checkbox
+                  checked={visibleColumns[header.name]}
+                  onChange={() => toggleColumn(header.name)}
+                />
+                <span>{header.label}</span>
+              </Flex>
+            </MenuItem>
+          ))}
+        </SimpleMenu>
+      </Flex>
+
       <Box>
         <Table.Root
-          colCount={9}
+          colCount={visibleColumnCount}
           rows={transactions}
           isLoading={isLoadingHistory}
           isFetching={isLoadingHistory}
         >
           <Table.Content footer={null}>
             <Table.Head>
-              {headers.map((header) => (
+              {visibleHeaders.map((header) => (
                 <Table.HeaderCell
                   fieldSchemaType="custom"
                   isSortable={header.sortable}
@@ -97,7 +294,7 @@ const TransactionTable = () => {
               <Table.LoadingBody />
               {transactions.length === 0 && !isLoadingHistory && (
                 <Tr>
-                  <Td colSpan={9}>
+                  <Td colSpan={visibleColumnCount}>
                     <Box padding={6}>
                       <Typography textAlign="center" textColor="neutral600">
                         No transactions found
@@ -112,71 +309,19 @@ const TransactionTable = () => {
                   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?.body?.raw_request?.clearingtype),
-                              (transaction.raw_request?.wallettype || transaction?.body?.raw_request?.wallettype),
-                              (transaction.raw_request?.cardtype || transaction?.body?.raw_request?.cardtype)
+                        {visibleHeaders.map((header) => (
+                          <Td key={`${transaction.id}-${header.name}`}>
+                            {renderCellContent(
+                              header.name,
+                              transaction,
+                              isSelected,
                             )}
-                          </Typography>
-                        </Td>
-                        <Td>
-                          <Typography variant="pi" fontWeight="semiBold">
-                            {(transaction.request_type || transaction?.body?.request_type) || "N/A"}
-                          </Typography>
-                        </Td>
-                        <Td>
-                          <StatusBadge
-                            status={(transaction.status || transaction?.body?.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>
+                          </Td>
+                        ))}
                       </Tr>
                       {isSelected && (
                         <Tr>
-                          <Td colSpan={9}>
+                          <Td colSpan={visibleColumnCount}>
                             <TransactionDetails transaction={transaction} />
                           </Td>
                         </Tr>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "4.6.19",
+  "version": "4.6.21",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [
@@ -48,4 +48,4 @@
     "kind": "plugin",
     "displayName": "Strapi Payone Provider"
   }
-}
+}

package/server/utils/paymentMethodParams.js

@@ -45,7 +45,7 @@ const addPaymentMethodParams = (params, logger) => {
 
   const customParams = {};
   const knownParams = new Set([
-    'cardpan', 'cardexpiredate', 'cardcvc2', 'cardtype', 'wallettype',
+    'cardexpiredate', 'cardtype', 'wallettype',
     'bankcountry', 'iban', 'bic', 'bankaccountholder', 'onlinebanktransfertype',
     'recurrence', 'financingtype', 'invoicetype',
     // Common defaults
@@ -65,9 +65,7 @@ const addPaymentMethodParams = (params, logger) => {
 
   const methodDefaults = {
     cc: {
-      cardpan: "4111111111111111",
       cardexpiredate: getValidCardExpiryDate(null),
-      cardcvc2: "123",
       cardtype: "V"
     },
     wlt: {