strapi-plugin-payone-provider 4.6.9 → 4.6.11

package/admin/src/pages/App/components/{GooglePayConfigPanel.jsx → configuration/GooglePayConfigPanel.jsx}

@@ -1,82 +1,82 @@
-import React, { useState, useEffect } from "react";
-import {
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Typography,
-  Button
-} from "@strapi/design-system";
-import { Check } from "@strapi/icons";
-import GooglePayConfig from "./GooglePayConfig";
-
-const GooglePayConfigPanel = ({
-  settings,
-  onInputChange,
-  isSaving,
-  onSave,
-  onBack
-}) => {
-  const [googlePayConfig, setGooglePayConfig] = useState(settings?.googlePayConfig || {});
-
-  useEffect(() => {
-    setGooglePayConfig(settings?.googlePayConfig || {});
-  }, [settings?.googlePayConfig]);
-
-  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' }}>
-            Google Pay Configuration
-          </Typography>
-          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
-            Configure Google Pay settings for your payment gateway
-          </Typography>
-        </Box>
-
-        <Box>
-          <Card className="payment-card">
-            <CardBody padding={6}>
-              <GooglePayConfig
-                config={googlePayConfig}
-                onConfigChange={(newConfig) => {
-                  setGooglePayConfig(newConfig);
-                  onInputChange("googlePayConfig", newConfig);
-                }}
-                settings={settings}
-              />
-            </CardBody>
-          </Card>
-        </Box>
-
-        <Box paddingTop={4}>
-          <Flex direction="row" gap={4} alignItems="center">
-            <Button
-              loading={isSaving}
-              onClick={onSave}
-              startIcon={<Check />}
-              size="L"
-              variant="default"
-              className="payment-button payment-button-success"
-            >
-              Save Google Pay Configuration
-            </Button>
-            <Typography variant="sigma" textColor="neutral600">
-              Note: Google Pay configuration is used for Google Pay payment requests. Make sure to configure the correct card networks, authentication methods, and merchant information for your region.
-            </Typography>
-          </Flex>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-export default GooglePayConfigPanel;
-
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+  Button
+} from "@strapi/design-system";
+import { Check } from "@strapi/icons";
+import GooglePayConfig from "./GooglePayConfig";
+
+const GooglePayConfigPanel = ({
+  settings,
+  onInputChange,
+  isSaving,
+  onSave,
+  onBack
+}) => {
+  const [googlePayConfig, setGooglePayConfig] = useState(settings?.googlePayConfig || {});
+
+  useEffect(() => {
+    setGooglePayConfig(settings?.googlePayConfig || {});
+  }, [settings?.googlePayConfig]);
+
+  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' }}>
+            Google Pay Configuration
+          </Typography>
+          <Typography variant="pi" textColor="neutral600" marginTop={2} className="payment-subtitle" style={{ fontSize: '14px' }}>
+            Configure Google Pay settings for your payment gateway
+          </Typography>
+        </Box>
+
+        <Box>
+          <Card className="payment-card">
+            <CardBody padding={6}>
+              <GooglePayConfig
+                config={googlePayConfig}
+                onConfigChange={(newConfig) => {
+                  setGooglePayConfig(newConfig);
+                  onInputChange("googlePayConfig", newConfig);
+                }}
+                settings={settings}
+              />
+            </CardBody>
+          </Card>
+        </Box>
+
+        <Box paddingTop={4}>
+          <Flex direction="row" gap={4} alignItems="center">
+            <Button
+              loading={isSaving}
+              onClick={onSave}
+              startIcon={<Check />}
+              size="L"
+              variant="default"
+              className="payment-button payment-button-success"
+            >
+              Save Google Pay Configuration
+            </Button>
+            <Typography variant="sigma" textColor="neutral600">
+              Note: Google Pay configuration is used for Google Pay payment requests. Make sure to configure the correct card networks, authentication methods, and merchant information for your region.
+            </Typography>
+          </Flex>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default GooglePayConfigPanel;
+

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

@@ -0,0 +1,129 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Typography,
+} 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;

package/admin/src/pages/App/components/paymentActions/ApplePayPanel.jsx

