strapi-plugin-payone-provider 1.5.8 → 1.6.1

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

@@ -0,0 +1,285 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Stack,
+  Typography,
+  TextInput,
+  Divider
+} from "@strapi/design-system";
+import { Search } from "@strapi/icons";
+import TransactionHistoryItem from "./TransactionHistoryItem";
+
+const HistoryPanel = ({
+  filters,
+  onFilterChange,
+  onFilterApply,
+  isLoadingHistory,
+  transactionHistory,
+  paginatedTransactions,
+  currentPage,
+  totalPages,
+  pageSize,
+  onRefresh,
+  onPageChange
+}) => {
+
+  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>
+        {/* 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>
+
+        <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

@@ -0,0 +1,238 @@
+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";
+
+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,
+  googlePayToken,
+  setGooglePayToken,
+  applePayToken,
+  setApplePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2,
+  onNavigateToConfig,
+}) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
+
+  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>
+          {isLiveMode && (
+            <Typography
+              variant="pi"
+              textColor="danger600"
+              style={{ fontSize: "14px", marginTop: "8px", fontWeight: "bold" }}
+            >
+              ⚠️ Payment Actions are disabled in live mode for security reasons.
+              Please use test mode for testing.
+            </Typography>
+          )}
+        </Box>
+
+        <PaymentMethodSelector
+          paymentMethod={paymentMethod}
+          setPaymentMethod={setPaymentMethod}
+          captureMode={captureMode}
+          setCaptureMode={setCaptureMode}
+          onNavigateToConfig={onNavigateToConfig}
+          settings={settings}
+        />
+
+        <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}
+            googlePayToken={googlePayToken}
+            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",
+          }}
+        >
+          <AuthorizationForm
+            paymentAmount={paymentAmount}
+            setPaymentAmount={setPaymentAmount}
+            authReference={authReference}
+            setAuthReference={setAuthReference}
+            isProcessingPayment={isProcessingPayment}
+            onAuthorization={onAuthorization}
+            paymentMethod={paymentMethod}
+            settings={settings}
+            googlePayToken={googlePayToken}
+            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/StatusBadge.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Badge } from "@strapi/design-system";
+
+const StatusBadge = ({ status }) => {
+  const statusColors = {
+    APPROVED: "success",
+    PENDING: "warning",
+    ERROR: "danger",
+    FAILED: "danger",
+    INVALID: "danger",
+    REDIRECT: "secondary"
+  };
+
+  return (
+    <Badge
+      textColor="neutral0"
+      backgroundColor={statusColors[status] || "default"}
+    >
+      {status}
+    </Badge>
+  );
+};
+
+export default StatusBadge;