From 6907bf2852d58203f6073cbac3df85154d3b0f28 Mon Sep 17 00:00:00 2001
From: Suvodip <suvodip@l1>
Date: Fri, 21 Mar 2025 18:08:06 +0530
Subject: [PATCH] s11

---
 src/components/DomainSetupForm.jsx | 175 ++++++++++++++++++-----------
 src/pages/contact.astro            |   2 +-
 2 files changed, 108 insertions(+), 69 deletions(-)

diff --git a/src/components/DomainSetupForm.jsx b/src/components/DomainSetupForm.jsx
index 4632a98..f3a0b28 100644
--- a/src/components/DomainSetupForm.jsx
+++ b/src/components/DomainSetupForm.jsx
@@ -30,7 +30,8 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
   const [dnsVerified, setDnsVerified] = useState({
     cname: false,
     ns: false,
-    a: false
+    a: false,
+    ip: false
   });
 
   // Form validation
@@ -61,7 +62,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
     }
 
     validateForm();
-  }, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, domainType, dnsMethod]);
+  }, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, dnsVerified.ns, domainType, dnsMethod]);
 
   // Show toast notification
   const showToast = (message) => {
@@ -110,7 +111,8 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
       setDnsVerified({
         cname: false,
         ns: false,
-        a: false
+        a: false,
+        ip: false
       });
     } else {
       // Force SiliconPin subdomain to be checked if custom domain is checked
@@ -246,6 +248,10 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
         setFormValid(false);
         return;
       }
+      if (dnsMethod === 'ip' && !dnsVerified.ip) {
+        setFormValid(false);
+        return;
+      }
     }
 
     setFormValid(true);
@@ -261,20 +267,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
     }
 
     // In a real app, this would submit the form data to the server
-    console.log({
-      deploymentType,
-      appType,
-      sampleWebAppType,
-      sourceType,
-      repoUrl,
-      deploymentKey,
-      useSubdomain,
-      useCustomDomain,
-      customDomain,
-      customSubdomain,
-      domainType,
-      dnsMethod
-    });
+    console.log([{ deploymentType, appType, sampleWebAppType, sourceType, repoUrl, deploymentKey, useSubdomain, useCustomDomain, customDomain, customSubdomain, domainType, dnsMethod}]);
 
     showToast('Form submitted successfully!');
   };
@@ -550,9 +543,10 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
 
                     {/* Domain Validation */}
                     <button
+                      disabled={!customDomain}
                       type="button"
                       onClick={validateDomain}
-                      className="px-4 py-2 bg-neutral-600 text-white font-medium rounded-md hover:bg-neutral-500 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500"
+                      className={`px-4 py-2 ${!customDomain ? 'bg-neutral-600 cursor-not-allowed' : 'bg-[#6d9e37] focus:ring-[#6d9e37] transition-colors'} text-white font-medium rounded-md transition-colors focus:outline-none`}
                     >
                       Validate Domain
                     </button>
@@ -582,7 +576,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
 
                         {/* CNAME Record Option */}
                         <div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
-                          <div className="flex items-start">
+                          <label for="dns-cname" className="flex items-start cursor-pointer">
                             <input
                               type="radio"
                               id="dns-cname"
@@ -622,67 +616,114 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
                                 </button>
                               </div>
                             </div>
