From dcb8a0c6c68b80ce2a1c60538cfc1c2045223493 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 26 Nov 2021 10:11:25 +0000
Subject: [PATCH] fix `touched` overwrite, add pricing success condition

---
 .../Publish/Navigation/index.module.css       |  4 +++
 src/components/Publish/Navigation/index.tsx   | 28 ++++++++++++++-----
 src/components/Publish/Pricing/Price.tsx      | 16 ++---------
 src/components/Publish/Services/index.tsx     |  4 +--
 4 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/Publish/Navigation/index.module.css b/src/components/Publish/Navigation/index.module.css
index 8ffc67c12..75a1a4712 100644
--- a/src/components/Publish/Navigation/index.module.css
+++ b/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);
+}
diff --git a/src/components/Publish/Navigation/index.tsx b/src/components/Publish/Navigation/index.tsx
index 168351cd1..259167313 100644
--- a/src/components/Publish/Navigation/index.tsx
+++ b/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)
   }
 
-  const isSuccessMetadata = errors.metadata === undefined
-  const isSuccessServices = errors.services === undefined
+  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>
diff --git a/src/components/Publish/Pricing/Price.tsx b/src/components/Publish/Pricing/Price.tsx
index 91473bbf7..9cbb700a1 100644
--- a/src/components/Publish/Pricing/Price.tsx
+++ b/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>
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index e26f95e5a..28153f229 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/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 (