@kortix/ui 0.14.7 → 0.14.9

package/dist/customize/sections/component/telegram-channel-row.js

@@ -1,20 +1,23 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TelegramChatMock } from './channel-mocks.js';
 /**
- * Telegram as a channel row (the `connectors_v2` feature flag): connect a bot
+ * Telegram as a channel row: connect a bot
  * by its BotFather token, pick who may talk to it, disconnect. The token goes
- * to the API once and never comes back to the browser.
+ * to the API once and never comes back to the browser. The allowed users
+ * dialog is `ChannelAccessPanel`.
  */
 import { Button } from '../../../primitives/button.js';
+import { CountBadge } from '../../../primitives/count-badge.js';
 import { Field, FieldDescription, FieldGroup, FieldTitle } from '../../../primitives/field.js';
 import { Input } from '../../../primitives/input.js';
 import Loading from '../../../primitives/loading.js';
 import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { ChannelDisconnectButton, ChannelRow, } from './channel-row.js';
-import { useConnectTelegram, useDisconnectTelegram, useSetTelegramAllowedUsers, useTelegramInstall, } from '../../../internal/hooks/channels/use-channels-installations.js';
+import { ChannelAccessPanel } from './channel-access-panel.js';
+import { useConnectTelegram, useDisconnectTelegram, useTelegramInstall, } from '../../../internal/hooks/channels/use-channels-installations.js';
 import { useTranslations } from '../../../i18n/index.js';
-import { TelegramLogoIcon } from '@phosphor-icons/react';
 import { useState } from 'react';
 /** "1, 2 3" → ["1","2","3"]; null when any entry is not a number. */
 export function parseTelegramUserIds(raw) {
@@ -23,16 +26,22 @@ export function parseTelegramUserIds(raw) {
 }
 export function TelegramChannelRow({ projectId, canWrite }) {
     const t = useTranslations('hardcodedUi.i18nComplete');
+    const tPages = useTranslations('connectorPages');
     const { data: install } = useTelegramInstall(projectId);
     const disconnect = useDisconnectTelegram();
     const [dialog, setDialog] = useState(null);
-    return (_jsxs(_Fragment, { children: [_jsx(ChannelRow, { icon: _jsx(TelegramLogoIcon, { className: "text-muted-foreground size-5 shrink-0" }), name: "Telegram", connected: Boolean(install), detail: install?.username ? `@${install.username}` : null, pitch: t.raw('text51e6bc656528'), actions: !canWrite ? null : install ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setDialog('users'), children: t.raw('text2c3059c25723') }), _jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelRow, { app: "telegram", name: "Telegram", connected: Boolean(install), detail: install?.username ? `@${install.username}` : null, hero: {
+                    title: tPages('telegramHeroTitle'),
+                    connectedTitle: tPages('channelConnectedTitle', { name: 'Telegram' }),
+                    ...(install ? {} : { lede: tPages('telegramHeroLede') }),
+                    preview: _jsx(TelegramChatMock, {}),
+                }, pitch: t.raw('text51e6bc656528'), actions: !canWrite ? null : install ? (_jsxs(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => setDialog('users'), children: [t.raw('text2c3059c25723'), install.access_request_count ? (_jsx(CountBadge, { count: install.access_request_count, tone: "waiting" })) : null] }), _jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
                                 onSuccess: () => {
                                     done();
                                     successToast(t.raw('textdfea5351a743'));
                                 },
                                 onError: (error) => errorToast(error.message),
-                            }) })] })) : (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setDialog('connect'), children: t.raw('text1a2303ede074') })) }), _jsx(Modal, { open: dialog !== null, onOpenChange: (open) => !open && setDialog(null), children: _jsx(ModalContent, { children: dialog === 'connect' ? (_jsx(TelegramConnectForm, { projectId: projectId, onDone: () => setDialog(null) })) : dialog === 'users' ? (_jsx(TelegramUsersForm, { projectId: projectId, initial: install?.allowed_user_ids ?? [], onDone: () => setDialog(null) })) : null }) })] }));
+                            }) })] })) : (_jsx(Button, { className: "transition-transform active:scale-96", onClick: () => setDialog('connect'), children: t.raw('text1a2303ede074') })) }), _jsx(Modal, { open: dialog !== null, onOpenChange: (open) => !open && setDialog(null), children: _jsx(ModalContent, { children: dialog === 'connect' ? (_jsx(TelegramConnectForm, { projectId: projectId, onDone: () => setDialog(null) })) : dialog === 'users' ? (_jsx(ChannelAccessPanel, { projectId: projectId, platform: "telegram", onDone: () => setDialog(null) })) : null }) })] }));
 }
 function TelegramConnectForm({ projectId, onDone }) {
     const t = useTranslations('hardcodedUi.i18nComplete');
@@ -53,24 +62,6 @@ function TelegramConnectForm({ projectId, onDone }) {
             });
         }, children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t.raw('text00c7991f0490') }), _jsx(ModalDescription, { children: t.raw('texta832efd235a7') })] }), _jsx(ModalBody, { children: _jsxs(FieldGroup, { children: [_jsxs(Field, { children: [_jsx(FieldTitle, { children: t.raw('text5bb9aecca021') }), _jsx(Input, { type: "password", autoComplete: "off", placeholder: "123456789:\u2026", value: token, onChange: (event) => setToken(event.target.value) })] }), _jsx(TelegramUsersField, { value: users, onChange: setUsers, invalid: !ids })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onDone, children: t.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: !token.trim() || !ids || connect.isPending, children: [connect.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t.raw('text1a2303ede074')] })] })] }));
 }
