From 259164e824dd4d3b4f8d3ceacf1c5749453f4214 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Tue, 30 Jul 2024 13:41:23 -0400
Subject: [PATCH] BoxedTextField can error before form submission. Also fix
 free selection

---
 .../PremiumRadioField/BoxedTextField.tsx                   | 1 +
 .../edit/PriceAndAudienceField/PriceAndAudienceScreen.tsx  | 4 ++++
 packages/mobile/src/components/fields/TextField.tsx        | 7 ++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/mobile/src/components/edit/PriceAndAudienceField/PremiumRadioField/BoxedTextField.tsx b/packages/mobile/src/components/edit/PriceAndAudienceField/PremiumRadioField/BoxedTextField.tsx
index 36ee4d2fb8e..2e65f9fd3f5 100644
--- a/packages/mobile/src/components/edit/PriceAndAudienceField/PremiumRadioField/BoxedTextField.tsx
+++ b/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>
diff --git a/packages/mobile/src/components/edit/PriceAndAudienceField/PriceAndAudienceScreen.tsx b/packages/mobile/src/components/edit/PriceAndAudienceField/PriceAndAudienceScreen.tsx
index 36345787ade..6929cede3f6 100644
--- a/packages/mobile/src/components/edit/PriceAndAudienceField/PriceAndAudienceScreen.tsx
+++ b/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
diff --git a/packages/mobile/src/components/fields/TextField.tsx b/packages/mobile/src/components/fields/TextField.tsx
index b96360dbccd..c5c5a43c559 100644
--- a/packages/mobile/src/components/fields/TextField.tsx
+++ b/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) => {