strapi-plugin-payone-provider 4.6.9 → 4.6.11

package/admin/src/pages/App/components/TransactionHistoryTable/TransactionHistoryTablePagination.jsx

@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Flex,
-  Button,
-  TextInput,
-  Typography,
-  Select,
-  Option,
-} from "@strapi/design-system";
-import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from "@strapi/icons";
-
-const TransactionHistoryTablePagination = ({
-  currentPage,
-  totalPages,
-  pageSize,
-  totalItems,
-  onPageChange,
-  onPageSizeChange,
-  isLoading,
-}) => {
-  const [pageInput, setPageInput] = useState(currentPage.toString());
-
-  // Update input when currentPage changes externally
-  React.useEffect(() => {
-    setPageInput(currentPage.toString());
-  }, [currentPage]);
-
-  const handlePageInputChange = (e) => {
-    const value = e.target.value;
-    // Allow empty input or valid numbers
-    if (value === "" || /^\d+$/.test(value)) {
-      setPageInput(value);
-    }
-  };
-
-  const handlePageInputBlur = () => {
-    const pageNum = parseInt(pageInput, 10);
-    if (pageNum && pageNum >= 1 && pageNum <= totalPages) {
-      onPageChange(pageNum);
-    } else {
-      // Reset to current page if invalid
-      setPageInput(currentPage.toString());
-    }
-  };
-
-  const handlePageInputKeyPress = (e) => {
-    if (e.key === "Enter") {
-      handlePageInputBlur();
-    }
-  };
-
-  const goToFirstPage = () => {
-    if (currentPage > 1) {
-      onPageChange(1);
-    }
-  };
-
-  const goToLastPage = () => {
-    if (currentPage < totalPages) {
-      onPageChange(totalPages);
-    }
-  };
-
-  const goToPreviousPage = () => {
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  };
-
-  const goToNextPage = () => {
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
-    }
-  };
-
-  const startItem = totalItems > 0 ? (currentPage - 1) * pageSize + 1 : 0;
-  const endItem = Math.min(currentPage * pageSize, totalItems);
-
-  return (
-    <Box>
-      <Flex
-        justifyContent="space-between"
-        alignItems="center"
-        gap={4}
-        wrap="wrap"
-      >
-        <Flex alignItems="center" gap={2}>
-          <Typography variant="pi" textColor="neutral600">
-            {totalItems > 0
-              ? `Showing ${startItem}-${endItem} of ${totalItems} transactions`
-              : `No transactions`}
-          </Typography>
-          <Flex alignItems="center" gap={2}>
-            <Typography variant="pi" textColor="neutral600">
-              Page size:
-            </Typography>
-            <Select
-              value={pageSize.toString()}
-              onChange={(value) => onPageSizeChange(parseInt(value, 10))}
-              disabled={isLoading}
-              style={{ width: "80px", minWidth: "80px" }}
-            >
-              <Option value="10">10</Option>
-              <Option value="20">20</Option>
-              <Option value="30">30</Option>
-              <Option value="50">50</Option>
-              <Option value="100">100</Option>
-            </Select>
-          </Flex>
-        </Flex>
-
-        {totalPages > 1 && (
-          <Flex alignItems="center" gap={2}>
-            <Button
-              variant="tertiary"
-              onClick={goToFirstPage}
-              disabled={currentPage === 1 || isLoading}
-              startIcon={<ChevronLeft />}
-              size="S"
-            >
-              First
-            </Button>
-
-            <Button
-              variant="tertiary"
-              onClick={goToPreviousPage}
-              disabled={currentPage === 1 || isLoading}
-              startIcon={<ArrowLeft />}
-              size="S"
-            >
-              Prev
-            </Button>
-
-            <Flex alignItems="center" gap={2}>
-              <Typography variant="pi" textColor="neutral600">
-                Page
-              </Typography>
-              <TextInput
-                value={pageInput}
-                onChange={handlePageInputChange}
-                onBlur={handlePageInputBlur}
-                onKeyPress={handlePageInputKeyPress}
-                disabled={isLoading}
-                aria-label="Page number"
-                style={{ width: "60px", textAlign: "center" }}
-              />
-              <Typography variant="pi" textColor="neutral600">
-                of {totalPages}
-              </Typography>
-            </Flex>
-
-            <Button
-              variant="tertiary"
-              onClick={goToNextPage}
-              disabled={currentPage === totalPages || isLoading}
-              endIcon={<ArrowRight />}
-              size="S"
-            >
-              Next
-            </Button>
-
-            <Button
-              variant="tertiary"
-              onClick={goToLastPage}
-              disabled={currentPage === totalPages || isLoading}
-              endIcon={<ChevronRight />}
-              size="S"
-            >
-              Last
-            </Button>
-          </Flex>
-        )}
-      </Flex>
-    </Box>
-  );
-};
-
-export default TransactionHistoryTablePagination;
-

