strapi-plugin-payone-provider 5.7.26 → 5.8.26

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

@@ -1,96 +1,96 @@
-import * as React from "react";
-import { Box } from "@strapi/design-system";
-import { Layouts } from "@strapi/strapi/admin";
-import useSettings from "../hooks/useSettings";
-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";
-
-const App = () => {
-  const [activeTab, setActiveTab] = React.useState(1);
-  const [currentView, setCurrentView] = React.useState("main");
-  const settings = useSettings();
-  const paymentActions = usePaymentActions();
-
-  const handleNavigate = (view) => {
-    setCurrentView(view);
-  };
-
-  const isApplePayConfigPage = currentView === "apple-pay-config";
-  const isGooglePayConfigPage = currentView === "google-pay-config";
-
-  if (isApplePayConfigPage) {
-    return (
-      <Layouts.Root className="payone-provider-root">
-        <AppHeader
-          title="Apple Pay Configuration"
-          activeTab={null}
-          isSaving={settings.isSaving}
-          onSave={settings.handleSave}
-          onBack={() => handleNavigate("main")}
-        />
-        <Layouts.Content>
-          <Box padding={6}>
-            <ApplePayConfigPanel
-              settings={settings.settings}
-              onInputChange={settings.handleInputChange}
-              isSaving={settings.isSaving}
-              onSave={settings.handleSave}
-            />
-          </Box>
-        </Layouts.Content>
-      </Layouts.Root>
-    );
-  }
-
-  if (isGooglePayConfigPage) {
-    return (
-      <Layouts.Root className="payone-provider-root">
-        <AppHeader
-          title="Google Pay Configuration"
-          activeTab={null}
-          isSaving={settings.isSaving}
-          onSave={settings.handleSave}
-          onBack={() => handleNavigate("main")}
-        />
-        <Layouts.Content>
-          <Box padding={6}>
-            <GooglePayConfigPanel
-              settings={settings.settings}
-              onInputChange={settings.handleInputChange}
-              isSaving={settings.isSaving}
-              onSave={settings.handleSave}
-              onBack={() => handleNavigate("main")}
-            />
-          </Box>
-        </Layouts.Content>
-      </Layouts.Root>
-    );
-  }
-
-  return (
-    <Layouts.Root className="payone-provider-root">
-      <AppHeader
-        activeTab={activeTab}
-        isSaving={settings.isSaving}
-        onSave={settings.handleSave}
-      />
-      <Layouts.Content>
-        <Box padding={6}>
-          <AppTabs
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            onNavigateToConfig={handleNavigate}
-            settings={settings}
-            paymentActions={paymentActions}
-          />
-        </Box>
-      </Layouts.Content>
-    </Layouts.Root>
-  );
-};
-
-export default App;
+import * as React from "react";
+import { Box } from "@strapi/design-system";
+import { Layouts } from "@strapi/strapi/admin";
+import useSettings from "../hooks/useSettings";
+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";
+
+const App = () => {
+  const [activeTab, setActiveTab] = React.useState(1);
+  const [currentView, setCurrentView] = React.useState("main");
+  const settings = useSettings();
+  const paymentActions = usePaymentActions();
+
+  const handleNavigate = (view) => {
+    setCurrentView(view);
+  };
+
+  const isApplePayConfigPage = currentView === "apple-pay-config";
+  const isGooglePayConfigPage = currentView === "google-pay-config";
+
+  if (isApplePayConfigPage) {
+    return (
+      <Layouts.Root className="payone-provider-root">
+        <AppHeader
+          title="Apple Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => handleNavigate("main")}
+        />
+        <Layouts.Content>
+          <Box padding={6}>
+            <ApplePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+            />
+          </Box>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  if (isGooglePayConfigPage) {
+    return (
+      <Layouts.Root className="payone-provider-root">
+        <AppHeader
+          title="Google Pay Configuration"
+          activeTab={null}
+          isSaving={settings.isSaving}
+          onSave={settings.handleSave}
+          onBack={() => handleNavigate("main")}
+        />
+        <Layouts.Content>
+          <Box padding={6}>
+            <GooglePayConfigPanel
+              settings={settings.settings}
+              onInputChange={settings.handleInputChange}
+              isSaving={settings.isSaving}
+              onSave={settings.handleSave}
+              onBack={() => handleNavigate("main")}
+            />
+          </Box>
+        </Layouts.Content>
+      </Layouts.Root>
+    );
+  }
+
+  return (
+    <Layouts.Root className="payone-provider-root">
+      <AppHeader
+        activeTab={activeTab}
+        isSaving={settings.isSaving}
+        onSave={settings.handleSave}
+      />
+      <Layouts.Content>
+        <Box padding={6}>
+          <AppTabs
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            onNavigateToConfig={handleNavigate}
+            settings={settings}
+            paymentActions={paymentActions}
+          />
+        </Box>
+      </Layouts.Content>
+    </Layouts.Root>
+  );
+};
+
+export default App;

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

@@ -1,176 +1,176 @@
-.payone-provider-root [data-state="inactive"],
-.payone-provider-root [data-state="active"] {
-  background: transparent !important;
-}
-
-/* ===== Global Animations ===== */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateX(-12px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.7;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: -1000px 0;
-  }
-
-  100% {
-    background-position: 1000px 0;
-  }
-}
-
-/* Tab Button Base Styles */
-.payone-provider-root 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;
-}
-
-.payone-provider-root button[role="tab"]:active {
-  transform: scale(1) !important;
-}
-
-/* Remove shake animation */
-.payone-provider-root button[role="tab"]:focus,
-.payone-provider-root button[role="tab"]:focus-visible {
-  outline: none !important;
-  box-shadow: none !important;
-  transform: none !important;
-}
-
-.payone-provider-root 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;
-}
-
-.payone-provider-root button[role="tab"][data-state="inactive"] {
-  background: transparent !important;
-  color: #6b7280 !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-.payone-provider-root button[role="tab"][data-state="inactive"]::after {
-  background: transparent;
-}
-
-.payone-provider-root 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;
-}
-
-/* Border animation */
-@keyframes borderSlideIn {
-  0% {
-    transform: scaleX(0);
-    opacity: 0;
-  }
-
-  100% {
-    transform: scaleX(1);
-    opacity: 1;
-  }
-}
-
-/* ===== Form Section Styles ===== */
-.payment-form-section {
-  animation: fadeIn 0.5s ease-out;
-  padding: 24px;
-  margin-bottom: 20px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.payment-form-section:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.payment-form-title {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  letter-spacing: -0.01em;
-}
-
-.payment-form-description {
-  font-size: 13px;
-  line-height: 1.5;
-  margin-top: 8px;
-  margin-bottom: 20px;
-}
-
-/* ===== Divider Styles ===== */
-.payment-divider {
-  border: none;
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    #e8e8ea 20%,
-    #e8e8ea 80%,
-    transparent 100%
-  );
-  margin: 32px 0;
-  animation: fadeIn 0.4s ease-out;
-}
-
-/* ===== Responsive ===== */
-@media (max-width: 768px) {
-  .payment-container {
-    border-radius: 12px;
-    padding: 16px;
-  }
-
-  .payment-form-section {
-    padding: 16px;
-  }
-
-  .payment-grid-2,
-  .payment-grid-3 {
-    grid-template-columns: 1fr;
-  }
-}
+.payone-provider-root [data-state="inactive"],
+.payone-provider-root [data-state="active"] {
+  background: transparent !important;
+}
+
+/* ===== Global Animations ===== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+/* Tab Button Base Styles */
+.payone-provider-root 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;
+}
+
+.payone-provider-root button[role="tab"]:active {
+  transform: scale(1) !important;
+}
+
+/* Remove shake animation */
+.payone-provider-root button[role="tab"]:focus,
+.payone-provider-root button[role="tab"]:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.payone-provider-root 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;
+}
+
+.payone-provider-root button[role="tab"][data-state="inactive"] {
+  background: transparent !important;
+  color: #6b7280 !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.payone-provider-root button[role="tab"][data-state="inactive"]::after {
+  background: transparent;
+}
+
+.payone-provider-root 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;
+}
+
+/* Border animation */
+@keyframes borderSlideIn {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+/* ===== Form Section Styles ===== */
+.payment-form-section {
+  animation: fadeIn 0.5s ease-out;
+  padding: 24px;
+  margin-bottom: 20px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.payment-form-section:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.payment-form-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  letter-spacing: -0.01em;
+}
+
+.payment-form-description {
+  font-size: 13px;
+  line-height: 1.5;
+  margin-top: 8px;
+  margin-bottom: 20px;
+}
+
+/* ===== Divider Styles ===== */
+.payment-divider {
+  border: none;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    #e8e8ea 20%,
+    #e8e8ea 80%,
+    transparent 100%
+  );
+  margin: 32px 0;
+  animation: fadeIn 0.4s ease-out;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .payment-container {
+    border-radius: 12px;
+    padding: 16px;
+  }
+
+  .payment-form-section {
+    padding: 16px;
+  }
+
+  .payment-grid-2,
+  .payment-grid-3 {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -1,72 +1,72 @@
-
-export const DEFAULT_PAYMENT_DATA = {
-  firstname: "John",
-  lastname: "Doe",
-  street: "Test Street 123",
-  zip: "12345",
-  city: "Test City",
-  country: "DE",
-  email: "test@example.com",
-  salutation: "Herr",
-  gender: "m",
-  telephonenumber: "01752345678",
-  ip: "127.0.0.1",
-  customer_is_present: "yes",
-  language: "de"
-};
-
-
-export const DEFAULT_CURRENCY = "EUR";
-
-
-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",
-  },
+
+export const DEFAULT_PAYMENT_DATA = {
+  firstname: "John",
+  lastname: "Doe",
+  street: "Test Street 123",
+  zip: "12345",
+  city: "Test City",
+  country: "DE",
+  email: "test@example.com",
+  salutation: "Herr",
+  gender: "m",
+  telephonenumber: "01752345678",
+  ip: "127.0.0.1",
+  customer_is_present: "yes",
+  language: "de"
+};
+
+
+export const DEFAULT_CURRENCY = "EUR";
+
+
+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",
+  },
 ];