strapi-plugin-payone-provider 4.6.9 → 5.6.9

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

@@ -1,94 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Button,
-  Card,
-  CardBody,
-  Flex,
-  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,
-  currentPage,
-  totalPages,
-  pageSize,
-  onRefresh,
-  onPageChange,
-  onPageSizeChange,
-}) => {
-  console.log(transactionHistory);
-
-  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>
-
-        {/* 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">
-            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/PaymentActionsPanel.jsx

@@ -1,280 +0,0 @@
-import React from "react";
-import { Box, Flex, Typography } from "@strapi/design-system";
-import PaymentMethodSelector from "./paymentActions/PaymentMethodSelector";
-import PreauthorizationForm from "./paymentActions/PreauthorizationForm";
-import AuthorizationForm from "./paymentActions/AuthorizationForm";
-import CaptureForm from "./paymentActions/CaptureForm";
-import RefundForm from "./paymentActions/RefundForm";
-import PaymentResult from "./paymentActions/PaymentResult";
-import ApplePayPanel from "./paymentActions/ApplePayPanel";
-
-const PaymentActionsPanel = ({
-  paymentAmount,
-  setPaymentAmount,
-  preauthReference,
-  setPreauthReference,
-  authReference,
-  setAuthReference,
-  captureTxid,
-  setCaptureTxid,
-  refundTxid,
-  setRefundTxid,
-  refundSequenceNumber,
-  setRefundSequenceNumber,
-  refundReference,
-  setRefundReference,
-  paymentMethod,
-  setPaymentMethod,
-  captureMode,
-  setCaptureMode,
-  isProcessingPayment,
-  paymentError,
-  paymentResult,
-  onPreauthorization,
-  onAuthorization,
-  onCapture,
-  onRefund,
-  settings,
-  setGooglePayToken,
-  applePayToken,
-  setApplePayToken,
-  cardtype,
-  setCardtype,
-  cardpan,
-  setCardpan,
-  cardexpiredate,
-  setCardexpiredate,
-  cardcvc2,
-  setCardcvc2,
-  onNavigateToConfig,
-}) => {
-  const mode = (settings?.mode || "test").toLowerCase();
-  const isLiveMode = mode === "live";
-
-  React.useEffect(() => {
-    if (isLiveMode && paymentMethod !== "apl") {
-      setPaymentMethod("apl");
-    }
-  }, [isLiveMode, paymentMethod]);
-
-  if (isLiveMode && paymentMethod !== "apl") {
-    return (
-      <Box
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "44px",
-        }}
-      >
-        <Typography variant="pi" textColor="neutral600">
-          Test Payments are only works in test mode.
-        </Typography>
-        <Typography variant="pi" textColor="neutral600">
-          Please switch to test mode in plugin settings to use test payments.
-        </Typography>
-      </Box>
-    );
-  }
-
-  if (paymentMethod === "apl") {
-    return (
-      <ApplePayPanel
-        paymentAmount={paymentAmount}
-        setPaymentAmount={setPaymentAmount}
-        authReference={authReference}
-        setAuthReference={setAuthReference}
-        isProcessingPayment={isProcessingPayment}
-        onAuthorization={onAuthorization}
-        paymentMethod={paymentMethod}
-        setPaymentMethod={setPaymentMethod}
-        captureMode={captureMode}
-        setCaptureMode={setCaptureMode}
-        settings={settings}
-        setGooglePayToken={setGooglePayToken}
-        applePayToken={applePayToken}
-        setApplePayToken={setApplePayToken}
-        cardtype={cardtype}
-        setCardtype={setCardtype}
-        cardpan={cardpan}
-        setCardpan={setCardpan}
-        cardexpiredate={cardexpiredate}
-        setCardexpiredate={setCardexpiredate}
-        cardcvc2={cardcvc2}
-        setCardcvc2={setCardcvc2}
-        onNavigateToConfig={onNavigateToConfig}
-        isLiveMode={isLiveMode}
-      />
-    );
-  }
-
-  return (
-    <Box
-      className="payment-container"
-      paddingTop={8}
-      paddingBottom={8}
-      paddingLeft={8}
-      paddingRight={8}
-    >
-      <Flex direction="column" alignItems="stretch" gap={6}>
-        <Box
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            gap: "8px",
-          }}
-        >
-          <Typography
-            variant="beta"
-            as="h2"
-            className="payment-title"
-            style={{ fontSize: "20px", marginBottom: "4px" }}
-          >
-            Payment Actions
-          </Typography>
-          <Typography
-            variant="pi"
-            textColor="neutral600"
-            className="payment-subtitle"
-            style={{ fontSize: "14px" }}
-          >
-            Process payments, captures, and refunds with multiple payment
-            methods
-          </Typography>
-        </Box>
-
-        <PaymentMethodSelector
-          paymentMethod={paymentMethod}
-          setPaymentMethod={setPaymentMethod}
-          captureMode={captureMode}
-          setCaptureMode={setCaptureMode}
-          onNavigateToConfig={onNavigateToConfig}
-          settings={settings}
-          isLiveMode={isLiveMode}
-        />
-
-        <hr className="payment-divider" />
-
-        <Box
-          className="payment-form-section"
-          style={{
-            opacity: isLiveMode ? 0.5 : 1,
-            pointerEvents: isLiveMode ? "none" : "auto",
-          }}
-        >
-          <PreauthorizationForm
-            paymentAmount={paymentAmount}
-            setPaymentAmount={setPaymentAmount}
-            preauthReference={preauthReference}
-            setPreauthReference={setPreauthReference}
-            isProcessingPayment={isProcessingPayment}
-            onPreauthorization={onPreauthorization}
-            paymentMethod={paymentMethod}
-            settings={settings}
-            setGooglePayToken={setGooglePayToken}
-            applePayToken={applePayToken}
-            setApplePayToken={setApplePayToken}
-            cardtype={cardtype}
-            setCardtype={setCardtype}
-            cardpan={cardpan}
-            setCardpan={setCardpan}
-            cardexpiredate={cardexpiredate}
-            setCardexpiredate={setCardexpiredate}
-            cardcvc2={cardcvc2}
-            setCardcvc2={setCardcvc2}
-            isLiveMode={isLiveMode}
-          />
-        </Box>
-
-        <hr className="payment-divider" />
-
-        <Box className="payment-form-section">
-          <AuthorizationForm
-            paymentAmount={paymentAmount}
-            setPaymentAmount={setPaymentAmount}
-            authReference={authReference}
-            setAuthReference={setAuthReference}
-            isProcessingPayment={isProcessingPayment}
-            onAuthorization={onAuthorization}
-            paymentMethod={paymentMethod}
-            settings={settings}
-            setGooglePayToken={setGooglePayToken}
-            applePayToken={applePayToken}
-            setApplePayToken={setApplePayToken}
-            cardtype={cardtype}
-            setCardtype={setCardtype}
-            cardpan={cardpan}
-            setCardpan={setCardpan}
-            cardexpiredate={cardexpiredate}
-            setCardexpiredate={setCardexpiredate}
-            cardcvc2={cardcvc2}
-            setCardcvc2={setCardcvc2}
-            isLiveMode={isLiveMode}
-          />
-        </Box>
-
-        <hr className="payment-divider" />
-
-        <Box
-          className="payment-form-section"
-          style={{
-            opacity: isLiveMode ? 0.5 : 1,
-            pointerEvents: isLiveMode ? "none" : "auto",
-          }}
-        >
-          <CaptureForm
-            paymentAmount={paymentAmount}
-            setPaymentAmount={setPaymentAmount}
-            captureTxid={captureTxid}
-            setCaptureTxid={setCaptureTxid}
-            isProcessingPayment={isProcessingPayment}
-            onCapture={onCapture}
-          />
-        </Box>
-
-        <hr className="payment-divider" />
-
-        <Box
-          className="payment-form-section"
-          style={{
-            opacity: isLiveMode ? 0.5 : 1,
-            pointerEvents: isLiveMode ? "none" : "auto",
-          }}
-        >
-          <RefundForm
-            paymentAmount={paymentAmount}
-            setPaymentAmount={setPaymentAmount}
-            refundTxid={refundTxid}
-            setRefundTxid={setRefundTxid}
-            refundSequenceNumber={refundSequenceNumber}
-            setRefundSequenceNumber={setRefundSequenceNumber}
-            refundReference={refundReference}
-            setRefundReference={setRefundReference}
-            isProcessingPayment={isProcessingPayment}
-            onRefund={onRefund}
-          />
-        </Box>
-
-        <hr className="payment-divider" />
-
-        <PaymentResult
-          paymentError={paymentError}
-          paymentResult={paymentResult}
-        />
-
-        <Box paddingTop={4}>
-          <Typography variant="sigma" textColor="neutral600">
-            Note: These payment actions allow you to test the complete payment
-            flow: Preauthorization → Capture → Refund. Make sure to use valid
-            Transaction IDs for capture and refund operations.
-          </Typography>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-export default PaymentActionsPanel;

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

@@ -1,113 +0,0 @@
-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/TransactionHistoryTable/TransactionHistoryTableFilters.jsx

@@ -1,113 +0,0 @@
-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;