add saas type to publish flow

deltaDAO · Sep 9, 2024 · 11e79a1 · 11e79a1
1 parent af45a47
commit 11e79a1
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 128 deletions.
diff --git a/content/publish/form.json b/content/publish/form.json
@@ -173,30 +173,20 @@
         "type": "tabs",
         "fields": [
           {
-            "value": "ipfs",
-            "title": "IPFS",
-            "label": "CID",
-            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
-            "help": "This CID will be stored encrypted after publishing.",
-            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
-            "prominentHelp": true,
-            "type": "files",
-            "required": true
-          },
-          {
-            "value": "arweave",
-            "title": "Arweave",
-            "label": "Transaction ID",
-            "placeholder": "e.g. DBRCL94j3QqdPaUtt4VWRen8rZfJZBb7Ey40iMpXfhtd",
-            "help": "This Transaction ID will be stored encrypted after publishing.",
+            "value": "url",
+            "title": "URL",
+            "label": "File",
+            "placeholder": "e.g. https://file.com/file.json",
+            "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
             "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
             "prominentHelp": true,
             "type": "files",
-            "required": true
+            "required": true,
+            "methods": false
           },
           {
             "value": "url",
-            "title": "URL",
+            "title": "API",
             "label": "File",
             "placeholder": "e.g. https://file.com/file.json",
             "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
@@ -217,6 +207,29 @@
               }
             ]
           },
+          {
+            "value": "saas",
+            "title": "SaaS",
+            "label": "Redirect URL",
+            "placeholder": "e.g. https://delta-dao/the-future-is-now",
+            "help": "The url the user will be redirected to after buying access to the SaaS.",
+            "prominentHelp": true,
+            "type": "saas",
+            "required": true,
+            "methods": false,
+            "innerFields": [
+              {
+                "value": "paymentMode",
+                "title": "PaymentMode",
+                "label": "PaymentMode",
+                "help": "Choose how the payment mode for your Saas.",
+                "type": "select",
+                "selected": "",
+                "options": ["Subscription", "Pay per use"],
+                "required": true
+              }
+            ]
+          },
           {
             "value": "graphql",
             "title": "Graphql",
@@ -247,6 +260,17 @@
                 "required": true
               }
             ]
+          },
+          {
+            "value": "ipfs",
+            "title": "IPFS",
+            "label": "CID",
+            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
+            "help": "This CID will be stored encrypted after publishing.",
+            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+            "prominentHelp": true,
+            "type": "files",
+            "required": true
           }
         ],
         "sortOptions": false,
@@ -290,6 +314,20 @@
         "disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
         "disclaimerValues": ["Download"]
       },
+
+      {
+        "name": "usesConsumerParameters",
+        "label": "User defined parameters",
+        "help": "User defined parameters are used to filter or query the published asset.",
+        "type": "checkbox",
+        "options": ["This asset uses user defined parameters"],
+        "required": false
+      }
+    ]
+  },
+  "policies": {
+    "title": "Policies",
+    "fields": [
       {
         "name": "timeout",
         "label": "Access Period",
@@ -306,14 +344,6 @@
         "sortOptions": false,
         "required": true
       },
-      {
-        "name": "usesConsumerParameters",
-        "label": "User defined parameters",
-        "help": "User defined parameters are used to filter or query the published asset.",
-        "type": "checkbox",
-        "options": ["This asset uses user defined parameters"],
-        "required": false
-      },
       {
         "name": "allow",
         "label": "Allow Wallet Address",
@@ -330,9 +360,6 @@
       }
     ]
   },
