strapi-plugin-payone-provider 4.6.9 → 5.6.9

package/admin/src/pages/App/styles.css

@@ -1,4 +1,7 @@
-/* Payment System UI - Minimalistic & Professional Styles */
+[data-state="inactive"],
+[data-state="active"] {
+  background: transparent !important;
+}
 
 /* ===== Global Animations ===== */
 @keyframes fadeIn {
@@ -47,83 +50,68 @@
   }
 }
 
-/* ===== Container Styles ===== */
-
-/* ===== Card Styles ===== */
-.payment-card {
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 
-/* ===== Button Styles ===== */
-.payment-button {
-  border-radius: 8px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
+/* Tab Button Base Styles */
+button[role="tab"] {
+  box-shadow: none !important;
   border: none !important;
-}
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
+  background: transparent !important;
+  outline: none !important;
+  transform: scale(1) !important;
 
-.payment-button-primary {
-  background: linear-gradient(135deg, #4945ff 0%, #7b3af4 100%);
-  color: white;
 }
 
 
-.payment-button-success {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: white;
-}
 
-.payment-button-primary:hover {
-  background: linear-gradient(135deg, #4945ff 0%, #7b3af4 100%);
-  color: white;
+button[role="tab"]:active {
+  transform: scale(1) !important;
 }
 
-
-.payment-button-success:hover {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-  color: white;
+/* Remove shake animation */
+button[role="tab"]:focus,
+button[role="tab"]:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  transform: none !important;
 }
 
-
-/* ===== Input Styles ===== */
-.payment-input {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 8px;
+button[role="tab"][data-state="active"] {
+  background: linear-gradient(180deg, rgba(73, 69, 255, 0.05) 0%, transparent 100%) !important;
+  color: #4945ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+  border: none !important;
 }
 
-.payment-input:focus-within {
-  border-color: #4945ff;
-  box-shadow: 0 0 0 3px rgba(73, 69, 255, 0.1);
+button[role="tab"][data-state="inactive"] {
+  background: transparent !important;
+  color: #6b7280 !important;
+  box-shadow: none !important;
+  border: none !important;
 }
 
-/* ===== Tab Styles ===== */
-.payment-tab {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  padding: 12px 20px;
-  font-weight: 500;
-  color: #6b7280;
+button[role="tab"][data-state="inactive"]::after {
+  background: transparent;
 }
 
-.payment-tab:hover {
-  color: #4945ff;
+button[role="tab"][data-state="inactive"]:hover {
+  background: linear-gradient(180deg, rgba(73, 69, 255, 0.02) 0%, transparent 100%) !important;
+  box-shadow: none !important;
 }
 
-.payment-tab-active {
-  color: #4945ff;
-  font-weight: 600;
-}
+/* Border animation */
+@keyframes borderSlideIn {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
 
-.payment-tab-active::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #4945ff 0%, #7b3af4 100%);
-  animation: slideIn 0.3s ease-out;
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
 }
 
 /* ===== Form Section Styles ===== */
@@ -161,120 +149,9 @@
   animation: fadeIn 0.4s ease-out;
 }
 
-/* ===== Status Badge Styles ===== */
-.payment-status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  animation: fadeIn 0.3s ease-out;
-  transition: all 0.2s ease;
-}
 
-.payment-status-badge:hover {
-  transform: scale(1.05);
-}
 
-/* ===== Loading States ===== */
-.payment-loading {
-  position: relative;
-  overflow: hidden;
-}
 
-.payment-loading::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg,
-      transparent,
-      rgba(255, 255, 255, 0.4),
-      transparent);
-  animation: shimmer 1.5s infinite;
-}
-
-/* ===== Alert/Notification Styles ===== */
-.payment-alert {
-  animation: slideIn 0.3s ease-out;
-  transition: all 0.2s ease;
-}
-
-.payment-alert:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-/* ===== Result Card Styles ===== */
-.payment-result-card {
-  animation: fadeIn 0.5s ease-out;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.payment-result-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transform: translateY(-2px);
-}
-
-/* ===== Transaction Item Styles ===== */
-.payment-transaction-item {
-  margin-bottom: 12px;
-  animation: fadeIn 0.4s ease-out;
-  cursor: pointer;
-}
-
-.payment-transaction-item:hover {
-  box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
-}
-
-/* ===== Typography Styles ===== */
-.payment-title {
-  font-size: 24px;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  margin-bottom: 8px;
-  animation: fadeIn 0.4s ease-out;
-}
-
-.payment-subtitle {
-  font-size: 15px;
-  line-height: 1.6;
-  animation: fadeIn 0.5s ease-out;
-}
-
-.payment-section-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 4px;
-  letter-spacing: -0.01em;
-}
-
-/* ===== Grid & Layout ===== */
-.payment-grid {
-  display: grid;
-  gap: 20px;
-  animation: fadeIn 0.5s ease-out;
-}
-
-.payment-grid-2 {
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.payment-grid-3 {
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-
-/* ===== Smooth Transitions ===== */
-
-/* ===== Focus States ===== */
-.payment-focus:focus-visible {
-  outline: 2px solid #4945ff;
-  outline-offset: 2px;
-  border-radius: 6px;
-}
 
 /* ===== Responsive ===== */
 @media (max-width: 768px) {

package/admin/src/pages/constants/paymentConstants.js

@@ -1,13 +1,4 @@
-/**
- * Default payment data for testing
- * Used across all payment operations
- * 
- * Note: successurl, errorurl, and backurl are only required for:
- * - 3D Secure enabled credit card payments
- * - Redirect-based payment methods (PayPal, Google Pay, Apple Pay, Sofort)
- * 
- * For non-redirect payments (3DS disabled credit card, SEPA), these URLs are optional
- */
+
 export const DEFAULT_PAYMENT_DATA = {
   firstname: "John",
   lastname: "Doe",
@@ -24,13 +15,58 @@ export const DEFAULT_PAYMENT_DATA = {
   language: "de"
 };
 
-/**
- * Default currency 
- */
+
 export const DEFAULT_CURRENCY = "EUR";
 
-/**
- * Default page size for pagination
- */
+
 export const DEFAULT_PAGE_SIZE = 10;
 
+export const filterOptions = [
+  {
+    name: "status",
+    label: "Status",
+    type: "enumeration",
+    options: [
+      { value: "APPROVED", label: "Approved" },
+      { value: "ERROR", label: "Error" },
+      { value: "REDIRECT", label: "Redirect" },
+      { value: "INVALID", label: "Invalid" },
+      { value: "PENDING", label: "Pending" },
+      { value: "CANCELLED", label: "Cancelled" },
+    ],
+  },
+  {
+    name: "request_type",
+    label: "Request Type",
+    type: "enumeration",
+    options: [
+      { value: "preauthorization", label: "Preauthorization" },
+      { value: "authorization", label: "Authorization" },
+      { value: "capture", label: "Capture" },
+      { value: "refund", label: "Refund" },
+    ],
+  },
+  {
+    name: "payment_method",
+    label: "Payment Method",
+    type: "enumeration",
+    options: [
+      { value: "credit_card", label: "Credit Card" },
+      { value: "paypal", label: "PayPal" },
+      { value: "google_pay", label: "Google Pay" },
+      { value: "apple_pay", label: "Apple Pay" },
+      { value: "sofort", label: "Sofort Banking" },
+      { value: "sepa", label: "SEPA Direct Debit" },
+    ],
+  },
+  {
+    name: "date_from",
+    label: "Date From",
+    type: "date",
+  },
+  {
+    name: "date_to",
+    label: "Date To",
+    type: "date",
+  },
+];

package/admin/src/pages/hooks/use-system-theme.js

@@ -0,0 +1,27 @@
+
+import { useEffect, useState } from 'react';
+
+export function useSystemTheme() {
+  const getCurrentTheme = () =>
+    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light';
+
+  const [theme, setTheme] = useState(getCurrentTheme);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = () => {
+      setTheme(mediaQuery.matches ? 'dark' : 'light');
+    };
+
+    // Add event listener for changes
+    mediaQuery.addEventListener('change', handleChange);
+
+    // Cleanup listener on unmount
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return theme;
+}