strapi-plugin-payone-provider 1.6.1 → 1.6.2

package/admin/src/pages/App/components/TransactionHistoryItem.js

@@ -1,377 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Box,
-  Card,
-  CardBody,
-  Flex,
-  Stack,
-  Typography,
-  Badge,
-  Button,
-} from '@strapi/design-system';
-import {
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from './icons';
-const TransactionHistoryItem = ({ transaction }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-
-  const getStatusColor = (status) => {
-    switch (status) {
-      case 'APPROVED':
-        return 'success';
-      case 'ERROR':
-        return 'danger';
-      case 'PENDING':
-        return 'warning';
-      default:
-        return 'neutral';
-    }
-  };
-
-
-  const getPaymentMethodName = (clearingtype, wallettype) => {
-    switch (clearingtype) {
-      case 'cc':
-        return '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',
-    });
-  };
-
-  const getCardTypeName = (cardtype) => {
-    switch (cardtype) {
-      case 'V':
-        return 'Visa';
-      case 'M':
-        return 'Mastercard';
-      case 'A':
-        return 'American Express';
-      default:
-        return cardtype || 'Unknown';
-    }
-  };
-
-  return (
-    <Card
-      className="payment-transaction-item"
-      background="neutral0"
-      hasRadius
-      shadow="filterShadow"
-      style={{
-        marginBottom: '16px',
-      }}
-    >
-      <CardBody padding={6} style={{ display: "flex", flexDirection: 'column', gap: '6px' }}>
-        {/* Main Values in Column Format */}
-        <Stack spacing={3} marginBottom={4}>
-          {/* Reference */}
-          <Flex alignItems="center" gap={2}>
-            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-              Reference:
-            </Typography>
-            <Typography variant="pi" textColor="neutral800">
-              {transaction.reference}
-            </Typography>
-          </Flex>
-          {/* Date */}
-          <Flex alignItems="center" gap={2}>
-            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-              Date:
-            </Typography>
-            <Typography variant="pi" textColor="neutral800">
-              {formatDate(transaction.timestamp)}
-            </Typography>
-          </Flex>
-
-          {/* Payment Method */}
-          <Flex alignItems="center" gap={2}>
-            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-              Method:
-            </Typography>
-            <Typography variant="pi" textColor="neutral800">
-              {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
-            </Typography>
-            {transaction.txid && (
-              <>
-                <Typography variant="pi" textColor="neutral500">•</Typography>
-                <Typography variant="pi" textColor="neutral600">
-                  TX: {transaction.txid}
-                </Typography>
-              </>
-            )}
-          </Flex>
-
-          {/* Amount */}
-          <Flex alignItems="center" gap={2}>
-            <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-              Amount:
-            </Typography>
-            <Typography variant="pi" fontWeight="bold" textColor="primary600" fontSize={2}>
-              {formatAmount(transaction.amount, transaction.currency)}
-            </Typography>
-            <Badge
-              backgroundColor={getStatusColor(transaction.status)}
-              textColor="neutral0"
-            >
-              {transaction.status}
-            </Badge>
-          </Flex>
-        </Stack>
-
-
-
-        {/* Expand/Collapse Button */}
-        <Flex justifyContent="center">
-          <Button
-            size="S"
-            onClick={() => setIsExpanded(!isExpanded)}
-            startIcon={isExpanded ? <ChevronUpIcon size={16} /> : <ChevronDownIcon size={16} />}
-            className="payment-button payment-button-primary"
-          >
-            {isExpanded ? 'Hide Details' : 'Show Details'}
-          </Button>
-        </Flex>
-
-        {/* Expanded Details */}
-        {isExpanded && (
-          <Box marginTop={4} style={{ animation: 'fadeIn 0.3s ease-out' }}>
-            <Stack spacing={4}>
-              {/* Error Message */}
-              {transaction.status === 'ERROR' && (
-                <Box
-                  marginBottom={4}
-                  padding={3}
-                  background="danger100"
-                  hasRadius
-                  className="payment-alert"
-                  style={{
-                    border: '1px solid',
-                    borderColor: 'var(--strapi-colors-danger200)',
-                  }}
-                >
-                  <Typography variant="pi" fontWeight="bold" textColor="danger600" marginBottom={1}>
-                    Error: {transaction.error_message}
-                  </Typography>
-                  {transaction.customer_message && (
-                    <Typography variant="pi" textColor="danger600">
-                      Customer Message: {transaction.customer_message}
-                    </Typography>
-                  )}
-                </Box>
-              )}
-              {/* Customer Information */}
-              <Box>
-                <Flex alignItems="center" gap={2} marginBottom={3}>
-                  <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-                    Customer Information
-                  </Typography>
-                </Flex>
-                <Box paddingLeft={4}>
-                  <Stack spacing={2}>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Name:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.firstname} {transaction.raw_request?.lastname}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Email:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.email}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Phone:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.telephonenumber}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Address:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.street}, {transaction.raw_request?.zip} {transaction.raw_request?.city}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Country:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.country}
-                      </Typography>
-                    </Flex>
-                  </Stack>
-                </Box>
-              </Box>
-
-              {/* Payment Method Details */}
-              <Box>
-                <Flex alignItems="center" gap={2} marginBottom={3}>
-                  <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-                    Payment Method Details
-                  </Typography>
-                </Flex>
-                <Box paddingLeft={4}>
-                  <Stack spacing={2}>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Type:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {getPaymentMethodName(transaction.raw_request?.clearingtype, transaction.raw_request?.wallettype)}
-                      </Typography>
-                    </Flex>
-
-                    {transaction.raw_request?.clearingtype === 'cc' && (
-                      <>
-                        <Flex justifyContent="space-between" gap={3}>
-                          <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                            Card Type:
-                          </Typography>
-                          <Typography variant="pi" textColor="neutral800">
-                            {getCardTypeName(transaction.raw_request?.cardtype)}
-                          </Typography>
-                        </Flex>
-                        <Flex justifyContent="space-between" gap={3}>
-                          <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                            Card Number:
-                          </Typography>
-                          <Typography variant="pi" textColor="neutral800">
-                            **** **** **** {transaction.raw_request?.cardpan?.slice(-4)}
-                          </Typography>
-                        </Flex>
-                        <Flex justifyContent="space-between" gap={3}>
-                          <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                            Expiry:
-                          </Typography>
-                          <Typography variant="pi" textColor="neutral800">
-                            {transaction.raw_request?.cardexpiredate}
-                          </Typography>
-                        </Flex>
-                      </>
-                    )}
-
-                    {transaction.raw_request?.clearingtype === 'wlt' && transaction.raw_request?.wallettype && (
-                      <Flex justifyContent="space-between" gap={3}>
-                        <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                          Wallet Type:
-                        </Typography>
-                        <Typography variant="pi" textColor="neutral800">
-                          {transaction.raw_request.wallettype}
-                        </Typography>
-                      </Flex>
-                    )}
-
-                    {transaction.raw_request?.clearingtype === 'sb' && (
-                      <>
-                        <Flex justifyContent="space-between" gap={3}>
-                          <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                            Bank Transfer Type:
-                          </Typography>
-                          <Typography variant="pi" textColor="neutral800">
-                            {transaction.raw_request?.onlinebanktransfertype}
-                          </Typography>
-                        </Flex>
-                        <Flex justifyContent="space-between" gap={3}>
-                          <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                            Bank Country:
-                          </Typography>
-                          <Typography variant="pi" textColor="neutral800">
-                            {transaction.raw_request?.bankcountry}
-                          </Typography>
-                        </Flex>
-                      </>
-                    )}
-                  </Stack>
-                </Box>
-              </Box>
-
-              {/* Technical Details */}
-              <Box>
-                <Typography variant="pi" fontWeight="bold" textColor="neutral800" marginBottom={3}>
-                  Technical Details
-                </Typography>
-                <Box paddingLeft={4}>
-                  <Stack spacing={2}>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Request Type:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.request_type}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Mode:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.mode}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        IP Address:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.ip}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Language:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.language}
-                      </Typography>
-                    </Flex>
-                    <Flex justifyContent="space-between" gap={3}>
-                      <Typography variant="pi" textColor="neutral600" fontWeight="medium">
-                        Customer Present:
-                      </Typography>
-                      <Typography variant="pi" textColor="neutral800">
-                        {transaction.raw_request?.customer_is_present}
-                      </Typography>
-                    </Flex>
-                  </Stack>
-                </Box>
-              </Box>
-            </Stack>
-          </Box>
-        )}
-      </CardBody>
-    </Card>
-  );
-};
-
-export default TransactionHistoryItem;

