strapi-plugin-payone-provider 1.6.1 → 1.6.3

package/admin/src/pages/App/components/paymentActions/PaymentResult.js

@@ -1,148 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Card,
-  CardBody,
-  Divider,
-  Flex,
-  Stack,
-  Typography,
-  Alert
-} from "@strapi/design-system";
-import StatusBadge from "../StatusBadge";
-import { formatTransactionData } from "../../../utils/formatTransactionData";
-
-const PaymentResult = ({ paymentError, paymentResult }) => {
-  if (!paymentError && !paymentResult) {
-    return null;
-  }
-
-  const status = paymentResult?.status || paymentResult?.Status || "";
-  const errorCode = paymentResult?.errorcode || paymentResult?.errorCode || paymentResult?.ErrorCode;
-  const errorMessage = paymentResult?.errormessage || paymentResult?.errorMessage || paymentResult?.ErrorMessage;
-  const customerMessage = paymentResult?.customermessage || paymentResult?.customerMessage || paymentResult?.CustomerMessage;
-  const isError = status === "ERROR" || status === "INVALID" || errorCode;
-
-  return (
-    <>
-      {paymentError && (
-        <Alert
-          variant="danger"
-          title="Error"
-          className="payment-alert"
-        >
-          {paymentError}
-        </Alert>
-      )}
-
-      {paymentResult && (
-        <Card className="payment-result-card">
-          <CardBody>
-            <Stack spacing={4}>
-              <Flex justifyContent="space-between" alignItems="center">
-                <Typography variant="delta" as="h3" className="payment-section-title">
-                  Payment Result
-                </Typography>
-                {(status || paymentResult.Status) && (
-                  <StatusBadge status={status || paymentResult.Status} />
-                )}
-              </Flex>
-
-              <hr className="payment-divider" style={{ margin: '16px 0' }} />
-
-              {/* Show error information prominently if error */}
-              {isError && (
-                <Alert variant="danger" title="Transaction Failed">
-                  <Stack spacing={2}>
-                    {errorCode && (
-                      <Typography variant="pi">
-                        <strong>Error Code:</strong> {errorCode}
-                      </Typography>
-                    )}
-                    {errorMessage && (
-                      <Typography variant="pi">
-                        <strong>Error Message:</strong> {errorMessage}
-                      </Typography>
-                    )}
-                    {customerMessage && (
-                      <Typography variant="pi">
-                        <strong>Customer Message:</strong> {customerMessage}
-                      </Typography>
-                    )}
-                  </Stack>
-                </Alert>
-              )}
-
-              <Box>
-                <Typography variant="omega" fontWeight="semiBold" marginBottom={2}>
-                  Full Response Details:
-                </Typography>
-                <Stack spacing={3}>
-                  {formatTransactionData(paymentResult).map((item, index) => (
-                    <Flex
-                      key={index}
-                      justifyContent="space-between"
-                      alignItems="start"
-                      style={{
-                        padding: '8px 0',
-                        borderBottom: index < formatTransactionData(paymentResult).length - 1 ? '1px solid #e8e8ea' : 'none'
-                      }}
-                    >
-                      <Typography
-                        variant="pi"
-                        textColor="neutral600"
-                        style={{ minWidth: "200px", fontWeight: '500' }}
-                      >
-                        {item.key}:
-                      </Typography>
-                      <Typography
-                        variant="pi"
-                        style={{
-                          flex: 1,
-                          textAlign: "right",
-                          fontWeight: '400',
-                          wordBreak: 'break-word',
-                          fontFamily: item.key.toLowerCase().includes('raw') ? 'monospace' : 'inherit',
-                          fontSize: item.key.toLowerCase().includes('raw') ? '11px' : 'inherit'
-                        }}
-                      >
-                        {item.value}
-                      </Typography>
-                    </Flex>
-                  ))}
-                </Stack>
-              </Box>
-
-              {/* 3DS Required Warning */}
-              {paymentResult?.is3DSRequired && !paymentResult?.redirectUrl && (
-                <Alert variant="warning" title="3D Secure Authentication Required">
-                  <Stack spacing={2}>
-                    <Typography variant="pi">
-                      Payone requires 3D Secure authentication, but no redirect URL was provided in the response.
-                    </Typography>
-                    <Typography variant="pi" fontWeight="semiBold">
-                      Possible solutions:
-                    </Typography>
-                    <Typography variant="pi" component="ul" style={{ marginLeft: '20px' }}>
-                      <li>Check Payone portal configuration for 3DS settings</li>
-                      <li>Verify that redirect URLs (successurl, errorurl, backurl) are properly configured</li>
-                      <li>Ensure you're using test mode with proper test credentials</li>
-                      <li>Check if 3dscheck request is needed before authorization</li>
-                    </Typography>
-                    <Typography variant="pi" textColor="neutral600" marginTop={2}>
-                      <strong>Error Code:</strong> {paymentResult?.errorCode || paymentResult?.ErrorCode || "4219"}
-                    </Typography>
-                  </Stack>
-                </Alert>
-              )}
-
-            </Stack>
-          </CardBody>
-        </Card>
-      )}
-    </>
-  );
-};
-
-export default PaymentResult;
-

