From 30ccfa4ee2a07713e02a6b96b8b8d1f703c56e76 Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Thu, 14 May 2026 00:49:20 +0330
Subject: [PATCH] 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>
---
 backend/src/applications/domain.service.ts    | 14 +--
 backend/src/billing/billing.service.ts        | 12 +++
 frontend/src/app/dashboard/apps/[id]/page.tsx | 86 ++++++++++---------
 frontend/src/app/dashboard/deploy/page.tsx    | 25 +++---
 4 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/backend/src/applications/domain.service.ts b/backend/src/applications/domain.service.ts
index 341791a..9f96028 100644
--- a/backend/src/applications/domain.service.ts
+++ b/backend/src/applications/domain.service.ts
@@ -145,15 +145,15 @@ export class DomainService {
     const fullPlatformUrl = `${app.subdomain}.${platformDomain}`;
 
     const instructions = [
-      `1. وارد پنل مدیریت دامنه خود شوید (مانند Cloudflare، Namecheap، GoDaddy و غیره)`,
-      `2. به بخش مدیریت DNS بروید`,
-      `3. یک رکورد CNAME اضافه کنید:`,
-      `   - Name/Host: @ یا www (بسته به دامنه‌تان)`,
+      `1. Log in to your domain registrar (e.g. Cloudflare, Namecheap, GoDaddy)`,
+      `2. Go to DNS management for your domain`,
+      `3. Add a CNAME record:`,
+      `   - Name/Host: @ or www (depending on your domain)`,
       `   - Type: CNAME`,
       `   - Value/Target: ${fullPlatformUrl}`,
-      `4. اگر از دامنه اصلی (root domain) بدون www استفاده می‌کنید، برخی ثبت‌کنندگان از CNAME flattening پشتیبانی می‌کنند (مانند Cloudflare). در غیر این صورت از www استفاده کنید.`,
-      `5. بین ۵ تا ۳۰ دقیقه صبر کنید تا DNS منتشر شود (تا ۴۸ ساعت ممکن است طول بکشد)`,
-      `6. دکمه "تأیید DNS" را بزنید`,
+      `4. If using a root domain (without www), some registrars support CNAME flattening (e.g. Cloudflare). Otherwise use www.`,
+      `5. Wait 5-30 minutes for DNS propagation (may take up to 48 hours)`,
+      `6. Click the "Verify DNS" button`,
     ];
 
     return {
diff --git a/backend/src/billing/billing.service.ts b/backend/src/billing/billing.service.ts
index d820ba8..6302565 100644
--- a/backend/src/billing/billing.service.ts
+++ b/backend/src/billing/billing.service.ts
@@ -203,6 +203,18 @@ export class BillingService {
       }
     }
 
+    // If custom domain is enabled but no CUSTOM_DOMAIN_ADDON rule exists, use PlatformSetting price
+    if (hasCustomDomain && !breakdown.some((b) => b.label === 'Custom domain + SSL')) {
+      const setting = await this.settingsRepo.findOne({ where: { key: 'custom_domain_monthly_price_toman' } });
+      const monthlyPrice = setting ? Number(setting.value) : 0;
+      if (monthlyPrice > 0) {
+        const hourly = Math.round(monthlyPrice / 720);
+        const yearly = monthlyPrice * 12;
+        breakdown.push({ label: 'Custom domain + SSL', hourly, monthly: monthlyPrice, yearly });
+        totalBase += baseCycle === 'monthly' ? monthlyPrice : baseCycle === 'hourly' ? hourly : yearly;
+      }
+    }
+
     const hourlyTotal = baseCycle === 'hourly' ? totalBase : baseCycle === 'monthly' ? totalBase / 720 : totalBase / 8640;
     const monthlyTotal = baseCycle === 'monthly' ? totalBase : baseCycle === 'hourly' ? totalBase * 720 : totalBase / 12;
     const yearlyTotal = baseCycle === 'yearly' ? totalBase : baseCycle === 'monthly' ? totalBase * 12 : totalBase * 8640;
diff --git a/frontend/src/app/dashboard/apps/[id]/page.tsx b/frontend/src/app/dashboard/apps/[id]/page.tsx
index 41d341f..f82c02a 100644
--- a/frontend/src/app/dashboard/apps/[id]/page.tsx
+++ b/frontend/src/app/dashboard/apps/[id]/page.tsx
@@ -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>
diff --git a/frontend/src/app/dashboard/deploy/page.tsx b/frontend/src/app/dashboard/deploy/page.tsx
index e8a15eb..fec5ed3 100644
--- a/frontend/src/app/dashboard/deploy/page.tsx
+++ b/frontend/src/app/dashboard/deploy/page.tsx
@@ -1939,17 +1939,17 @@ export default function DeployPage() {
 
             {/* Custom Domain Option */}
             <div className="bg-white rounded-xl p-5 border border-gray-200">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center">
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex items-center gap-3 min-w-0">
+                  <div className="w-10 h-10 rounded-xl bg-purple-50 flex items-center justify-center shrink-0">
                     <Globe className="w-5 h-5 text-purple-600" />
                   </div>
-                  <div>
-                    <h3 className="text-sm font-semibold text-gray-800">دامنه اختصاصی</h3>
+                  <div className="min-w-0">
+                    <h3 className="text-sm font-semibold text-gray-800">Custom Domain</h3>
                     <p className="text-xs text-gray-500">
-                      وبسایت را روی دامنه خود ببینید (با SSL رایگان)
+                      Use your own domain with free SSL
                       {domainPriceData && domainPriceData.monthlyPrice > 0 && (
-                        <span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('fa-IR')} تومان/ماه</span>
+                        <span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman/mo</span>
                       )}
                     </p>
                   </div>
@@ -1957,24 +1957,23 @@ export default function DeployPage() {
                 <button
                   type="button"
                   onClick={() => setEnableCustomDomain(!enableCustomDomain)}
-                  className={`relative w-12 h-6 rounded-full transition-colors ${enableCustomDomain ? 'bg-purple-600' : 'bg-gray-300'}`}
+                  className={`relative shrink-0 w-11 h-6 rounded-full transition-colors ${enableCustomDomain ? 'bg-purple-600' : 'bg-gray-300'}`}
                 >
-                  <span className={`absolute top-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${enableCustomDomain ? 'translate-x-6' : 'translate-x-0.5'}`} />
+                  <span className={`block absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${enableCustomDomain ? 'translate-x-5' : 'translate-x-0'}`} />
                 </button>
               </div>
               {enableCustomDomain && (
                 <div className="mt-4 pt-4 border-t border-gray-100">
-                  <label className="block text-sm font-medium text-gray-700 mb-2">آدرس دامنه</label>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Domain Address</label>
                   <input
                     type="text"
-                    dir="ltr"
                     value={customDomainInput}
                     onChange={(e) => setCustomDomainInput(e.target.value)}
                     placeholder="example.com or www.example.com"
                     className="input-field w-full font-mono text-sm"
                   />
-                  <p className="text-xs text-gray-400 mt-2" dir="rtl">
-                    بعد از دیپلوی، باید رکورد DNS دامنه خود را تنظیم کنید. راهنمای کامل در صفحه جزئیات اپلیکیشن نمایش داده می‌شود.
+                  <p className="text-xs text-gray-400 mt-2">
+                    After deployment, you will need to configure your DNS records. Full instructions will be shown on the application detail page.
                   </p>
                 </div>
               )}