strapi-plugin-payone-provider 4.6.9 → 5.6.10

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,81 +1,34 @@
-import React, { useState } from "react";
-import { Badge, Box, Typography, Flex } from "@strapi/design-system";
-import { ExclamationMarkCircle } from "@strapi/icons";
+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, transaction }) => {
-  const [isHovered, setIsHovered] = useState(false);
-  
+const StatusBadge = ({ status, size = "S" }) => {
   const statusColors = {
     APPROVED: "success200",
     PENDING: "warning200",
     ERROR: "danger200",
-    CANCELLED: "warning100",
-    REDIRECTED: "success100",
-    CREATED: "success100"
+    FAILED: "danger200",
+    INVALID: "danger200",
+    REDIRECT: "success100",
   };
-
-  const getDisplayText = () => {
-    if (status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode) {
-      return `${status} - ${transaction.raw_response.Error.ErrorCode}`;
-    }
-    return status;
-  };
-
-  const displayText = getDisplayText();
-  const errorMessage = status === "ERROR" && transaction?.raw_response?.Error?.ErrorMessage 
-    ? transaction.raw_response.Error.ErrorMessage 
-    : null;
-  
-  const errorCode = status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode
-    ? transaction.raw_response.Error.ErrorCode
-    : null;
-  
-  const showExclamationIcon = status === "ERROR" && !errorCode && !errorMessage;
-
+  const systemTheme = useSystemTheme();
+  const theme = systemTheme === "dark" ? darkTheme : lightTheme;
   return (
-    <Box
-      position="relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      style={{ display: "inline-block", cursor: status === "ERROR" ? "pointer" : "default" }}
-    >
-      <Flex gap={2} alignItems="center">
-        <Badge backgroundColor={statusColors[status] || "warning100"}>
-          {displayText}
-        </Badge>
-        {showExclamationIcon && (
-          <ExclamationMarkCircle color="danger500"
-            style={{
-              width: "16px",
-              height: "16px"
-            }} 
-          />
-        )}
-      </Flex>
-      {isHovered && errorMessage && (
-        <Box
-          position="absolute"
-          zIndex={1000}
-          bottom="100%"
-          left="50%"
-          transform="translateX(-50%)"
-          marginBottom={2}
-          padding={3}
-          background="neutral900"
-          hasRadius
-          style={{
-            whiteSpace: "pre-line",
-            minWidth: "200px",
-            maxWidth: "300px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-          }}
-        >
-          <Typography variant="pi" textColor="neutral0" style={{ fontSize: "12px" }}>
-            Error: {errorMessage}
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    <DesignSystemProvider theme={theme}>
+      <Badge
+        borderColor={statusColors[status]}
+        background={"transparent"}
+        textColor={statusColors[status]}
+        size={size}
+      >
+        {status || "UNKNOWN"}
+      </Badge>
+    </DesignSystemProvider>
   );
 };