[PC-8087] Corriger le problème de traduction vide en développement

doc/i18n/getting-started.md

@@ -7,7 +7,32 @@ import { Text, View } from 'react-native'
 import { t } from '@lingui/macro'
 
 function HelloWorld({ name: string }) {
-  return <View><Text>{t(`Hello ${name}`)}</Text></View>
+  return (
+    <View>
+      <Text>{t(`Hello World`)}</Text>
+    </View>
+  )
+}
+```
+
+For parameterized text, use this syntax:
+
+```tsx
+import { Text, View } from 'react-native'
+import { t } from '@lingui/macro'
+
+function HelloWorld({ name: string }) {
+  return (
+    <View>
+      <Text>
+        {t({
+          id: 'hello name', // Mandatory
+          values: { name },
+          message: 'Hello {name}',
+        })}
+      </Text>
+    </View>
+  )
 }
 ```
 
@@ -17,7 +42,7 @@ For plural, you can use:
 import { Text } from 'react-native'
 import { plural } from '@lingui/macro'
 
-function ShowResultsText({ countr: number }) {
+function ShowResultsText({ count: number }) {
   return (
     <Text>
       {plural(count, {
@@ -36,19 +61,14 @@ V3 brings the `plural` into our application, but it also brings two new non bloc
 1. Test unit doesn't exist properly : https://github.com/lingui/js-lingui/issues/1041
 2. Translation may be empty in `development` and show a warning : https://github.com/lingui/js-lingui/issues/1042
 
-*(2)* can be problematic while in development, 
-this happens because the variable to interpolate is returning a `function` instead of a `string`.
-It can easily be fixed by calling `.toString()` on the variable. 
-
-> Don't forget to remove every `.toString()` as they are not required in `production` builds 
-> and that bug should be fixed in a futur release of Lingui v3.
+To solve (2), prefer the parameterised syntax.
 
 ### v2 to v3 syntax changes
 
 V2 syntax:
 
 ```jsx
-_(t(`text`)) 
+_(t(`text`))
 ```
 
 V3 use macro, you don't need `_` anymore:
@@ -83,8 +103,10 @@ You don't need to add date formatting in the translation, do not write:
 t`À retirer avant le\u00a0${formatToCompleteFrenchDate(expirationDatetime, false)}`
 ```
 
-Instead, write the translation and concatenate the non translated text : 
+Instead, write the translation and concatenate the non translated text:
 
 ```jsx
 t`À retirer avant le` + `\u00a0${formatToCompleteFrenchDate(expirationDatetime, false)}`
 ```
+
+You can also use the parameterised syntax.

src/features/auth/forgottenPassword/ReinitializePassword.tsx

