Fix welcome modal width (#8459)

* Fix welcome modal width

* Use correct modal

Author: dem4ron

Gemfile.lock

@@ -657,6 +657,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-23
+  arm64-darwin-24
   x64-mingw32
   x86_64-linux
 

app/javascript/components/modals/seniority-survey-modal/BootcampAdvertismentView.tsx

@@ -1,15 +1,28 @@
-import React, { useContext } from 'react'
-import { GraphicalIcon, Icon } from '@/components/common'
+import React from 'react'
+import { Icon } from '@/components/common'
 import { FormButton } from '@/components/common/FormButton'
 import { ErrorBoundary, ErrorMessage } from '@/components/ErrorBoundary'
-import { SenioritySurveyModalContext } from './SenioritySurveyModal'
 import { useAppTranslation } from '@/i18n/useAppTranslation'
 import { Trans } from 'react-i18next'
+import { MutationStatus } from '@tanstack/react-query'
 
 const DEFAULT_ERROR = new Error('Unable to dismiss modal')
 
-export function BootcampAdvertismentView() {
-  const { patchCloseModal, links } = useContext(SenioritySurveyModalContext)
+type BootcampAdvertismentViewProps = {
+  patchCloseModal: {
+    mutate: () => void
+    status: string
+    error: unknown
+  }
+  links: {
+    codingFundamentalsCourse: string
+  }
+}
+
+export function BootcampAdvertismentView({
+  patchCloseModal,
+  links,
+}: BootcampAdvertismentViewProps) {
   const { t } = useAppTranslation('components/modals/seniority-survey-modal')
 
   return (
@@ -86,7 +99,7 @@ export function BootcampAdvertismentView() {
             {t('bootcampAd.learnMore')}
           </a>
           <FormButton
-            status={patchCloseModal.status}
+            status={patchCloseModal.status as MutationStatus}
             className="btn-secondary btn-l w-[140px]"
             type="button"
             onClick={patchCloseModal.mutate}

app/javascript/components/modals/seniority-survey-modal/SenioritySurveyModal.tsx

@@ -115,11 +115,18 @@ export default function SenioritySurveyModal({
 
 function Inner() {
   const { t } = useAppTranslation('components/modals/seniority-survey-modal')
-  const { currentView } = useContext(SenioritySurveyModalContext)
+  const { currentView, patchCloseModal, links } = useContext(
+    SenioritySurveyModalContext
+  )
   switch (currentView) {
     case 'initial':
       return <InitialView />
     case 'bootcamp-advertisment':
-      return <BootcampAdvertismentView />
+      return (
+        <BootcampAdvertismentView
+          patchCloseModal={patchCloseModal}
+          links={links}
+        />
+      )
   }
 }

app/javascript/components/modals/welcome-modal/WelcomeModal.tsx

@@ -4,7 +4,7 @@ import { sendRequest } from '@/utils/send-request'
 import { Modal, ModalProps } from '../Modal'
 import { InitialView } from './InitialView'
 import { SeniorView } from './DeveloperView'
-import { JuniorView } from './JuniorView'
+import { BootcampAdvertismentView } from '../seniority-survey-modal/BootcampAdvertismentView'
 
 type ViewVariant = 'initial' | 'beginner' | 'developer'
 
@@ -134,9 +134,16 @@ export default function WelcomeModal({
       <Modal
         cover={true}
         open={open}
-        style={
-          currentView === 'initial' ? { content: { maxWidth: '590px' } } : {}
-        }
+        style={{
+          content: {
+            maxWidth:
+              currentView === 'initial'
+                ? '590px'
+                : currentView === 'beginner'
+                ? '620px'
+                : '1180px',
+          },
+        }}
         {...props}
         onClose={() => null}
         className="m-welcome"
@@ -148,12 +155,18 @@ export default function WelcomeModal({
 }
 
 function Inner() {
-  const { currentView } = useContext(WelcomeModalContext)
+  const { currentView, patchCloseModal, links } =
+    useContext(WelcomeModalContext)
   switch (currentView) {
     case 'initial':
       return <InitialView />
     case 'beginner':
-      return <JuniorView />
+      return (
+        <BootcampAdvertismentView
+          patchCloseModal={patchCloseModal}
+          links={links}
+        />
+      )
     case 'developer':
       return <SeniorView />
     default: