Show amount of unpaid images in receipt

api/resolvers/image.js

@@ -4,8 +4,8 @@ import { datePivot } from '../../lib/time'
 export default {
   Query: {
     imageFees: async (parent, { s3Keys }, { models, me }) => {
-      const [, fees] = await imageFees(s3Keys, { models, me })
-      return fees
+      const { fees, unpaid, size24h, sizeNow } = await imageFees(s3Keys, { models, me })
+      return { fees, unpaid, size24h, sizeNow }
     }
   }
 }
@@ -39,12 +39,12 @@ export async function imageFees (s3Keys, { models, me }) {
   const unpaidS3Keys = (await models.upload.findMany({ select: { id: true }, where: { id: { in: s3Keys }, paid: false } })).map(({ id }) => id)
   const unpaid = unpaidS3Keys.length
 
-  if (!unpaid) return [itemId => [], 0]
+  if (!unpaid) return { queries: itemId => [], fees: 0 }
 
   if (!me) {
     // anons pay for every new image 100 sats
     const fees = unpaid * 100
-    return [queries(ANON_USER_ID, unpaidS3Keys, fees), fees]
+    return { queries: queries(ANON_USER_ID, unpaidS3Keys, fees), fees, unpaid }
   }
 
   // check how much stacker uploaded in last 24 hours
@@ -81,5 +81,5 @@ export async function imageFees (s3Keys, { models, me }) {
   } else {
     fees = 10000 * unpaid
   }
-  return [queries(me.id, unpaidS3Keys, fees), fees]
+  return { queries: queries(me.id, unpaidS3Keys, fees), fees, unpaid, size24h, sizeNow }
 }

api/resolvers/item.js

@@ -1091,7 +1091,7 @@ export const updateItem = async (parent, { sub: subName, forward, options, ...it
   item = { subName, userId: me.id, ...item }
   const fwdUsers = await getForwardUsers(models, forward)
 
-  const [imgQueriesFn, imgFees] = await imageFeesFromText(item.text, { models, me })
+  const { queries: imgQueriesFn, fees: imgFees } = await imageFeesFromText(item.text, { models, me })
   item = await serializeInvoicable(
     [
       models.$queryRawUnsafe(`${SELECT} FROM update_item($1::JSONB, $2::JSONB, $3::JSONB) AS "Item"`,
@@ -1128,7 +1128,7 @@ export const createItem = async (parent, { forward, options, ...item }, { me, mo
     item.url = removeTracking(item.url)
   }
 
-  const [imgQueriesFn, imgFees] = await imageFeesFromText(item.text, { models, me })
+  const { queries: imgQueriesFn, fees: imgFees } = await imageFeesFromText(item.text, { models, me })
   const enforceFee = (me ? undefined : (item.parentId ? ANON_COMMENT_FEE : (ANON_POST_FEE + (item.boost || 0)))) + imgFees
   item = await serializeInvoicable(
     models.$queryRawUnsafe(

api/typeDefs/image.js

@@ -1,7 +1,13 @@
 import { gql } from 'graphql-tag'
 
 export default gql`
+  type ImageFees {
+    fees: Int!
+    unpaid: Int
+    sizeNow: Int
+    size24h: Int
+  }
   extend type Query {
-    imageFees(s3Keys: [Int]!): Int!
+    imageFees(s3Keys: [Int]!): ImageFees!
   }
 `

components/fee-button.js

@@ -22,7 +22,7 @@ function Receipt ({ cost, repetition, imageFees, baseFee, parentId, boost }) {
         </tr>
         {imageFees &&
           <tr>
-            <td>+ {numWithUnits(imageFees, { abbreviate: false })}</td>
+            <td>+ {imageFees.unpaid} x {numWithUnits(imageFees.fees, { abbreviate: false })}</td>
             <td align='right' className='font-weight-light'>image fees</td>
           </tr>}
         {repetition > 0 &&
@@ -85,8 +85,8 @@ export default function FeeButton ({ parentId, baseFee, ChildButton, variant, te
     formik?.setFieldValue('cost', cost)
   }, [formik?.getFieldProps('cost').value, cost])
 
-  const imageFees = formik?.getFieldProps('imageFees').value || 0
-  const totalCost = cost + imageFees
+  const imageFees = formik?.getFieldProps('imageFees').value || { fees: 0 }
+  const totalCost = cost + imageFees.fees
 
   const show = alwaysShow || !formik?.isSubmitting
   return (
@@ -137,8 +137,8 @@ export function EditFeeButton ({ paidSats, ChildButton, variant, text, alwaysSho
     formik?.setFieldValue('cost', cost)
   }, [formik?.getFieldProps('cost').value, cost])
 
-  const imageFees = formik?.getFieldProps('imageFees').value || 0
-  const totalCost = cost + imageFees
+  const imageFees = formik?.getFieldProps('imageFees').value?.fees || { fees: 0 }
+  const totalCost = cost + imageFees.fees
 
   const show = alwaysShow || !formik?.isSubmitting
   return (

components/form.js

@@ -105,7 +105,12 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, onKe
   const toaster = useToast()
   const [updateImageFees] = useLazyQuery(gql`
   query imageFees($s3Keys: [Int]!) {
-    imageFees(s3Keys: $s3Keys)
+    imageFees(s3Keys: $s3Keys) {
+      fees
+      unpaid
+      size24h
+      sizeNow
+    }
   }`, {
     onError: (err) => {
       console.log(err)

components/invoice.js

@@ -234,7 +234,7 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
   const onSubmitWrapper = useCallback(async (formValues, ...submitArgs) => {
     let { cost, imageFees, amount } = formValues
     cost ??= amount
-    if (imageFees) cost += imageFees
+    if (imageFees?.fees) cost += imageFees.fees
 
     // action only allowed if logged in
     if (!me && options.requireSession) {