function ErrorModal({ isOpen, onClose, message, nextAllowedDate }) { if (!isOpen) return null; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-500 text-4xl", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "Trial Access Limited"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-400 mb-4", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, message), nextAllowedDate && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "You can try again on:", " ", new Date(nextAllowedDate).toLocaleDateString())), /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 transition-colors", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Close"))); } function ErrorModalStory() { const [isOpen1, setIsOpen1] = useState(false); const [isOpen2, setIsOpen2] = useState(false); const futureDate = new Date(); futureDate.setDate(futureDate.getDate() + 30); return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Basic Error Modal"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen1(true), className: "bg-blue-600 text-white px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Show Basic Error"), /*#__PURE__*/ React.createElement(ErrorModal, { isOpen: isOpen1, onClose: ()=>setIsOpen1(false), message: "You have reached the maximum number of trial attempts.", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Error Modal with Next Allowed Date"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen2(true), className: "bg-blue-600 text-white px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Show Error with Date"), /*#__PURE__*/ React.createElement(ErrorModal, { isOpen: isOpen2, onClose: ()=>setIsOpen2(false), message: "You have reached the maximum number of trial attempts for this device.", nextAllowedDate: futureDate, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }))); } function AuthModal({ isOpen = false, onClose = ()=>{} }) { const { signInWithGoogle } = useAuth(); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [showLimitError, setShowLimitError] = useState(false); const [limitErrorDetails, setLimitErrorDetails] = useState(null); const [mounted, setMounted] = useState(false); const [modalReady, setModalReady] = useState(false); useEffect(()=>{ if (isOpen) { setMounted(true); const timer = setTimeout(()=>{ setModalReady(true); }, 100); return ()=>clearTimeout(timer); } else { setModalReady(false); const timer = setTimeout(()=>{ setMounted(false); }, 300); return ()=>clearTimeout(timer); } }, [ isOpen ]); const handleGoogleSignIn = async ()=>{ setError(""); setLoading(true); try { await signInWithGoogle({ callbackUrl: "/", redirect: true, select_account: true }); await fetch("/api/auth/update-user-login-status", { method: "POST" }); } catch (error) { console.error("Google sign in failed:", error); setError("Failed to sign in with Google. Please try again."); setLoading(false); } }; if (!mounted) return null; return /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 z-50 transition-all duration-300 ${modalReady ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/30 backdrop-blur-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-white dark:bg-gray-800 rounded-[25px] p-8 max-w-md w-full mx-4 relative transform transition-all duration-300 ${modalReady ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, modalReady ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-3 rounded-[25px] bg-[#E52020]/10 dark:bg-[#E52020]/20 mb-4", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-[#E52020] dark:text-[#E52020] text-3xl", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, "Sign in to", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#E52020]", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, "Aviato", /*#__PURE__*/ React.createElement("i", { __source: { fileName: "", lineNumber: 69, columnNumber: 29 }, __self: this }, "Rush"), ".")))), error && /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 text-red-700 dark:text-red-200 rounded-[25px] text-sm text-center", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }), error), /*#__PURE__*/ React.createElement("button", { onClick: handleGoogleSignIn, disabled: loading, className: "w-full bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-600 py-4 rounded-[25px] hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }), "Processing...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: "https://www.google.com/favicon.ico", alt: "Google", className: "w-5 h-5 mr-3", __source: { fileName: "", lineNumber: 94, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 99, columnNumber: 21 }, __self: this }, "Continue with Google"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-xs text-gray-500 dark:text-gray-400 text-center", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "By continuing, you agree to our", " ", /*#__PURE__*/ React.createElement("a", { href: "/terms", className: "text-[#E52020] hover:underline", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "Terms of Service"), ",", " ", /*#__PURE__*/ React.createElement("a", { href: "/privacy", className: "text-[#E52020] hover:underline", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, "Privacy Policy"), ",", " ", /*#__PURE__*/ React.createElement("a", { href: "/refund", className: "text-[#E52020] hover:underline", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Refund Policy"), ", and", " ", /*#__PURE__*/ React.createElement("a", { href: "/guidelines", className: "text-[#E52020] hover:underline", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, "Community Guidelines"), ".")) : /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[400px]", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#E52020] text-3xl", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement(ErrorModal, { isOpen: showLimitError, onClose: ()=>setShowLimitError(false), message: limitErrorDetails?.message, nextAllowedDate: limitErrorDetails?.nextAllowedDate, __source: { fileName: "", lineNumber: 135, columnNumber: 7 }, __self: this })); } function AuthModalStory() { const [isOpen, setIsOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-[#E52020] text-white px-4 py-2 rounded-[25px]", __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, "Show Auth Modal"), /*#__PURE__*/ React.createElement(AuthModal, { isOpen: isOpen, onClose: ()=>setIsOpen(false), __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this })); } function SubscriptionSection({ userStatus, paymentHistory = [], onSubscribe }) { const [error, setError] = useState(null); const [showNotification, setShowNotification] = useState(false); const [notificationMessage, setNotificationMessage] = useState(""); const [isCancelling, setIsCancelling] = useState(false); const [isProcessingPayment, setIsProcessingPayment] = useState(false); const [paymentId, setPaymentId] = useState(null); useEffect(()=>{ let intervalId; if (paymentId) { intervalId = setInterval(async ()=>{ try { const response = await fetch("/api/payments/payfast/verify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paymentId }) }); if (!response.ok) { throw new Error("Failed to verify payment"); } const data = await response.json(); if (data.status === "completed") { clearInterval(intervalId); window.location.reload(); } } catch (error) { console.error("Payment verification error:", error); } }, 5000); } return ()=>clearInterval(intervalId); }, [ paymentId ]); const handleInitiatePayment = async ()=>{ setIsProcessingPayment(true); try { const response = await fetch("/api/payments/payfast/initialize", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ plan: "monthly", userId: userStatus.userId }) }); if (!response.ok) { throw new Error("Failed to initialize payment"); } const data = await response.json(); if (data.success) { setPaymentId(data.paymentId); window.location.href = data.paymentUrl; } else { throw new Error(data.error); } } catch (error) { console.error("Payment initialization error:", error); setError(error.message); setNotificationMessage("Failed to initialize payment"); setShowNotification(true); } finally{ setIsProcessingPayment(false); } }; const handleAutoRenewToggle = async ()=>{ try { const response = await fetch("/api/update-auto-renewal", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ autoRenew: !userStatus?.auto_renew }) }); if (!response.ok) { throw new Error("Failed to update auto-renewal"); } setNotificationMessage("Auto-renewal preference updated successfully!"); setShowNotification(true); setTimeout(()=>setShowNotification(false), 3000); } catch (error) { console.error("Error updating auto-renewal:", error); setError(error.message); setNotificationMessage("Failed to update auto-renewal preference"); setShowNotification(true); } }; const handleCancelSubscription = async ()=>{ setIsCancelling(true); try { const response = await fetch("/api/cancel-subscription", { method: "POST", headers: { "Content-Type": "application/json" } }); if (!response.ok) { throw new Error("Failed to cancel subscription"); } setNotificationMessage("Your subscription has been cancelled"); setShowNotification(true); setTimeout(()=>window.location.href = "/?showSubscribe=true", 2000); } catch (error) { console.error("Error cancelling subscription:", error); setError(error.message); setNotificationMessage("Failed to cancel subscription"); setShowNotification(true); } finally{ setIsCancelling(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-3", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, userStatus?.is_subscribed ? "Current Plan" : "Subscription Status"), userStatus?.is_subscribed ? /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2.5 w-2.5 bg-green-500 rounded-full", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-green-600 dark:text-green-400 font-medium", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, "Active")), /*#__PURE__*/ React.createElement("span", { className: "bg-[#E52020]/10 text-[#E52020] px-2.5 py-0.5 rounded-full text-xs font-medium", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "Premium")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3 py-2 border-y border-gray-100 dark:border-gray-700", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "Next Billing"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, userStatus?.subscription_end ? new Date(userStatus.subscription_end).toLocaleDateString("en-US", { day: "numeric", month: "short" }) : "-")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 160, columnNumber: 17 }, __self: this }, "R299.99/mo"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 p-3 rounded-md", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Auto-renewal"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, userStatus?.auto_renew ? "Enabled" : "Disabled")), /*#__PURE__*/ React.createElement("button", { onClick: handleAutoRenewToggle, className: `relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#E52020] focus:ring-offset-2 ${userStatus?.auto_renew ? "bg-[#E52020]" : "bg-gray-200 dark:bg-gray-600"}`, __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${userStatus?.auto_renew ? "translate-x-4" : "translate-x-0"}`, __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleCancelSubscription, disabled: isCancelling, className: "w-full text-[#E52020] bg-[#E52020]/10 hover:bg-[#E52020]/20 px-3 py-1.5 rounded-md transition-colors duration-200 text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, isCancelling ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }), "Cancelling...") : "Cancel Subscription")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start space-x-2", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-yellow-400", __source: { fileName: "", lineNumber: 210, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm font-medium text-yellow-800 dark:text-yellow-200", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, "No Active Plan"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-yellow-700 dark:text-yellow-300", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, "Subscribe for premium features")))), /*#__PURE__*/ React.createElement("button", { onClick: handleInitiatePayment, disabled: isProcessingPayment, className: "w-full bg-[#E52020] text-white px-4 py-2 rounded-md hover:bg-[#D41E1E] transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, isProcessingPayment ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }), "Processing...") : "Subscribe Now")), paymentHistory.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 240, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-sm font-semibold text-gray-900 dark:text-white mb-3", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, "Payment History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, paymentHistory.map((payment)=>/*#__PURE__*/ React.createElement("div", { key: payment.id, className: "flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-md text-sm", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 251, columnNumber: 21 }, __self: this }, "R", payment.amount), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 254, columnNumber: 21 }, __self: this }, new Date(payment.date).toLocaleDateString())), /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-full text-xs ${payment.status === "completed" ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"}`, __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, payment.status)))))), showNotification && /*#__PURE__*/ React.createElement("div", { className: `fixed bottom-4 right-4 px-6 py-3.5 rounded-[25px] shadow-lg text-white ${error ? "bg-red-500" : "bg-green-500"}`, __source: { fileName: "", lineNumber: 275, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 280, columnNumber: 11 }, __self: this }, notificationMessage))); } function SubscriptionSectionStory() { const mockPaymentHistory = [ { id: 1, amount: "299.99", date: "2025-01-15", status: "completed" }, { id: 2, amount: "299.99", date: "2024-12-15", status: "completed" } ]; const mockActiveSubscription = { userId: "user123", is_subscribed: true, subscription_end: "2025-12-31", auto_renew: true }; const mockUnsubscribedStatus = { userId: "user123", is_subscribed: false, auto_renew: false }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-8 bg-gray-100 dark:bg-gray-900", __source: { fileName: "", lineNumber: 317, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 318, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 319, columnNumber: 9 }, __self: this }, "Active Subscription with Payment History"), /*#__PURE__*/ React.createElement(SubscriptionSection, { userStatus: mockActiveSubscription, paymentHistory: mockPaymentHistory, onSubscribe: ()=>console.log("Subscribe clicked"), __source: { fileName: "", lineNumber: 322, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 329, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, "Unsubscribed View"), /*#__PURE__*/ React.createElement(SubscriptionSection, { userStatus: mockUnsubscribedStatus, paymentHistory: [], onSubscribe: ()=>console.log("Subscribe clicked"), __source: { fileName: "", lineNumber: 333, columnNumber: 9 }, __self: this }))); } function Header1() { const { data: user, loading } = useUser(); const { signOut } = useAuth(); const [isMenuOpen, setIsMenuOpen] = useState(false); useEffect(()=>{ const handleClickOutside = (event)=>{ if (isMenuOpen && !event.target.closest(".user-menu")) { setIsMenuOpen(false); } }; document.addEventListener("click", handleClickOutside); return ()=>document.removeEventListener("click", handleClickOutside); }, [ isMenuOpen ]); return /*#__PURE__*/ React.createElement("header", { className: "fixed top-0 left-0 right-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-[9999] isolate", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "mx-auto px-4 sm:px-6 lg:px-8", "aria-label": "Top", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full py-4 flex items-center justify-between backdrop-none", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#E52020]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Aviato", /*#__PURE__*/ React.createElement("i", { __source: { fileName: "", lineNumber: 24, columnNumber: 23 }, __self: this }, "Rush"), "."))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, !loading && user && /*#__PURE__*/ React.createElement("div", { className: "relative user-menu", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMenuOpen(!isMenuOpen), className: "flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.image || "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y", alt: "User profile", className: "h-8 w-8 rounded-full", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this })), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-[9999]", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 border-b border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-300 truncate", __source: { fileName: "", lineNumber: 49, columnNumber: 23 }, __self: this }, user.email)), /*#__PURE__*/ React.createElement("div", { className: "py-1", role: "menu", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/profile", className: "block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", role: "menuitem", __source: { fileName: "", lineNumber: 54, columnNumber: 23 }, __self: this }, "Profile"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>signOut({ callbackUrl: "/" }), className: "block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", role: "menuitem", __source: { fileName: "", lineNumber: 61, columnNumber: 23 }, __self: this }, "Sign out")))), !loading && !user && /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-[#E52020] hover:bg-[#D41E1E]", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Sign in"))))); } function Header1Story() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-[200vh]", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Header Component"), /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Header Component (Loading)"), /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Header Component (Signed In)"), /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Header Component (Signed Out)"), /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "pt-16", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "p-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "Scroll down to see the header stay in place"))); } function SubscriptionModal({ isOpen, onClose }) { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [verifyingPayment, setVerifyingPayment] = useState(false); const [gracePeriod, setGracePeriod] = useState(null); const [retryCount, setRetryCount] = useState(0); const { data: user } = useUser(); const [paymentStatus, setPaymentStatus] = useState(null); const [paymentId, setPaymentId] = useState(null); const [trialStatus, setTrialStatus] = useState(null); const [subscriptionDetails, setSubscriptionDetails] = useState(null); useEffect(()=>{ const fetchData = async ()=>{ try { const [graceResponse, trialResponse, subResponse] = await Promise.all([ fetch("/api/check-grace-period", { method: "POST" }), fetch("/api/check-trial-status", { method: "POST" }), fetch("/api/check-subscription-status", { method: "POST" }) ]); const [graceData, trialData, subData] = await Promise.all([ graceResponse.json(), trialResponse.json(), subResponse.json() ]); setGracePeriod(graceData); setTrialStatus(trialData); setSubscriptionDetails(subData); } catch (err) { console.error("Error checking status:", err); setError("Failed to load subscription status"); } }; if (isOpen && user) { fetchData(); } }, [ isOpen, user ]); const verifyPayment = async (pid)=>{ setVerifyingPayment(true); try { const response = await fetch("/api/payments/payfast/verify", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paymentId: pid }) }); if (!response.ok) { throw new Error(`Verification failed: ${response.status}`); } const data = await response.json(); if (data.success) { setPaymentStatus(data.status); if (data.status === "completed") { await fetch("/api/users/update", { method: "POST" }); onClose(); window.location.reload(); return true; } } return false; } catch (error) { console.error("Payment verification error:", error); setError("Payment verification failed. Please contact support if payment was deducted."); return false; } finally{ setVerifyingPayment(false); } }; useEffect(()=>{ let intervalId; const MAX_RETRIES = 6; if (paymentId && retryCount < MAX_RETRIES) { intervalId = setInterval(async ()=>{ const verified = await verifyPayment(paymentId); if (!verified) { setRetryCount((prev)=>prev + 1); if (retryCount + 1 >= MAX_RETRIES) { setError("Payment verification timeout. Please check your email for confirmation or contact support."); setPaymentStatus("failed"); } } }, 5000); } return ()=>clearInterval(intervalId); }, [ paymentId, retryCount ]); const handleSubscribe = async ()=>{ setLoading(true); setError(null); setRetryCount(0); try { const response = await fetch("/api/payments/payfast/initialize", { method: "POST", body: JSON.stringify({ plan: "monthly", userId: user.id }) }); if (!response.ok) { throw new Error(`Payment initialization failed: ${response.status}`); } const data = await response.json(); if (data.success) { setPaymentId(data.paymentId); window.location.href = data.paymentUrl; } else { setError(data.error || "Failed to initialize payment"); } } catch (err) { console.error("Payment initialization error:", err); setError("Failed to initialize payment. Please try again."); } finally{ setLoading(false); } }; if (!isOpen) return null; const canDismiss = subscriptionDetails?.isSubscribed && subscriptionDetails?.remainingDays > 0 || user?.role === "admin" || user?.role === "super_admin" || gracePeriod?.hasGracePeriod && gracePeriod?.minutesRemaining > 0; const isGracePeriodExpired = !gracePeriod?.hasGracePeriod || gracePeriod?.minutesRemaining <= 0; const getStatusMessage = ()=>{ if (subscriptionDetails?.isSubscribed) { return `Subscription active: ${subscriptionDetails.remainingDays} days remaining`; } if (trialStatus?.trialActive) { return `Trial active: ${Math.ceil(gracePeriod?.minutesRemaining || 0)} minutes remaining`; } if (verifyingPayment) { return "Verifying payment..."; } if (paymentStatus === "pending") { return "Payment processing..."; } if (paymentStatus === "completed") { return "Subscription activated!"; } if (paymentStatus === "failed") { return "Payment verification failed"; } return "Trial expired. Subscribe now to continue using all features."; }; return /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 z-50 flex items-center justify-center ${isGracePeriodExpired ? "bg-gray-900 bg-opacity-75" : ""}`, __source: { fileName: "", lineNumber: 164, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 ${!isGracePeriodExpired ? "bottom-[60px] md:bottom-0 bg-black/60 backdrop-blur-sm" : ""}`, onClick: canDismiss ? onClose : undefined, __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative bg-white dark:bg-gray-800 rounded-[25px] shadow-xl w-[95%] sm:w-full max-w-[400px] flex flex-col max-h-[90vh] border-2 border-[#149c6f] p-4 sm:p-5 md:p-6", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, canDismiss && /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "absolute right-3 sm:right-4 top-3 sm:top-4 text-[#E52020] hover:text-[#cc1d1d] dark:text-[#E52020] dark:hover:text-[#cc1d1d] p-2", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-base sm:text-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center sticky top-0 bg-white dark:bg-gray-800 py-1 sm:py-2", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl sm:text-2xl font-semibold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#E52020]", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Aviato", /*#__PURE__*/ React.createElement("i", { __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, "Rush"), ".")), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-semibold text-gray-700 dark:text-gray-300 mt-1", __source: { fileName: "", lineNumber: 194, columnNumber: 11 }, __self: this }, "Premium Subscription"), /*#__PURE__*/ React.createElement("div", { className: `mt-2 text-sm ${isGracePeriodExpired ? "text-red-500" : "text-gray-600 dark:text-gray-300"}`, __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }, getStatusMessage())), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-baseline", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl sm:text-4xl font-bold text-[#E52020]", __source: { fileName: "", lineNumber: 206, columnNumber: 13 }, __self: this }, "R299.99"), /*#__PURE__*/ React.createElement("span", { className: "text-base sm:text-lg text-gray-500 dark:text-gray-400 ml-1 sm:ml-2", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, "/month")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-y-4", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-900 dark:text-white mb-3", __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, "Premium Benefits"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3 text-sm sm:text-base text-gray-600 dark:text-gray-300", __source: { fileName: "", lineNumber: 219, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-emerald-500 mr-3", __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, "Unlimited AI-powered predictions")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-emerald-500 mr-3", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 226, columnNumber: 19 }, __self: this }, "Priority access to new features")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-emerald-500 mr-3", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 230, columnNumber: 19 }, __self: this }, "24/7 VIP customer support")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-emerald-500 mr-3", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 234, columnNumber: 19 }, __self: this }, "Exclusive market insights")))))), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-red-500 text-sm text-center bg-red-50 dark:bg-red-900/20 p-3 rounded-lg", __source: { fileName: "", lineNumber: 242, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 247, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSubscribe, disabled: loading || paymentStatus === "pending", className: "w-full text-white px-4 py-3 text-base rounded-lg bg-[#149c6f] hover:bg-[#0f7353] transition-colors disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 255, columnNumber: 17 }, __self: this }), "Processing...") : paymentStatus === "pending" ? "Payment Processing..." : "Subscribe Now"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center text-sm text-gray-500 mt-4", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lock text-[#E52020] mr-2", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }), "Secure payment via PayFast")))); } function SubscriptionModalStory() { const [isOpen, setIsOpen] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-8", __source: { fileName: "", lineNumber: 279, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, "Subscription Modal Examples"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 282, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 283, columnNumber: 9 }, __self: this }, "Active Subscription"), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>{}, __source: { fileName: "", lineNumber: 284, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 287, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 288, columnNumber: 9 }, __self: this }, "Trial Active"), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>{}, __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 292, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 293, columnNumber: 9 }, __self: this }, "Payment Processing"), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>{}, __source: { fileName: "", lineNumber: 294, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 9 }, __self: this }, "Verification Failed"), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>{}, __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 302, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, "Trial Expired"), /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>{}, __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }))); } function Footer() { return /*#__PURE__*/ React.createElement("footer", { className: "fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 z-[9999] isolate", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 flex flex-col items-center backdrop-none", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex items-center justify-around mb-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex flex-col items-center hover:text-[#E52020]", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[#E52020]", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-inter", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("a", { href: "/about", className: "flex flex-col items-center hover:text-[#E52020]", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info text-[#E52020]", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-inter", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("a", { href: "/whatsapp-contact", className: "flex flex-col items-center hover:text-[#E52020]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 448 512", className: "h-4 w-4 fill-[#E52020]", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-inter", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "WhatsApp")), /*#__PURE__*/ React.createElement("a", { href: "/documents", className: "flex flex-col items-center hover:text-[#E52020]", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt text-[#E52020]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs font-inter", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Docs"))), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-bold", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }))); } function FooterStory() { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen pb-[80px]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Main content goes here")), /*#__PURE__*/ React.createElement("div", { className: "trial-expired-blur", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "This content will be blurred"))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); } function MainComponent() { const { data: user } = useUser(); const [showAuthModal, setShowAuthModal] = useState(false); const [showSubscriptionModal, setShowSubscriptionModal] = useState(false); const [currentMultiplier, setCurrentMultiplier] = useState(null); const [multiplierHistory, setMultiplierHistory] = useState([]); const [countdown, setCountdown] = useState(null); const [isTransitioning, setIsTransitioning] = useState(false); const [animation, setAnimation] = useState(""); const [isLoading, setIsLoading] = useState(true); const [trialInfo, setTrialInfo] = useState(null); const [isGracePeriodExpired, setIsGracePeriodExpired] = useState(false); const [shouldFreezeAnimations, setShouldFreezeAnimations] = useState(false); const [trialTimeRemaining, setTrialTimeRemaining] = useState(null); const [frozenState, setFrozenState] = useState({ multiplier: null, history: [], countdown: null, progressOffset: null }); const [subscriptionStatus, setSubscriptionStatus] = useState(null); const [paymentVerificationError, setPaymentVerificationError] = useState(null); const getProgressOffset = ()=>{ if (shouldFreezeAnimations) { return frozenState.progressOffset; } return 1130.97 - 1130.97 * ((60 - countdown) / 60); }; useEffect(()=>{ const style = document.createElement("style"); style.textContent = ` .trial-expired-blur { filter: blur(8px); pointer-events: none; user-select: none; } .trial-expired-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 10; } .predictor-freeze * { animation-play-state: paused !important; transition: none !important; } .predictor-freeze svg circle { transition: none !important; animation: none !important; } .predictor-freeze .animate-bounce, .predictor-freeze .animate-pulse { animation: none !important; } .animate-bounce { transform-origin: center; animation: bounce 1s infinite; will-change: transform; } @keyframes bounce { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } .contained-box { position: relative; z-index: 1; contain: paint layout style; } .contained-box * { transform-style: preserve-3d; backface-visibility: hidden; perspective: 1000px; } footer { position: relative; z-index: 20; contain: paint layout style; } header { position: relative; z-index: 20; contain: paint layout style; } .transform { will-change: transform; transform: translateZ(0); } `; document.head.appendChild(style); return ()=>document.head.removeChild(style); }, []); useEffect(()=>{ let timer; const checkTrialAccess = async ()=>{ if (!user) return; try { const response = await fetch("/api/check-trial-access", { method: "POST" }); const data = await response.json(); if (!data.hasAccess) { setShowSubscriptionModal(true); setIsGracePeriodExpired(true); } else if (data.remainingSeconds) { setTrialTimeRemaining(data.remainingSeconds); timer = setInterval(()=>{ setTrialTimeRemaining((prev)=>{ if (prev <= 1) { clearInterval(timer); setIsGracePeriodExpired(true); setShowSubscriptionModal(true); return 0; } return prev - 1; }); }, 1000); } } catch (error) { console.error("Error checking trial access:", error); } }; checkTrialAccess(); return ()=>{ if (timer) clearInterval(timer); }; }, [ user ]); useEffect(()=>{ const checkSubscriptionStatus = async ()=>{ if (!user) return; try { const response = await fetch("/api/check-subscription-status", { method: "POST" }); if (!response.ok) { throw new Error("Failed to check subscription status"); } const data = await response.json(); if (data.isSubscribed) { setShowSubscriptionModal(false); setIsGracePeriodExpired(false); document.body.classList.remove("predictor-freeze"); } if (data.remainingDays <= 3) { const expiryDate = new Date(); expiryDate.setDate(expiryDate.getDate() + data.remainingDays); } } catch (error) { console.error("Subscription check error:", error); } }; const verifyPayment = async ()=>{ if (!user) return; try { const response = await fetch("/api/payments/payfast/verify", { method: "POST" }); if (!response.ok) { throw new Error("Failed to verify payment"); } const data = await response.json(); if (data.status === "completed") { setShowSubscriptionModal(false); setIsGracePeriodExpired(false); document.body.classList.remove("predictor-freeze"); window.location.reload(); } } catch (error) { console.error("Payment verification error:", error); } }; checkSubscriptionStatus(); const paymentCheck = setInterval(verifyPayment, 30000); return ()=>clearInterval(paymentCheck); }, [ user ]); const loadGracePeriodState = ()=>{ const storedState = localStorage.getItem("gracePeriodState"); if (storedState) { const parsedState = JSON.parse(storedState); if (user?.email === parsedState.email) { setFrozenState(parsedState); setShouldFreezeAnimations(true); setIsGracePeriodExpired(true); document.body.classList.add("predictor-freeze"); } else { localStorage.removeItem("gracePeriodState"); } } }; useEffect(()=>{ const startTrial = async ()=>{ if (!user || isLoading) return; try { const response = await fetch("/api/start-trial", { method: "POST" }); if (!response.ok) { throw new Error("Failed to start trial"); } const data = await response.json(); setTrialInfo(data); } catch (error) { console.error("Error starting trial:", error); } }; const initializeGracePeriod = async ()=>{ if (!user || isLoading) return; if (!user.is_subscribed && user.role !== "super_admin") { try { const response = await fetch("/api/initialize-grace-period", { method: "POST" }); const data = await response.json(); if (data.remainingTime) { setCountdown(data.remainingTime); } } catch (error) { console.error("Error initializing grace period:", error); } } }; }, [ user, isLoading ]); useEffect(()=>{ const checkGracePeriod = async ()=>{ if (!user || user.is_subscribed || user.role === "super_admin") { localStorage.removeItem("gracePeriodState"); setIsGracePeriodExpired(false); setShouldFreezeAnimations(false); setFrozenState({ multiplier: null, history: [], countdown: null, progressOffset: null }); document.body.classList.remove("predictor-freeze"); return; } try { const response = await fetch("/api/check-grace-period", { method: "POST" }); const data = await response.json(); if (!data.hasGracePeriod) { const currentOffset = 1130.97 - 1130.97 * ((60 - countdown) / 60); const gracePeriodState = { multiplier: currentMultiplier, history: multiplierHistory, countdown: countdown, progressOffset: currentOffset, expiredAt: new Date().toISOString(), email: user.email }; localStorage.setItem("gracePeriodState", JSON.stringify(gracePeriodState)); document.body.classList.add("predictor-freeze"); setShouldFreezeAnimations(true); setFrozenState(gracePeriodState); setIsGracePeriodExpired(true); } } catch (error) { console.error("Error checking grace period:", error); } }; }, [ user, currentMultiplier, multiplierHistory, countdown ]); useEffect(()=>{ const checkStatus = async ()=>{ if (!user) { setTrialInfo((prev)=>({ ...prev, status: "not_logged_in" })); setIsLoading(false); return; } if (user.role === "super_admin") { console.log("Super admin detected"); setTrialInfo({ status: "active", trialActive: true, isUnlimited: true }); setIsLoading(false); setIsGracePeriodExpired(false); return; } try { const response = await fetch("/api/check-trial-status", { method: "POST" }); if (!response.ok) throw new Error("Failed to check trial status"); const data = await response.json(); console.log("Trial status data:", data); setTrialInfo({ ...data, status: data.trialActive ? "active" : "expired" }); } catch (error) { console.error("Failed to check status:", error); setTrialInfo((prev)=>({ ...prev, status: "error" })); } finally{ setIsLoading(false); } }; }, [ user ]); useEffect(()=>{ const fetchMultiplier = async ()=>{ if (!user) { setIsLoading(false); return; } try { const response = await fetch("/api/generate-multiplier", { method: "POST" }); const data = await response.json(); if (data.generate) { setIsTransitioning(true); setAnimation("scale-150"); setTimeout(()=>{ setAnimation("scale-100"); setCurrentMultiplier(data.multiplier); setMultiplierHistory((prev)=>{ const newHistory = [ ...prev ]; newHistory.push(data.multiplier); return newHistory.slice(-3); }); setIsTransitioning(false); }, 500); await fetch("/api/save-multiplier", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ multiplier: data.multiplier, hour: data.hour, minute: data.minute }) }); } setCountdown(data.secondsUntilNext); } catch (error) { console.error("Error fetching multiplier:", error); } finally{ setIsLoading(false); } }; const countdownInterval = setInterval(()=>{ setCountdown((prev)=>{ if (prev <= 1) { fetchMultiplier(); return 0; } return prev - 1; }); }, 1000); }, [ user, isGracePeriodExpired ]); const formatCountdown = (seconds)=>{ if (!seconds) return "--:--"; const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; }; if (isLoading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 flex flex-col", __source: { fileName: "", lineNumber: 399, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 400, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex items-center justify-center", __source: { fileName: "", lineNumber: 401, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 dark:text-gray-300", __source: { fileName: "", lineNumber: 402, columnNumber: 11 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 404, columnNumber: 9 }, __self: this }), showAuthModal && /*#__PURE__*/ React.createElement(AuthModal, { isOpen: true, onClose: ()=>setShowAuthModal(false), __source: { fileName: "", lineNumber: 406, columnNumber: 11 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 flex flex-col", __source: { fileName: "", lineNumber: 413, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header1, { __source: { fileName: "", lineNumber: 414, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `flex-1 flex flex-col justify-center relative overflow-hidden contained-box ${isGracePeriodExpired ? "trial-expired-blur" : ""}`, style: { minHeight: "calc(100vh - 144px)", containment: "paint layout style", isolation: "isolate" }, __source: { fileName: "", lineNumber: 415, columnNumber: 7 }, __self: this }, isGracePeriodExpired && /*#__PURE__*/ React.createElement("div", { className: "trial-expired-overlay", __source: { fileName: "", lineNumber: 425, columnNumber: 34 }, __self: this }), trialTimeRemaining > 0 && /*#__PURE__*/ React.createElement("div", { className: "fixed top-16 right-2 sm:top-4 sm:right-4 z-10 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100 px-3 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm shadow-md", __source: { fileName: "", lineNumber: 427, columnNumber: 11 }, __self: this }, "Trial ends in: ", Math.floor(trialTimeRemaining / 60), ":", (trialTimeRemaining % 60).toString().padStart(2, "0")), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[min(90vh,384px)] mx-auto px-2 sm:px-6", __source: { fileName: "", lineNumber: 433, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative transform ${isGracePeriodExpired ? "predictor-freeze" : ""}`, __source: { fileName: "", lineNumber: 434, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center transition-all duration-300", __source: { fileName: "", lineNumber: 437, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative inline-block w-full max-w-[min(90vh,384px)]", __source: { fileName: "", lineNumber: 438, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `transform transition-all duration-500 ${animation}`, style: { contain: "paint layout style", minHeight: "200px", transformStyle: "preserve-3d", backfaceVisibility: "hidden", perspective: "1000px", willChange: "transform", transform: "translateZ(0)" }, __source: { fileName: "", lineNumber: 439, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "transform -rotate-90 w-full aspect-square", viewBox: "0 0 384 384", style: { maxHeight: "calc(100vh - 200px)" }, __source: { fileName: "", lineNumber: 451, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { className: "text-gray-200 dark:text-gray-700", strokeWidth: "4", stroke: "currentColor", fill: "transparent", r: "180", cx: "192", cy: "192", __source: { fileName: "", lineNumber: 456, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { className: "text-[#E52020] transition-all duration-200", strokeWidth: "4", stroke: "currentColor", fill: "transparent", r: "180", cx: "192", cy: "192", strokeDasharray: "1130.97", strokeDashoffset: getProgressOffset(), strokeLinecap: "round", __source: { fileName: "", lineNumber: 465, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center space-y-3 sm:space-y-4", __source: { fileName: "", lineNumber: 478, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `transform transition-all duration-500 text-center px-4`, style: { willChange: "transform", transform: "translateZ(0)" }, __source: { fileName: "", lineNumber: 479, columnNumber: 21 }, __self: this }, currentMultiplier ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 487, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: `text-5xl sm:text-6xl md:text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#E52020] to-[#FF6B6B] ${isTransitioning ? "animate-bounce" : ""}`, __source: { fileName: "", lineNumber: 488, columnNumber: 27 }, __self: this }, currentMultiplier, "x"), /*#__PURE__*/ React.createElement("p", { className: "text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-2", __source: { fileName: "", lineNumber: 493, columnNumber: 27 }, __self: this }, "Current Prediction")) : /*#__PURE__*/ React.createElement("div", { className: "text-sm sm:text-base text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 498, columnNumber: 25 }, __self: this }, "Waiting for next multiplier...")), /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-1", __source: { fileName: "", lineNumber: 503, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm sm:text-base text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 504, columnNumber: 23 }, __self: this }, "Next prediction in:"), /*#__PURE__*/ React.createElement("span", { className: `text-2xl sm:text-3xl md:text-4xl font-bold ${countdown <= 10 ? "text-[#E52020] animate-pulse" : "text-gray-600 dark:text-gray-400"}`, __source: { fileName: "", lineNumber: 507, columnNumber: 23 }, __self: this }, formatCountdown(countdown)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 sm:mt-6 md:mt-8 transition-all duration-500 ease-in-out px-2 sm:px-0", __source: { fileName: "", lineNumber: 520, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4 sm:mb-6", __source: { fileName: "", lineNumber: 521, columnNumber: 17 }, __self: this }, "Recent Predictions"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center gap-2 sm:gap-4", __source: { fileName: "", lineNumber: 524, columnNumber: 17 }, __self: this }, multiplierHistory.map((mult, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${index === multiplierHistory.length - 1 ? "border-2 border-red-500 relative" : "bg-gray-50 dark:bg-gray-800"} px-4 sm:px-8 py-2 sm:py-4 rounded-lg`, __source: { fileName: "", lineNumber: 526, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-200", __source: { fileName: "", lineNumber: 534, columnNumber: 23 }, __self: this }, mult, "x"), index === multiplierHistory.length - 1 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-2 sm:-top-3 -right-2 bg-red-500 text-white text-xs sm:text-sm px-2 py-0.5 rounded-full", __source: { fileName: "", lineNumber: 538, columnNumber: 25 }, __self: this }, "Latest"))))))))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 551, columnNumber: 7 }, __self: this }), !isLoading && showAuthModal && /*#__PURE__*/ React.createElement(AuthModal, { isOpen: true, onClose: ()=>setShowAuthModal(false), __source: { fileName: "", lineNumber: 554, columnNumber: 9 }, __self: this }), !isLoading && !user?.is_subscribed && (showSubscriptionModal || isGracePeriodExpired) && /*#__PURE__*/ React.createElement(SubscriptionModal, { isOpen: true, onClose: ()=>setShowSubscriptionModal(false), __source: { fileName: "", lineNumber: 560, columnNumber: 11 }, __self: this })); }