strapi-plugin-payone-provider 5.7.26 → 5.8.26

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

@@ -1,120 +1,120 @@
-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";
-import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
-
-const CaptureForm = ({ paymentActions }) => {
-  const { t } = usePluginTranslations();
-  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">
-          {t("capture.title", "Capture")}
-        </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
-          {t("capture.description", "Capture a previously preauthorized amount.")}
-        </Typography>
-      </Flex>
-
-      <Box
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-          gap: "16px",
-        }}
-      >
-        <RenderInput
-          name="captureTxid"
-          label={t("common.transactionId", "Transaction ID *")}
-          value={paymentActions.paymentState.captureTxid || ""}
-          onChange={(e) =>
-            paymentActions.handleFieldChange("captureTxid", e.target.value)
-          }
-          inputType="textInput"
-          placeholder={t("capture.placeholderTxid", "Enter TxId from preauthorization")}
-          required
-          tooltipContent={t("capture.tooltipTxid", "Transaction ID from a previous preauthorization")}
-        />
-
-        <RenderInput
-          name="captureAmount"
-          label={t("common.amount", "Amount *")}
-          value={paymentActions.paymentState.paymentAmount || ""}
-          onChange={(e) =>
-            paymentActions.handleFieldChange("paymentAmount", e.target.value)
-          }
-          inputType="textInput"
-          placeholder="1000"
-          required
-          tooltipContent={t("capture.tooltipAmount", "Amount in cents to capture")}
-        />
-
-        <RenderInput
-          name="captureCurrency"
-          label={t("common.currency", "Currency")}
-          value={paymentActions.paymentState.captureCurrency || "EUR"}
-          onChange={(e) =>
-            paymentActions.handleFieldChange("captureCurrency", e.target.value)
-          }
-          inputType="select"
-          options={currencyOptions}
-          placeholder="EUR"
-          tooltipContent="Currency code (e.g., EUR, USD)"
-        />
-
-        <RenderInput
-          name="captureSequenceNumber"
-          label={t("capture.sequenceNumber", "Sequence Number")}
-          value={paymentActions.paymentState.captureSequenceNumber || "1"}
-          onChange={(e) =>
-            paymentActions.handleFieldChange(
-              "captureSequenceNumber",
-              e.target.value
-            )
-          }
-          inputType="textInput"
-          placeholder="1"
-          tooltipContent={t("capture.tooltipSequence", "Sequence number for this capture (1-127), default is 1")}
-        />
-
-        {["wlt", "gpp", "apl"].includes(
-          paymentActions.paymentState.paymentMethod
-        ) && (
-          <RenderInput
-            name="captureMode"
-            label="Capture Mode"
-            value={paymentActions.paymentState.captureMode || "full"}
-            onChange={(e) =>
-              paymentActions.handleFieldChange("captureMode", e.target.value)
-            }
-            inputType="select"
-            options={[
-              { value: "full", label: "Full" },
-              { value: "partial", label: "Partial" },
-            ]}
-            tooltipContent="Capture mode for wallet payments: full or partial"
-          />
-        )}
-      </Box>
-
-      <Button
-        variant="default"
-        onClick={() => paymentActions.handleCapture()}
-        loading={paymentActions.isProcessingPayment}
-        startIcon={<Play />}
-        style={{ maxWidth: "200px" }}
-        disabled={
-          !paymentActions.paymentState.captureTxid?.trim() ||
-          !paymentActions.paymentState.paymentAmount?.trim()
-        }
-      >
-        {t("capture.submit", "Capture")}
-      </Button>
-    </Flex>
-  );
-};
-
-export default CaptureForm;
+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";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
+
+const CaptureForm = ({ paymentActions }) => {
+  const { t } = usePluginTranslations();
+  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">
+          {t("capture.title", "Capture")}
+        </Typography>
+        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
+          {t("capture.description", "Capture a previously preauthorized amount.")}
+        </Typography>
+      </Flex>
+
+      <Box
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+          gap: "16px",
+        }}
+      >
+        <RenderInput
+          name="captureTxid"
+          label={t("common.transactionId", "Transaction ID *")}
+          value={paymentActions.paymentState.captureTxid || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("captureTxid", e.target.value)
+          }
+          inputType="textInput"
+          placeholder={t("capture.placeholderTxid", "Enter TxId from preauthorization")}
+          required
+          tooltipContent={t("capture.tooltipTxid", "Transaction ID from a previous preauthorization")}
+        />
+
+        <RenderInput
+          name="captureAmount"
+          label={t("common.amount", "Amount *")}
+          value={paymentActions.paymentState.paymentAmount || ""}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("paymentAmount", e.target.value)
+          }
+          inputType="textInput"
+          placeholder="1000"
+          required
+          tooltipContent={t("capture.tooltipAmount", "Amount in cents to capture")}
+        />
+
+        <RenderInput
+          name="captureCurrency"
+          label={t("common.currency", "Currency")}
+          value={paymentActions.paymentState.captureCurrency || "EUR"}
+          onChange={(e) =>
+            paymentActions.handleFieldChange("captureCurrency", e.target.value)
+          }
+          inputType="select"
+          options={currencyOptions}
+          placeholder="EUR"
+          tooltipContent="Currency code (e.g., EUR, USD)"
+        />
+
+        <RenderInput
+          name="captureSequenceNumber"
+          label={t("capture.sequenceNumber", "Sequence Number")}
+          value={paymentActions.paymentState.captureSequenceNumber || "1"}
+          onChange={(e) =>
+            paymentActions.handleFieldChange(
+              "captureSequenceNumber",
+              e.target.value
+            )
+          }
+          inputType="textInput"
+          placeholder="1"
+          tooltipContent={t("capture.tooltipSequence", "Sequence number for this capture (1-127), default is 1")}
+        />
+
+        {["wlt", "gpp", "apl"].includes(
+          paymentActions.paymentState.paymentMethod
+        ) && (
+          <RenderInput
+            name="captureMode"
+            label="Capture Mode"
+            value={paymentActions.paymentState.captureMode || "full"}
+            onChange={(e) =>
+              paymentActions.handleFieldChange("captureMode", e.target.value)
+            }
+            inputType="select"
+            options={[
+              { value: "full", label: "Full" },
+              { value: "partial", label: "Partial" },
+            ]}
+            tooltipContent="Capture mode for wallet payments: full or partial"
+          />
+        )}
+      </Box>
+
+      <Button
+        variant="default"
+        onClick={() => paymentActions.handleCapture()}
+        loading={paymentActions.isProcessingPayment}
+        startIcon={<Play />}
+        style={{ maxWidth: "200px" }}
+        disabled={
+          !paymentActions.paymentState.captureTxid?.trim() ||
+          !paymentActions.paymentState.paymentAmount?.trim()
+        }
+      >
+        {t("capture.submit", "Capture")}
+      </Button>
+    </Flex>
+  );
+};
+
+export default CaptureForm;

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

