strapi-plugin-payone-provider 5.6.12 → 5.6.13

package/admin/src/pages/App/components/AppTabs.jsx

@@ -1,20 +1,65 @@
 import * as React from "react";
-import { Tabs } from "@strapi/design-system";
+import { Box, Typography, Tabs } from "@strapi/design-system";
 import ConfigurationPanel from "./configuration/ConfigurationPanel";
 import HistoryPanel from "./transaction-history/HistoryPanel";
 import PaymentActionsPanel from "./payment-actions/PaymentActionsPanel";
 import DocsPanel from "./DocsPanel";
 
+/**
+ * Error boundary to prevent a single tab's error from crashing the entire plugin.
+ * Automatically resets when the user switches tabs.
+ */
+class TabErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("Payone Tab Error:", error, errorInfo);
+  }
+
+  componentDidUpdate(prevProps) {
+    // Auto-reset when the user switches to a different tab
+    if (prevProps.activeTab !== this.props.activeTab && this.state.hasError) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Box padding={6} style={{ textAlign: "center" }}>
+          <Typography variant="beta" textColor="danger600">
+            Something went wrong loading this tab.
+          </Typography>
+          <Typography
+            variant="pi"
+            textColor="neutral600"
+            style={{ marginTop: "8px", display: "block" }}
+          >
+            Try switching to another tab or reload the page.
+          </Typography>
+        </Box>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 const AppTabs = ({
   activeTab,
   setActiveTab,
   onNavigateToConfig,
   settings,
-  paymentActions,
+  paymentActions
 }) => {
   return (
     <Tabs.Root
-      defaultValue={`tab-${activeTab}`}
       value={`tab-${activeTab}`}
       variant="regular"
       onValueChange={(value) =>
@@ -28,26 +73,31 @@ const AppTabs = ({
         <Tabs.Trigger value="tab-4">Documentation</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="tab-1">
-        <HistoryPanel />
+        <TabErrorBoundary activeTab={activeTab}>
+          <HistoryPanel />
+        </TabErrorBoundary>
       </Tabs.Content>
       <Tabs.Content value="tab-2">
-        <ConfigurationPanel
-          settings={settings}
-          onNavigateToConfig={onNavigateToConfig}
-        />
+        <TabErrorBoundary activeTab={activeTab}>
+          <ConfigurationPanel
+            settings={settings}
+            onNavigateToConfig={onNavigateToConfig}
+          />
+        </TabErrorBoundary>
       </Tabs.Content>
-
-
       <Tabs.Content value="tab-3">
-        <PaymentActionsPanel
-          onNavigateToConfig={onNavigateToConfig}
-          settings={settings}
-          paymentActions={paymentActions}
-        />
+        <TabErrorBoundary activeTab={activeTab}>
+          <PaymentActionsPanel
+            onNavigateToConfig={onNavigateToConfig}
+            settings={settings}
+            paymentActions={paymentActions}
+          />
+        </TabErrorBoundary>
       </Tabs.Content>
-
       <Tabs.Content value="tab-4">
-        <DocsPanel settings={settings} paymentActions={paymentActions} />
+        <TabErrorBoundary activeTab={activeTab}>
+          <DocsPanel settings={settings} paymentActions={paymentActions} />
+        </TabErrorBoundary>
       </Tabs.Content>
     </Tabs.Root>
   );

package/admin/src/pages/App/components/RenderInput.jsx

@@ -1,16 +1,7 @@
-import {
-  Field,
-  Flex,
-  DesignSystemProvider,
-  Tooltip,
-  Typography,
-  darkTheme,
-  lightTheme,
-} from "@strapi/design-system";
+import { Field, Flex, Tooltip, Typography } from "@strapi/design-system";
 import { Information } from "@strapi/icons";
 import { InputComponent } from "../../utils/getInputComponent";
 import { shouldShowTooltip } from "../../utils/tooltipHelpers";
-import { useSystemTheme } from "../../hooks/use-system-theme";
 
 const RenderInput = ({
   hint,
@@ -32,14 +23,12 @@ const RenderInput = ({
   labelDirection = "column",
   ...props
 }) => {
-  const systemTheme = useSystemTheme();
-  const theme = systemTheme === "dark" ? darkTheme : lightTheme;
   const getLabelStyle = () => {
     if (labelDirection === "row") {
       return {
         display: "flex",
         flexDirection: "row",
-        justifyContent: "space-between",
+        justifyContent: "space-between"
       };
     }
     return { display: "flex", flexDirection: "column" };
@@ -51,16 +40,13 @@ const RenderInput = ({
         <Flex alignItems="center" gap={1} style={{ marginBottom: "5px" }}>
           <Field.Label style={labelStyle}>{label}</Field.Label>
           {shouldShowTooltip(inputType, tooltipContent) && (
-            <DesignSystemProvider theme={theme}>
-              <Tooltip label={tooltipContent}>
-                <Information
-                  style={{
-                    cursor: "pointer",
-                    color: systemTheme === "dark" ? "#fff" : "#000",
-                  }}
-                />
-              </Tooltip>
-            </DesignSystemProvider>
+            <Tooltip label={tooltipContent}>
+              <Information
+                style={{
+                  cursor: "pointer"
+                }}
+              />
+            </Tooltip>
           )}
         </Flex>
         <InputComponent
@@ -75,8 +61,6 @@ const RenderInput = ({
           placeholder={placeholder}
           onLabel={onLabel}
           offLabel={offLabel}
-          systemTheme={systemTheme}
-          theme={theme}
           type={type}
           {...props}
         />

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

@@ -24,7 +24,7 @@ const App = () => {
 
   if (isApplePayConfigPage) {
     return (
-      <Layouts.Root>
+      <Layouts.Root className="payone-provider-root">
         <AppHeader
           title="Apple Pay Configuration"
           activeTab={null}
@@ -48,7 +48,7 @@ const App = () => {
 
   if (isGooglePayConfigPage) {
     return (
-      <Layouts.Root>
+      <Layouts.Root className="payone-provider-root">
         <AppHeader
           title="Google Pay Configuration"
           activeTab={null}
@@ -72,7 +72,7 @@ const App = () => {
   }
 
   return (
-    <Layouts.Root>
+    <Layouts.Root className="payone-provider-root">
       <AppHeader
         activeTab={activeTab}
         isSaving={settings.isSaving}

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

@@ -1,5 +1,5 @@
-[data-state="inactive"],
-[data-state="active"] {
+.payone-provider-root [data-state="inactive"],
+.payone-provider-root [data-state="active"] {
   background: transparent !important;
 }
 
@@ -29,7 +29,6 @@
 }
 
 @keyframes pulse {
-
   0%,
   100% {
     opacity: 1;
@@ -50,9 +49,8 @@
   }
 }
 
-
 /* Tab Button Base Styles */
-button[role="tab"] {
+.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;
@@ -60,44 +58,49 @@ button[role="tab"] {
   background: transparent !important;
   outline: none !important;
   transform: scale(1) !important;
-
 }
 
-
-
-button[role="tab"]:active {
+.payone-provider-root button[role="tab"]:active {
   transform: scale(1) !important;
 }
 
 /* Remove shake animation */
-button[role="tab"]:focus,
-button[role="tab"]:focus-visible {
+.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;
 }
 
-button[role="tab"][data-state="active"] {
-  background: linear-gradient(180deg, rgba(73, 69, 255, 0.05) 0%, transparent 100%) !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;
 }
 
-button[role="tab"][data-state="inactive"] {
+.payone-provider-root button[role="tab"][data-state="inactive"] {
   background: transparent !important;
   color: #6b7280 !important;
   box-shadow: none !important;
   border: none !important;
 }
 
-button[role="tab"][data-state="inactive"]::after {
+.payone-provider-root button[role="tab"][data-state="inactive"]::after {
   background: transparent;
 }
 
-button[role="tab"][data-state="inactive"]:hover {
-  background: linear-gradient(180deg, rgba(73, 69, 255, 0.02) 0%, transparent 100%) !important;
+.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;
 }
 
@@ -144,15 +147,17 @@ button[role="tab"][data-state="inactive"]:hover {
 .payment-divider {
   border: none;
   height: 1px;
-  background: linear-gradient(90deg, transparent 0%, #e8e8ea 20%, #e8e8ea 80%, transparent 100%);
+  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 {
@@ -168,4 +173,4 @@ button[role="tab"][data-state="inactive"]:hover {
   .payment-grid-3 {
     grid-template-columns: 1fr;
   }
-}
+}

package/admin/src/pages/utils/getInputComponent.jsx

@@ -4,14 +4,27 @@ import {
   SingleSelect,
   SingleSelectOption,
   Switch,
-  DesignSystemProvider,
   Tooltip,
   Textarea,
   Toggle,
   Checkbox,
-  Typography,
+  Typography
 } from "@strapi/design-system";
 import { Information } from "@strapi/icons";
+
+const TooltipIcon = ({ tooltipContent }) => {
+  if (!tooltipContent) return null;
+  return (
+    <Tooltip label={tooltipContent ?? ""}>
+      <Information
+        style={{
+          cursor: "pointer"
+        }}
+      />
+    </Tooltip>
+  );
+};
+
 export const InputComponent = ({
   inputType,
   name,
@@ -23,8 +36,6 @@ export const InputComponent = ({
   placeholder = "",
   onLabel = "True",
   offLabel = "False",
-  systemTheme,
-  theme,
   className = "payment-input",
   type = "text",
   ...props
@@ -43,16 +54,7 @@ export const InputComponent = ({
           type={type}
           endAction={
             tooltipContent ? (
-              <DesignSystemProvider theme={theme}>
-                <Tooltip label={tooltipContent ?? ""}>
-                  <Information
-                    style={{
-                      cursor: "pointer",
-                      color: systemTheme === "dark" ? "#fff" : "#000",
-                    }}
-                  />
-                </Tooltip>
-              </DesignSystemProvider>
+              <TooltipIcon tooltipContent={tooltipContent} />
             ) : null
           }
           {...props}
@@ -71,16 +73,7 @@ export const InputComponent = ({
           required={required}
           startAction={
             tooltipContent ? (
-              <DesignSystemProvider theme={theme}>
-                <Tooltip label={tooltipContent ?? ""}>
-                  <Information
-                    style={{
-                      cursor: "pointer",
-                      color: systemTheme === "dark" ? "#fff" : "#000",
-                    }}
-                  />
-                </Tooltip>
-              </DesignSystemProvider>
+              <TooltipIcon tooltipContent={tooltipContent} />
             ) : null
           }
           {...props}
@@ -143,16 +136,7 @@ export const InputComponent = ({
           type="date"
           startAction={
             tooltipContent ? (
-              <DesignSystemProvider theme={theme}>
-                <Tooltip label={tooltipContent ?? ""}>
-                  <Information
-                    style={{
-                      cursor: "pointer",
-                      color: systemTheme === "dark" ? "#fff" : "#000",
-                    }}
-                  />
-                </Tooltip>
-              </DesignSystemProvider>
+              <TooltipIcon tooltipContent={tooltipContent} />
             ) : null
           }
           {...props}
@@ -179,7 +163,7 @@ export const InputComponent = ({
             if (typeof onChange === "function") {
               const syntheticEvent = {
                 target: { value: selectedValue },
-                currentTarget: { value: selectedValue },
+                currentTarget: { value: selectedValue }
               };
               onChange(syntheticEvent);
             }
@@ -188,16 +172,7 @@ export const InputComponent = ({
           placeholder={placeholder}
           startIcon={
             tooltipContent ? (
-              <DesignSystemProvider theme={theme}>
-                <Tooltip label={tooltipContent ?? ""}>
-                  <Information
-                    style={{
-                      cursor: "pointer",
-                      color: systemTheme === "dark" ? "#fff" : "#000",
-                    }}
-                  />
-                </Tooltip>
-              </DesignSystemProvider>
+              <TooltipIcon tooltipContent={tooltipContent} />
             ) : null
           }
           {...props}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-payone-provider",
-  "version": "5.6.12",
+  "version": "5.6.13",
   "description": "Strapi plugin for Payone payment gateway integration",
   "license": "MIT",
   "maintainers": [
@@ -42,4 +42,4 @@
     "kind": "plugin",
     "displayName": "Strapi Payone Provider"
   }
-}
+}