feat nationality check profil

parti-renaissance · Nov 7, 2024 · 93783e9 · 93783e9
1 parent 08ddc9c
commit 93783e9
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 81 deletions.
diff --git a/src/components/ModalOrPageBase/ModalOrPageBase.tsx b/src/components/ModalOrPageBase/ModalOrPageBase.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
 import { Modal, Pressable, StyleSheet, TouchableOpacity } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spacing } from '@/styles'
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
 import { gray } from '@tamagui/colors'
 import { X } from '@tamagui/lucide-icons'
 import { Sheet, useMedia, View } from 'tamagui'
@@ -47,30 +48,31 @@ export default function ModalOrPageBase({ children, onClose, open, shouldDisplay
       }}
     >
       <Sheet.Frame>
-        {shouldDisplayCloseHeader && (
-          <TouchableOpacity style={[styles.header, { paddingTop: insets.top }]} onPress={onClose}>
-            <X />
-          </TouchableOpacity>
-        )}
+        <BottomSheetModalProvider>
+          {shouldDisplayCloseHeader && (
+            <TouchableOpacity style={[styles.header, { paddingTop: insets.top }]} onPress={onClose}>
+              <X />
+            </TouchableOpacity>
+          )}
 
-        {header}
+          {header}
 
-        {scrollable === false ? (
-          children
-        ) : (
-          <Sheet.ScrollView
-            scrollEnabled={scrollable}
-            keyboardShouldPersistTaps={'handled'}
-            automaticallyAdjustKeyboardInsets
-            backgroundColor={'white'}
-            contentContainerStyle={{
-              // paddingBottom: 250,
-              flexGrow: 1,
-            }}
-          >
-            {children}
-          </Sheet.ScrollView>
-        )}
+          {scrollable === false ? (
+            children
+          ) : (
+            <Sheet.ScrollView
+              scrollEnabled={scrollable}
+              keyboardShouldPersistTaps={'handled'}
+              automaticallyAdjustKeyboardInsets
+              backgroundColor={'white'}
+              contentContainerStyle={{
+                flexGrow: 1,
+              }}
+            >
+              {children}
+            </Sheet.ScrollView>
+          )}
+        </BottomSheetModalProvider>
       </Sheet.Frame>
     </Sheet>
   )

diff --git a/src/components/Skeleton/CardSkeleton.tsx b/src/components/Skeleton/CardSkeleton.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react'
+import React, { ComponentProps, ComponentPropsWithoutRef } from 'react'
 import { Platform } from 'react-native'
 import { useDerivedValue, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'
 import Chip from '@/components/Chip/Chip'
@@ -76,8 +76,8 @@ const SkeCardDate = () => {
   )
 }
 
