@topconsultnpm/sdkui-react 6.22.0-dev2.8 → 6.22.0-dev3.2

package/lib/helper/TMAppUpdatedModal.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { useDeviceType, TMModal } from '../components';
+import { calcResponsiveSizes, WHATS_NEWS_LINK_URL } from './helpers';
+import { SDKUI_Globals } from './SDKUI_Globals';
+import { SDKUI_Localizator } from './SDKUI_Localizator';
+import { IconUpdate, IconOpenInNew } from './TMIcons';
+import { getAppModuleButtonColors } from './TMUtils';
+const Content = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #ffffff;
+`;
+const Header = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    padding: 32px 30px 26px 30px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
+    color: #ffffff;
+    text-align: center;
+`;
+const HeaderIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 68px;
+    height: 68px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+`;
+const HeaderTitle = styled.h2 `
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+`;
+const VersionBadge = styled.span `
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background-color: rgba(255, 255, 255, 0.22);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+`;
+const Body = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 26px 30px 22px 30px;
+    text-align: center;
+`;
+const Message = styled.p `
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #242424;
+`;
+const SubMessage = styled.p `
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b6b6b;
+`;
+const Footer = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 0 30px 28px 30px;
+`;
+const BaseButton = styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 150px;
+    padding: 10px 18px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+`;
+const PrimaryButton = styled(BaseButton) `
+    border: 1px solid ${({ $base }) => $base};
+    background-color: ${({ $base }) => $base};
+    color: #ffffff;
+
+    &:hover {
+        background-color: ${({ $hover }) => $hover};
+        border-color: ${({ $hover }) => $hover};
+        box-shadow: 0 2px 8px ${({ $shadow }) => $shadow};
+    }
+`;
+const SecondaryButton = styled(BaseButton) `
+    border: 1px solid #d5d5d5;
+    background-color: #ffffff;
+    color: #444444;
+
+    &:hover {
+        background-color: #f3f3f3;
+        border-color: #bdbdbd;
+    }
+`;
+export const TMAppUpdatedModal = () => {
+    const deviceType = useDeviceType();
+    const currentVersion = SDK_Globals.appVersion ?? '';
+    const appModuleID = SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER;
+    const appModuleColors = useMemo(() => getAppModuleButtonColors(appModuleID), [appModuleID]);
+    const [previousVersion] = useState(() => SDKUI_Globals.userSettings.lastSeenAppVersion ?? '');
+    const [isOpen, setIsOpen] = useState(() => currentVersion !== '' && previousVersion !== currentVersion);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        SDKUI_Globals.userSettings.lastSeenAppVersion = currentVersion;
+    }, [isOpen, currentVersion]);
+    const onClose = () => { setIsOpen(false); };
+    if (!isOpen)
+        return null;
+    return (_jsx(TMModal, { width: calcResponsiveSizes(deviceType, '520px', '520px', '95%'), height: 'auto', showHeader: false, resizable: false, onClose: onClose, children: _jsxs(Content, { children: [_jsxs(Header, { $backgroundColor: appModuleColors.base, children: [_jsx(HeaderIcon, { children: _jsx(IconUpdate, { fontSize: 34 }) }), _jsx(HeaderTitle, { children: SDKUI_Localizator.AppUpdatedTitle }), _jsx(VersionBadge, { children: `${SDK_Globals.appModule} ${currentVersion}` })] }), _jsxs(Body, { children: [_jsx(Message, { children: previousVersion
+                                ? SDKUI_Localizator.AppUpdatedMessageFromTo.replaceParams(previousVersion, currentVersion)
+                                : SDKUI_Localizator.AppUpdatedMessage.replaceParams(currentVersion) }), _jsx(SubMessage, { children: SDKUI_Localizator.AppUpdatedSubMessage })] }), _jsxs(Footer, { children: [_jsxs(PrimaryButton, { $base: appModuleColors.base, $hover: appModuleColors.hover, $shadow: appModuleColors.shadow, onClick: () => window.open(WHATS_NEWS_LINK_URL, '_blank', 'noopener,noreferrer'), children: [_jsx(IconOpenInNew, { fontSize: 18 }), SDKUI_Localizator.DiscoverWhatsNew] }), _jsx(SecondaryButton, { onClick: onClose, children: SDKUI_Localizator.Close })] })] }) }));
+};

package/lib/helper/TMCommandsContextMenu.d.ts

@@ -12,5 +12,5 @@ interface TMCommandsContextMenuProps {
     trigger?: 'right' | 'left';
     children?: React.ReactNode;
 }
-export declare const TMCommandsContextMenu: React.MemoExoticComponent<({ target, menuItems, id, showEvent, onHiding, trigger, children }: TMCommandsContextMenuProps) => React.JSX.Element>;
+export declare const TMCommandsContextMenu: React.MemoExoticComponent<({ target, menuItems, id, showEvent, onHiding, trigger, children }: TMCommandsContextMenuProps) => import("react/jsx-runtime").JSX.Element>;
 export {};