strapi-plugin-payone-provider 4.6.10 → 4.6.11

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useNotification } from "@strapi/helper-plugin";
 import payoneRequests from "../utils/api";
 
@@ -11,15 +11,31 @@ const useSettings = () => {
     key: "",
     mode: "test",
     api_version: "3.10",
-    enable3DSecure: false
+    merchantName: "",
+    displayName: "",
+    domainName: "",
+    merchantIdentifier: "",
+    enable3DSecure: false,
+    enableCreditCard: false,
+    enablePayPal: false,
+    enableGooglePay: false,
+    enableApplePay: false,
+    enableSepaDirectDebit: false
   });
+
   const [isLoading, setIsLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [isTesting, setIsTesting] = useState(false);
   const [testResult, setTestResult] = useState(null);
+  const saveTimeoutRef = useRef(null);
 
   useEffect(() => {
     loadSettings();
+    return () => {
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
   }, []);
 
   const loadSettings = async () => {
@@ -39,6 +55,37 @@ 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 payoneRequests.updateSettings(updatedSettings);
+        await loadSettings();
+      } catch (error) {
+        setSettings((prev) => {
+          const previousValue = prev[field];
+          return { ...prev, [field]: previousValue };
+        });
+
+        toggleNotification({
+          type: "warning",
+          message: "Failed to update settings"
+        });
+
+      } finally {
+        setIsSaving(false);
+      }
+    }, 1000);
   };
 
   const handlePaymentMethodToggle = async (field, value) => {
@@ -90,31 +137,26 @@ const useSettings = () => {
     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"
-          });
-        }
+      console.log("response test connection", response?.data, response?.data?.error?.ErrorMessage);
+      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: "warning",
+          message: response?.data?.error?.ErrorMessage
+        });
+
+        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"
-        }
+        message: error?.message
       });
     } finally {
       setIsTesting(false);

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

@@ -1,17 +1,15 @@
 import { useState, useEffect } from "react";
+import { useLocation, useHistory } from "react-router-dom";
 import { useNotification } from "@strapi/helper-plugin";
 import payoneRequests 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 location = useLocation();
+  const history = useHistory();
+
   const getDefaultDateFrom = () => {
     const date = new Date();
     date.setDate(date.getDate() - 30);
@@ -20,130 +18,144 @@ const useTransactionHistory = () => {
 
   const getDefaultDateTo = () => {
     const date = new Date();
-    date.setDate(date.getDate() + 1); // Add 1 day to include today's transactions
+    date.setDate(date.getDate() + 1);
     return date.toISOString().split('T')[0];
   };
 
+  const getQueryParams = () => {
+    const searchParams = new URLSearchParams(location.search);
+    const page = parseInt(searchParams.get('page') || '1', 10);
+    const pageSize = parseInt(searchParams.get('pageSize') || String(PAGE_SIZE), 10);
+
+    return { page, pageSize };
+  };
+
   const [filters, setFilters] = useState({
     search: "",
+    status: "",
     request_type: "",
     payment_method: "",
     date_from: getDefaultDateFrom(),
     date_to: getDefaultDateTo(),
-    status: ""
   });
 
-  const [sorting, setSorting] = useState({
-    sortBy: null,
-    sortOrder: null // 'asc' or 'desc'
+  const initialQueryParams = getQueryParams();
+  const [pagination, setPagination] = useState({
+    page: initialQueryParams.page,
+    pageSize: initialQueryParams.pageSize,
+    pageCount: 1,
+    total: 0,
   });
 
-  useEffect(() => {
-    loadTransactionHistory();
-  }, []);
+  const [transactionHistory, setTransactionHistory] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const [selectedTransaction, setSelectedTransaction] = useState(null);
 
   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 payoneRequests.getTransactionHistory({
+        filters,
+        pagination
+      });
+
+      if (response && response.data && response.pagination) {
+        setTransactionHistory(response.data);
+        setPagination(response.pagination);
+      } else {
+        setTransactionHistory([]);
+        setPagination((prev) => ({
+          ...prev,
+          pageCount: 1,
+          total: 0,
+        }));
       }
-      const result = await payoneRequests.getTransactionHistory(params);
-      setTransactionHistory(result.data || []);
-      setCurrentPage(1);
     } 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"
+        message: "Failed to load transaction history",
       });
     } finally {
       setIsLoadingHistory(false);
     }
   };
 
