strapi-plugin-payone-provider 4.6.10 → 4.6.12

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

@@ -0,0 +1,361 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Flex,
+  Typography,
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+} from "@strapi/design-system";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import PreauthorizationForm from "./preauthorization/PreauthorizationForm";
+import AuthorizationForm from "./authorization/AuthorizationForm";
+import CaptureForm from "./CaptureForm";
+import RefundForm from "./RefundForm";
+import PaymentResult from "./PaymentResult";
+import ApplePayPanel from "./ApplePayPanel";
+
+const PaymentActionsPanel = ({
+  paymentActions,
+  settings,
+  onNavigateToConfig,
+}) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
+
+  const [expandedAccordions, setExpandedAccordions] = useState({
+    preauthorization: false,
+    authorization: false,
+    capture: false,
+    refund: false,
+  });
+
+  const toggleAccordion = (key) => {
+    setExpandedAccordions((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  React.useEffect(() => {
+    if (isLiveMode && paymentActions.paymentMethod !== "apl") {
+      paymentActions.setPaymentMethod("apl");
+    }
+  }, [isLiveMode, paymentActions.paymentMethod]);
+
+  if (isLiveMode && paymentActions.paymentMethod !== "apl") {
+    return (
+      <Box
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          marginTop: "44px",
+        }}
+      >
+        <Typography variant="pi" textColor="neutral600">
+          Test Payments are only works in test mode.
+        </Typography>
+        <Typography variant="pi" textColor="neutral600">
+          Please switch to test mode in plugin settings to use test payments.
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (paymentActions.paymentMethod === "apl") {
+    return (
+      <ApplePayPanel
+        paymentAmount={paymentActions.paymentAmount}
+        setPaymentAmount={paymentActions.setPaymentAmount}
+        authReference={paymentActions.authReference}
+        setAuthReference={paymentActions.setAuthReference}
+        isProcessingPayment={paymentActions.isProcessingPayment}
+        onAuthorization={paymentActions.handleAuthorization}
+        paymentMethod={paymentActions.paymentMethod}
+        setPaymentMethod={paymentActions.setPaymentMethod}
+        captureMode={paymentActions.captureMode}
+        setCaptureMode={paymentActions.setCaptureMode}
+        settings={settings}
+        setGooglePayToken={paymentActions.setGooglePayToken}
+        applePayToken={paymentActions.applePayToken}
+        setApplePayToken={paymentActions.setApplePayToken}
+        cardtype={paymentActions.cardtype}
+        setCardtype={paymentActions.setCardtype}
+        cardpan={paymentActions.cardpan}
+        setCardpan={paymentActions.setCardpan}
+        cardexpiredate={paymentActions.cardexpiredate}
+        setCardexpiredate={paymentActions.setCardexpiredate}
+        cardcvc2={paymentActions.cardcvc2}
+        setCardcvc2={paymentActions.setCardcvc2}
+        onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
+        firstname={paymentActions.firstname}
+        setFirstname={paymentActions.setFirstname}
+        lastname={paymentActions.lastname}
+        setLastname={paymentActions.setLastname}
+        email={paymentActions.email}
+        setEmail={paymentActions.setEmail}
+        telephonenumber={paymentActions.telephonenumber}
+        setTelephonenumber={paymentActions.setTelephonenumber}
+        gender={paymentActions.gender}
+        setGender={paymentActions.setGender}
+        salutation={paymentActions.salutation}
+        setSalutation={paymentActions.setSalutation}
+        country={paymentActions.country}
+        setCountry={paymentActions.setCountry}
+        currency={paymentActions.currency}
+        setCurrency={paymentActions.setCurrency}
+        city={paymentActions.city}
+        setCity={paymentActions.setCity}
+        street={paymentActions.street}
+        setStreet={paymentActions.setStreet}
+        zip={paymentActions.zip}
+        setZip={paymentActions.setZip}
+      />
+    );
+  }
+
+  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>
+        </Box>
+
+        <PaymentMethodSelector
+          paymentMethod={paymentActions.paymentMethod}
+          setPaymentMethod={paymentActions.setPaymentMethod}
+          captureMode={paymentActions.captureMode}
+          setCaptureMode={paymentActions.setCaptureMode}
+          onNavigateToConfig={onNavigateToConfig}
+          isLiveMode={isLiveMode}
+        />
+
+        <Accordion
+          expanded={expandedAccordions.preauthorization}
+          onToggle={() => toggleAccordion("preauthorization")}
+        >
+          <AccordionToggle title="Preauthorization" />
+          <AccordionContent>
+            <Box
+              className="payment-form-section"
+              style={{
+                opacity: isLiveMode ? 0.5 : 1,
+                pointerEvents: isLiveMode ? "none" : "auto",
+              }}
+            >
+              <PreauthorizationForm
+                paymentAmount={paymentActions.paymentAmount}
+                setPaymentAmount={paymentActions.setPaymentAmount}
+                preauthReference={paymentActions.preauthReference}
+                setPreauthReference={paymentActions.setPreauthReference}
+                isProcessingPayment={paymentActions.isProcessingPayment}
+                onPreauthorization={paymentActions.handlePreauthorization}
+                paymentMethod={paymentActions.paymentMethod}
+                settings={settings}
+                setGooglePayToken={paymentActions.setGooglePayToken}
+                cardtype={paymentActions.cardtype}
+                setCardtype={paymentActions.setCardtype}
+                cardpan={paymentActions.cardpan}
+                setCardpan={paymentActions.setCardpan}
+                cardexpiredate={paymentActions.cardexpiredate}
+                setCardexpiredate={paymentActions.setCardexpiredate}
+                cardcvc2={paymentActions.cardcvc2}
+                setCardcvc2={paymentActions.setCardcvc2}
+                isLiveMode={isLiveMode}
+                firstname={paymentActions.firstname}
+                setFirstname={paymentActions.setFirstname}
+                lastname={paymentActions.lastname}
+                setLastname={paymentActions.setLastname}
+                email={paymentActions.email}
+                setEmail={paymentActions.setEmail}
+                telephonenumber={paymentActions.telephonenumber}
+                setTelephonenumber={paymentActions.setTelephonenumber}
+                gender={paymentActions.gender}
+                setGender={paymentActions.setGender}
+                salutation={paymentActions.salutation}
+                setSalutation={paymentActions.setSalutation}
+                country={paymentActions.country}
+                setCountry={paymentActions.setCountry}
+                currency={paymentActions.currency}
+                setCurrency={paymentActions.setCurrency}
+                city={paymentActions.city}
+                setCity={paymentActions.setCity}
+                street={paymentActions.street}
+                setStreet={paymentActions.setStreet}
+                zip={paymentActions.zip}
+                setZip={paymentActions.setZip}
+              />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          expanded={expandedAccordions.authorization}
+          onToggle={() => toggleAccordion("authorization")}
+        >
+          <AccordionToggle title="Authorization" />
+          <AccordionContent>
+            <Box className="payment-form-section">
+              <AuthorizationForm
+                paymentAmount={paymentActions.paymentAmount}
+                setPaymentAmount={paymentActions.setPaymentAmount}
+                authReference={paymentActions.authReference}
+                setAuthReference={paymentActions.setAuthReference}
+                isProcessingPayment={paymentActions.isProcessingPayment}
+                onAuthorization={paymentActions.handleAuthorization}
+                paymentMethod={paymentActions.paymentMethod}
+                settings={settings}
+                setGooglePayToken={paymentActions.setGooglePayToken}
+                applePayToken={paymentActions.applePayToken}
+                setApplePayToken={paymentActions.setApplePayToken}
+                cardtype={paymentActions.cardtype}
+                setCardtype={paymentActions.setCardtype}
+                cardpan={paymentActions.cardpan}
+                setCardpan={paymentActions.setCardpan}
+                cardexpiredate={paymentActions.cardexpiredate}
+                setCardexpiredate={paymentActions.setCardexpiredate}
+                cardcvc2={paymentActions.cardcvc2}
+                setCardcvc2={paymentActions.setCardcvc2}
+                firstname={paymentActions.firstname}
+                setFirstname={paymentActions.setFirstname}
+                lastname={paymentActions.lastname}
+                setLastname={paymentActions.setLastname}
+                email={paymentActions.email}
+                setEmail={paymentActions.setEmail}
+                telephonenumber={paymentActions.telephonenumber}
+                setTelephonenumber={paymentActions.setTelephonenumber}
+                gender={paymentActions.gender}
+                setGender={paymentActions.setGender}
+                salutation={paymentActions.salutation}
+                setSalutation={paymentActions.setSalutation}
+                country={paymentActions.country}
+                setCountry={paymentActions.setCountry}
+                currency={paymentActions.currency}
+                setCurrency={paymentActions.setCurrency}
+                city={paymentActions.city}
+                setCity={paymentActions.setCity}
+                street={paymentActions.street}
+                setStreet={paymentActions.setStreet}
+                zip={paymentActions.zip}
+                setZip={paymentActions.setZip}
+              />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          expanded={expandedAccordions.capture}
+          onToggle={() => toggleAccordion("capture")}
+        >
+          <AccordionToggle title="Capture" />
+          <AccordionContent>
+            <Box
+              className="payment-form-section"
+              style={{
+                opacity: isLiveMode ? 0.5 : 1,
+                pointerEvents: isLiveMode ? "none" : "auto",
+              }}
+            >
+              <CaptureForm
+                paymentAmount={paymentActions.paymentAmount}
+                setPaymentAmount={paymentActions.setPaymentAmount}
+                captureTxid={paymentActions.captureTxid}
+                setCaptureTxid={paymentActions.setCaptureTxid}
+                captureCurrency={paymentActions.captureCurrency}
+                setCaptureCurrency={paymentActions.setCaptureCurrency}
+                captureSequenceNumber={paymentActions.captureSequenceNumber}
+                setCaptureSequenceNumber={
+                  paymentActions.setCaptureSequenceNumber
+                }
+                captureMode={paymentActions.captureMode}
+                setCaptureMode={paymentActions.setCaptureMode}
+                paymentMethod={paymentActions.paymentMethod}
+                isProcessingPayment={paymentActions.isProcessingPayment}
+                onCapture={paymentActions.handleCapture}
+              />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+
+        <Accordion
+          expanded={expandedAccordions.refund}
+          onToggle={() => toggleAccordion("refund")}
+        >
+          <AccordionToggle title="Refund" />
+          <AccordionContent>
+            <Box
+              className="payment-form-section"
+              style={{
+                opacity: isLiveMode ? 0.5 : 1,
+                pointerEvents: isLiveMode ? "none" : "auto",
+              }}
+            >
+              <RefundForm
+                paymentAmount={paymentActions.paymentAmount}
+                setPaymentAmount={paymentActions.setPaymentAmount}
+                refundTxid={paymentActions.refundTxid}
+                setRefundTxid={paymentActions.setRefundTxid}
+                refundSequenceNumber={paymentActions.refundSequenceNumber}
+                setRefundSequenceNumber={paymentActions.setRefundSequenceNumber}
+                refundReference={paymentActions.refundReference}
+                setRefundReference={paymentActions.setRefundReference}
+                refundCurrency={paymentActions.refundCurrency}
+                setRefundCurrency={paymentActions.setRefundCurrency}
+                isProcessingPayment={paymentActions.isProcessingPayment}
+                onRefund={paymentActions.handleRefund}
+              />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+
+        <PaymentResult
+          paymentError={paymentActions.paymentError}
+          paymentResult={paymentActions.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/paymentActions/PaymentMethodSelector.jsx

@@ -9,6 +9,7 @@ import {
   Alert,
 } from "@strapi/design-system";
 import pluginId from "../../../../pluginId";
+import InfoTooltip from "../common/InfoTooltip";
 import {
   getPaymentMethodOptions,
   supportsCaptureMode,
@@ -32,10 +33,18 @@ const PaymentMethodSelector = ({
           name="paymentMethod"
           value={paymentMethod}
           onChange={(value) => setPaymentMethod(value)}
-          hint={`Current: ${getPaymentMethodDisplayName(paymentMethod)}`}
+          labelAction={
+            <InfoTooltip
+              label="Payment Method"
+              description={`Current: ${getPaymentMethodDisplayName(
+                paymentMethod
+              )}`}
+              id="paymentMethod-tooltip"
+            />
+          }
         >
           {getPaymentMethodOptions(isLiveMode).map((option) => (
-            <Option key={option.value} value={option.value}>
+            <Option key={option.value} value={option.value} multi={false}>
               {option.label}
             </Option>
           ))}
@@ -231,6 +240,9 @@ const PaymentMethodSelector = ({
               closeLabel="Close"
               title="⚠️ Important: Middleware Configuration Required"
               variant="warning"
+              onClose={() => {}}
+              action={null}
+              titleAs="h2"
             >
               <Typography variant="pi" marginTop={2}>
                 <strong>Google Pay requires middleware configuration</strong> to
@@ -289,10 +301,16 @@ const PaymentMethodSelector = ({
             name="captureMode"
             value={captureMode}
             onChange={(value) => setCaptureMode(value)}
-            hint="Select capture mode for wallet payments"
+            labelAction={
+              <InfoTooltip
+                label="Capture Mode"
+                description="Select capture mode for wallet payments"
+                id="captureMode-tooltip"
+              />
+            }
           >
             {getCaptureModeOptions().map((option) => (
-              <Option key={option.value} value={option.value}>
+              <Option key={option.value} value={option.value} multi={false}>
                 {option.label}
               </Option>
             ))}

package/admin/src/pages/App/components/paymentActions/RefundForm.jsx

@@ -1,6 +1,16 @@
 import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
+import {
+  Box,
+  Flex,
+  Typography,
+  TextInput,
+  Button,
+  Select,
+  Option,
+} from "@strapi/design-system";
 import { Play } from "@strapi/icons";
+import { getCurrencyOptions } from "../../../utils/countryLanguageUtils";
+import InfoTooltip from "../common/InfoTooltip";
 
 const RefundForm = ({
   paymentAmount,
@@ -11,72 +21,134 @@ const RefundForm = ({
   setRefundSequenceNumber,
   refundReference,
   setRefundReference,
+  refundCurrency,
+  setRefundCurrency,
   isProcessingPayment,
-  onRefund
+  onRefund,
 }) => {
+  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">
+        <Typography
+          variant="omega"
+          fontWeight="semiBold"
+          textColor="neutral800"
+          className="payment-form-title"
+        >
           Refund
         </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
           Refund a previously captured amount.
         </Typography>
       </Flex>
 
-      <Flex gap={4} wrap="wrap">
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+          gap: "16px",
+        }}
+      >
         <TextInput
-          label="Transaction ID"
+          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"
+          required
           className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
+          endAction={
+            <InfoTooltip
+              label="Transaction ID"
+              description="Transaction ID (TxId) from a previous capture. This is required to refund the captured amount."
+              id="refundTxid-tooltip"
+            />
+          }
         />
 
         <TextInput
           label="Sequence Number"
           name="refundSequenceNumber"
-          value={refundSequenceNumber}
+          value={refundSequenceNumber || "2"}
           onChange={(e) => setRefundSequenceNumber(e.target.value)}
           placeholder="2"
-          hint="Sequence number for this refund (1-127) and by default for first 2"
           className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
+          endAction={
+            <InfoTooltip
+              label="Sequence Number"
+              description="Sequence number for this refund (1-127). Default is 2 for the first refund. Increment for multiple refunds."
+              id="refundSequenceNumber-tooltip"
+            />
+          }
         />
 
         <TextInput
-          label="Amount (in cents)"
+          label="Amount *"
           name="refundAmount"
           value={paymentAmount}
           onChange={(e) => setPaymentAmount(e.target.value)}
           placeholder="1000"
-          hint="Amount in cents to refund (will be negative)"
+          required
           className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
+          endAction={
+            <InfoTooltip
+              label="Amount"
+              description="Amount in cents to refund (e.g., 1000 = €10.00). The amount will be automatically converted to negative. Cannot exceed the captured amount."
+              id="refundAmount-tooltip"
+            />
+          }
         />
 
+        <Select
+          label="Currency"
+          name="refundCurrency"
+          value={refundCurrency || "EUR"}
+          onChange={(value) => setRefundCurrency(value)}
+          placeholder="EUR"
+          labelAction={
+            <InfoTooltip
+              label="Currency"
+              description="Currency code (e.g., EUR, USD, GBP). Must match the currency used in the original capture transaction."
+              id="refundCurrency-tooltip"
+            />
+          }
+        >
+          {currencyOptions.map((option) => (
+            <Option key={option.value} value={option.value} multi={false}>
+              {option.label}
+            </Option>
+          ))}
+        </Select>
+
         <TextInput
           label="Reference"
           name="refundReference"
-          value={refundReference}
+          value={refundReference || ""}
           onChange={(e) => setRefundReference(e.target.value)}
           placeholder="Optional reference"
-          hint="Optional reference for this refund"
           className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
+          endAction={
+            <InfoTooltip
+              label="Reference"
+              description="Optional reference for this refund. Useful for tracking and reconciliation purposes."
+              id="refundReference-tooltip"
+            />
+          }
         />
-      </Flex>
+      </Box>
 
       <Button
         variant="default"
         onClick={onRefund}
         loading={isProcessingPayment}
         startIcon={<Play />}
-        style={{ maxWidth: '200px' }}
+        style={{ maxWidth: "200px" }}
         className="payment-button payment-button-primary"
         disabled={!refundTxid.trim() || !paymentAmount.trim()}
       >
@@ -87,4 +159,3 @@ const RefundForm = ({
 };
 
 export default RefundForm;
-