+
There was an error sending your message. Please try again.
)}
);
-}
+}
\ No newline at end of file
diff --git a/src/components/DomainSetupForm.jsx b/src/components/DomainSetupForm.jsx
index ac189bb..9a70609 100644
--- a/src/components/DomainSetupForm.jsx
+++ b/src/components/DomainSetupForm.jsx
@@ -1,25 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import { Toast } from './Toast';
import { TemplatePreview } from './TemplatePreview';
import { Button } from './ui/button';
-import { Input } from "./ui/input";
-import { Label, Select } from '@radix-ui/react-select';
+
export const DomainSetupForm = ({ defaultSubdomain }) => {
- // Deployment type and app selections
+ // API URLs
+ const API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/users/';
+ const SERVICES_API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/services/';
+
+ // State for deployment options
const [deploymentType, setDeploymentType] = useState('app');
const [appType, setAppType] = useState('wordpress');
- const [sampleWebAppType, setSampleWebAppType] = useState('developer'); // New state for sample web app type
+ const [sampleWebAppType, setSampleWebAppType] = useState('developer');
const [sourceType, setSourceType] = useState('public');
const [repoUrl, setRepoUrl] = useState('');
const [deploymentKey, setDeploymentKey] = useState('');
const [fileName, setFileName] = useState('');
- // Domain configuration
+ // State for domain configuration
const [useSubdomain, setUseSubdomain] = useState(true);
const [useCustomDomain, setUseCustomDomain] = useState(false);
const [customDomain, setCustomDomain] = useState('');
const [customSubdomain, setCustomSubdomain] = useState('');
- const [domainType, setDomainType] = useState('domain'); // 'domain' or 'subdomain'
+ const [domainType, setDomainType] = useState('domain');
// Domain validation states
const [isValidating, setIsValidating] = useState(false);
@@ -29,242 +32,141 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
// DNS configuration
const [dnsMethod, setDnsMethod] = useState('cname');
const [showDnsConfig, setShowDnsConfig] = useState(false);
- const [dnsVerified, setDnsVerified] = useState({ cname: false, ns: false, a: false, ip: false});
+ const [dnsVerified, setDnsVerified] = useState({ cname: false, ns: false, a: false, ip: false });
+
+ // Payment related states
const [txnId, setTxnId] = useState('');
const [userEmail, setUserEmail] = useState('');
-
const [panelType, setPanelType] = useState('');
const [panelServicesId, setPanelServicesId] = useState('');
- const API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/users/';
- const SERVICES_API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/services/';
- // const BILLING_API_URL = 'https://host-api.cs1.hz.siliconpin.com/v1/users/index.php';
-
- const [selectedcycle, setSelectedcycle] = useState('');
+ const [vpnContinent, setVpnContinent] = useState('');
+ const [selectedCycle, setSelectedCycle] = useState('');
const [selectedPrice, setSelectedPrice] = useState(0);
- const handleCheckboxChange = (cycle, price) => {
- if (selectedcycle === cycle) {
- setSelectedcycle('');
+ // Form validation and toast
+ const [formValid, setFormValid] = useState(true);
+ const [toast, setToast] = useState({ visible: false, message: '' });
+
+ // Refs
+ const fileInputRef = React.useRef(null);
+ const buyButtonRef = React.useRef(null);
+
+ // Price configurations
+ const PRICE_CONFIG = {
+ vpn: { monthly: 100, yearly: 1000 },
+ hestia: { monthly: 200, yearly: 2000 }
+ };
+
+ // Show toast notification
+ const showToast = useCallback((message) => {
+ setToast({ visible: true, message });
+ setTimeout(() => setToast({ visible: false, message: '' }), 3000);
+ }, []);
+
+ // Handle billing cycle selection
+ const handleBillingCycleChange = useCallback((cycle, price) => {
+ if (selectedCycle === cycle) {
+ setSelectedCycle('');
setSelectedPrice(0);
} else {
- setSelectedcycle(cycle);
+ setSelectedCycle(cycle);
setSelectedPrice(price);
}
- // console.log(selectedcycle, ' ', selectedPrice);
- };
- const handlePanelBuyNow = () => {
- // Disable button during processing
- const buyButton = document.getElementById('buy-button'); // Add ID to your button
- if (buyButton) buyButton.disabled = true;
-
- showToast('Loading...');
+ }, [selectedCycle]);
+
+ // Validate form based on current state
+ const validateForm = useCallback(() => {
+ if (useCustomDomain) {
+ if (dnsMethod === 'cname' && !dnsVerified.cname) {
+ setFormValid(false);
+ return;
+ }
+ if (dnsMethod === 'ns' && !dnsVerified.ns) {
+ setFormValid(false);
+ return;
+ }
+ if (dnsMethod === 'ip' && !dnsVerified.ip) {
+ setFormValid(false);
+ return;
+ }
+ }
+ setFormValid(true);
+ }, [useCustomDomain, dnsMethod, dnsVerified]);
+
+ // Handle panel/VPN purchase
+ const handlePurchase = useCallback(async (serviceType) => {
+ if (buyButtonRef.current) buyButtonRef.current.disabled = true;
+ showToast('Loading...');
+
+ try {
const formData = new FormData();
- formData.append('service', panelType);
- formData.append('serviceId', panelServicesId);
- formData.append('cycle', selectedcycle);
- formData.append('amount', 1); //selectedPrice
- fetch(`${API_URL}?query=initiate_payment`, {
+ formData.append('service', serviceType === 'vpn' ? 'vpn' : panelType);
+ formData.append('serviceId', serviceType === 'vpn' ? 'vpnservices' : panelServicesId);
+ formData.append('cycle', selectedCycle);
+ formData.append('amount', selectedPrice.toString());
+
+ const response = await fetch(`${API_URL}?query=initiate_payment`, {
method: 'POST',
body: formData,
credentials: 'include'
- })
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.json();
- })
- .then(data => {
- if(data.success === true){
- setTxnId(data.txn_id);
- setUserEmail(data.user_email);
- window.location.href = `/make-payment?query=get-initiated_payment&orderId=${data.order_id}`
- // redirectToPayU(data);
- showToast('Redirecting to payment page...');
- } else {
- throw new Error(data.message || 'Payment initialization failed');
- }
- })
- .catch(error => {
- showToast(error.message || 'Payment failed. Please try again.');
- console.error('An error occurred:', error);
- })
- .finally(() => {
- if (buyButton) buyButton.disabled = false;
});
- };
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const data = await response.json();
-
-
- // Form validation
- const [formValid, setFormValid] = useState(true);
-
- // Toast notification
- const [toast, setToast] = useState({ visible: false, message: '' });
-
- // File upload reference
- const fileInputRef = React.useRef(null);
-
- // Effect for handling domain type changes
- useEffect(() => {
- if (!useCustomDomain) {
- setShowDnsConfig(false);
- setIsValidDomain(false);
- setValidationMessage('');
- setIsValidating(false);
+ if (data.success) {
+ setTxnId(data.txn_id);
+ setUserEmail(data.user_email);
+ const redirectUrl = serviceType === 'vpn' ? `/success?service=vpn&orderId=${data.order_id}` : `/make-payment?query=get-initiated_payment&orderId=${data.order_id}`;
+ window.location.href = redirectUrl;
+ showToast('Redirecting to payment page...');
+ } else {
+ throw new Error(data.message || 'Payment initialization failed');
+ }
+ } catch (error) {
+ const errorMessage = error instanceof Error ? error.message : 'Payment failed. Please try again.';
+ showToast(errorMessage);
+ console.error('An error occurred:', error);
+ } finally {
+ if (buyButtonRef.current) buyButtonRef.current.disabled = false;
}
+ }, [panelType, panelServicesId, selectedCycle, selectedPrice, showToast]);
- validateForm();
- }, [useCustomDomain, dnsVerified.cname, dnsVerified.ns, dnsVerified.ns, domainType, dnsMethod]);
-
- // Show toast notification
- const showToast = (message) => {
- setToast({ visible: true, message });
- setTimeout(() => setToast({ visible: false, message: '' }), 3000);
- };
-
- // Handle deployment type change
- const handleDeploymentTypeChange = (e) => {
- setDeploymentType(e.target.value);
- };
-
- // Handle source type change
- const handleSourceTypeChange = (e) => {
- setSourceType(e.target.value);
- };
-
- // Handle file upload
- const handleFileChange = (e) => {
- if (e.target.files.length > 0) {
- setFileName(e.target.files[0].name);
- } else {
- setFileName('');
- }
- };
-
- // Handle domain checkbox changes
- const handleUseSubdomainChange = (e) => {
- setUseSubdomain(e.target.checked);
-
- // If CNAME record is selected, SiliconPin subdomain must be enabled
- if (useCustomDomain && dnsMethod === 'cname' && !e.target.checked) {
- setUseCustomDomain(false);
- }
-
- validateForm();
- };
-
- const handleUseCustomDomainChange = (e) => {
- setUseCustomDomain(e.target.checked);
- if (!e.target.checked) {
- setShowDnsConfig(false);
- setIsValidDomain(false);
- setValidationMessage('');
- setIsValidating(false);
- setDnsVerified({
- cname: false,
- ns: false,
- a: false,
- ip: false
- });
- } else {
- // Force SiliconPin subdomain to be checked if custom domain is checked
- setUseSubdomain(true);
- }
-
- validateForm();
- };
-
- // Handle domain type change
- const handleDomainTypeChange = (e) => {
- setDomainType(e.target.value);
-
- // Reset validation when changing domain type
- setIsValidDomain(false);
- setValidationMessage('');
- setDnsVerified({
- cname: false,
- ns: false,
- a: false
- });
-
- validateForm();
- };
-
- // Handle domain and subdomain input changes
- const handleDomainChange = (e) => {
- const cleanedValue = e.target.value.replace(/^(https?:\/\/)?(www\.)?/i, '').replace(/\/+$/, '').trim();
- setCustomDomain(cleanedValue);
- };
-
- const handleSubdomainChange = (e) => {
- const cleanedValue = e.target.value.replace(/^(https?:\/\/)?/i, '').replace(/\/+$/, '').trim();
- setCustomSubdomain(cleanedValue);
- };
-
- // Handle DNS method change
- const handleDnsMethodChange = (e) => {
- setDnsMethod(e.target.value);
-
- // If changing to CNAME, ensure SiliconPin subdomain is enabled
- if (e.target.value === 'cname') {
- setUseSubdomain(true);
- }
-
- // Reset DNS verification
- setDnsVerified(prev => ({
- ...prev,
- [e.target.value]: false
- }));
-
- validateForm();
- };
-
- // Validate domain
- const validateDomain = async () => {
+ // Validate domain with API
+ const validateDomain = useCallback(async () => {
const domain = domainType === 'domain' ? customDomain : customSubdomain;
-
- // Reset validation state
+
+ if (!domain) {
+ setValidationMessage('Please enter a domain name.');
+ setIsValidDomain(false);
+ return;
+ }
+
+ const domainFormatRegex = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
+ if (!domainFormatRegex.test(domain)) {
+ setValidationMessage('Domain format is invalid. Please check your entry.');
+ setIsValidDomain(false);
+ return;
+ }
+
setIsValidating(true);
setIsValidDomain(false);
setValidationMessage('');
setShowDnsConfig(false);
-
- // Check if domain is empty
- if (!domain) {
- setValidationMessage('Please enter a domain name.');
- setIsValidating(false);
- setIsValidDomain(false);
- return;
- }
-
- // Validate domain format
- const domainFormatRegex = /^(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
- if (!domainFormatRegex.test(domain)) {
- setValidationMessage('Domain format is invalid. Please check your entry.');
- setIsValidating(false);
- setIsValidDomain(false);
- return;
- }
-
+
try {
- // Make API call to validate domain
const response = await fetch(`${SERVICES_API_URL}?query=validate-domain`, {
method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
+ headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ domain })
});
-
- if (!response.ok) {
- throw new Error('Network response was not ok');
- }
-
+
+ if (!response.ok) throw new Error('Network response was not ok');
+
const data = await response.json();
-
if (data.valid) {
setValidationMessage('Domain is valid and registered.');
setIsValidDomain(true);
@@ -281,126 +183,78 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
setIsValidating(false);
validateForm();
}
- };
+ }, [customDomain, customSubdomain, domainType, validateForm]);
// Check DNS configuration
- const checkSubDomainCname = () => {
- const domainToCheck = customDomain || customSubdomain;
+ const checkDnsConfig = useCallback((type) => {
+ showToast(`Checking ${type}...`);
- fetch(`${SERVICES_API_URL}?query=check-c-name`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded',
- },
- body: `domain=${encodeURIComponent(domainToCheck)}`
- })
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.json();
- })
- .then(data => {
- if (data.status === 'success') {
- checkDnsConfig('cname');
- showToast(`Checking ${type}... (This would verify DNS in a real app)`);
- console.log('CNAME record:', data.cname);
- // Handle success - update UI
- } else {
- console.error('Error:', data.message);
- // Handle error
- }
- })
- .catch(error => {
- console.error('Fetch error:', error);
- // Show error to user
- });
- };
- const checkDnsConfig = (type) => {
- showToast(`Checking ${type}... (This would verify DNS in a real app)`);
-
- // Simulate DNS check
setTimeout(() => {
- setDnsVerified(prev => ({
- ...prev,
- [type]: true
- }));
-
+ setDnsVerified(prev => ({ ...prev, [type]: true }));
showToast(`${type} verified successfully!`);
validateForm();
}, 1500);
- };
+ }, [showToast, validateForm]);
- // Copy to clipboard
- const copyToClipboard = (text) => {
+ // Check CNAME record
+ const checkSubDomainCname = useCallback(() => {
+ const domainToCheck = customDomain || customSubdomain;
+
+ fetch(`${SERVICES_API_URL}?query=check-c-name`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+ body: `domain=${encodeURIComponent(domainToCheck)}`
+ })
+ .then(response => {
+ if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+ return response.json();
+ })
+ .then(data => {
+ if (data.status === 'success') {
+ checkDnsConfig('cname');
+ } else {
+ throw new Error(data.message || 'CNAME check failed');
+ }
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ showToast(error.message || 'Failed to check CNAME record');
+ });
+ }, [customDomain, customSubdomain, checkDnsConfig, showToast]);
+
+ // Copy text to clipboard
+ const copyToClipboard = useCallback((text) => {
navigator.clipboard.writeText(text)
- .then(() => {
- showToast('Copied to clipboard!');
- })
- .catch(err => {
- showToast('Failed to copy: ' + err);
- });
- };
-
- // Validate form
- const validateForm = () => {
- // For custom domain, require DNS verification
- if (useCustomDomain) {
- if (dnsMethod === 'cname' && !dnsVerified.cname) {
- setFormValid(false);
- return;
- }
-
- if (dnsMethod === 'ns' && !dnsVerified.ns) {
- setFormValid(false);
- return;
- }
- if (dnsMethod === 'ip' && !dnsVerified.ip) {
- setFormValid(false);
- return;
- }
- }
-
- setFormValid(true);
- };
+ .then(() => showToast('Copied to clipboard!'))
+ .catch(err => showToast(`Failed to copy: ${err}`));
+ }, [showToast]);
// Handle form submission
- const handleSubmit = (e) => {
+ const handleSubmit = useCallback((e) => {
e.preventDefault();
-
if (!formValid) {
showToast('Please complete DNS verification before deploying.');
return;
}
-
- // 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}]);
-
showToast('Form submitted successfully!');
- };
+ }, [formValid, showToast]);
- return (
-
- {/* Template Preview */}
- )}
+ );
- {/* Source Options */}
- {deploymentType === 'source' && (
+ case 'source':
+ return (