(PC-33707)[PRO] feat: Footer on all onboarding pages.

pass-culture · Jan 10, 2025 · cf97864 · cf97864
1 parent 989ead4
commit cf97864
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 16 deletions.
diff --git a/pro/src/app/App/layout/Layout.module.scss b/pro/src/app/App/layout/Layout.module.scss
@@ -104,9 +104,8 @@ $connect-as-header-height: rem.torem(52px);
   }
 
   &-sticky-onboarding {
-    max-width: size.$main-content-width;
     margin: 0 auto size.$action-bar-sticky-height auto;
-    padding: size.$main-content-padding;
+    padding: 0;
   }
 }
 
@@ -139,6 +138,9 @@ $connect-as-header-height: rem.torem(52px);
   &-sticky-onboarding {
     display: flex;
     justify-content: center;
+    max-width: size.$main-content-width;
+    padding: size.$main-content-padding size.$main-content-padding 0;
+    margin: 0 auto;
   }
 }
 

diff --git a/pro/src/app/App/layout/Layout.tsx b/pro/src/app/App/layout/Layout.tsx
@@ -38,7 +38,7 @@ export const Layout = ({
   children,
   mainHeading,
   layout = 'basic',
-  showFooter = layout !== 'funnel' && layout !== 'sticky-onboarding',
+  showFooter = layout !== 'funnel',
 }: LayoutProps) => {
   const currentUser = useSelector(selectCurrentUser)
   const [lateralPanelOpen, setLateralPanelOpen] = useState(false)
@@ -61,10 +61,12 @@ export const Layout = ({
   const mainHeadingWrapper = mainHeading && (
     <div className={styles['main-heading-wrapper']}>
       <h1 className={styles['main-heading-title']}>{mainHeading}</h1>
-      {isConnected && <BackToNavLink
-        isMobileScreen={isMobileScreen}
-        className={styles['main-heading-back-to-nav-link']}
-      />}
+      {isConnected && (
+        <BackToNavLink
+          isMobileScreen={isMobileScreen}
+          className={styles['main-heading-back-to-nav-link']}
+        />
+      )}
     </div>
   )
 
@@ -97,6 +99,7 @@ export const Layout = ({
         )}
         {(layout === 'basic' ||
           layout === 'sticky-actions' ||
+          layout === 'onboarding' ||
           layout === 'sticky-onboarding') && (
           <Header
             lateralPanelOpen={lateralPanelOpen}
@@ -107,7 +110,9 @@ export const Layout = ({
               })
             }}
             ref={openButtonRef}
-            disableHomeLink={layout === 'sticky-onboarding'}
+            disableHomeLink={
+              layout === 'sticky-onboarding' || layout === 'onboarding'
+            }
           />
         )}
         <div

diff --git a/pro/src/components/Footer/Footer.module.scss b/pro/src/components/Footer/Footer.module.scss
@@ -22,6 +22,10 @@
     height: size.$footer-height;
   }
 
+  &-layout-sticky-onboarding {
+    margin-bottom: 0;
+  }
+
   @media (min-width: size.$tablet) {
     min-height: size.$footer-height;
   }

diff --git a/pro/src/pages/Onboarding/OnboardingOfferIndividual/OnboardingOfferIndividual.tsx b/pro/src/pages/Onboarding/OnboardingOfferIndividual/OnboardingOfferIndividual.tsx
@@ -28,7 +28,7 @@ export const OnboardingOfferIndividual = (): JSX.Element => {
   }
 
   return (
-    <OnboardingLayout verticallyCentered showFooter={false}>
+    <OnboardingLayout verticallyCentered>
       <h1 className={styles['offers-title']}>Offre à destination des jeunes</h1>
       <h2 className={styles['offers-subtitle']}>
         Comment souhaitez-vous créer votre 1ère offre ?

diff --git a/...ages/Onboarding/OnboardingOfferIndividualAutomatic/OnboardingOfferIndividualAutomatic.tsx b/...ages/Onboarding/OnboardingOfferIndividualAutomatic/OnboardingOfferIndividualAutomatic.tsx
@@ -16,7 +16,7 @@ export const OnboardingOfferIndividualAutomatic = ({
   const navigate = useNavigate()
 
   return (
-    <OnboardingLayout showFooter={false}>
+    <OnboardingLayout>
       <div className={cn(className)}>
         <h1 className={styles['title']}>
           Connecter mon logiciel de gestion des stocks

diff --git a/pro/src/pages/Onboarding/OnboardingOffersTypeChoice/OnboardingOffersTypeChoice.tsx b/pro/src/pages/Onboarding/OnboardingOffersTypeChoice/OnboardingOffersTypeChoice.tsx
@@ -9,7 +9,7 @@ import styles from './OnboardingOffersTypeChoice.module.scss'
 
 export const OnboardingOffersTypeChoice = () => {
   return (
-    <OnboardingLayout verticallyCentered>
+    <OnboardingLayout verticallyCentered stickyActionsAndFooter={false}>
       <div className={styles['onboarding-offer-container']}>
         <div className={styles['onboarding-offer-header']}>
           <h1 className={styles['onboarding-offer-header-title']}>

diff --git a/pro/src/pages/Onboarding/components/OnboardingLayout/OnboardingLayout.tsx b/pro/src/pages/Onboarding/components/OnboardingLayout/OnboardingLayout.tsx
@@ -2,26 +2,26 @@ import cn from 'classnames'
 import { type ReactNode } from 'react'
 
 import { Layout } from 'app/App/layout/Layout'
-import { Header } from 'components/Header/Header'
 
 import styles from './OnboardingLayout.module.scss'
 
 interface OnboardingLayoutProps {
   className?: string
-  showFooter?: boolean
   verticallyCentered?: boolean
   children: ReactNode
+  stickyActionsAndFooter?: boolean
 }
 
 export const OnboardingLayout = ({
   className,
-  showFooter = true,
   children,
   verticallyCentered = false,
+  stickyActionsAndFooter = true,
 }: OnboardingLayoutProps): JSX.Element => {
   return (
-    <Layout layout="onboarding" showFooter={showFooter}>
-      <Header disableHomeLink={true} />
+    <Layout
+      layout={stickyActionsAndFooter ? 'sticky-onboarding' : 'onboarding'}
+    >
       <div
         className={cn(
           styles[`onboarding-layout`],