-  const handleFilterChange = (field, value) => {
-    setFilters((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleFilterApply = () => {
-    loadTransactionHistory();
-  };
-
-  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" };
-      }
-    });
-  };
+  useEffect(() => {
+    const params = getQueryParams();
+    setPagination((prev) => ({
+      ...prev,
+      page: params.page,
+      pageSize: params.pageSize,
+    }));
+  }, [location.search]);
 
-  // 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]);
+  }, [
+    filters.search,
+    filters.status,
+    filters.request_type,
+    filters.payment_method,
+    filters.date_from,
+    filters.date_to,
+    pagination.page,
+    pagination.pageSize,
+  ]);
 
   const handleTransactionSelect = (transaction) => {
-    if (selectedTransaction?.id === transaction?.id) {
-      setSelectedTransaction(null);
-    } else {
-      setSelectedTransaction(transaction);
-    }
+    setSelectedTransaction(
+      selectedTransaction?.id === transaction?.id ? null : transaction
+    );
   };
 
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-    setSelectedTransaction(null);
+  const handlePaginationChange = (newPagination) => {
+    if (newPagination && typeof newPagination === "object") {
+      const updatedQuery = new URLSearchParams(location.search);
+      if (newPagination.page !== undefined) {
+        updatedQuery.set('page', String(newPagination.page));
+      }
+      if (newPagination.pageSize !== undefined) {
+        updatedQuery.set('pageSize', String(newPagination.pageSize));
+        updatedQuery.set('page', '1');
+      }
+      history.push({ search: updatedQuery.toString() });
+    }
   };
 
-  const handlePageSizeChange = (newPageSize) => {
-    setPageSize(newPageSize);
-    setCurrentPage(1); // Reset to first page when page size changes
-    setSelectedTransaction(null);
+  const handleFiltersChange = (newFilters) => {
+    if (newFilters && typeof newFilters === "object") {
+      setFilters((prev) => ({
+        ...prev,
+        ...newFilters,
+      }));
+      // Reset to first page when filters change
+      const updatedQuery = new URLSearchParams(location.search);
+      updatedQuery.set('page', '1');
+      history.push({ search: updatedQuery.toString() });
+    }
   };
 
-  // Pagination calculations
-  const totalPages = Math.ceil(transactionHistory.length / pageSize);
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedTransactions = transactionHistory.slice(startIndex, endIndex);
+  useEffect(() => {
+    setSelectedTransaction(null);
+  }, [filters, pagination.page]);
 
   return {
-    transactionHistory,
-    paginatedTransactions,
+    transactions: Array.isArray(transactionHistory) ? transactionHistory : [],
     isLoadingHistory,
     selectedTransaction,
-    filters,
-    sorting,
-    currentPage,
-    totalPages,
-    pageSize,
-    handleFilterChange,
-    handleFilterApply,
-    handleSort,
     handleTransactionSelect,
-    handlePageChange,
-    handlePageSizeChange,
-    loadTransactionHistory
+    loadTransactionHistory,
+    filters,
+    handleFiltersChange,
+    pagination,
+    handlePaginationChange,
   };
 };
 

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

@@ -15,14 +15,42 @@ const payoneRequests = {
     });
   },
 
-  getTransactionHistory: (params = {}) => {
-    const queryString = new URLSearchParams(params).toString();
-    return request(
+  getTransactionHistory: async (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));
+      }
+    }
+
+    if (params.sort_by) {
+      queryParams.append('sort_by', String(params.sort_by));
+    }
+    if (params.sort_order) {
+      queryParams.append('sort_order', String(params.sort_order));
+    }
+
+    const queryString = queryParams.toString();
+    const response = await request(
       `/${pluginId}/transaction-history${queryString ? `?${queryString}` : ""}`,
       {
         method: "GET"
       }
     );
