strapi-plugin-payone-provider 4.6.10 → 4.6.12

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

@@ -1,517 +0,0 @@
-import React, { useEffect } from "react";
-import {
-  Box,
-  Button,
-  Card,
-  CardBody,
-  Flex,
-  Stack,
-  Typography,
-  TextInput,
-  Select,
-  Option,
-  Alert,
-  Switch,
-} from "@strapi/design-system";
-import { Play, Cog } from "@strapi/icons";
-import { useHistory } from "react-router-dom";
-import pluginId from "../../../pluginId";
-
-const ConfigurationPanel = ({
-  settings,
-  isTesting,
-  testResult,
-  onTestConnection,
-  onInputChange,
-  onPaymentMethodToggle,
-}) => {
-  const history = useHistory();
-  const mode = (settings?.mode || "test").toLowerCase();
-
-  const handleNavigateToApplePayConfig = () => {
-    history.push(`/plugins/${pluginId}/apple-pay-config`);
-  };
-
-  const handleNavigateToGooglePayConfig = () => {
-    history.push(`/plugins/${pluginId}/google-pay-config`);
-  };
-
-  return (
-    <Box
-      className="payment-container"
-      paddingTop={8}
-      paddingBottom={8}
-      paddingLeft={8}
-      paddingRight={8}
-    >
-      <Flex direction="column" alignItems="stretch" gap={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>
-        <Box
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            gap: "16px",
-            flexWrap: "wrap",
-          }}
-        >
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <Stack spacing={6}>
-                <Flex gap={4} wrap="wrap">
-                  <TextInput
-                    label="Account ID (aid)"
-                    name="aid"
-                    value={settings.aid || ""}
-                    onChange={(e) => onInputChange("aid", e.target.value)}
-                    required
-                    hint="Your Payone account ID"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-
-                  <TextInput
-                    label="Portal ID"
-                    name="portalid"
-                    value={settings.portalid || ""}
-                    onChange={(e) => onInputChange("portalid", e.target.value)}
-                    required
-                    hint="Your Payone portal ID"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-                </Flex>
-
-                <Flex gap={4} wrap="wrap">
-                  <TextInput
-                    label="Merchant ID (mid)"
-                    name="mid"
-                    value={settings.mid || ""}
-                    onChange={(e) => onInputChange("mid", e.target.value)}
-                    required
-                    hint="Your Payone merchant ID"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-
-                  <TextInput
-                    label="Portal Key"
-                    name="key"
-                    type="password"
-                    value={settings.key || ""}
-                    onChange={(e) => onInputChange("key", e.target.value)}
-                    required
-                    hint="Your Payone portal key (will be encrypted)"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-                </Flex>
-
-                <Flex gap={4} wrap="wrap">
-                  <TextInput
-                    label="Domain Name"
-                    name="domainName"
-                    value={settings.domainName || ""}
-                    onChange={(e) =>
-                      onInputChange("domainName", e.target.value)
-                    }
-                    hint="Your domain name (optional)"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-
-                  <TextInput
-                    label="Display Name"
-                    name="displayName"
-                    value={settings.displayName || ""}
-                    onChange={(e) =>
-                      onInputChange("displayName", e.target.value)
-                    }
-                    hint="Display name for payment methods (optional)"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-                </Flex>
-
-                <Flex gap={4} wrap="wrap">
-                  <Select
-                    label="Mode"
-                    name="mode"
-                    value={settings.mode || "test"}
-                    onChange={(value) => onInputChange("mode", value)}
-                    hint="Select the API mode"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  >
-                    <Option value="test">Test</Option>
-                    <Option value="live">Live</Option>
-                  </Select>
-
-                  <TextInput
-                    label="API Version"
-                    name="api_version"
-                    value={settings.api_version || "3.10"}
-                    onChange={(e) =>
-                      onInputChange("api_version", e.target.value)
-                    }
-                    hint="Payone API version"
-                    className="payment-input"
-                    style={{ flex: 1, minWidth: "300px" }}
-                  />
-                </Flex>
-
-                <Flex
-                  direction="column"
-                  wrap="wrap"
-                  gap={1}
-                  alignItems="flex-start"
-                >
-                  <Select
-                    label="Enable 3D Secure"
-                    name="enable3DSecure"
-                    value={settings.enable3DSecure ? "yes" : "no"}
-                    onChange={(value) =>
-                      onInputChange("enable3DSecure", value === "yes")
-                    }
-                    hint="Enable 3D Secure authentication for credit card payments"
-                    className="payment-input"
-                  >
-                    <Option value="yes">Enabled</Option>
-                    <Option value="no">Disabled</Option>
-                  </Select>
-                  <Typography variant="pi" textColor="neutral600" marginTop={1}>
-                    When enabled, credit card payments will require 3D Secure
-                    authentication (SCA compliance)
-                  </Typography>
-                </Flex>
-
-                <Flex
-                  direction="row"
-                  gap={2}
-                  wrap="wrap"
-                  alignItems="flex-start"
-                  marginTop={2}
-                >
-                  <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>
-              </Stack>
-            </CardBody>
-          </Card>
-
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <Stack spacing={6}>
-                <Box>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    marginBottom={4}
-                  >
-                    Payment Methods
-                  </Typography>
-                  <Typography
-                    variant="pi"
-                    textColor="neutral600"
-                    marginBottom={4}
-                  >
-                    Enable or disable payment methods for your Payone
-                    integration
-                  </Typography>
-                </Box>
-
-                <Stack spacing={4}>
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      Credit Card (Visa, Mastercard)
-                    </Typography>
-                    <Switch
-                      label="Credit Card"
-                      selected={settings.enableCreditCard !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enableCreditCard",
-                          !settings.enableCreditCard
-                        )
-                      }
-                    />
-                  </Flex>
-
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      PayPal
-                    </Typography>
-                    <Switch
-                      label="PayPal"
-                      selected={settings.enablePayPal !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enablePayPal",
-                          !settings.enablePayPal
-                        )
-                      }
-                    />
-                  </Flex>
-
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      Google Pay
-                    </Typography>
-                    <Switch
-                      label="Google Pay"
-                      selected={settings.enableGooglePay !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enableGooglePay",
-                          !settings.enableGooglePay
-                        )
-                      }
-                    />
-                  </Flex>
-
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      Apple Pay
-                    </Typography>
-                    <Switch
-                      label="Apple Pay"
-                      selected={settings.enableApplePay !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enableApplePay",
-                          !settings.enableApplePay
-                        )
-                      }
-                    />
-                  </Flex>
-
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      Sofort Banking
-                    </Typography>
-                    <Switch
-                      label="Sofort Banking"
-                      selected={settings.enableSofort !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enableSofort",
-                          !settings.enableSofort
-                        )
-                      }
-                    />
-                  </Flex>
-
-                  <Flex
-                    direction="row"
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={4}
-                  >
-                    <Typography variant="omega" fontWeight="semiBold">
-                      SEPA Direct Debit
-                    </Typography>
-                    <Switch
-                      label="SEPA Direct Debit"
-                      selected={settings.enableSepaDirectDebit !== false}
-                      onChange={() =>
-                        onPaymentMethodToggle(
-                          "enableSepaDirectDebit",
-                          !settings.enableSepaDirectDebit
-                        )
-                      }
-                    />
-                  </Flex>
-                </Stack>
-              </Stack>
-            </CardBody>
-          </Card>
-        </Box>
-        <Box paddingTop={6}>
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <Stack spacing={6}>
-                <Box>
-                  <Typography
-                    variant="delta"
-                    as="h3"
-                    fontWeight="bold"
-                    marginBottom={2}
-                  >
-                    Test Connection
-                  </Typography>
-                  <Typography variant="pi" textColor="neutral600">
-                    Verify your Payone configuration by testing the API
-                    connection
-                  </Typography>
-                </Box>
-
-                <Button
-                  variant="default"
-                  onClick={onTestConnection}
-                  loading={isTesting}
-                  startIcon={<Play />}
-                  className="payment-button payment-button-success"
-                  disabled={mode === "live"}
-                >
-                  {isTesting ? "Testing Connection..." : "Test Connection"}
-                </Button>
-                {mode === "live" && (
-                  <Typography
-                    variant="pi"
-                    textColor="neutral600"
-                    style={{ marginTop: "8px" }}
-                  >
-                    Test Connection is disabled in live mode for security
-                    reasons.
-                  </Typography>
-                )}
-
-                {testResult && (
-                  <Alert
-                    variant={Boolean(testResult.success) ? "success" : "danger"}
-                    title={
-                      Boolean(testResult.success)
-                        ? "Connection Successful"
-                        : "Connection Failed"
-                    }
-                    className="payment-alert"
-                  >
-                    <Typography
-                      variant="pi"
-                      fontWeight="medium"
-                      marginBottom={2}
-                    >
-                      {testResult.message}
-                    </Typography>
-                    {testResult.details && (
-                      <Box paddingTop={3}>
-                        {Boolean(testResult.success) ? (
-                          <Card className="payment-card">
-                            <CardBody padding={4}>
-                              <Typography variant="pi">
-                                <strong>Mode:</strong> {testResult.details.mode}{" "}
-                                |<strong> AID:</strong> {testResult.details.aid}{" "}
-                                |<strong> Portal ID:</strong>{" "}
-                                {testResult.details.portalid} |
-                                <strong> Merchant ID:</strong>{" "}
-                                {testResult.details.mid || ""}
-                              </Typography>
-                            </CardBody>
-                          </Card>
-                        ) : (
-                          <Card
-                            className="payment-card"
-                            style={{ background: "#fff5f5" }}
-                          >
-                            <CardBody padding={4}>
-                              <Stack spacing={2}>
-                                {testResult.errorcode && (
-                                  <Typography
-                                    variant="pi"
-                                    textColor="neutral600"
-                                  >
-                                    <strong>Error Code:</strong>{" "}
-                                    {testResult.errorcode}
-                                  </Typography>
-                                )}
-                                {testResult.details.errorCode && (
-                                  <Typography
-                                    variant="pi"
-                                    textColor="neutral600"
-                                  >
-                                    <strong>Error Code:</strong>{" "}
-                                    {testResult.details.errorCode}
-                                  </Typography>
-                                )}
-                                {testResult.details &&
-                                  testResult.details.rawResponse && (
-                                    <Typography
-                                      variant="pi"
-                                      textColor="neutral600"
-                                    >
-                                      <strong>Debug Info:</strong>{" "}
-                                      {testResult.details.rawResponse}
-                                    </Typography>
-                                  )}
-                              </Stack>
-                            </CardBody>
-                          </Card>
-                        )}
-                      </Box>
-                    )}
-                  </Alert>
-                )}
-              </Stack>
-            </CardBody>
-          </Card>
-        </Box>
-        <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>
-    </Box>
-  );
-};
-
-export default ConfigurationPanel;

