Free pricing: added confirm checkbox (#1086)

* added confirm checkbox and connect logic to wizard

* add 'accessDetails' to displayed asset

* restore initial state

* adding 'freeAgreement' option to constants

* moved checkbox for free item aggreament

* improvement on amountDataToken validation

* change Field component with Input and improve UI

* change `onChange` property with `useField` hook

* switch back to Formik Field

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

content/price.json

@@ -28,7 +28,16 @@
     },
     "free": {
       "title": "Free",
-      "info": "Set your data set as free. The datatoken for this data set will be given for free via creating a faucet."
+      "info": "Set your data set as free. The datatoken for this data set will be given for free via creating a faucet.",
+      "fields": [
+        {
+          "name": "freeAgreement",
+          "type": "checkbox",
+          "options": [
+            "I want this asset to be free. I understand network fees are still to be paid"
+          ]
+        }
+      ]
     }
   },
   "pool": {

src/@types/Price.d.ts

@@ -60,4 +60,5 @@ interface PriceOptions {
   weightOnOcean: string
   // easier to keep this as number for Yup input validation
   swapFee: number
+  freeAgreement: boolean
 }

src/components/Publish/Pricing/Free.tsx

@@ -1,14 +1,31 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
+import { useFormikContext } from 'formik'
+import { FormPublishData } from '../_types'
 import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 import styles from './Dynamic.module.css'
 
 export default function Free({ content }: { content: any }): ReactElement {
+  // connect with Form state, use for conditional field rendering
+  const { values, setFieldValue } = useFormikContext<FormPublishData>()
+
+  useEffect(() => {
+    // if the user has agreed, then set pricing to continue
+    if (values.pricing.freeAgreement) {
+      setFieldValue('pricing.price', 1)
+      setFieldValue('pricing.amountDataToken', 1000)
+    } else {
+      // disabled continue button if the user hasn't agree to the "free agreement"
+      setFieldValue('pricing.price', 0)
+      setFieldValue('pricing.amountDataToken', 0)
+    }
+  }, [setFieldValue, values])
+
   return (
     <>
       <FormHelp>{content.info}</FormHelp>
       <h4 className={styles.title}>Price</h4>
-      <Price />
+      <Price content={content} />
     </>
   )
 }

src/components/Publish/Pricing/Price.module.css

@@ -62,7 +62,11 @@
 }
 
 .free {
-  text-align: center;
+  text-align: left;
-  margin: calc(var(--spacer) / 2) 0;
+  margin: calc(var(--spacer) / 2);
   font-size: var(--font-size-base);
 }
+
+.free [class*='FormInput_field'] {
+  margin: 0;
+}

src/components/Publish/Pricing/Price.tsx

@@ -1,16 +1,19 @@
 import Conversion from '@shared/Price/Conversion'
-import { useField, useFormikContext } from 'formik'
+import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import Input from '@shared/FormInput'
 import Error from './Error'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'
+import { getFieldContent } from '../_utils'
 
 export default function Price({
-  firstPrice
+  firstPrice,
+  content
 }: {
   firstPrice?: string
+  content?: any
 }): ReactElement {
   const [field, meta] = useField('pricing.price')
 
@@ -20,7 +23,13 @@ export default function Price({
   return (
     <div className={styles.price}>
       {values.pricing.type === 'free' ? (
-        <h4 className={styles.free}>Free</h4>
+        <div className={styles.free}>
+          <Field
+            {...getFieldContent('freeAgreement', content.fields)}
+            component={Input}
+            name="pricing.freeAgreement"
+          />
+        </div>
       ) : (
         <>
           <div className={styles.grid}>

src/components/Publish/Pricing/index.tsx

@@ -23,7 +23,9 @@ export default function PricingFields(): ReactElement {
   function handleTabChange(tabName: string) {
     const type = tabName.toLowerCase()
     setFieldValue('pricing.type', type)
-    type === 'dynamic' && setFieldValue('pricing.amountDataToken', 1000)
+    setFieldValue('pricing.price', 0)
+    setFieldValue('pricing.freeAgreement', false)
+    type !== 'free' && setFieldValue('pricing.amountDataToken', 1000)
   }
 
   // Always update everything when price value changes

src/components/Publish/_constants.tsx

@@ -96,7 +96,8 @@ export const initialValues: FormPublishData = {
     amountOcean: 50,
     weightOnOcean: '5', // 50% on OCEAN
     weightOnDataToken: '5', // 50% on datatoken
-    swapFee: 0.1 // in %
+    swapFee: 0.1, // in %
+    freeAgreement: false
   }
 }