Adding fees to fixed pricing page (#758)

* Adding fess to fixed pricing page

* Adding tooltips to fixed price content

* Styling: Text align left

* create pricing styling updates

* remove console.log

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

content/price.json

@@ -10,7 +10,11 @@
     },
     "fixed": {
       "title": "Fixed",
-      "info": "Set your price for accessing this data set. The datatoken for this data set will be worth the entered amount of OCEAN."
+      "info": "Set your price for accessing this data set. The datatoken for this data set will be worth the entered amount of OCEAN.",
+      "tooltips": {
+        "communityFee": "Explain community fee...",
+        "marketplaceFee": "Explain marketplace fee..."
+      }
     },
     "dynamic": {
       "title": "Dynamic",

src/components/atoms/Alert.module.css

@@ -45,7 +45,8 @@
   margin-bottom: 0;
 }
 
-.action {
+.action,
+button.action {
   margin-top: calc(var(--spacer) / 2);
 }
 

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -112,7 +112,7 @@ export default function Dynamic({
         />
       </div>
 
-      <Fees tooltips={content.tooltips} />
+      <Fees tooltips={content.tooltips} pricingType="dynamic" />
 
       <footer className={styles.summary}>
         You will get: <br />

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.module.css

@@ -5,14 +5,18 @@
   margin-left: -2rem;
   margin-right: -2rem;
   border-bottom: 1px solid var(--border-color);
-  padding: var(--spacer) var(--spacer) calc(var(--spacer) / 2) var(--spacer);
+  padding: var(--spacer);
 
-  justify-content: center;
   text-align: center;
   border-bottom: 1px solid var(--border-color);
   background: var(--background-highlight);
 }
 
+.fees > div {
+  margin-bottom: 0;
+  justify-self: center;
+}
+
 .fees label {
   white-space: nowrap;
 }

src/components/organisms/AssetContent/Pricing/FormPricing/Fees.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import Tooltip from '../../../../atoms/Tooltip'
 import styles from './Fees.module.css'
-import { useField, useFormikContext } from 'formik'
+import { useField } from 'formik'
 import Input from '../../../../atoms/Input'
 import Error from './Error'
 
@@ -30,31 +30,35 @@ const Default = ({
 )
 
 export default function Fees({
-  tooltips
+  tooltips,
+  pricingType
 }: {
   tooltips: { [key: string]: string }
+  pricingType: 'dynamic' | 'fixed'
 }): ReactElement {
   const [field, meta] = useField('swapFee')
 
   return (
     <>
       <div className={styles.fees}>
-        <Input
-          label={
-            <>
-              Swap Fee
-              <Tooltip content={tooltips.swapFee} />
-            </>
-          }
-          type="number"
-          postfix="%"
-          min="0.1"
-          max="10"
-          step="0.1"
-          size="small"
-          {...field}
-          additionalComponent={<Error meta={meta} />}
-        />
+        {pricingType === 'dynamic' && (
+          <Input
+            label={
+              <>
+                Swap Fee
+                <Tooltip content={tooltips.swapFee} />
+              </>
+            }
+            type="number"
+            postfix="%"
+            min="0.1"
+            max="10"
+            step="0.1"
+            size="small"
+            {...field}
+            additionalComponent={<Error meta={meta} />}
+          />
+        )}
 
         <Default
           title="Community Fee"

src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx

@@ -4,6 +4,7 @@ import styles from './Fixed.module.css'
 import FormHelp from '../../../../atoms/Input/Help'
 import { DDO } from '@oceanprotocol/lib'
 import Price from './Price'
+import Fees from './Fees'
 
 export default function Fixed({
   ddo,
@@ -16,6 +17,7 @@ export default function Fixed({
     <div className={styles.fixed}>
       <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
       <Price ddo={ddo} />
+      <Fees tooltips={content.tooltips} pricingType="fixed" />
     </div>
   )
 }

src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css

@@ -2,17 +2,13 @@
   position: relative;
 }
 
-@media (min-width: 55rem) {
-  .form {
-    max-width: 12rem;
-    margin-left: auto;
-  }
+.form * {
+  margin-bottom: 0;
 }
 
 .price {
   margin-left: -2rem;
   margin-right: -2rem;
-  padding-top: var(--spacer);
   background: var(--background-highlight);
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
@@ -20,9 +16,13 @@
 
 .grid {
   display: grid;
-  gap: var(--spacer);
+  gap: calc(var(--spacer) / 2);
   grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  justify-content: center;
+  padding: var(--spacer);
+  max-width: 30rem;
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
 }
 
 .fixed label {
@@ -30,7 +30,6 @@
 }
 
 .datatoken {
-  margin-top: calc(var(--spacer) / 2);
   color: var(--color-secondary);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
@@ -50,7 +49,6 @@
   font-size: var(--font-size-small);
   color: var(--color-secondary);
   text-align: center;
-  margin-top: -1rem;
   padding-top: calc(var(--spacer) / 3);
   padding-bottom: calc(var(--spacer) / 3);
   border-top: 1px solid var(--border-color);
@@ -59,3 +57,7 @@
 .firstPrice div {
   display: inline-block;
 }
+
+.conversion strong {
+  color: var(--color-secondary);
+}

src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx

@@ -2,11 +2,11 @@ import Conversion from '../../../../atoms/Price/Conversion'
 import { useField } from 'formik'
 import React, { ReactElement, useState, useEffect } from 'react'
 import Input from '../../../../atoms/Input'
-import styles from './Price.module.css'
 import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
 import PriceUnit from '../../../../atoms/Price/PriceUnit'
 import usePricing from '../../../../../hooks/usePricing'
+import styles from './Price.module.css'
 
 export default function Price({
   ddo,
@@ -56,16 +56,14 @@ export default function Price({
               prefix="OCEAN"
               min="1"
               {...field}
-              additionalComponent={
-                <Conversion price={field.value} className={styles.conversion} />
-              }
             />
           )}
           <Error meta={meta} />
         </div>
         <div className={styles.datatoken}>
           <h4>
-            = <strong>1</strong> {dtName} — {dtSymbol}
+            = <strong>1</strong> {dtSymbol}{' '}
+            <Conversion price={field.value} className={styles.conversion} />
           </h4>
         </div>
       </div>

src/components/organisms/AssetContent/Pricing/index.tsx

@@ -4,12 +4,12 @@ import { initialValues, validationSchema } from '../../../../models/FormPricing'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { PriceOptionsMarket } from '../../../../@types/MetaData'
 import Alert from '../../../atoms/Alert'
-import styles from './index.module.css'
 import FormPricing from './FormPricing'
 import { toast } from 'react-toastify'
 import Feedback from './Feedback'
 import { graphql, useStaticQuery } from 'gatsby'
 import { usePricing } from '../../../../hooks/usePricing'
+import styles from './index.module.css'
 
 const query = graphql`
   query PricingQuery {
@@ -29,6 +29,10 @@ const query = graphql`
               fixed {
                 title
                 info
+                tooltips {
+                  communityFee
+                  marketplaceFee
+                }
               }
               dynamic {
                 title