fix: update cost estimate on domain toggle, switch to English, fix toggle overflow
- Cost calculation now reads custom domain price from PlatformSetting as fallback when no CUSTOM_DOMAIN_ADDON pricing rule exists - Convert all custom domain UI text from Persian to English - Fix toggle switch overflow by adding shrink-0, min-w-0, and proper absolute positioning Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
keyhan
@@ -252,36 +252,36 @@ export default function AppDetailPage() {
|
||||
const setDomainMutation = useMutation({
|
||||
mutationFn: (domain: string) => api.post(`/applications/${appId}/domain`, { domain }),
|
||||
onSuccess: () => {
|
||||
toast.success('دامنه تنظیم شد. لطفاً رکورد DNS را اضافه کنید.');
|
||||
toast.success('Domain set. Please configure your DNS records.');
|
||||
queryClient.invalidateQueries({ queryKey: ['application', appId] });
|
||||
refetchDomainInfo();
|
||||
setCustomDomainInput('');
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'خطا در تنظیم دامنه'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to set domain'),
|
||||
});
|
||||
|
||||
const verifyDnsMutation = useMutation({
|
||||
mutationFn: () => api.post(`/applications/${appId}/domain/verify`),
|
||||
onSuccess: (res) => {
|
||||
if (res.data.verified) {
|
||||
toast.success('دامنه با موفقیت تأیید شد!');
|
||||
toast.success('Domain verified successfully!');
|
||||
} else {
|
||||
toast.warning(res.data.message || 'DNS هنوز آماده نیست. لطفاً بعداً تلاش کنید.');
|
||||
toast.warning(res.data.message || 'DNS is not ready yet. Please try again later.');
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: ['application', appId] });
|
||||
refetchDomainInfo();
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'خطا در تأیید DNS'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'DNS verification failed'),
|
||||
});
|
||||
|
||||
const removeDomainMutation = useMutation({
|
||||
mutationFn: () => api.delete(`/applications/${appId}/domain`),
|
||||
onSuccess: () => {
|
||||
toast.success('دامنه اختصاصی حذف شد');
|
||||
toast.success('Custom domain removed');
|
||||
queryClient.invalidateQueries({ queryKey: ['application', appId] });
|
||||
refetchDomainInfo();
|
||||
},
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'خطا در حذف دامنه'),
|
||||
onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to remove domain'),
|
||||
});
|
||||
|
||||
// ─── Snapshots ──────────────────────────────────────
|
||||
@@ -1268,14 +1268,14 @@ export default function AppDetailPage() {
|
||||
<div className="card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<Globe className="w-5 h-5" /> دامنه
|
||||
<Globe className="w-5 h-5" /> Domain
|
||||
</h2>
|
||||
{!showDomainSetup && (!app.customDomain || app.customDomainStatus === 'none') && (
|
||||
<button
|
||||
onClick={() => setShowDomainSetup(true)}
|
||||
className="btn-primary text-sm"
|
||||
>
|
||||
افزودن دامنه اختصاصی
|
||||
Add Custom Domain
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -1284,12 +1284,12 @@ export default function AppDetailPage() {
|
||||
<div className="bg-gray-50 rounded-xl p-4 mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">دامنه پلتفرم</p>
|
||||
<p className="text-xs text-gray-500 mb-1">Platform Domain</p>
|
||||
<p className="text-sm font-mono font-medium text-gray-800">
|
||||
{app.subdomain}.{domainInfo?.platformDomain || 'apps.cloudhost.ir'}
|
||||
</p>
|
||||
</div>
|
||||
<span className="badge badge-green text-xs">فعال</span>
|
||||
<span className="badge badge-green text-xs">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1298,19 +1298,19 @@ export default function AppDetailPage() {
|
||||
<div className="bg-emerald-50 rounded-xl p-4 mb-4 border border-emerald-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-emerald-600 mb-1">دامنه اختصاصی</p>
|
||||
<p className="text-xs text-emerald-600 mb-1">Custom Domain</p>
|
||||
<p className="text-sm font-mono font-medium text-emerald-800">{app.customDomain}</p>
|
||||
<p className="text-xs text-emerald-500 mt-1">
|
||||
<CheckCircle className="w-3 h-3 inline" /> SSL فعال — تأیید شده در{' '}
|
||||
{app.customDomainVerifiedAt ? new Date(app.customDomainVerifiedAt).toLocaleString('fa-IR') : ''}
|
||||
<CheckCircle className="w-3 h-3 inline" /> SSL Active — Verified on{' '}
|
||||
{app.customDomainVerifiedAt ? new Date(app.customDomainVerifiedAt).toLocaleString() : ''}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const ok = await confirm({
|
||||
title: 'حذف دامنه اختصاصی',
|
||||
message: `آیا مطمئن هستید که میخواهید دامنه "${app.customDomain}" را حذف کنید؟ وبسایت فقط از طریق دامنه پلتفرم قابل دسترسی خواهد بود.`,
|
||||
confirmText: 'حذف',
|
||||
title: 'Remove Custom Domain',
|
||||
message: `Are you sure you want to remove "${app.customDomain}"? The website will only be accessible via the platform domain.`,
|
||||
confirmText: 'Remove',
|
||||
variant: 'danger',
|
||||
});
|
||||
if (ok) removeDomainMutation.mutate();
|
||||
@@ -1318,7 +1318,7 @@ export default function AppDetailPage() {
|
||||
disabled={removeDomainMutation.isPending}
|
||||
className="text-sm px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 border border-red-200 transition-colors"
|
||||
>
|
||||
{removeDomainMutation.isPending ? 'در حال حذف...' : 'حذف دامنه'}
|
||||
{removeDomainMutation.isPending ? 'Removing...' : 'Remove Domain'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1329,7 +1329,7 @@ export default function AppDetailPage() {
|
||||
<div className="bg-amber-50 rounded-xl p-4 mb-4 border border-amber-200">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div>
|
||||
<p className="text-xs text-amber-600 mb-1">دامنه اختصاصی — در انتظار تأیید DNS</p>
|
||||
<p className="text-xs text-amber-600 mb-1">Custom Domain — Pending DNS Verification</p>
|
||||
<p className="text-sm font-mono font-medium text-amber-800">{app.customDomain}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
@@ -1338,29 +1338,35 @@ export default function AppDetailPage() {
|
||||
disabled={verifyDnsMutation.isPending}
|
||||
className="btn-primary text-sm"
|
||||
>
|
||||
{verifyDnsMutation.isPending ? 'در حال بررسی...' : 'تأیید DNS'}
|
||||
{verifyDnsMutation.isPending ? 'Checking...' : 'Verify DNS'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeDomainMutation.mutate()}
|
||||
disabled={removeDomainMutation.isPending}
|
||||
className="text-sm px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 border border-red-200 transition-colors"
|
||||
>
|
||||
لغو
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DNS Instructions */}
|
||||
{domainInfo?.instructions && (
|
||||
<div className="bg-white rounded-lg p-4 border border-amber-100">
|
||||
<h4 className="text-sm font-semibold text-gray-800 mb-3">راهنمای تنظیم DNS</h4>
|
||||
<div className="space-y-2 text-sm text-gray-600" dir="rtl">
|
||||
{domainInfo.instructions.map((step, i) => (
|
||||
<p key={i} className={step.startsWith(' ') ? 'pr-4 text-xs font-mono bg-gray-50 rounded px-2 py-1' : ''}>
|
||||
{step}
|
||||
</p>
|
||||
))}
|
||||
<div className="bg-white rounded-lg p-4 border border-amber-100">
|
||||
<h4 className="text-sm font-semibold text-gray-800 mb-3">DNS Setup Guide</h4>
|
||||
<div className="space-y-2.5 text-sm text-gray-600">
|
||||
<p>1. Log in to your domain registrar (e.g. Cloudflare, Namecheap, GoDaddy)</p>
|
||||
<p>2. Go to DNS management for your domain</p>
|
||||
<p>3. Add a <strong>CNAME</strong> record:</p>
|
||||
<div className="pl-4 space-y-1">
|
||||
<p className="text-xs font-mono bg-gray-50 rounded px-2 py-1">Name/Host: <strong>@</strong> or <strong>www</strong></p>
|
||||
<p className="text-xs font-mono bg-gray-50 rounded px-2 py-1">Type: <strong>CNAME</strong></p>
|
||||
<p className="text-xs font-mono bg-gray-50 rounded px-2 py-1">Value: <strong>{domainInfo?.fullPlatformUrl || `${app.subdomain}.apps.cloudhost.ir`}</strong></p>
|
||||
</div>
|
||||
<p>4. If using a root domain (without www), use a registrar that supports CNAME flattening (e.g. Cloudflare), or use <code className="bg-gray-100 px-1 rounded">www</code> instead.</p>
|
||||
<p>5. Wait 5–30 minutes for DNS propagation (up to 48 hours in some cases)</p>
|
||||
<p>6. Click the <strong>"Verify DNS"</strong> button above</p>
|
||||
</div>
|
||||
{domainInfo?.fullPlatformUrl && (
|
||||
<div className="mt-4 bg-blue-50 rounded-lg p-3 border border-blue-100">
|
||||
<p className="text-xs text-blue-700 font-medium mb-1">CNAME Target:</p>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -1370,7 +1376,7 @@ export default function AppDetailPage() {
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(domainInfo.fullPlatformUrl);
|
||||
toast.success('کپی شد!');
|
||||
toast.success('Copied!');
|
||||
}}
|
||||
className="text-blue-600 hover:text-blue-800 p-1"
|
||||
>
|
||||
@@ -1378,27 +1384,27 @@ export default function AppDetailPage() {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Domain setup form */}
|
||||
{showDomainSetup && (!app.customDomain || app.customDomainStatus === 'none') && (
|
||||
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
|
||||
<h4 className="text-sm font-semibold text-gray-800 mb-3">تنظیم دامنه اختصاصی</h4>
|
||||
<h4 className="text-sm font-semibold text-gray-800 mb-3">Set Up Custom Domain</h4>
|
||||
{domainPriceData && domainPriceData.monthlyPrice > 0 && (
|
||||
<div className="bg-blue-50 rounded-lg p-3 mb-4 border border-blue-100">
|
||||
<p className="text-sm text-blue-700">
|
||||
<CreditCard className="w-4 h-4 inline ml-1" />
|
||||
هزینه دامنه اختصاصی: <strong>{domainPriceData.monthlyPrice.toLocaleString('fa-IR')} تومان / ماهانه</strong>
|
||||
<CreditCard className="w-4 h-4 inline mr-1" />
|
||||
Custom domain fee: <strong>{domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman / month</strong>
|
||||
</p>
|
||||
<p className="text-xs text-blue-500 mt-1">
|
||||
این هزینه در محاسبه کلی هزینهها در نظر گرفته میشود.
|
||||
This fee is included in the total cost calculation.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2" dir="ltr">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={customDomainInput}
|
||||
@@ -1413,13 +1419,13 @@ export default function AppDetailPage() {
|
||||
disabled={!customDomainInput.trim() || setDomainMutation.isPending}
|
||||
className="btn-primary text-sm disabled:opacity-50"
|
||||
>
|
||||
{setDomainMutation.isPending ? 'در حال ثبت...' : 'ثبت دامنه'}
|
||||
{setDomainMutation.isPending ? 'Setting up...' : 'Set Domain'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowDomainSetup(false); setCustomDomainInput(''); }}
|
||||
className="btn-secondary text-sm"
|
||||
>
|
||||
انصراف
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user