From fd1b66883a60347ef0f8b3e46cf67de3d980a3f7 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 20 Oct 2020 16:59:29 +0200
Subject: [PATCH] submit view, success view, form submit

---
 src/components/atoms/SuccessConfetti.tsx      |  2 +-
 .../AssetContent/FormPricing/index.tsx        |  4 +-
 .../organisms/AssetContent/Pricing.module.css |  6 +++
 .../organisms/AssetContent/Pricing.tsx        | 52 ++++++++++++++++---
 .../organisms/AssetContent/index.tsx          |  2 +-
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/atoms/SuccessConfetti.tsx b/src/components/atoms/SuccessConfetti.tsx
index 25d8f7052..4bd47c285 100644
--- a/src/components/atoms/SuccessConfetti.tsx
+++ b/src/components/atoms/SuccessConfetti.tsx
@@ -28,7 +28,7 @@ export default function SuccessConfetti({
   action
 }: {
   success: string
-  action: ReactNode
+  action?: ReactNode
 }): ReactElement {
   // Have some confetti upon success
   useEffect(() => {
diff --git a/src/components/organisms/AssetContent/FormPricing/index.tsx b/src/components/organisms/AssetContent/FormPricing/index.tsx
index d1dee6f77..c58d0f2cb 100644
--- a/src/components/organisms/AssetContent/FormPricing/index.tsx
+++ b/src/components/organisms/AssetContent/FormPricing/index.tsx
@@ -52,7 +52,7 @@ export default function FormPricing({
   const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
-  const { values, setFieldValue } = useFormikContext()
+  const { values, setFieldValue, submitForm } = useFormikContext()
   const { price, weightOnDataToken, type } = values as PriceOptionsMarket
 
   // Switch type value upon tab change
@@ -87,7 +87,7 @@ export default function FormPricing({
       />
 
       <div className={styles.actions}>
-        <Button style="primary" type="submit">
+        <Button style="primary" onClick={() => submitForm()}>
           Create Pricing
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>
diff --git a/src/components/organisms/AssetContent/Pricing.module.css b/src/components/organisms/AssetContent/Pricing.module.css
index fcfae9601..232711b4b 100644
--- a/src/components/organisms/AssetContent/Pricing.module.css
+++ b/src/components/organisms/AssetContent/Pricing.module.css
@@ -1,3 +1,9 @@
 .pricing {
   margin-bottom: var(--spacer);
+  width: 100%;
+  min-height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/organisms/AssetContent/Pricing.tsx b/src/components/organisms/AssetContent/Pricing.tsx
index dc43b7bae..a6532791f 100644
--- a/src/components/organisms/AssetContent/Pricing.tsx
+++ b/src/components/organisms/AssetContent/Pricing.tsx
@@ -1,24 +1,50 @@
 import React, { FormEvent, ReactElement, useState } from 'react'
 import { Formik } from 'formik'
 import { initialValues, validationSchema } from '../../../models/FormPricing'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import { usePricing } from '@oceanprotocol/react'
 import { PriceOptionsMarket } from '../../../@types/MetaData'
 import Alert from '../../atoms/Alert'
 import styles from './Pricing.module.css'
 import FormPricing from './FormPricing'
+import Loader from '../../atoms/Loader'
+import SuccessConfetti from '../../atoms/SuccessConfetti'
+import { toast } from 'react-toastify'
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
-  const { createPricing } = usePricing(ddo)
+  const {
+    createPricing,
+    pricingIsLoading,
+    pricingError,
+    pricingStepText
+  } = usePricing(ddo)
   const [showPricing, setShowPricing] = useState(false)
+  const [success, setSuccess] = useState<string>()
+
+  const hasFeedback = pricingIsLoading || success
 
   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}`
+    try {
+      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)
+
+      // Pricing failed
+      if (!tx || pricingError) {
+        toast.error(pricingError)
+        Logger.error(pricingError)
+        return
+      }
+
+      // Pricing succeeded
+      tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+    } catch (error) {
+      toast.error(error.message)
+      Logger.error(error.message)
     }
-    const tx = await createPricing(priceOptions)
   }
 
   return (
@@ -27,12 +53,22 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
         initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={async (values, { setSubmitting }) => {
+          // move user's focus to top of screen
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+
+          // Kick off price creation
           await handleCreatePricing(values)
           setSubmitting(false)
         }}
       >
         {() =>
-          showPricing ? (
+          hasFeedback ? (
+            success ? (
+              <SuccessConfetti success={success} />
+            ) : (
+              <Loader message={pricingStepText} />
+            )
+          ) : showPricing ? (
             <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
           ) : (
             <Alert
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 5ad04f7fc..cc2a52b13 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -27,7 +27,7 @@ export default function AssetContent({
   return (
     <article className={styles.grid}>
       <div className={styles.content}>
-        {/* TODO: check for ddo creator */}
+        {/* TODO: check for ddo creator & no price */}
         <Pricing ddo={ddo} />
 
         <aside className={styles.meta}>