strapi-plugin-payone-provider 4.6.10 → 4.6.12

package/admin/src/pages/App/components/paymentActions/preauthorization/PreauthorizationForm.jsx

@@ -0,0 +1,134 @@
+import { Box, Flex } from "@strapi/design-system";
+import PreauthorizationFormHeader from "./PreauthorizationFormHeader";
+import PreauthorizationFormFields from "./PreauthorizationFormFields";
+import PreauthorizationPaymentButtons from "./PreauthorizationPaymentButtons";
+import CardDetailsInput from "../CardDetailsInput";
+
+const PreauthorizationForm = ({
+  paymentAmount,
+  setPaymentAmount,
+  preauthReference,
+  setPreauthReference,
+  isProcessingPayment,
+  onPreauthorization,
+  paymentMethod,
+  settings,
+  setGooglePayToken,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  setCardcvc2,
+  isLiveMode = false,
+  firstname,
+  setFirstname,
+  lastname,
+  setLastname,
+  email,
+  setEmail,
+  telephonenumber,
+  setTelephonenumber,
+  gender,
+  setGender,
+  salutation,
+  setSalutation,
+  country,
+  setCountry,
+  currency,
+  setCurrency,
+  city,
+  setCity,
+  street,
+  setStreet,
+  zip,
+  setZip,
+}) => {
+  const handleGooglePayToken = (token, paymentData) => {
+    if (!token) {
+      return;
+    }
+    setGooglePayToken(token);
+    onPreauthorization(token);
+  };
+
+  const handleGooglePayError = (error) => {
+    console.error("Google Pay error:", error);
+  };
+
+  const isCardDetailsValid =
+    !!cardtype && !!cardpan && !!cardexpiredate && !!cardcvc2;
+
+  const isDisabled =
+    !paymentAmount.trim() ||
+    (paymentMethod === "cc" &&
+      settings?.enable3DSecure !== false &&
+      !isCardDetailsValid);
+
+  return (
+    <Flex direction="column" alignItems="stretch" gap={4}>
+      <PreauthorizationFormHeader />
+
+      <PreauthorizationFormFields
+        paymentAmount={paymentAmount}
+        setPaymentAmount={setPaymentAmount}
+        preauthReference={preauthReference}
+        setPreauthReference={setPreauthReference}
+        firstname={firstname}
+        setFirstname={setFirstname}
+        lastname={lastname}
+        setLastname={setLastname}
+        email={email}
+        setEmail={setEmail}
+        telephonenumber={telephonenumber}
+        setTelephonenumber={setTelephonenumber}
+        gender={gender}
+        setGender={setGender}
+        salutation={salutation}
+        setSalutation={setSalutation}
+        country={country}
+        setCountry={setCountry}
+        currency={currency}
+        setCurrency={setCurrency}
+        city={city}
+        setCity={setCity}
+        street={street}
+        setStreet={setStreet}
+        zip={zip}
+        setZip={setZip}
+        paymentMethod={paymentMethod}
+      />
+
+      {paymentMethod === "cc" && settings?.enable3DSecure && (
+        <Box marginTop={4}>
+          <CardDetailsInput
+            cardtype={cardtype}
+            setCardtype={setCardtype}
+            cardpan={cardpan}
+            setCardpan={setCardpan}
+            cardexpiredate={cardexpiredate}
+            setCardexpiredate={setCardexpiredate}
+            cardcvc2={cardcvc2}
+            setCardcvc2={setCardcvc2}
+          />
+        </Box>
+      )}
+
+      <PreauthorizationPaymentButtons
+        paymentMethod={paymentMethod}
+        paymentAmount={paymentAmount}
+        isProcessingPayment={isProcessingPayment}
+        onPreauthorization={onPreauthorization}
+        settings={settings}
+        handleGooglePayToken={handleGooglePayToken}
+        handleGooglePayError={handleGooglePayError}
+        isDisabled={isDisabled}
+      />
+    </Flex>
+  );
+};
+
+export default PreauthorizationForm;
+

package/admin/src/pages/App/components/paymentActions/preauthorization/PreauthorizationFormFields.jsx

