From e8be7fbf03ee124a19cb24827b01090605b4b41d Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Thu, 14 May 2026 00:53:04 +0330
Subject: [PATCH] fix(deploy): move custom domain toggle from Review to
 Optional Services step

The custom domain option now lives in Step 2 alongside Redis, RabbitMQ,
and Elasticsearch, styled consistently as a toggle card. The Review step
remains a read-only summary.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/app/dashboard/deploy/page.tsx | 87 +++++++++++-----------
 1 file changed, 45 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/dashboard/deploy/page.tsx b/frontend/src/app/dashboard/deploy/page.tsx
index fec5ed3..7220fa1 100644
--- a/frontend/src/app/dashboard/deploy/page.tsx
+++ b/frontend/src/app/dashboard/deploy/page.tsx
@@ -1472,6 +1472,51 @@ export default function DeployPage() {
                     : 'Each enabled service adds to the monthly cost. Services are deployed in your namespace.'}
                 </p>
               )}
+
+              {/* Custom Domain */}
+              <div className="mt-4 space-y-3">
+                <div className={`p-4 rounded-xl border-2 text-left transition-all ${
+                    enableCustomDomain
+                      ? 'border-purple-400 bg-purple-50 shadow-sm'
+                      : 'border-gray-200 bg-white hover:border-gray-300'
+                  }`}>
+                  <button
+                    type="button"
+                    onClick={() => setEnableCustomDomain(!enableCustomDomain)}
+                    className="w-full text-left"
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${enableCustomDomain ? 'bg-purple-100' : 'bg-gray-100'}`}>
+                        <Globe className={`w-6 h-6 ${enableCustomDomain ? 'text-purple-500' : 'text-gray-400'}`} />
+                      </div>
+                      <div>
+                        <p className="font-semibold text-gray-900">Custom Domain</p>
+                        <p className="text-xs text-gray-500">
+                          Use your own domain with free SSL
+                          {domainPriceData && domainPriceData.monthlyPrice > 0 && (
+                            <span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman/mo</span>
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                  {enableCustomDomain && (
+                    <div className="mt-3 pt-3 border-t border-purple-200 space-y-2">
+                      <label className="block text-xs text-gray-600">Domain Address</label>
+                      <input
+                        type="text"
+                        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-purple-600">
+                        After deployment, configure your DNS records. Instructions will be shown on the app detail page.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
 
             {/* App Storage Size (all app types) */}
@@ -1937,48 +1982,6 @@ export default function DeployPage() {
               )}
             </div>
 
-            {/* Custom Domain Option */}
-            <div className="bg-white rounded-xl p-5 border border-gray-200">
-              <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 className="min-w-0">
-                    <h3 className="text-sm font-semibold text-gray-800">Custom Domain</h3>
-                    <p className="text-xs text-gray-500">
-                      Use your own domain with free SSL
-                      {domainPriceData && domainPriceData.monthlyPrice > 0 && (
-                        <span className="text-purple-600 font-medium"> — {domainPriceData.monthlyPrice.toLocaleString('en-US')} Toman/mo</span>
-                      )}
-                    </p>
-                  </div>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => setEnableCustomDomain(!enableCustomDomain)}
-                  className={`relative shrink-0 w-11 h-6 rounded-full transition-colors ${enableCustomDomain ? 'bg-purple-600' : 'bg-gray-300'}`}
-                >
-                  <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">Domain Address</label>
-                  <input
-                    type="text"
-                    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">
-                    After deployment, you will need to configure your DNS records. Full instructions will be shown on the application detail page.
-                  </p>
-                </div>
-              )}
-            </div>
-
             {/* Cost Breakdown */}
             <div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-5 sm:p-6 border border-emerald-200">
               <h3 className="text-sm font-semibold text-gray-700 flex items-center gap-2 mb-3">