Skip to content

Commit 130b762

Browse files
iamfaraniamfaran
committed
Add contact modal for unlicense environment
1 parent 0204bf3 commit 130b762

File tree

2 files changed

+144
-2
lines changed

2 files changed

+144
-2
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/components/ContactLowcoderModal.tsx

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React, { useEffect } from 'react';
2+
import { Modal, Card, Row, Col, Typography, Divider } from 'antd';
3+
import { CustomerServiceOutlined, CloudServerOutlined } from '@ant-design/icons';
4+
import { useSelector, useDispatch } from 'react-redux';
5+
import { getDeploymentId } from 'redux/selectors/configSelectors';
6+
import { fetchDeploymentIdAction } from 'redux/reduxActions/configActions';
7+
import { Environment } from '../types/environment.types';
8+
9+
const { Title, Text } = Typography;
10+
11+
interface ContactLowcoderModalProps {
12+
visible: boolean;
13+
onClose: () => void;
14+
environment: Environment;
15+
}
16+
17+
/**
18+
* Professional modal for contacting Lowcoder team with HubSpot form integration
19+
*/
20+
const ContactLowcoderModal: React.FC<ContactLowcoderModalProps> = ({
21+
visible,
22+
onClose,
23+
environment
24+
}) => {
25+
// Get deploymentId from Redux config provider
26+
const deploymentId = useSelector(getDeploymentId);
27+
const dispatch = useDispatch();
28+
29+
// Fetch deployment ID when modal opens if not already available
30+
useEffect(() => {
31+
if (visible && !deploymentId) {
32+
dispatch(fetchDeploymentIdAction());
33+
}
34+
}, [visible, deploymentId, dispatch]);
35+
36+
return (
37+
<Modal
38+
title={
39+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
40+
<CustomerServiceOutlined style={{ fontSize: '20px', color: '#1890ff' }} />
41+
<span style={{ fontSize: '18px', fontWeight: 600 }}>Contact Lowcoder Team</span>
42+
</div>
43+
}
44+
open={visible}
45+
onCancel={onClose}
46+
footer={null}
47+
width={800}
48+
centered
49+
style={{ top: 20 }}
50+
bodyStyle={{ padding: '24px' }}
51+
>
52+
{/* Environment Context Section */}
53+
<Card
54+
style={{
55+
marginBottom: '24px',
56+
borderRadius: '8px',
57+
background: '#fafafa',
58+
border: '1px solid #f0f0f0'
59+
}}
60+
bodyStyle={{ padding: '16px' }}
61+
>
62+
<Row gutter={[16, 8]} align="middle">
63+
<Col>
64+
<CloudServerOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
65+
</Col>
66+
<Col flex={1}>
67+
<div>
68+
<Text strong style={{ fontSize: '16px', color: '#262626' }}>
69+
Environment: {environment.environmentName || 'Unnamed Environment'}
70+
</Text>
71+
<br />
72+
<Text style={{ fontSize: '14px', color: '#8c8c8c', fontFamily: 'monospace' }}>
73+
Environment ID: {environment.environmentId}
74+
</Text>
75+
<br />
76+
<Text style={{ fontSize: '14px', color: '#8c8c8c', fontFamily: 'monospace' }}>
77+
Deployment ID: {deploymentId || 'Loading...'}
78+
</Text>
79+
</div>
80+
</Col>
81+
</Row>
82+
</Card>
83+
84+
<Divider style={{ margin: '16px 0' }} />
85+
86+
{/* HubSpot Form Integration Section */}
87+
<div style={{ minHeight: '400px', padding: '20px 0' }}>
88+
<Title level={4} style={{ textAlign: 'center', marginBottom: '24px', color: '#262626' }}>
89+
Get in Touch
90+
</Title>
91+
92+
<Text style={{
93+
textAlign: 'center',
94+
display: 'block',
95+
marginBottom: '32px',
96+
fontSize: '16px',
97+
color: '#595959',
98+
lineHeight: '1.6'
99+
}}>
100+
Our team is here to help you resolve licensing issues and get your environment up and running.
101+
</Text>
102+
103+
{/* HubSpot Form Container */}
104+
<div style={{
105+
minHeight: '300px',
106+
display: 'flex',
107+
alignItems: 'center',
108+
justifyContent: 'center',
109+
background: '#fdfdfd',
110+
borderRadius: '8px',
111+
border: '1px solid #f0f0f0'
112+
}}>
113+
{/* HubSpot form will be integrated here */}
114+
<div style={{
115+
textAlign: 'center',
116+
color: '#8c8c8c',
117+
fontSize: '14px'
118+
}}>
119+
<CustomerServiceOutlined style={{ fontSize: '48px', marginBottom: '16px', color: '#d9d9d9' }} />
120+
<div>Contact form will be integrated here</div>
121+
</div>
122+
</div>
123+
124+
{/* Environment data is available for form pre-filling */}
125+
{/* Data available: environment.environmentName, environment.environmentId, deploymentId,
126+
environment.licenseStatus, environment.environmentType, environment.licenseError */}
127+
</div>
128+
</Modal>
129+
);
130+
};
131+
132+
export default ContactLowcoderModal;

‎client/packages/lowcoder/src/pages/setting/environments/components/UnlicensedEnvironmentView.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { Button, Card, Space, Typography, Row, Col } from 'antd';
33
import {
44
CustomerServiceOutlined,
@@ -9,6 +9,7 @@ import {
99
WarningOutlined
1010
} from '@ant-design/icons';
1111
import { Environment } from '../types/environment.types';
12+
import ContactLowcoderModal from './ContactLowcoderModal';
1213
import history from "@lowcoder-ee/util/history";
1314

1415
const { Title, Text } = Typography;
@@ -25,6 +26,8 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
2526
environment,
2627
onEditClick
2728
}) => {
29+
const [isContactModalVisible, setIsContactModalVisible] = useState(false);
30+
2831
const getLicenseIcon = () => {
2932
switch (environment.licenseStatus) {
3033
case 'unlicensed':
@@ -144,6 +147,7 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
144147
type="primary"
145148
size="large"
146149
icon={<CustomerServiceOutlined />}
150+
onClick={() => setIsContactModalVisible(true)}
147151
style={{
148152
width: '100%',
149153
height: '48px',
@@ -154,7 +158,6 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
154158
border: 'none',
155159
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
156160
}}
157-
// onClick will be handled later when modal is ready
158161
>
159162
Contact Lowcoder Team
160163
</Button>
@@ -208,6 +211,13 @@ const UnlicensedEnvironmentView: React.FC<UnlicensedEnvironmentViewProps> = ({
208211
</div>
209212
</Col>
210213
</Row>
214+
215+
{/* Contact Lowcoder Modal */}
216+
<ContactLowcoderModal
217+
visible={isContactModalVisible}
218+
onClose={() => setIsContactModalVisible(false)}
219+
environment={environment}
220+
/>
211221
</div>
212222
);
213223
};

0 commit comments

Comments
 (0)