-                          </div>
+                          </label>
                         </div>
 
                         {/* Nameserver Option (only for full domains, not subdomains) */}
                         {domainType === 'domain' && (
-                          <div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
-                            <div className="flex items-start">
-                              <input
-                                type="radio"
-                                id="dns-ns"
-                                name="dns-method"
-                                value="ns"
-                                checked={dnsMethod === 'ns'}
-                                onChange={handleDnsMethodChange}
-                                className="mt-1 mr-2"
-                              />
-                              <div className="flex-1">
-                                <label htmlFor="dns-ns" className="block text-white font-medium">Use Our Nameservers</label>
-                                <p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
+                          <>
+                            <div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
+                              <label for="dns-ns" className="flex items-start cursor-pointer">
+                                <input
+                                  type="radio"
+                                  id="dns-ns"
+                                  name="dns-method"
+                                  value="ns"
+                                  checked={dnsMethod === 'ns'}
+                                  onChange={handleDnsMethodChange}
+                                  className="mt-1 mr-2"
+                                />
+                                <div className="flex-1">
+                                  <label htmlFor="dns-ns" className="block text-white font-medium">Use Our Nameservers</label>
+                                  <p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
 
-                                <div className="mt-3 space-y-2">
-                                  <div className="flex items-center">
-                                    <div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns1.siliconpin.com</div>
-                                    <button
-                                      type="button"
-                                      onClick={() => copyToClipboard('ns1.siliconpin.com')}
-                                      className="ml-2 text-[#6d9e37] hover:text-white"
-                                      aria-label="Copy nameserver value"
-                                    >
-                                      <span className="text-lg">📋</span>
-                                    </button>
+                                  <div className="mt-3 space-y-2">
+                                    <div className="flex items-center">
+                                      <div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns1.siliconpin.com</div>
+                                      <button
+                                        type="button"
+                                        onClick={() => copyToClipboard('ns1.siliconpin.com')}
+                                        className="ml-2 text-[#6d9e37] hover:text-white"
+                                        aria-label="Copy nameserver value"
+                                      >
+                                        <span className="text-lg">📋</span>
+                                      </button>
+                                    </div>
+
+                                    <div className="flex items-center">
+                                      <div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns2.siliconpin.com</div>
+                                      <button
+                                        type="button"
+                                        onClick={() => copyToClipboard('ns2.siliconpin.com')}
+                                        className="ml-2 text-[#6d9e37] hover:text-white"
+                                        aria-label="Copy nameserver value"
+                                      >
+                                        <span className="text-lg">📋</span>
+                                      </button>
+                                    </div>
                                   </div>
 
-                                  <div className="flex items-center">
-                                    <div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">ns2.siliconpin.com</div>
+                                  <div className="mt-2 text-right">
                                     <button
                                       type="button"
-                                      onClick={() => copyToClipboard('ns2.siliconpin.com')}
-                                      className="ml-2 text-[#6d9e37] hover:text-white"
-                                      aria-label="Copy nameserver value"
+                                      onClick={() => checkDnsConfig('ns')}
+                                      className={`px-3 py-1 text-white text-sm rounded
+                                      ${dnsVerified.ns
+                                        ? 'bg-green-700 hover:bg-green-600'
+                                        : 'bg-neutral-600 hover:bg-neutral-500'}`}
                                     >
-                                      <span className="text-lg">📋</span>
+                                      {dnsVerified.ns ? '✓ Nameservers Verified' : 'Check Nameservers'}
                                     </button>
                                   </div>
                                 </div>
-
-                                <div className="mt-2 text-right">
-                                  <button
-                                    type="button"
-                                    onClick={() => checkDnsConfig('ns')}
-                                    className={`px-3 py-1 text-white text-sm rounded
-                                    ${dnsVerified.ns
-                                      ? 'bg-green-700 hover:bg-green-600'
-                                      : 'bg-neutral-600 hover:bg-neutral-500'}`}
-                                  >
-                                    {dnsVerified.ns ? '✓ Nameservers Verified' : 'Check Nameservers'}
-                                  </button>
-                                </div>
-                              </div>
+                              </label>
                             </div>
-                          </div>
+
+                            <div className="p-4 bg-neutral-700/30 rounded-md border border-neutral-600 space-y-3">
+                              <label for="dns-ip" className="flex items-start cursor-pointer">
+                                <input
+                                  type="radio"
+                                  id="dns-ip"
+                                  name="dns-method"
+                                  value="ip"
+                                  checked={dnsMethod === 'ip'}
+                                  onChange={handleDnsMethodChange}
+                                  className="mt-1 mr-2"
+                                />
+                                <div className="flex-1">
+                                  <label htmlFor="dns-ip" className="block text-white font-medium">Use Our IP Address</label>
+                                  <p className="text-sm text-neutral-300">Update your domain's nameservers to use ours</p>
+
+                                  <div className="mt-3 space-y-2">
+                                    <div className="flex items-center">
+                                      <div className="bg-neutral-800 p-2 rounded font-mono text-sm text-neutral-300">xxx.xxx.x.xx</div>
+                                      <button
+                                        type="button"
+                                        onClick={() => copyToClipboard('xxx.xxx.x.xx')}
+                                        className="ml-2 text-[#6d9e37] hover:text-white"
+                                        aria-label="Copy nameserver value"
+                                      >
+                                        <span className="text-lg">📋</span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                  <div className="mt-2 text-right">
+                                    <button
+                                      type="button"
+                                      onClick={() => checkDnsConfig('ip')}
+                                      className={`px-3 py-1 text-white text-sm rounded
+                                      ${dnsMethod === 'ip'
+                                        ? 'bg-green-700 hover:bg-green-600'
+                                        : 'bg-neutral-600 hover:bg-neutral-500'}`}
+                                    >
+                                      {/* {dnsVerified.ip ? '✓ IP Address Verified' : 'Check IP Address'} */}
+                                      Proceed to Pay
+                                    </button>
+                                  </div>
+                                </div>
+                              </label>
+                            </div>
+                          </>
                         )}
                       </div>
                     )}
@@ -692,7 +733,6 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
             </div>
           </div>
         </div>
-
         {/* Form Submit Button */}
         <button
           type="submit"
@@ -706,7 +746,6 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
           Start the Deployment
         </button>
       </form>
-
       <Toast visible={toast.visible} message={toast.message} />
     </div>
   );
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 5753abe..39caf9a 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -133,7 +133,7 @@ const contactSchema = {
             <span class="text-neutral-300 font-medium">Sunday:</span>
             <span class="text-white">Closed</span>
           </div>
-          <div class="pt-3 border-t border-neutral-700">
+          <div class="pt-3 border-t border-neutral-700 flex items-center justify-between">
             <span class="text-neutral-300">Technical Support:</span>
             <span class="text-[#6d9e37] font-semibold block mt-1">24/7</span>
           </div>