strapi-plugin-payone-provider 1.6.7 → 4.6.10

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

@@ -28,6 +28,8 @@ const AppTabs = ({
   filters,
   onFilterChange,
   onFilterApply,
+  sorting,
+  onSort,
   isLoadingHistory,
   transactionHistory,
   paginatedTransactions,
@@ -36,6 +38,7 @@ const AppTabs = ({
   pageSize,
   onRefresh,
   onPageChange,
+  onPageSizeChange,
   selectedTransaction,
   onTransactionSelect,
   // Payment actions props
@@ -105,6 +108,8 @@ const AppTabs = ({
             filters={filters}
             onFilterChange={onFilterChange}
             onFilterApply={onFilterApply}
+            sorting={sorting}
+            onSort={onSort}
             isLoadingHistory={isLoadingHistory}
             transactionHistory={transactionHistory}
             paginatedTransactions={paginatedTransactions}
@@ -113,6 +118,7 @@ const AppTabs = ({
             pageSize={pageSize}
             onRefresh={onRefresh}
             onPageChange={onPageChange}
+            onPageSizeChange={onPageSizeChange}
             selectedTransaction={selectedTransaction}
             onTransactionSelect={onTransactionSelect}
           />

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

@@ -0,0 +1,147 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Box, Typography } from "@strapi/design-system";
+
+const CustomerInfoPopover = ({ 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 - buttonRect.bottom;
+        // If there's less space above than below (or less than 200px), show popover below
+        return spaceAbove < 200 || spaceAbove < spaceBelow ? "bottom" : "top";
+      }
+      scrollableParent = scrollableParent.parentElement;
+    }
+    // Fallback: use viewport space
+    const spaceAbove = buttonRect.top;
+    return spaceAbove < 200 ? "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]);
+
+  const rawRequest = transaction?.raw_request || {};
+  const salutation = rawRequest.salutation || "";
+  const firstname = rawRequest.firstname || "";
+  const lastname = rawRequest.lastname || "";
+  const street = rawRequest.street || "";
+  const zip = rawRequest.zip || "";
+  const city = rawRequest.city || "";
+  const telephonenumber = rawRequest.telephonenumber || "";
+  const email = rawRequest.email || "";
+
+  const hasCustomerInfo =
+    salutation ||
+    firstname ||
+    lastname ||
+    street ||
+    zip ||
+    city ||
+    telephonenumber ||
+    email;
+
+  if (!hasCustomerInfo) {
+    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: "250px",
+            maxWidth: "350px",
+            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">
+              👤 {[salutation, firstname, lastname].filter(Boolean).join(" ")}
+            </Typography>
+          </Box>
+          {(street || zip || city) && (
+            <Box paddingBottom={2}>
+              <Typography variant="pi" textColor="neutral800">
+                📍 {[street, zip, city].filter(Boolean).join(" ")}
+              </Typography>
+            </Box>
+          )}
+          {telephonenumber && (
+            <Box paddingBottom={2}>
+              <Typography variant="pi" textColor="neutral800">
+                📞 {telephonenumber}
+              </Typography>
+            </Box>
+          )}
+          {email && (
+            <Box>
+              <Typography variant="pi" textColor="neutral800">
+                ✉️ {email}
+              </Typography>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default CustomerInfoPopover;
+

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

@@ -14,11 +14,14 @@ import {
 } 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,
@@ -27,7 +30,10 @@ const HistoryPanel = ({
   pageSize,
   onRefresh,
   onPageChange,
+  onPageSizeChange,
 }) => {
+  console.log(transactionHistory);
+
   return (
     <Box
       className="payment-container"
@@ -55,247 +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="Search"
-                    name="search"
-                    value={filters.search || ""}
-                    onChange={(e) => onFilterChange("search", e.target.value)}
-                    placeholder="Search by Status, Transaction ID, or Reference"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "250px" }}
-                  />
-                  <Select
-                    label="Request Type"
-                    name="request_type"
-                    value={filters.request_type || ""}
-                    onChange={(value) => onFilterChange("request_type", value)}
-                    placeholder="Select request type"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  >
-                    <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>
-                  <Select
-                    label="Payment Method"
-                    name="payment_method"
-                    value={filters.payment_method || ""}
-                    onChange={(value) =>
-                      onFilterChange("payment_method", value)
-                    }
-                    placeholder="Select payment method"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "200px" }}
-                  >
-                    <Option value="">All Methods</Option>
-                    <Option value="credit_card">Credit Card</Option>
-                    <Option value="paypal">PayPal</Option>
-                    <Option value="google_pay">Google Pay</Option>
-                    <Option value="apple_pay">Apple Pay</Option>
-                    <Option value="sofort">Sofort Banking</Option>
-                    <Option value="sepa">SEPA Direct Debit</Option>
-                  </Select>
-                  <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: "150px" }}
-                  />
-                  <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: "150px" }}
-                  />
-                  <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/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",
+    REDIRECT: "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>
   );
 };