fix(program-cta): RE-1948 add program CTA (#779)

app/(tabs)/(home)/index.tsx

@@ -5,6 +5,7 @@ import AppDownloadCTA from '@/components/ProfileCards/AppDownloadCTA/AppDownload
 import BotBilanCTA from '@/components/ProfileCards/BotBilanCTA/BotBilanCTA'
 import ProcurationCTA from '@/components/ProfileCards/ProcurationCTA/ProcurationCTA'
 import MyProfileCard from '@/components/ProfileCards/ProfileCard/MyProfileCard'
+import ProgramCTA from '@/components/ProfileCards/ProgramCTA/ProgramCTA'
 import SkeCard from '@/components/Skeleton/CardSkeleton'
 import * as metatags from '@/config/metatags'
 import { useSession } from '@/ctx/SessionProvider'
@@ -89,6 +90,7 @@ const HomeScreen: React.FC = () => {
           </BoundarySuspenseWrapper>
         </PageLayout.MainSingleColumn>
         <PageLayout.SideBarRight>
+          <ProgramCTA />
           <BotBilanCTA />
         </PageLayout.SideBarRight>
       </PageLayout>

src/components/ProfileCards/ProcurationCTA/ProcurationCTA.tsx

@@ -6,7 +6,7 @@ import { gray } from '../../../../theme/colors.hex'
 
 export default function ProcurationCTA() {
   const onPress = useCallback(async () => {
-    const link = 'https://besoindeurope.fr/procurations'
+    const link = 'https://besoindeurope.fr/procurations?utm_source=app'
     if (await Linking.canOpenURL(link)) {
       await Linking.openURL(link)
     }
@@ -17,6 +17,7 @@ export default function ProcurationCTA() {
       <ProfileCallToActionLayout.Content
         title="PROCURATION"
         titleStyle={{
+          fontWeight: 600,
           color: gray.gray6,
         }}
         content={'Disponible le 9 juin ?'}
@@ -28,7 +29,7 @@ export default function ProcurationCTA() {
           <Button.Text>Accéder aux démarches</Button.Text>
         </Button>
       </ProfileCallToActionLayout.Actions>
-      <ProfileCallToActionLayout.BackgroundImageBottomRight source={require('./box.png')} height={200} />
+      <ProfileCallToActionLayout.BackgroundImageBottomRight source={require('./box.png')} />
     </ProfileCallToActionLayout>
   )
 }

src/components/ProfileCards/ProfileCallToActionLayout/ProfileCallToActionLayout.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { ImageSourcePropType } from 'react-native'
 import Text from '@/components/base/Text'
 import SpacedContainer from '@/components/SpacedContainer/SpacedContainer'
-import { Card, Image, TextProps, View, withStaticProperties } from 'tamagui'
+import { Card, Image, ImageProps, TextProps, View, withStaticProperties } from 'tamagui'
 
 export interface ProfileCallToActionProps extends PropsWithChildren {
   title?: string
@@ -26,27 +26,23 @@ function Layout({ children, backgroundColor, height, noPadding = false, noBorder
       borderRadius={'$8'}
       borderWidth={noBorder ? 0 : 1}
       borderColor={'$gray3'}
+      overflow={'hidden'}
     >
       {children && <SpacedContainer>{children}</SpacedContainer>}
     </Card>
   )
 }
 
-interface CardImageProps {
-  source: ImageSourcePropType
-  height: number
-}
-
-const CardImage = ({ source, height }: Readonly<CardImageProps>) => {
+const CardImage = ({ source, height, ...rest }: Readonly<ImageProps>) => {
   return (
     <SpacedContainer>
-      <Image source={source} height={height} width="auto" resizeMode={'contain'} />
+      <Image source={source} height={height} width="auto" resizeMode={'contain'} {...rest} />
     </SpacedContainer>
   )
 }
 
-const BackgroundImageBottomRight = ({ source }: Readonly<CardImageProps>) => {
-  return <Image source={source} height={150} width={150} resizeMode={'contain'} position={'absolute'} right={0} bottom={-12} />
+const BackgroundImageBottomRight = ({ source, height, ...rest }: Readonly<ImageProps>) => {
+  return <Image source={source} height={height ?? 150} width={150} resizeMode={'contain'} position={'absolute'} right={0} bottom={-12} {...rest} />
 }
 
 interface CardContentProps extends PropsWithChildren {
@@ -68,7 +64,7 @@ const CardContent = ({ contentStyle, titleStyle, title, content, children, textA
   )
 
   return (
-    <View padding={padding}>
+    <View padding={padding} pt={'$4'}>
       {title && (
         <SpacedContainer>
           <Text textAlign={textAlign} style={titleStyle}>

src/components/ProfileCards/ProgramCTA/ProgramCTA.stories.tsx

@@ -0,0 +1,18 @@
+import ProgramCTA from '@/components/ProfileCards/ProgramCTA/ProgramCTA'
+import { StoryObj } from '@storybook/react'
+import { View } from 'tamagui'
+
+const meta = {
+  title: 'Profile CTA/Program',
+  component: () => (
+    <View width={400}>
+      <ProgramCTA />
+    </View>
+  ),
+}
+
+type Story = StoryObj<typeof ProgramCTA>
+
+export const Default: Story = {}
+
+export default meta

src/components/ProfileCards/ProgramCTA/ProgramCTA.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react'
+import { Linking } from 'react-native'
+import { ProfileCallToActionLayout } from '@/components/ProfileCards/ProfileCallToActionLayout/ProfileCallToActionLayout'
+import { gray } from '../../../../theme/colors.hex'
+import Button from '../../Button'
+
+export default function ProgramCTA() {
+  const onPress = useCallback(async () => {
+    const link = 'https://besoindeurope.fr/projet?utm_source=app'
+    if (await Linking.canOpenURL(link)) {
+      await Linking.openURL(link)
+    }
+  }, [])
+
+  return (
+    <ProfileCallToActionLayout noPadding>
+      <ProfileCallToActionLayout.Content
+        title="NOTRE PROGRAMME"
+        titleStyle={{
+          fontWeight: 600,
+          color: gray.gray6,
+        }}
+        content={'Nos 48 propositions en\ndétail sur notre site.'}
+        contentStyle={{
+          lineHeight: 24,
+        }}
+        padding={'$3'}
+        compact
+      />
+      <ProfileCallToActionLayout.Actions>
+        <Button variant={'outlined'} marginTop={'$2'} marginLeft={'$2.5'} zIndex={10} onPress={onPress}>
+          <Button.Text>Voir Notre Projet</Button.Text>
+        </Button>
+      </ProfileCallToActionLayout.Actions>
+      <ProfileCallToActionLayout.BackgroundImageBottomRight source={require('./assets/program.png')} bottom={-20} right={-16} height={170} />
+    </ProfileCallToActionLayout>
+  )
+}