fix touched overwrite, add pricing success condition

src/components/Publish/Navigation/index.module.css

@@ -87,3 +87,7 @@
   background: var(--brand-alert-green);
   border-color: transparent;
 }
+
+.success.current:before {
+  background: var(--font-color-heading);
+}

src/components/Publish/Navigation/index.tsx

@@ -5,15 +5,31 @@ import { wizardSteps } from '../_constants'
 import styles from './index.module.css'
 
 export default function Navigation(): ReactElement {
-  const { values, errors, setFieldValue }: FormikContextType<FormPublishData> =
-    useFormikContext()
+  const {
+    values,
+    errors,
+    touched,
+    setFieldValue
+  }: FormikContextType<FormPublishData> = useFormikContext()
 
   function handleStepClick(step: number) {
     setFieldValue('user.stepCurrent', step)
   }
 
+  function getSuccessClass(step: number) {
     const isSuccessMetadata = errors.metadata === undefined
     const isSuccessServices = errors.services === undefined
+    const isSuccessPricing =
+      errors.pricing === undefined && touched.pricing?.price
+    const isSuccessPreview = false
+
+    const isSuccess =
+      (step === 1 && isSuccessMetadata) ||
+      (step === 2 && isSuccessServices) ||
+      (step === 3 && isSuccessPricing) ||
+      (step === 4 && isSuccessPreview)
+    return isSuccess ? styles.success : null
+  }
 
   return (
     <nav className={styles.navigation}>
@@ -25,9 +41,7 @@ export default function Navigation(): ReactElement {
             // TODO: add success class for all steps
             className={`${
               values.user.stepCurrent === step.step ? styles.current : null
-            } ${step.step === 1 && isSuccessMetadata ? styles.success : null} ${
-              step.step === 2 && isSuccessServices ? styles.success : null
-            }`}
+            } ${getSuccessClass(step.step)}`}
           >
             {step.title}
           </li>

src/components/Publish/Pricing/Price.tsx

@@ -22,21 +22,9 @@ export default function Price({
       <div className={styles.grid}>
         <div className={styles.form}>
           {field.value === 0 ? (
-            <Input
-              value="0"
-              name="pricing.price"
-              type="number"
-              prefix="OCEAN"
-              readOnly
-            />
+            <Input value="0" type="number" prefix="OCEAN" readOnly {...field} />
           ) : (
-            <Input
-              value={field.value}
-              name="pricing.price"
-              type="number"
-              prefix="OCEAN"
-              {...field}
-            />
+            <Input type="number" prefix="OCEAN" {...field} />
           )}
           <Error meta={meta} />
         </div>

src/components/Publish/Services/index.tsx

@@ -16,7 +16,7 @@ const accessTypeOptionsTitles = getFieldContent(
 
 export default function ServicesFields(): ReactElement {
   // connect with Form state, use for conditional field rendering
-  const { values, setFieldValue, setTouched } =
+  const { values, setFieldValue, touched, setTouched } =
     useFormikContext<FormPublishData>()
 
   const accessTypeOptions = [
@@ -55,7 +55,7 @@ export default function ServicesFields(): ReactElement {
 
     const config = getOceanConfig(values.user.chainId)
     config && setFieldValue('services[0].providerUrl.url', config.providerUri)
-    setTouched({ services: [{ providerUrl: { url: true } }] })
+    setTouched({ ...touched, services: [{ providerUrl: { url: true } }] })
   }, [values.user.chainId, setFieldValue, setTouched])
 
   return (