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>
   )
 }

services/web/frontend/js/shared/components/upgrade-prompt.tsx

@@ -76,7 +76,7 @@ export function UpgradePrompt({
         <p className="upgrade-prompt-summary">{summary}</p>
       </OLRow>
       <OLRow className="g-3">
-        <OLCol md={6}>
+        <OLCol md={6} className="upgrade-prompt-card-container">
           <div className="g-0 upgrade-prompt-card upgrade-prompt-card-premium">
             <OLRow className="justify-content-between">
               <OLCol>
@@ -117,7 +117,7 @@ export function UpgradePrompt({
             </OLRow>
           </div>
         </OLCol>
-        <OLCol md={6}>
+        <OLCol md={6} className="upgrade-prompt-card-container">
           <div className="g-0 upgrade-prompt-card upgrade-prompt-card-free">
             <OLRow>
               <h3>{t('free')}</h3>

services/web/frontend/stylesheets/bootstrap-5/components/upgrade-prompt.scss

@@ -2,6 +2,14 @@
   border-radius: var(--border-radius-base);
   box-shadow: 0 4px 6px 0 #1e25301f;
   padding: var(--spacing-06);
+  background-color: var(--white);
+  container: inline-size; // Defines the parent as a container
+
+  .upgrade-prompt-card-container {
+    @container (max-width: 700px) {
+      width: 100%;
+    }
+  }
 
   .row {
     margin-left: 0;