@@ -1,95 +1,137 @@
-import React from "react";
-import { Box, Typography } from "@strapi/design-system";
-import PaymentMethodSelector from "./PaymentMethodSelector";
-import AuthorizationForm from "./AuthorizationForm";
-
-const ApplePayOnlyPanel = ({
-  paymentAmount,
-  setPaymentAmount,
-  authReference,
-  setAuthReference,
-  isProcessingPayment,
-  onAuthorization,
-  paymentMethod,
-  settings,
-  setGooglePayToken,
-  setPaymentMethod,
-  captureMode,
-  setCaptureMode,
-  onNavigateToConfig,
-  isLiveMode,
-  setCardcvc2,
-  cardtype,
-  setCardtype,
-  cardpan,
-  setCardpan,
-  cardexpiredate,
-  setCardexpiredate,
-  cardcvc2,
-  applePayToken,
-  setApplePayToken,
-}) => {
-  return (
-    <Box
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        gap: "16px",
-        marginTop: "24px",
-        width: "100%",
-      }}
-    >
-      <Typography
-        variant="pi"
-        textColor="warning600"
-        style={{
-          fontSize: "14px",
-          marginTop: "12px",
-          marginBottom: "12px",
-          fontWeight: "bold",
-        }}
-      >
-        ⚠️ Apple Pay can only be tested on a production domain with HTTPS and
-        Live mode. Testing in Strapi admin panel is not supported. Please test
-        Apple Pay on your production website.
-      </Typography>
-
-      <PaymentMethodSelector
-        paymentMethod={paymentMethod}
-        setPaymentMethod={setPaymentMethod}
-        captureMode={captureMode}
-        setCaptureMode={setCaptureMode}
-        onNavigateToConfig={onNavigateToConfig}
-        isLiveMode={isLiveMode}
-      />
-
-      <hr className="payment-divider" />
-
-      <AuthorizationForm
-        paymentAmount={paymentAmount}
-        setPaymentAmount={setPaymentAmount}
-        authReference={authReference}
-        setAuthReference={setAuthReference}
-        isProcessingPayment={isProcessingPayment}
-        onAuthorization={onAuthorization}
-        paymentMethod={paymentMethod}
-        settings={settings}
-        setGooglePayToken={setGooglePayToken}
-        applePayToken={applePayToken}
-        setApplePayToken={setApplePayToken}
-        cardtype={cardtype}
-        setCardtype={setCardtype}
-        cardpan={cardpan}
-        setCardpan={setCardpan}
-        cardexpiredate={cardexpiredate}
-        setCardexpiredate={setCardexpiredate}
-        cardcvc2={cardcvc2}
-        setCardcvc2={setCardcvc2}
-        isLiveMode={isLiveMode}
-      />
-    </Box>
-  );
-};
-
-export default ApplePayOnlyPanel;
+import { Box, Typography } from "@strapi/design-system";
+import PaymentMethodSelector from "./PaymentMethodSelector";
+import AuthorizationForm from "./authorization/AuthorizationForm";
+
+const ApplePayOnlyPanel = ({
+  paymentAmount,
+  setPaymentAmount,
+  authReference,
+  setAuthReference,
+  isProcessingPayment,
+  onAuthorization,
+  paymentMethod,
+  settings,
+  setGooglePayToken,
+  setPaymentMethod,
+  captureMode,
+  setCaptureMode,
+  onNavigateToConfig,
+  isLiveMode,
+  setCardcvc2,
+  cardtype,
+  setCardtype,
+  cardpan,
+  setCardpan,
+  cardexpiredate,
+  setCardexpiredate,
+  cardcvc2,
+  applePayToken,
+  setApplePayToken,
+  firstname,
+  setFirstname,
+  lastname,
+  setLastname,
+  email,
+  setEmail,
+  telephonenumber,
+  setTelephonenumber,
+  gender,
+  setGender,
+  salutation,
+  setSalutation,
+  country,
+  setCountry,
+  currency,
+  setCurrency,
+  city,
+  setCity,
+  street,
+  setStreet,
+  zip,
+  setZip,
+}) => {
+  return (
+    <Box
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "16px",
+        marginTop: "24px",
+        width: "100%",
+      }}
+    >
+      <Typography
+        variant="pi"
+        textColor="warning600"
+        style={{
+          fontSize: "14px",
+          marginTop: "12px",
+          marginBottom: "12px",
+          fontWeight: "bold",
+        }}
+      >
+        ⚠️ Apple Pay can only be tested on a production domain with HTTPS and
+        Live mode. Testing in Strapi admin panel is not supported. Please test
+        Apple Pay on your production website.
+      </Typography>
+
+      <PaymentMethodSelector
+        paymentMethod={paymentMethod}
+        setPaymentMethod={setPaymentMethod}
+        captureMode={captureMode}
+        setCaptureMode={setCaptureMode}
+        onNavigateToConfig={onNavigateToConfig}
+        isLiveMode={isLiveMode}
+      />
+
+      <hr className="payment-divider" />
+
+      <AuthorizationForm
+        paymentAmount={paymentAmount}
+        setPaymentAmount={setPaymentAmount}
+        authReference={authReference}
+        setAuthReference={setAuthReference}
+        isProcessingPayment={isProcessingPayment}
+        onAuthorization={onAuthorization}
+        paymentMethod={paymentMethod}
+        settings={settings}
+        setGooglePayToken={setGooglePayToken}
+        applePayToken={applePayToken}
+        setApplePayToken={setApplePayToken}
+        cardtype={cardtype}
+        setCardtype={setCardtype}
+        cardpan={cardpan}
+        setCardpan={setCardpan}
+        cardexpiredate={cardexpiredate}
+        setCardexpiredate={setCardexpiredate}
+        cardcvc2={cardcvc2}
+        setCardcvc2={setCardcvc2}
+        firstname={firstname}
+        setFirstname={setFirstname}
+        lastname={lastname}
+        setLastname={setLastname}
+        email={email}
+        setEmail={setEmail}
+        telephonenumber={telephonenumber}
+        setTelephonenumber={setTelephonenumber}
+        gender={gender}
+        setGender={setGender}
+        salutation={salutation}
+        setSalutation={setSalutation}
+        country={country}
+        setCountry={setCountry}
+        currency={currency}
+        setCurrency={setCurrency}
+        city={city}
+        setCity={setCity}
+        street={street}
+        setStreet={setStreet}
+        zip={zip}
+        setZip={setZip}
+      />
+    </Box>
+  );
+};
+
+export default ApplePayOnlyPanel;