+    return response;
   },
 
   testConnection: () => {

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

@@ -0,0 +1,236 @@
+export const COUNTRY_LANGUAGE_MAP = {
+  US: "en",
+  GB: "en",
+  CA: "en",
+  AU: "en",
+  NZ: "en",
+  IE: "en",
+  DE: "de",
+  AT: "de",
+  CH: "de",
+  FR: "fr",
+  BE: "fr",
+  IT: "it",
+  ES: "es",
+  PT: "pt",
+  NL: "nl",
+  PL: "pl",
+  CZ: "cs",
+  HU: "hu",
+  SE: "sv",
+  NO: "no",
+  DK: "da",
+  FI: "fi",
+  GR: "el",
+  JP: "ja",
+  CN: "zh",
+  HK: "zh",
+  TW: "zh",
+  SG: "en",
+  BR: "pt",
+  MX: "es",
+  AE: "ar",
+  SA: "ar",
+  RU: "ru",
+  UA: "uk",
+  TR: "tr",
+  ZA: "en",
+  IN: "en",
+};
+
+export const COUNTRIES = [
+  { code: "US", name: "United States" },
+  { code: "GB", name: "United Kingdom" },
+  { code: "CA", name: "Canada" },
+  { code: "AU", name: "Australia" },
+  { code: "DE", name: "Germany" },
+  { code: "FR", name: "France" },
+  { code: "IT", name: "Italy" },
+  { code: "ES", name: "Spain" },
+  { code: "NL", name: "Netherlands" },
+  { code: "BE", name: "Belgium" },
+  { code: "CH", name: "Switzerland" },
+  { code: "AT", name: "Austria" },
+  { code: "IE", name: "Ireland" },
+  { code: "SE", name: "Sweden" },
+  { code: "NO", name: "Norway" },
+  { code: "DK", name: "Denmark" },
+  { code: "FI", name: "Finland" },
+  { code: "PL", name: "Poland" },
+  { code: "CZ", name: "Czech Republic" },
+  { code: "HU", name: "Hungary" },
+  { code: "PT", name: "Portugal" },
+  { code: "GR", name: "Greece" },
+  { code: "JP", name: "Japan" },
+  { code: "CN", name: "China" },
+  { code: "HK", name: "Hong Kong" },
+  { code: "TW", name: "Taiwan" },
+  { code: "SG", name: "Singapore" },
+  { code: "NZ", name: "New Zealand" },
+  { code: "BR", name: "Brazil" },
+  { code: "MX", name: "Mexico" },
+  { code: "AE", name: "United Arab Emirates" },
+  { code: "SA", name: "Saudi Arabia" },
+  { code: "RU", name: "Russia" },
+  { code: "UA", name: "Ukraine" },
+  { code: "TR", name: "Turkey" },
+  { code: "ZA", name: "South Africa" },
+  { code: "IN", name: "India" },
+];
+
+export const getLanguageForCountry = (countryCode) => {
+  return COUNTRY_LANGUAGE_MAP[countryCode] || "en";
+};
+
+export const SALUTATION_OPTIONS = {
+  en: [
+    { value: "Mr", label: "Mr" },
+    { value: "Mrs", label: "Mrs" },
+    { value: "Ms", label: "Ms" },
+    { value: "Dr", label: "Dr" },
+  ],
+  de: [
+    { value: "Herr", label: "Herr" },
+    { value: "Frau", label: "Frau" },
+    { value: "Dr", label: "Dr" },
+  ],
+  fr: [
+    { value: "Monsieur", label: "Monsieur" },
+    { value: "Madame", label: "Madame" },
+    { value: "Mademoiselle", label: "Mademoiselle" },
+  ],
+  it: [
+    { value: "Signore", label: "Signore" },
+    { value: "Signora", label: "Signora" },
+    { value: "Signorina", label: "Signorina" },
+  ],
+  es: [
+    { value: "Señor", label: "Señor" },
+    { value: "Señora", label: "Señora" },
+    { value: "Señorita", label: "Señorita" },
+  ],
+  nl: [
+    { value: "Dhr", label: "Dhr" },
+    { value: "Mevr", label: "Mevr" },
+  ],
+  pt: [
+    { value: "Senhor", label: "Senhor" },
+    { value: "Senhora", label: "Senhora" },
+  ],
+  default: [
+    { value: "Mr", label: "Mr" },
+    { value: "Mrs", label: "Mrs" },
+    { value: "Ms", label: "Ms" },
+  ],
+};
+
+export const GENDER_OPTIONS = {
+  en: [
+    { value: "m", label: "Male" },
+    { value: "f", label: "Female" },
+  ],
+  de: [
+    { value: "m", label: "Männlich" },
+    { value: "f", label: "Weiblich" },
+  ],
+  fr: [
+    { value: "m", label: "Masculin" },
+    { value: "f", label: "Féminin" },
+  ],
+  it: [
+    { value: "m", label: "Maschio" },
+    { value: "f", label: "Femmina" },
+  ],
+  es: [
+    { value: "m", label: "Masculino" },
+    { value: "f", label: "Femenino" },
+  ],
+  nl: [
+    { value: "m", label: "Man" },
+    { value: "f", label: "Vrouw" },
+  ],
+  pt: [
+    { value: "m", label: "Masculino" },
+    { value: "f", label: "Feminino" },
+  ],
+  default: [
+    { value: "m", label: "Male" },
+    { value: "f", label: "Female" },
+  ],
+};
+
+export const getSalutationOptions = (countryCode) => {
+  const language = getLanguageForCountry(countryCode);
+  return SALUTATION_OPTIONS[language] || SALUTATION_OPTIONS.default;
+};
+
+export const getGenderOptions = (countryCode) => {
+  const language = getLanguageForCountry(countryCode);
+  return GENDER_OPTIONS[language] || GENDER_OPTIONS.default;
+};
+
+export const CURRENCIES = [
+  { code: "USD", name: "US Dollar", symbol: "$" },
+  { code: "EUR", name: "Euro", symbol: "€" },
+  { code: "GBP", name: "British Pound", symbol: "£" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "C$" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$" },
+  { code: "TWD", name: "Taiwan Dollar", symbol: "NT$" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$" },
+  { code: "MXN", name: "Mexican Peso", symbol: "Mex$" },
+  { code: "AED", name: "UAE Dirham", symbol: "د.إ" },
+  { code: "SAR", name: "Saudi Riyal", symbol: "﷼" },
+  { code: "RUB", name: "Russian Ruble", symbol: "₽" },
+  { code: "UAH", name: "Ukrainian Hryvnia", symbol: "₴" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺" },
+  { code: "ZAR", name: "South African Rand", symbol: "R" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹" },
+];
+
+export const getCurrencyOptions = () => {
+  return CURRENCIES.map((c) => ({
+    value: c.code,
+    label: `${c.name} (${c.code}) ${c.symbol}`,
+  }));
+};
+
+export const getCountryOptions = (paymentMethod) => {
+  let supportedCountryCodes = [];
+
+  if (paymentMethod === "apl") {
+    supportedCountryCodes = [
+      "US", "GB", "CA", "AU", "DE", "FR", "IT", "ES", "NL", "BE", "CH", "AT", "IE",
+      "SE", "NO", "DK", "FI", "PL", "CZ", "HU", "PT", "GR", "JP", "CN", "HK", "TW",
+      "SG", "NZ", "BR", "MX", "AE", "SA", "RU", "UA", "TR", "ZA"
+    ];
+  } else if (paymentMethod === "gpp") {
+    supportedCountryCodes = [
+      "US", "GB", "CA", "AU", "DE", "FR", "IT", "ES", "NL", "BE", "CH", "AT", "IE",
+      "SE", "NO", "DK", "FI", "PL", "BR", "MX", "JP", "SG", "NZ", "IN"
+    ];
+  }
+
+  const hasRestriction = supportedCountryCodes.length > 0;
+
+  return COUNTRIES.map((country) => {
+    const isSupported = !hasRestriction || supportedCountryCodes.includes(country.code);
+    return {
+      value: country.code,
+      label: `${country.name} (${country.code})`,
+      disabled: hasRestriction && !isSupported,
+    };
+  });
+};
+