package/admin/src/pages/App/components/paymentActions/PreauthorizationForm.js

@@ -1,199 +0,0 @@
-import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
-import { Play } from "@strapi/icons";
-import GooglePayButton from "../GooglePaybutton";
-import ApplePayButton from "../ApplePayButton";
-import CardDetailsInput from "./CardDetailsInput";
-
-const PreauthorizationForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  preauthReference,
-  setPreauthReference,
-  isProcessingPayment,
-  onPreauthorization,
-  paymentMethod,
-  settings,
-  googlePayToken,
-  setGooglePayToken,
-  applePayToken,
-  setApplePayToken,
-  cardtype,
-  setCardtype,
-  cardpan,
-  setCardpan,
-  cardexpiredate,
-  setCardexpiredate,
-  cardcvc2,
-  setCardcvc2,
-  isLiveMode = false
-}) => {
-  const handleGooglePayToken = (token, paymentData) => {
-    if (!token) {
-      return;
-    }
-    setGooglePayToken(token);
-    onPreauthorization(token);
-  };
-
-  const handleGooglePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
-  };
-
-  const handleApplePayToken = async (token, paymentData) => {
-    if (!token) {
-      console.error("[Apple Pay] Token is missing in handleApplePayToken");
-      return Promise.reject(new Error("Token is missing"));
-    }
-
-    console.log("[Apple Pay] handleApplePayToken called with token:", {
-      hasToken: !!token,
-      tokenLength: token?.length,
-      paymentData: !!paymentData
-    });
-
-    // IMPORTANT: Set token in state immediately (synchronously)
-    // This ensures the token is saved before the dialog closes
-    setApplePayToken(token);
-
-    console.log("[Apple Pay] Token saved to state successfully");
-
-    // Don't call onPreauthorization immediately
-    // Let the user manually trigger the payment using the button
-    // This prevents the dialog from closing prematurely if there's an error
-    // The dialog will close with success, and the user will see the "Process Preauthorization" button
-
-    // Return success immediately so the dialog closes properly
-    // The actual payment processing will happen when the user clicks the button
-    return Promise.resolve({
-      success: true,
-      message: "Token received successfully. Please click 'Process Preauthorization' to complete the payment."
-    });
-  };
-
-  const handleApplePayError = (error) => {
-    if (onError) {
-      onError(error);
-    }
-  };
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Flex direction="row" gap={2}>
-        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
-          Preauthorization
-        </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
-          Reserve an amount on a credit card without capturing it immediately.
-        </Typography>
-      </Flex>
-
-      <Flex gap={4} wrap="wrap">
-        <TextInput
-          label="Amount (in cents) *"
-          name="paymentAmount"
-          value={paymentAmount}
-          onChange={(e) => setPaymentAmount(e.target.value)}
-          placeholder="Enter amount (e.g., 1000 for €10.00)"
-          hint="Amount in cents (e.g., 1000 = €10.00)"
-          required
-          className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
-        />
-
-        <TextInput
-          label="Reference *"
-          name="preauthReference"
-          value={preauthReference}
-          onChange={(e) => setPreauthReference(e.target.value)}
-          placeholder="Auto-generated if empty"
-          hint="Reference will be auto-generated if left empty"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "250px" }}
-        />
-      </Flex>
-
-      {paymentMethod === "cc" && settings?.enable3DSecure && (
-        <Box marginTop={4}>
-          <CardDetailsInput
-            cardtype={cardtype}
-            setCardtype={setCardtype}
-            cardpan={cardpan}
-            setCardpan={setCardpan}
-            cardexpiredate={cardexpiredate}
-            setCardexpiredate={setCardexpiredate}
-            cardcvc2={cardcvc2}
-            setCardcvc2={setCardcvc2}
-          />
-        </Box>
-      )}
-
-      {paymentMethod === "gpp" ? (
-        <GooglePayButton
-          amount={paymentAmount}
-          currency="EUR"
-          onTokenReceived={handleGooglePayToken}
-          onError={handleGooglePayError}
-          settings={settings}
-        />
-      ) : paymentMethod === "apl" ? (
-        <Box>
-          <ApplePayButton
-            amount={paymentAmount}
-            currency="EUR"
-            onTokenReceived={handleApplePayToken}
-            onError={handleApplePayError}
-            settings={settings}
-          />
-          {applePayToken && (
-            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-              <Typography variant="pi" textColor="success600" style={{ marginBottom: "8px", fontWeight: "bold" }}>
-                ✓ Apple Pay token received. You can now process the preauthorization:
-              </Typography>
-              <Button
-                variant="default"
-                onClick={() => onPreauthorization(applePayToken)}
-                loading={isProcessingPayment}
-                startIcon={<Play />}
-                style={{ maxWidth: '200px' }}
-                disabled={!paymentAmount.trim() || !preauthReference.trim() || isLiveMode}
-                className="payment-button payment-button-primary"
-              >
-                Process Preauthorization
-              </Button>
-            </Box>
-          )}
-          {!applePayToken && (
-            <Box marginTop={3} style={{ width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "8px" }}>
-              <Typography variant="pi" textColor="neutral600" style={{ marginBottom: "8px" }}>
-                Apple Pay is not available on localhost. You can test the payment flow without Apple Pay token:
-              </Typography>
-            </Box>
-          )}
-        </Box>
-      ) : (
-        <Button
-          variant="default"
-          onClick={onPreauthorization}
-          loading={isProcessingPayment}
-          startIcon={<Play />}
-          style={{ maxWidth: '200px' }}
-          className="payment-button payment-button-primary"
-          disabled={
-            !paymentAmount.trim() ||
-            (paymentMethod === "cc" &&
-              settings?.enable3DSecure !== false &&
-              (!cardtype || !cardpan || !cardexpiredate || !cardcvc2)) ||
-            isLiveMode
-          }
-        >
-          Process Preauthorization
-        </Button>
-      )}
-    </Flex>
-  );
-};
-
-export default PreauthorizationForm;
-

