From 9ce1358fe12a209dedbd8cf6ea58d526c257ed42 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 13:10:03 +0200
Subject: [PATCH] move around pricing view

---
 src/components/atoms/Alert.module.css         |  6 +-
 src/components/atoms/Alert.tsx                | 15 +++-
 .../organisms/AssetContent/Pricing.module.css |  3 +
 .../organisms/AssetContent/Pricing.tsx        | 70 +++++++++++++++++++
 .../organisms/AssetContent/index.module.css   |  4 ++
 .../organisms/AssetContent/index.tsx          |  4 ++
 src/components/pages/Publish/Feedback.tsx     |  5 --
 src/components/pages/Publish/Pricing.tsx      | 54 --------------
 src/components/pages/Publish/index.tsx        |  9 +--
 9 files changed, 103 insertions(+), 67 deletions(-)
 create mode 100644 src/components/organisms/AssetContent/Pricing.module.css
 create mode 100644 src/components/organisms/AssetContent/Pricing.tsx
 delete mode 100644 src/components/pages/Publish/Pricing.tsx

diff --git a/src/components/atoms/Alert.module.css b/src/components/atoms/Alert.module.css
index c35f3b2de..f03ba01f0 100644
--- a/src/components/atoms/Alert.module.css
+++ b/src/components/atoms/Alert.module.css
@@ -30,6 +30,10 @@
   font-size: var(--font-size-small);
 }
 