package/admin/src/pages/App/components/CustomerInfoPopover.jsx

@@ -1,147 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Box, Typography } from "@strapi/design-system";
-
-const CustomerInfoPopover = ({ transaction, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [position, setPosition] = useState("top"); // 'top' or 'bottom'
-  const popoverRef = useRef(null);
-  const buttonRef = useRef(null);
-
-  const calculatePosition = (buttonElement) => {
-    if (!buttonElement) return "top";
-    
-    const buttonRect = buttonElement.getBoundingClientRect();
-    // Find the scrollable parent container
-    let scrollableParent = buttonElement.parentElement;
-    while (scrollableParent && scrollableParent !== document.body) {
-      const style = window.getComputedStyle(scrollableParent);
-      if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
-        const parentRect = scrollableParent.getBoundingClientRect();
-        const spaceAbove = buttonRect.top - parentRect.top;
-        const spaceBelow = parentRect.bottom - buttonRect.bottom;
-        // If there's less space above than below (or less than 200px), show popover below
-        return spaceAbove < 200 || spaceAbove < spaceBelow ? "bottom" : "top";
-      }
-      scrollableParent = scrollableParent.parentElement;
-    }
-    // Fallback: use viewport space
-    const spaceAbove = buttonRect.top;
-    return spaceAbove < 200 ? "bottom" : "top";
-  };
-
-  const handleButtonClick = () => {
-    if (!isOpen && buttonRef.current) {
-      // Calculate position before opening
-      const newPosition = calculatePosition(buttonRef.current);
-      setPosition(newPosition);
-    }
-    setIsOpen(!isOpen);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (
-        popoverRef.current &&
-        buttonRef.current &&
-        !popoverRef.current.contains(event.target) &&
-        !buttonRef.current.contains(event.target)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside);
-      };
-    }
-  }, [isOpen]);
-
-  const rawRequest = transaction?.raw_request || {};
-  const salutation = rawRequest.salutation || "";
-  const firstname = rawRequest.firstname || "";
-  const lastname = rawRequest.lastname || "";
-  const street = rawRequest.street || "";
-  const zip = rawRequest.zip || "";
-  const city = rawRequest.city || "";
-  const telephonenumber = rawRequest.telephonenumber || "";
-  const email = rawRequest.email || "";
-
-  const hasCustomerInfo =
-    salutation ||
-    firstname ||
-    lastname ||
-    street ||
-    zip ||
-    city ||
-    telephonenumber ||
-    email;
-
-  if (!hasCustomerInfo) {
-    return children;
-  }
-
-  return (
-    <Box position="relative" style={{ display: "inline-block" }}>
-      <Box
-        ref={buttonRef}
-        onClick={handleButtonClick}
-        style={{ display: "inline-block" }}
-      >
-        {children}
-      </Box>
-      {isOpen && (
-        <Box
-          ref={popoverRef}
-          position="absolute"
-          zIndex={1000}
-          left={0}
-          {...(position === "top" 
-            ? { bottom: "100%", marginBottom: 2 }
-            : { top: "100%", marginTop: 2 }
-          )}
-          padding={3}
-          background="neutral0"
-          hasRadius
-          style={{
-            minWidth: "250px",
-            maxWidth: "350px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-            border: "1px solid var(--strapi-colors-neutral200)",
-          }}
-        >
-          <Box paddingBottom={2}>
-            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-              👤 {[salutation, firstname, lastname].filter(Boolean).join(" ")}
-            </Typography>
-          </Box>
-          {(street || zip || city) && (
-            <Box paddingBottom={2}>
-              <Typography variant="pi" textColor="neutral800">
-                📍 {[street, zip, city].filter(Boolean).join(" ")}
-              </Typography>
-            </Box>
-          )}
-          {telephonenumber && (
-            <Box paddingBottom={2}>
-              <Typography variant="pi" textColor="neutral800">
-                📞 {telephonenumber}
-              </Typography>
-            </Box>
-          )}
-          {email && (
-            <Box>
-              <Typography variant="pi" textColor="neutral800">
-                ✉️ {email}
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export default CustomerInfoPopover;
-