package/admin/src/pages/App/components/TransactionHistoryTable/index.jsx

@@ -1,225 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  Typography,
-  Button,
-  Flex,
-} from "@strapi/design-system";
-import { User, File, ArrowUp, ArrowDown } from "@strapi/icons";
-import StatusBadge from "../StatusBadge";
-import CustomerInfoPopover from "../CustomerInfoPopover";
-import RawDataPopover from "../RawDataPopover";
-import TransactionHistoryTableFilters from "./TransactionHistoryTableFilters";
-import TransactionHistoryTablePagination from "./TransactionHistoryTablePagination";
-
-const TransactionHistoryTable = ({
-  transactions,
-  isLoading,
-  filters,
-  onFilterChange,
-  onFilterApply,
-  sorting,
-  onSort,
-  currentPage,
-  totalPages,
-  pageSize,
-  totalItems,
-  onPageChange,
-  onPageSizeChange,
-}) => {
-  const SortableHeader = ({ column, label, sortable = true }) => {
-    const isActive = sorting?.sortBy === column;
-    const sortOrder = isActive ? sorting?.sortOrder : null;
-
-    const handleClick = () => {
-      if (sortable && onSort) {
-        onSort(column);
-      }
-    };
-
-    return (
-      <Th>
-        <Flex
-          alignItems="center"
-          gap={2}
-          onClick={handleClick}
-          style={{ cursor: sortable ? "pointer" : "default" }}
-        >
-          <Typography fontWeight="bold" textColor="primary500">
-            {label}
-          </Typography>
-          {sortable && (
-            <Box style={{ display: "flex", alignItems: "center" }}>
-              {sortOrder === "asc" && <ArrowUp size={8} />}
-              {sortOrder === "desc" && <ArrowDown size={8} />}
-              {!isActive && (
-                <Box style={{ opacity: 0.3 }}>
-                  <ArrowUp size={8} />
-                </Box>
-              )}
-            </Box>
-          )}
-        </Flex>
-      </Th>
-    );
-  };
-  const getCardTypeName = (cardtype) => {
-    switch (cardtype) {
-      case "V":
-        return "Visa";
-      case "M":
-        return "MasterCard";
-      default:
-        return cardtype || "";
-    }
-  };
-
-  const getPaymentMethodName = (clearingtype, wallettype, cardtype) => {
-    switch (clearingtype) {
-      case "cc":
-        const cardTypeName = getCardTypeName(cardtype);
-        return cardTypeName ? `CC / ${cardTypeName}` : "Credit Card";
-      case "sb":
-        return "Online Banking";
-      case "wlt":
-        return wallettype === "PPE" ? "PayPal" : "Wallet";
-      case "elv":
-        return "Direct Debit (SEPA)";
-      default:
-        return "Unknown";
-    }
-  };
-
-  const formatAmount = (amount, currency) => {
-    return `${(amount / 100).toFixed(2)} ${currency}`;
-  };
-
-  const formatDate = (dateString) => {
-    return new Date(dateString).toLocaleString("de-DE", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit",
-    });
-  };
-
-  return (
-    <Box>
-      {/* Table Filters */}
-      <TransactionHistoryTableFilters
-        filters={filters}
-        onFilterChange={onFilterChange}
-        onFilterApply={onFilterApply}
-        isLoading={isLoading}
-      />
-
-
-      <Box style={{ maxHeight: "600px", overflow: "auto", marginBottom: "1rem" }}>
-        <Table colCount={6} rowCount={transactions.length}>
-          <Thead>
-            <Tr>
-              <SortableHeader column="amount" label="Amount" />
-              <SortableHeader column="created_at" label="Created At" />
-              <SortableHeader column="status" label="Status" />
-              <SortableHeader column="reference" label="Reference" />
-              <SortableHeader column="method" label="Method" />
-              <Th>
-                <Typography fontWeight="bold" textColor="primary500">
-                  Actions
-                </Typography>
-              </Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {transactions.length === 0 && !isLoading ? (
-              <Tr>
-                <Td colSpan={6}>
-                  <Box padding={6}>
-                    <Typography textAlign="center" textColor="neutral600">
-                      No transactions found
-                    </Typography>
-                  </Box>
-                </Td>
-              </Tr>
-            ) : (
-              transactions.map((transaction) => (
-                <Tr key={transaction.id}>
-                  <Td>
-                    <Typography variant="pi" fontWeight="bold" textColor="primary600">
-                      {formatAmount(transaction.amount, transaction.currency)}
-                    </Typography>
-                  </Td>
-                  <Td>
-                    <Typography variant="pi" textColor="neutral800">
-                      {formatDate(transaction.created_at)}
-                    </Typography>
-                  </Td>
-                  <Td>
-                    <StatusBadge status={transaction.status} transaction={transaction} />
-                  </Td>
-                  <Td>
-                    <Typography variant="pi" textColor="neutral800">
-                      {transaction.reference}
-                    </Typography>
-                  </Td>
-                  <Td>
-                    <Typography variant="pi" textColor="neutral800">
-                      {getPaymentMethodName(
-                        transaction.raw_request?.clearingtype,
-                        transaction.raw_request?.wallettype,
-                        transaction.raw_request?.cardtype
-                      )}
-                    </Typography>
-                  </Td>
-                  <Td>
-                    <Flex gap={2} justifyContent="flex-start">
-                      <CustomerInfoPopover transaction={transaction}>
-                        <Button
-                          variant="secondary"
-                          size="S"
-                          startIcon={<User />}
-                        >
-                          View Customer
-                        </Button>
-                      </CustomerInfoPopover>
-                      <RawDataPopover transaction={transaction}>
-                        <Button
-                          variant="secondary"
-                          size="S"
-                          startIcon={<File />}
-                        >
-                          View Raw Data
-                        </Button>
-                      </RawDataPopover>
-                    </Flex>
-                  </Td>
-                </Tr>
-              ))
-            )}
-          </Tbody>
-        </Table>
-      </Box>
-
-      {/* Pagination */}
-      <TransactionHistoryTablePagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        pageSize={pageSize}
-        totalItems={totalItems}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-        isLoading={isLoading}
-      />
-    </Box>
-  );
-};
-
-export default TransactionHistoryTable;
-

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

