feat: iap (#1996)

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

@@ -0,0 +1,4 @@
+export enum PremiumFeatureModalType {
+  UpgradePrompt,
+  UpgradeSuccess,
+}

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

@@ -4,7 +4,7 @@ import Icon from '@/Components/Icon/Icon'
 import { WebApplication } from '@/Application/Application'
 import { openSubscriptionDashboard } from '@/Utils/ManageSubscription'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
-import { loadPurchaseFlowUrl } from '../PurchaseFlow/PurchaseFlowFunctions'
+import { PremiumFeatureModalType } from './PremiumFeatureModalType'
 
 type Props = {
   application: WebApplication
@@ -13,6 +13,7 @@ type Props = {
   hasAccount: boolean
   onClose: () => void
   showModal: boolean
+  type: PremiumFeatureModalType
 }
 
 const PremiumFeaturesModal: FunctionComponent<Props> = ({
@@ -22,6 +23,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   hasAccount,
   onClose,
   showModal,
+  type = PremiumFeatureModalType.UpgradePrompt,
 }) => {
   const plansButtonRef = useRef<HTMLButtonElement>(null)
 
@@ -29,11 +31,58 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
     if (hasSubscription) {
       void openSubscriptionDashboard(application)
     } else if (hasAccount) {
-      void loadPurchaseFlowUrl(application)
+      void application.openPurchaseFlow()
     } else if (window.plansUrl) {
       window.location.assign(window.plansUrl)
     }
-  }, [application, hasSubscription, hasAccount])
+    onClose()
+  }, [application, hasSubscription, hasAccount, onClose])
+
+  const UpgradePrompt = (
+    <>
+      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+        To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features, upgrade
+        your current plan.
+      </AlertDialogDescription>
+
+      <div className="p-4">
+        <button
+          onClick={handleClick}
+          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}
+        >
+          Upgrade
+        </button>
+      </div>
+    </>
+  )
+
+  const SuccessPrompt = (
+    <>
+      <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
+        Enjoy your new powered up experience.
+      </AlertDialogDescription>
+
+      <div className="p-4">
+        <button
+          onClick={onClose}
+          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}
+        >
+          Continue
+        </button>
+      </div>
+    </>
+  )
+
+  const title =
+    type === PremiumFeatureModalType.UpgradePrompt ? 'Enable Advanced Features' : 'Your purchase was successful!'
+
+  const iconName = type === PremiumFeatureModalType.UpgradePrompt ? PremiumFeatureIconName : '🎉'
+  const iconClass =
+    type === PremiumFeatureModalType.UpgradePrompt
+      ? `h-12 w-12 ${PremiumFeatureIconClass}`
+      : 'px-7 py-2 h-24 w-24 text-[50px]'
 
   return showModal ? (
     <AlertDialog leastDestructiveRef={plansButtonRef} className="p-0">
@@ -53,25 +102,11 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
               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} />
+              <Icon className={iconClass} size={'custom'} type={iconName} />
             </div>
-            <div className="mb-1 text-center text-lg font-bold">Enable Advanced Features</div>
+            <div className="mb-1 text-center text-lg font-bold">{title}</div>
           </AlertDialogLabel>
-          <AlertDialogDescription className="mb-2 px-4.5 text-center text-sm text-passive-1">
-            To take advantage of <span className="font-semibold">{featureName}</span> and other advanced features,
-            upgrade your current plan.
-          </AlertDialogDescription>
-          {!application.hideSubscriptionMarketing && (
-            <div className="p-4">
-              <button
-                onClick={handleClick}
-                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}
-              >
-                Upgrade
-              </button>
-            </div>
-          )}
+          {type === PremiumFeatureModalType.UpgradePrompt ? UpgradePrompt : SuccessPrompt}
         </div>
       </div>
     </AlertDialog>