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() + + 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 ( <> {content.info}

Price

- + ) } 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 (
{values.pricing.type === 'free' ? ( -

Free

+
+ +
) : ( <>
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 } }