strapi-plugin-payone-provider 4.6.9 → 5.6.9

package/admin/src/pages/hooks/useSettings.js

@@ -1,32 +1,49 @@
-import { useState, useEffect } from "react";
-import { useNotification } from "@strapi/helper-plugin";
-import payoneRequests from "../utils/api";
+import * as React from "react";
+import { useNotification } from "@strapi/strapi/admin";
+import usePayoneRequests from "../utils/api";
 
 const useSettings = () => {
-  const toggleNotification = useNotification();
-  const [settings, setSettings] = useState({
+  const { toggleNotification } = useNotification();
+  const [settings, setSettings] = React.useState({
     aid: "",
     portalid: "",
     mid: "",
     key: "",
     mode: "test",
     api_version: "3.10",
-    enable3DSecure: false
+    enable3DSecure: false,
+    enableCreditCard: false,
+    enablePayPal: false,
+    enableGooglePay: false,
+    enableApplePay: false,
+    enableSofort: false,
+    enableSepaDirectDebit: false
   });
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [isTesting, setIsTesting] = useState(false);
-  const [testResult, setTestResult] = useState(null);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [isTesting, setIsTesting] = React.useState(false);
+  const [testResult, setTestResult] = React.useState(null);
+  const { getSettings, updateSettings, testConnection } = usePayoneRequests();
+  const saveTimeoutRef = React.useRef(null);
 
-  useEffect(() => {
+
+  React.useEffect(() => {
     loadSettings();
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
   }, []);
 
   const loadSettings = async () => {
     setIsLoading(true);
     try {
-      const response = await payoneRequests.getSettings();
-      if (response?.data) setSettings(response.data);
+      const response = await getSettings();
+      const settingsData = response?.data?.data || response?.data;
+      if (settingsData && typeof settingsData === 'object') {
+        setSettings(settingsData);
+      }
     } catch (error) {
       toggleNotification({
         type: "warning",
@@ -39,27 +56,57 @@ const useSettings = () => {
 
   const handleInputChange = (field, value) => {
     setSettings((prev) => ({ ...prev, [field]: value }));
+
+    if (saveTimeoutRef.current) {
+      clearTimeout(saveTimeoutRef.current);
+    }
+
+    saveTimeoutRef.current = setTimeout(async () => {
+      let updatedSettings;
+      setSettings((prev) => {
+        updatedSettings = { ...prev };
+        return prev;
+      });
+
+      setIsSaving(true);
+      try {
+        await updateSettings(updatedSettings);
+        await loadSettings();
+      } catch (error) {
+        setSettings((prev) => {
+          const previousValue = prev[field];
+          return { ...prev, [field]: previousValue };
+        });
+
+        toggleNotification({
+          type: "danger",
+          message: "Failed to update settings"
+        });
+
+      } finally {
+        setIsSaving(false);
+      }
+    }, 1000);
   };
 
   const handlePaymentMethodToggle = async (field, value) => {
+    const booleanValue = Boolean(value);
     let updatedSettings;
+
     setSettings((prev) => {
-      updatedSettings = { ...prev, [field]: value };
+      updatedSettings = { ...prev, [field]: booleanValue };
       return updatedSettings;
     });
 
     setIsSaving(true);
     try {
-      await payoneRequests.updateSettings(updatedSettings);
-      toggleNotification({
-        type: "success",
-        message: "Payment method updated successfully"
-      });
+      await updateSettings(updatedSettings);
+      await loadSettings();
     } catch (error) {
-      setSettings((prev) => ({ ...prev, [field]: !value }));
+      setSettings((prev) => ({ ...prev, [field]: !booleanValue }));
       toggleNotification({
-        type: "warning",
-        message: "Failed to update payment method"
+        type: "danger",
+        message: "Failed to update settings"
       });
     } finally {
       setIsSaving(false);
@@ -69,7 +116,7 @@ const useSettings = () => {
   const handleSave = async () => {
     setIsSaving(true);
     try {
-      await payoneRequests.updateSettings(settings);
+      await updateSettings(settings);
       toggleNotification({
         type: "success",
         message: "Settings saved successfully"
@@ -77,7 +124,7 @@ const useSettings = () => {
       await loadSettings();
     } catch (error) {
       toggleNotification({
-        type: "warning",
+        type: "danger",
         message: "Failed to save settings"
       });
     } finally {
@@ -89,33 +136,25 @@ const useSettings = () => {
     setIsTesting(true);
     setTestResult(null);
     try {
-      const response = await payoneRequests.testConnection();
-      if (response.data) {
-        const result = response.data;
-        setTestResult(result);
-        if (result.success !== undefined) {
-          toggleNotification({
-            type: Boolean(result.success) ? "success" : "warning",
-            message: result.message || "Test completed"
-          });
-        }
+      const response = await testConnection();
+      console.log("response in handleTestConnection:", response.data);
+      if (response.data && response.data.success) {
+        setTestResult(response.data);
+        toggleNotification({
+          type: "success",
+          message: response.data.message || "Test completed"
+        });
       } else {
-        throw new Error("Invalid response format from server");
+        setTestResult(response.data);
+        toggleNotification({
+          type: "danger",
+          message: response.data.error.ErrorMessage || "Failed to test connection"
+        });
+
+        throw new Error(response.data.error.ErrorMessage);
       }
     } catch (error) {
-      toggleNotification({
-        type: "warning",
-        message: "Failed to test connection"
-      });
-      setTestResult({
-        success: false,
-        message:
-          "Failed to test connection. Please check your network and server logs for details.",
-        details: {
-          errorCode: "NETWORK",
-          rawResponse: error.message || "Network error"
-        }
-      });
+      throw new Error(error.message);
     } finally {
       setIsTesting(false);
     }

package/admin/src/pages/hooks/useTransactionHistory.js

@@ -1,151 +1,148 @@
-import { useState, useEffect } from "react";
-import { useNotification } from "@strapi/helper-plugin";
-import payoneRequests from "../utils/api";
+import * as React from "react";
+import { useNotification, useQueryParams } from "@strapi/strapi/admin";
+import usePayoneRequests from "../utils/api";
 
-const DEFAULT_PAGE_SIZE = 10;
+const PAGE_SIZE = 10;
 
 const useTransactionHistory = () => {
-  const toggleNotification = useNotification();
-  const [transactionHistory, setTransactionHistory] = useState([]);
-  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
-  const [selectedTransaction, setSelectedTransaction] = useState(null);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
-  // Calculate default dates
-  const getDefaultDateFrom = () => {
-    const date = new Date();
-    date.setDate(date.getDate() - 30);
-    return date.toISOString().split('T')[0];
-  };
-
-  const getDefaultDateTo = () => {
-    const date = new Date();
-    date.setDate(date.getDate() + 1); // Add 1 day to include today's transactions
-    return date.toISOString().split('T')[0];
-  };
+  const { toggleNotification } = useNotification();
+  const { getTransactionHistory } = usePayoneRequests();
+  const [{ query }, setQuery] = useQueryParams();
 
-  const [filters, setFilters] = useState({
+  const [filters, setFilters] = React.useState({
     search: "",
+    status: "",
     request_type: "",
     payment_method: "",
-    date_from: getDefaultDateFrom(),
-    date_to: getDefaultDateTo(),
-    status: ""
+    date_from: "",
+    date_to: "",
   });
 
-  const [sorting, setSorting] = useState({
-    sortBy: null,
-    sortOrder: null // 'asc' or 'desc'
+  const [pagination, setPagination] = React.useState({
+    page: parseInt(query?.page || "1", 10),
+    pageSize: parseInt(query?.pageSize || String(PAGE_SIZE), 10),
+    pageCount: 1,
+    total: 0,
   });
 
-  useEffect(() => {
-    loadTransactionHistory();
-  }, []);
+  const [transactionHistory, setTransactionHistory] = React.useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = React.useState(false);
+  const [selectedTransaction, setSelectedTransaction] = React.useState(null);
+
+  React.useEffect(() => {
+    const page = parseInt(query?.page || "1", 10);
+    const pageSize = parseInt(query?.pageSize || String(PAGE_SIZE), 10);
+    setPagination((prev) => ({
+      ...prev,
+      page,
+      pageSize,
+    }));
+  }, [query?.page, query?.pageSize]);
+
 
   const loadTransactionHistory = async () => {
     setIsLoadingHistory(true);
     try {
-      const params = { ...filters };
-      if (sorting.sortBy && sorting.sortOrder) {
-        params.sort_by = sorting.sortBy;
-        params.sort_order = sorting.sortOrder;
+      const response = await getTransactionHistory({
+        filters,
+        pagination
+      });
+      const result = response?.data || response;
+      const historyData = Array.isArray(result?.data) ? result.data : [];
+      const paginationMeta = result?.meta?.pagination;
+
+      if (paginationMeta && paginationMeta.total !== undefined) {
+        setPagination((prev) => ({
+          ...prev,
+          pageCount: paginationMeta.pageCount || 1,
+          total: paginationMeta.total || 0,
+        }));
+      } else {
+        const calculatedTotal = historyData.length;
+        const calculatedPageCount = Math.ceil(calculatedTotal / pagination.pageSize) || 1;
+        setPagination((prev) => ({
+          ...prev,
+          pageCount: calculatedPageCount,
+          total: calculatedTotal,
+        }));
       }
-      const result = await payoneRequests.getTransactionHistory(params);
-      setTransactionHistory(result.data || []);
-      setCurrentPage(1);
+
+      setTransactionHistory(historyData);
     } catch (error) {
+      console.error("Error loading transaction history:", error);
+      setTransactionHistory([]);
+      setPagination((prev) => ({
+        ...prev,
+        pageCount: 1,
+        total: 0,
+      }));
       toggleNotification({
-        type: "warning",
-        message: "Failed to load transaction history"
+        type: "danger",
+        message: "Failed to load transaction history",
       });
     } finally {
       setIsLoadingHistory(false);
     }
   };
 
-  const handleFilterChange = (field, value) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleFilterApply = () => {
+  React.useEffect(() => {
     loadTransactionHistory();
-  };
+  }, [
+    filters.search,
+    filters.status,
+    filters.request_type,
+    filters.payment_method,
+    filters.date_from,
+    filters.date_to,
+    pagination.page,
+    pagination.pageSize,
+  ]);
 
-  const handleSort = (column) => {
-    setSorting((prev) => {
-      // If clicking the same column, cycle through: null -> asc -> desc -> null
-      if (prev.sortBy === column) {
-        if (!prev.sortOrder) {
-          return { sortBy: column, sortOrder: "asc" };
-        } else if (prev.sortOrder === "asc") {
-          return { sortBy: column, sortOrder: "desc" };
-        } else {
-          return { sortBy: null, sortOrder: null };
-        }
-      } else {
-        // If clicking a different column, reset and set new column to asc
-        return { sortBy: column, sortOrder: "asc" };
-      }
-    });
+  const handleTransactionSelect = (transaction) => {
+    setSelectedTransaction(
+      selectedTransaction?.id === transaction?.id ? null : transaction
+    );
   };
 
-  // Reload when sorting changes (but not on initial mount)
-  const [isInitialMount, setIsInitialMount] = useState(true);
-  
-  useEffect(() => {
-    if (isInitialMount) {
-      setIsInitialMount(false);
-      return;
-    }
-    // Only reload if sorting is actually set or cleared
-    loadTransactionHistory();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sorting.sortBy, sorting.sortOrder]);
-
-  const handleTransactionSelect = (transaction) => {
-    if (selectedTransaction?.id === transaction?.id) {
-      setSelectedTransaction(null);
-    } else {
-      setSelectedTransaction(transaction);
+  const handlePaginationChange = (newPagination) => {
+    if (newPagination && typeof newPagination === "object") {
+      const updatedQuery = {
+        ...query,
+        page: query.page || 1,
+        pageSize: String(newPagination.pageSize || pagination.pageSize),
+      };
+      setQuery(updatedQuery, "push", false);
     }
   };
 
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-    setSelectedTransaction(null);
+  const handleFiltersChange = (newFilters) => {
+    if (newFilters && typeof newFilters === "object") {
+      setFilters((prev) => ({
+        ...prev,
+        ...newFilters,
+      }));
+    }
   };
 
-  const handlePageSizeChange = (newPageSize) => {
-    setPageSize(newPageSize);
-    setCurrentPage(1); // Reset to first page when page size changes
+  React.useEffect(() => {
     setSelectedTransaction(null);
-  };
-
-  // Pagination calculations
-  const totalPages = Math.ceil(transactionHistory.length / pageSize);
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedTransactions = transactionHistory.slice(startIndex, endIndex);
+  }, [filters, pagination.page]);
 
   return {
-    transactionHistory,
-    paginatedTransactions,
+    transactions: Array.isArray(transactionHistory) ? transactionHistory : [],
     isLoadingHistory,
     selectedTransaction,
-    filters,
-    sorting,
-    currentPage,
-    totalPages,
-    pageSize,
-    handleFilterChange,
-    handleFilterApply,
-    handleSort,
+    currentPage: pagination.page,
+    totalPages: pagination.pageCount,
+    totalCount: pagination.total,
+    pageSize: pagination.pageSize,
     handleTransactionSelect,
-    handlePageChange,
-    handlePageSizeChange,
-    loadTransactionHistory
+    loadTransactionHistory,
+    filters,
+    handleFiltersChange,
+    pagination,
+    handlePaginationChange,
   };
 };
 
 export default useTransactionHistory;
-

package/admin/src/pages/utils/api.js

@@ -1,85 +1,70 @@
-import { request } from "@strapi/helper-plugin";
-import pluginId from "../../pluginId";
+import { useFetchClient } from '@strapi/strapi/admin';
+import pluginId from '../../pluginId';
 
-const payoneRequests = {
-  getSettings: () => {
-    return request(`/${pluginId}/settings`, {
-      method: "GET"
-    });
-  },
+const usePayoneRequests = () => {
+  const { get, post, put } = useFetchClient();
 
-  updateSettings: (data) => {
-    return request(`/${pluginId}/settings`, {
-      method: "PUT",
-      body: data
-    });
-  },
+  const getSettings = () => get(`/${pluginId}/settings`);
 
-  getTransactionHistory: (params = {}) => {
-    const queryString = new URLSearchParams(params).toString();
-    return request(
-      `/${pluginId}/transaction-history${queryString ? `?${queryString}` : ""}`,
-      {
-        method: "GET"
+  const updateSettings = (data) =>
+    put(`/${pluginId}/settings`, data);
+
+  const getTransactionHistory = (params = {}) => {
+    const queryParams = new URLSearchParams();
+
+    if (params.filters) {
+      Object.keys(params.filters).forEach((key) => {
+        const value = params.filters[key];
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(`filters[${key}]`, String(value));
+        }
+      });
+    }
+
+    if (params.pagination) {
+      if (params.pagination.page) {
+        queryParams.append('pagination[page]', String(params.pagination.page));
       }
+      if (params.pagination.pageSize) {
+        queryParams.append('pagination[pageSize]', String(params.pagination.pageSize));
+      }
+    }
+
+    const queryString = queryParams.toString();
+    return get(
+      `/${pluginId}/transaction-history${queryString ? `?${queryString}` : ''}`
     );
-  },
+  };
 
-  testConnection: () => {
-    return request(`/${pluginId}/test-connection`, {
-      method: "POST"
-    });
-  },
+  const testConnection = () =>
+    post(`/${pluginId}/test-connection`);
 
-  preauthorization: (data) => {
-    return request(`/${pluginId}/preauthorization`, {
-      method: "POST",
-      body: data,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  },
+  const preauthorization = (data) =>
+    post(`/${pluginId}/preauthorization`, data);
 
-  authorization: (data) => {
-    return request(`/${pluginId}/authorization`, {
-      method: "POST",
-      body: data,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  },
+  const authorization = (data) =>
+    post(`/${pluginId}/authorization`, data);
 
-  capture: (data) => {
-    return request(`/${pluginId}/capture`, {
-      method: "POST",
-      body: data,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  },
+  const capture = (data) =>
+    post(`/${pluginId}/capture`, data);
 
-  refund: (data) => {
-    return request(`/${pluginId}/refund`, {
-      method: "POST",
-      body: data,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  },
+  const refund = (data) =>
+    post(`/${pluginId}/refund`, data);
 
-  handle3DSCallback: (data) => {
-    return request(`/${pluginId}/3ds-callback`, {
-      method: "POST",
-      body: data,
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-  }
+  const handle3DSCallback = (data) =>
+    post(`/${pluginId}/3ds-callback`, data);
+
+  return {
+    getSettings,
+    updateSettings,
+    getTransactionHistory,
+    testConnection,
+    preauthorization,
+    authorization,
+    capture,
+    refund,
+    handle3DSCallback,
+  };
 };
 
-export default payoneRequests;
+export default usePayoneRequests;