Refactor premium activation

Author: wong2

src/app/components/Sidebar/index.tsx

@@ -14,7 +14,7 @@ import minimalLogo from '~/assets/minimal-logo.svg'
 import { cx } from '~/utils'
 import { useEnabledBots } from '~app/hooks/use-enabled-bots'
 import { showDiscountModalAtom, sidebarCollapsedAtom } from '~app/state'
-import { hasLicenseInstance } from '~services/premium'
+import { getPremiumActivation } from '~services/premium'
 import * as api from '~services/server-api'
 import { getAppOpenTimes, getPremiumModalOpenTimes } from '~services/storage/open-times'
 import CommandBar from '../CommandBar'
@@ -44,7 +44,7 @@ function Sidebar() {
 
   useEffect(() => {
     Promise.all([getAppOpenTimes(), getPremiumModalOpenTimes()]).then(async ([appOpenTimes, premiumModalOpenTimes]) => {
-      if (hasLicenseInstance()) {
+      if (getPremiumActivation()) {
         return
       }
       const { show } = await api.checkDiscount({ appOpenTimes, premiumModalOpenTimes })

src/app/hooks/use-premium.ts

@@ -1,25 +1,16 @@
-import { useAtom } from 'jotai'
 import { FetchError } from 'ofetch'
 import useSWR from 'swr'
-import { licenseKeyAtom } from '~app/state'
-import { clearLicenseInstances, getLicenseInstanceId, validateLicenseKey } from '~services/premium'
+import { getPremiumActivation, validatePremium } from '~services/premium'
 
 export function usePremium() {
-  const [licenseKey, setLicenseKey] = useAtom(licenseKeyAtom)
-
-  const activateQuery = useSWR<{ valid: true } | { valid: false; error?: string }>(
-    `license:${licenseKey}`,
+  const validationQuery = useSWR<{ valid: true } | { valid: false; error?: string }>(
+    'premium-validation',
     async () => {
-      if (!licenseKey) {
-        return { valid: false }
-      }
       try {
-        return await validateLicenseKey(licenseKey)
+        return await validatePremium()
       } catch (err) {
         if (err instanceof FetchError) {
           if (err.status === 404) {
-            clearLicenseInstances()
-            setLicenseKey('')
             return { valid: false }
           }
           if (err.status === 400) {
@@ -30,15 +21,15 @@ export function usePremium() {
       }
     },
     {
-      fallbackData: getLicenseInstanceId(licenseKey) ? { valid: true } : undefined,
+      fallbackData: getPremiumActivation() ? { valid: true } : undefined,
       revalidateOnFocus: false,
       dedupingInterval: 10 * 60 * 1000,
     },
   )
 
   return {
-    activated: activateQuery.data?.valid,
-    isLoading: activateQuery.isLoading,
-    error: activateQuery.data?.valid === true ? undefined : activateQuery.data?.error,
+    activated: validationQuery.data?.valid,
+    isLoading: validationQuery.isLoading,
+    error: validationQuery.data?.valid === true ? undefined : validationQuery.data?.error,
   }
 }

src/app/pages/PremiumPage.tsx

@@ -1,48 +1,57 @@
 import { useSearch } from '@tanstack/react-router'
-import ConfettiExplosion from 'react-confetti-explosion'
-import { useAtom } from 'jotai'
+import { get as getPath } from 'lodash-es'
 import { useCallback, useState } from 'react'
+import ConfettiExplosion from 'react-confetti-explosion'
 import { Toaster } from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import Button from '~app/components/Button'
 import DiscountBadge from '~app/components/Premium/DiscountBadge'
 import FeatureList from '~app/components/Premium/FeatureList'
 import PriceSection from '~app/components/Premium/PriceSection'
 import { usePremium } from '~app/hooks/use-premium'
+import { useDiscountCode } from '~app/hooks/use-purchase-info'
 import { trackEvent } from '~app/plausible'
 import { premiumRoute } from '~app/router'
-import { licenseKeyAtom } from '~app/state'
-import { deactivateLicenseKey } from '~services/premium'
-import { useDiscountCode } from '~app/hooks/use-purchase-info'
+import { activatePremium, deactivatePremium } from '~services/premium'
 
 function PremiumPage() {
   const { t } = useTranslation()
-  const [licenseKey, setLicenseKey] = useAtom(licenseKeyAtom)
   const premiumState = usePremium()
+  const [activating, setActivating] = useState(false)
   const [deactivating, setDeactivating] = useState(false)
+  const [activationError, setActivationError] = useState('')
   const { source } = useSearch({ from: premiumRoute.id })
   const [isExploding, setIsExploding] = useState(false)
   const discountCode = useDiscountCode()
 
-  const activateLicense = useCallback(() => {
+  const activate = useCallback(async () => {
     const key = window.prompt('Enter your license key', '')
-    if (key) {
-      setLicenseKey(key)
+    if (!key) {
+      return
     }
-  }, [setLicenseKey])
-
-  const deactivateLicense = useCallback(async () => {
-    if (!licenseKey) {
+    setActivationError('')
+    setActivating(true)
+    trackEvent('activate_license')
+    try {
+      await activatePremium(key)
+    } catch (err) {
+      console.error('activation', err)
+      setActivationError(getPath(err, 'data.error') || 'Activation failed')
+      setActivating(false)
       return
     }
+    setTimeout(() => location.reload(), 500)
+  }, [])
+
+  const deactivateLicense = useCallback(async () => {
     if (!window.confirm('Are you sure to deactivate this device?')) {
       return
     }
     setDeactivating(true)
-    await deactivateLicenseKey(licenseKey)
-    setLicenseKey('')
+    trackEvent('deactivate_license')
+    await deactivatePremium()
     setTimeout(() => location.reload(), 500)
-  }, [licenseKey, setLicenseKey])
+  }, [])
 
   return (
     <div className="flex flex-col bg-primary-background dark:text-primary-text rounded-[20px] h-full p-[50px] overflow-y-auto">
@@ -86,8 +95,8 @@ function PremiumPage() {
               text={t('Activate license')}
               color="flat"
               className="w-fit !py-2 rounded-lg"
-              onClick={activateLicense}
-              isLoading={premiumState.isLoading}
+              onClick={activate}
+              isLoading={activating || premiumState.isLoading}
             />
           </>
         )}
@@ -100,7 +109,9 @@ function PremiumPage() {
           {t('Manage order and devices')}
         </a>
       </div>
-      {!!premiumState.error && <span className="mt-3 text-red-500 font-medium">{premiumState.error}</span>}
+      {!!(premiumState.error || activationError) && (
+        <span className="mt-3 text-red-500 font-medium">{premiumState.error || activationError}</span>
+      )}
       <Toaster position="top-right" />
       {isExploding && <ConfettiExplosion duration={3000} onComplete={() => setIsExploding(false)} />}
     </div>

src/services/premium.ts

@@ -1,40 +1,58 @@
 import { getBrowser, getOS } from '~app/utils/navigator'
-import { activateLicense, deactivateLicense, validateLicense } from './lemonsqueezy'
+import * as lemonsqueezy from './lemonsqueezy'
+
+interface PremiumActivation {
+  licenseKey: string
+  instanceId: string
+}
 
 function getInstanceName() {
   return `${getOS()} / ${getBrowser()}`
 }
 
-export async function validateLicenseKey(key: string) {
-  let instanceId = localStorage.getItem(`license_instance_id:${key}`)
-  if (!instanceId) {
-    instanceId = await activateLicense(key, getInstanceName())
-    localStorage.setItem(`license_instance_id:${key}`, instanceId)
-  }
-  return validateLicense(key, instanceId)
+export async function activatePremium(licenseKey: string): Promise<PremiumActivation> {
+  const instanceId = await lemonsqueezy.activateLicense(licenseKey, getInstanceName())
+  const data = { licenseKey, instanceId }
+  localStorage.setItem('premium', JSON.stringify(data))
+  return data
 }
 
-export async function deactivateLicenseKey(key: string) {
-  const instanceId = localStorage.getItem(`license_instance_id:${key}`)
-  if (!instanceId) {
-    return
+export async function validatePremium() {
+  const activation = getPremiumActivation()
+  if (!activation) {
+    return { valid: false }
   }
-  await deactivateLicense(key, instanceId)
-  localStorage.removeItem(`license_instance_id:${key}`)
+  return lemonsqueezy.validateLicense(activation.licenseKey, activation.instanceId)
 }
 
-export function getLicenseInstanceId(key: string) {
-  return localStorage.getItem(`license_instance_id:${key}`)
-}
-
-export function clearLicenseInstances() {
-  for (const k of Object.keys(localStorage)) {
-    if (k.startsWith('license_instance_id:')) {
-      localStorage.removeItem(k)
-    }
+export async function deactivatePremium() {
+  const activation = getPremiumActivation()
+  if (!activation) {
+    return
   }
+  await lemonsqueezy.deactivateLicense(activation.licenseKey, activation.instanceId)
+  localStorage.removeItem('premium')
 }
 
-export function hasLicenseInstance() {
-  return Object.keys(localStorage).some((k) => k.startsWith('license_instance_id:'))
+export function getPremiumActivation(): PremiumActivation | null {
+  const data = localStorage.getItem('premium')
+  if (data) {
+    return JSON.parse(data)
+  }
+  // Migrate old storage
+  const key = localStorage.getItem('licenseKey')
+  if (!key) {
+    return null
+  }
+  const licenseKey: string = JSON.parse(key)
+  const instanceId = localStorage.getItem(`license_instance_id:${licenseKey}`)
+  if (!instanceId) {
+    localStorage.removeItem('licenseKey')
+    return null
+  }
+  const d = { licenseKey, instanceId }
+  localStorage.setItem('premium', JSON.stringify(d))
+  localStorage.removeItem('licenseKey')
+  localStorage.removeItem(`license_instance_id:${licenseKey}`)
+  return d
 }