Better insight into settings updates

src-web/components/Settings/SettingsLicense.tsx

@@ -21,29 +21,27 @@ export function SettingsLicense() {
 
   return (
     <div className="flex flex-col gap-6">
-      {check.data?.type === 'commercial_use' && (
+      {check.data?.type === 'commercial_use' ? (
         <Banner color="success">
           <strong>License active!</strong> Enjoy using Yaak for commercial use.
         </Banner>
-      )}
-      {check.data?.type === 'trialing' && (
-        <Banner color="success">
-          <strong>Your trial ends in {formatDistanceToNow(check.data.end)}</strong>. If you&apos;re
-          using Yaak for commercial use, please purchase a commercial use license.
-        </Banner>
-      )}
-      {check.data?.type === 'personal_use' && (
+      ) : (
         <Banner color="primary" className="flex flex-col gap-2">
-          <h2 className="text-lg font-semibold">Commercial License</h2>
+          {check.data?.type === 'trialing' && (
+            <p>
+              <strong>Your trial ends in {formatDistanceToNow(check.data.end)}.</strong>
+            </p>
+          )}
           <p>
-            A commercial license is required if you use Yaak within a for-profit organization of two
-            or more people.
-          </p>
-          <p>
-            <Link href="https://yaak.app/pricing" className="text-sm">
-              Learn More
-            </Link>
+            A commercial license is required if using Yaak within a for-profit organization of two
+            or more people. This helps support the ongoing development of Yaak and ensures continued
+            growth and improvement.
           </p>
+          <p>If you&#39;re using Yaak for personal use, no action is needed.</p>
+          <p>~ Gregory</p>
+          <Link href="https://yaak.app/pricing" className="text-sm text-text-subtle">
+            Learn More
+          </Link>
         </Banner>
       )}
 
@@ -52,7 +50,13 @@ export function SettingsLicense() {
 
       {check.data?.type === 'commercial_use' ? (
         <HStack space={2}>
-          <Button variant="border" color="secondary" size="sm" onClick={toggleActivateFormVisible}>
+          <Button
+            variant="border"
+            color="secondary"
+            size="sm"
+            onClick={toggleActivateFormVisible}
+            event="license.another"
+          >
             Activate Another License
           </Button>
           <Button
@@ -60,20 +64,27 @@ export function SettingsLicense() {
             size="sm"
             onClick={() => open('https://yaak.app/dashboard')}
             rightSlot={<Icon icon="external_link" />}
+            event="license.support"
           >
             Direct Support
           </Button>
         </HStack>
       ) : (
         <HStack space={2}>
-          <Button color="primary" size="sm" onClick={toggleActivateFormVisible}>
-            Activate License
+          <Button
+            color="primary"
+            size="sm"
+            onClick={toggleActivateFormVisible}
+            event="license.activate"
+          >
+            Activate
           </Button>
           <Button
             color="secondary"
             size="sm"
-            onClick={() => open('https://yaak.app/pricing')}
+            onClick={() => open('https://yaak.app/pricing?ref=app.yaak.desktop')}
             rightSlot={<Icon icon="external_link" />}
+            event="license.purchase"
           >
             Purchase
           </Button>
@@ -98,7 +109,13 @@ export function SettingsLicense() {
             onChange={setKey}
             placeholder="YK1-XXXXX-XXXXX-XXXXX-XXXXX"
           />
-          <Button type="submit" color="primary" size="sm" isLoading={activate.isPending}>
+          <Button
+            type="submit"
+            color="primary"
+            size="sm"
+            isLoading={activate.isPending}
+            event="license.submit"
+          >
             Submit
           </Button>
         </VStack>