@@ -1,183 +1,183 @@
-import * as React from "react";
-import { Box, Flex, Typography, Accordion } from "@strapi/design-system";
-import PaymentMethodSelector from "./PaymentMethodSelector";
-import PreauthorizationForm from "./PreauthorizationForm";
-import AuthorizationForm from "./AuthorizationForm";
-import CaptureForm from "./CaptureForm";
-import RefundForm from "./RefundForm";
-import PaymentResult from "./PaymentResult";
-import ApplePayPanel from "./ApplePayPanel";
-import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
-
-const PaymentActionsPanel = ({
-  onNavigateToConfig,
-  settings,
-  paymentActions,
-}) => {
-  const { t } = usePluginTranslations();
-  const mode = (settings?.settings?.mode || "test").toLowerCase();
-  const isLiveMode = mode === "live";
-
-  React.useEffect(() => {
-    if (isLiveMode && paymentActions.paymentState.paymentMethod !== "apl") {
-      paymentActions.handleFieldChange("paymentMethod", "apl");
-    }
-  }, [
-    isLiveMode,
-    paymentActions.paymentState.paymentMethod,
-    paymentActions.handleFieldChange,
-  ]);
-
-  if (isLiveMode && paymentActions.paymentState.paymentMethod !== "apl") {
-    return (
-      <Box
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "44px",
-        }}
-      >
-        <Typography variant="pi" textColor="neutral600">
-          {t("paymentActions.testModeOnly", "Test Payments are only works in test mode.")}
-        </Typography>
-        <Typography variant="pi" textColor="neutral600">
-          {t("paymentActions.switchToTestMode", "Please switch to test mode in plugin settings to use test payments.")}
-        </Typography>
-      </Box>
-    );
-  }
-
-  if (paymentActions.paymentState.paymentMethod === "apl") {
-    return (
-      <ApplePayPanel
-        onNavigateToConfig={onNavigateToConfig}
-        isLiveMode={isLiveMode}
-        paymentActions={paymentActions}
-        settings={settings}
-      />
-    );
-  }
-
-  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" }}>
-            {t("paymentActions.title", "Payment Actions")}
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: "14px" }}>
-            {t("paymentActions.subtitle", "Perform preauthorization, capture, refund and other payment operations.")}
-          </Typography>
-        </Box>
-
-        <PaymentMethodSelector
-          paymentActions={paymentActions}
-          onNavigateToConfig={onNavigateToConfig}
-          isLiveMode={isLiveMode}
-        />
-
-        <Accordion.Root>
-          {/* Preauthorization */}
-          <Accordion.Item value="preauthorization">
-            <Accordion.Header>
-              <Accordion.Trigger>{t("preauth.title", "Preauthorization")}</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>
-              <Box
-                className="payment-form-section"
-                style={{
-                  opacity: isLiveMode ? 0.5 : 1,
-                  pointerEvents: isLiveMode ? "none" : "auto",
-                }}
-              >
-                <PreauthorizationForm
-                  paymentActions={paymentActions}
-                  settings={settings}
-                />
-              </Box>
-            </Accordion.Content>
-          </Accordion.Item>
-          {/* Authorization */}
-          <Accordion.Item value="authorization">
-            <Accordion.Header>
-              <Accordion.Trigger>{t("auth.title", "Authorization")}</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>
-              <Box className="payment-form-section">
-                <AuthorizationForm
-                  paymentActions={paymentActions}
-                  settings={settings}
-                />
-              </Box>
-            </Accordion.Content>
-          </Accordion.Item>
-          {/* Capture */}
-          <Accordion.Item value="capture">
-            <Accordion.Header>
-              <Accordion.Trigger>{t("capture.title", "Capture")}</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>
-              <Box
-                className="payment-form-section"
-                style={{
-                  opacity: isLiveMode ? 0.5 : 1,
-                  pointerEvents: isLiveMode ? "none" : "auto",
-                }}
-              >
-                <CaptureForm paymentActions={paymentActions} />
-              </Box>
-            </Accordion.Content>
-          </Accordion.Item>
-          {/* Refund */}
-          <Accordion.Item value="refund">
-            <Accordion.Header>
-              <Accordion.Trigger>{t("refund.title", "Refund")}</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>
-              <Box
-                className="payment-form-section"
-                style={{
-                  opacity: isLiveMode ? 0.5 : 1,
-                  pointerEvents: isLiveMode ? "none" : "auto",
-                }}
-              >
-                <RefundForm paymentActions={paymentActions} />
-              </Box>
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
-
-        <hr className="payment-divider" />
-
-        <PaymentResult
-          paymentError={paymentActions.paymentError}
-          paymentResult={paymentActions.paymentResult}
-        />
-
-        <Box paddingTop={4}>
-          <Typography variant="sigma" textColor="neutral600">
-            {t("paymentActions.note", "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;
+import * as React from "react";
+import { Box, Flex, Typography, Accordion } from "@strapi/design-system";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import PreauthorizationForm from "./PreauthorizationForm";
+import AuthorizationForm from "./AuthorizationForm";
+import CaptureForm from "./CaptureForm";
+import RefundForm from "./RefundForm";
+import PaymentResult from "./PaymentResult";
+import ApplePayPanel from "./ApplePayPanel";
+import { usePluginTranslations } from "../../../hooks/usePluginTranslations";
+
+const PaymentActionsPanel = ({
+  onNavigateToConfig,
+  settings,
+  paymentActions,
+}) => {
+  const { t } = usePluginTranslations();
+  const mode = (settings?.settings?.mode || "test").toLowerCase();
+  const isLiveMode = mode === "live";
+
+  React.useEffect(() => {
+    if (isLiveMode && paymentActions.paymentState.paymentMethod !== "apl") {
+      paymentActions.handleFieldChange("paymentMethod", "apl");
+    }
+  }, [
+    isLiveMode,
+    paymentActions.paymentState.paymentMethod,
+    paymentActions.handleFieldChange,
+  ]);
+
+  if (isLiveMode && paymentActions.paymentState.paymentMethod !== "apl") {
+    return (
+      <Box
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          marginTop: "44px",
+        }}
+      >
+        <Typography variant="pi" textColor="neutral600">
+          {t("paymentActions.testModeOnly", "Test Payments are only works in test mode.")}
+        </Typography>
+        <Typography variant="pi" textColor="neutral600">
+          {t("paymentActions.switchToTestMode", "Please switch to test mode in plugin settings to use test payments.")}
+        </Typography>
+      </Box>
+    );
+  }
+
+  if (paymentActions.paymentState.paymentMethod === "apl") {
+    return (
+      <ApplePayPanel
+        onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
+        paymentActions={paymentActions}
+        settings={settings}
+      />
+    );
+  }
+
+  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" }}>
+            {t("paymentActions.title", "Payment Actions")}
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" className="payment-subtitle" style={{ fontSize: "14px" }}>
+            {t("paymentActions.subtitle", "Perform preauthorization, capture, refund and other payment operations.")}
+          </Typography>
+        </Box>
+
+        <PaymentMethodSelector
+          paymentActions={paymentActions}
+          onNavigateToConfig={onNavigateToConfig}
+          isLiveMode={isLiveMode}
+        />
+
+        <Accordion.Root>
+          {/* Preauthorization */}
+          <Accordion.Item value="preauthorization">
+            <Accordion.Header>
+              <Accordion.Trigger>{t("preauth.title", "Preauthorization")}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Box
+                className="payment-form-section"
+                style={{
+                  opacity: isLiveMode ? 0.5 : 1,
+                  pointerEvents: isLiveMode ? "none" : "auto",
+                }}
+              >
+                <PreauthorizationForm
+                  paymentActions={paymentActions}
+                  settings={settings}
+                />
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+          {/* Authorization */}
+          <Accordion.Item value="authorization">
+            <Accordion.Header>
+              <Accordion.Trigger>{t("auth.title", "Authorization")}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Box className="payment-form-section">
+                <AuthorizationForm
+                  paymentActions={paymentActions}
+                  settings={settings}
+                />
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+          {/* Capture */}
+          <Accordion.Item value="capture">
+            <Accordion.Header>
+              <Accordion.Trigger>{t("capture.title", "Capture")}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Box
+                className="payment-form-section"
+                style={{
+                  opacity: isLiveMode ? 0.5 : 1,
+                  pointerEvents: isLiveMode ? "none" : "auto",
+                }}
+              >
+                <CaptureForm paymentActions={paymentActions} />
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+          {/* Refund */}
+          <Accordion.Item value="refund">
+            <Accordion.Header>
+              <Accordion.Trigger>{t("refund.title", "Refund")}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content>
+              <Box
+                className="payment-form-section"
+                style={{
+                  opacity: isLiveMode ? 0.5 : 1,
+                  pointerEvents: isLiveMode ? "none" : "auto",
+                }}
+              >
+                <RefundForm paymentActions={paymentActions} />
+              </Box>
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+
+        <hr className="payment-divider" />
+
+        <PaymentResult
+          paymentError={paymentActions.paymentError}
+          paymentResult={paymentActions.paymentResult}
+        />
+
+        <Box paddingTop={4}>
+          <Typography variant="sigma" textColor="neutral600">
+            {t("paymentActions.note", "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;