Add contact modal for unlicense environment

lowcoder-org · FalkWolsky · May 26, 2025 · May 23, 2025 · May 23, 2025 · May 26, 2025
commit 130b7625898c2a0563cb97497058081dc008dace
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect } from 'react';
+import { Modal, Card, Row, Col, Typography, Divider } from 'antd';
+import { CustomerServiceOutlined, CloudServerOutlined } from '@ant-design/icons';
+import { useSelector, useDispatch } from 'react-redux';
+import { getDeploymentId } from 'redux/selectors/configSelectors';
+import { fetchDeploymentIdAction } from 'redux/reduxActions/configActions';
+import { Environment } from '../types/environment.types';
+
+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<ContactLowcoderModalProps> = ({
+  visible,
+  onClose,
+  environment
+}) => {
+  // Get deploymentId from Redux config provider
+  const deploymentId = useSelector(getDeploymentId);
+  const dispatch = useDispatch();
+
+  // Fetch deployment ID when modal opens if not already available
+  useEffect(() => {
+    if (visible && !deploymentId) {
+      dispatch(fetchDeploymentIdAction());
+    }
+  }, [visible, deploymentId, dispatch]);
+
+  return (
+    <Modal
+      title={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <CustomerServiceOutlined style={{ fontSize: '20px', color: '#1890ff' }} />
+          <span style={{ fontSize: '18px', fontWeight: 600 }}>Contact Lowcoder Team</span>
+        </div>
+      }
+      open={visible}
+      onCancel={onClose}
+      footer={null}
+      width={800}
+      centered
+      style={{ top: 20 }}
+      bodyStyle={{ padding: '24px' }}
+    >
+      {/* Environment Context Section */}
+      <Card
+        style={{
+          marginBottom: '24px',
+          borderRadius: '8px',
+          background: '#fafafa',
+          border: '1px solid #f0f0f0'
+        }}
+        bodyStyle={{ padding: '16px' }}
+      >
+        <Row gutter={[16, 8]} align="middle">
+          <Col>
+            <CloudServerOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
+          </Col>
+          <Col flex={1}>
+            <div>
+              <Text strong style={{ fontSize: '16px', color: '#262626' }}>
+                Environment: {environment.environmentName || 'Unnamed Environment'}
+              </Text>
+              <br />
+              <Text style={{ fontSize: '14px', color: '#8c8c8c', fontFamily: 'monospace' }}>
+                Environment ID: {environment.environmentId}
+              </Text>
+              <br />
+              <Text style={{ fontSize: '14px', color: '#8c8c8c', fontFamily: 'monospace' }}>
+                Deployment ID: {deploymentId || 'Loading...'}
+              </Text>
+            </div>
+          </Col>
+        </Row>
+      </Card>
+
+      <Divider style={{ margin: '16px 0' }} />
+
+      {/* HubSpot Form Integration Section */}
+      <div style={{ minHeight: '400px', padding: '20px 0' }}>
+        <Title level={4} style={{ textAlign: 'center', marginBottom: '24px', color: '#262626' }}>
+          Get in Touch
+        </Title>
+
+        <Text style={{ 
+          textAlign: 'center', 
+          display: 'block', 
+          marginBottom: '32px',
+          fontSize: '16px',
+          color: '#595959',
+          lineHeight: '1.6'
+        }}>
+          Our team is here to help you resolve licensing issues and get your environment up and running.
+        </Text>
+
+        {/* HubSpot Form Container */}
+        <div style={{
+          minHeight: '300px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#fdfdfd',
+          borderRadius: '8px',
+          border: '1px solid #f0f0f0'
+        }}>
+          {/* HubSpot form will be integrated here */}
+          <div style={{
+            textAlign: 'center',
+            color: '#8c8c8c',
+            fontSize: '14px'
+          }}>
+            <CustomerServiceOutlined style={{ fontSize: '48px', marginBottom: '16px', color: '#d9d9d9' }} />
+            <div>Contact form will be integrated here</div>
+          </div>
+        </div>
+
+        {/* Environment data is available for form pre-filling */}
+        {/* Data available: environment.environmentName, environment.environmentId, deploymentId, 
+            environment.licenseStatus, environment.environmentType, environment.licenseError */}
+      </div>
+    </Modal>
+  );
+};
+
+export default ContactLowcoderModal; 
diff --git a/...packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx b/...packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Button, Card, Space, Typography, Row, Col } from 'antd';
 import { 
   CustomerServiceOutlined, 
@@ -9,6 +9,7 @@ import {
   WarningOutlined
 } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
+import ContactLowcoderModal from './ContactLowcoderModal';
 import history from "@lowcoder-ee/util/history";
 
 const { Title, Text } = Typography;
@@ -25,6 +26,8 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
   environment,
   onEditClick
 }) => {
+  const [isContactModalVisible, setIsContactModalVisible] = useState(false);
+
   const getLicenseIcon = () => {
     switch (environment.licenseStatus) {
       case 'unlicensed':
@@ -144,6 +147,7 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                   type="primary"
                   size="large"
                   icon={<CustomerServiceOutlined />}
+                  onClick={() => setIsContactModalVisible(true)}
                   style={{
                     width: '100%',
                     height: '48px',
@@ -154,7 +158,6 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
                     border: 'none',
                     boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
                   }}
-                  // onClick will be handled later when modal is ready
                 >
                   Contact Lowcoder Team
                 </Button>
@@ -208,6 +211,13 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
           </div>
         </Col>
       </Row>
+
+      {/* Contact Lowcoder Modal */}
+      <ContactLowcoderModal
+        visible={isContactModalVisible}
+        onClose={() => setIsContactModalVisible(false)}
+        environment={environment}
+      />
     </div>
   );
 };