-  "policies": {
-    "title": "Policies"
-  },
   "pricing": {
     "title": "Pricing",
     "fields": [

diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
@@ -158,6 +158,16 @@ export function normalizeFile(
       } as Smartcontract
       break
     }
+    case 'saas': {
+      fileObj = {
+        type: 'url',
+        index: 0,
+        url: file ? file[0]?.url || file?.url : null,
+        headers: headersProvider,
+        method: file.method
+      } as UrlFile
+      break
+    }
     default: {
       fileObj = {
         type: 'url',

diff --git a/src/@utils/yup.ts b/src/@utils/yup.ts
@@ -16,6 +16,7 @@ export function testLinks(isEdit?: boolean) {
         validField = true
         break
       case 'url':
+      case 'saas':
       case 'graphql':
         validField = isUrl(value?.toString() || '')
         // if we're in publish, the field must be valid

diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -33,6 +33,7 @@ export default function FilesInput(props: InputProps): ReactElement {
   const abi = field.value[0].abi || undefined
   const headers = field.value[0].headers || undefined
   const method = field.value[0].method || undefined
+  const [paymentModeField] = useField('metadata.saas.paymentMode')
 
   async function handleValidation(e: React.SyntheticEvent, url: string) {
     // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
@@ -107,12 +108,13 @@ export default function FilesInput(props: InputProps): ReactElement {
   }
 
   useEffect(() => {
-    storageType === 'graphql' && setDisabledButton(!providerUrl || !query)
+    if (storageType === 'graphql') setDisabledButton(!providerUrl || !query)
 
-    storageType === 'smartcontract' &&
+    if (storageType === 'smartcontract')
       setDisabledButton(!providerUrl || !abi || !checkJson(abi))
 
-    storageType === 'url' && setDisabledButton(!providerUrl)
+    if (storageType === 'url' || storageType === 'saas')
+      setDisabledButton(!providerUrl)
 
     if (meta.error?.length > 0) {
       const { url } = meta.error[0] as unknown as FileInfo
@@ -143,7 +145,9 @@ export default function FilesInput(props: InputProps): ReactElement {
               name={`${field.name}[0].url`}
               isLoading={isLoading}
               hideButton={
-                storageType === 'graphql' || storageType === 'smartcontract'
+                storageType === 'graphql' ||
+                storageType === 'smartcontract' ||
+                storageType === 'saas'
               }
               checkUrl={true}
               handleButtonClick={handleValidation}
@@ -157,43 +161,49 @@ export default function FilesInput(props: InputProps): ReactElement {
                 {props.innerFields &&
                   props.innerFields.map((innerField: any, i: number) => {
                     return (
-                      <>
-                        <Field
-                          key={i}
-                          component={
-                            innerField.type === 'headers'
-                              ? InputKeyValue
-                              : Input
-                          }
-                          {...innerField}
-                          name={`${field.name}[0].${innerField.value}`}
-                          value={field.value[0][innerField.value]}
-                        />
-                      </>
+                      <Field
+                        key={i}
+                        component={
+                          innerField.type === 'headers' ? InputKeyValue : Input
+                        }
+                        {...innerField}
+                        name={
+                          storageType === 'saas'
+                            ? `metadata.saas.${innerField.value}`
+                            : `${field.name}[0].${innerField.value}`
+                        }
+                        value={
+                          storageType === 'saas'
+                            ? paymentModeField.value
+                            : field.value[0][innerField.value]
+                        }
+                      />
                     )
                   })}
               </div>
 
-              <Button
-                style="ghost"
-                onClick={(e: React.SyntheticEvent) => {
-                  e.preventDefault()
-                  handleValidation(e, field.value[0].url)
-                }}
-                disabled={disabledButton}
-              >
-                {isLoading ? (
-                  <Loader />
-                ) : (
-                  `submit ${
-                    storageType === 'graphql'
-                      ? 'query'
-                      : storageType === 'smartcontract'
-                      ? 'abi'
-                      : 'url'
-                  }`
-                )}
-              </Button>
+              {storageType !== 'saas' && (
+                <Button
+                  style="ghost"
+                  onClick={(e: React.SyntheticEvent) => {
+                    e.preventDefault()
+                    handleValidation(e, field.value[0].url)
+                  }}
+                  disabled={disabledButton}
+                >
+                  {isLoading ? (
+                    <Loader />
+                  ) : (
+                    `submit ${
+                      storageType === 'graphql'
+                        ? 'query'
+                        : storageType === 'smartcontract'
+                        ? 'abi'
+                        : 'url'
+                    }`
+                  )}
+                </Button>
+              )}
             </>
           )}
         </>

diff --git a/src/components/@shared/atoms/TabsFile/index.tsx b/src/components/@shared/atoms/TabsFile/index.tsx
@@ -85,35 +85,33 @@ export default function TabsFile({
       <div className={styles.tabContent}>
         {items.map((item, index) => {
           return (
-            <>
-              <TabPanel
-                key={`tabpanel_${items[tabIndex].props.name}_${index}`}
-                className={styles.tabPanel}
-              >
-                {!isHidden && (
-                  <label className={styles.tabLabel}>
-                    {item.field.label}
-                    {item.field.required && (
-                      <span title="Required" className={styles.required}>
-                        *
-                      </span>
-                    )}
-                    {item.field.help && item.field.prominentHelp && (
-                      <Tooltip
-                        content={
-                          <Markdown
-                            text={`${item.field.help} ${
-                              textToolTip ? item.field.computeHelp : ''
-                            }`}
-                          />
-                        }
-                      />
-                    )}
-                  </label>
-                )}
-                {item.content}
-              </TabPanel>
-            </>
+            <TabPanel
+              key={`tabpanel_${items[tabIndex].props.name}_${index}`}
+              className={styles.tabPanel}
+            >
+              {!isHidden && (
+                <label className={styles.tabLabel}>
+                  {item.field.label}
+                  {item.field.required && (
+                    <span title="Required" className={styles.required}>
+                      *
+                    </span>
+                  )}
+                  {item.field.help && item.field.prominentHelp && (
+                    <Tooltip
+                      content={
+                        <Markdown
+                          text={`${item.field.help} ${
+                            textToolTip ? item.field.computeHelp : ''
+                          }`}
+                        />
+                      }
+                    />
+                  )}
+                </label>
+              )}
+              {item.content}
+            </TabPanel>
           )
         })}
       </div>

diff --git a/src/components/@shared/atoms/Tooltip/index.module.css b/src/components/@shared/atoms/Tooltip/index.module.css
@@ -18,7 +18,7 @@
   height: 0.85em;
   cursor: help;
   display: inline-block;
-  margin-bottom: -0.15em;
+  margin-bottom: -0.1em;
   margin-left: calc(var(--spacer) / 6);
   fill: var(--color-secondary);
 }

diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx
@@ -56,7 +56,8 @@ export default function Actions({
   const isContinueDisabled =
     (values.user.stepCurrent === 1 && errors.metadata !== undefined) ||
     (values.user.stepCurrent === 2 && errors.services !== undefined) ||
-    (values.user.stepCurrent === 3 && errors.pricing !== undefined)
+    (values.user.stepCurrent === 3 && errors.policies !== undefined) ||
+    (values.user.stepCurrent === 4 && errors.pricing !== undefined)
 
   const hasSubmitError =
     values.feedback?.[1].status === 'error' ||
@@ -116,13 +117,7 @@ export default function Actions({
               style="primary"
               disabled={isSubmitting || !isValid}
             >
-              {isSubmitting ? (
-                <Loader white />
-              ) : hasSubmitError ? (
-                'Retry'
-              ) : (
-                'Submit'
-              )}
+              {isSubmitting ? <Loader /> : hasSubmitError ? 'Retry' : 'Submit'}
             </Button>
           )}
         </>

diff --git a/src/components/Publish/Policies/index.tsx b/src/components/Publish/Policies/index.tsx
@@ -8,19 +8,19 @@ export default function PoliciesFields(): ReactElement {
   return (
     <>
       <Field
-        {...getFieldContent('timeout', content.services.fields)}
+        {...getFieldContent('timeout', content.policies.fields)}
         component={Input}
-        name="services[0].timeout"
+        name="policies.timeout"
       />
       <Field
-        {...getFieldContent('allow', content.services.fields)}
+        {...getFieldContent('allow', content.policies.fields)}
         component={Input}
-        name="services[0].allow"
+        name="policies.allow"
       />
       <Field
-        {...getFieldContent('deny', content.services.fields)}
+        {...getFieldContent('deny', content.policies.fields)}
         component={Input}
-        name="services[0].deny"
+        name="policies.deny"
       />
 
       {/*