strapi-plugin-payone-provider 4.6.9 → 5.6.10

package/admin/src/pages/App/components/configuration/ConfigurationFields.jsx

@@ -0,0 +1,255 @@
+import * as React from "react";
+import {
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+} from "@strapi/design-system";
+import { Cog } from "@strapi/icons";
+import RenderInput from "../RenderInput";
+
+const ConfigurationFields = ({
+  settings,
+  onInputChange,
+  onPaymentMethodToggle,
+  onNavigateToConfig,
+}) => {
+  const handleNavigateToApplePayConfig = () => {
+    if (onNavigateToConfig) {
+      onNavigateToConfig("apple-pay-config");
+    }
+  };
+
+  const handleNavigateToGooglePayConfig = () => {
+    if (onNavigateToConfig) {
+      onNavigateToConfig("google-pay-config");
+    }
+  };
+
+  return (
+    <Card padding={8}>
+      <CardBody
+        style={{
+          display: "grid",
+          gap: "16px",
+          gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+        }}
+      >
+        <Flex direction="column" alignItems={"stretch"} gap={6}>
+          <Flex direction="row" gap={2}>
+            <RenderInput
+              label="Account ID (aid)"
+              name="aid"
+              value={settings.aid}
+              onChange={(e) => onInputChange("aid", e.target.value)}
+              required
+              inputType="textInput"
+              tooltipContent={"Your Payone account ID"}
+            />
+
+            <RenderInput
+              label="Portal ID"
+              name="portalid"
+              value={settings.portalid}
+              onChange={(e) => onInputChange("portalid", e.target.value)}
+              required
+              inputType="textInput"
+              tooltipContent={"Your Payone portal ID"}
+            />
+          </Flex>
+          <Flex direction="row" gap={2}>
+            <RenderInput
+              label="Merchant ID (mid)"
+              name="mid"
+              value={settings.mid}
+              onChange={(e) => onInputChange("mid", e.target.value)}
+              required
+              inputType="textInput"
+              tooltipContent={"Your Payone merchant ID"}
+            />
+
+            <RenderInput
+              label="Portal Key"
+              name="key"
+              type="password"
+              value={settings.key}
+              onChange={(e) => onInputChange("key", e.target.value)}
+              required
+              inputType="textInput"
+              tooltipContent={"Your Payone portal key (will be encrypted)"}
+            />
+          </Flex>
+          <Flex direction="row" gap={2}>
+            <RenderInput
+              label="Domain Name"
+              name="domainName"
+              value={settings.domainName}
+              onChange={(e) => onInputChange("domainName", e.target.value)}
+              inputType="textInput"
+              tooltipContent={"Your Payone domain name"}
+            />
+
+            <RenderInput
+              label="Display Name"
+              name="displayName"
+              value={settings.displayName}
+              onChange={(e) => onInputChange("displayName", e.target.value)}
+              inputType="textInput"
+              tooltipContent={"Display name for payment methods (optional)"}
+            />
+          </Flex>
+          <Flex direction="row" gap={2}>
+            <RenderInput
+              label="Mode"
+              name="mode"
+              value={settings.mode || "test"}
+              onChange={(e) => onInputChange("mode", e.target.value)}
+              required
+              inputType="select"
+              tooltipContent={"Select the API mode"}
+              options={[
+                { value: "test", label: "Test" },
+                { value: "live", label: "Live" },
+              ]}
+            />
+            <RenderInput
+              label="Enable 3D Secure"
+              name="enable3DSecure"
+              value={settings.enable3DSecure ? "yes" : "no"}
+              onChange={(e) =>
+                onInputChange("enable3DSecure", e.target.value === "yes")
+              }
+              required
+              inputType="select"
+              tooltipContent={
+                "Enable 3D Secure authentication for credit card payments"
+              }
+              options={[
+                { value: "yes", label: "Enabled" },
+                { value: "no", label: "Disabled" },
+              ]}
+            />
+          </Flex>
+          <Flex direction="row">
+            <RenderInput
+              label="API Version"
+              name="api_version"
+              value={settings.api_version || "3.10"}
+              onChange={(e) => onInputChange("api_version", e.target.value)}
+              required
+              inputType="textInput"
+              tooltipContent={"Payone API version"}
+            />
+          </Flex>
+        </Flex>
+
+        <Flex direction="column" alignItems="stretch" gap={4} marginTop={6}>
+          <Typography variant="pi" textColor="neutral600" marginBottom={4}>
+            Enable or disable payment methods for your Payone integration
+          </Typography>
+
+          <RenderInput
+            label="Credit Card (Visa, Mastercard)"
+            name="enableCreditCard"
+            value={settings.enableCreditCard === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enableCreditCard", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable credit card payments"
+          />
+
+          <RenderInput
+            label="PayPal"
+            name="enablePayPal"
+            value={settings.enablePayPal === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enablePayPal", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable PayPal payments"
+          />
+
+          <RenderInput
+            label="Google Pay"
+            name="enableGooglePay"
+            value={settings.enableGooglePay === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enableGooglePay", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable Google Pay payments"
+          />
+
+          <RenderInput
+            label="Apple Pay"
+            name="enableApplePay"
+            value={settings.enableApplePay === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enableApplePay", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable Apple Pay payments"
+          />
+
+          <RenderInput
+            label="Sofort Banking"
+            name="enableSofort"
+            value={settings.enableSofort === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enableSofort", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable Sofort Banking payments"
+          />
+
+          <RenderInput
+            label="SEPA Direct Debit"
+            name="enableSepaDirectDebit"
+            value={settings.enableSepaDirectDebit === true}
+            onChange={(selected) =>
+              onPaymentMethodToggle("enableSepaDirectDebit", selected)
+            }
+            inputType="switch"
+            labelDirection="row"
+            labelStyle={{ fontSize: "16px" }}
+            tooltipContent="Enable or disable SEPA Direct Debit payments"
+          />
+
+          <Flex direction="row" gap={2} marginTop={10}>
+            <Button
+              variant="secondary"
+              startIcon={<Cog />}
+              onClick={handleNavigateToApplePayConfig}
+              className="payment-button"
+            >
+              Apple Pay Config
+            </Button>
+            <Button
+              variant="secondary"
+              startIcon={<Cog />}
+              onClick={handleNavigateToGooglePayConfig}
+              className="payment-button"
+            >
+              Google Pay Config
+            </Button>
+          </Flex>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ConfigurationFields;
+

package/admin/src/pages/App/components/configuration/ConfigurationPanel.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Box, Flex, Typography } from "@strapi/design-system";
+import ConfigurationFields from "./ConfigurationFields";
+import TestConnection from "./TestConnection";
+
+const ConfigurationPanel = ({ settings }) => {
+  return (
+    <Flex direction="column" alignItems="stretch" gap={8} paddingTop={8}>
+      <Box>
+        <Typography
+          variant="beta"
+          as="h2"
+          fontWeight="bold"
+          className="payment-title"
+          style={{ fontSize: "20px", marginBottom: "4px" }}
+        >
+          Payone API Configuration
+        </Typography>
+        <Typography
+          variant="pi"
+          textColor="neutral600"
+          marginTop={2}
+          className="payment-subtitle"
+          style={{ fontSize: "14px" }}
+        >
+          Configure your Payone payment gateway settings
+        </Typography>
+      </Box>
+
+      <ConfigurationFields
+        settings={settings.settings}
+        onInputChange={settings.handleInputChange}
+        onPaymentMethodToggle={settings.handlePaymentMethodToggle}
+        onNavigateToConfig={settings.onNavigateToConfig}
+      />
+
+      <TestConnection
+        settings={settings.settings}
+        isTesting={settings.isTesting}
+        testResult={settings.testResult}
+        onTestConnection={settings.handleTestConnection}
+      />
+
+      <Box paddingTop={4}>
+        <Typography variant="sigma" textColor="neutral600">
+          Note: These settings are used for all Payone API requests. Make sure
+          to use the correct credentials for your selected mode.
+        </Typography>
+      </Box>
+    </Flex>
+  );
+};
+
+export default ConfigurationPanel;

package/admin/src/pages/App/components/configuration/TestConnection.jsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+  Alert,
+} from "@strapi/design-system";
+import { Play } from "@strapi/icons";
+
+const TestConnection = ({
+  settings,
+  isTesting,
+  testResult,
+  onTestConnection,
+}) => {
+  const mode = (settings?.mode || "test").toLowerCase();
+
+  return (
+    <Card padding={8}>
+      <CardBody>
+        <Flex direction="column" alignItems="stretch" gap={6} paddingTop={6}>
+          <Box>
+            <Typography
+              variant="delta"
+              as="h3"
+              fontWeight="bold"
+              style={{ marginBottom: "16px" }}
+            >
+              Test Connection
+            </Typography>
+
+            {mode === "test" ? (
+              <Typography variant="pi" textColor="neutral600">
+                Verify your Payone configuration by testing the API connection
+              </Typography>
+            ) : (
+              <Typography
+                variant="pi"
+                textColor="neutral600"
+                style={{ marginTop: "8px" }}
+              >
+                Test Connection is disabled in live mode.
+              </Typography>
+            )}
+          </Box>
+
+          <Button
+            variant="default"
+            onClick={onTestConnection}
+            loading={isTesting}
+            startIcon={<Play />}
+            className="payment-button payment-button-success"
+            disabled={mode === "live"}
+            style={{ maxWidth: "200px" }}
+          >
+            {isTesting ? "Testing Connection..." : "Test Connection"}
+          </Button>
+
+          {testResult && (
+            <Flex direction={"column"} alignItems={"stretch"} gap={2}>
+              <Typography
+                variant="pi"
+                fontWeight="medium"
+                style={{ marginBottom: "16px" }}
+              >
+                {testResult.message}
+              </Typography>
+              {testResult.details && Boolean(testResult.success) ? (
+                <Box paddingTop={3}>
+                  <Card>
+                    <CardBody padding={4}>
+                      <Flex direction="column" alignItems="stretch" gap={2}>
+                        {testResult.details.mode && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>Mode:</strong> {testResult.details.mode}
+                          </Typography>
+                        )}
+                        {testResult.details.aid && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>AID:</strong> {testResult.details.aid}
+                          </Typography>
+                        )}
+                        {testResult.details.portalid && (
+                          <Typography variant="pi" textColor="neutral600">
+                            <strong>Portal ID:</strong>{" "}
+                            {testResult.details.portalid}
+                          </Typography>
+                        )}
+                      </Flex>
+                    </CardBody>
+                  </Card>
+                </Box>
+              ) : (
+                <Card>
+                  <CardBody padding={4}>
+                    <Flex direction="column" alignItems="stretch" gap={2}>
+                      {testResult.error && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Error Code:</strong>{" "}
+                          {testResult.error.ErrorCode}
+                        </Typography>
+                      )}
+                      {testResult.error.ErrorMessage && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Error Message:</strong>{" "}
+                          {testResult.error.ErrorMessage}
+                        </Typography>
+                      )}
+                      {testResult.error.CustomerMessage && (
+                        <Typography variant="pi" textColor="neutral600">
+                          <strong>Customer Message:</strong>{" "}
+                          {testResult.error.CustomerMessage}
+                        </Typography>
+                      )}
+                    </Flex>
+                  </CardBody>
+                </Card>
+              )}
+            </Flex>
+          )}
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default TestConnection;