Rework licensing flows to be more friendly

src-web/components/Settings/SettingsLicense.tsx

@@ -2,88 +2,80 @@ import { openUrl } from '@tauri-apps/plugin-opener';
 import { useLicense } from '@yaakapp-internal/license';
 import { differenceInDays } from 'date-fns';
 import React, { useState } from 'react';
-import { useLicenseConfirmation } from '../../hooks/useLicenseConfirmation';
 import { useToggle } from '../../hooks/useToggle';
 import { pluralizeCount } from '../../lib/pluralize';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
-import { Checkbox } from '../core/Checkbox';
 import { Icon } from '../core/Icon';
 import { Link } from '../core/Link';
 import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';
+import { LocalImage } from '../LocalImage';
 
 export function SettingsLicense() {
   const { check, activate, deactivate } = useLicense();
   const [key, setKey] = useState<string>('');
   const [activateFormVisible, toggleActivateFormVisible] = useToggle(false);
-  const [licenseDetails, setLicenseDetails] = useLicenseConfirmation();
-  const [checked, setChecked] = useState<boolean>(false);
 
   if (check.isPending) {
     return null;
   }
 
   return (
-    <div className="flex flex-col gap-6 max-w-lg">
+    <div className="flex flex-col gap-6 max-w-xl">
       {check.data?.type === 'commercial_use' ? (
-        <Banner color="success">
-          <strong>License active!</strong> Enjoy using Yaak for commercial use.
-        </Banner>
+        <Banner color="success">Your license is active 🥳</Banner>
       ) : check.data?.type == 'trialing' ? (
         <Banner color="success" className="flex flex-col gap-3 max-w-lg">
           <p className="select-text">
-            You have{' '}
             <strong>
               {pluralizeCount('day', differenceInDays(check.data.end, new Date()))} remaining
             </strong>{' '}
-            on your commercial use trial. Once the trial ends you agree to only use Yaak for
-            personal use until a license is activated.
+            on trial
           </p>
         </Banner>
-      ) : check.data?.type == 'personal_use' && !licenseDetails?.confirmedPersonalUse ? (
+      ) : check.data?.type == 'personal_use' ? (
         <Banner color="success" className="flex flex-col gap-3 max-w-lg">
-          <p className="select-text">
-            Your 30-day trial has ended. Please activate a license or confirm how you&apos;re using
-            Yaak.
-          </p>
-          <form
-            className="flex flex-col gap-3 items-start"
-            onSubmit={async (e) => {
-              e.preventDefault();
-              await setLicenseDetails((v) => ({
-                ...v,
-                confirmedPersonalUse: true,
-              }));
-            }}
-          >
-            <Checkbox
-              checked={checked}
-              onChange={setChecked}
-              title="I am only using Yaak for personal use"
-            />
-            <Button type="submit" disabled={!checked} size="xs" variant="border" color="success">
-              Confirm
-            </Button>
-          </form>
+          <p>Your free trial has ended</p>
         </Banner>
       ) : null}
 
-      <p className="select-text">
-        A commercial license is required if using Yaak within a for-profit organization.{' '}
-        <Link href="https://yaak.app/pricing" className="text-notice">
-          Learn More
-        </Link>
-      </p>
+      {check.data?.type !== 'commercial_use' && (
+        <div className="grid grid-cols-[auto_minmax(0,1fr)] gap-6 items-center my-3 ">
+          <LocalImage src="static/greg.jpeg" className="rounded-full h-20 w-20" />
+          <div className="flex flex-col gap-2">
+            <h2 className="text-lg font-bold">Hey, I&apos;m Greg 👋🏼</h2>
+            <p>
+              Yaak is free for personal projects and learning.{' '}
+              {check.data?.type === 'trialing' ? 'After your trial, a ' : 'A '}
+              license is required for work or commercial use.
+            </p>
+            <p>
+              <Link
+                noUnderline
+                href="https://yaak.app/pricing"
+                className="text-sm text-notice opacity-80 hover:opacity-100"
+              >
+                Learn More
+              </Link>
+            </p>
+          </div>
+        </div>
+      )}
 
       {check.error && <Banner color="danger">{check.error}</Banner>}
       {activate.error && <Banner color="danger">{activate.error}</Banner>}
 
       {check.data?.type === 'commercial_use' ? (
         <HStack space={2}>
-          <Button variant="border" color="secondary" size="sm" onClick={() => {
-            deactivate.mutate();
-          }}>
+          <Button
+            variant="border"
+            color="secondary"
+            size="sm"
+            onClick={() => {
+              deactivate.mutate();
+            }}
+          >
             Deactivate License
           </Button>
           <Button