signal-desktop/ts/components/WarningIdlePrimaryDeviceDialog.tsx

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React from 'react';

import {
  LeftPaneDialog,
  LeftPaneDialogIcon,
  LeftPaneDialogIconBackground,
} from './LeftPaneDialog';
import { WidthBreakpoint } from './_util';
import type { LocalizerType } from '../types/I18N';
import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser';

export type Props = {
  containerWidthBreakpoint: WidthBreakpoint;
  i18n: LocalizerType;
};

const SUPPORT_PAGE =
  'https://support.signal.org/hc/articles/9021007554074-Open-Signal-on-your-phone-to-keep-your-account-active';

export function WarningIdlePrimaryDeviceDialog({
  containerWidthBreakpoint,
  i18n,
  handleClose,
}: Props & { handleClose?: VoidFunction }): JSX.Element {
  return (
    <LeftPaneDialog
      containerWidthBreakpoint={containerWidthBreakpoint}
      type="info"
      icon={
        <LeftPaneDialogIconBackground type="warning">
          <LeftPaneDialogIcon type="error" />
        </LeftPaneDialogIconBackground>
      }
      {...(containerWidthBreakpoint === WidthBreakpoint.Narrow
        ? {
            onClick: () => openLinkInWebBrowser(SUPPORT_PAGE),
            clickLabel: i18n('icu:IdlePrimaryDevice__learnMore'),
            hasAction: false,
          }
        : { hasAction: false })}
      {...(handleClose == null
        ? { hasXButton: false }
        : {
            hasXButton: true,
            onClose: handleClose,
            closeLabel: i18n('icu:close'),
          })}
    >
      {i18n('icu:IdlePrimaryDevice__body')}
      {containerWidthBreakpoint !== WidthBreakpoint.Narrow ? (
        <div>
          <a href={SUPPORT_PAGE} rel="noreferrer" target="_blank">
            {i18n('icu:IdlePrimaryDevice__learnMore')}
          </a>
        </div>
      ) : null}
    </LeftPaneDialog>
  );
}