Add license handling for expired licenses

2026-01-11 22:40:26 +01:00 · 2025-12-09 13:51:02 -08:00
parent 1d257b365b
commit d35116c494
8 changed files with 290 additions and 115 deletions
--- a/src-web/components/LicenseBadge.tsx
+++ b/src-web/components/LicenseBadge.tsx
@@ -1,22 +1,86 @@
+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 details: Record<
-  LicenseCheckStatus['type'],
-  { label: ReactNode; color: ButtonProps['color'] } | null
-> = {
-  commercial_use: null,
-  invalid_license: { label: 'License Error', color: 'danger' },
-  personal_use: { label: 'Personal Use', color: 'notice' },
-  trialing: { label: 'Commercial Trial', color: 'secondary' },
-};
+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 (
@@ -29,10 +93,15 @@ export function LicenseBadge() {
 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.
+    // Failed to check for license. Probably a network or server error, so just don't show anything.
    return null;
  }

@@ -41,19 +110,30 @@ function LicenseBadgeCmp() {
    return null;
  }

-  // Dismissed license badge
-  if (settings.hideLicenseBadge) {
-    return null;
-  }
-
-  const detail = details[check.data.type];
+  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={() => openSettings.mutate('license')}>
+    <PillButton color={detail.color} onClick={openLicenseDialog}>
      {detail.label}
    </PillButton>
  );
 }
+
+function openLicenseDialog() {
+  openSettings.mutate('license');
+}
--- a/src-web/components/Settings/SettingsLicense.tsx
+++ b/src-web/components/Settings/SettingsLicense.tsx
@@ -1,6 +1,7 @@
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { useLicense } from '@yaakapp-internal/license';
 import { differenceInDays } from 'date-fns';
+import { formatDate } from 'date-fns/format';
 import { useState } from 'react';
 import { useToggle } from '../../hooks/useToggle';
 import { pluralizeCount } from '../../lib/pluralize';
@@ -31,71 +32,120 @@ function SettingsLicenseCmp() {
    return null;
  }

