Compile timeout- Adding the paywall component (#23606)

* adding the upgrade prompt component

* adding the container queries for cards

* removing comment

* styles:lint:fix

* adding ? for checking

GitOrigin-RevId: 63250f73fa543b510423835633de04eff69c47c5

services/web/frontend/js/features/pdf-preview/components/timeout-upgrade-paywall-prompt.tsx

@@ -1,6 +1,7 @@
 import getMeta from '@/utils/meta'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import TimeoutMessageAfterPaywallDismissal from './timeout-message-after-paywall-dismissal'
+import { UpgradePrompt } from '@/shared/components/upgrade-prompt'
 
 const studentRoles = [
   'High-school student',
@@ -9,18 +10,34 @@ const studentRoles = [
   'Doctoral student (e.g. PhD, MD, EngD)',
 ]
 
-// We can display TimeoutMessageAfterPaywallDismissal after the user has dismissed the paywall. That logic can be implemented in this file or somewhere else?
 function TimeoutUpgradePaywallPrompt() {
   const odcRole = getMeta('ol-odcRole')
   const planPrices = getMeta('ol-paywallPlans')
   const isStudent = useMemo(() => studentRoles.includes(odcRole), [odcRole])
 
+  const [isPaywallDismissed, setIsPaywallDismissed] = useState<boolean>(false)
+
+  function onClose() {
+    setIsPaywallDismissed(true)
+  }
+
   return (
     <div>
-      <p>Current user is {!isStudent && 'not'} a student.</p>
-      <p>Student plan: {planPrices.student} per month</p>
-      <p>Standard plan: {planPrices.collaborator} per month</p>
-      <TimeoutMessageAfterPaywallDismissal />
+      {!isPaywallDismissed ? (
+        <UpgradePrompt
+          title="Unlock more compile time"
+          summary="Your project took too long to compile and timed out."
+          onClose={onClose}
+          planPricing={{
+            student: planPrices?.student,
+            standard: planPrices?.collaborator,
+          }}
+          itmCampaign="storybook"
+          isStudent={isStudent}
+        />
+      ) : (
+        <TimeoutMessageAfterPaywallDismissal />
+      )}
     </div>
   )
 }