From 6c7a474136e946318ddb5828a14756c03164892a Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Fri, 18 Feb 2022 12:55:46 +0100
Subject: [PATCH] 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                            | 11 +++++++++-
 src/@types/Price.d.ts                         |  1 +
 src/components/Publish/Pricing/Free.tsx       | 21 +++++++++++++++++--
 .../Publish/Pricing/Price.module.css          |  8 +++++--
 src/components/Publish/Pricing/Price.tsx      | 15 ++++++++++---
 src/components/Publish/Pricing/index.tsx      |  4 +++-
 src/components/Publish/_constants.tsx         |  3 ++-
 7 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/content/price.json b/content/price.json
index 9f27ea668..b110f4f7a 100644
--- a/content/price.json
+++ b/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": {
diff --git a/src/@types/Price.d.ts b/src/@types/Price.d.ts
index e733eacc2..ffa30be0f 100644
--- a/src/@types/Price.d.ts
+++ b/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
 }
diff --git a/src/components/Publish/Pricing/Free.tsx b/src/components/Publish/Pricing/Free.tsx
index f98183856..5efa3dab1 100644
--- a/src/components/Publish/Pricing/Free.tsx
+++ b/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} />
     </>
   )
 }
diff --git a/src/components/Publish/Pricing/Price.module.css b/src/components/Publish/Pricing/Price.module.css
index ebcb7229d..843579c56 100644
--- a/src/components/Publish/Pricing/Price.module.css
+++ b/src/components/Publish/Pricing/Price.module.css
@@ -62,7 +62,11 @@
 }
 
 .free {
-  text-align: center;
-  margin: calc(var(--spacer) / 2) 0;
+  text-align: left;
+  margin: calc(var(--spacer) / 2);
   font-size: var(--font-size-base);
 }
+
+.free [class*='FormInput_field'] {
+  margin: 0;
+}
diff --git a/src/components/Publish/Pricing/Price.tsx b/src/components/Publish/Pricing/Price.tsx
index a76f415e9..33d6ba012 100644
--- a/src/components/Publish/Pricing/Price.tsx
+++ b/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}>
diff --git a/src/components/Publish/Pricing/index.tsx b/src/components/Publish/Pricing/index.tsx
index 95ee3a793..796b8cd64 100644
--- a/src/components/Publish/Pricing/index.tsx
+++ b/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
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index a854a9ff5..ef15a454e 100644
--- a/src/components/Publish/_constants.tsx
+++ b/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
   }
 }