+  const renderBanner = () => {
+    if (!check.data) return null;
+
+    switch (check.data.status) {
+      case 'active':
+        return <Banner color="success">Your license is active 🥳</Banner>;
+
+      case 'trialing':
+        return (
+          <Banner color="info" className="@container flex items-center gap-x-5 max-w-xl">
+            <LocalImage src="static/greg.jpeg" className="hidden @sm:block rounded-full h-14 w-14" />
+            <p className="w-full">
+              <strong>
+                {pluralizeCount('day', differenceInDays(check.data.data.end, new Date()))}
+              </strong>{' '}
+              left to evaluate Yaak for commercial use.
+              <br />
+              <span className="opacity-50">Personal use is always free, forever.</span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href="mailto:support@yaak.app">
+                  Contact Support
+                </Link>
+                <Icon icon="dot" size="sm" color="secondary" />
+                <Link
+                  noUnderline
+                  href={`https://yaak.app/pricing?s=learn&t=${check.data.status}`}
+                >
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case 'personal_use':
+        return (
+          <Banner color="notice" className="@container flex items-center gap-x-5 max-w-xl">
+            <LocalImage src="static/greg.jpeg" className="hidden @sm:block rounded-full h-14 w-14" />
+            <p className="w-full">
+              Your commercial-use trial has ended.
+              <br />
+              <span className="opacity-50">
+                You may continue using Yaak for personal use free, forever.
+                <br />A license is required for commercial use.
+              </span>
+              <Separator className="my-2" />
+              <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
+                <Link noUnderline href="mailto:support@yaak.app">
+                  Contact Support
+                </Link>
+                <Icon icon="dot" size="sm" color="secondary" />
+                <Link
+                  noUnderline
+                  href={`https://yaak.app/pricing?s=learn&t=${check.data.status}`}
+                >
+                  Learn More
+                </Link>
+              </div>
+            </p>
+          </Banner>
+        );
+
+      case 'inactive':
+        return (
+          <Banner color="danger">
+            Your license is invalid. Please <Link href="https://yaak.app/dashboard">Sign In</Link>{' '}
+            for more details
+          </Banner>
+        );
+
+      case 'expired':
+        return (
+          <Banner color="notice">
+            Your license expired{' '}
+            <strong>{formatDate(check.data.data.periodEnd, 'MMMM dd, yyyy')}</strong>. Please{' '}
+            <Link href="https://yaak.app/dashboard">Resubscribe</Link> to continue receiving
+            updates.
+            {check.data.data.changesUrl && (
+              <>
+                <br />
+                <Link href={check.data.data.changesUrl}>What's new in latest builds</Link>
+              </>
+            )}
+          </Banner>
+        );
+
+      case 'past_due':
+        return (
+          <Banner color="danger">
+            <strong>Your payment method needs attention.</strong>
+            <br />
+            To re-activate your license, please{' '}
+            <Link href={check.data.data.billingUrl}>update your billing info</Link>.
+          </Banner>
+        );
+
+      case 'error':
+        return (
+          <Banner color="danger">
+            License check failed: {check.data.data.message} (Code: {check.data.data.code})
+          </Banner>
+        );
+    }
+  };
+
  return (
    <div className="flex flex-col gap-6 max-w-xl">
-      {check.data?.type === 'commercial_use' ? (
-        <Banner color="success">Your license is active 🥳</Banner>
-      ) : check.data?.type === 'trialing' ? (
-        <Banner color="info" className="@container flex items-center gap-x-5 max-w-xl">
-          <LocalImage src="static/greg.jpeg" className="hidden @sm:block rounded-full h-14 w-14" />
-          <p className="w-full">
-            <strong>{pluralizeCount('day', differenceInDays(check.data.end, new Date()))}</strong>{' '}
-            left to evaluate Yaak for commercial use.
-            <br />
-            <span className="opacity-50">Personal use is always free, forever.</span>
-            <Separator className="my-2" />
-            <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
-              <Link noUnderline href="mailto:support@yaak.app">
-                Contact Support
-              </Link>
-              <Icon icon="dot" size="sm" color="secondary" />
-              <Link
-                noUnderline
-                href={`https://yaak.app/pricing?s=learn&t=${check.data?.type ?? ''}`}
-              >
-                Learn More
-              </Link>
-            </div>
-          </p>
-        </Banner>
-      ) : check.data?.type === 'personal_use' ? (
-        <Banner color="notice" className="@container flex items-center gap-x-5 max-w-xl">
-          <LocalImage src="static/greg.jpeg" className="hidden @sm:block rounded-full h-14 w-14" />
-          <p className="w-full">
-            Your commercial-use trial has ended.
-            <br />
-            <span className="opacity-50">
-              You may continue using Yaak for personal use free, forever.
-              <br />A license is required for commercial use.
-            </span>
-            <Separator className="my-2" />
-            <div className="flex flex-wrap items-center gap-x-2 text-sm text-notice">
-              <Link noUnderline href="mailto:support@yaak.app">
-                Contact Support
-              </Link>
-              <Icon icon="dot" size="sm" color="secondary" />
-              <Link
-                noUnderline
-                href={`https://yaak.app/pricing?s=learn&t=${check.data?.type ?? ''}`}
-              >
-                Learn More
-              </Link>
-            </div>
-          </p>
-        </Banner>
-      ) : null}
+      {renderBanner()}

      {check.error && <Banner color="danger">{check.error}</Banner>}
      {activate.error && <Banner color="danger">{activate.error}</Banner>}

-      {check.data?.type === 'invalid_license' && (
-        <Banner color="danger">
-          Your license is invalid. Please <Link href="https://yaak.app/dashboard">Sign In</Link> for
-          more details
-        </Banner>
-      )}
-
-      {check.data?.type === 'commercial_use' ? (
+      {check.data?.status === 'active' ? (
        <HStack space={2}>
          <Button variant="border" color="secondary" size="sm" onClick={() => deactivate.mutate()}>
            Deactivate License
@@ -120,7 +170,7 @@ function SettingsLicenseCmp() {
            rightSlot={<Icon icon="external_link" />}
            onClick={() =>
              openUrl(
-                `https://yaak.app/pricing?s=purchase&ref=app.yaak.desktop&t=${check.data?.type ?? ''}`,
+                `https://yaak.app/pricing?s=purchase&ref=app.yaak.desktop&t=${check.data?.status ?? ''}`,
              )
            }
          >
--- a/src-web/components/WorkspaceHeader.tsx
+++ b/src-web/components/WorkspaceHeader.tsx
@@ -28,7 +28,10 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
  const workspace = useAtomValue(activeWorkspaceAtom);
  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
  const showEncryptionSetup =
-    workspace?.encryptionKeyChallenge != null && workspaceMeta?.encryptionKey == null;
+    workspace != null &&
+    workspaceMeta != null &&
+    workspace.encryptionKeyChallenge != null &&
+    workspaceMeta.encryptionKey == null;

  return (
    <div
--- a/src-web/components/core/Icon.tsx
+++ b/src-web/components/core/Icon.tsx
@@ -1,6 +1,7 @@
 import type { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import {
+  AlarmClockIcon,
  AlertTriangleIcon,
  ArchiveIcon,
  ArrowBigDownDashIcon,
@@ -67,6 +68,7 @@ import {
  FolderSymlinkIcon,
  FolderSyncIcon,
  FolderUpIcon,
+  GiftIcon,
  GitBranchIcon,
  GitBranchPlusIcon,
  GitCommitIcon,
@@ -129,6 +131,7 @@ import type { CSSProperties, HTMLAttributes } from 'react';
 import { memo } from 'react';

 const icons = {
+  alarm_clock: AlarmClockIcon,
  alert_triangle: AlertTriangleIcon,
  archive: ArchiveIcon,
  arrow_big_down_dash: ArrowBigDownDashIcon,
@@ -194,6 +197,7 @@ const icons = {
  folder_symlink: FolderSymlinkIcon,
  folder_sync: FolderSyncIcon,
  folder_up: FolderUpIcon,
+  gift: GiftIcon,
  git_branch: GitBranchIcon,
  git_branch_plus: GitBranchPlusIcon,
  git_commit: GitCommitIcon,