strapi-plugin-payone-provider 1.1.3 → 1.2.4

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

@@ -29,22 +29,21 @@ const HistoryPanel = ({
 
   return (
     <Box
-      hasRadius
-      shadow="filterShadow"
+      className="payment-container"
       paddingTop={8}
       paddingBottom={8}
       paddingLeft={8}
       paddingRight={8}
-      style={{
-        borderRadius: "12px",
-        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.08)",
-        border: "1px solid #f6f6f9"
-      }}
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
-        <Typography variant="beta" as="h2" marginBottom={2}>
-          Transaction Management
-        </Typography>
+        <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}>
@@ -55,7 +54,7 @@ const HistoryPanel = ({
               Filter transactions by status, type, date range, and more
             </Typography>
           </Box>
-          <Card style={{ borderRadius: "8px", border: "1px solid #e4e2e7" }}>
+          <Card className="payment-card">
             <CardBody padding={6}>
               <Stack spacing={4}>
                 <Flex gap={4} wrap="wrap" alignItems="center">
@@ -65,6 +64,7 @@ const HistoryPanel = ({
                     value={filters.status}
                     onChange={(e) => onFilterChange("status", e.target.value)}
                     placeholder="APPROVED, ERROR, etc."
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <TextInput
@@ -75,6 +75,7 @@ const HistoryPanel = ({
                       onFilterChange("request_type", e.target.value)
                     }
                     placeholder="preauthorization, authorization, etc."
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <TextInput
@@ -83,6 +84,7 @@ const HistoryPanel = ({
                     value={filters.txid}
                     onChange={(e) => onFilterChange("txid", e.target.value)}
                     placeholder="Enter TxId"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <TextInput
@@ -93,6 +95,7 @@ const HistoryPanel = ({
                       onFilterChange("reference", e.target.value)
                     }
                     placeholder="Enter reference"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <TextInput
@@ -104,6 +107,7 @@ const HistoryPanel = ({
                     }
                     placeholder="YYYY-MM-DD"
                     type="date"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <TextInput
@@ -113,6 +117,7 @@ const HistoryPanel = ({
                     onChange={(e) => onFilterChange("date_to", e.target.value)}
                     placeholder="YYYY-MM-DD"
                     type="date"
+                    className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
                   />
                   <Button
@@ -120,6 +125,7 @@ const HistoryPanel = ({
                     onClick={onFilterApply}
                     loading={isLoadingHistory}
                     startIcon={<Search />}
+                    className="payment-button payment-button-primary"
                   >
                     Apply Filters
                   </Button>
@@ -155,13 +161,7 @@ const HistoryPanel = ({
                 loading={isLoadingHistory}
                 startIcon={<Search />}
                 size="S"
-                style={{
-                  background: "#28a745",
-                  border: "none",
-                  color: "white",
-                  fontWeight: "600",
-                  borderRadius: "8px"
-                }}
+                className="payment-button payment-button-success"
               >
                 Refresh
               </Button>
@@ -189,9 +189,7 @@ const HistoryPanel = ({
 
               {/* Pagination */}
               <Box paddingTop={6} paddingBottom={4}>
-                <Card
-                  style={{ borderRadius: "8px", border: "1px solid #e4e2e7" }}
-                >
+                <Card className="payment-card">
                   <CardBody padding={4}>
                     <Flex justifyContent="space-between" alignItems="center">
                       {transactionHistory.length > pageSize &&
@@ -204,13 +202,10 @@ const HistoryPanel = ({
                               onPageChange(Math.max(1, currentPage - 1))
                             }
                             disabled={currentPage === 1}
+                            className={`payment-button ${currentPage === 1 ? '' : 'payment-button-success'}`}
                             style={{
-                              background:
-                                currentPage === 1 ? "#f6f6f9" : "#28a745",
-                              border: "none",
-                              color: currentPage === 1 ? "#666687" : "white",
-                              fontWeight: "600",
-                              borderRadius: "6px"
+                              background: currentPage === 1 ? "#f6f6f9" : undefined,
+                              color: currentPage === 1 ? "#666687" : undefined
                             }}
                           >
                             ← Previous
@@ -239,18 +234,10 @@ const HistoryPanel = ({
                               )
                             }
                             disabled={currentPage === totalPages}
+                            className={`payment-button ${currentPage === totalPages ? '' : 'payment-button-success'}`}
                             style={{
-                              background:
-                                currentPage === totalPages
-                                  ? "#f6f6f9"
-                                  : "#28a745",
-                              border: "none",
-                              color:
-                                currentPage === totalPages
-                                  ? "#666687"
-                                  : "white",
-                              fontWeight: "600",
-                              borderRadius: "6px"
+                              background: currentPage === totalPages ? "#f6f6f9" : undefined,
+                              color: currentPage === totalPages ? "#666687" : undefined
                             }}
                           >
                             Next →

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

@@ -1,19 +1,11 @@
 import React from "react";
-import {
-  Box,
-  Button,
-  Card,
-  CardBody,
-  Divider,
-  Flex,
-  Stack,
-  Typography,
-  TextInput,
-  Alert
-} from "@strapi/design-system";
-import { Play } from "@strapi/icons";
-import StatusBadge from "./StatusBadge";
-import { formatTransactionData } from "../../utils/formatTransactionData";
+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,
@@ -30,293 +22,116 @@ const PaymentActionsPanel = ({
   setRefundSequenceNumber,
   refundReference,
   setRefundReference,
+  paymentMethod,
+  setPaymentMethod,
+  captureMode,
+  setCaptureMode,
   isProcessingPayment,
   paymentError,
   paymentResult,
   onPreauthorization,
   onAuthorization,
   onCapture,
-  onRefund
+  onRefund,
+  settings,
+  googlePayToken,
+  setGooglePayToken
 }) => {
   return (
     <Box
-      background="neutral0"
-      hasRadius
-      shadow="filterShadow"
-      paddingTop={6}
-      paddingBottom={6}
-      paddingLeft={7}
-      paddingRight={7}
+      className="payment-container"
+      paddingTop={8}
+      paddingBottom={8}
+      paddingLeft={8}
+      paddingRight={8}
     >
       <Flex direction="column" alignItems="stretch" gap={6}>
-        <Typography variant="beta" as="h2">
-          Payment Actions
-        </Typography>
-
-        {/* Preauthorization */}
         <Box>
-          <Flex direction="column" alignItems="stretch" gap={4}>
-            <Typography variant="delta" as="h3">
-              Preauthorization
-            </Typography>
-            <Typography variant="pi" textColor="neutral600">
-              Reserve an amount on a credit card without capturing it
-              immediately.
-            </Typography>
-
-            <Flex gap={4}>
-              <TextInput
-                label="Amount (in cents) *"
-                name="paymentAmount"
-                value={paymentAmount}
-                onChange={(e) => setPaymentAmount(e.target.value)}
-                placeholder="Enter amount (e.g., 1000 for €10.00)"
-                hint="Amount in cents (e.g., 1000 = €10.00)"
-                required
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Reference *"
-                name="preauthReference"
-                value={preauthReference}
-                onChange={(e) => setPreauthReference(e.target.value)}
-                placeholder="Enter reference"
-                hint="Reference for this transaction"
-                required
-                style={{ flex: 1 }}
-              />
-            </Flex>
-
-            <Button
-              variant="default"
-              onClick={onPreauthorization}
-              loading={isProcessingPayment}
-              startIcon={<Play />}
-              fullWidth={false}
-              disabled={!paymentAmount.trim() || !preauthReference.trim()}
-            >
-              Process Preauthorization
-            </Button>
-          </Flex>
+          <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>
 
-        <Divider />
-
-        {/* Authorization */}
-        <Box>
-          <Flex direction="column" alignItems="stretch" gap={4}>
-            <Typography variant="delta" as="h3">
-              Authorization
-            </Typography>
-            <Typography variant="pi" textColor="neutral600">
-              Authorize and capture an amount immediately.
-            </Typography>
-
-            <Flex gap={4}>
-              <TextInput
-                label="Amount (in cents) *"
-                name="authAmount"
-                value={paymentAmount}
-                onChange={(e) => setPaymentAmount(e.target.value)}
-                placeholder="Enter amount (e.g., 1000 for €10.00)"
-                hint="Amount in cents (e.g., 1000 = €10.00)"
-                required
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Reference *"
-                name="authReference"
-                value={authReference}
-                onChange={(e) => setAuthReference(e.target.value)}
-                placeholder="Enter reference"
-                hint="Reference for this transaction"
-                required
-                style={{ flex: 1 }}
-              />
-            </Flex>
-
-            <Button
-              variant="default"
-              onClick={onAuthorization}
-              loading={isProcessingPayment}
-              startIcon={<Play />}
-              fullWidth={false}
-              disabled={!paymentAmount.trim() || !authReference.trim()}
-            >
-              Process Authorization
-            </Button>
-          </Flex>
+        <PaymentMethodSelector
+          paymentMethod={paymentMethod}
+          setPaymentMethod={setPaymentMethod}
+          captureMode={captureMode}
+          setCaptureMode={setCaptureMode}
+        />
+
+        <hr className="payment-divider" />
+
+        <Box className="payment-form-section">
+          <PreauthorizationForm
+            paymentAmount={paymentAmount}
+            setPaymentAmount={setPaymentAmount}
+            preauthReference={preauthReference}
+            setPreauthReference={setPreauthReference}
+            isProcessingPayment={isProcessingPayment}
+            onPreauthorization={onPreauthorization}
+            paymentMethod={paymentMethod}
+            settings={settings}
+            googlePayToken={googlePayToken}
+            setGooglePayToken={setGooglePayToken}
+          />
         </Box>
 
-        <Divider />
-
-        {/* Capture */}
-        <Box>
-          <Flex direction="column" alignItems="stretch" gap={4}>
-            <Typography variant="delta" as="h3">
-              Capture
-            </Typography>
-            <Typography variant="pi" textColor="neutral600">
-              Capture a previously authorized amount. Note: Reference parameter
-              is not supported by Payone capture.
-            </Typography>
-
-            <Flex gap={4}>
-              <TextInput
-                label="Transaction ID"
-                name="captureTxid"
-                value={captureTxid}
-                onChange={(e) => setCaptureTxid(e.target.value)}
-                placeholder="Enter TxId from preauthorization"
-                hint="Transaction ID from a previous preauthorization"
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Amount (in cents)"
-                name="captureAmount"
-                value={paymentAmount}
-                onChange={(e) => setPaymentAmount(e.target.value)}
-                placeholder="1000"
-                hint="Amount in cents to capture"
-                style={{ flex: 1 }}
-              />
-            </Flex>
-
-            <Button
-              variant="default"
-              onClick={onCapture}
-              loading={isProcessingPayment}
-              startIcon={<Play />}
-              fullWidth={false}
-              disabled={!captureTxid.trim() || !paymentAmount.trim()}
-            >
-              Process Capture
-            </Button>
-          </Flex>
+        <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}
+            googlePayToken={googlePayToken}
+            setGooglePayToken={setGooglePayToken}
+          />
         </Box>
 
-        <Divider />
-
-        {/* Refund */}
-        <Box>
-          <Flex direction="column" alignItems="stretch" gap={4}>
-            <Typography variant="delta" as="h3">
-              Refund
-            </Typography>
-            <Typography variant="pi" textColor="neutral600">
-              Refund a previously captured amount.
-            </Typography>
-
-            <Flex gap={4}>
-              <TextInput
-                label="Transaction ID"
-                name="refundTxid"
-                value={refundTxid}
-                onChange={(e) => setRefundTxid(e.target.value)}
-                placeholder="Enter TxId from capture"
-                hint="Transaction ID from a previous capture"
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Sequence Number"
-                name="refundSequenceNumber"
-                value={refundSequenceNumber}
-                onChange={(e) => setRefundSequenceNumber(e.target.value)}
-                placeholder="2"
-                hint="Sequence number for this refund (1-127) and by default for first 2"
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Amount (in cents)"
-                name="refundAmount"
-                value={paymentAmount}
-                onChange={(e) => setPaymentAmount(e.target.value)}
-                placeholder="1000"
-                hint="Amount in cents to refund (will be negative)"
-                style={{ flex: 1 }}
-              />
-
-              <TextInput
-                label="Reference"
-                name="refundReference"
-                value={refundReference}
-                onChange={(e) => setRefundReference(e.target.value)}
-                placeholder="Optional reference"
-                hint="Optional reference for this refund"
-                style={{ flex: 1 }}
-              />
-            </Flex>
-
-            <Button
-              variant="default"
-              onClick={onRefund}
-              loading={isProcessingPayment}
-              startIcon={<Play />}
-              fullWidth={false}
-              disabled={!refundTxid.trim() || !paymentAmount.trim()}
-            >
-              Process Refund
-            </Button>
-          </Flex>
+        <hr className="payment-divider" />
+
+        <Box className="payment-form-section">
+          <CaptureForm
+            paymentAmount={paymentAmount}
+            setPaymentAmount={setPaymentAmount}
+            captureTxid={captureTxid}
+            setCaptureTxid={setCaptureTxid}
+            isProcessingPayment={isProcessingPayment}
+            onCapture={onCapture}
+          />
         </Box>
 
-        <Divider />
-
-        {paymentError && (
-          <Alert variant="danger" title="Error">
-            {paymentError}
-          </Alert>
-        )}
-
-        {paymentResult && (
-          <Card>
-            <CardBody>
-              <Stack spacing={4}>
-                <Flex justifyContent="space-between" alignItems="center">
-                  <Typography variant="delta" as="h3">
-                    Payment Result
-                  </Typography>
-                  {paymentResult.Status && (
-                    <StatusBadge status={paymentResult.Status} />
-                  )}
-                </Flex>
+        <hr className="payment-divider" />
+
+        <Box className="payment-form-section">
+          <RefundForm
+            paymentAmount={paymentAmount}
+            setPaymentAmount={setPaymentAmount}
+            refundTxid={refundTxid}
+            setRefundTxid={setRefundTxid}
+            refundSequenceNumber={refundSequenceNumber}
+            setRefundSequenceNumber={setRefundSequenceNumber}
+            refundReference={refundReference}
+            setRefundReference={setRefundReference}
+            isProcessingPayment={isProcessingPayment}
+            onRefund={onRefund}
+          />
+        </Box>
 
-                <Divider />
+        <hr className="payment-divider" />
 
-                <Box>
-                  <Stack spacing={3}>
-                    {formatTransactionData(paymentResult).map((item, index) => (
-                      <Flex
-                        key={index}
-                        justifyContent="space-between"
-                        alignItems="start"
-                      >
-                        <Typography
-                          variant="pi"
-                          textColor="neutral600"
-                          style={{ minWidth: "200px" }}
-                        >
-                          {item.key}:
-                        </Typography>
-                        <Typography
-                          variant="pi"
-                          style={{ flex: 1, textAlign: "right" }}
-                        >
-                          {item.value}
-                        </Typography>
-                      </Flex>
-                    ))}
-                  </Stack>
-                </Box>
-              </Stack>
-            </CardBody>
-          </Card>
-        )}
+        <PaymentResult
+          paymentError={paymentError}
+          paymentResult={paymentResult}
+        />
 
         <Box paddingTop={4}>
           <Typography variant="sigma" textColor="neutral600">

package/admin/src/pages/App/components/TransactionHistoryItem.js

@@ -75,6 +75,7 @@ const TransactionHistoryItem = ({ transaction }) => {
 
   return (
     <Card
+      className="payment-transaction-item"
       background="neutral0"
       hasRadius
       shadow="filterShadow"
@@ -147,6 +148,7 @@ const TransactionHistoryItem = ({ transaction }) => {
             size="S"
             onClick={() => setIsExpanded(!isExpanded)}
             startIcon={isExpanded ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
+            className="payment-button payment-button-primary"
           >
             {isExpanded ? 'Hide Details' : 'Show Details'}
           </Button>
@@ -154,7 +156,7 @@ const TransactionHistoryItem = ({ transaction }) => {
 
         {/* Expanded Details */}
         {isExpanded && (
-          <Box marginTop={4}>
+          <Box marginTop={4} style={{ animation: 'fadeIn 0.3s ease-out' }}>
             <Stack spacing={4}>
               {/* Error Message */}
               {transaction.status === 'ERROR' && (
@@ -163,6 +165,7 @@ const TransactionHistoryItem = ({ transaction }) => {
                   padding={3}
                   background="danger100"
                   hasRadius
+                  className="payment-alert"
                   style={{
                     border: '1px solid',
                     borderColor: 'var(--strapi-colors-danger200)',