strapi-plugin-payone-provider 1.6.6 → 4.6.9

package/admin/src/pages/App/components/HistoryPanel.jsx

@@ -8,15 +8,20 @@ import {
   Stack,
   Typography,
   TextInput,
+  Select,
+  Option,
   Divider,
 } from "@strapi/design-system";
 import { Search } from "@strapi/icons";
 import TransactionHistoryItem from "./TransactionHistoryItem";
+import TransactionHistoryTable from "./TransactionHistoryTable";
 
 const HistoryPanel = ({
   filters,
   onFilterChange,
   onFilterApply,
+  sorting,
+  onSort,
   isLoadingHistory,
   transactionHistory,
   paginatedTransactions,
@@ -25,7 +30,10 @@ const HistoryPanel = ({
   pageSize,
   onRefresh,
   onPageChange,
+  onPageSizeChange,
 }) => {
+  console.log(transactionHistory);
+
   return (
     <Box
       className="payment-container"
@@ -53,244 +61,23 @@ const HistoryPanel = ({
             View and filter all payment transactions processed through Payone
           </Typography>
         </Box>
-        {/* Filters */}
-        <Box>
-          <Box marginBottom={4}>
-            <Typography variant="delta" as="h3" fontWeight="bold">
-              Transaction Filters
-            </Typography>
-            <Typography variant="pi" textColor="neutral600" marginTop={2}>
-              Filter transactions by status, type, date range, and more
-            </Typography>
-          </Box>
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <Stack spacing={4}>
-                <Flex gap={4} wrap="wrap" alignItems="center">
-                  <TextInput
-                    label="Status"
-                    name="status"
-                    value={filters.status}
-                    onChange={(e) => onFilterChange("status", e.target.value)}
-                    placeholder="APPROVED, ERROR, etc."
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <TextInput
-                    label="Request Type"
-                    name="request_type"
-                    value={filters.request_type}
-                    onChange={(e) =>
-                      onFilterChange("request_type", e.target.value)
-                    }
-                    placeholder="preauthorization, authorization, etc."
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <TextInput
-                    label="Transaction ID"
-                    name="txid"
-                    value={filters.txid}
-                    onChange={(e) => onFilterChange("txid", e.target.value)}
-                    placeholder="Enter TxId"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <TextInput
-                    label="Reference"
-                    name="reference"
-                    value={filters.reference}
-                    onChange={(e) =>
-                      onFilterChange("reference", e.target.value)
-                    }
-                    placeholder="Enter reference"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <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"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <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"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <Button
-                    variant="default"
-                    onClick={onFilterApply}
-                    loading={isLoadingHistory}
-                    startIcon={<Search />}
-                    className="payment-button payment-button-primary"
-                  >
-                    Apply Filters
-                  </Button>
-                </Flex>
-              </Stack>
-            </CardBody>
-          </Card>
-        </Box>
-
-        <Divider />
-
-        {/* Transaction History */}
-        <Box>
-          <Box marginBottom={6}>
-            <Flex
-              justifyContent="space-between"
-              alignItems="center"
-              marginBottom={4}
-            >
-              <Box>
-                <Typography variant="delta" as="h3" fontWeight="bold">
-                  Transaction History
-                </Typography>
-                <Typography variant="pi" textColor="neutral600" marginTop={2}>
-                  {transactionHistory.length} total transactions •{" "}
-                  {paginatedTransactions.length} on page {currentPage} of{" "}
-                  {totalPages}
-                </Typography>
-              </Box>
-              <Button
-                variant="default"
-                onClick={onRefresh}
-                loading={isLoadingHistory}
-                startIcon={<Search />}
-                size="S"
-                className="payment-button payment-button-success"
-              >
-                Refresh
-              </Button>
-            </Flex>
-          </Box>
-
-          {isLoadingHistory ? (
-            <Box padding={4} textAlign="center">
-              <Typography>Loading transactions...</Typography>
-            </Box>
-          ) : transactionHistory.length === 0 ? (
-            <Box padding={4} textAlign="center">
-              <Typography textColor="neutral600">
-                No transactions found
-              </Typography>
-            </Box>
-          ) : (
-            <Box>
-              {paginatedTransactions.map((transaction) => (
-                <TransactionHistoryItem
-                  key={transaction.id}
-                  transaction={transaction}
-                />
-              ))}
-
-              {/* Pagination */}
-              <Box paddingTop={6} paddingBottom={4}>
-                <Card className="payment-card">
-                  <CardBody padding={4}>
-                    <Flex justifyContent="space-between" alignItems="center">
-                      {transactionHistory.length > pageSize &&
-                      totalPages > 1 ? (
-                        <Flex gap={3} alignItems="center">
-                          <Button
-                            variant="default"
-                            size="S"
-                            onClick={() =>
-                              onPageChange(Math.max(1, currentPage - 1))
-                            }
-                            disabled={currentPage === 1}
-                            className={`payment-button ${
-                              currentPage === 1 ? "" : "payment-button-success"
-                            }`}
-                            style={{
-                              background:
-                                currentPage === 1 ? "#f6f6f9" : undefined,
-                              color: currentPage === 1 ? "#666687" : undefined,
-                            }}
-                          >
-                            ← Previous
-                          </Button>
 
-                          <Box
-                            padding={2}
-                            background="#f6f6f9"
-                            borderRadius="6px"
-                          >
-                            <Typography
-                              variant="pi"
-                              textColor="neutral600"
-                              fontWeight="bold"
-                            >
-                              Page {currentPage} of {totalPages}
-                            </Typography>
-                          </Box>
-
-                          <Button
-                            variant="default"
-                            size="S"
-                            onClick={() =>
-                              onPageChange(
-                                Math.min(totalPages, currentPage + 1)
-                              )
-                            }
-                            disabled={currentPage === totalPages}
-                            className={`payment-button ${
-                              currentPage === totalPages
-                                ? ""
-                                : "payment-button-success"
-                            }`}
-                            style={{
-                              background:
-                                currentPage === totalPages
-                                  ? "#f6f6f9"
-                                  : undefined,
-                              color:
-                                currentPage === totalPages
-                                  ? "#666687"
-                                  : undefined,
-                            }}
-                          >
-                            Next →
-                          </Button>
-                        </Flex>
-                      ) : (
-                        <Typography
-                          variant="pi"
-                          textColor="neutral600"
-                          fontWeight="medium"
-                        >
-                          {transactionHistory.length <= pageSize
-                            ? "All transactions shown"
-                            : "No pagination needed"}
-                        </Typography>
-                      )}
-                    </Flex>
-                  </CardBody>
-                </Card>
-                <Typography
-                  variant="pi"
-                  textColor="neutral600"
-                  fontWeight="medium"
-                >
-                  Showing {paginatedTransactions.length} of{" "}
-                  {transactionHistory.length} transactions
-                </Typography>
-              </Box>
-            </Box>
-          )}
-        </Box>
+        {/* Transaction Table */}
+        <TransactionHistoryTable
+          transactions={paginatedTransactions}
+          isLoading={isLoadingHistory}
+          filters={filters}
+          onFilterChange={onFilterChange}
+          onFilterApply={onFilterApply}
+          sorting={sorting}
+          onSort={onSort}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          pageSize={pageSize}
+          totalItems={transactionHistory.length}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+        />
 
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">

package/admin/src/pages/App/components/PaymentActionsPanel.jsx

@@ -51,7 +51,13 @@ const PaymentActionsPanel = ({
   const mode = (settings?.mode || "test").toLowerCase();
   const isLiveMode = mode === "live";
 
-  if (isLiveMode) {
+  React.useEffect(() => {
+    if (isLiveMode && paymentMethod !== "apl") {
+      setPaymentMethod("apl");
+    }
+  }, [isLiveMode, paymentMethod]);
+
+  if (isLiveMode && paymentMethod !== "apl") {
     return (
       <Box
         style={{
@@ -99,6 +105,7 @@ const PaymentActionsPanel = ({
         cardcvc2={cardcvc2}
         setCardcvc2={setCardcvc2}
         onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
       />
     );
   }

package/admin/src/pages/App/components/RawDataPopover.jsx

@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Typography } from "@strapi/design-system";
+import JsonView from "@uiw/react-json-view";
+
+const RawDataPopover = ({ transaction, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState("top"); // 'top' or 'bottom'
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+
+  const calculatePosition = (buttonElement) => {
+    if (!buttonElement) return "top";
+    
+    const buttonRect = buttonElement.getBoundingClientRect();
+    // Find the scrollable parent container
+    let scrollableParent = buttonElement.parentElement;
+    while (scrollableParent && scrollableParent !== document.body) {
+      const style = window.getComputedStyle(scrollableParent);
+      if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+        const parentRect = scrollableParent.getBoundingClientRect();
+        const spaceAbove = buttonRect.top - parentRect.top;
+        const spaceBelow = parentRect.bottom - parentRect.bottom;
+        // RawDataPopover can be up to 500px tall, so we need more space
+        // If there's less space above than below (or less than 520px), show popover below
+        return spaceAbove < 520 || spaceAbove < spaceBelow ? "bottom" : "top";
+      }
+      scrollableParent = scrollableParent.parentElement;
+    }
+    // Fallback: use viewport space
+    const spaceAbove = buttonRect.top;
+    return spaceAbove < 520 ? "bottom" : "top";
+  };
+
+  const handleButtonClick = () => {
+    if (!isOpen && buttonRef.current) {
+      // Calculate position before opening
+      const newPosition = calculatePosition(buttonRef.current);
+      setPosition(newPosition);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        popoverRef.current &&
+        buttonRef.current &&
+        !popoverRef.current.contains(event.target) &&
+        !buttonRef.current.contains(event.target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  if (!transaction) {
+    return children;
+  }
+
+  return (
+    <Box position="relative" style={{ display: "inline-block" }}>
+      <Box
+        ref={buttonRef}
+        onClick={handleButtonClick}
+        style={{ display: "inline-block" }}
+      >
+        {children}
+      </Box>
+      {isOpen && (
+        <Box
+          ref={popoverRef}
+          position="absolute"
+          zIndex={1000}
+          left={0}
+          {...(position === "top" 
+            ? { bottom: "100%", marginBottom: 2 }
+            : { top: "100%", marginTop: 2 }
+          )}
+          padding={3}
+          background="neutral0"
+          hasRadius
+          style={{
+            minWidth: "400px",
+            maxWidth: "600px",
+            maxHeight: "500px",
+            overflow: "auto",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            border: "1px solid var(--strapi-colors-neutral200)",
+          }}
+        >
+          <Box paddingBottom={2}>
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              Raw Transaction Data
+            </Typography>
+          </Box>
+          <Box>
+            <JsonView value={transaction} style={{ fontSize: "12px" }} />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default RawDataPopover;
+

package/admin/src/pages/App/components/StatusBadge.jsx

@@ -1,23 +1,81 @@
-import React from "react";
-import { Badge } from "@strapi/design-system";
+import React, { useState } from "react";
+import { Badge, Box, Typography, Flex } from "@strapi/design-system";
+import { ExclamationMarkCircle } from "@strapi/icons";
 
-const StatusBadge = ({ status }) => {
+const StatusBadge = ({ status, transaction }) => {
+  const [isHovered, setIsHovered] = useState(false);
+  
   const statusColors = {
-    APPROVED: "success",
-    PENDING: "warning",
-    ERROR: "danger",
-    FAILED: "danger",
-    INVALID: "danger",
-    REDIRECT: "secondary"
+    APPROVED: "success200",
+    PENDING: "warning200",
+    ERROR: "danger200",
+    CANCELLED: "warning100",
+    REDIRECTED: "success100",
+    CREATED: "success100"
   };
 
+  const getDisplayText = () => {
+    if (status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode) {
+      return `${status} - ${transaction.raw_response.Error.ErrorCode}`;
+    }
+    return status;
+  };
+
+  const displayText = getDisplayText();
+  const errorMessage = status === "ERROR" && transaction?.raw_response?.Error?.ErrorMessage 
+    ? transaction.raw_response.Error.ErrorMessage 
+    : null;
+  
+  const errorCode = status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode
+    ? transaction.raw_response.Error.ErrorCode
+    : null;
+  
+  const showExclamationIcon = status === "ERROR" && !errorCode && !errorMessage;
+
   return (
-    <Badge
-      textColor="neutral0"
-      backgroundColor={statusColors[status] || "default"}
+    <Box
+      position="relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{ display: "inline-block", cursor: status === "ERROR" ? "pointer" : "default" }}
     >
-      {status}
-    </Badge>
+      <Flex gap={2} alignItems="center">
+        <Badge backgroundColor={statusColors[status] || "warning100"}>
+          {displayText}
+        </Badge>
+        {showExclamationIcon && (
+          <ExclamationMarkCircle color="danger500"
+            style={{
+              width: "16px",
+              height: "16px"
+            }} 
+          />
+        )}
+      </Flex>
+      {isHovered && errorMessage && (
+        <Box
+          position="absolute"
+          zIndex={1000}
+          bottom="100%"
+          left="50%"
+          transform="translateX(-50%)"
+          marginBottom={2}
+          padding={3}
+          background="neutral900"
+          hasRadius
+          style={{
+            whiteSpace: "pre-line",
+            minWidth: "200px",
+            maxWidth: "300px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          <Typography variant="pi" textColor="neutral0" style={{ fontSize: "12px" }}>
+            Error: {errorMessage}
+          </Typography>
+        </Box>
+      )}
+    </Box>
   );
 };
 

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="REDIRECTED">REDIRECTED</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;