Updated form types and added builderId, createdWith to Misc

packages/create-invoice-form/package.json

@@ -32,9 +32,10 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
+    "@requestnetwork/data-format": "^0.19.0",
     "@requestnetwork/request-client.js": "0.47.1-next.2043",
-    "viem": "^2.9.15",
-    "@wagmi/core": "^2.13.8"
+    "@wagmi/core": "^2.13.8",
+    "viem": "^2.9.15"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.5.2",

packages/create-invoice-form/src/lib/create-invoice-form.svelte

@@ -85,27 +85,20 @@
 
   $: {
     formData.creatorId = (account?.address ?? "") as string;
-    invoiceTotals = calculateInvoiceTotals(formData.items);
+    invoiceTotals = calculateInvoiceTotals(formData.invoiceItems);
   }
 
-  let payeeAddressError = false;
-  let clientAddressError = false;
+  const isValidItem = (item: any) =>
+    item.name && item.quantity > 0 && Number(item.unitPrice) > 0;
 
   $: {
     const basicDetailsFilled =
       formData.payeeAddress && formData.payerAddress && formData.dueDate;
     const hasItems =
-      formData.items.length > 0 &&
-      formData.items.every(
-        (item) => item.description && item.quantity > 0 && item.unitPrice > 0
-      );
-
-    const addressesAreValid = !payeeAddressError && !clientAddressError;
+      formData.invoiceItems.length > 0 &&
+      formData.invoiceItems.every(isValidItem);
 
-    canSubmit =
-      basicDetailsFilled && hasItems && requestNetwork && addressesAreValid
-        ? true
-        : false;
+    canSubmit = basicDetailsFilled && hasItems && requestNetwork ? true : false;
   }
 
   const addToStatus = (newStatus: APP_STATUS) => {
@@ -179,8 +172,6 @@
       bind:formData
       config={activeConfig}
       bind:defaultCurrencies
-      bind:payeeAddressError
-      bind:clientAddressError
       {handleCurrencyChange}
       {handleNetworkChange}
       {networks}

packages/create-invoice-form/src/lib/invoice/form-view.svelte

@@ -29,7 +29,7 @@
   let sellerInfo: any[] = [];
   let buyerInfo: any[] = [];
 
-  $: formData.items = formData.items.map((item) => ({
+  $: formData.invoiceItems = formData.invoiceItems.map((item) => ({
     ...item,
     amount: calculateItemTotal(item),
   }));
@@ -188,10 +188,10 @@
           </tr>
         </thead>
         <tbody class="invoice-table-body">
-          {#each formData.items as item, index (index)}
+          {#each formData.invoiceItems as item, index (index)}
             <tr class="invoice-table-body-row">
               <th scope="row">
-                <p>{item.description}</p>
+                <p>{item.name}</p>
               </th>
               <td>{item.quantity}</td>
               <td>{item.unitPrice}</td>

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -98,11 +98,11 @@
 
     if (typeof itemIndex === "number") {
       if (fieldName === "tax") {
-        (formData.items[itemIndex] as any)[fieldName].amount = value;
+        (formData.invoiceItems[itemIndex] as any)[fieldName].amount = value;
         return;
       }
 
-      (formData.items[itemIndex] as any)[fieldName] = value;
+      (formData.invoiceItems[itemIndex] as any)[fieldName] = value;
     } else {
       if (id in formData) {
         (formData as any)[id] = value;
@@ -112,21 +112,22 @@
 
   const addInvoiceItem = () => {
     const newItem = {
-      description: "",
+      name: "",
       quantity: 1,
-      unitPrice: 0,
-      discount: 0,
+      unitPrice: "",
+      discount: "",
       tax: {
-        amount: 0,
-        type: "percentage",
+        amount: "",
+        type: "percentage" as "percentage" | "fixed",
       },
       amount: "",
+      currency: "",
     };
-    formData.items = [...formData.items, newItem];
+    formData.invoiceItems = [...formData.invoiceItems, newItem];
   };
 
   const removeInvoiceItem = (index: number) => {
-    formData.items = formData.items.filter((_, i) => i !== index);
+    formData.invoiceItems = formData.invoiceItems.filter((_, i) => i !== index);
   };
 </script>
 
@@ -403,17 +404,17 @@
           </tr>
         </thead>
         <tbody>
-          {#each formData.items as item, index (index)}
+          {#each formData.invoiceItems as item, index (index)}
             <tr>
               <th
                 scope="row"
-                class="invoice-form-table-body-header invoice-form-table-body-description"
+                class="invoice-form-table-body-header invoice-form-table-body-name"
                 style="font-weight: normal;"
               >
                 <Input
-                  id={`description-${index}`}
+                  id={`name-${index}`}
                   type="text"
-                  value={item.description}
+                  value={item.name}
                   placeholder="Enter description"
                   handleInput={(event) => handleInput(event, index)}
                 />
@@ -664,7 +665,7 @@
     padding: 12px 16px;
   }
 
-  .invoice-form-table-body-description {
+  .invoice-form-table-body-name {
     width: 250px !important;
   }
 

packages/create-invoice-form/src/lib/utils/prepareRequest.ts

@@ -66,17 +66,16 @@ export const prepareRequestParams = ({
       creationDate: new Date(formData.issuedOn).toISOString(),
       invoiceNumber: formData.invoiceNumber,
       note: formData.note.length > 0 ? formData.note : undefined,
-      invoiceItems: formData.items.map((item) => ({
-        name: item.description,
+      invoiceItems: formData.invoiceItems.map((item) => ({
+        name: item.name,
         quantity: Number(item.quantity),
         unitPrice: parseUnits(
           item.unitPrice.toString(),
           currency.decimals
         ).toString(),
-        discount: parseUnits(
-          item.discount.toString(),
-          currency.decimals
-        ).toString(),
+        discount:
+          item.discount &&
+          parseUnits(item.discount.toString(), currency.decimals).toString(),
         tax: {
           type: "percentage",
           amount: item.tax.amount.toString(),

packages/create-invoice-form/src/lib/utils/resetForm.ts

@@ -12,16 +12,17 @@ export function getInitialFormData() {
       builderId: "",
       createdWith: "",
     },
-    items: [
+    invoiceItems: [
       {
-        description: "",
+        name: "",
         quantity: 1,
-        unitPrice: 0,
-        discount: 0,
+        unitPrice: "",
+        discount: "",
         tax: {
-          amount: 0,
-          type: "percentage",
+          amount: "",
+          type: "percentage" as "fixed" | "percentage",
         },
+        currency: "",
       },
     ],
     sellerInfo: {

shared/types/index.ts

@@ -1,46 +1,22 @@
-export interface InvoiceItem {
-  description: string;
-  quantity: number;
-  unitPrice: number;
-  discount: number;
-  tax: {
-    amount: number;
-    type: string;
-  };
-}
+import { Invoice, InvoiceItem, ActorInfo } from "@requestnetwork/data-format";
 
-export interface CustomFormData {
+export interface CustomFormData extends Omit<Invoice, "meta" | "creationDate"> {
   creatorId: string;
   note: string;
   miscellaneous: {
     // This is a placeholder for any additional data that the user wants to include in the invoice
     labels: string[];
+    builderId: string;
+    createdWith: string;
   };
   invoiceNumber: string;
   payerAddress: string;
   payeeAddress: string;
   dueDate: string;
   issuedOn: string;
-  items: InvoiceItem[];
-  buyerInfo?: SellerBuyerInfo;
-  sellerInfo?: SellerBuyerInfo;
-}
-
-export interface SellerBuyerInfo {
-  firstName: string | undefined;
-  lastName: string | undefined;
-  businessName: string | undefined;
-  taxRegistration: string | undefined;
-  address: Address | undefined;
-  email: string | undefined;
-}
-
-export interface Address {
-  "country-name"?: string;
-  locality?: string;
-  "postal-code"?: string;
-  region?: string;
-  "street-address"?: string;
+  invoiceItems: InvoiceItem[];
+  buyerInfo?: ActorInfo;
+  sellerInfo?: ActorInfo;
 }
 
 export interface IConfig {