✨ feat(webchat): добавить раздел данных с сайта

apps/internal-ui/src/features/integrations/WebIntegrationPage.tsx

@@ -2,19 +2,20 @@ import { useState } from "react";
 import "../support-portals/styles-detail.css";
 import "../support-portals/styles-settings.css";
 
-import { t } from "../../i18n";
+import { fmt, t } from "../../i18n";
 import { SectionMenu, type SectionMenuItem } from "../../shared/SectionMenu";
 import { EmptyState, LoadingState } from "../../shared/ui";
 import { DeleteIntegrationDialog } from "./DeleteIntegrationDialog";
 import { WebIntegrationBasics } from "./WebIntegrationBasics";
 import { WebIntegrationHeader } from "./WebIntegrationHeader";
 import { useWebIntegration } from "./useWebIntegration";
+import { SiteFieldsSection } from "./site-fields/SiteFieldsSection";
 
 type Section = "basics" | "fields" | "form" | "look" | "danger";
 
 const sections: SectionMenuItem<Section>[] = [
   { key: "basics", label: t("portals.basics"), icon: "settings" },
-  { key: "fields", label: t("settings.site_data"), icon: "code", disabled: true },
+  { key: "fields", label: t("settings.site_data"), icon: "code" },
   { key: "form", label: t("settings.pre_chat_form"), icon: "doc", disabled: true },
   { key: "look", label: t("common.appearance"), icon: "paint", disabled: true, divider: true },
   { key: "danger", label: t("settings.delete_connection"), icon: "trash", danger: true },
@@ -27,6 +28,8 @@ export function WebIntegrationPage({ integrationId, onOpenSettings, onBack }: {
 }) {
   const { integration, loading, failed, setIntegration } = useWebIntegration(integrationId);
   const [confirmingDelete, setConfirmingDelete] = useState(false);
+  const [section, setSection] = useState<Section>("basics");
+  const [fieldCount, setFieldCount] = useState<number>();
 
   if (loading) return <LoadingState />;
   if (failed) return <EmptyState title={t("settings.could_not_load_integrations")} />;
@@ -37,18 +40,21 @@ export function WebIntegrationPage({ integrationId, onOpenSettings, onBack }: {
       <WebIntegrationHeader integration={integration} onOpenSettings={onOpenSettings} onBack={onBack} />
       <div className="portal-settings-layout">
         <SectionMenu
-          items={sections}
-          activeKey="basics"
+          items={sections.map((item) => item.key === "fields" ? { ...item, hint: { text: fmt.number(fieldCount ?? integration.config.fields?.length ?? 0) } } : item)}
+          activeKey={section}
           note={t("settings.web_changes_apply_after_save")}
-          onSelect={(section) => { if (section === "danger") setConfirmingDelete(true); }}
+          onSelect={(next) => { if (next === "danger") setConfirmingDelete(true); else setSection(next); }}
         />
         <div className="portal-settings-content">
-          <div className="portal-settings-inner">
+          <div className="portal-settings-inner" hidden={section !== "basics"}>
             <div className="portal-settings-heading">
               <h3>{t("portals.basics")}</h3>
             </div>
             <WebIntegrationBasics key={integration.id} integration={integration} onSaved={setIntegration} />
           </div>
+          <div hidden={section !== "fields"}>
+            <SiteFieldsSection key={integration.id} integration={integration} onSaved={setIntegration} onCount={setFieldCount} />
+          </div>
         </div>
       </div>
       {confirmingDelete && <DeleteIntegrationDialog integration={integration} onClose={() => setConfirmingDelete(false)} onDeleted={onBack} />}