package/admin/src/pages/App/components/paymentActions/RefundForm.js

@@ -1,90 +0,0 @@
-import React from "react";
-import { Box, Flex, Typography, TextInput, Button } from "@strapi/design-system";
-import { Play } from "@strapi/icons";
-
-const RefundForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  refundTxid,
-  setRefundTxid,
-  refundSequenceNumber,
-  setRefundSequenceNumber,
-  refundReference,
-  setRefundReference,
-  isProcessingPayment,
-  onRefund
-}) => {
-  return (
-    <Flex direction="column" alignItems="stretch" gap={4}>
-      <Flex direction="row" gap={2}>
-        <Typography variant="omega" fontWeight="semiBold" textColor="neutral800" className="payment-form-title">
-          Refund
-        </Typography>
-        <Typography variant="pi" textColor="neutral600" className="payment-form-description">
-          Refund a previously captured amount.
-        </Typography>
-      </Flex>
-
-      <Flex gap={4} wrap="wrap">
-        <TextInput
-          label="Transaction ID"
-          name="refundTxid"
-          value={refundTxid}
-          onChange={(e) => setRefundTxid(e.target.value)}
-          placeholder="Enter TxId from capture"
-          hint="Transaction ID from a previous capture"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
-        />
-
-        <TextInput
-          label="Sequence Number"
-          name="refundSequenceNumber"
-          value={refundSequenceNumber}
-          onChange={(e) => setRefundSequenceNumber(e.target.value)}
-          placeholder="2"
-          hint="Sequence number for this refund (1-127) and by default for first 2"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
-        />
-
-        <TextInput
-          label="Amount (in cents)"
-          name="refundAmount"
-          value={paymentAmount}
-          onChange={(e) => setPaymentAmount(e.target.value)}
-          placeholder="1000"
-          hint="Amount in cents to refund (will be negative)"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
-        />
-
-        <TextInput
-          label="Reference"
-          name="refundReference"
-          value={refundReference}
-          onChange={(e) => setRefundReference(e.target.value)}
-          placeholder="Optional reference"
-          hint="Optional reference for this refund"
-          className="payment-input"
-          style={{ flex: 1, minWidth: "200px" }}
-        />
-      </Flex>
-
-      <Button
-        variant="default"
-        onClick={onRefund}
-        loading={isProcessingPayment}
-        startIcon={<Play />}
-        style={{ maxWidth: '200px' }}
-        className="payment-button payment-button-primary"
-        disabled={!refundTxid.trim() || !paymentAmount.trim()}
-      >
-        Process Refund
-      </Button>
-    </Flex>
-  );
-};
-
-export default RefundForm;
-

