Skip to content

Commit

Permalink
(PC-33482) feat(NC): Fix use of pacific Franc in search price modal (#…
Browse files Browse the repository at this point in the history
…7446)

* (PC-33482) feat(NC): create priceSchema

* (PC-33482) feat(NC): create formatCurrencyFromCentsWithoutCurrenySymbol

* (PC-33482) feat(NC): remove useless tests in formatCurrencyFromCents

* (PC-33482) feat(NC): create PriceInputController

* (PC-33482) feat(NC): update PriceModal to use new currency

* (PC-33482) feat(NC): update Price and SearchFilter

* (PC-33482) feat(NC): use it instead test in priceSchema tests

* (PC-33482) feat(NC): change after review
  • Loading branch information
lbeneston-pass authored Dec 27, 2024
1 parent 3926630 commit 1ff7dcb
Show file tree
Hide file tree
Showing 19 changed files with 697 additions and 653 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down Expand Up @@ -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={
Expand Down Expand Up @@ -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={
[
Expand Down
4 changes: 4 additions & 0 deletions src/features/navigation/screenParamsUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 />)
}
Original file line number Diff line number Diff line change
@@ -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>
)}
/>
)
}
Loading

0 comments on commit 1ff7dcb

Please sign in to comment.