-const SkeCardButton = (props: { full?: boolean }) => {
-  return <ButtonFrameStyled bg={SkeletonColor} {...props} />
+const SkeCardButton = (props: ComponentPropsWithoutRef<typeof ButtonFrameStyled>) => {
+  return <ButtonFrameStyled bg={SkeletonColor} width={100} {...props}></ButtonFrameStyled>
 }
 
 const SkeActions = () => {
@@ -99,7 +99,7 @@ const SkeCardAuthor = () => {
 }
 
 const SkeCardImage = () => {
-  return <Stack height="$20" flex={1} bg={SkeletonColor} borderRadius="$1" />
+  return <Stack height="$15" flex={1} bg={SkeletonColor} borderRadius="$1" />
 }
 
 export type SkeCardDescritionProps = {

diff --git a/src/components/WaitingScreen.tsx b/src/components/WaitingScreen.tsx
@@ -5,7 +5,7 @@ export default function WaitingScreen() {
   return (
     <YStack justifyContent="center" alignItems="center" gap="$4" height="100%" flex={1} position="absolute" top={0} left={0} width="100%" pointerEvents="none">
       <EuCampaignIllustration />
-      <Spinner color="$blue7" size="large" />
+      <Spinner color="$blue9" size="large" />
     </YStack>
   )
 }
diff --git a/src/components/base/Select/SelectBottomSheet.tsx b/src/components/base/Select/SelectBottomSheet.tsx
@@ -51,6 +51,7 @@ const SelectBottomSheet = forwardRef<ModalDropDownRef, BottomsheetLogicProps>(({
         ref={bottomSheetRef}
         backdropComponent={renderBackdrop}
         enablePanDownToClose
+        // index={-1}
         enableDynamicSizing={false}
         snapPoints={snapPoints}
         onDismiss={handleClose}

diff --git a/src/components/base/Select/SelectV3.tsx b/src/components/base/Select/SelectV3.tsx
@@ -19,11 +19,11 @@ const Select = <A extends string>(props: SelectProps<A>) => {
   }, [props.disabled])
 
   const Selector = useMemo(() => {
-    return media.gtMd ? SelectDropdown : SelectBottomSheet
+    return media.gtSm ? SelectDropdown : SelectBottomSheet
   }, [media])
 
   const selectorRef = useMemo(() => {
-    return media.gtMd ? modalRef : bottomSheetRef
+    return media.gtSm ? modalRef : bottomSheetRef
   }, [media])
 
   return (

diff --git a/src/features/events/pages/detail/EventDesktopScreen.tsx b/src/features/events/pages/detail/EventDesktopScreen.tsx
@@ -155,7 +155,7 @@ const EventDesktopAsideSkeleton = () => {
   return (
     <PageLayout.SideBarRight alwaysShow paddingTop={0}>
       <SkeCard.Content>
-        <SkeCard.Button />
+        <SkeCard.Button full size="xl" />
         <SkeCard.Separator />
         <SkeCard.Date />
         <SkeCard.Date />
@@ -164,9 +164,9 @@ const EventDesktopAsideSkeleton = () => {
           <SkeCard.Author />
         </SkeCard.Section>
         <SkeCard.Section>
-          <SkeCard.Button full />
-          <SkeCard.Button full />
-          <SkeCard.Button full />
+          <SkeCard.Button full size="xl" />
+          <SkeCard.Button full size="xl" />
+          <SkeCard.Button full size="xl" />
         </SkeCard.Section>
       </SkeCard.Content>
     </PageLayout.SideBarRight>

diff --git a/src/features/events/pages/detail/EventMobileScreen.tsx b/src/features/events/pages/detail/EventMobileScreen.tsx
@@ -119,9 +119,9 @@ export const EventMobileScreenSkeleton = () => {
             <SkeCard.Author />
           </SkeCard.Section>
           <SkeCard.Section>
-            <SkeCard.Button full />
-            <SkeCard.Button full />
-            <SkeCard.Button full />
+            <SkeCard.Button full size="xl" />
+            <SkeCard.Button full size="xl" />
+            <SkeCard.Button full size="xl" />
           </SkeCard.Section>
         </SkeCard.Content>
       </SkeCard>

diff --git a/src/features/events/pages/index.tsx b/src/features/events/pages/index.tsx
@@ -14,7 +14,6 @@ import { useGetProfil } from '@/services/profile/hook'
 import { useScrollToTop } from '@react-navigation/native'
 import { ChevronDown, Filter } from '@tamagui/lucide-icons'
 import { isPast } from 'date-fns'
-import { router } from 'expo-router'
 import { getToken, Spinner, useMedia, XStack, YStack } from 'tamagui'
 import { useDebounce } from 'use-debounce'
 
@@ -93,25 +92,6 @@ const HeaderList = (props: { listRef: React.RefObject<SectionList> }) => {
   return null
 }
 
-// const EventListCard = memo((args: { item: RestItemEvent; cb: Parameters<typeof mapFullProps>[1] }) => {
-//   if (isFullEvent(args.item)) {
-//     return <MemoizedEventCard {...mapFullProps(args.item, args.cb)} />
-//   }
-//   if (isPartialEvent(args.item)) {
-//     return (
-//       <AuthFallbackWrapper
-//         fallback={
-//           <DialogAuth title="D'autres événements vous attendent, connectez-vous ou créez un compte !">
-//           </DialogAuth>
-//         }
-//       >
-//         <PartialEventCard {...mapPartialProps(args.item, args.cb)} />
-//       </AuthFallbackWrapper>
-//     )
-//   }
-//   return null
-// })
-
 const EventList = ({ activeTab }: { activeTab: 'events' | 'myEvents' }) => {
   const media = useMedia()
   const { session } = useSession()

diff --git a/src/features/profil/pages/account/form/ForceBirthdateModal.tsx b/src/features/profil/pages/account/form/ForceBirthdateModal.tsx
@@ -1,55 +1,90 @@
-import { Fragment } from 'react'
+import { Fragment, useMemo } from 'react'
 import DatePickerField from '@/components/DatePicker'
 import { VoxHeader } from '@/components/Header/Header'
 import { MessageCard } from '@/components/MessageCard/MessageCard'
 import ModalOrPageBase from '@/components/ModalOrPageBase/ModalOrPageBase'
+import NationalitySelect from '@/components/NationalitySelect/NationalitySelect'
 import { useGetDetailProfil } from '@/services/profile/hook'
 import { Info } from '@tamagui/lucide-icons'
 import { Controller } from 'react-hook-form'
 import { View } from 'tamagui'
 import * as z from 'zod'
 import AbstractProfilForm from './AbstractProfilForm'
-import { validateBirthdateFormSchema } from './schema'
+import { validateBirthdateFormSchema, validateNationalityFormSchema } from './schema'
 
 const ForceBirthdateModal = () => {
   const { data: profile } = useGetDetailProfil()
+  const message = useMemo(() => {
+    const base = 'Pour accéder à votre profil, veuillez renseigner votre '
+    if (profile.birthdate && !profile.nationality) {
+      return base + 'nationalité.'
+    }
+    if (!profile.birthdate && profile.nationality) {
+      return base + 'date de naissance.'
+    }
+    return base
+  }, [profile])
+
   return (
-    <ModalOrPageBase open={!Boolean(profile.birthdate)} header={<VoxHeader.ModalFrame />}>
+    <ModalOrPageBase open={!Boolean(profile.birthdate) || !Boolean(profile.nationality)} header={<VoxHeader.ModalFrame />}>
       <AbstractProfilForm
         uuid={profile.uuid}
         defaultValues={
           {
             birthdate: profile.birthdate,
+            nationality: profile.nationality ?? undefined,
           } as const
         }
         validatorSchema={z.object({
           birthdate: validateBirthdateFormSchema,
+          nationality: validateNationalityFormSchema,
         })}
       >
         {({ control }) => (
           <Fragment>
             <MessageCard theme="yellow" iconLeft={Info}>
-              Pour accéder à votre profil, veuillez renseigner votre date de naissance.
+              {message}
             </MessageCard>
 
-            <View $gtMd={{ flexDirection: 'row' }} gap="$4">
-              <View $gtMd={{ flex: 1, flexBasis: 0 }}>
-                <Controller
-                  name="birthdate"
-                  control={control}
-                  render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
-                    <DatePickerField
-                      color="gray"
-                      label="Date de naissance"
-                      type="date"
-                      value={value ?? undefined}
-                      onBlur={onBlur}
-                      onChange={onChange}
-                      error={error?.message}
-                    />
-                  )}
-                />
-              </View>
+            <View $gtMd={{ flexDirection: 'column' }} gap="$4">
+              {!profile.birthdate ? (
+                <View $gtMd={{ flex: 1, flexBasis: 0 }}>
+                  <Controller
+                    name="birthdate"
+                    control={control}
+                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
+                      <DatePickerField
+                        color="gray"
+                        label="Date de naissance"
+                        type="date"
+                        value={value ?? undefined}
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        error={error?.message}
+                      />
+                    )}
+                  />
+                </View>
+              ) : null}
+              {!profile.nationality ? (
+                <View $gtMd={{ flex: 1, flexBasis: 0 }}>
+                  <Controller
+                    name="nationality"
+                    control={control}
+                    render={({ field: { onBlur, onChange, value }, fieldState: { error } }) => (
+                      <NationalitySelect
+                        id="nationality"
+                        color="gray"
+                        value={value ?? undefined}
+                        placeholder="Nationalité"
+                        onBlur={onBlur}
+                        onChange={onChange}
+                        error={error?.message}
+                      />
+                    )}
+                  />
+                </View>
+              ) : null}
             </View>
           </Fragment>
         )}

diff --git a/src/features/profil/pages/account/form/InformationForm.tsx b/src/features/profil/pages/account/form/InformationForm.tsx
@@ -5,11 +5,10 @@ import Text from '@/components/base/Text'
 import DatePickerField from '@/components/DatePicker'
 import { MessageCard } from '@/components/MessageCard/MessageCard'
 import NationalitySelect from '@/components/NationalitySelect/NationalitySelect'
-import VoxCard from '@/components/VoxCard/VoxCard'
 import { RestDetailedProfileResponse } from '@/services/profile/schema'
 import { Info } from '@tamagui/lucide-icons'
 import { Controller } from 'react-hook-form'
-import { View, XStack } from 'tamagui'
+import { View } from 'tamagui'
 import AbstractProfilForm from './AbstractProfilForm'
 import { validateInformationsFormSchema } from './schema'
 

diff --git a/src/features/profil/pages/account/form/schema.ts b/src/features/profil/pages/account/form/schema.ts
@@ -14,11 +14,15 @@ export const validateBirthdateFormSchema = z.date().refine((birthdate) => isBefo
   message: "L'âge doit être d'au moins 15 ans.",
 })
 
+export const validateNationalityFormSchema = z.string({ message: 'La nationalité est obligatoire.' }).refine((nationality) => nationality.length === 2, {
+  message: 'La nationalité doit être composée de 2 caractères.',
+})
+
 export const validateInformationsFormSchema = z.object({
   first_name: requiredString('Le prénom'),
   last_name: requiredString('Le nom'),
   gender: z.enum(['male', 'female', 'other'], buildReqError('Le genre')),
-  nationality: z.string().length(2, 'Le code pays doit être de deux lettres').optional(),
+  nationality: validateNationalityFormSchema,
   birthdate: validateBirthdateFormSchema,
 })