fix: add defensive checks for map errors and global currencies loading

- Add Array.isArray checks to getGlobalCurrencies helper
- Store global currencies in state to avoid timing issues
- Add null checks when mapping over currencies
- Add defensive checks to TabNav and TabPanel components
- Improve error handling in data loading

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => 'f1f91f1cc72d44a0469e');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '1a2b3d6682654786741a');

src/admin/components/coupons/CouponMetabox.js

@@ -9,24 +9,28 @@ import { MetaboxLayout, TabNav, TabPanel, Field, Input, Checkbox, Textarea, Butt
 
 // Currency helper functions
 const getGlobalCurrencies = () => {
-    if (window.formipayGlobalCurrencies) {
+    if (window.formipayGlobalCurrencies && Array.isArray(window.formipayGlobalCurrencies)) {
         return window.formipayGlobalCurrencies;
     }
+    console.warn('[Formipay] Global currencies not available or not an array');
     return [];
 };
 
 const getCurrencySymbol = (currencyRaw) => {
+    if (!currencyRaw || typeof currencyRaw !== 'string') return '';
     const parts = currencyRaw.split(':::');
     return parts[1] || currencyRaw;
 };
 
 const getCurrencyCode = (currencyRaw) => {
+    if (!currencyRaw || typeof currencyRaw !== 'string') return '';
     const parts = currencyRaw.split(':::');
     return parts[0] || currencyRaw;
 };
 
 const getFlagByCurrency = (currencyRaw) => {
-    if (window.formipayGetFlag) {
+    if (!currencyRaw || typeof currencyRaw !== 'string') return '';
+    if (window.formipayGetFlag && typeof window.formipayGetFlag === 'function') {
         return window.formipayGetFlag(currencyRaw);
     }
     return '';
@@ -37,6 +41,7 @@ export default function CouponMetabox({ postId }) {
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
     const [message, setMessage] = useState(null);
+    const [globalCurrencies, setGlobalCurrencies] = useState([]);
 
     // Form state
     const [formData, setFormData] = useState({
@@ -60,8 +65,13 @@ export default function CouponMetabox({ postId }) {
         { id: 'restriction', label: __('Restrictions', 'formipay'), icon: 'fa fa-lock' },
     ];
 
-    // Load coupon data
+    // Load coupon data and global currencies
     useEffect(() => {
+        // Load global currencies from window object
+        const currencies = getGlobalCurrencies();
+        console.log('[Formipay Coupon] Global currencies:', currencies);
+        setGlobalCurrencies(currencies);
+
         if (postId > 0) {
             loadCouponData();
         } else {
@@ -95,17 +105,17 @@ export default function CouponMetabox({ postId }) {
                     quantity_active: data.quantity_active || '',
                     use_limit: data.use_limit || '',
                     date_limit: data.date_limit || '',
-                    amounts_fixed: data.amounts_fixed?.reduce((acc, item) => {
+                    amounts_fixed: Array.isArray(data.amounts_fixed) ? data.amounts_fixed.reduce((acc, item) => {
-                        acc[item.symbol] = item.amount;
+                        if (item && item.symbol) acc[item.symbol] = item.amount;
                         return acc;
-                    }, {}) || {},
+                    }, {}) : {},
-                    max_amounts: data.max_amounts?.reduce((acc, item) => {
+                    max_amounts: Array.isArray(data.max_amounts) ? data.max_amounts.reduce((acc, item) => {
-                        acc[item.symbol] = item.amount;
+                        if (item && item.symbol) acc[item.symbol] = item.amount;
                         return acc;
-                    }, {}) || {},
+                    }, {}) : {},
-                    forms: data.forms || [],
+                    forms: Array.isArray(data.forms) ? data.forms : [],
-                    products: data.products || [],
+                    products: Array.isArray(data.products) ? data.products : [],
-                    customers: data.customers || [],
+                    customers: Array.isArray(data.customers) ? data.customers : [],
                 }));
             }
         } catch (error) {
@@ -256,14 +266,15 @@ export default function CouponMetabox({ postId }) {
                                         <>
                                             <GroupTitle title={__('Discount Amount', 'formipay')} icon="fa fa-money" />
 
-                                            {getGlobalCurrencies().map((currency) => {
+                                            {globalCurrencies.map((currency) => {
+                                                if (!currency || !currency.currency) return null;
                                                 const symbol = getCurrencySymbol(currency.currency);
                                                 const currencyCode = getCurrencyCode(currency.currency);
                                                 const flag = getFlagByCurrency(currency.currency);
                                                 const step = currency.decimal_digits > 0 ? 1 / (currency.decimal_digits * 10) : 1;
 
                                                 return (
-                                                    <div key={currencyCode} className="formipay-generic-field">
+                                                    <div key={currencyCode || symbol} className="formipay-generic-field">
                                                         <div className="formipay-field-aside">
                                                             <div className="formipay-field-label required">
                                                                 <span className="formipay-field-label-text">
@@ -297,7 +308,8 @@ export default function CouponMetabox({ postId }) {
                                         icon="fa fa-calculator"
                                     />
 
-                                    {getGlobalCurrencies().map((currency) => {
+                                    {globalCurrencies.map((currency) => {
+                                        if (!currency || !currency.currency) return null;
                                         const symbol = getCurrencySymbol(currency.currency);
                                         const currencyCode = getCurrencyCode(currency.currency);
                                         const flag = getFlagByCurrency(currency.currency);
@@ -305,7 +317,7 @@ export default function CouponMetabox({ postId }) {
 
                                         return (
                                             <Field
-                                                key={`max_${currencyCode}`}
+                                                key={`max_${currencyCode || symbol}`}
                                                 label={
                                                     <span>
                                                         {flag && <img src={flag} alt="" width="18" style={{ verticalAlign: 'middle', marginRight: '4px' }} />}

src/admin/design-system/WpcftoComponents.js

@@ -26,6 +26,11 @@ export function BoxChild({ children, className = '', ...props }) {
 
 // Tab Navigation Component - WPCFTO sidebar style
 export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical' }) {
+    if (!tabs || !Array.isArray(tabs)) {
+        console.warn('[Formipay] TabNav: tabs is not an array', tabs);
+        return null;
+    }
+
     return (
         <div className={`formipay-wpcfto-tab-nav ${orientation === 'vertical' ? 'formipay-wpcfto-sidebar' : ''}`}>
             <div className="formipay-wpcfto-tab-nav-inner">
@@ -66,6 +71,11 @@ export function TabNav({ tabs, activeTab, onTabChange, orientation = 'vertical'
 
 // Tab Panel Component
 export function TabPanel({ tabs, activeTab, children }) {
+    if (!tabs || !Array.isArray(tabs)) {
+        console.warn('[Formipay] TabPanel: tabs is not an array', tabs);
+        return null;
+    }
+
     return (
         <div className="formipay-tabs">
             {tabs.map((tab, index) => (