mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
refactor: simplify PromoDiscountBadge to link without modal
Remove redundant dropdown/modal since discount info already shows in PromoOffersSection on Dashboard. Badge now navigates directly to subscription page on click.
This commit is contained in:
c0mrade
@@ -1,166 +1,33 @@
|
|||||||
import { useState, useRef, useEffect } from 'react';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { promoApi } from '../api/promo';
|
import { promoApi } from '../api/promo';
|
||||||
|
|
||||||
const SparklesIcon = () => (
|
|
||||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ClockIcon = () => (
|
|
||||||
<svg
|
|
||||||
className="h-3.5 w-3.5"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={2}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const formatTimeLeft = (expiresAt: string, t: (key: string) => string): string => {
|
|
||||||
const now = new Date();
|
|
||||||
// Ensure UTC parsing - if no timezone specified, assume UTC
|
|
||||||
let expires: Date;
|
|
||||||
if (expiresAt.includes('Z') || expiresAt.includes('+') || expiresAt.includes('-', 10)) {
|
|
||||||
expires = new Date(expiresAt);
|
|
||||||
} else {
|
|
||||||
// No timezone - treat as UTC
|
|
||||||
expires = new Date(expiresAt + 'Z');
|
|
||||||
}
|
|
||||||
const diffMs = expires.getTime() - now.getTime();
|
|
||||||
|
|
||||||
if (diffMs <= 0) return '';
|
|
||||||
|
|
||||||
const hours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
||||||
const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
|
||||||
|
|
||||||
if (hours > 24) {
|
|
||||||
const days = Math.floor(hours / 24);
|
|
||||||
return `${days}${t('promo.time.days')}`;
|
|
||||||
}
|
|
||||||
if (hours > 0) {
|
|
||||||
return `${hours}${t('promo.time.hours')} ${minutes}${t('promo.time.minutes')}`;
|
|
||||||
}
|
|
||||||
return `${minutes}${t('promo.time.minutes')}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function PromoDiscountBadge() {
|
export default function PromoDiscountBadge() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const { data: activeDiscount } = useQuery({
|
const { data: activeDiscount } = useQuery({
|
||||||
queryKey: ['active-discount'],
|
queryKey: ['active-discount'],
|
||||||
queryFn: promoApi.getActiveDiscount,
|
queryFn: promoApi.getActiveDiscount,
|
||||||
staleTime: 30000,
|
staleTime: 30000,
|
||||||
refetchInterval: 60000, // Refresh every minute
|
refetchInterval: 60000,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close dropdown on click outside
|
|
||||||
useEffect(() => {
|
|
||||||
function handleClickOutside(event: MouseEvent) {
|
|
||||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
|
||||||
setIsOpen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener('mousedown', handleClickOutside);
|
|
||||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Don't render if no active discount
|
// Don't render if no active discount
|
||||||
if (!activeDiscount || !activeDiscount.is_active || !activeDiscount.discount_percent) {
|
if (!activeDiscount || !activeDiscount.is_active || !activeDiscount.discount_percent) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const timeLeft = activeDiscount.expires_at ? formatTimeLeft(activeDiscount.expires_at, t) : null;
|
|
||||||
|
|
||||||
const handleClick = () => {
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGoToSubscription = () => {
|
|
||||||
setIsOpen(false);
|
|
||||||
navigate('/subscription');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative" ref={dropdownRef}>
|
<Link
|
||||||
{/* Badge button */}
|
to="/subscription"
|
||||||
<button
|
className="group relative flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-success-500/20 to-accent-500/15 px-2.5 py-1.5 transition-all hover:from-success-500/30 hover:to-accent-500/25"
|
||||||
onClick={handleClick}
|
|
||||||
className="group relative flex items-center gap-1 rounded-lg bg-success-500/15 px-2.5 py-1.5 transition-all hover:bg-success-500/25"
|
|
||||||
title={t('promo.activeDiscount', 'Active discount')}
|
title={t('promo.activeDiscount', 'Active discount')}
|
||||||
>
|
>
|
||||||
|
<span className="text-base">🏷️</span>
|
||||||
<span className="text-sm font-bold text-success-400">
|
<span className="text-sm font-bold text-success-400">
|
||||||
-{activeDiscount.discount_percent}%
|
-{activeDiscount.discount_percent}%
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</Link>
|
||||||
|
|
||||||
{/* Dropdown - mobile: fixed centered, desktop: absolute right */}
|
|
||||||
{isOpen && (
|
|
||||||
<>
|
|
||||||
{/* Mobile backdrop */}
|
|
||||||
<div
|
|
||||||
className="fixed inset-0 z-40 bg-black/30 sm:hidden"
|
|
||||||
onClick={() => setIsOpen(false)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="fixed left-4 right-4 top-20 z-50 animate-fade-in overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:mt-2 sm:w-72">
|
|
||||||
{/* Header */}
|
|
||||||
<div className="border-b border-dark-700/50 bg-gradient-to-r from-success-500/20 to-accent-500/20 p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-success-500/20 text-success-400">
|
|
||||||
<SparklesIcon />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="font-semibold text-dark-100">{t('promo.discountActive')}</div>
|
|
||||||
<div className="text-2xl font-bold text-success-400">
|
|
||||||
-{activeDiscount.discount_percent}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
|
||||||
<div className="space-y-3 p-4">
|
|
||||||
<p className="text-sm text-dark-300">{t('promo.discountDescription')}</p>
|
|
||||||
|
|
||||||
{/* Time remaining */}
|
|
||||||
{timeLeft && (
|
|
||||||
<div className="flex items-center gap-2 rounded-lg bg-dark-900/50 px-3 py-2 text-sm text-dark-400">
|
|
||||||
<ClockIcon />
|
|
||||||
<span>
|
|
||||||
{t('promo.expiresIn')}:{' '}
|
|
||||||
<span className="font-medium text-warning-400">{timeLeft}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CTA Button */}
|
|
||||||
<button
|
|
||||||
onClick={handleGoToSubscription}
|
|
||||||
className="btn-primary w-full py-2.5 text-sm font-medium"
|
|
||||||
>
|
|
||||||
{t('promo.useNow')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user