@@ -100,7 +100,7 @@ export const ReinitializePassword = () => {
         <Spacer.Column numberOfSpaces={2} />
         <InputError
           visible={displayNotMatchingError}
-          messageId="les mots de passe ne concordent pas"
+          messageId={t`les mots de passe ne concordent pas`}
           numberOfSpacesTop={0}
         />
         <Spacer.Column numberOfSpaces={6} />

src/features/auth/signup/SetBirthday.tsx

@@ -117,12 +117,14 @@ export const SetBirthday: FunctionComponent<Props> = ({ route }) => {
       return (
         <InputError
           visible
-          messageId="Tu dois avoir 16 ans pour t'inscrire"
+          messageId={t`Tu dois avoir 16 ans pour t'inscrire`}
           numberOfSpacesTop={5}
         />
       )
     }
-    return <InputError visible messageId="La date choisie est incorrecte" numberOfSpacesTop={5} />
+    return (
+      <InputError visible messageId={t`La date choisie est incorrecte`} numberOfSpacesTop={5} />
+    )
   }
 
   return (
@@ -176,9 +178,12 @@ export const SetBirthday: FunctionComponent<Props> = ({ route }) => {
           <BirthdayCake />
           <Spacer.Column numberOfSpaces={2} />
           <StyledBody>
-            {t`L’application pass Culture est accessible à tous.
-         Si tu as 18 ans et que tu fais partie d’un département éligible, tu es éligible pour obtenir une aide financière de ${deposit}
-          proposée par le Ministère de la Culture qui sera créditée directement sur ton compte pass Culture.`}
+            {t({
+              id: 'application accessible pour certains départements',
+              values: { deposit },
+              message:
+                'L’application pass Culture est accessible à tous.\nSi tu as 18 ans et que tu fais partie d’un département éligible, tu es éligible pour obtenir une aide financière de {deposit} proposée par le Ministère de la Culture qui sera créditée directement sur ton compte pass Culture.',
+            })}
           </StyledBody>
         </ModalChildrenContainer>
       </AppInformationModal>

src/features/auth/signup/SetEmail.tsx

@@ -87,7 +87,7 @@ export const SetEmail: FunctionComponent = () => {
             />
             <InputError
               visible={hasError}
-              messageId="Format de l'e-mail incorrect"
+              messageId={t`Format de l'e-mail incorrect`}
               numberOfSpacesTop={1}
             />
           </StyledInput>

src/features/auth/signup/SetPostalCode.tsx

@@ -89,7 +89,7 @@ export const SetPostalCode: FunctionComponent<Props> = ({ route }) => {
             />
             <InputError
               visible={hasError}
-              messageId="Code postal introuvable"
+              messageId={t`Code postal introuvable`}
               numberOfSpacesTop={1}
             />
           </StyledInput>

src/features/auth/signup/VerifyEligibility.tsx

@@ -33,7 +33,12 @@ export function VerifyEligibility(props: Props) {
       icon={HappyFaceStars}
       iconSize={getSpacing(65)}>
       <StyledBody>
-        {t`Pour que tu puisses bénéficier de l’aide financière de ${deposit} offerte par le Ministère de la Culture, nous avons besoin de vérifier ton éligibilité.`}
+        {t({
+          id: 'need verify eligibility',
+          values: { deposit },
+          message:
+            'Pour que tu puisses bénéficier de l’aide financière de {deposit} offerte par le Ministère de la Culture, nous avons besoin de vérifier ton éligibilité.',
+        })}
       </StyledBody>
       <Spacer.Column numberOfSpaces={8} />
       <ButtonPrimaryWhite title={t`Vérifier mon éligibilité`} onPress={goToIdCheckWebView} />

src/features/auth/signup/__snapshots__/SetBirthday.test.tsx.snap

@@ -985,8 +985,7 @@ Array [
               }
             >
               L’application pass Culture est accessible à tous.
-Si tu as 18 ans et que tu fais partie d’un département éligible, tu es éligible pour obtenir une aide financière de 500 €
-proposée par le Ministère de la Culture qui sera créditée directement sur ton compte pass Culture.
+Si tu as 18 ans et que tu fais partie d’un département éligible, tu es éligible pour obtenir une aide financière de 500 € proposée par le Ministère de la Culture qui sera créditée directement sur ton compte pass Culture.
             </Text>
           </View>
         </View>

src/features/bookOffer/components/BookingDetails.tsx

@@ -77,6 +77,12 @@ export const BookingDetails: React.FC<Props> = ({ stocks }) => {
 
   const onPressBookOffer = () => mutate({ quantity, stockId: stock.id })
 
+  const deductedAmount = t({
+    id: 'montant déduit',
+    values: { price },
+    message: '{price} seront déduits de ton crédit pass Culture',
+  })
+
   return (
     <Container>
       <Banner title={disclaimer} />
@@ -93,11 +99,7 @@ export const BookingDetails: React.FC<Props> = ({ stocks }) => {
       <Spacer.Column numberOfSpaces={6} />
 
       <ButtonPrimary title={t`Confirmer la réservation`} onPress={onPressBookOffer} />
-      {price ? (
-        <Caption>{t`${price} seront déduits de ton crédit pass Culture`}</Caption>
-      ) : (
-        <Spacer.Column numberOfSpaces={4} />
-      )}
+      {price ? <Caption>{deductedAmount}</Caption> : <Spacer.Column numberOfSpaces={4} />}
     </Container>
   )
 }

src/features/bookOffer/components/BookingInformations.tsx

@@ -39,7 +39,11 @@ export const BookingInformations: React.FC = () => {
   if (category.categoryType === CategoryType.Event) {
     const subtext =
       stock.price > 0 && quantity === 2
-        ? t`(${formatToFrenchDecimal(stock.price)} x 2 places)`
+        ? t({
+            id: 'prix duo',
+            values: { price: formatToFrenchDecimal(stock.price) },
+            message: '({price} x 2 places)',
+          })
         : undefined
 
     return (

src/features/bookOffer/components/CancellationDetails.tsx

@@ -24,7 +24,11 @@ export const CancellationDetails: React.FC = () => {
     message =
       limitDate < new Date()
         ? t`Cette réservation n’est pas annulable`
-        : t`Cette réservation peut être annulée jusqu’au ${formatDate(limitDate)}`
+        : t({
+            id: "réservation annulable jusqu'au",
+            values: { date: formatDate(limitDate) },
+            message: 'Cette réservation peut être annulée jusqu’au {date}',
+          })
   }
 
   return (

src/features/bookOffer/pages/BookingConfirmation.tsx

@@ -50,7 +50,11 @@ export function BookingConfirmation() {
       icon={TicketBooked}
       iconSize={getSpacing(65)}>
       <StyledBody>
-        {t`Il te reste encore ${formatToFrenchDecimal(amountLeft)} à dépenser sur le pass !`}
+        {t({
+          id: 'credit left to spend',
+          values: { credit: formatToFrenchDecimal(amountLeft) },
+          message: 'Il te reste encore {credit} à dépenser sur le pass !',
+        })}
       </StyledBody>
       <Spacer.Column numberOfSpaces={4} />
       <StyledBody>

src/features/bookings/components/CancelBookingModal.test.tsx

@@ -92,7 +92,7 @@ describe('<CancelBookingModal />', () => {
         <CancelBookingModal visible dismissModal={mockDismissModal} booking={booking} />
       )
     )
-    getByText('19' + '\u00a0' + '€ seront recrédités sur ton pass Culture.')
+    getByText('19 € seront recrédités sur ton pass Culture.')
   })
 
   it('should display refund rule if user is ex beneficiary and offer is not free', () => {

src/features/bookings/components/CancelBookingModal.tsx

@@ -109,10 +109,20 @@ const Refund = styled(Typo.Body)({
 function getRefundRule(booking: Booking, user?: UserProfileResponse, credit?: Credit) {
   const price = convertCentsToEuros(booking.totalAmount)
   if (price > 0 && user && credit) {
-    if (isUserExBeneficiary(user, credit))
-      return t`Les ${price} € ne seront pas recrédités sur ton pass Culture car il est expiré.`
-    if (isUserBeneficiary(user))
-      return price + '\u00a0' + t`€ seront recrédités sur ton pass Culture.`
+    if (isUserExBeneficiary(user, credit)) {
+      return t({
+        id: 'not refunded because expired',
+        values: { price },
+        message: 'Les {price} € ne seront pas recrédités sur ton pass Culture car il est expiré.',
+      })
+    }
+    if (isUserBeneficiary(user)) {
+      return t({
+        id: 'refunded on your pass',
+        values: { price },
+        message: '{price} € seront recrédités sur ton pass Culture.',
+      })
+    }
   }
   return null
 }

src/features/bookings/components/EndedBookingItem.tsx

@@ -84,8 +84,13 @@ function getEndedBookingReason(
 }
 
 function getEndedBookingDateLabel(cancellationDate?: Date | null, dateUsed?: Date | null) {
-  if (dateUsed) return t`le ${formatToSlashedFrenchDate(new Date(dateUsed).toISOString())}`
-  if (cancellationDate)
-    return t`le ${formatToSlashedFrenchDate(new Date(cancellationDate).toISOString())}`
+  const endDate = dateUsed ?? cancellationDate
+  if (endDate) {
+    return t({
+      id: 'jour de fin de résa',
+      values: { date: formatToSlashedFrenchDate(new Date(endDate).toISOString()) },
+      message: 'le {date}',
+    })
+  }
   return null
 }

src/features/bookings/components/OnGoingBookingsList.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro'
+import { plural } from '@lingui/macro'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { FlatList, ListRenderItem, NativeScrollEvent, View } from 'react-native'
@@ -33,11 +33,16 @@ export function OnGoingBookingsList(props: OnGoingBookingsListProps) {
   const bookings = props.bookings || emptyBookings
   const onGoingBookingsCount = bookings.length
   const hasBookings = onGoingBookingsCount > 0
-  const bookingsCountLabel =
-    `${onGoingBookingsCount}\u00a0` + getBookingsCountLabel(onGoingBookingsCount > 1)
+  const bookingsCountLabel = plural(onGoingBookingsCount, {
+    one: '# réservation en cours',
+    other: '# réservations en cours',
+  })
 
   const endedBookings = props?.endedBookings || emptyBookings
-  const endedBookingsLabel = getEndedBookingsCountLabel(endedBookings.length > 1)
+  const endedBookingsLabel = plural(endedBookings.length, {
+    one: 'Réservation terminée',
+    other: 'Réservations terminées',
+  })
 
   const ListEmptyComponent = useCallback(() => <NoBookingsView />, [])
   const ListHeaderComponent = useCallback(
@@ -91,12 +96,6 @@ export function OnGoingBookingsList(props: OnGoingBookingsListProps) {
   )
 }
 
-const getBookingsCountLabel = (plural: boolean) =>
-  plural ? t`réservations en cours` : t`réservation en cours`
-
-const getEndedBookingsCountLabel = (plural: boolean) =>
-  plural ? t`Réservations terminées` : t`Réservation terminée`
-
 const keyExtractor = (item: Booking) => item.id.toString()
 
 const renderItem: ListRenderItem<Booking> = ({ item }) => <OnGoingBookingItem booking={item} />

src/features/bookings/helpers.ts

@@ -58,7 +58,11 @@ export function getBookingLabels(booking: Booking, properties: BookingProperties
     dateLabel = t`Permanent`
   } else if (properties.isEvent) {
     dateLabel = beginningDatetime
-      ? t`Le ${formatToCompleteFrenchDateTime(beginningDatetime, false)}`
+      ? t({
+          id: 'le jour',
+          values: { day: formatToCompleteFrenchDateTime(beginningDatetime, false) },
+          message: 'Le {day}',
+        })
       : ''
 
     const isBeginningToday = beginningDatetime ? isToday(beginningDatetime) : false
@@ -70,7 +74,11 @@ export function getBookingLabels(booking: Booking, properties: BookingProperties
     }
   } else if (properties.isPhysical) {
     dateLabel = expirationDatetime
-      ? t`À retirer avant le` + `\u00a0${formatToCompleteFrenchDate(expirationDatetime, false)}`
+      ? t({
+          id: 'withdraw before date',
+          values: { dateLimit: formatToCompleteFrenchDate(expirationDatetime, false) },
+          message: 'À retirer avant le {dateLimit}',
+        })
       : ''
 
     const isExpiringToday = expirationDatetime ? isToday(expirationDatetime) : false

src/features/bookings/pages/Bookings.test.tsx

@@ -26,7 +26,7 @@ describe('Bookings', () => {
   it('should display the right number of ongoing bookings', async () => {
     const { queryByText } = renderBookings(bookingsSnap)
 
-    expect(queryByText('1\u00a0réservation en cours')).toBeTruthy()
+    expect(queryByText('1 réservation en cours')).toBeTruthy()
   })
 
   it('should display the empty bookings dedicated view', async () => {

src/features/bookings/pages/EndedBookings.test.tsx

@@ -20,7 +20,7 @@ describe('EndedBookings', () => {
   it('should display the right number of ended bookings', () => {
     const { queryByText } = renderEndedBookings(bookingsSnap)
 
-    expect(queryByText('1\u00a0réservation terminée')).toBeTruthy()
+    expect(queryByText('1 réservation terminée')).toBeTruthy()
   })
 })
 

src/features/bookings/pages/EndedBookings.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro'
+import { plural, t } from '@lingui/macro'
 import React from 'react'
 import { ScrollView } from 'react-native-gesture-handler'
 import styled from 'styled-components/native'
@@ -13,8 +13,10 @@ export const EndedBookings: React.FC = () => {
   const { data: bookings } = useBookings(true)
 
   const endedBookingsCount = bookings?.ended_bookings?.length || 0
-  const endedBookingsLabel =
-    `${endedBookingsCount}\u00a0` + getEndedBookingsCountLabel(endedBookingsCount > 1)
+  const endedBookingsLabel = plural(endedBookingsCount, {
+    one: '# réservation terminée',
+    other: '# réservations terminées',
+  })
 
   return (
     <React.Fragment>
@@ -30,9 +32,6 @@ export const EndedBookings: React.FC = () => {
   )
 }
 
-const getEndedBookingsCountLabel = (plural: boolean) =>
-  plural ? t`réservations terminées` : t`réservation terminée`
-
 const EndedBookingsCount = styled(Typo.Body)({
   color: ColorsEnum.GREY_DARK,
   paddingHorizontal: getSpacing(5),