chore: update required fields for submission

artsy · May 3, 2024 · 9c5798f · 9c5798f
1 parent d0a0068
commit 9c5798f
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 41 deletions.
diff --git a/src/app/Components/ArtistAutosuggest/ArtistAutosuggest.tsx b/src/app/Components/ArtistAutosuggest/ArtistAutosuggest.tsx
@@ -21,6 +21,7 @@ export const ArtistAutosuggest: React.FC<ArtistAutosuggestProps> = ({
     values: { artist, artistId },
     setFieldValue,
     errors,
+    validateField,
   } = useFormikContext<ArtworkDetailsFormModel>()
   const searchProviderValues = useSearchProviderValues(artist)
 
@@ -53,15 +54,21 @@ export const ArtistAutosuggest: React.FC<ArtistAutosuggestProps> = ({
         title={title || undefined}
         placeholder={placeholder}
         icon={<SearchIcon width={18} height={18} />}
-        onChangeText={onArtistSearchTextChange}
+        onChangeText={(e) => {
+          onArtistSearchTextChange(e)
+        }}
         value={artist}
         autoCorrect={false}
         accessibilityLabel="Artist"
-        onBlur={() => setFocused(false)}
+        onBlur={() => {
+          setFocused(false)
+          validateField("artist")
+          validateField("artistId")
+        }}
         onFocus={() => setFocused(true)}
         enableClearButton
         testID="Submission_ArtistInput"
-        error={!focused && artist && !isArtistSelected ? errors.artistId : undefined}
+        error={!focused && !isArtistSelected ? errors.artistId : undefined}
         required
       />
 

diff --git a/src/app/Components/Select/Components/SelectButton.tsx b/src/app/Components/Select/Components/SelectButton.tsx
@@ -18,6 +18,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-na
 
 export const SelectButton: React.FC<{
   disabled?: boolean
+  error?: string
   hasError?: boolean
   modalVisible: boolean
   onPress(): void
@@ -32,6 +33,7 @@ export const SelectButton: React.FC<{
   value?: React.ReactNode
 }> = ({
   disabled,
+  error,
   hasError,
   modalVisible,
   onPress,
@@ -137,12 +139,18 @@ export const SelectButton: React.FC<{
           </Flex>
         </AnimatedFlex>
       </Touchable>
-      {!!required || !!optional ? (
+      {/* No need to show required if we have an error message */}
+      {(!!required || !!optional) && !error ? (
         <Text color="black60" variant="xs" pl={`${HORIZONTAL_PADDING}px`} mt={0.5}>
           {!!required && "* Required"}
           {!!optional && "* Optional"}
         </Text>
       ) : null}
+      {!!error && (
+        <Text color="red100" mt={1} variant="xs" testID="input-error">
+          {error}
+        </Text>
+      )}
     </>
   )
 }

diff --git a/src/app/Components/Select/Select.tsx b/src/app/Components/Select/Select.tsx
@@ -13,44 +13,47 @@ export interface SelectOption<ValueType> {
 
 export interface SelectProps<ValueType> {
   disabled?: boolean
-  options: Array<SelectOption<ValueType>>
-  value: ValueType | null | undefined
-  placeholder?: string
-  title?: string
-  optional?: boolean
-  required?: boolean
-  subTitle?: string
   enableSearch?: boolean
-  maxModalHeight?: number
+  error?: string
   hasError?: boolean
-  tooltipText?: string | JSX.Element
-  testID?: string
+  maxModalHeight?: number
+  onModalFinishedClosing?(): void
   onSelectValue(value: ValueType, index: number): void
+  onTooltipPress?(): void
+  optional?: boolean
+  options: Array<SelectOption<ValueType>>
+  placeholder?: string
   renderButton?(args: { selectedValue: ValueType | null; onPress(): void }): JSX.Element
   renderItemLabel?(value: SelectOption<ValueType>): JSX.Element
-  onTooltipPress?(): void
-  onModalFinishedClosing?(): void
+  required?: boolean
+  showTitleLabel?: boolean
+  subTitle?: string
+  testID?: string
+  title?: string
+  tooltipText?: string | JSX.Element
+  value: ValueType | null | undefined
 }
 
 export const Select = <ValueType,>({
   disabled = false,
-  options,
-  value,
-  placeholder,
-  title,
-  optional,
-  required,
-  subTitle,
   enableSearch,
-  maxModalHeight,
+  error,
   hasError,
-  tooltipText,
-  onTooltipPress,
+  maxModalHeight,
+  onModalFinishedClosing,
   onSelectValue,
+  onTooltipPress,
+  optional,
+  options,
+  placeholder,
   renderButton,
   renderItemLabel,
-  onModalFinishedClosing,
+  required,
+  subTitle,
   testID,
+  title,
+  tooltipText,
+  value,
 }: SelectProps<ValueType>) => {
   const [showingModal, setShowingModal] = useState(false)
 
@@ -105,6 +108,7 @@ export const Select = <ValueType,>({
           required={required}
           hasError={hasError}
           modalVisible={showingModal}
+          error={error}
         />
       )}
       <SelectModal

diff --git a/src/app/Components/Select/SelectV2.tsx b/src/app/Components/Select/SelectV2.tsx
@@ -26,19 +26,21 @@ export interface SelectOption<ValueType> {
 
 const ROW_HEIGHT = 40
 export interface SelectProps<ValueType> {
-  options: Array<SelectOption<ValueType>>
-  value: ValueType | null
-  placeholder?: string
-  title: string
-  subTitle?: string
   enableSearch?: boolean
-  maxModalHeight?: number
+  error?: string
   hasError?: boolean
-  testID?: string
+  maxModalHeight?: number
+  onModalFinishedClosing?(): void
   onSelectValue(value: ValueType, index: number): void
+  options: Array<SelectOption<ValueType>>
+  placeholder?: string
   renderButton?(args: { selectedValue: ValueType | null; onPress(): void }): JSX.Element
   renderItemLabel?(value: SelectOption<ValueType>): JSX.Element
-  onModalFinishedClosing?(): void
+  showTitleLabel?: boolean
+  subTitle?: string
+  testID?: string
+  title: string
+  value: ValueType | null
 }
 interface State {
   showingModal: boolean
@@ -72,6 +74,7 @@ export class Select<ValueType> extends React.Component<SelectProps<ValueType>, S
       subTitle,
       maxModalHeight,
       hasError,
+      error,
     } = this.props
 
     const selectedItem = options.find((o) => o.value === value)
@@ -89,6 +92,7 @@ export class Select<ValueType> extends React.Component<SelectProps<ValueType>, S
             value={selectedItem?.label}
             onPress={this.open.bind(this)}
             hasError={hasError}
+            error={error}
           />
         )}
         <SelectModal
@@ -116,7 +120,8 @@ const SelectButton: React.FC<{
   hasError?: boolean
   testID?: string
   onPress(): void
-}> = ({ value, placeholder, onPress, title, subTitle, hasError, testID }) => {
+  error?: string
+}> = ({ value, placeholder, onPress, title, subTitle, hasError, testID, error }) => {
   const color = useColor()
   return (
     <Flex>
@@ -151,6 +156,11 @@ const SelectButton: React.FC<{
           <TriangleDown />
         </Flex>
       </TouchableOpacity>
+      {!!error && (
+        <Text color="red100" mt={1} variant="xs" testID="input-error">
+          {error}
+        </Text>
+      )}
     </Flex>
   )
 }

diff --git a/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tsx b/src/app/Scenes/MyCollection/Screens/ArtworkForm/Components/CategoryPicker.tsx
@@ -1,14 +1,18 @@
 import { Select, SelectOption } from "app/Components/Select"
 
 interface ArtworkCategoryPickerProps<T> {
+  error?: string
   handleChange: (v: T) => void
+  onModalFinishedClosing?: () => void
   options: Array<SelectOption<T>>
   required?: boolean
   value: T | null | undefined
 }
 
 export const CategoryPicker = <ValueType,>({
+  error,
   handleChange,
+  onModalFinishedClosing,
   options,
   required = true,
   value,
@@ -23,6 +27,8 @@ export const CategoryPicker = <ValueType,>({
       testID="CategorySelect"
       required={required}
       options={options}
+      error={error}
+      onModalFinishedClosing={onModalFinishedClosing}
     />
   )
 }
diff --git a/src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/ArtworkDetails.tsx b/src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/ArtworkDetails.tsx
@@ -34,15 +34,16 @@ export const ArtworkDetails: React.FC<{
         initialValues={artworkDetails}
         onSubmit={handlePress}
         validationSchema={artworkDetailsValidationSchema}
-        validateOnMount
+        // Validate on blur only when injecting existing values from my collection
+        validateOnMount={artworkDetails.myCollectionArtworkID ? true : false}
       >
-        {({ values, isValid }) => {
+        {({ values, isValid, dirty }) => {
           return (
             <>
               <ArtworkDetailsForm />
               <Spacer y={2} />
               <CTAButton
-                disabled={!isValid}
+                disabled={!isValid || !dirty}
                 onPress={() => handlePress(values)}
                 testID="Submission_ArtworkDetails_Button"
               >

diff --git a/src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/validation.ts b/src/app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/validation.ts
@@ -77,8 +77,8 @@ export const artworkDetailsValidationSchema = Yup.object().shape({
   artistId: Yup.string().required(
     "Please select an artist from the list. Artists who are not  listed cannot be submitted due to limited demand."
   ),
-  title: Yup.string().required().trim(),
-  category: Yup.string().required(),
+  title: Yup.string().required("Title is a required field").trim(),
+  category: Yup.string().required("Please choose a medium from the list."),
 
   // Optional fields
   medium: Yup.string().trim(),