strapi-plugin-payone-provider 1.6.7 → 5.6.9

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import * as React from "react";
 import { Box, Flex, Typography } from "@strapi/design-system";
 import { injectGooglePayScript } from "../../utils/injectGooglePayScript";
 
@@ -7,43 +7,43 @@ const GooglePayButton = ({
   currency = "EUR",
   onTokenReceived,
   onError,
-  settings
+  settings,
 }) => {
-  const [isReady, setIsReady] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const buttonContainerRef = useRef(null);
-  const paymentsClientRef = useRef(null);
+  const [isReady, setIsReady] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const buttonContainerRef = React.useRef(null);
+  const paymentsClientRef = React.useRef(null);
 
   const baseRequest = {
     apiVersion: 2,
-    apiVersionMinor: 0
+    apiVersionMinor: 0,
   };
 
   const getGooglePayConfig = (settings) => {
-    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
+    const gatewayMerchantId = settings?.mid || settings?.portalid || "";
 
     const allowedCardNetworks = ["MASTERCARD", "VISA"];
     const allowedAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];
 
     const tokenizationSpecification = {
-      type: 'PAYMENT_GATEWAY',
+      type: "PAYMENT_GATEWAY",
       parameters: {
-        'gateway': 'payonegmbh',
-        'gatewayMerchantId': gatewayMerchantId
-      }
+        gateway: "payonegmbh",
+        gatewayMerchantId: gatewayMerchantId,
+      },
     };
 
     const baseCardPaymentMethod = {
       type: "CARD",
       parameters: {
         allowedCardNetworks,
-        allowedAuthMethods
-      }
+        allowedAuthMethods,
+      },
     };
 
     const cardPaymentMethod = {
       ...baseCardPaymentMethod,
-      tokenizationSpecification
+      tokenizationSpecification,
     };
     return {
       baseCardPaymentMethod,
@@ -51,14 +51,16 @@ const GooglePayButton = ({
     };
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     injectGooglePayScript();
 
     const checkGooglePay = () => {
       try {
-        return typeof window !== 'undefined' &&
-          typeof window.google !== 'undefined' &&
-          window.google.payments?.api?.PaymentsClient;
+        return (
+          typeof window !== "undefined" &&
+          typeof window.google !== "undefined" &&
+          window.google.payments?.api?.PaymentsClient
+        );
       } catch (e) {
         return false;
       }
@@ -80,7 +82,11 @@ const GooglePayButton = ({
     const handleScriptError = () => {
       setIsLoading(false);
       if (onError) {
-        onError(new Error("Failed to load Google Pay script. Please check CSP settings."));
+        onError(
+          new Error(
+            "Failed to load Google Pay script. Please check CSP settings."
+          )
+        );
       }
     };
 
@@ -99,7 +105,11 @@ const GooglePayButton = ({
       if (!checkGooglePay()) {
         setIsLoading(false);
         if (onError) {
-          onError(new Error("Google Pay API is not available. Please check if the script is loaded and CSP allows pay.google.com"));
+          onError(
+            new Error(
+              "Google Pay API is not available. Please check if the script is loaded and CSP allows pay.google.com"
+            )
+          );
         }
       }
     }, 15000);
@@ -116,32 +126,48 @@ const GooglePayButton = ({
     if (!settings || (!settings.mid && !settings.portalid)) {
       setIsLoading(false);
       if (onError) {
-        onError(new Error("Google Pay settings missing. Please configure mid or portalid in settings."));
+        onError(
+          new Error(
+            "Google Pay settings missing. Please configure mid or portalid in settings."
+          )
+        );
       }
       return;
     }
 
     try {
-      if (typeof window === 'undefined' || typeof window.google === 'undefined' || !window.google.payments?.api?.PaymentsClient) {
+      if (
+        typeof window === "undefined" ||
+        typeof window.google === "undefined" ||
+        !window.google.payments?.api?.PaymentsClient
+      ) {
         setIsLoading(false);
         if (onError) {
-          onError(new Error("Google Pay API is not loaded. Please check browser console for CSP errors."));
+          onError(
+            new Error(
+              "Google Pay API is not loaded. Please check browser console for CSP errors."
+            )
+          );
         }
         return;
       }
 
-
       const environment = settings?.mode === "live" ? "PRODUCTION" : "TEST";
-      paymentsClientRef.current = new window.google.payments.api.PaymentsClient({
-        environment: environment
-      });
+      paymentsClientRef.current = new window.google.payments.api.PaymentsClient(
+        {
+          environment: environment,
+        }
+      );
 
       const config = getGooglePayConfig(settings);
 
       const isReadyToPayRequest = Object.assign({}, baseRequest);
-      isReadyToPayRequest.allowedPaymentMethods = [config.baseCardPaymentMethod];
+      isReadyToPayRequest.allowedPaymentMethods = [
+        config.baseCardPaymentMethod,
+      ];
 
-      paymentsClientRef.current.isReadyToPay(isReadyToPayRequest)
+      paymentsClientRef.current
+        .isReadyToPay(isReadyToPayRequest)
         .then((response) => {
           if (response.result) {
             setIsReady(true);
@@ -193,17 +219,17 @@ const GooglePayButton = ({
 
     buttonContainerRef.current.innerHTML = "";
 
-    const gatewayMerchantId = settings?.mid || settings?.portalid || '';
+    const gatewayMerchantId = settings?.mid || settings?.portalid || "";
     const paymentDataRequest = Object.assign({}, baseRequest);
     paymentDataRequest.allowedPaymentMethods = [config.cardPaymentMethod];
     paymentDataRequest.transactionInfo = {
       totalPriceStatus: "FINAL",
       totalPrice: (parseFloat(amount) / 100).toFixed(2),
-      currencyCode: currency
+      currencyCode: currency,
     };
     paymentDataRequest.merchantInfo = {
       merchantId: gatewayMerchantId,
-      merchantName: settings?.merchantName || 'Demo Shop'
+      merchantName: settings?.merchantName || "Demo Shop",
     };
 
     try {
@@ -211,7 +237,7 @@ const GooglePayButton = ({
         onClick: () => handleGooglePayClick(paymentDataRequest),
         buttonColor: "black",
         buttonType: "pay",
-        buttonSizeMode: "fill"
+        buttonSizeMode: "fill",
       });
 
       if (buttonContainerRef.current) {
@@ -235,7 +261,8 @@ const GooglePayButton = ({
         throw new Error("Google Pay client not initialized");
       }
 
-      const paymentData = await paymentsClientRef.current.loadPaymentData(paymentDataRequest);
+      const paymentData =
+        await paymentsClientRef.current.loadPaymentData(paymentDataRequest);
       const rawToken = paymentData.paymentMethodData?.tokenizationData?.token;
 
       if (!rawToken) {
@@ -246,12 +273,16 @@ const GooglePayButton = ({
 
       try {
         const tokenObj = JSON.parse(token);
-        if (!tokenObj.signature || !tokenObj.protocolVersion || !tokenObj.signedMessage) {
+        if (
+          !tokenObj.signature ||
+          !tokenObj.protocolVersion ||
+          !tokenObj.signedMessage
+        ) {
           throw new Error("Google Pay token is missing required fields");
         }
         token = btoa(unescape(encodeURIComponent(rawToken)));
       } catch (e) {
-        if (typeof token === 'string') {
+        if (typeof token === "string") {
           token = btoa(unescape(encodeURIComponent(token)));
         } else {
           throw new Error(`Invalid Google Pay token format: ${e.message}`);
@@ -272,26 +303,53 @@ const GooglePayButton = ({
     <Box width="100%">
       <Flex direction="column" gap={3} alignItems="stretch">
         {isLoading && (
-          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ textAlign: "left" }}
+          >
             Loading Google Pay...
           </Typography>
         )}
         {!isLoading && !isReady && (
-          <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ textAlign: "left" }}
+          >
             Google Pay is not available
           </Typography>
         )}
         {!isLoading && isReady && (
           <>
-            <Typography variant="sigma" textColor="neutral700" fontWeight="semiBold" style={{ textAlign: "left" }}>
+            <Typography
+              variant="sigma"
+              textColor="neutral700"
+              fontWeight="semiBold"
+              style={{ textAlign: "left" }}
+            >
               Google Pay Payment
             </Typography>
-            <Typography variant="pi" textColor="neutral600" style={{ textAlign: "left" }}>
-              Click the button below to pay with Google Pay. The token will be automatically sent to Payone.
+            <Typography
+              variant="pi"
+              textColor="neutral600"
+              style={{ textAlign: "left" }}
+            >
+              Click the button below to pay with Google Pay. The token will be
+              automatically sent to Payone.
             </Typography>
           </>
         )}
-        <Box ref={buttonContainerRef} style={{ minHeight: "40px", width: "100%", maxWidth: "200px", display: "flex", justifyContent: "flex-start", }} />
+        <Box
+          ref={buttonContainerRef}
+          style={{
+            minHeight: "40px",
+            width: "100%",
+            maxWidth: "200px",
+            display: "flex",
+            justifyContent: "flex-start",
+          }}
+        />
       </Flex>
     </Box>
   );

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

@@ -0,0 +1,94 @@
+import {
+  Field,
+  Flex,
+  DesignSystemProvider,
+  Tooltip,
+  Typography,
+  darkTheme,
+  lightTheme,
+} from "@strapi/design-system";
+import { Information } from "@strapi/icons";
+import { InputComponent } from "../../utils/getInputComponent";
+import { shouldShowTooltip } from "../../utils/tooltipHelpers";
+import { useSystemTheme } from "../../hooks/use-system-theme";
+
+const RenderInput = ({
+  hint,
+  label,
+  name,
+  value,
+  onChange,
+  inputType = "textInput",
+  options = [],
+  tooltipContent = "",
+  additionalMessage = "",
+  required = false,
+  placeholder,
+  onLabel,
+  offLabel,
+  type = "text",
+  className = "payment-input",
+  labelStyle = {},
+  labelDirection = "column",
+  ...props
+}) => {
+  const systemTheme = useSystemTheme();
+  const theme = systemTheme === "dark" ? darkTheme : lightTheme;
+  const getLabelStyle = () => {
+    if (labelDirection === "row") {
+      return {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+      };
+    }
+    return { display: "flex", flexDirection: "column" };
+  };
+
+  return (
+    <Flex direction="column" gap={2} alignItems={"stretch"} width={"100%"}>
+      <Field.Root hint={hint} width={"100%"} style={getLabelStyle()}>
+        <Flex alignItems="center" gap={1} style={{ marginBottom: "5px" }}>
+          <Field.Label style={labelStyle}>{label}</Field.Label>
+          {shouldShowTooltip(inputType, tooltipContent) && (
+            <DesignSystemProvider theme={theme}>
+              <Tooltip label={tooltipContent}>
+                <Information
+                  style={{
+                    cursor: "pointer",
+                    color: systemTheme === "dark" ? "#fff" : "#000",
+                  }}
+                />
+              </Tooltip>
+            </DesignSystemProvider>
+          )}
+        </Flex>
+        <InputComponent
+          inputType={inputType}
+          name={name}
+          value={value}
+          onChange={onChange}
+          tooltipContent={tooltipContent}
+          options={options}
+          required={required}
+          className={className}
+          placeholder={placeholder}
+          onLabel={onLabel}
+          offLabel={offLabel}
+          systemTheme={systemTheme}
+          theme={theme}
+          type={type}
+          {...props}
+        />
+        <Field.Hint />
+      </Field.Root>
+      {additionalMessage && (
+        <Typography variant="pi" textColor={"ActiveText"}>
+          {additionalMessage}
+        </Typography>
+      )}
+    </Flex>
+  );
+};
+
+export default RenderInput;

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

@@ -1,23 +1,34 @@
-import React from "react";
-import { Badge } from "@strapi/design-system";
+import * as React from "@strapi/strapi/admin";
+import {
+  Badge,
+  DesignSystemProvider,
+  darkTheme,
+  lightTheme,
+} from "@strapi/design-system";
+import { useSystemTheme } from "../../hooks/use-system-theme";
 
-const StatusBadge = ({ status }) => {
+const StatusBadge = ({ status, size = "S" }) => {
   const statusColors = {
-    APPROVED: "success",
-    PENDING: "warning",
-    ERROR: "danger",
-    FAILED: "danger",
-    INVALID: "danger",
-    REDIRECT: "secondary"
+    APPROVED: "success200",
+    PENDING: "warning200",
+    ERROR: "danger200",
+    FAILED: "danger200",
+    INVALID: "danger200",
+    REDIRECT: "success100",
   };
-
+  const systemTheme = useSystemTheme();
+  const theme = systemTheme === "dark" ? darkTheme : lightTheme;
   return (
-    <Badge
-      textColor="neutral0"
-      backgroundColor={statusColors[status] || "default"}
-    >
-      {status}
-    </Badge>
+    <DesignSystemProvider theme={theme}>
+      <Badge
+        borderColor={statusColors[status]}
+        background={"transparent"}
+        textColor={statusColors[status]}
+        size={size}
+      >
+        {status || "UNKNOWN"}
+      </Badge>
+    </DesignSystemProvider>
   );
 };
 

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;
+