mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
fix: gift page shows only 1 tariff when tariffs have different periods
The gift page filtered tariffs by selected period, hiding tariffs whose single period didn't match. When each tariff has a unique period (30d, 60d, 180d, 360d), only the first tariff was visible. - Remove period-first filtering (visibleTariffs/allPeriods) - Show all tariffs directly from config.tariffs - Auto-select the chosen tariff's period when switching tariffs - Show tariff cards when more than 1 tariff exists
This commit is contained in:
@@ -516,35 +516,14 @@ function BuyTabContent({
|
|||||||
const [selectedSubOption, setSelectedSubOption] = useState<string | null>(null);
|
const [selectedSubOption, setSelectedSubOption] = useState<string | null>(null);
|
||||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||||
|
|
||||||
// Collect ALL unique periods across ALL tariffs
|
|
||||||
const allPeriods = useMemo(() => {
|
|
||||||
const periodMap = new Map<number, GiftTariffPeriod>();
|
|
||||||
for (const tariff of config.tariffs) {
|
|
||||||
for (const period of tariff.periods) {
|
|
||||||
if (!periodMap.has(period.days)) {
|
|
||||||
periodMap.set(period.days, period);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return Array.from(periodMap.values()).sort((a, b) => a.days - b.days);
|
|
||||||
}, [config]);
|
|
||||||
|
|
||||||
// Filter tariffs to only those that have the selected period
|
|
||||||
const visibleTariffs = useMemo(() => {
|
|
||||||
if (!selectedPeriodDays) return config.tariffs;
|
|
||||||
return config.tariffs.filter((tariff) =>
|
|
||||||
tariff.periods.some((p) => p.days === selectedPeriodDays),
|
|
||||||
);
|
|
||||||
}, [config, selectedPeriodDays]);
|
|
||||||
|
|
||||||
// Auto-select first tariff, period, method on config load
|
// Auto-select first tariff, period, method on config load
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (allPeriods.length > 0 && selectedPeriodDays === null) {
|
if (config.tariffs.length > 0 && selectedTariffId === null) {
|
||||||
setSelectedPeriodDays(allPeriods[0].days);
|
const firstTariff = config.tariffs[0];
|
||||||
}
|
setSelectedTariffId(firstTariff.id);
|
||||||
|
if (firstTariff.periods.length > 0 && selectedPeriodDays === null) {
|
||||||
if (visibleTariffs.length > 0 && selectedTariffId === null) {
|
setSelectedPeriodDays(firstTariff.periods[0].days);
|
||||||
setSelectedTariffId(visibleTariffs[0].id);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.payment_methods.length > 0 && selectedMethod === null) {
|
if (config.payment_methods.length > 0 && selectedMethod === null) {
|
||||||
@@ -556,16 +535,19 @@ function BuyTabContent({
|
|||||||
setSelectedSubOption(null);
|
setSelectedSubOption(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [config, allPeriods, visibleTariffs, selectedTariffId, selectedPeriodDays, selectedMethod]);
|
}, [config, selectedTariffId, selectedPeriodDays, selectedMethod]);
|
||||||
|
|
||||||
// When period changes, auto-select first visible tariff if current is hidden
|
// When tariff changes, auto-select its first period
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!visibleTariffs.length) return;
|
if (!selectedTariffId) return;
|
||||||
const currentVisible = visibleTariffs.find((tariff) => tariff.id === selectedTariffId);
|
const tariff = config.tariffs.find((t) => t.id === selectedTariffId);
|
||||||
if (!currentVisible) {
|
if (tariff && tariff.periods.length > 0) {
|
||||||
setSelectedTariffId(visibleTariffs[0].id);
|
const hasCurrent = tariff.periods.some((p) => p.days === selectedPeriodDays);
|
||||||
|
if (!hasCurrent) {
|
||||||
|
setSelectedPeriodDays(tariff.periods[0].days);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [visibleTariffs, selectedTariffId]);
|
}, [selectedTariffId, config.tariffs, selectedPeriodDays]);
|
||||||
|
|
||||||
// Derived data
|
// Derived data
|
||||||
const selectedTariff = useMemo(
|
const selectedTariff = useMemo(
|
||||||
@@ -661,15 +643,15 @@ function BuyTabContent({
|
|||||||
return `${t('gift.fromBalance')} (${formatPrice(config.balance_kopeks)})`;
|
return `${t('gift.fromBalance')} (${formatPrice(config.balance_kopeks)})`;
|
||||||
}, [config, t]);
|
}, [config, t]);
|
||||||
|
|
||||||
const showTariffCards = visibleTariffs.length > 1;
|
const showTariffCards = config.tariffs.length > 1;
|
||||||
|
|
||||||
// Periods for the selected tariff (for period cards)
|
// Periods for the selected tariff (for period cards)
|
||||||
const periodsForDisplay = useMemo(() => {
|
const periodsForDisplay = useMemo(() => {
|
||||||
if (selectedTariff) {
|
if (selectedTariff) {
|
||||||
return [...selectedTariff.periods].sort((a, b) => a.days - b.days);
|
return [...selectedTariff.periods].sort((a, b) => a.days - b.days);
|
||||||
}
|
}
|
||||||
return allPeriods;
|
return [];
|
||||||
}, [selectedTariff, allPeriods]);
|
}, [selectedTariff]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
@@ -680,7 +662,7 @@ function BuyTabContent({
|
|||||||
{t('gift.selectTariff')}
|
{t('gift.selectTariff')}
|
||||||
</h2>
|
</h2>
|
||||||
<div role="radiogroup" aria-label={t('gift.chooseTariff')} className="space-y-2">
|
<div role="radiogroup" aria-label={t('gift.chooseTariff')} className="space-y-2">
|
||||||
{visibleTariffs.map((tariff) => (
|
{config.tariffs.map((tariff) => (
|
||||||
<TariffCard
|
<TariffCard
|
||||||
key={tariff.id}
|
key={tariff.id}
|
||||||
tariff={tariff}
|
tariff={tariff}
|
||||||
|
|||||||
Reference in New Issue
Block a user