yaak-mountain-loop/src-web/components/LicenseBadge.tsx

import { openUrl } from '@tauri-apps/plugin-opener';
import type { LicenseCheckStatus } from '@yaakapp-internal/license';
import { useLicense } from '@yaakapp-internal/license';
import { settingsAtom } from '@yaakapp-internal/models';
import { differenceInCalendarDays } from 'date-fns';
import { formatDate } from 'date-fns/format';
import { useAtomValue } from 'jotai';
import type { ReactNode } from 'react';
import { openSettings } from '../commands/openSettings';
import { atomWithKVStorage } from '../lib/atoms/atomWithKVStorage';
import { jotaiStore } from '../lib/jotai';
import { CargoFeature } from './CargoFeature';
import type { ButtonProps } from './core/Button';
import { Dropdown, type DropdownItem } from './core/Dropdown';
import { Icon } from './core/Icon';
import { PillButton } from './core/PillButton';

const dismissedAtom = atomWithKVStorage<string | null>('dismissed_license_expired', null);

function getDetail(
  data: LicenseCheckStatus,
  dismissedExpired: string | null,
): { label: ReactNode; color: ButtonProps['color']; options?: DropdownItem[] } | null | undefined {
  const dismissedAt = dismissedExpired ? new Date(dismissedExpired).getTime() : null;

  switch (data.status) {
    case 'active':
      return null;
    case 'personal_use':
      return { label: 'Personal Use', color: 'notice' };
    case 'trialing':
      return { label: 'Commercial Trial', color: 'secondary' };
    case 'error':
      return { label: 'Error', color: 'danger' };
    case 'inactive':
      return { label: 'Personal Use', color: 'notice' };
    case 'past_due':
      return { label: 'Past Due', color: 'danger' };
    case 'expired':
      // Don't show the expired message if it's been less than 14 days since the last dismissal
      if (dismissedAt && differenceInCalendarDays(new Date(), dismissedAt) < 14) {
        return null;
      }

      return {
        color: 'notice',
        label: data.data.changes > 0 ? 'Updates Paused' : 'License Expired',
        options: [
          {
            label: `${data.data.changes} New Updates`,
            color: 'success',
            leftSlot: <Icon icon="gift" />,
            rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
            hidden: data.data.changes === 0 || data.data.changesUrl == null,
            onSelect: () => openUrl(data.data.changesUrl ?? ''),
          },
          {
            type: 'separator',
            label: `License expired ${formatDate(data.data.periodEnd, 'MMM dd, yyyy')}`,
          },
          {
            label: <div className="min-w-[12rem]">Renew License</div>,
            leftSlot: <Icon icon="refresh" />,
            rightSlot: <Icon icon="external_link" size="sm" className="opacity-disabled" />,
            hidden: data.data.changesUrl == null,
            onSelect: () => openUrl(data.data.billingUrl),
          },
          {
            label: 'Enter License Key',
            leftSlot: <Icon icon="key_round" />,
            hidden: data.data.changesUrl == null,
            onSelect: openLicenseDialog,
          },
          { type: 'separator' },
          {
            label: <span className="text-text-subtle">Remind me Later</span>,
            leftSlot: <Icon icon="alarm_clock" className="text-text-subtle" />,
            onSelect: () => jotaiStore.set(dismissedAtom, new Date().toISOString()),
          },
        ],
      };
  }
}

export function LicenseBadge() {
  return (
    <CargoFeature feature="license">
      <LicenseBadgeCmp />
    </CargoFeature>
  );
}

function LicenseBadgeCmp() {
  const { check } = useLicense();
  const settings = useAtomValue(settingsAtom);
  const dismissed = useAtomValue(dismissedAtom);

  // Dismissed license badge
  if (settings.hideLicenseBadge) {
    return null;
  }

  if (check.error) {
    // Failed to check for license. Probably a network or server error, so just don't show anything.
    return null;
  }

  // Hasn't loaded yet
  if (check.data == null) {
    return null;
  }

  const detail = getDetail(check.data, dismissed);
  if (detail == null) {
    return null;
  }

  if (detail.options && detail.options.length > 0) {
    return (
      <Dropdown items={detail.options}>
        <PillButton color={detail.color}>
          <div className="flex items-center gap-0.5">
            {detail.label} <Icon icon="chevron_down" className="opacity-60" />
          </div>
        </PillButton>
      </Dropdown>
    );
  }

  return (
    <PillButton color={detail.color} onClick={openLicenseDialog}>
      {detail.label}
    </PillButton>
  );
}

function openLicenseDialog() {
  openSettings.mutate('license');
}