-
- Get in Touch
-
-
-
- Our team is here to help you resolve licensing issues and get your environment up and running.
-
-
- {/* HubSpot Form Container */}
-
- {/* HubSpot form will be integrated here */}
-
-
-
Contact form will be integrated here
-
-
-
- {/* Environment data is available for form pre-filling */}
- {/* Data available: environment.environmentName, environment.environmentId, deploymentId,
- environment.licenseStatus, environment.environmentType, environment.licenseError */}
-
-
- );
-};
-
+import React, { useState, useEffect } from 'react';
+import { Modal, Card, Row, Col, Typography, Divider, Spin, Alert } from 'antd';
+import { CustomerServiceOutlined, CloudServerOutlined } from '@ant-design/icons';
+import { useSelector } from 'react-redux';
+import { Environment } from '../types/environment.types';
+import { getEnvironmentDeploymentId } from '../services/environments.service';
+import { HubspotModal } from '../../hubspotModal';
+import { getUser } from 'redux/selectors/usersSelectors';
+
+const { Title, Text } = Typography;
+
+interface ContactLowcoderModalProps {
+ visible: boolean;
+ onClose: () => void;
+ environment: Environment;
+}
+
+/**
+ * Professional modal for contacting Lowcoder team with HubSpot form integration
+ */
+const ContactLowcoderModal: React.FC = ({
+ visible,
+ onClose,
+ environment
+}) => {
+ const [deploymentId, setDeploymentId] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [showHubspotModal, setShowHubspotModal] = useState(false);
+ const user = useSelector(getUser);
+
+ // Fetch deployment ID when modal opens
+ useEffect(() => {
+ const fetchDeploymentId = async () => {
+ if (!visible || !environment.environmentApiServiceUrl || !environment.environmentApikey) {
+ if (visible) {
+ setError('Environment API service URL or API key not configured');
+ }
+ return;
+ }
+
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const id = await getEnvironmentDeploymentId(
+ environment.environmentApiServiceUrl,
+ environment.environmentApikey
+ );
+ setDeploymentId(id);
+ setShowHubspotModal(true);
+ } catch (err) {
+ console.error('Failed to fetch deployment ID:', err);
+ setError(err instanceof Error ? err.message : 'Failed to fetch deployment ID');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchDeploymentId();
+ }, [visible, environment.environmentApiServiceUrl, environment.environmentApikey]);
+
+ // Handle HubSpot modal close
+ const handleHubspotClose = () => {
+ setShowHubspotModal(false);
+ onClose();
+ };
+
+ // Handle main modal close
+ const handleClose = () => {
+ setShowHubspotModal(false);
+ setDeploymentId(null);
+ setError(null);
+ onClose();
+ };
+
+ // Show HubSpot modal if we have deployment ID
+ if (showHubspotModal && deploymentId) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+ Contact Lowcoder Team
+