(PC-33482) feat(NC): Fix use of pacific Franc in search price modal

__snapshots__/features/search/pages/modals/PriceModal/PriceModal.native.test.tsx.native-snap

@@ -377,83 +377,80 @@ exports[`<PriceModal/> should render modal correctly after animation and with en
             }
           >
             <View
+              backgroundColor="#f3ecff"
+              style={
+                [
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#f3ecff",
+                    "borderRadius": 8,
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                    "paddingBottom": 16,
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                    "paddingTop": 16,
+                  },
+                ]
+              }
               testID="creditBanner"
             >
               <View
-                backgroundColor="#f3ecff"
                 style={
                   [
                     {
-                      "alignItems": "center",
-                      "backgroundColor": "#f3ecff",
-                      "borderRadius": 8,
-                      "flexDirection": "row",
-                      "justifyContent": "space-between",
-                      "paddingBottom": 16,
-                      "paddingLeft": 16,
                       "paddingRight": 16,
-                      "paddingTop": 16,
                     },
                   ]
                 }
               >
                 <View
-                  style={
-                    [
-                      {
-                        "paddingRight": 16,
-                      },
-                    ]
-                  }
-                >
-                  <View
-                    height={24}
-                    width={24}
-                  >
-                    <Text>
-                      undefined-SVG-Mock
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "flexBasis": 0,
-                        "flexGrow": 1,
-                        "flexShrink": 1,
-                      },
-                    ]
-                  }
+                  height={24}
+                  width={24}
                 >
-                  <Text
-                    style={
-                      [
-                        {
-                          "color": "#161617",
-                          "fontFamily": "Montserrat-SemiBold",
-                          "fontSize": 12,
-                          "lineHeight": 19.2,
-                        },
-                      ]
-                    }
-                    textColor="#161617"
-                  >
-                    Il te reste 70 € sur ton pass Culture.
+                  <Text>
+                    undefined-SVG-Mock
                   </Text>
                 </View>
               </View>
               <View
-                numberOfSpaces={6}
                 style={
                   [
                     {
-                      "height": 24,
+                      "flexBasis": 0,
+                      "flexGrow": 1,
+                      "flexShrink": 1,
                     },
                   ]
                 }
-              />
+              >
+                <Text
+                  style={
+                    [
+                      {
+                        "color": "#161617",
+                        "fontFamily": "Montserrat-SemiBold",
+                        "fontSize": 12,
+                        "lineHeight": 19.2,
+                      },
+                    ]
+                  }
+                  textColor="#161617"
+                >
+                  Il te reste 70 € sur ton pass Culture.
+                </Text>
+              </View>
             </View>
+            <View
+              numberOfSpaces={6}
+              style={
+                [
+                  {
+                    "height": 24,
+                  },
+                ]
+              }
+            />
             <View
               inverseLayout={false}
               style={
@@ -622,37 +619,18 @@ exports[`<PriceModal/> should render modal correctly after animation and with en
                 </View>
               </View>
             </View>
-            <View
-              numberOfSpaces={6}
-              style={
-                [
-                  {
-                    "height": 24,
-                  },
-                ]
-              }
-            />
             <View
               style={
                 [
                   {
                     "backgroundColor": "#F1F1F4",
                     "height": 1,
+                    "marginVertical": 24,
                     "width": "100%",
                   },
                 ]
               }
             />
-            <View
-              numberOfSpaces={6}
-              style={
-                [
-                  {
-                    "height": 24,
-                  },
-                ]
-              }
-            />
             <View
               inverseLayout={false}
               style={
@@ -821,37 +799,18 @@ exports[`<PriceModal/> should render modal correctly after animation and with en
                 </View>
               </View>
             </View>
-            <View
-              numberOfSpaces={6}
-              style={
-                [
-                  {
-                    "height": 24,
-                  },
-                ]
-              }
-            />
             <View
               style={
                 [
                   {
                     "backgroundColor": "#F1F1F4",
                     "height": 1,
+                    "marginVertical": 24,
                     "width": "100%",
                   },
                 ]
               }
             />
-            <View
-              numberOfSpaces={6}
-              style={
-                [
-                  {
-                    "height": 24,
-                  },
-                ]
-              }
-            />
             <View
               style={
                 [

src/features/navigation/screenParamsUtils.ts

@@ -64,6 +64,8 @@ const searchParamsParser = {
   accessibilityFilter: JSON.parse,
   gtls: JSON.parse,
   shouldRedirect: JSON.parse,
+  defaultMinPrice: JSON.stringify,
+  defaultMaxPrice: JSON.stringify,
 }
 
 export const screenParamsParser: ParamsParsers = {
@@ -228,6 +230,8 @@ const searchParamsStringifier = {
   accessibilityFilter: JSON.stringify,
   gtls: JSON.stringify,
   shouldRedirect: JSON.stringify,
+  defaultMinPrice: JSON.stringify,
+  defaultMaxPrice: JSON.stringify,
 }
 
 export const screenParamsStringifier: ParamsStringifiers = {

src/features/search/components/PriceInputController/PriceInputController.native.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useForm, ErrorOption } from 'react-hook-form'
+
+import { render, screen, userEvent } from 'tests/utils'
+
+import { PriceInputController } from './PriceInputController'
+
+type PriceForm = {
+  price: string
+}
+
+const user = userEvent.setup()
+
+describe('<PriceInputController />', () => {
+  it('should not show error when form input is valid', () => {
+    renderPriceInputController({})
+
+    expect(screen.queryByText('error')).not.toBeOnTheScreen()
+  })
+
+  it('should show error when form input is invalid', () => {
+    renderPriceInputController({
+      error: { type: 'custom', message: 'error' },
+    })
+
+    expect(screen.getByText('error')).toBeOnTheScreen()
+  })
+
+  it('should display custom error message when error is set', async () => {
+    renderPriceInputController({
+      error: { type: 'custom', message: 'Prix invalide' },
+    })
+
+    const input = screen.getByPlaceholderText('Prix')
+    await user.type(input, 'abc')
+
+    expect(screen.getByText('Prix invalide')).toBeOnTheScreen()
+  })
+})
+
+const renderPriceInputController = ({
+  error,
+  isDisabled,
+}: {
+  error?: ErrorOption
+  isDisabled?: boolean
+}) => {
+  const PriceForm = () => {
+    const { control, setError } = useForm<PriceForm>({
+      defaultValues: { price: '' },
+    })
+
+    error && setError('price', error)
+    return (
+      <PriceInputController
+        control={control}
+        name="price"
+        label="Prix"
+        placeholder="Prix"
+        accessibilityId="price-input"
+        isDisabled={isDisabled}
+      />
+    )
+  }
+  render(<PriceForm />)
+}

src/features/search/components/PriceInputController/PriceInputController.tsx

@@ -0,0 +1,64 @@
+import React, { PropsWithChildren, ReactElement } from 'react'
+import { Control, Controller, FieldPath, FieldValues } from 'react-hook-form'
+
+import { InputError } from 'ui/components/inputs/InputError'
+import { TextInput } from 'ui/components/inputs/TextInput'
+import { getSpacing } from 'ui/theme/spacing'
+
+interface Props<TFieldValues extends FieldValues, TName>
+  extends Omit<React.ComponentProps<typeof TextInput>, 'value' | 'onChangeText'> {
+  name: TName
+  control: Control<TFieldValues>
+  label: string
+  placeholder?: string
+  rightLabel?: string
+  isDisabled?: boolean
+  accessibilityId: string
+}
+
+export const PriceInputController = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  name,
+  control,
+  label,
+  placeholder,
+  rightLabel,
+  isDisabled,
+  accessibilityId,
+  ...textInputProps
+}: PropsWithChildren<Props<TFieldValues, TName>>): ReactElement => {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
+        <React.Fragment>
+          <TextInput
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            label={label}
+            placeholder={placeholder}
+            rightLabel={rightLabel}
+            disabled={isDisabled}
+            isError={!!error && value.length > 0}
+            textContentType="none"
+            accessibilityDescribedBy={accessibilityId}
+            keyboardType="numeric"
+            autoComplete="off"
+            autoCapitalize="none"
+            {...textInputProps}
+          />
+          <InputError
+            visible={!!error}
+            messageId={error?.message}
+            relatedInputId={accessibilityId}
+            numberOfSpacesTop={getSpacing(0.5)}
+          />
+        </React.Fragment>
+      )}
+    />
+  )
+}