Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit130b762

Browse files
committed
Add contact modal for unlicense environment
1 parent0204bf3 commit130b762

File tree

2 files changed

+144
-2
lines changed

2 files changed

+144
-2
lines changed
Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
importReact,{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+
interfaceContactLowcoderModalProps{
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+
constContactLowcoderModal:React.FC<ContactLowcoderModalProps>=({
21+
visible,
22+
onClose,
23+
environment
24+
})=>{
25+
// Get deploymentId from Redux config provider
26+
constdeploymentId=useSelector(getDeploymentId);
27+
constdispatch=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+
<divstyle={{display:'flex',alignItems:'center',gap:'12px'}}>
40+
<CustomerServiceOutlinedstyle={{fontSize:'20px',color:'#1890ff'}}/>
41+
<spanstyle={{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+
<Rowgutter={[16,8]}align="middle">
63+
<Col>
64+
<CloudServerOutlinedstyle={{fontSize:'24px',color:'#1890ff'}}/>
65+
</Col>
66+
<Colflex={1}>
67+
<div>
68+
<Textstrongstyle={{fontSize:'16px',color:'#262626'}}>
69+
Environment:{environment.environmentName||'Unnamed Environment'}
70+
</Text>
71+
<br/>
72+
<Textstyle={{fontSize:'14px',color:'#8c8c8c',fontFamily:'monospace'}}>
73+
Environment ID:{environment.environmentId}
74+
</Text>
75+
<br/>
76+
<Textstyle={{fontSize:'14px',color:'#8c8c8c',fontFamily:'monospace'}}>
77+
Deployment ID:{deploymentId||'Loading...'}
78+
</Text>
79+
</div>
80+
</Col>
81+
</Row>
82+
</Card>
83+
84+
<Dividerstyle={{margin:'16px 0'}}/>
85+
86+
{/* HubSpot Form Integration Section */}
87+
<divstyle={{minHeight:'400px',padding:'20px 0'}}>
88+
<Titlelevel={4}style={{textAlign:'center',marginBottom:'24px',color:'#262626'}}>
89+
Get in Touch
90+
</Title>
91+
92+
<Textstyle={{
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+
<divstyle={{
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+
<divstyle={{
115+
textAlign:'center',
116+
color:'#8c8c8c',
117+
fontSize:'14px'
118+
}}>
119+
<CustomerServiceOutlinedstyle={{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+
exportdefaultContactLowcoderModal;

‎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-
importReactfrom'react';
1+
importReact,{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+
importContactLowcoderModalfrom'./ContactLowcoderModal';
1213
importhistoryfrom"@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
constgetLicenseIcon=()=>{
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)
[8]ページ先頭
©2009-2025 Movatter.jp