@@ -0,0 +1,295 @@
+import { Box, TextInput, Select, Option } from "@strapi/design-system";
+import {
+  getSalutationOptions,
+  getGenderOptions,
+  getCurrencyOptions,
+  getCountryOptions,
+} from "../../../../utils/countryLanguageUtils";
+import InfoTooltip from "../../common/InfoTooltip";
+
+const PreauthorizationFormFields = ({
+  paymentAmount,
+  setPaymentAmount,
+  preauthReference,
+  setPreauthReference,
+  firstname,
+  setFirstname,
+  lastname,
+  setLastname,
+  email,
+  setEmail,
+  telephonenumber,
+  setTelephonenumber,
+  gender,
+  setGender,
+  salutation,
+  setSalutation,
+  country,
+  setCountry,
+  currency,
+  setCurrency,
+  city,
+  setCity,
+  street,
+  setStreet,
+  zip,
+  setZip,
+  paymentMethod,
+}) => {
+  const countryOptions = getCountryOptions(paymentMethod);
+  const salutationOptions = getSalutationOptions(country || "US");
+  const genderOptions = getGenderOptions(country || "US");
+  const currencyOptions = getCurrencyOptions();
+
+  return (
+    <Box
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+        gap: "16px",
+      }}
+    >
+      <TextInput
+        label="Amount *"
+        name="paymentAmount"
+        value={paymentAmount}
+        onChange={(e) => setPaymentAmount(e.target.value)}
+        placeholder="Enter amount (e.g., 1000 for €10.00)"
+        required
+        endAction={
+          <InfoTooltip
+            label="Amount"
+            description="Amount in cents (e.g., 1000 = €10.00)"
+            id="paymentAmount-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="Reference *"
+        name="preauthReference"
+        value={preauthReference}
+        onChange={(e) => setPreauthReference(e.target.value)}
+        placeholder="Auto-generated if empty"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Reference"
+            description="Reference will be auto-generated if left empty"
+            id="preauthReference-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="First Name"
+        name="firstname"
+        value={firstname || ""}
+        onChange={(e) => setFirstname(e.target.value)}
+        placeholder="John"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="First Name"
+            description="Customer first name"
+            id="firstname-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="Last Name"
+        name="lastname"
+        value={lastname || ""}
+        onChange={(e) => setLastname(e.target.value)}
+        placeholder="Doe"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Last Name"
+            description="Customer last name"
+            id="lastname-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="Email"
+        name="email"
+        value={email || ""}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="john.doe@example.com"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Email"
+            description="Customer email address"
+            id="email-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="Phone Number"
+        name="telephonenumber"
+        value={telephonenumber || ""}
+        onChange={(e) => setTelephonenumber(e.target.value)}
+        placeholder="+4917512345678"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Phone Number"
+            description={`Customer phone number. Format should match selected country: ${
+              country || "US"
+            } (e.g., +4917512345678 for Germany, +12125551234 for US)`}
+            id="telephonenumber-tooltip"
+          />
+        }
+      />
+      <Select
+        label="Gender"
+        name="gender"
+        value={gender || ""}
+        onChange={(value) => setGender(value)}
+        placeholder="Select gender"
+        labelAction={
+          <InfoTooltip
+            label="Gender"
+            description={`Customer gender. Options depend on selected country: ${
+              country || "US"
+            }`}
+            id="gender-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select gender
+        </Option>
+        {genderOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+      <Select
+        label="Salutation"
+        name="salutation"
+        value={salutation || ""}
+        onChange={(value) => setSalutation(value)}
+        placeholder="Select salutation"
+        labelAction={
+          <InfoTooltip
+            label="Salutation"
+            description={`Customer salutation (e.g., Mr., Mrs., Ms.). Options depend on selected country: ${
+              country || "US"
+            }`}
+            id="salutation-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select salutation
+        </Option>
+        {salutationOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+      <Select
+        label="Country"
+        name="country"
+        value={country || ""}
+        onChange={(value) => setCountry(value)}
+        placeholder="Select country"
+        labelAction={
+          <InfoTooltip
+            label="Country"
+            description="Billing address country. This affects available currencies, phone number formats, and ZIP code formats."
+            id="country-tooltip"
+          />
+        }
+      >
+        <Option value="" multi={false}>
+          Select country
+        </Option>
+        {countryOptions.map((option) => (
+          <Option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            multi={false}
+          >
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+      <Select
+        label="Currency"
+        name="currency"
+        value={currency || "EUR"}
+        onChange={(value) => setCurrency(value)}
+        placeholder="Select currency"
+        labelAction={
+          <InfoTooltip
+            label="Currency"
+            description={`Currency code (e.g., EUR, USD, GBP). Should match the selected country: ${
+              country || "US"
+            }`}
+            id="currency-tooltip"
+          />
+        }
+      >
+        {currencyOptions.map((option) => (
+          <Option key={option.value} value={option.value} multi={false}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
+      <TextInput
+        label="City"
+        name="city"
+        value={city || ""}
+        onChange={(e) => setCity(e.target.value)}
+        placeholder="Berlin"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="City"
+            description={`Billing address city for country: ${country || "US"}`}
+            id="city-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="Street"
+        name="street"
+        value={street || ""}
+        onChange={(e) => setStreet(e.target.value)}
+        placeholder="Main Street 123"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="Street"
+            description="Billing address street"
+            id="street-tooltip"
+          />
+        }
+      />
+      <TextInput
+        label="ZIP Code"
+        name="zip"
+        value={zip || ""}
+        onChange={(e) => setZip(e.target.value)}
+        placeholder="12345"
+        className="payment-input"
+        endAction={
+          <InfoTooltip
+            label="ZIP Code"
+            description={`Billing address ZIP/postal code. Format should match selected country: ${
+              country || "US"
+            } (e.g., 12345 for US, 10115 for Germany)`}
+            id="zip-tooltip"
+          />
+        }
+      />
+    </Box>
+  );
+};
+
+export default PreauthorizationFormFields;

package/admin/src/pages/App/components/paymentActions/preauthorization/PreauthorizationFormHeader.jsx

@@ -0,0 +1,27 @@
+import { Flex, Typography } from "@strapi/design-system";
+
+const PreauthorizationFormHeader = () => {
+  return (
+    <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>
+  );
+};
+
+export default PreauthorizationFormHeader;
+
+

package/admin/src/pages/App/components/paymentActions/preauthorization/PreauthorizationPaymentButtons.jsx

@@ -0,0 +1,53 @@
+import { Box, Button, Typography } from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+import GooglePayButton from "../../GooglePaybutton";
+
+const PreauthorizationPaymentButtons = ({
+  paymentMethod,
+  paymentAmount,
+  isProcessingPayment,
+  onPreauthorization,
+  settings,
+  handleGooglePayToken,
+  handleGooglePayError,
+  isDisabled,
+}) => {
+  if (paymentMethod === "gpp") {
+    return (
+      <GooglePayButton
+        amount={paymentAmount}
+        currency="EUR"
+        onTokenReceived={handleGooglePayToken}
+        onError={handleGooglePayError}
+        settings={settings}
+      />
+    );
+  }
+
+  if (paymentMethod === "apl") {
+    return (
+      <Box>
+        <Typography variant="pi" textColor="neutral600">
+          Apple Pay is only supported for Authorization, not Preauthorization.
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Button
+      variant="default"
+      onClick={onPreauthorization}
+      loading={isProcessingPayment}
+      startIcon={<Play />}
+      style={{ maxWidth: "200px" }}
+      className="payment-button payment-button-primary"
+      disabled={isDisabled}
+    >
+      Process Preauthorization
+    </Button>
+  );
+};
+
+export default PreauthorizationPaymentButtons;
+

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

@@ -0,0 +1,182 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  TextInput,
+  SingleSelect,
+  SingleSelectOption,
+  Typography,
+} from "@strapi/design-system";
+import { Refresh, Search } from "@strapi/icons";
+import InfoTooltip from "../common/InfoTooltip";
+
+const FiltersPanel = ({ filters, handleFiltersChange, isLoading }) => {
+  const getDefaultDateFrom = () => {
+    const date = new Date();
+    date.setDate(date.getDate() - 30);
+    return date.toISOString().split("T")[0];
+  };
+
+  const getDefaultDateTo = () => {
+    const date = new Date();
+    date.setDate(date.getDate() + 1);
+    return date.toISOString().split("T")[0];
+  };
+
+  const handleReset = () => {
+    handleFiltersChange({
+      search: "",
+      status: "",
+      request_type: "",
+      payment_method: "",
+      date_from: getDefaultDateFrom(),
+      date_to: getDefaultDateTo(),
+    });
+  };
+
+  const handleFilterChange = (field, value) => {
+    handleFiltersChange({ [field]: value });
+  };
+
+  return (
+    <Box
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+        gap: "16px",
+        alignItems: "end",
+      }}
+    >
+        <TextInput
+          label="Search"
+          name="search"
+          value={filters?.search || ""}
+        onChange={(e) => handleFilterChange("search", e.target.value)}
+          placeholder="Search by reference or transaction ID"
+        endAction={
+          <InfoTooltip
+            label="Search"
+            description="Search by reference or transaction ID"
+            id="search-tooltip"
+        />
+        }
+      />
+
+      <SingleSelect
+        name="status"
+        label="Status"
+        value={filters?.status || ""}
+        onChange={(value) => handleFilterChange("status", value)}
+        placeholder="All Statuses"
+        labelAction={
+          <InfoTooltip
+            label="Status"
+            description="Filter transactions by status"
+            id="status-tooltip"
+          />
+        }
+      >
+        <SingleSelectOption value="">All Statuses</SingleSelectOption>
+        <SingleSelectOption value="APPROVED">Approved</SingleSelectOption>
+        <SingleSelectOption value="ERROR">Error</SingleSelectOption>
+        <SingleSelectOption value="REDIRECT">Redirect</SingleSelectOption>
+        <SingleSelectOption value="INVALID">Invalid</SingleSelectOption>
+        <SingleSelectOption value="PENDING">Pending</SingleSelectOption>
+        <SingleSelectOption value="CANCELLED">Cancelled</SingleSelectOption>
+      </SingleSelect>
+
+      <SingleSelect
+        name="request_type"
+        label="Request Type"
+        value={filters?.request_type || ""}
+        onChange={(value) => handleFilterChange("request_type", value)}
+        placeholder="All Types"
+        labelAction={
+          <InfoTooltip
+            label="Request Type"
+            description="Filter by payment request type"
+            id="request_type-tooltip"
+          />
+        }
+      >
+        <SingleSelectOption value="">All Types</SingleSelectOption>
+        <SingleSelectOption value="preauthorization">
+          Preauthorization
+        </SingleSelectOption>
+        <SingleSelectOption value="authorization">
+          Authorization
+        </SingleSelectOption>
+        <SingleSelectOption value="capture">Capture</SingleSelectOption>
+        <SingleSelectOption value="refund">Refund</SingleSelectOption>
+      </SingleSelect>
+
+      <SingleSelect
+        name="payment_method"
+        label="Payment Method"
+        value={filters?.payment_method || ""}
+        onChange={(value) => handleFilterChange("payment_method", value)}
+        placeholder="All Methods"
+        labelAction={
+          <InfoTooltip
+            label="Payment Method"
+            description="Filter by payment method"
+            id="payment_method-tooltip"
+          />
+        }
+      >
+        <SingleSelectOption value="">All Methods</SingleSelectOption>
+        <SingleSelectOption value="credit_card">Credit Card</SingleSelectOption>
+        <SingleSelectOption value="paypal">PayPal</SingleSelectOption>
+        <SingleSelectOption value="google_pay">Google Pay</SingleSelectOption>
+        <SingleSelectOption value="apple_pay">Apple Pay</SingleSelectOption>
+        <SingleSelectOption value="sofort">Sofort Banking</SingleSelectOption>
+        <SingleSelectOption value="sepa">SEPA Direct Debit</SingleSelectOption>
+      </SingleSelect>
+
+      <TextInput
+        label="Date From"
+        name="date_from"
+        type="date"
+        value={filters?.date_from || ""}
+        onChange={(e) => handleFilterChange("date_from", e.target.value)}
+        placeholder="YYYY-MM-DD"
+        endAction={
+          <InfoTooltip
+            label="Date From"
+            description="Filter transactions from this date"
+            id="date_from-tooltip"
+          />
+        }
+      />
+
+      <TextInput
+        label="Date To"
+        name="date_to"
+        type="date"
+        value={filters?.date_to || ""}
+        onChange={(e) => handleFilterChange("date_to", e.target.value)}
+        placeholder="YYYY-MM-DD"
+        endAction={
+          <InfoTooltip
+            label="Date To"
+            description="Filter transactions until this date"
+            id="date_to-tooltip"
+          />
+        }
+      />
+
+      <Button
+        variant="secondary"
+        onClick={handleReset}
+        startIcon={<Refresh />}
+        loading={isLoading}
+        size="S"
+        maxWidth="100px"
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+};
+
+export default FiltersPanel;