strapi-plugin-payone-provider 4.6.9 → 5.6.10

package/admin/src/pages/App/components/payment-actions/PreauthorizationForm.jsx

@@ -0,0 +1,280 @@
+import * as React from "react";
+import { Box, Flex, Typography, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../GooglePaybutton";
+import CardDetailsInput from "./CardDetailsInput";
+import RenderInput from "../RenderInput";
+import {
+  getSalutationOptions,
+  getGenderOptions,
+  getCurrencyOptions,
+  getCountryOptions,
+} from "../../../utils/countryLanguageUtils";
+
+const PreauthorizationForm = ({ paymentActions, settings }) => {
+  const handleGooglePayToken = (token) => {
+    if (!token) {
+      return;
+    }
+    paymentActions.handleFieldChange("googlePayToken", token);
+    paymentActions.handlePreauthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    console.error("Google Pay error:", error);
+  };
+
+  const countryOptions = getCountryOptions(
+    paymentActions.paymentState.paymentMethod
+  );
+
+  const salutationOptions = getSalutationOptions(
+    paymentActions.paymentState.country || "US"
+  );
+  const genderOptions = getGenderOptions(
+    paymentActions.paymentState.country || "US"
+  );
+  const currencyOptions = getCurrencyOptions();
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="row" gap={2}>
+        <Typography
+          variant="omega"
+          fontWeight="semiBold"
+          textColor="neutral800"
+          className="payment-form-title"
+        >
+          Preauthorization
+        </Typography>
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
+          Reserve an amount on a credit card without capturing it immediately.
+        </Typography>
+      </Flex>
+
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+          gap: "16px",
+        }}
+      >
+        <RenderInput
+          name="paymentAmount"
+          label="Amount *"
+          value={paymentActions.paymentState.paymentAmount || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("paymentAmount", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Enter amount (e.g., 1000 for €10.00)"
+          required
+          tooltipContent="Amount in cents (e.g., 1000 = €10.00)"
+        />
+
+        <RenderInput
+          name="firstname"
+          label="First Name"
+          value={paymentActions.paymentState.firstname || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("firstname", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="John"
+          tooltipContent="Customer first name"
+        />
+
+        <RenderInput
+          name="lastname"
+          label="Last Name"
+          value={paymentActions.paymentState.lastname || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("lastname", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Doe"
+          tooltipContent="Customer last name"
+        />
+
+        <RenderInput
+          name="email"
+          label="Email"
+          value={paymentActions.paymentState.email || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("email", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="john.doe@example.com"
+          tooltipContent="Customer email address"
+        />
+
+        <RenderInput
+          name="telephonenumber"
+          label="Phone Number"
+          value={paymentActions.paymentState.telephonenumber || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("telephonenumber", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="+4917512345678"
+          tooltipContent="Customer phone number"
+        />
+
+        <RenderInput
+          name="gender"
+          label="Gender"
+          value={paymentActions.paymentState.gender || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("gender", e.target.value)
+          }
+          inputType="select"
+          options={genderOptions}
+          placeholder="Select gender"
+          tooltipContent="Customer gender"
+        />
+
+        <RenderInput
+          name="salutation"
+          label="Salutation"
+          value={paymentActions.paymentState.salutation || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("salutation", e.target.value)
+          }
+          inputType="select"
+          options={salutationOptions}
+          placeholder="Select salutation"
+          tooltipContent="Customer salutation"
+        />
+
+        <RenderInput
+          name="country"
+          label="Country"
+          value={paymentActions.paymentState.country || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("country", e.target.value)
+          }
+          inputType="select"
+          options={countryOptions}
+          placeholder="Select country"
+          tooltipContent="Billing address country"
+        />
+
+        <RenderInput
+          name="currency"
+          label="Currency"
+          value={paymentActions.paymentState.currency || "EUR"}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("currency", e.target.value)
+          }
+          inputType="select"
+          options={currencyOptions}
+          placeholder="Select currency"
+          tooltipContent="Currency code"
+        />
+
+        <RenderInput
+          name="city"
+          label="City"
+          value={paymentActions.paymentState.city || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("city", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Berlin"
+          tooltipContent="Billing address city"
+        />
+
+        <RenderInput
+          name="street"
+          label="Street"
+          value={paymentActions.paymentState.street || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("street", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Main Street 123"
+          tooltipContent="Billing address street"
+        />
+
+        <RenderInput
+          name="zip"
+          label="ZIP Code"
+          value={paymentActions.paymentState.zip || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("zip", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="12345"
+          tooltipContent="Billing address ZIP code"
+        />
+      </Box>
+
+      {paymentActions.paymentState.paymentMethod === "cc" &&
+        settings?.settings?.enable3DSecure && (
+          <Box marginTop={4}>
+            <CardDetailsInput
+              cardtype={paymentActions.paymentState.cardtype}
+              setCardtype={(value) =>
+                paymentActions.handleFieldChange("cardtype", value)
+              }
+              cardpan={paymentActions.paymentState.cardpan}
+              setCardpan={(value) =>
+                paymentActions.handleFieldChange("cardpan", value)
+              }
+              cardexpiredate={paymentActions.paymentState.cardexpiredate}
+              setCardexpiredate={(value) =>
+                paymentActions.handleFieldChange("cardexpiredate", value)
+              }
+              cardcvc2={paymentActions.paymentState.cardcvc2}
+              setCardcvc2={(value) =>
+                paymentActions.handleFieldChange("cardcvc2", value)
+              }
+            />
+          </Box>
+        )}
+
+      {paymentActions.paymentState.paymentMethod === "gpp" ? (
+        <GooglePayButton
+          amount={paymentActions.paymentState.paymentAmount}
+          currency="EUR"
+          onTokenReceived={handleGooglePayToken}
+          onError={handleGooglePayError}
+          settings={settings?.settings}
+        />
+      ) : paymentActions.paymentState.paymentMethod === "apl" ? (
+        <Box>
+          <Typography variant="pi" textColor="neutral600">
+            Apple Pay is only supported for Authorization, not Preauthorization.
+          </Typography>
+        </Box>
+      ) : (
+        <Button
+          variant="default"
+          onClick={() => paymentActions.handlePreauthorization()}
+          loading={paymentActions.isProcessingPayment}
+          startIcon={<Play />}
+          style={{ maxWidth: "200px" }}
+          className="payment-button payment-button-primary"
+          disabled={
+            !paymentActions.paymentState.paymentAmount.trim() ||
+            (paymentActions.paymentState.paymentMethod === "cc" &&
+              settings?.settings?.enable3DSecure !== false &&
+              (!paymentActions.paymentState.cardtype ||
+                !paymentActions.paymentState.cardpan ||
+                !paymentActions.paymentState.cardexpiredate ||
+                !paymentActions.paymentState.cardcvc2)) ||
+            paymentActions.isLiveMode
+          }
+        >
+          Process Preauthorization
+        </Button>
+      )}
+    </Flex>
+  );
+};
+
+export default PreauthorizationForm;

package/admin/src/pages/App/components/payment-actions/RefundForm.jsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { Box, Flex, Typography, Button } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import RenderInput from "../RenderInput";
+import { getCurrencyOptions } from "../../../utils/countryLanguageUtils";
+
+const RefundForm = ({ paymentActions }) => {
+  const currencyOptions = getCurrencyOptions();
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <Flex direction="row" gap={2}>
+        <Typography
+          variant="omega"
+          fontWeight="semiBold"
+          textColor="neutral800"
+          className="payment-form-title"
+        >
+          Refund
+        </Typography>
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
+          Refund a previously captured amount.
+        </Typography>
+      </Flex>
+
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+          gap: "16px",
+        }}
+      >
+        <RenderInput
+          name="refundTxid"
+          label="Transaction ID *"
+          value={paymentActions.paymentState.refundTxid || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("refundTxid", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Enter TxId from capture"
+          required
+          tooltipContent="Transaction ID from a previous capture"
+        />
+
+        <RenderInput
+          name="refundSequenceNumber"
+          label="Sequence Number"
+          value={paymentActions.paymentState.refundSequenceNumber || "2"}
+          onChange={(e) =>
+            paymentActions.handleFieldChange(
+              "refundSequenceNumber",
+              e.target.value
+            )
+          }
+          inputType="textInput"
+          placeholder="2"
+          tooltipContent="Sequence number for this refund (1-127), default is 2 for first refund"
+        />
+
+        <RenderInput
+          name="refundAmount"
+          label="Amount *"
+          value={paymentActions.paymentState.paymentAmount || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("paymentAmount", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="1000"
+          required
+          tooltipContent="Amount in cents to refund (will be negative automatically)"
+        />
+
+        <RenderInput
+          name="refundCurrency"
+          label="Currency"
+          value={paymentActions.paymentState.refundCurrency || "EUR"}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("refundCurrency", e.target.value)
+          }
+          inputType="select"
+          options={currencyOptions}
+          placeholder="EUR"
+          tooltipContent="Currency code (e.g., EUR, USD)"
+        />
+
+        <RenderInput
+          name="refundReference"
+          label="Reference"
+          value={paymentActions.paymentState.refundReference || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("refundReference", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="Optional reference"
+          tooltipContent="Optional reference for this refund"
+        />
+      </Box>
+
+      <Button
+        variant="default"
+        onClick={() => paymentActions.handleRefund()}
+        loading={paymentActions.isProcessingPayment}
+        startIcon={<Play />}
+        style={{ maxWidth: "200px" }}
+        className="payment-button payment-button-primary"
+        disabled={
+          !paymentActions.paymentState.refundTxid.trim() ||
+          !paymentActions.paymentState.paymentAmount.trim()
+        }
+      >
+        Process Refund
+      </Button>
+    </Flex>
+  );
+};
+
+export default RefundForm;

package/admin/src/pages/App/components/transaction-history/FiltersPanel.jsx

@@ -0,0 +1,145 @@
+import { Box, Button } from "@strapi/design-system";
+import RenderInput from "../RenderInput";
+import { ArrowsCounterClockwise } from "@strapi/icons";
+
+const FiltersPanel = ({ filters, handleFiltersChange }) => {
+  const handleReset = () => {
+    handleFiltersChange({
+      search: "",
+      status: "",
+      request_type: "",
+      payment_method: "",
+      date_from: "",
+      date_to: "",
+    });
+  };
+
+  const filterOptions = [
+    {
+      name: "search",
+      label: "Search",
+      type: "text",
+      inputType: "textInput",
+      placeholder: "Search by reference or transaction ID",
+      tooltipContent:
+        "Search by reference or transaction ID to filter transactions",
+      flex: 1,
+    },
+    {
+      name: "status",
+      label: "Status",
+      type: "enumeration",
+      inputType: "select",
+      placeholder: "All Statuses",
+      tooltipContent:
+        "Filter transactions by their status (Approved, Error, Redirect, Invalid, Pending, Cancelled)",
+      options: [
+        { value: "", label: "All Statuses" },
+        { value: "APPROVED", label: "Approved" },
+        { value: "ERROR", label: "Error" },
+        { value: "REDIRECT", label: "Redirect" },
+        { value: "INVALID", label: "Invalid" },
+        { value: "PENDING", label: "Pending" },
+        { value: "CANCELLED", label: "Cancelled" },
+      ],
+      flex: 1,
+    },
+    {
+      name: "request_type",
+      label: "Request Type",
+      type: "enumeration",
+      inputType: "select",
+      placeholder: "All Types",
+      tooltipContent:
+        "Filter transactions by request type (Preauthorization, Authorization, Capture, Refund)",
+      options: [
+        { value: "", label: "All Types" },
+        { value: "preauthorization", label: "Preauthorization" },
+        { value: "authorization", label: "Authorization" },
+        { value: "capture", label: "Capture" },
+        { value: "refund", label: "Refund" },
+      ],
+      flex: 1,
+    },
+    {
+      name: "payment_method",
+      label: "Payment Method",
+      type: "enumeration",
+      inputType: "select",
+      placeholder: "All Methods",
+      tooltipContent:
+        "Filter transactions by payment method (Credit Card, PayPal, Google Pay, Apple Pay, Sofort Banking, SEPA Direct Debit)",
+      options: [
+        { value: "", label: "All Methods" },
+        { value: "credit_card", label: "Credit Card" },
+        { value: "paypal", label: "PayPal" },
+        { value: "google_pay", label: "Google Pay" },
+        { value: "apple_pay", label: "Apple Pay" },
+        { value: "sofort", label: "Sofort Banking" },
+        { value: "sepa", label: "SEPA Direct Debit" },
+      ],
+      flex: 1,
+    },
+  ];
+
+  return (
+    <Box
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+        gap: "16px",
+        alignItems: "end",
+      }}
+    >
+      {filterOptions.map((filter) => (
+        <RenderInput
+          key={filter.name}
+          name={filter.name}
+          value={filters[filter.name] || ""}
+          onChange={(e) => {
+            const value =
+              filter.inputType === "textInput"
+                ? e.target.value
+                : e.target?.value || e;
+            handleFiltersChange({ [filter.name]: value });
+          }}
+          inputType={filter.inputType}
+          label={filter.label}
+          placeholder={filter.placeholder}
+          tooltipContent={filter.tooltipContent}
+          options={filter.options}
+        />
+      ))}
+
+      <RenderInput
+        name="date_from"
+        value={filters.date_from || ""}
+        onChange={(e) => handleFiltersChange({ date_from: e.target.value })}
+        inputType="dateInput"
+        label="Date From"
+        tooltipContent="Filter transactions from this date onwards. Select the starting date for the date range filter."
+      />
+
+      <RenderInput
+        name="date_to"
+        value={filters.date_to || ""}
+        onChange={(e) => handleFiltersChange({ date_to: e.target.value })}
+        inputType="dateInput"
+        label="Date To"
+        tooltipContent="Filter transactions up to this date. Select the ending date for the date range filter."
+      />
+
+      <Button
+        variant="secondary"
+        onClick={handleReset}
+        startIcon={<ArrowsCounterClockwise />}
+        size="S"
+        maxWidth="100px"
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+};
+
+export default FiltersPanel;

package/admin/src/pages/App/components/transaction-history/HistoryPanel.jsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Box, Flex, Typography, Divider } from "@strapi/design-system";
+import TransactionTable from "./TransactionTable";
+
+const HistoryPanel = () => {
+  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>
+
+        <Divider />
+
+        <TransactionTable />
+
+        <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;