strapi-plugin-payone-provider 1.6.5 → 1.6.7

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

@@ -8,7 +8,9 @@ import {
   Stack,
   Typography,
   TextInput,
-  Divider
+  Select,
+  Option,
+  Divider,
 } from "@strapi/design-system";
 import { Search } from "@strapi/icons";
 import TransactionHistoryItem from "./TransactionHistoryItem";
@@ -24,9 +26,8 @@ const HistoryPanel = ({
   totalPages,
   pageSize,
   onRefresh,
-  onPageChange
+  onPageChange,
 }) => {
-
   return (
     <Box
       className="payment-container"
@@ -37,10 +38,20 @@ const HistoryPanel = ({
     >
       <Flex direction="column" alignItems="stretch" gap={8}>
         <Box>
-          <Typography variant="beta" as="h2" className="payment-title" style={{ fontSize: '20px', marginBottom: '4px' }}>
+          <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' }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            className="payment-subtitle"
+            style={{ fontSize: "14px", marginTop: "4px" }}
+          >
             View and filter all payment transactions processed through Payone
           </Typography>
         </Box>
@@ -59,66 +70,69 @@ const HistoryPanel = ({
               <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."
+                    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: "200px" }}
+                    style={{ flex: 1, minWidth: "250px" }}
                   />
-                  <TextInput
+                  <Select
                     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"
+                    value={filters.request_type || ""}
+                    onChange={(value) => onFilterChange("request_type", value)}
+                    placeholder="Select request type"
                     className="payment-input"
                     style={{ flex: 1, minWidth: "200px" }}
-                  />
-                  <TextInput
-                    label="Reference"
-                    name="reference"
-                    value={filters.reference}
-                    onChange={(e) =>
-                      onFilterChange("reference", e.target.value)
+                  >
+                    <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="Enter reference"
+                    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}
+                    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" }}
+                    style={{ flex: 1, minWidth: "150px" }}
                   />
                   <TextInput
                     label="Date To"
                     name="date_to"
-                    value={filters.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" }}
+                    style={{ flex: 1, minWidth: "150px" }}
                   />
                   <Button
                     variant="default"
@@ -193,7 +207,7 @@ const HistoryPanel = ({
                   <CardBody padding={4}>
                     <Flex justifyContent="space-between" alignItems="center">
                       {transactionHistory.length > pageSize &&
-                        totalPages > 1 ? (
+                      totalPages > 1 ? (
                         <Flex gap={3} alignItems="center">
                           <Button
                             variant="default"
@@ -202,10 +216,13 @@ const HistoryPanel = ({
                               onPageChange(Math.max(1, currentPage - 1))
                             }
                             disabled={currentPage === 1}
-                            className={`payment-button ${currentPage === 1 ? '' : 'payment-button-success'}`}
+                            className={`payment-button ${
+                              currentPage === 1 ? "" : "payment-button-success"
+                            }`}
                             style={{
-                              background: currentPage === 1 ? "#f6f6f9" : undefined,
-                              color: currentPage === 1 ? "#666687" : undefined
+                              background:
+                                currentPage === 1 ? "#f6f6f9" : undefined,
+                              color: currentPage === 1 ? "#666687" : undefined,
                             }}
                           >
                             ← Previous
@@ -234,10 +251,20 @@ const HistoryPanel = ({
                               )
                             }
                             disabled={currentPage === totalPages}
-                            className={`payment-button ${currentPage === totalPages ? '' : 'payment-button-success'}`}
+                            className={`payment-button ${
+                              currentPage === totalPages
+                                ? ""
+                                : "payment-button-success"
+                            }`}
                             style={{
-                              background: currentPage === totalPages ? "#f6f6f9" : undefined,
-                              color: currentPage === totalPages ? "#666687" : undefined
+                              background:
+                                currentPage === totalPages
+                                  ? "#f6f6f9"
+                                  : undefined,
+                              color:
+                                currentPage === totalPages
+                                  ? "#666687"
+                                  : undefined,
                             }}
                           >
                             Next →

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

@@ -35,7 +35,6 @@ const PaymentActionsPanel = ({
   onCapture,
   onRefund,
   settings,
-  googlePayToken,
   setGooglePayToken,
   applePayToken,
   setApplePayToken,
@@ -52,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={{
@@ -100,6 +105,7 @@ const PaymentActionsPanel = ({
         cardcvc2={cardcvc2}
         setCardcvc2={setCardcvc2}
         onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
       />
     );
   }