-function TelegramUsersForm({ projectId, initial, onDone, }) {
-    const t = useTranslations('hardcodedUi.i18nComplete');
-    const save = useSetTelegramAllowedUsers();
-    const [users, setUsers] = useState(() => initial.join(', '));
-    const ids = parseTelegramUserIds(users);
-    return (_jsxs("form", { className: "space-y-4", onSubmit: (event) => {
-            event.preventDefault();
-            if (!ids)
-                return;
-            save.mutate({ projectId, userIds: ids }, {
-                onSuccess: () => {
-                    successToast(t.raw('text2f95b1c9ee2b'));
-                    onDone();
-                },
-                onError: (error) => errorToast(error.message),
-            });
-        }, children: [_jsx(ModalHeader, { children: _jsx(ModalTitle, { children: t.raw('text2c3059c25723') }) }), _jsx(ModalBody, { children: _jsx(TelegramUsersField, { value: users, onChange: setUsers, invalid: !ids }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onDone, children: t.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: !ids || save.isPending, children: [save.isPending ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t.raw('text1509f561f241')] })] })] }));
-}
 function TelegramUsersField({ value, onChange, invalid, }) {
     const t = useTranslations('hardcodedUi.i18nComplete');
     return (_jsxs(Field, { children: [_jsx(FieldTitle, { children: t.raw('text71552d197b53') }), _jsx(Input, { inputMode: "numeric", placeholder: "123456789, 987654321", value: value, onChange: (event) => onChange(event.target.value), "aria-invalid": invalid }), _jsx(FieldDescription, { children: invalid ? t.raw('text50fcd9c3c020') : t.raw('text1f7a451d4722') })] }));

package/dist/customize/sections/connectors-view.d.ts

@@ -43,11 +43,6 @@ export declare function ChannelConnectionSection({ projectId, connector, onChang
     onRemoved: () => void;
     canWrite?: boolean;
 }): import("react").JSX.Element;
-export declare function EmailConnectForm({ projectId, connectorSlug, onConnected, }: {
-    projectId: string;
-    connectorSlug: string;
-    onConnected: () => void;
-}): import("react").JSX.Element;
 export declare function SlackConnectForm({ projectId, onConnected, customOnly, }: {
     projectId: string;
     onConnected: () => void;
@@ -62,14 +57,6 @@ export declare function ConnectionSection({ projectId, connector, onChanged, can
      *  it satisfies, not only in a banner at the top of the page. */
     onSetCredential?: () => void;
 }): import("react").JSX.Element;
-export declare function AddAppPanel({ projectId, emailChannelEnabled, discoverEnabled, existingSlugs, onAdded, canWrite, }: {
-    projectId: string;
-    emailChannelEnabled: boolean;
-    discoverEnabled: boolean;
-    existingSlugs: readonly string[];
-    onAdded: (slug?: string) => void;
-    canWrite?: boolean;
-}): import("react").JSX.Element;
 /**
  * The real Slack logo — the single Slack mark used everywhere across the
  * connectors + channels surface (catalogue cards, channel cards, connect flow),
@@ -81,9 +68,8 @@ export declare function AddAppPanel({ projectId, emailChannelEnabled, discoverEn
 export declare function SlackLogo({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-export declare function CustomConnectorForm({ projectId, emailChannelEnabled, onAdded, }: {
+export declare function CustomConnectorForm({ projectId, onAdded, }: {
     projectId: string;
-    emailChannelEnabled: boolean;
     /** The connector exists: open its page. `addAccount` opens "Add account" there. */
     onAdded: (slug: string, options: {
         addAccount: boolean;