package/admin/src/pages/App/components/icons/BankIcon.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const BankIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill={color} />
-    <path d="M12 6l-1.5 3L7 8.5l2.5 2.5L8 14l4-2.5L16 14l-1.5-3L18 8.5l-3.5.5L12 6z" fill={color} />
-  </svg>
-);
-
-export default BankIcon;

package/admin/src/pages/App/components/icons/ChevronDownIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const ChevronDownIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
-  </svg>
-);
-
-export default ChevronDownIcon;

package/admin/src/pages/App/components/icons/ChevronUpIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const ChevronUpIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill={color} />
-  </svg>
-);
-
-export default ChevronUpIcon;

package/admin/src/pages/App/components/icons/CreditCardIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const CreditCardIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" fill={color} />
-  </svg>
-);
-
-export default CreditCardIcon;

package/admin/src/pages/App/components/icons/ErrorIcon.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const ErrorIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z" fill={color} />
-  </svg>
-);
-
-export default ErrorIcon;

package/admin/src/pages/App/components/icons/InfoIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const InfoIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill={color} />
-  </svg>
-);
-
-export default InfoIcon;

package/admin/src/pages/App/components/icons/PaymentIcon.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-const PaymentIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 8h20v12H2V8zm2 2v8h16V10H4z" fill={color} />
-    <path d="M2 4h20v2H2V4z" fill={color} />
-  </svg>
-);
-
-export default PaymentIcon;

package/admin/src/pages/App/components/icons/PendingIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const PendingIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill={color} />
-  </svg>
-);
-
-export default PendingIcon;

package/admin/src/pages/App/components/icons/PersonIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const PersonIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill={color} />
-  </svg>
-);
-
-export default PersonIcon;

package/admin/src/pages/App/components/icons/SuccessIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const SuccessIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill={color} />
-  </svg>
-);
-
-export default SuccessIcon;

package/admin/src/pages/App/components/icons/WalletIcon.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const WalletIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z" fill={color} />
-  </svg>
-);
-
-export default WalletIcon;

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

@@ -1,11 +0,0 @@
-export { default as PaymentIcon } from './PaymentIcon';
-export { default as PersonIcon } from './PersonIcon';
-export { default as CreditCardIcon } from './CreditCardIcon';
-export { default as BankIcon } from './BankIcon';
-export { default as WalletIcon } from './WalletIcon';
-export { default as ErrorIcon } from './ErrorIcon';
-export { default as SuccessIcon } from './SuccessIcon';
-export { default as PendingIcon } from './PendingIcon';
-export { default as InfoIcon } from './InfoIcon';
-export { default as ChevronDownIcon } from './ChevronDownIcon';
-export { default as ChevronUpIcon } from './ChevronUpIcon';