package/admin/src/pages/App/index.js

@@ -1,127 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useLocation, useHistory } from "react-router-dom";
-import { Layout, ContentLayout, Box } from "@strapi/design-system";
-import useSettings from "../hooks/useSettings";
-import useTransactionHistory from "../hooks/useTransactionHistory";
-import usePaymentActions from "../hooks/usePaymentActions";
-import AppHeader from "./components/AppHeader";
-import AppTabs from "./components/AppTabs";
-import ApplePayConfigPanel from "./components/ApplePayConfigPanel";
-import GooglePayConfigPanel from "./components/GooglePayConfigPanel";
-import "./styles.css";
-import pluginId from "../../pluginId";
-
-const App = () => {
-  const location = useLocation();
-  const history = useHistory();
-  const [activeTab, setActiveTab] = useState(0);
-
-  // Custom hooks
-  const settings = useSettings();
-  const transactionHistory = useTransactionHistory();
-  const paymentActions = usePaymentActions();
-
-  useEffect(() => {
-    if (location.pathname.includes('/apple-pay-config') || location.pathname.includes('/google-pay-config')) {
-    } else {
-      const tabFromPath = location.pathname.includes('/history') ? 1 :
-        location.pathname.includes('/payment-actions') ? 2 :
-          location.pathname.includes('/documentation') ? 3 : 0;
-      setActiveTab(tabFromPath);
-    }
-  }, [location.pathname]);
-
-  const isApplePayConfigPage = location.pathname.includes('/apple-pay-config');
-  const isGooglePayConfigPage = location.pathname.includes('/google-pay-config');
-
-  if (isApplePayConfigPage) {
-    return (
-      <Layout>
-        <AppHeader
-          title="Apple Pay Configuration"
-          activeTab={null}
-          isSaving={settings.isSaving}
-          onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
-        />
-        <ContentLayout>
-          <Box padding={6}>
-            <ApplePayConfigPanel
-              settings={settings.settings}
-              onInputChange={settings.handleInputChange}
-              isSaving={settings.isSaving}
-              onSave={settings.handleSave}
-            />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
-  }
-
-  if (isGooglePayConfigPage) {
-    return (
-      <Layout>
-        <AppHeader
-          title="Google Pay Configuration"
-          activeTab={null}
-          isSaving={settings.isSaving}
-          onSave={settings.handleSave}
-          onBack={() => history.push(`/plugins/${pluginId}`)}
-        />
-        <ContentLayout>
-          <Box padding={6}>
-            <GooglePayConfigPanel
-              settings={settings.settings}
-              onInputChange={settings.handleInputChange}
-              isSaving={settings.isSaving}
-              onSave={settings.handleSave}
-              onBack={() => history.push(`/plugins/${pluginId}`)}
-            />
-          </Box>
-        </ContentLayout>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout>
-      <AppHeader
-        activeTab={activeTab}
-        isSaving={settings.isSaving}
-        onSave={settings.handleSave}
-      />
-      <ContentLayout>
-        <Box padding={6}>
-          <AppTabs
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            settings={settings.settings}
-            isSaving={settings.isSaving}
-            isTesting={settings.isTesting}
-            testResult={settings.testResult}
-            onSave={settings.handleSave}
-            onTestConnection={settings.handleTestConnection}
-            onInputChange={settings.handleInputChange}
-            filters={transactionHistory.filters}
-            onFilterChange={transactionHistory.handleFilterChange}
-            onFilterApply={transactionHistory.handleFilterApply}
-            isLoadingHistory={transactionHistory.isLoadingHistory}
-            transactionHistory={transactionHistory.transactionHistory}
-            paginatedTransactions={transactionHistory.paginatedTransactions}
-            currentPage={transactionHistory.currentPage}
-            totalPages={transactionHistory.totalPages}
-            pageSize={transactionHistory.pageSize}
-            onRefresh={transactionHistory.loadTransactionHistory}
-            onPageChange={transactionHistory.handlePageChange}
-            selectedTransaction={transactionHistory.selectedTransaction}
-            onTransactionSelect={transactionHistory.handleTransactionSelect}
-            paymentActions={paymentActions}
-            history={history}
-          />
-        </Box>
-      </ContentLayout>
-    </Layout>
-  );
-};
-
-export default App;