strapi-plugin-payone-provider 4.6.10 → 4.6.12

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

@@ -1,57 +1,163 @@
 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 CaptureForm = ({
   paymentAmount,
   setPaymentAmount,
   captureTxid,
   setCaptureTxid,
+  captureCurrency,
+  setCaptureCurrency,
+  captureSequenceNumber,
+  setCaptureSequenceNumber,
+  captureMode,
+  setCaptureMode,
+  paymentMethod,
   isProcessingPayment,
-  onCapture
+  onCapture,
 }) => {
+  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"
+        >
           Capture
         </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          className="payment-form-description"
+        >
           Capture a previously authorized amount. Note: Reference parameter is
           not supported by Payone capture.
         </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="captureTxid"
           value={captureTxid}
           onChange={(e) => setCaptureTxid(e.target.value)}
           placeholder="Enter TxId from preauthorization"
-          hint="Transaction ID from a previous preauthorization"
+          required
           className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
+          endAction={
+            <InfoTooltip
+              label="Transaction ID"
+              description="Transaction ID (TxId) from a previous preauthorization. This is required to capture the authorized amount."
+              id="captureTxid-tooltip"
+            />
+          }
         />
 
         <TextInput
-          label="Amount (in cents)"
+          label="Amount *"
           name="captureAmount"
           value={paymentAmount}
           onChange={(e) => setPaymentAmount(e.target.value)}
           placeholder="1000"
-          hint="Amount in cents to capture"
+          required
           className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
+          endAction={
+            <InfoTooltip
+              label="Amount"
+              description="Amount in cents to capture (e.g., 1000 = €10.00). Cannot exceed the preauthorized amount."
+              id="captureAmount-tooltip"
+            />
+          }
+        />
+
+        <Select
+          label="Currency"
+          name="captureCurrency"
+          value={captureCurrency || "EUR"}
+          onChange={(value) => setCaptureCurrency(value)}
+          placeholder="EUR"
+          labelAction={
+            <InfoTooltip
+              label="Currency"
+              description="Currency code (e.g., EUR, USD, GBP). Must match the currency used in the original preauthorization."
+              id="captureCurrency-tooltip"
+            />
+          }
+        >
+          {currencyOptions.map((option) => (
+            <Option key={option.value} value={option.value} multi={false}>
+              {option.label}
+            </Option>
+          ))}
+        </Select>
+
+        <TextInput
+          label="Sequence Number"
+          name="captureSequenceNumber"
+          value={captureSequenceNumber || "1"}
+          onChange={(e) => setCaptureSequenceNumber(e.target.value)}
+          placeholder="1"
+          className="payment-input"
+          endAction={
+            <InfoTooltip
+              label="Sequence Number"
+              description="Sequence number for this capture (1-127). Default is 1 for the first capture. Increment for partial captures."
+              id="captureSequenceNumber-tooltip"
+            />
+          }
         />
-      </Flex>
+
+        {["wlt", "gpp", "apl"].includes(paymentMethod) && (
+          <Select
+            label="Capture Mode"
+            name="captureMode"
+            value={captureMode || "full"}
+            onChange={(value) => setCaptureMode(value)}
+            labelAction={
+              <InfoTooltip
+                label="Capture Mode"
+                description="Capture mode for wallet payments (Google Pay, Apple Pay): 'full' captures the entire authorized amount, 'partial' allows capturing a portion."
+                id="captureMode-tooltip"
+              />
+            }
+          >
+            <Option value="full" multi={false}>
+              Full
+            </Option>
+            <Option value="partial" multi={false}>
+              Partial
+            </Option>
+          </Select>
+        )}
+      </Box>
 
       <Button
         variant="default"
         onClick={onCapture}
         loading={isProcessingPayment}
         startIcon={<Play />}
-        style={{ maxWidth: '200px' }}
+        style={{ maxWidth: "200px" }}
         className="payment-button payment-button-primary"
         disabled={!captureTxid.trim() || !paymentAmount.trim()}
       >
@@ -62,4 +168,3 @@ const CaptureForm = ({
 };
 
 export default CaptureForm;
-

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

@@ -6,8 +6,9 @@ import {
   TextInput,
   Select,
   Option,
-  Link
+  Link,
 } from "@strapi/design-system";
+import InfoTooltip from "../common/InfoTooltip";
 
 // 3DS Test Cards that require redirect (challenge workflow)
 const TEST_3DS_CARDS = [
@@ -17,7 +18,7 @@ const TEST_3DS_CARDS = [
     cardpan: "4716971940353559",
     cardexpiredate: "2512",
     cardcvc2: "123",
-    description: "3DS 2.0 with challenge - Password: 12345"
+    description: "3DS 2.0 with challenge - Password: 12345",
   },
   {
     name: "Mastercard - 3DS 2.0 (Challenge)",
@@ -25,7 +26,7 @@ const TEST_3DS_CARDS = [
     cardpan: "5404127720739582",
     cardexpiredate: "2512",
     cardcvc2: "123",
-    description: "3DS 2.0 with challenge - Password: 12345"
+    description: "3DS 2.0 with challenge - Password: 12345",
   },
   // {
   //   name: "AMEX - 3DS 2.0 (Challenge)",
@@ -45,7 +46,7 @@ const CardDetailsInput = ({
   cardexpiredate,
   setCardexpiredate,
   cardcvc2,
-  setCardcvc2
+  setCardcvc2,
 }) => {
   const [selectedTestCard, setSelectedTestCard] = React.useState("");
   const isUpdatingFromTestCard = useRef(false);
@@ -57,7 +58,7 @@ const CardDetailsInput = ({
     }
 
     const matchingCard = TEST_3DS_CARDS.find(
-      card => card.cardtype === cardtype && card.cardpan === cardpan
+      (card) => card.cardtype === cardtype && card.cardpan === cardpan
     );
 
     if (matchingCard) {
@@ -76,8 +77,8 @@ const CardDetailsInput = ({
       return;
     }
 
-    const selectedCard = TEST_3DS_CARDS.find(card =>
-      `${card.cardtype}-${card.cardpan}` === value
+    const selectedCard = TEST_3DS_CARDS.find(
+      (card) => `${card.cardtype}-${card.cardpan}` === value
     );
 
     if (selectedCard) {
@@ -100,13 +101,25 @@ const CardDetailsInput = ({
             name="testCard"
             value={selectedTestCard}
             placeholder="Select a 3DS test card to auto-fill"
-            hint="These cards will trigger 3DS authentication redirect. Password: 12345"
             onChange={handleTestCardSelect}
             className="payment-input"
+            labelAction={
+              <InfoTooltip
+                label="3D Secure Test Cards"
+                description="These cards will trigger 3DS authentication redirect. Password: 12345"
+                id="testCard-tooltip"
+              />
+            }
           >
-            <Option value="">-- Select a test card --</Option>
+            <Option value="" multi={false}>
+              -- Select a test card --
+            </Option>
             {TEST_3DS_CARDS.map((card, index) => (
-              <Option key={index} value={`${card.cardtype}-${card.cardpan}`}>
+              <Option
+                key={index}
+                value={`${card.cardtype}-${card.cardpan}`}
+                multi={false}
+              >
                 {card.name} - {card.description}
               </Option>
             ))}
@@ -120,16 +133,34 @@ const CardDetailsInput = ({
             value={cardtype || ""}
             onChange={(value) => setCardtype(value)}
             required
-            hint="Select credit card type"
             className="payment-input"
             style={{ flex: 1, minWidth: "200px" }}
+            labelAction={
+              <InfoTooltip
+                label="Card Type"
+                description="Select credit card type"
+                id="cardtype-tooltip"
+              />
+            }
           >
-            <Option value="V">VISA</Option>
-            <Option value="M">Mastercard</Option>
-            <Option value="A">American Express</Option>
-            <Option value="J">JCB</Option>
-            <Option value="O">Maestro International</Option>
-            <Option value="D">Diners Club</Option>
+            <Option value="V" multi={false}>
+              VISA
+            </Option>
+            <Option value="M" multi={false}>
+              Mastercard
+            </Option>
+            <Option value="A" multi={false}>
+              American Express
+            </Option>
+            <Option value="J" multi={false}>
+              JCB
+            </Option>
+            <Option value="O" multi={false}>
+              Maestro International
+            </Option>
+            <Option value="D" multi={false}>
+              Diners Club
+            </Option>
           </Select>
 
           <TextInput
@@ -138,10 +169,16 @@ const CardDetailsInput = ({
             value={cardpan || ""}
             onChange={(e) => setCardpan(e.target.value)}
             placeholder="Enter card number"
-            hint="Credit card number (PAN)"
             required
             className="payment-input"
             style={{ flex: 2, minWidth: "300px" }}
+            endAction={
+              <InfoTooltip
+                label="Card Number"
+                description="Credit card number (PAN)"
+                id="cardpan-tooltip"
+              />
+            }
           />
         </Flex>
 
@@ -152,11 +189,17 @@ const CardDetailsInput = ({
             value={cardexpiredate || ""}
             onChange={(e) => setCardexpiredate(e.target.value)}
             placeholder="YYMM (e.g., 2512)"
-            hint="Format: YYMM (e.g., 2512 = December 2025)"
             required
             maxLength={4}
             className="payment-input"
             style={{ flex: 1, minWidth: "150px" }}
+            endAction={
+              <InfoTooltip
+                label="Expiry Date"
+                description="Format: YYMM (e.g., 2512 = December 2025)"
+                id="cardexpiredate-tooltip"
+              />
+            }
           />
 
           <TextInput
@@ -165,18 +208,37 @@ const CardDetailsInput = ({
             value={cardcvc2 || ""}
             onChange={(e) => setCardcvc2(e.target.value)}
             placeholder="123 or 1234"
-            hint={cardtype === "A" ? "4 digits for AMEX" : "3 digits for other cards"}
             required
             maxLength={4}
             className="payment-input"
             style={{ flex: 1, minWidth: "150px" }}
+            endAction={
+              <InfoTooltip
+                label="CVC/CVV"
+                description={
+                  cardtype === "A"
+                    ? "4 digits for AMEX"
+                    : "3 digits for other cards"
+                }
+                id="cardcvc2-tooltip"
+              />
+            }
           />
         </Flex>
 
         <Box paddingTop={2}>
-          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
-            For all test card numbers (positive, negative, frictionless 3DS), 3D Secure test data, and detailed documentation, please refer to the{" "}
-            <Link href="https://docs.payone.com/security-risk-management/3d-secure#/" target="_blank" rel="noopener noreferrer">
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ textAlign: "left" }}
+          >
+            For all test card numbers (positive, negative, frictionless 3DS), 3D
+            Secure test data, and detailed documentation, please refer to the{" "}
+            <Link
+              href="https://docs.payone.com/security-risk-management/3d-secure#/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Payone 3D Secure Documentation
             </Link>
             .
@@ -188,4 +250,3 @@ const CardDetailsInput = ({
 };
 
 export default CardDetailsInput;
-