Feature/re 2492 profil communication (#871)

parti-renaissance · Sep 25, 2024 · cfad777 · cfad777
1 parent 3d4a642
commit cfad777
Show file tree

Hide file tree

Showing 26 changed files with 497 additions and 17 deletions.
diff --git a/app/(app)/profil/communications.tsx b/app/(app)/profil/communications.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import BoundarySuspenseWrapper from '@/components/BoundarySuspenseWrapper'
+import ProfilLayout from '@/components/layouts/ProfilLayout'
+import * as metatags from '@/config/metatags'
+import ComScreen from '@/screens/profil/communications/page'
+import Head from 'expo-router/head'
+
+function CommunicationScreen() {
+  return (
+    <>
+      <Head>
+        <title>{metatags.createTitle('Cotisation et dons')}</title>
+      </Head>
+
+      <ProfilLayout>
+        <BoundarySuspenseWrapper>
+          <ComScreen />
+        </BoundarySuspenseWrapper>
+      </ProfilLayout>
+    </>
+  )
+}
+
+export default CommunicationScreen
diff --git a/app/(app)/profil/informations-elu.tsx b/app/(app)/profil/informations-elu.tsx
@@ -5,11 +5,11 @@ import * as metatags from '@/config/metatags'
 import EluScreen from '@/screens/profil/elu/page'
 import Head from 'expo-router/head'
 
-function InformationsEluScreen() {
+function CommunicationScreen() {
   return (
     <>
       <Head>
-        <title>{metatags.createTitle('Cotisation et dons')}</title>
+        <title>{metatags.createTitle('Communication')}</title>
       </Head>
 
       <ProfilLayout>
@@ -21,4 +21,4 @@ function InformationsEluScreen() {
   )
 }
 
-export default InformationsEluScreen
+export default CommunicationScreen
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "async-mutex": "^0.4.0",
     "awesome-phonenumber": "^6.6.0",
     "axios": "^1.7.2",
+    "axios-jsonp": "^1.0.4",
     "burnt": "^0.12.2",
     "country-data": "^0.0.31",
     "date-fns": "^3.6.0",

diff --git a/src/components/MessageCard/MessageCard.stories.tsx b/src/components/MessageCard/MessageCard.stories.tsx
@@ -0,0 +1,27 @@
+import { Fragment } from 'react'
+import { Calendar } from '@tamagui/lucide-icons'
+import { ScrollView, Stack, Text, XStack, YStack } from 'tamagui'
+import { MessageCard } from './MessageCard'
+
+export default {
+  title: 'MessageCard',
+  component: MessageCard,
+}
+
+export function Default() {
+  const colors = ['gray', 'purple', 'orange', 'blue', 'green', 'yellow'] as const
+
+  return (
+    <ScrollView flex={1} alignContent="center" justifyContent="center">
+      <Stack gap="$4">
+        <YStack gap="$2">
+          {colors.map((c) => (
+            <MessageCard key={c} theme={c} iconLeft={Calendar}>
+              Label
+            </MessageCard>
+          ))}
+        </YStack>
+      </Stack>
+    </ScrollView>
+  )
+}
diff --git a/src/components/MessageCard/MessageCard.tsx b/src/components/MessageCard/MessageCard.tsx
@@ -0,0 +1,27 @@
+import React, { ComponentProps, NamedExoticComponent } from 'react'
+import Text from '@/components/base/Text'
+import type { IconProps } from '@tamagui/helpers-icon'
+import { View, XStack } from 'tamagui'
+import VoxCard from '../VoxCard/VoxCard'
+
+type Props = {
+  children: string | string[]
+  iconLeft: NamedExoticComponent<IconProps>
+  rightComponent?: React.ReactNode
+} & ComponentProps<typeof VoxCard>
+
+export const MessageCard = ({ children, iconLeft: IconLeft, rightComponent, ...props }: Props) => (
+  <VoxCard inside bg="$color1" {...props}>
+    <VoxCard.Content>
+      <XStack gap={16} alignItems="center">
+        <View width={24} height={24}>
+          <IconLeft size={24} color="$color7" />
+        </View>
+        <Text.MD multiline color="$color7" semibold>
+          {children}
+        </Text.MD>
+        {rightComponent ?? null}
+      </XStack>
+    </VoxCard.Content>
+  </VoxCard>
+)
diff --git a/src/components/base/CheckboxGroup/CheckboxGroup.tsx b/src/components/base/CheckboxGroup/CheckboxGroup.tsx
@@ -45,7 +45,7 @@ export default function CheckboxGroup({ options, value, onChange }: CheckboxGrou
           alignItems="center"
           cursor="pointer"
         >
-          <Checkbox checked={isChecked(option.value)} />
+          <Checkbox checked={isChecked(option.value)} onPress={handlePress(option.value)} />
           <Text.MD multiline>{option.label}</Text.MD>
         </XStack>
       ))}

diff --git a/src/components/base/RadioGroup/RadioGroup.tsx b/src/components/base/RadioGroup/RadioGroup.tsx
@@ -25,7 +25,7 @@ export default function RadioGroup({ options, value, onChange }: RadioGroupProps
       {options.map((option, i) => (
         <YStack gap={16}>
           <XStack key={option.value} gap="$2" group onPress={handlePress(option.value)} alignItems="center" cursor="pointer">
-            <Radio checked={value === option.value} />
+            <Radio checked={value === option.value} onPress={handlePress(option.value)} />
             <Text.MD multiline>{option.label}</Text.MD>
           </XStack>
           {i < options.length - 1 && <Separator bg="$textOutline" />}

diff --git a/src/components/base/SwitchGroup/SwitchGroup.stories.tsx b/src/components/base/SwitchGroup/SwitchGroup.stories.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import SwitchGroup from './SwitchGroup'
+
+export default {
+  title: 'SwitchGroup',
+  component: SwitchGroup,
+}
+
+const list = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+]
+
+export const Default = () => {
+  const [value, setValue] = React.useState(['option1'])
+  return <SwitchGroup options={list} value={value} onChange={setValue} />
+}
diff --git a/src/components/base/SwitchGroup/SwitchGroup.tsx b/src/components/base/SwitchGroup/SwitchGroup.tsx
@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import Switch from '@/components/base/SwitchV2/SwitchV2'
+import Text from '@/components/base/Text'
+import { styled } from '@tamagui/core'
+import { ThemeableStack, XStack } from 'tamagui'
+
+type SwitchGroupProps = {
+  options: {
+    label: string
+    value: string
+  }[]
+  value: string[]
+  onChange: (value: string[]) => void
+}
+
+const SwitchGroupFrame = styled(ThemeableStack, {
+  gap: '$3',
+  flexDirection: 'column',
+})
+
+export default function SwitchGroup({ options, value, onChange }: SwitchGroupProps) {
+  const handlePress = (item: string) => () => {
+    if (value.includes(item)) {
+      onChange(value.filter((v) => v !== item))
+      return
+    }
+    onChange([...value, item])
+  }
+
+  const isChecked = (item: string) => value.includes(item)
+  return (
+    <SwitchGroupFrame>
+      {options.map((option) => (
+        <XStack key={option.value} gap="$2" group onPress={handlePress(option.value)} alignItems="center" cursor="pointer" justifyContent="space-between">
+          <Text.MD multiline flexShrink={1}>
+            {option.label}
+          </Text.MD>
+          <Switch checked={isChecked(option.value)} onPress={handlePress(option.value)} />
+        </XStack>
+      ))}
+    </SwitchGroupFrame>
+  )
+}
diff --git a/src/components/base/SwitchV2/SwitchV2.stories.tsx b/src/components/base/SwitchV2/SwitchV2.stories.tsx
@@ -0,0 +1,16 @@
+import { YStack } from 'tamagui'
+import Switch from './SwitchV2'
+
+export default {
+  title: 'SwitchV2',
+  component: Switch,
+}
+
+export const Default = () => (
+  <YStack>
+    <Switch />
+    <Switch checked />
+    <Switch disabled />
+    <Switch checked disabled />
+  </YStack>
+)
diff --git a/src/components/base/SwitchV2/SwitchV2.tsx b/src/components/base/SwitchV2/SwitchV2.tsx
@@ -0,0 +1,90 @@
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from 'react'
+import { createStyledContext, GetThemeValueForKey, getVariableValue, styled } from '@tamagui/core'
+import { Check } from '@tamagui/lucide-icons'
+import { ThemeableStack } from '@tamagui/stacks'
+
+export const SwitchContext = createStyledContext({
+  checked: false,
+  disabled: false,
+})
+
+export const SwitchGroupZone = styled(ThemeableStack, {
+  tag: 'button',
+  context: SwitchContext,
+  focusable: true,
+  height: 24 + 16,
+  width: 40 + 16,
+  borderRadius: 1000,
+  group: true,
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  animation: 'bouncy',
+  '$group-hover': { backgroundColor: '$blue2' },
+  focusStyle: {
+    backgroundColor: '$blue2',
+  },
+  hoverStyle: {
+    backgroundColor: '$blue2',
+  },
+  disabledStyle: {
+    cursor: 'not-allowed',
+    opacity: 0.4,
+    backgroundColor: 'transparent',
+  },
+  variants: {
+    checked: {
+      true: {},
+    },
+  } as const,
+})
+
+export const SwitchGroupItemFrame = styled(ThemeableStack, {
+  context: SwitchContext,
+  animation: 'bouncy',
+  borderRadius: 999,
+  height: 24,
+  width: 40,
+  padding: 2,
+  backgroundColor: '$gray3',
+  justifyContent: 'center',
+
+  variants: {
+    checked: {
+      true: {
+        backgroundColor: '$blue9',
+      },
+    },
+  } as const,
+})
+
+export const SwitchGroupIndicatorFrame = styled(ThemeableStack, {
+  context: SwitchContext,
+  width: 20,
+  height: 20,
+  animation: 'bouncy',
+  transform: [{ translateX: 0 }],
+  borderRadius: 999,
+  backgroundColor: '$white1',
+  variants: {
+    checked: {
+      true: {
+        transform: [{ translateX: 16 }],
+      },
+    },
+  } as const,
+})
+
+export default forwardRef<ComponentRef<typeof SwitchGroupZone>, ComponentPropsWithoutRef<typeof SwitchGroupZone> & { color?: 'blue' | 'gray' }>(function (
+  { color = 'blue', ...props },
+  ref,
+) {
+  const hintColor = color === 'gray' ? '$gray7' : '$blue9'
+  return (
+    <SwitchGroupZone {...props} ref={ref}>
+      <SwitchGroupItemFrame borderColor={props.checked ? hintColor : '$gray3'}>
+        <SwitchGroupIndicatorFrame />
+      </SwitchGroupItemFrame>
+    </SwitchGroupZone>
+  )
+})
diff --git a/src/screens/profil/account/form/ContactForm.tsx b/src/screens/profil/account/form/ContactForm.tsx
@@ -35,7 +35,7 @@ const ContactForm = ({ profile }: { profile: RestDetailedProfileResponse }) => {
     >
       {({ control }) => (
         <>
-          <Text.MD semibold>Contact</Text.MD>
+          <Text.LG semibold>Contact</Text.LG>
           {profile.change_email_token?.email ? (
             <VoxCard inside bg="$yellow1">
               <VoxCard.Content>

diff --git a/src/screens/profil/account/form/InformationForm.tsx b/src/screens/profil/account/form/InformationForm.tsx
@@ -43,7 +43,7 @@ const InformationsForm = ({ profile }: { profile: RestDetailedProfileResponse })
               </VoxCard.Content>
             </VoxCard>
           )}
-          <Text.MD semibold>Identité</Text.MD>
+          <Text.LG semibold>Identité</Text.LG>
           <View gap="$5">
             <Controller
               name="gender"

diff --git a/src/screens/profil/account/form/LocationForm.tsx b/src/screens/profil/account/form/LocationForm.tsx
@@ -40,9 +40,9 @@ export const LocationForm = ({ profile }: { profile: RestDetailedProfileResponse
     >
       {({ control }) => (
         <Fragment>
-          <Text.MD semibold multiline>
+          <Text.LG semibold multiline>
             Localisation
-          </Text.MD>
+          </Text.LG>
 
           <Text.P>
             Votre localisation détermine votre Assemblée départementale et votre circonscription legislative. Elle présélectionne également votre comité, mais

diff --git a/src/screens/profil/account/form/PartyMembershipFrom.tsx b/src/screens/profil/account/form/PartyMembershipFrom.tsx
@@ -27,9 +27,9 @@ const PartyMembershipForm = ({ profile }: { profile: RestDetailedProfileResponse
       {({ control }) => (
         <Fragment>
           <YStack gap="$3">
-            <Text.MD semibold multiline>
+            <Text.LG semibold multiline>
               Appartenance à un autre parti politique
-            </Text.MD>
+            </Text.LG>
           </YStack>
           <Controller
             name="party_membership"

diff --git a/src/screens/profil/account/form/RSForm.tsx b/src/screens/profil/account/form/RSForm.tsx
@@ -32,7 +32,7 @@ export const RSForm = ({ profile }: { profile: RestDetailedProfileResponse }) =>
     >
       {({ control }) => (
         <Fragment>
-          <Text.MD semibold>Réseaux sociaux</Text.MD>
+          <Text.LG semibold>Réseaux sociaux</Text.LG>
 
           {socialPlatforms.map((platform) => (
             <Controller