Better license flows

src-web/components/LicenseBadge.tsx

@@ -1,14 +1,14 @@
-import { openUrl } from '@tauri-apps/plugin-opener';
 import type { LicenseCheckStatus } from '@yaakapp-internal/license';
 import { useLicense } from '@yaakapp-internal/license';
 import type { ReactNode } from 'react';
+import { openSettings } from '../commands/openSettings';
 import { appInfo } from '../hooks/useAppInfo';
+import { useLicenseConfirmation } from '../hooks/useLicenseConfirmation';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import { Icon } from './core/Icon';
 import { HStack } from './core/Stacks';
-import { openSettings } from '../commands/openSettings';
-import {SettingsTab} from "./Settings/SettingsTab";
+import { SettingsTab } from './Settings/SettingsTab';
 
 const details: Record<
   LicenseCheckStatus['type'] | 'dev' | 'beta',
@@ -26,22 +26,30 @@ const details: Record<
   dev: { label: 'Develop', color: 'secondary' },
   commercial_use: null,
   invalid_license: { label: 'License Error', color: 'danger' },
-  personal_use: { label: 'Personal Use', color: 'primary' },
-  trialing: { label: 'Personal Use', color: 'primary' },
+  personal_use: { label: 'Personal Use', color: 'success' },
+  trialing: { label: 'Active Trial', color: 'success' },
 };
 
 export function LicenseBadge() {
   const { check } = useLicense();
+  const [licenseDetails, setLicenseDetails] = useLicenseConfirmation();
 
-  if (check.data == null) {
+  // Hasn't loaded yet
+  if (licenseDetails == null || check.data == null) {
     return null;
   }
 
-  const checkType = appInfo.version.includes('beta')
-    ? 'beta'
-    : appInfo.isDev
-      ? 'dev'
-      : check.data.type;
+  // User has confirmed they are using Yaak for personal use only, so hide badge
+  if (licenseDetails.confirmedPersonalUse) {
+    return null;
+  }
+
+  // User is trialing but has already seen the message, so hide badge
+  if (check.data.type === 'trialing' && licenseDetails.hasDismissedTrial) {
+    return null;
+  }
+
+  const checkType = appInfo.version.includes('beta') ? 'beta' : check.data.type;
   const detail = details[checkType];
   if (detail == null) {
     return null;
@@ -53,11 +61,13 @@ export function LicenseBadge() {
       variant="border"
       className="!rounded-full mx-1"
       onClick={async () => {
-        if (checkType === 'beta') {
-          await openUrl('https://feedback.yaak.app');
-        } else {
-          openSettings.mutate(SettingsTab.License);
+        if (check.data.type === 'trialing') {
+          await setLicenseDetails((v) => ({
+            ...v,
+            dismissedTrial: true,
+          }));
         }
+        openSettings.mutate(SettingsTab.License);
       }}
       color={detail.color}
       event={{ id: 'license-badge', status: check.data.type }}