Add image fees in calling context

components/form.js

@@ -751,7 +751,14 @@ export function Form ({
   const onSubmitInner = useCallback(async (values, ...args) => {
     try {
       if (onSubmit) {
-        const options = await onSubmit(values, ...args)
+        // extract cost from formik fields
+        // (cost may also be set in a formik field named 'amount')
+        let cost = values?.cost || values?.amount
+        // add potential image fees which are set in a different field
+        // to differentiate between fees (in receipts for example)
+        cost += (values?.imageFeesInfo?.totalFees || 0)
+
+        const options = await onSubmit(cost, values, ...args)
         if (!storageKeyPrefix || options?.keepLocalStorage) return
         clearLocalStorage(values)
       }

components/invoice.js

@@ -231,11 +231,7 @@ export const useInvoiceable = (onSubmit, options = defaultOptions) => {
 
   // this function will be called before the Form's onSubmit handler is called
   // and the form must include `cost` or `amount` as a value
-  const onSubmitWrapper = useCallback(async (formValues, ...submitArgs) => {
-    let { cost, imageFeesInfo, amount } = formValues
-    cost ??= amount
-    if (imageFeesInfo?.totalFees) cost += imageFeesInfo.totalFees
-
+  const onSubmitWrapper = useCallback(async (cost, formValues, ...submitArgs) => {
     // action only allowed if logged in
     if (!me && options.requireSession) {
       throw new Error('you must be logged in')