strapi-plugin-payone-provider 5.6.11 → 5.6.13

package/admin/src/components/PluginIcon/index.jsx

@@ -1,6 +1,17 @@
-import * as React from '@strapi/strapi/admin';
-import { PuzzlePiece } from "@strapi/icons";
 
-const PluginIcon = () => <PuzzlePiece />;
+const PluginIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    width={18}
+    height={18}
+    fill="currentColor"
+    version="1.1"
+    viewBox="0 0 438.254 438.254"
+  >
+    <path d="M402.612 177.546H368.25V63.187c0-19.652-15.988-35.64-35.64-35.64H35.641C15.988 27.547 0 43.535 0 63.187v161.88c0 19.652 15.988 35.64 35.641 35.64h34.357v114.358c0 19.653 15.989 35.642 35.642 35.642h296.973c19.652 0 35.642-15.989 35.642-35.642V213.188c-.001-19.653-15.99-35.642-35.643-35.642m-64.362-45.839H30v-20h308.25zM35.641 57.547h296.97c3.109 0 5.64 2.53 5.64 5.64v28.52H30v-28.52c0-3.11 2.53-5.64 5.641-5.64m0 173.16a5.647 5.647 0 0 1-5.641-5.64v-73.36h308.25v25.839H105.64c-19.652 0-35.642 15.989-35.642 35.642v17.519zm372.613 144.358a5.65 5.65 0 0 1-5.642 5.642H105.64a5.65 5.65 0 0 1-5.642-5.642V213.188a5.65 5.65 0 0 1 5.642-5.642h296.973a5.65 5.65 0 0 1 5.642 5.642z"></path>
+    <path d="M358.585 287.966c-6.941 0-13.48 1.74-19.216 4.797-5.885-3.15-12.429-4.797-19.265-4.797-22.607 0-41 18.393-41 41s18.393 41 41 41c6.835 0 13.379-1.647 19.265-4.796a40.74 40.74 0 0 0 19.216 4.796c22.607 0 41-18.393 41-41s-18.393-41-41-41m-59.481 41c0-11.579 9.421-21 21-21 1.065 0 2.113.09 3.145.243-3.593 6.093-5.664 13.186-5.664 20.757s2.071 14.664 5.664 20.757c-1.032.153-2.08.243-3.145.243-11.58 0-21-9.42-21-21m59.481 21c-11.579 0-21-9.421-21-21s9.421-21 21-21 21 9.421 21 21-9.421 21-21 21M177.126 241.707h-28c-5.522 0-10 4.477-10 10s4.478 10 10 10h28c5.522 0 10-4.477 10-10s-4.478-10-10-10M237.793 241.707h-28c-5.522 0-10 4.477-10 10s4.478 10 10 10h28c5.522 0 10-4.477 10-10s-4.478-10-10-10M308.459 251.707c0-5.523-4.478-10-10-10h-28c-5.522 0-10 4.477-10 10s4.478 10 10 10h28c5.522 0 10-4.477 10-10M331.126 261.707h28c5.522 0 10-4.477 10-10s-4.478-10-10-10h-28c-5.522 0-10 4.477-10 10s4.478 10 10 10"></path>
+  </svg>
+);
 
 export default PluginIcon;

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