@@ -1,197 +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 ApplePayBtn from "../ApplePayBtn";
-import CardDetailsInput from "./CardDetailsInput";
-
-const AuthorizationForm = ({
-  paymentAmount,
-  setPaymentAmount,
-  authReference,
-  setAuthReference,
-  isProcessingPayment,
-  onAuthorization,
-  paymentMethod,
-  settings,
-  setGooglePayToken,
-  applePayToken,
-  setApplePayToken,
-  cardtype,
-  setCardtype,
-  cardpan,
-  setCardpan,
-  cardexpiredate,
-  setCardexpiredate,
-  cardcvc2,
-  setCardcvc2,
-}) => {
-  const handleGooglePayToken = (token, paymentData) => {
-    if (!token) {
-      return;
-    }
-    setGooglePayToken(token);
-    onAuthorization(token);
-  };
-
-  const handleGooglePayError = (error) => {
-    console.error("[AuthorizationForm] Google Pay error:", error);
-  };
-
-  const handleApplePayToken = async (token, paymentData) => {
-    if (!token) {
-      return Promise.reject(new Error("Token is missing"));
-    }
-
-    setApplePayToken(token);
-
-    return Promise.resolve({
-      success: true,
-      message:
-        "Token received successfully. Please click 'Process Authorization' to complete the payment.",
-    });
-  };
-
-  const handleApplePayError = (error) => {
-    console.error("[AuthorizationForm] Apple Pay error:", 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"
-        >
-          Authorization
-        </Typography>
-        <Typography
-          variant="pi"
-          textColor="neutral600"
-          className="payment-form-description"
-        >
-          Authorize and capture an amount immediately.
-        </Typography>
-      </Flex>
-
-      <Flex gap={4} wrap="wrap">
-        <TextInput
-          label="Amount (in cents) *"
-          name="authAmount"
-          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="authReference"
-          value={authReference}
-          onChange={(e) => setAuthReference(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>
-          <ApplePayBtn
-            amount={paymentAmount}
-            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
-                authorization:
-              </Typography>
-              <Button
-                variant="default"
-                onClick={() => onAuthorization(applePayToken)}
-                loading={isProcessingPayment}
-                startIcon={<Play />}
-                style={{ maxWidth: "200px" }}
-                disabled={!paymentAmount.trim() || !authReference.trim()}
-                className="payment-button payment-button-primary"
-              >
-                Process Authorization
-              </Button>
-            </Box>
-          )}
-        </Box>
-      ) : (
-        <Button
-          variant="default"
-          onClick={onAuthorization}
-          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)) ||
-            (paymentMethod === "apl" && !applePayToken)
-          }
-        >
-          Process Authorization
-        </Button>
-      )}
-    </Flex>
-  );
-};
-
-export default AuthorizationForm;