+.action {
+  margin-top: calc(var(--spacer) / 2);
+}
+
 /* States */
 .error {
   border-color: var(--rbrand-alert-ed);
@@ -43,7 +47,7 @@
 
 .info {
   border-color: var(--brand-alert-yellow);
-  color: var(--brand-alert-yellow);
+  color: #9f7e19;
 }
 
 .warning {
diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx
index c1b7b0a14..1610d6001 100644
--- a/src/components/atoms/Alert.tsx
+++ b/src/components/atoms/Alert.tsx
@@ -1,19 +1,32 @@
 import React, { ReactElement } from 'react'
 import styles from './Alert.module.css'
+import Button from './Button'
 
 export default function Alert({
   title,
   text,
-  state
+  state,
+  action
 }: {
   title?: string
   text: string
   state: 'error' | 'warning' | 'info' | 'success'
+  action?: { name: string; handleAction: () => void }
 }): ReactElement {
   return (
     <div className={`${styles.alert} ${styles[state]}`}>
       {title && <h3 className={styles.title}>{title}</h3>}
       <p className={styles.text}>{text}</p>
+      {action && (
+        <Button
+          className={styles.action}
+          size="small"
+          style="primary"
+          onClick={action.handleAction}
+        >
+          {action.name}
+        </Button>
+      )}
     </div>
   )
 }
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing.module.css
new file mode 100644
index 000000000..fcfae9601
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.module.css
@@ -0,0 +1,3 @@
+.pricing {
+  margin-bottom: var(--spacer);
+}
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
new file mode 100644
index 000000000..c3232263e
--- /dev/null
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -0,0 +1,70 @@
+import React, { ReactElement, useState } from 'react'
+import { Field, FieldInputProps, Formik } from 'formik'
+import Input from '../../atoms/Input'
+import { initialValues, validationSchema } from '../../../models/FormPricing'
+import { DDO } from '@oceanprotocol/lib'
+import { usePricing } from '@oceanprotocol/react'
+import { PriceOptionsMarket } from '../../../@types/MetaData'
+import Alert from '../../atoms/Alert'
+import styles from './Pricing.module.css'
+
+export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+  const { createPricing } = usePricing(ddo)
+  const [showPricing, setShowPricing] = useState(false)
+
+  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
+    const priceOptions = {
+      ...values,
+      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
+      swapFee: `${values.swapFee / 100}`
+    }
+    const tx = await createPricing(priceOptions)
+  }
+
+  return (
+    <div className={styles.pricing}>
+      {showPricing ? (
+        <Formik
+          initialValues={initialValues}
+          validationSchema={validationSchema}
+          onSubmit={async (values, { setSubmitting, resetForm }) => {
+            await handleCreatePricing(values)
+            setSubmitting(false)
+          }}
+        >
+          {() => (
+            <>
+              <Field name="price">
+                {({
+                  field,
+                  form
+                }: {
+                  field: FieldInputProps<PriceOptionsMarket>
+                  form: any
+                }) => (
+                  <Input
+                    type="price"
+                    name="price"
+                    label="Create Price"
+                    field={field}
+                    form={form}
+                  />
+                )}
+              </Field>
+            </>
+          )}
+        </Formik>
+      ) : (
+        <Alert
+          state="info"
+          title="No Price Created"
+          text="This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it."
+          action={{
+            name: 'Create Pricing',
+            handleAction: () => setShowPricing(true)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index 874cc5810..9dd4a3115 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -1,3 +1,7 @@
+.pricing {
+  max-width: 40rem;
+}
+
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 1.5);
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index dc4cfa35f..5ad04f7fc 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -9,6 +9,7 @@ import styles from './index.module.css'
 import AssetActions from '../AssetActions'
 import { DDO } from '@oceanprotocol/lib'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import Pricing from './Pricing'
 
 export interface AssetContentProps {
   metadata: MetadataMarket
@@ -26,6 +27,9 @@ export default function AssetContent({
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
+        {/* TODO: check for ddo creator */}
+        <Pricing ddo={ddo} />
+
         <aside className={styles.meta}>
           <p>{datePublished && <Time date={datePublished} />}</p>
           {metadata?.additionalInformation?.categories?.length && (
diff --git a/src/components/pages/Publish/Feedback.tsx b/src/components/pages/Publish/Feedback.tsx
index 84e68bc2b..99537a276 100644
--- a/src/components/pages/Publish/Feedback.tsx
+++ b/src/components/pages/Publish/Feedback.tsx
@@ -5,21 +5,18 @@ import React, { ReactElement } from 'react'
 import styles from './Feedback.module.css'
 import SuccessConfetti from '../../atoms/SuccessConfetti'
 import { DDO } from '@oceanprotocol/lib'
-import Pricing from './Pricing'
 
 export default function Feedback({
   error,
   success,
   ddo,
   publishStepText,
-  isPricing,
   setError
 }: {
   error: string
   success: string
   ddo: DDO
   publishStepText: string
-  isPricing: boolean
   setError: (error: string) => void
 }): ReactElement {
   const SuccessAction = () => (
@@ -49,8 +46,6 @@ export default function Feedback({
               Try Again
             </Button>
           </>
-        ) : isPricing ? (
-          <Pricing ddo={ddo} />
         ) : success ? (
           <SuccessConfetti success={success} action={<SuccessAction />} />
         ) : (
diff --git a/src/components/pages/Publish/Pricing.tsx b/src/components/pages/Publish/Pricing.tsx
deleted file mode 100644
index 087c0c20a..000000000
--- a/src/components/pages/Publish/Pricing.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { ReactElement } from 'react'
-import { Field, FieldInputProps, Formik } from 'formik'
-import Input from '../../atoms/Input'
-import { initialValues, validationSchema } from '../../../models/FormPricing'
-import { DDO } from '@oceanprotocol/lib'
-import { usePricing } from '@oceanprotocol/react'
-import { PriceOptionsMarket } from '../../../@types/MetaData'
-import ddoFixture from '../../../../tests/unit/__fixtures__/ddo'
-
-export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddoFixture)
-
-  async function handleCreatePricing(values: Partial<PriceOptionsMarket>) {
-    const priceOptions = {
-      ...values,
-      // swapFee is tricky: to get 0.1% you need to send 0.001 as value
-      swapFee: `${values.swapFee / 100}`
-    }
-    const tx = await createPricing(priceOptions)
-  }
-
-  return (
-    <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting, resetForm }) => {
-        await handleCreatePricing(values)
-        setSubmitting(false)
-      }}
-    >
-      {() => (
-        <>
-          <Field name="price">
-            {({
-              field,
-              form
-            }: {
-              field: FieldInputProps<PriceOptionsMarket>
-              form: any
-            }) => (
-              <Input
-                type="price"
-                name="price"
-                label="Price"
-                field={field}
-                form={form}
-              />
-            )}
-          </Field>
-        </>
-      )}
-    </Formik>
-  )
-}
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index d744ce0c1..178f03496 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -27,7 +27,6 @@ export default function PublishPage({
 
   const [success, setSuccess] = useState<string>()
   const [error, setError] = useState<string>()
-  const [isPricing, setIsPricing] = useState<boolean>()
   const [ddo, setDdo] = useState<DDO>()
 
   const hasFeedback = isLoading || error || success
@@ -66,10 +65,9 @@ export default function PublishPage({
       setDdo(ddo)
       resetForm()
 
-      // Create pricing
-      setIsPricing(true)
-
-      // setSuccess('🎉 Successfully published your data set. 🎉')
+      setSuccess(
+        '🎉 Successfully published. Now create a price on your data set. 🎉'
+      )
     } catch (error) {
       setError(error.message)
       Logger.error(error.message)
@@ -99,7 +97,6 @@ export default function PublishPage({
               success={success}
               publishStepText={publishStepText}
               ddo={ddo}
-              isPricing={isPricing}
               setError={setError}
             />
           ) : (