import React, { useContext, useEffect, useState } from 'react';
import Tooltip from '../../../components/core/Tooltip';
import Select, { components } from 'react-select';
import Modal from '../../../components/core/Modal';
import { SettingsContext } from '../../App/SettingsContext';
import Header from '../Header';
import EereSelect from '../fields/EereSelect';
import EcreSelectPro from '../fields/EcreSelectPro';
import Input from '../fields/Input';
import Switcher from '../fields/Switcher';
import TextArea from '../fields/TextArea';
import { translate } from '../../../Helper';
import Loader from '../../../components/core/Loader';
function RewardTab() {
const {
rewardCouponTypeOptions, woocommerceProductOptions, woocommerceProductCategoryOptions, CouponTypeProOption, formData, handleSelectChange, handleInputChange, currency, rewardPointExpiryOptions, SubscriptionProOption, isPro, orderStatusOptions, loading, initialFormData
} = useContext(SettingsContext);
// Add a state to track if everything is ready to render
const [isSelectReady, setIsSelectReady] = useState(false);
// Subscription modal state — lives here so it survives dropdown unmounting
const [isSubscriptionModalOpen, setIsSubscriptionModalOpen] = useState(false);
const handleToggleSubscriptionModal = () => setIsSubscriptionModalOpen(prev => !prev);
const handlePositiveNumberChange = (key) => (event) => {
// Get the current value from the event
let { value } = event.target;
// Remove the negative sign if it is present
if (value.startsWith('-')) {
value = value.slice(1); // Remove the negative sign from the beginning
}
// Call the original handleInputChange with the sanitized value
handleInputChange(key)({ target: { value } });
};
// Define the effective reward type once for consistent use throughout the component
const getEffectiveRewardType = () => {
return isPro
? formData.rewardType.value
: (['sign_up_fee', 'sign_up_fee_percent', 'recurring_fee', 'reward_point', 'recurring_percent'].includes(formData.rewardType.value)
? initialFormData.rewardType.value
: formData.rewardType.value);
};
const effectiveRewardType = getEffectiveRewardType();
// Use useEffect to set ready state after the initial render
useEffect(() => {
if (formData && formData.rewardType && rewardCouponTypeOptions && rewardCouponTypeOptions.length > 0) {
setIsSelectReady(true);
}
}, [formData, formData.rewardType, rewardCouponTypeOptions]);
// Return loading until everything is ready
if (loading) {
return (
);
}
// Return loading until everything is ready
if (!isSelectReady || !effectiveRewardType) {
return (