change content flow

content/price.json

@@ -1,5 +1,10 @@
 {
   "create": {
+    "empty": {
+      "title": "No Price Created",
+      "info": "This data set has no price yet. As the publisher you can create a fixed price, or a dynamic price for it. Onwards!",
+      "action": "Create Pricing"
+    },
     "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."

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

@@ -1,5 +1,4 @@
 import React, { ReactElement, useEffect } from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
 import styles from './index.module.css'
 import Tabs from '../../../../atoms/Tabs'
 import Fixed from './Fixed'
@@ -10,46 +9,16 @@ import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import Button from '../../../../atoms/Button'
 import { DDO } from '@oceanprotocol/lib'
 
-const query = graphql`
-  query PriceFieldQuery {
-    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
-      edges {
-        node {
-          childContentJson {
-            create {
-              fixed {
-                title
-                info
-              }
-              dynamic {
-                title
-                info
-                tooltips {
-                  poolInfo
-                  swapFee
-                  communityFee
-                  marketplaceFee
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
 export default function FormPricing({
   ddo,
-  setShowPricing
+  setShowPricing,
+  content
 }: {
   ddo: DDO
   setShowPricing: (value: boolean) => void
+  content: any
 }): ReactElement {
   const { debug } = useUserPreferences()
-  // Get content
-  const data = useStaticQuery(query)
-  const content = data.content.edges[0].node.childContentJson.create
 
   // Connect with form
   const { values, setFieldValue, submitForm } = useFormikContext()
@@ -88,7 +57,7 @@ export default function FormPricing({
 
       <div className={styles.actions}>
         <Button style="primary" onClick={() => submitForm()}>
-          Create Pricing
+          {content.empty.action}
         </Button>
         <Button style="text" size="small" onClick={() => setShowPricing(false)}>
           Cancel

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

@@ -9,8 +9,47 @@ import styles from './index.module.css'
 import FormPricing from './FormPricing'
 import { toast } from 'react-toastify'
 import Feedback from './Feedback'
+import { graphql, useStaticQuery } from 'gatsby'
+
+const query = graphql`
+  query PricingQuery {
+    content: allFile(filter: { relativePath: { eq: "price.json" } }) {
+      edges {
+        node {
+          childContentJson {
+            create {
+              empty {
+                title
+                info
+                action
+              }
+              fixed {
+                title
+                info
+              }
+              dynamic {
+                title
+                info
+                tooltips {
+                  poolInfo
+                  swapFee
+                  communityFee
+                  marketplaceFee
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
 
 export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
+  // Get content
+  const data = useStaticQuery(query)
+  const content = data.content.edges[0].node.childContentJson.create
+
   const {
     createPricing,
     pricingIsLoading,
@@ -33,19 +72,24 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
 
       // Pricing failed
       if (!tx || pricingError) {
-        toast.error(pricingError)
-        Logger.error(pricingError)
+        toast.error(pricingError || 'Price creation failed.')
+        Logger.error(pricingError || 'Price creation failed.')
         return
       }
 
       // Pricing succeeded
-      tx && setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
+      setSuccess(`🎉 Successfully created a ${values.type} price. 🎉`)
     } catch (error) {
       toast.error(error.message)
       Logger.error(error.message)
     }
   }
 
+  function handleShowPricingForm(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setShowPricing(true)
+  }
+
   return (
     <div className={styles.pricing}>
       <Formik
@@ -64,18 +108,19 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
           hasFeedback ? (
             <Feedback success={success} pricingStepText={pricingStepText} />
           ) : showPricing ? (
-            <FormPricing ddo={ddo} setShowPricing={setShowPricing} />
+            <FormPricing
+              ddo={ddo}
+              setShowPricing={setShowPricing}
+              content={content}
+            />
           ) : (
             <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. Onwards!"
+              title={content.empty.title}
+              text={content.empty.info}
               action={{
-                name: 'Create Pricing',
-                handleAction: (e: FormEvent<HTMLButtonElement>) => {
-                  e.preventDefault()
-                  setShowPricing(true)
-                }
+                name: content.empty.action,
+                handleAction: handleShowPricingForm
               }}
             />
           )