Allow pay per invoice for bounty and job posts

components/bounty-form.js

@@ -8,6 +8,8 @@ import InputGroup from 'react-bootstrap/InputGroup'
 import { bountySchema } from '../lib/validate'
 import { SubSelectInitial } from './sub-select-form'
 import CancelButton from './cancel-button'
+import { useCallback } from 'react'
+import { useAnonymous } from '../lib/anonymous'
 
 export function BountyForm ({
   item,
@@ -49,19 +51,10 @@ export function BountyForm ({
     `
   )
 
-  return (
+  const submitUpsertBounty = useCallback(
-    <Form
+    // we ignore the invoice since only stackers can post bounties
-      initial={{
+    // the invoice is only for funding the wallet
-        title: item?.title || '',
+    async (_, boost, bounty, values, __) => {
-        text: item?.text || '',
-        bounty: item?.bounty || 1000,
-        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
-        ...SubSelectInitial({ sub: item?.subName || sub?.name })
-      }}
-      schema={schema}
-      onSubmit={
-        handleSubmit ||
-        (async ({ boost, bounty, ...values }) => {
       const { error } = await upsertBounty({
         variables: {
           sub: item?.subName || sub?.name,
@@ -81,6 +74,24 @@ export function BountyForm ({
         const prefix = sub?.name ? `/~${sub.name}` : ''
         await router.push(prefix + '/recent')
       }
+    }, [upsertBounty, router])
+
+  const anonUpsertBounty = useAnonymous(submitUpsertBounty, { requireSession: true })
+
+  return (
+    <Form
+      initial={{
+        title: item?.title || '',
+        text: item?.text || '',
+        bounty: item?.bounty || 1000,
+        ...AdvPostInitial({ forward: item?.fwdUser?.name }),
+        ...SubSelectInitial({ sub: item?.subName || sub?.name })
+      }}
+      schema={schema}
+      onSubmit={
+        handleSubmit ||
+        (async ({ boost, bounty, cost, ...values }) => {
+          await anonUpsertBounty(cost, boost, bounty, values)
         })
       }
       storageKeyPrefix={item ? undefined : 'bounty'}

components/job-form.js

@@ -5,7 +5,7 @@ import InputGroup from 'react-bootstrap/InputGroup'
 import Image from 'react-bootstrap/Image'
 import BootstrapForm from 'react-bootstrap/Form'
 import Alert from 'react-bootstrap/Alert'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Info from './info'
 import AccordianItem from './accordian-item'
 import styles from '../styles/post.module.css'
@@ -17,6 +17,7 @@ import Avatar from './avatar'
 import ActionTooltip from './action-tooltip'
 import { jobSchema } from '../lib/validate'
 import CancelButton from './cancel-button'
+import { useAnonymous } from '../lib/anonymous'
 
 function satsMin2Mo (minute) {
   return minute * 30 * 24 * 60
@@ -50,24 +51,10 @@ export default function JobForm ({ item, sub }) {
     }`
   )
 
-  return (
+  const submitUpsertJob = useCallback(
-    <>
+    // we ignore the invoice since only stackers can post bounties
-      <Form
+    // the invoice is only for funding the wallet
-        className='pb-5 pt-3'
+    async (_, maxBid, stop, start, values, __) => {
-        initial={{
-          title: item?.title || '',
-          company: item?.company || '',
-          location: item?.location || '',
-          remote: item?.remote || false,
-          text: item?.text || '',
-          url: item?.url || '',
-          maxBid: item?.maxBid || 0,
-          stop: false,
-          start: false
-        }}
-        schema={jobSchema}
-        storageKeyPrefix={storageKeyPrefix}
-        onSubmit={(async ({ maxBid, stop, start, ...values }) => {
       let status
       if (start) {
         status = 'ACTIVE'
@@ -94,6 +81,29 @@ export default function JobForm ({ item, sub }) {
       } else {
         await router.push(`/~${sub.name}/recent`)
       }
+    }, [upsertJob, router])
+
+  const anonUpsertJob = useAnonymous(submitUpsertJob, { requireSession: true })
+
+  return (
+    <>
+      <Form
+        className='pb-5 pt-3'
+        initial={{
+          title: item?.title || '',
+          company: item?.company || '',
+          location: item?.location || '',
+          remote: item?.remote || false,
+          text: item?.text || '',
+          url: item?.url || '',
+          maxBid: item?.maxBid || 0,
+          stop: false,
+          start: false
+        }}
+        schema={jobSchema}
+        storageKeyPrefix={storageKeyPrefix}
+        onSubmit={(async ({ maxBid, stop, start, ...values }) => {
+          await anonUpsertJob(1000, maxBid, stop, start, values)
         })}
       >
         <div className='form-group'>

lib/anonymous.js

@@ -100,7 +100,8 @@ export const isInsufficientFundsError = (error) => {
 }
 
 const defaultOptions = {
-  forceInvoice: false
+  forceInvoice: false,
+  requireSession: false
 }
 export const useAnonymous = (fn, options = defaultOptions) => {
   const me = useMe()
@@ -164,6 +165,9 @@ export const useAnonymous = (fn, options = defaultOptions) => {
   }, [invoice?.id])
 
   const anonFn = useCallback(async (amount, ...args) => {
+    if (!me && options.requireSession) {
+      throw new Error('you must be logged in')
+    }
     if (me && !options.forceInvoice) {
       try {
         return await fn(amount, ...args)