@@ -26,7 +26,7 @@ const AppHeader = ({ activeTab, isSaving, onSave, title, onBack }) => {
           >
             Back to Main
           </Button>
-        ) : activeTab === 1 ? (
+        ) : activeTab === 2 ? (
           <Button
             loading={isSaving}
             onClick={onSave}

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) =>
@@ -22,29 +67,37 @@ const AppTabs = ({
       }
     >
       <Tabs.List style={{ width: "100%" }}>
-        <Tabs.Trigger value="tab-1">Configuration</Tabs.Trigger>
-        <Tabs.Trigger value="tab-2">Transaction History</Tabs.Trigger>
+        <Tabs.Trigger value="tab-1">Transaction History</Tabs.Trigger>
+        <Tabs.Trigger value="tab-2">Configuration</Tabs.Trigger>
         <Tabs.Trigger value="tab-3">Payment Actions</Tabs.Trigger>
         <Tabs.Trigger value="tab-4">Documentation</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="tab-1">
-        <ConfigurationPanel settings={settings} />
+        <TabErrorBoundary activeTab={activeTab}>
+          <HistoryPanel />
+        </TabErrorBoundary>
       </Tabs.Content>
-
       <Tabs.Content value="tab-2">
-        <HistoryPanel />
+        <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/components/StatusBadge.jsx

@@ -1,13 +1,15 @@
-import * as React from "@strapi/strapi/admin";
+import * as React from "react";
 import {
   Badge,
-  DesignSystemProvider,
-  darkTheme,
-  lightTheme,
+  Box,
+  Flex,
+  Typography,
 } from "@strapi/design-system";
-import { useSystemTheme } from "../../hooks/use-system-theme";
+import { MarkCircle } from "./icons";
+
+const StatusBadge = ({ status, transaction }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
 
-const StatusBadge = ({ status, size = "S" }) => {
   const statusColors = {
     APPROVED: "success200",
     PENDING: "warning200",
@@ -16,19 +18,69 @@ const StatusBadge = ({ status, size = "S" }) => {
     INVALID: "danger200",
     REDIRECT: "success100",
   };
-  const systemTheme = useSystemTheme();
-  const theme = systemTheme === "dark" ? darkTheme : lightTheme;
+
+  const getDisplayText = () => {
+    if (status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode) {
+      return `${status} - ${transaction.raw_response.Error.ErrorCode}`;
+    }
+    return status;
+  };
+
+  const displayText = getDisplayText();
+  const errorMessage = status === "ERROR" && transaction?.raw_response?.Error?.ErrorMessage 
+    ? transaction.raw_response.Error.ErrorMessage 
+    : null;
+  
+  const errorCode = status === "ERROR" && transaction?.raw_response?.Error?.ErrorCode
+    ? transaction.raw_response.Error.ErrorCode
+    : null;
+  
+  const showExclamationIcon = status === "ERROR" && !errorCode && !errorMessage;
+
   return (
-    <DesignSystemProvider theme={theme}>
-      <Badge
-        borderColor={statusColors[status]}
-        background={"transparent"}
-        textColor={statusColors[status]}
-        size={size}
-      >
-        {status || "UNKNOWN"}
+    <Box
+    position="relative"
+    onMouseEnter={() => setIsHovered(true)}
+    onMouseLeave={() => setIsHovered(false)}
+    style={{ display: "inline-block", cursor: status === "ERROR" ? "pointer" : "default" }}
+  >
+    <Flex gap={2} alignItems="center">
+      <Badge backgroundColor={statusColors[status] || "warning100"}>
+        {displayText}
       </Badge>
-    </DesignSystemProvider>
+      {showExclamationIcon && (
+        <MarkCircle color="danger500"
+          style={{
+            width: "16px",
+            height: "16px"
+          }} 
+        />
+      )}
+    </Flex>
+    {isHovered && errorMessage && (
+      <Box
+        position="absolute"
+        zIndex={1000}
+        bottom="100%"
+        left="50%"
+        transform="translateX(-50%)"
+        marginBottom={2}
+        padding={3}
+        background="neutral900"
+        hasRadius
+        style={{
+          whiteSpace: "pre-line",
+          minWidth: "200px",
+          maxWidth: "300px",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        }}
+      >
+        <Typography variant="pi" textColor="neutral0" style={{ fontSize: "12px" }}>
+          Error: {errorMessage}
+        </Typography>
+      </Box>
+    )}
+  </Box>
   );
 };
 

package/admin/src/pages/App/components/configuration/ConfigurationPanel.jsx

@@ -3,7 +3,7 @@ import { Box, Flex, Typography } from "@strapi/design-system";
 import ConfigurationFields from "./ConfigurationFields";
 import TestConnection from "./TestConnection";
 
-const ConfigurationPanel = ({ settings }) => {
+const ConfigurationPanel = ({ settings, onNavigateToConfig }) => {
   return (
     <Flex direction="column" alignItems="stretch" gap={8} paddingTop={8}>
       <Box>
@@ -31,7 +31,7 @@ const ConfigurationPanel = ({ settings }) => {
         settings={settings.settings}
         onInputChange={settings.handleInputChange}
         onPaymentMethodToggle={settings.handlePaymentMethodToggle}
-        onNavigateToConfig={settings.onNavigateToConfig}
+        onNavigateToConfig={onNavigateToConfig}
       />
 
       <TestConnection

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

@@ -9,3 +9,4 @@ export { default as PendingIcon } from './PendingIcon.jsx';
 export { default as InfoIcon } from './InfoIcon.jsx';
 export { default as ChevronDownIcon } from './ChevronDownIcon.jsx';
 export { default as ChevronUpIcon } from './ChevronUpIcon.jsx';
+export { default as MarkCircle } from './MarkCircle.jsx';

package/admin/src/pages/App/components/transaction-history/FiltersPanel.jsx

@@ -95,12 +95,13 @@ const FiltersPanel = ({ filters, handleFiltersChange }) => {
         <RenderInput
           key={filter.name}
           name={filter.name}
-          value={filters[filter.name] || ""}
+          value={filters[filter.name] ?? ""}
           onChange={(e) => {
-            const value =
+            const raw =
               filter.inputType === "textInput"
                 ? e.target.value
-                : e.target?.value || e;
+                : e.target?.value ?? e;
+            const value = raw === "all" || raw === undefined ? "" : String(raw);
             handleFiltersChange({ [filter.name]: value });
           }}
           inputType={filter.inputType}

package/admin/src/pages/App/components/transaction-history/TransactionTable.jsx

@@ -11,6 +11,7 @@ import TransactionDetails from "./details/TransactionDetails";
 import FiltersPanel from "./FiltersPanel";
 import useTransactionHistory from "../../../hooks/useTransactionHistory";
 import StatusBadge from "../StatusBadge";
+
 const TransactionTable = () => {
   const {
     transactions,
@@ -87,8 +88,8 @@ const TransactionTable = () => {
                         <Table.Cell>
                           <Typography variant="pi">
                             {getPaymentMethodName(
-                              transaction.raw_request?.clearingtype,
-                              transaction.raw_request?.wallettype
+                              (transaction.raw_request?.clearingtype || transaction.body?.raw_request?.clearingtype),
+                              (transaction.raw_request?.wallettype || transaction.body?.raw_request?.wallettype)
                             )}
                           </Typography>
                         </Table.Cell>
@@ -98,16 +99,16 @@ const TransactionTable = () => {
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>
-                          <StatusBadge status={transaction?.status} size="M" />
+                          <StatusBadge status={transaction?.status} transaction={transaction} />
                         </Table.Cell>
                         <Table.Cell>
                           <Typography variant="pi" textColor="neutral600">
-                            {formatDate(transaction.created_at)}
+                            {formatDate(transaction.created_at ?? transaction.createdAt)}
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>
                           <Typography variant="pi" textColor="neutral600">
-                            {formatDate(transaction.updated_at)}
+                            {formatDate(transaction.updated_at ?? transaction.updatedAt)}
                           </Typography>
                         </Table.Cell>
                         <Table.Cell>

package/admin/src/pages/App/components/transaction-history/details/TransactionDetails.jsx

@@ -47,8 +47,8 @@ const TransactionDetails = ({ transaction }) => {
               Name:
             </Typography>
             <Typography variant="pi" textColor="neutral800">
-              {transaction.raw_request?.firstname}{" "}
-              {transaction.raw_request?.lastname}
+              {transaction.raw_request?.firstname || transaction.body?.raw_request?.firstname }{" "}
+              {transaction.raw_request?.lastname || transaction.body?.raw_request?.lastname}
             </Typography>
           </Flex>
           <Flex gap={3}>
@@ -56,7 +56,7 @@ const TransactionDetails = ({ transaction }) => {
               Email:
             </Typography>
             <Typography variant="pi" textColor="neutral800">
-              {transaction.raw_request?.email || "N/A"}
+              {transaction.raw_request?.email || transaction.body?.raw_request?.email || "N/A"}
             </Typography>
           </Flex>
           <Flex gap={3}>
@@ -64,7 +64,7 @@ const TransactionDetails = ({ transaction }) => {
               Phone:
             </Typography>
             <Typography variant="pi" textColor="neutral800">
-              {transaction.raw_request?.telephonenumber || "N/A"}
+              {transaction.raw_request?.telephonenumber || transaction.body?.raw_request?.telephonenumber || "N/A"}
             </Typography>
           </Flex>
           <Flex gap={3}>
@@ -72,8 +72,8 @@ const TransactionDetails = ({ transaction }) => {
               Address:
             </Typography>
             <Typography variant="pi" textColor="neutral800">
-              {transaction.raw_request?.street}, {transaction.raw_request?.zip}{" "}
-              {transaction.raw_request?.city}
+              {transaction.raw_request?.street || transaction.body?.raw_request?.street}, {transaction.raw_request?.zip || transaction.body?.raw_request?.zip}{" "}
+              {transaction.raw_request?.city || transaction.body?.raw_request?.city}
             </Typography>
           </Flex>
         </Flex>
@@ -94,7 +94,7 @@ const TransactionDetails = ({ transaction }) => {
               {transaction.txid || "N/A"}
             </Typography>
           </Flex>
-          {transaction.raw_request?.clearingtype === "cc" && (
+          {transaction.raw_request?.clearingtype === "cc"  || transaction.body?.raw_request?.clearingtype === "cc" && (
             <>
               <Flex gap={3}>
                 <Typography
@@ -105,7 +105,7 @@ const TransactionDetails = ({ transaction }) => {
                   Card Type:
                 </Typography>
                 <Typography variant="pi" textColor="neutral800">
-                  {getCardTypeName(transaction.raw_request?.cardtype)}
+                  {getCardTypeName(transaction.raw_request?.cardtype || transaction.body?.raw_request?.cardtype)}
                 </Typography>
               </Flex>
               <Flex gap={3}>
@@ -118,7 +118,7 @@ const TransactionDetails = ({ transaction }) => {
                 </Typography>
                 <Typography variant="pi" textColor="neutral800">
                   **** **** ****{" "}
-                  {transaction.raw_request?.cardpan?.slice(-4) || "****"}
+                  {transaction.raw_request?.cardpan?.slice(-4) || transaction.body?.raw_request?.cardpan?.slice(-4) || "****"}
                 </Typography>
               </Flex>
             </>
@@ -128,7 +128,7 @@ const TransactionDetails = ({ transaction }) => {
               Mode:
             </Typography>
             <Typography variant="pi" textColor="neutral800">
-              {transaction.raw_request?.mode || "N/A"}
+              {transaction.raw_request?.mode || transaction.body?.raw_request?.mode || "N/A"}
             </Typography>
           </Flex>
         </Flex>

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/api.js

@@ -12,10 +12,11 @@ const usePayoneRequests = () => {
   const getTransactionHistory = (params = {}) => {
     const queryParams = new URLSearchParams();
 
-    if (params.filters) {
+    if (params.filters && typeof params.filters === "object") {
       Object.keys(params.filters).forEach((key) => {
         const value = params.filters[key];
-        if (value !== undefined && value !== null && value !== '') {
+        const v = value == null ? "" : String(value).trim();
+        if (v !== "" && v.toLowerCase() !== "all") {
           queryParams.append(`filters[${key}]`, String(value));
         }
       });