Environments Preview Page update

Author: FalkWolsky

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2538,6 +2538,8 @@ export const en = {
     "EnvironmentsIntro1": "Lowcoder Environments allow you to separate your Dev, Test, and Prod stages cleanly and safely.",
     "EnvironmentsIntro2": "Enterprise teams benefit from structured release workflows, approval processes, and version stability across stages.",
     "EnvironmentsIntro3": "With the Environments feature, admins can control what gets deployed, when, and where — all from a single interface.",
+    "yourDeploymentID" : "Your Deployment ID",
+    "EnvironmentsFeaturePreviewTitle" : "Environments & Deployment in action",
 
     "EnvironmentsUseCasesTitle": "Why Use Environments?",
     "EnvironmentsUseCase1": "Prevent unintended changes in production by testing apps in dedicated Dev or QA environments.",

client/packages/lowcoder/src/pages/setting/environments/index.tsx

@@ -8,6 +8,7 @@ import { trans } from "i18n";
 import { useState } from "react";
 import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
 import { HubspotModal } from "../hubspotModal";
+import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
 
 const { Paragraph, Text } = Typography;
 
@@ -38,6 +39,7 @@ export const Environments = () => {
 const EnvironmentsPromo = () => {
   const [modalOpen, setModalOpen] = useState(false);
   const user = useSelector(getUser);
+  const deploymentId = useSelector(getDeploymentId);
 
   return (
     <Level1SettingPageContent>
@@ -70,6 +72,34 @@ const EnvironmentsPromo = () => {
         </Card>
       </StyledSection>
 
+      <StyledSection>
+        <Card title={trans("enterprise.yourDeploymentID")}>
+          <Paragraph><h3>{deploymentId}</h3></Paragraph>
+        </Card>
+      </StyledSection>
+
+      <StyledSection>
+        <Card title={trans("enterprise.EnvironmentsFeaturePreviewTitle")}>
+          <Row gutter={[24, 24]}>
+            <Col span={8}>
+              <div className="image-placeholder">
+                <Text type="secondary">{trans("enterprise.ScreenshotPlaceholder1")}</Text>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div className="image-placeholder">
+                <Text type="secondary">{trans("enterprise.ScreenshotPlaceholder2")}</Text>
+              </div>
+            </Col>
+            <Col span={8}>
+              <div className="image-placeholder">
+                <Text type="secondary">{trans("enterprise.ScreenshotPlaceholder3")}</Text>
+              </div>
+            </Col>
+          </Row>
+        </Card>
+      </StyledSection>
+
       <StyledSection>
         <Card title={trans("enterprise.PricingTitle")}>
           <Paragraph>{trans("enterprise.PricingIntro")}</Paragraph>