From d0c65a693595b0f69e351424760325ea6c44c5c2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 26 Oct 2020 15:15:01 +0100
Subject: [PATCH] price refactor

---
 .../Pricing/FormPricing/Dynamic.tsx           |  8 ++++
 .../Pricing/FormPricing/Fixed.module.css      | 45 -------------------
 .../Pricing/FormPricing/Fixed.tsx             | 36 +--------------
 .../Pricing/FormPricing/Price.module.css      | 44 ++++++++++++++++++
 .../Pricing/FormPricing/Price.tsx             | 37 +++++++++++++++
 .../organisms/AssetContent/index.tsx          |  3 +-
 6 files changed, 93 insertions(+), 80 deletions(-)
 create mode 100644 src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
 create mode 100644 src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx

diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
index bedc0be8f..88a4ec6f3 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
@@ -12,6 +12,8 @@ import stylesIndex from './index.module.css'
 import { useFormikContext } from 'formik'
 import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
+import Fixed from './Fixed'
+import Price from './Price'
 
 export default function Dynamic({
   ddo,
@@ -68,6 +70,12 @@ export default function Dynamic({
         <Wallet />
       </aside>
 
+      <h4 className={styles.title}>
+        Price <Tooltip content={content.tooltips.poolInfo} />
+      </h4>
+
+      <Price ddo={ddo} />
+
       <h4 className={styles.title}>
         Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />
       </h4>
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
index 9cfadcde8..c96e35d5a 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.module.css
@@ -1,48 +1,3 @@
 .fixed {
   composes: content from './index.module.css';
 }
-
-.form {
-  position: relative;
-}
-
-@media (min-width: 55rem) {
-  .form {
-    max-width: 12rem;
-    margin-left: auto;
-  }
-}
-
-.grid {
-  margin-left: -2rem;
-  margin-right: -2rem;
-  padding-top: var(--spacer);
-  display: grid;
-  gap: var(--spacer);
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  justify-content: center;
-  background: var(--brand-grey-dimmed);
-  border-top: 1px solid var(--brand-grey-lighter);
-  border-bottom: 1px solid var(--brand-grey-lighter);
-}
-
-.fixed label {
-  display: none;
-}
-
-.datatoken {
-  margin-top: calc(var(--spacer) / 2);
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-}
-
-.datatoken h4 {
-  font-size: var(--font-size-base);
-  color: var(--color-secondary);
-  margin: 0;
-}
-
-.datatoken strong {
-  color: var(--brand-grey-dark);
-}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
index 2fcf55ad1..33d6c2e71 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Fixed.tsx
@@ -2,12 +2,8 @@ import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Fixed.module.css'
 import FormHelp from '../../../../atoms/Input/Help'
-import Conversion from '../../../../atoms/Price/Conversion'
-import { useField } from 'formik'
-import Input from '../../../../atoms/Input'
-import Error from './Error'
 import { DDO } from '@oceanprotocol/lib'
-import { usePricing } from '@oceanprotocol/react'
+import Price from './Price'
 
 export default function Fixed({
   ddo,
@@ -16,38 +12,10 @@ export default function Fixed({
   ddo: DDO
   content: any
 }): ReactElement {
-  const [field, meta] = useField('price')
-  const { dtName, dtSymbol } = usePricing(ddo)
-
   return (
     <div className={styles.fixed}>
       <FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
-
-      <div className={styles.grid}>
-        <div className={styles.form}>
-          <Input
-            label="Ocean Token"
-            value={field.value}
-            name="price"
-            type="number"
-            prefix="OCEAN"
-            min="1"
-            {...field}
-            additionalComponent={
-              <Conversion
-                price={field.value}
-                className={stylesIndex.conversion}
-              />
-            }
-          />
-          <Error meta={meta} />
-        </div>
-        <div className={styles.datatoken}>
-          <h4>
-            = <strong>1</strong> {dtName} — {dtSymbol}
-          </h4>
-        </div>
-      </div>
+      <Price ddo={ddo} />
     </div>
   )
 }
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
new file mode 100644
index 000000000..a93ba553f
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.module.css
@@ -0,0 +1,44 @@
+.form {
+  position: relative;
+}
+
+@media (min-width: 55rem) {
+  .form {
+    max-width: 12rem;
+    margin-left: auto;
+  }
+}
+
+.grid {
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding-top: var(--spacer);
+  display: grid;
+  gap: var(--spacer);
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  justify-content: center;
+  background: var(--brand-grey-dimmed);
+  border-top: 1px solid var(--brand-grey-lighter);
+  border-bottom: 1px solid var(--brand-grey-lighter);
+}
+
+.fixed label {
+  display: none;
+}
+
+.datatoken {
+  margin-top: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+}
+
+.datatoken h4 {
+  font-size: var(--font-size-base);
+  color: var(--color-secondary);
+  margin: 0;
+}
+
+.datatoken strong {
+  color: var(--brand-grey-dark);
+}
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx
new file mode 100644
index 000000000..96ee2eb7c
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing/FormPricing/Price.tsx
@@ -0,0 +1,37 @@
+import { usePricing } from '@oceanprotocol/react'
+import Conversion from '../../../../atoms/Price/Conversion'
+import { useField } from 'formik'
+import React, { ReactElement } from 'react'
+import Input from '../../../../atoms/Input'
+import styles from './Price.module.css'
+import Error from './Error'
+import { DDO } from '@oceanprotocol/lib'
+
+export default function Price({ ddo }: { ddo: DDO }): ReactElement {
+  const [field, meta] = useField('price')
+  const { dtName, dtSymbol } = usePricing(ddo)
+
+  return (
+    <div className={styles.grid}>
+      <div className={styles.form}>
+        <Input
+          value={field.value}
+          name="price"
+          type="number"
+          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}
+        </h4>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 3d3419c12..a9c3f2dc5 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -30,7 +30,8 @@ export default function AssetContent({
 
   const isOwner = accountId === ddo.publicKey[0].owner
   const hasNoPrice = ddo.price.type === ''
-  const showPricing = isOwner && hasNoPrice
+  // TODO: JUST FOR DEBUGGING
+  const showPricing = true || (isOwner && hasNoPrice)
 
   return (
     <article className={styles.grid}>