Feat/manage webservices #2
@@ -0,0 +1,487 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CreditCard, Check, Globe, Loader, ToggleLeft, ShieldAlert, Calendar, TrendingUp, TrendingDown, RefreshCcw } from 'lucide-react';
|
||||
import { getProductList, getHostingServiceDetails } from '../../services/api';
|
||||
const CUSTOM_API_BASE_URL = import.meta.env.VITE_CUSTOM_API_BASE_URL || '';
|
||||
|
||||
export default function SubscriptionManager({ order, onClose, onRefresh, onAlert }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [cancelLoading, setCancelLoading] = useState(false);
|
||||
const [catalog, setCatalog] = useState([]);
|
||||
const [selectedPlan, setSelectedPlan] = useState(null);
|
||||
const [isCatalogLoading, setIsCatalogLoading] = useState(true);
|
||||
|
||||
const [serviceDetails, setServiceDetails] = useState(null);
|
||||
const [isDetailsLoading, setIsDetailsLoading] = useState(true);
|
||||
|
||||
const [billingPeriod, setBillingPeriod] = useState(order.period || '1M');
|
||||
|
||||
// 1. Récupération des détails techniques (Domaine/IP)
|
||||
useEffect(() => {
|
||||
const fetchDetails = async () => {
|
||||
setIsDetailsLoading(true);
|
||||
try {
|
||||
const data = await getHostingServiceDetails(order.id);
|
||||
setServiceDetails(data);
|
||||
} catch (err) {
|
||||
console.error("Erreur détails service:", err);
|
||||
} finally {
|
||||
setIsDetailsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchDetails();
|
||||
}, [order.id]);
|
||||
|
||||
const rawOrderTitle = order.title || "";
|
||||
const titleParts = rawOrderTitle.split(' pour ');
|
||||
const currentPlanName = titleParts[0].trim();
|
||||
const currentPlanId = order.product_id;
|
||||
const currentBillingPeriod = order.period;
|
||||
|
||||
// 2. Extraction robuste du domaine
|
||||
let extractedDomain = "Aucun domaine lié";
|
||||
if (serviceDetails?.domain || serviceDetails?.config?.domain) {
|
||||
extractedDomain = serviceDetails.domain || serviceDetails.config.domain;
|
||||
}
|
||||
|
||||
const renderMarkdownFeatures = (text) => {
|
||||
if (!text) return <span className="text-gray-500 italic">Aucune spécification disponible.</span>;
|
||||
return text.split('\n').map((line, index) => {
|
||||
const cleanLine = line.trim();
|
||||
if (cleanLine.startsWith('* ') || cleanLine.startsWith('- ')) {
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-3 text-sm font-semibold text-white my-2">
|
||||
<div className="shrink-0 w-5 h-5 rounded-full border border-cyan-500/40 flex items-center justify-center bg-cyan-950/10">
|
||||
<Check className="w-3 h-3 text-cyan-400 stroke-3" />
|
||||
</div>
|
||||
<span>{parseBold(cleanLine.substring(2))}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <p key={index} className="text-gray-400 text-xs my-1">{parseBold(cleanLine)}</p>;
|
||||
});
|
||||
};
|
||||
|
||||
const parseBold = (text) => text.split('**').map((part, i) => i % 2 === 1 ? <strong key={i} className="text-white font-bold">{part}</strong> : part);
|
||||
|
||||
const getProductCardMetrics = (pricing, period) => {
|
||||
if (!pricing || !pricing.recurrent) {
|
||||
return { displayPrice: "0.00", billingPrice: "0.00", oldDisplayPrice: "0.00", saving: 0, isAvailable: false };
|
||||
}
|
||||
|
||||
const recurrent = pricing.recurrent;
|
||||
const priceW = recurrent['1W']?.price ? parseFloat(recurrent['1W'].price) : 0;
|
||||
const priceM = recurrent['1M']?.price ? parseFloat(recurrent['1M'].price) : 0;
|
||||
const priceY = recurrent['1Y']?.price ? parseFloat(recurrent['1Y'].price) : 0;
|
||||
|
||||
let billingPrice = 0, oldBillingPrice = 0, savingPercent = 0, isAvailable = true;
|
||||
let displayPrice = 0, oldDisplayPrice = 0;
|
||||
|
||||
if (period === '1W') {
|
||||
billingPrice = priceW; oldBillingPrice = priceW;
|
||||
displayPrice = priceW * 4.333; oldDisplayPrice = displayPrice;
|
||||
if (!priceW) isAvailable = false;
|
||||
} else if (period === '1M') {
|
||||
billingPrice = priceM; oldBillingPrice = priceW > 0 ? priceW * 4.333 : priceM;
|
||||
displayPrice = priceM; oldDisplayPrice = oldBillingPrice;
|
||||
if (!priceM) isAvailable = false;
|
||||
} else if (period === '1Y') {
|
||||
billingPrice = priceY; oldBillingPrice = priceW > 0 ? priceW * 52 : (priceM > 0 ? priceM * 12 : priceY);
|
||||
displayPrice = priceY / 12; oldDisplayPrice = oldBillingPrice / 12;
|
||||
if (!priceY) isAvailable = false;
|
||||
}
|
||||
|
||||
savingPercent = (oldBillingPrice > billingPrice && billingPrice > 0) ? Math.round(((oldBillingPrice - billingPrice) / oldBillingPrice) * 100) : 0;
|
||||
|
||||
return { displayPrice: displayPrice.toFixed(2), billingPrice: billingPrice.toFixed(2), oldDisplayPrice: oldDisplayPrice.toFixed(2), saving: savingPercent, isAvailable };
|
||||
};
|
||||
|
||||
const getPlanBadge = (index) => {
|
||||
if (index === 0) return { label: "ESSENTIEL", color: "text-gray-400 bg-gray-900 border-gray-700" };
|
||||
if (index === 1) return { label: "PLUS POPULAIRE", color: "text-cyan-300 bg-cyan-950 border-cyan-800 shadow-[0_0_10px_rgba(6,182,212,0.3)]" };
|
||||
return { label: "PRO", color: "text-amber-400 bg-amber-950 border-amber-800 shadow-[0_0_10px_rgba(245,158,11,0.2)]" };
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCatalog = async () => {
|
||||
setIsCatalogLoading(true);
|
||||
try {
|
||||
const data = await getProductList();
|
||||
const rawProducts = data.list || data.catalog || (Array.isArray(data) ? data : []);
|
||||
const webProducts = rawProducts.filter(p => p.product_category_id === 1);
|
||||
|
||||
if (webProducts.length > 0) {
|
||||
setCatalog(webProducts);
|
||||
const current = webProducts.find(p => currentPlanName.toLowerCase() === p.title.toLowerCase());
|
||||
if (current) setSelectedPlan(current);
|
||||
} else {
|
||||
console.warn("Aucun produit de type 'Web Service' n'a été trouvé.");
|
||||
setCatalog([]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Erreur API Catalogue:", err);
|
||||
} finally {
|
||||
setIsCatalogLoading(false);
|
||||
}
|
||||
};
|
||||
fetchCatalog();
|
||||
}, [currentPlanName]);
|
||||
|
||||
const isNoChange = selectedPlan && (currentPlanId === selectedPlan.id) && (currentBillingPeriod === billingPeriod);
|
||||
|
||||
// ==========================================
|
||||
// 🧠 LOGIQUE UPGRADE / DOWNGRADE & PRORATA
|
||||
// ==========================================
|
||||
let migrationLabel = "Valider la modification";
|
||||
let buttonColor = "bg-cyan-500 hover:bg-cyan-400 shadow-[0_0_20px_rgba(6,182,212,0.2)]";
|
||||
let ActionIcon = null;
|
||||
let finalInvoicePrice = 0;
|
||||
let isProrataApplied = false;
|
||||
let isRefund = false;
|
||||
|
||||
if (selectedPlan && !isNoChange) {
|
||||
const currentPrice = parseFloat(order.price) || 0;
|
||||
let currentMonthly = currentPrice;
|
||||
if (currentBillingPeriod === '1W') currentMonthly = currentPrice * 4.333;
|
||||
if (currentBillingPeriod === '1M') currentMonthly = currentPrice;
|
||||
if (currentBillingPeriod === '1Y') currentMonthly = currentPrice / 12;
|
||||
|
||||
const selectedMetrics = getProductCardMetrics(selectedPlan.pricing, billingPeriod);
|
||||
const selectedMonthly = parseFloat(selectedMetrics.displayPrice);
|
||||
|
||||
const p1 = parseFloat(order.price) || 0;
|
||||
const p2 = parseFloat(selectedMetrics.billingPrice) || 0;
|
||||
|
||||
let m = 30;
|
||||
if (currentBillingPeriod === '1Y') m = 365;
|
||||
if (currentBillingPeriod === '1M') m = 30;
|
||||
if (currentBillingPeriod === '1W') m = 7;
|
||||
|
||||
const expiresAt = new Date(order.expires_at);
|
||||
const now = new Date();
|
||||
let remainingDays = 0;
|
||||
|
||||
if (!isNaN(expiresAt)) {
|
||||
remainingDays = Math.max(0, Math.ceil((expiresAt - now) / (1000 * 60 * 60 * 24)));
|
||||
}
|
||||
|
||||
if (remainingDays > 0 && remainingDays <= m) {
|
||||
const n = m - remainingDays; // Jours écoulés
|
||||
finalInvoicePrice = p2 - p1 - (n * (p1 - p2) / m);
|
||||
isProrataApplied = true;
|
||||
} else {
|
||||
finalInvoicePrice = p2;
|
||||
}
|
||||
|
||||
isRefund = finalInvoicePrice < -0.01;
|
||||
|
||||
// --- 3. Style du bouton (Triggers : Upgrade / Downgrade / Cycle) ---
|
||||
|
||||
// On récupère le forfait actuel depuis le catalogue pour comparer la "puissance" brute des forfaits
|
||||
const currentPlanFromCatalog = catalog.find(p => p.id === currentPlanId);
|
||||
|
||||
// Pour définir la hiérarchie absolue, on compare les prix de base sur 1 Mois
|
||||
const baseCurrentPrice = currentPlanFromCatalog?.pricing?.recurrent?.['1M']?.price || 0;
|
||||
const baseSelectedPrice = selectedPlan?.pricing?.recurrent?.['1M']?.price || 0;
|
||||
|
||||
const isSamePlan = currentPlanId === selectedPlan.id;
|
||||
const isSamePeriod = currentBillingPeriod === billingPeriod;
|
||||
|
||||
if (isSamePlan && !isSamePeriod) {
|
||||
// Le pack est identique, seule la période change
|
||||
migrationLabel = "Changer de cycle";
|
||||
buttonColor = "bg-blue-500 hover:bg-blue-400 text-black shadow-[0_0_20px_rgba(59,130,246,0.2)]";
|
||||
ActionIcon = <RefreshCcw className="w-4 h-4" />;
|
||||
} else if (!isSamePlan) {
|
||||
// Le pack change, on compare la hiérarchie absolue
|
||||
if (parseFloat(baseSelectedPrice) > parseFloat(baseCurrentPrice)) {
|
||||
migrationLabel = `Valider l'Upgrade`;
|
||||
buttonColor = "bg-emerald-500 hover:bg-emerald-400 text-black shadow-[0_0_20px_rgba(16,185,129,0.2)]";
|
||||
ActionIcon = <TrendingUp className="w-4 h-4" />;
|
||||
} else {
|
||||
migrationLabel = "Valider le Downgrade";
|
||||
buttonColor = "bg-amber-500 hover:bg-amber-400 text-black shadow-[0_0_20px_rgba(245,158,11,0.2)]";
|
||||
ActionIcon = <TrendingDown className="w-4 h-4" />;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ==========================================
|
||||
|
||||
const handleMigration = async () => {
|
||||
setLoading(true);
|
||||
|
||||
// 🎯 On détermine dynamiquement le type d'action pour la facture
|
||||
let actionType = 'upgrade';
|
||||
const currentPlanFromCatalog = catalog.find(p => p.id === currentPlanId);
|
||||
const baseCurrent = parseFloat(currentPlanFromCatalog?.pricing?.recurrent?.['1M']?.price || 0);
|
||||
const baseSelected = parseFloat(selectedPlan?.pricing?.recurrent?.['1M']?.price || 0);
|
||||
|
||||
if (selectedPlan.id === currentPlanId) {
|
||||
actionType = 'cycle';
|
||||
} else if (baseSelected < baseCurrent) {
|
||||
actionType = 'downgrade';
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(`${CUSTOM_API_BASE_URL}/custom_api/nexus_subscription.php`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
action: 'migrate',
|
||||
order_id: order.id,
|
||||
target_plan_id: selectedPlan.id,
|
||||
new_period: billingPeriod,
|
||||
new_price: finalInvoicePrice.toFixed(2),
|
||||
action_type: actionType // 🎯 On envoie l'information au backend !
|
||||
})
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (data.status === 'success') {
|
||||
onAlert?.("Facture générée", "Redirection...", "success");
|
||||
onClose?.();
|
||||
setTimeout(() => window.location.href = '/facturation', 2000);
|
||||
} else {
|
||||
onAlert?.("Erreur", data.error, "error");
|
||||
}
|
||||
} catch (err) {
|
||||
onAlert?.("Erreur", "Problème réseau", "error");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async () => {
|
||||
if (!window.confirm("Êtes-vous sûr de vouloir résilier cet abonnement ? Le service sera désactivé au prochain cycle de facturation.")) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCancelLoading(true);
|
||||
try {
|
||||
const resp = await fetch(`${CUSTOM_API_BASE_URL}/custom_api/nexus_subscription.php`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
action: 'cancel',
|
||||
order_id: order.id
|
||||
})
|
||||
});
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
if (onAlert) onAlert("Résilié", data.message || "L'abonnement a été annulé avec succès.", "success");
|
||||
if (onRefresh) onRefresh();
|
||||
if (onClose) onClose();
|
||||
} else {
|
||||
if (onAlert) onAlert("Erreur", data.error || "Impossible de résilier l'abonnement.", "error");
|
||||
}
|
||||
} catch (err) {
|
||||
if (onAlert) onAlert("Erreur", "Problème réseau ou serveur.", "error");
|
||||
} finally {
|
||||
setCancelLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full max-h-[95vh] md:h-auto md:max-h-[90vh] max-w-6xl mx-auto text-white">
|
||||
|
||||
<div className="shrink-0 space-y-4 mb-4 pr-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="bg-[#090f1c] border border-gray-800 p-3.5 rounded-xl flex items-center gap-3">
|
||||
<div className="p-2 bg-gray-950 rounded-lg text-gray-400"><CreditCard className="w-4 h-4" /></div>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">Abonnement Actuel</p>
|
||||
<p className="text-sm font-bold text-white">{currentPlanName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#090f1c] border border-gray-800 p-3.5 rounded-xl flex items-center gap-3">
|
||||
<div className="p-2 bg-gray-950 rounded-lg text-cyan-400"><Globe className="w-4 h-4" /></div>
|
||||
<div className="truncate">
|
||||
<p className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">Espace Domaine</p>
|
||||
<p className="text-sm font-mono text-cyan-400 truncate">{extractedDomain}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#090f1c] border border-gray-800 p-4 rounded-xl flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-gray-950 rounded-lg text-emerald-400 border border-gray-800/50">
|
||||
<Calendar className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">Prochain Renouvellement</p>
|
||||
<p className="text-sm font-medium text-gray-300">
|
||||
{order.expires_at ? order.expires_at : "Date non définie"}
|
||||
<span className="text-gray-600 mx-2">|</span>
|
||||
<span className="font-mono text-white font-bold">{order.price || '0.00'} {order.currency || '€'}</span>
|
||||
<span className="text-[10px] text-gray-500 ml-1 uppercase">/ {order.period === '1W' ? 'semaine' : order.period === '1Y' ? 'an' : 'mois'}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={`/facturation`}
|
||||
className="text-xs font-bold text-cyan-400 hover:text-cyan-300 transition-colors flex items-center gap-1.5 bg-cyan-950/20 px-4 py-2 rounded-lg border border-cyan-900/30"
|
||||
>
|
||||
Voir les factures
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#090f1c] p-2 rounded-xl border border-gray-800 flex items-center justify-between">
|
||||
<span className="text-xs font-bold text-gray-400 ml-3 flex items-center gap-2">
|
||||
<ToggleLeft className="w-4 h-4 text-cyan-400" /> Options de renouvellement
|
||||
</span>
|
||||
<div className="flex space-x-1">
|
||||
{[
|
||||
{ id: '1W', label: 'Semaine' },
|
||||
{ id: '1M', label: 'Mois' },
|
||||
{ id: '1Y', label: 'Année' }
|
||||
].map((p) => (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => setBillingPeriod(p.id)}
|
||||
disabled={loading || cancelLoading}
|
||||
className={`px-5 py-2 rounded-lg text-xs font-black tracking-wide transition-all ${billingPeriod === p.id ? 'bg-cyan-500 text-black shadow-lg shadow-cyan-500/20' : 'text-gray-400 hover:text-white hover:bg-gray-900'} disabled:opacity-50`}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grow pr-2 custom-scrollbar">
|
||||
{isCatalogLoading ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-cyan-400">
|
||||
<Loader className="w-8 h-8 animate-spin mx-auto mb-2" />
|
||||
<p className="text-xs font-mono text-gray-500">Synchronisation des tarifs...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-5 pt-3 pb-4">
|
||||
{catalog.map((plan, index) => {
|
||||
const metrics = getProductCardMetrics(plan.pricing, billingPeriod);
|
||||
const isSelected = selectedPlan?.id === plan.id;
|
||||
const isCurrentActive = currentPlanId === plan.id && currentBillingPeriod === billingPeriod;
|
||||
const topBadge = getPlanBadge(index);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={plan.id}
|
||||
onClick={() => !loading && !cancelLoading && metrics.isAvailable && setSelectedPlan(plan)}
|
||||
className={`relative h-full p-6 rounded-2xl border transition-all duration-300 flex flex-col justify-between bg-[#0d1527] mt-3
|
||||
${!metrics.isAvailable || loading || cancelLoading ? 'opacity-50 grayscale cursor-not-allowed border-gray-900' : 'cursor-pointer'}
|
||||
${isSelected && metrics.isAvailable ? 'border-cyan-500 shadow-[0_0_20px_rgba(6,182,212,0.15)] scale-[1.02] z-10' : 'border-gray-800/80 hover:border-gray-700'}
|
||||
${isCurrentActive ? 'ring-1 ring-gray-700' : ''}`}
|
||||
>
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className={`text-[9px] font-black tracking-widest px-3 py-1 rounded-full border ${topBadge.color}`}>
|
||||
{topBadge.label}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center w-full mb-5 mt-2">
|
||||
<span className="text-[9px] font-black tracking-widest text-white bg-[#090f1c] px-2.5 py-1 rounded border border-gray-800 uppercase">
|
||||
{plan.category?.title || "WEB"}
|
||||
</span>
|
||||
{metrics.saving > 0 && metrics.isAvailable && (
|
||||
<span className="text-[10px] font-bold text-[#00df89] bg-[#00df89]/10 border border-[#00df89]/20 px-3 py-0.5 rounded-full uppercase tracking-wide">
|
||||
Économie {metrics.saving}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-5 shrink-0">
|
||||
<h4 className="font-bold text-xl text-white tracking-tight mb-3 flex items-center justify-between">
|
||||
{plan.title}
|
||||
{isCurrentActive && <span className="text-[9px] font-bold text-orange-500 uppercase tracking-widest bg-orange-900 px-2 py-0.5 rounded border border-orange-800">Actif</span>}
|
||||
</h4>
|
||||
|
||||
{metrics.isAvailable ? (
|
||||
<>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-3xl font-black text-cyan-400 tracking-tighter">{metrics.displayPrice} €</span>
|
||||
<span className="text-xs text-gray-400 font-medium">/ mois</span>
|
||||
</div>
|
||||
|
||||
{metrics.saving > 0 && (
|
||||
<p className="text-xs text-gray-500 line-through mt-1">
|
||||
Au lieu de {metrics.oldDisplayPrice} € / mois
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-3.5 inline-block bg-[#0e2238] border border-cyan-950/40 text-cyan-400 text-[9px] font-black tracking-widest uppercase px-3 py-1.5 rounded-md">
|
||||
Facturé {metrics.billingPrice} € par {billingPeriod === '1W' ? 'semaine' : billingPeriod === '1M' ? 'mois' : 'an'}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="py-2">
|
||||
<span className="text-lg font-bold text-gray-500">Non disponible</span>
|
||||
<p className="text-[10px] text-gray-600 mt-1 uppercase tracking-wider">Pour ce cycle</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800/60 pt-4 grow space-y-1.5">
|
||||
{renderMarkdownFeatures(plan.description)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 mt-auto pt-4 border-t border-gray-800/40 space-y-3">
|
||||
{/* 🎯 NOUVEAU : AFFICHAGE DYNAMIQUE (PRORATA ET REMBOURSEMENT) */}
|
||||
{selectedPlan && !isNoChange && (
|
||||
<div className={`border p-3 rounded-xl mb-3 flex items-center justify-between transition-colors
|
||||
${isRefund ? 'bg-amber-950/20 border-amber-900/50' : 'bg-[#0e2238] border-cyan-900/50'}`}
|
||||
>
|
||||
<div>
|
||||
<p className={`text-xs font-bold uppercase tracking-widest ${isRefund ? 'text-amber-400' : 'text-cyan-400'}`}>
|
||||
{isRefund
|
||||
? "Remboursement estimé"
|
||||
: finalInvoicePrice > 0.01
|
||||
? "Montant à régler aujourd'hui"
|
||||
: "Aucun frais immédiat"}
|
||||
</p>
|
||||
{isProrataApplied && <p className="text-[10px] text-gray-500 mt-0.5">Calculé au prorata des jours restants</p>}
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className={`text-xl font-black font-mono ${isRefund ? 'text-amber-400' : 'text-white'}`}>
|
||||
{isRefund ? "-" : ""}{Math.abs(finalInvoicePrice).toFixed(2)} €
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedPlan && (
|
||||
<button
|
||||
onClick={handleMigration}
|
||||
disabled={loading || cancelLoading || isNoChange}
|
||||
className={`w-full py-4 rounded-xl font-black uppercase text-xs tracking-widest transition-all duration-300 flex items-center justify-center gap-3
|
||||
${isNoChange
|
||||
? 'bg-gray-900 text-gray-500 border border-gray-800 cursor-not-allowed shadow-none'
|
||||
: buttonColor
|
||||
}`}
|
||||
>
|
||||
{loading ? <Loader className="w-4 h-4 animate-spin" /> : (!isNoChange && ActionIcon)}
|
||||
|
||||
{loading
|
||||
? 'Traitement en cours...'
|
||||
: isNoChange
|
||||
? 'Abonnement actuel (Aucune modification)'
|
||||
: migrationLabel
|
||||
}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleCancel}
|
||||
disabled={loading || cancelLoading}
|
||||
className="w-full flex items-center justify-center gap-2 text-red-400/80 hover:text-red-400 border border-red-950/30 bg-red-950/5 hover:bg-red-950/15 p-3 rounded-xl text-xs font-bold uppercase tracking-wider transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{cancelLoading ? <Loader className="w-4 h-4 animate-spin" /> : <ShieldAlert className="w-4 h-4" />}
|
||||
{cancelLoading ? 'Résiliation en cours...' : 'Résilier l\'abonnement réseau'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user