refactor(web): use asterisk icon for upgrade indicator (#1318)

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -1,14 +1,16 @@
 import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
 import { FunctionComponent, useCallback, useRef } from 'react'
 import Icon from '@/Components/Icon/Icon'
-import { PremiumIllustration } from '@standardnotes/icons'
 import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
+import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
 
 type Props = {
   application: WebApplication
   featureName: string
   hasSubscription: boolean
+  hasAccount: boolean
   onClose: () => void
   showModal: boolean
 }
@@ -17,6 +19,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   application,
   featureName,
   hasSubscription,
+  hasAccount,
   onClose,
   showModal,
 }) => {
@@ -25,10 +28,12 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   const handleClick = useCallback(() => {
     if (hasSubscription) {
       openSubscriptionDashboard(application)
+    } else if (hasAccount) {
+      void loadPurchaseFlowUrl(application)
     } else if (window.plansUrl) {
       window.location.assign(window.plansUrl)
     }
-  }, [application, hasSubscription])
+  }, [application, hasSubscription, hasAccount])
 
   return showModal ? (
     <AlertDialog leastDestructiveRef={plansButtonRef} className="p-0">
@@ -44,14 +49,17 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
                 <Icon className="text-neutral" type="close" />
               </button>
             </div>
-            <div className="flex items-center justify-center p-1" aria-hidden={true}>
-              <PremiumIllustration className="mb-2" />
+            <div
+              className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
+              aria-hidden={true}
+            >
+              <Icon className={`h-12 w-12 ${PremiumFeatureIconClass}`} type={PremiumFeatureIconName} />
             </div>
             <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
           </AlertDialogLabel>
           <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
-            In order to use <span className="font-semibold">{featureName}</span> and other advanced features, please
-            purchase a subscription or upgrade your current plan.
+            To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
+            upgrade your current plan.
           </AlertDialogDescription>
           <div className="p-4">
             <button
@@ -59,7 +67,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
               className="no-border w-full cursor-pointer rounded bg-info py-2 font-bold text-info-contrast hover:brightness-125 focus:brightness-125"
               ref={plansButtonRef}
             >
-              {hasSubscription ? 'Upgrade Plan' : 'See Plans'}
+              Upgrade
             </button>
           </div>
         </div>