[PAY-3258] BoxedTextField can error before form submission (#9305)

Co-authored-by: Saliou Diallo <[email protected]>

Author: sddioulde

packages/mobile/src/components/edit/PriceAndAudienceField/PremiumRadioField/BoxedTextField.tsx

@@ -52,6 +52,7 @@ export const BoxedTextField = (props: BoxedTextFieldProps) => {
       <TextField
         style={styles.textField}
         styles={{ root: styles.textInput }}
+        errorBeforeSubmit
         {...other}
       />
     </View>

packages/mobile/src/components/edit/PriceAndAudienceField/PriceAndAudienceScreen.tsx

@@ -42,6 +42,9 @@ export const PriceAndAudienceScreen = () => {
     useField<boolean>('is_stream_gated')
   const [{ value: streamConditions }, , { setValue: setStreamConditions }] =
     useField<Nullable<AccessConditions>>('stream_conditions')
+  const [, , { setValue: setPreviewValue }] = useField<Nullable<number>>(
+    'preview_start_seconds'
+  )
   const [{ value: isScheduledRelease }] = useField<boolean>(
     'is_scheduled_release'
   )
@@ -204,6 +207,7 @@ export const PriceAndAudienceScreen = () => {
           onValueChange={() => {
             setIsStreamGated(false)
             setStreamConditions(null)
+            setPreviewValue(null)
           }}
         />
         <PremiumRadioField

packages/mobile/src/components/fields/TextField.tsx

@@ -14,6 +14,7 @@ export type TextFieldProps = FieldProps &
   TextInputProps & {
     noGutter?: boolean
     debouncedValidationMs?: number
+    errorBeforeSubmit?: boolean
   }
 
 const useStyles = makeStyles(({ spacing, typography }) => ({
@@ -46,6 +47,7 @@ export const TextField = (props: TextFieldProps) => {
     id,
     onChangeText,
     error: errorProp,
+    errorBeforeSubmit,
     debouncedValidationMs = 0,
     ...other
   } = props
@@ -72,7 +74,10 @@ export const TextField = (props: TextFieldProps) => {
   }, [debouncedValidationMs, debouncedValidateField, name, value])
   const label = required ? `${labelProp} *` : labelProp
 
-  const hasError = (errorProp ?? errorMessage) && touched && submitCount > 0
+  const hasError =
+    (errorProp ?? errorMessage) &&
+    touched &&
+    (errorBeforeSubmit || submitCount > 0)
 
   const handleChangeText = useCallback(
     (text: string) => {