Merge branch 'main' of github.com:RequestNetwork/web-components into 70-add-column-for-payment-chain-in-the-invoice-dashboard

Author: sstefdev

packages/create-invoice-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/create-invoice-form",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",

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

@@ -58,53 +58,55 @@
 
   const handleNetworkChange = (newNetwork: string) => {
     if (newNetwork) {
-      const newCurrencies = currencyManager.knownCurrencies.filter(
-        (currency: CurrencyTypes.CurrencyDefinition) =>
-          currency.type === Types.RequestLogic.CURRENCY.ISO4217 ||
-          currency.network === newNetwork
-      );
-
       network = newNetwork;
-      defaultCurrencies = newCurrencies;
+
+      invoiceCurrency = undefined;
       currency = undefined;
+
+      defaultCurrencies = currencyManager.knownCurrencies.filter(
+        (curr: CurrencyTypes.CurrencyDefinition) =>
+          curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+          curr.network === newNetwork
+      );
     }
   };
 
   let activeRequest: any = null;
   let canSubmit = false;
   let appStatus: APP_STATUS[] = [];
   let formData = getInitialFormData();
-  let defaultCurrencies = currencyManager.knownCurrencies.filter(
-    (currency: CurrencyTypes.CurrencyDefinition) =>
-      currency.type === Types.RequestLogic.CURRENCY.ISO4217 || network
-        ? currency.network === network
-        : true
-  );
+  let defaultCurrencies = currencyManager.knownCurrencies;
 
   const handleInvoiceCurrencyChange = (
     value: CurrencyTypes.CurrencyDefinition
   ) => {
-    invoiceCurrency = value;
-    network = undefined;
-    currency = undefined;
+    if (value !== invoiceCurrency) {
+      invoiceCurrency = value;
+      currency = undefined;
 
-    if (
-      invoiceCurrency &&
-      invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
-    ) {
-      networks = getCurrencySupportedNetworksForConversion(
-        invoiceCurrency.hash,
-        currencyManager
-      );
-    } else {
-      networks = extractUniqueNetworkNames();
+      if (value.type !== Types.RequestLogic.CURRENCY.ISO4217) {
+        network = value.network;
+      }
     }
   };
 
   const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
     currency = value;
   };
 
+  $: {
+    if (invoiceCurrency) {
+      if (invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217) {
+        networks = getCurrencySupportedNetworksForConversion(
+          invoiceCurrency.hash,
+          currencyManager
+        );
+      } else {
+        networks = extractUniqueNetworkNames();
+      }
+    }
+  }
+
   let invoiceTotals = {
     amountWithoutTax: 0,
     totalTaxAmount: 0,

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

@@ -232,7 +232,7 @@
       >
         <span>Due: </span>
         <span
-          >{currency ? currency.symbol : ""}
+          >{invoiceCurrency ? invoiceCurrency.symbol : ""}
           {" "}
           {invoiceTotals.totalAmount.toFixed(2)}</span
         >

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

@@ -27,7 +27,6 @@
   export let formData: CustomFormData;
   export let handleInvoiceCurrencyChange: (value: string) => void;
   export let handleCurrencyChange: (value: string) => void;
-
   export let handleNetworkChange: (chainId: string) => void;
   export let networks;
   export let defaultCurrencies: any = [];
@@ -117,21 +116,6 @@
     }
   };
 
-  const filterSettlementCurrencies = (
-    currency: CurrencyTypes.CurrencyDefinition
-  ) => {
-    return invoiceCurrency
-      ? invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
-        ? currency.type !== Types.RequestLogic.CURRENCY.ISO4217 &&
-          currencyManager?.getConversionPath(
-            invoiceCurrency,
-            currency,
-            currency.network
-          )?.length > 0
-        : invoiceCurrency.hash === currency.hash
-      : false;
-  };
-
   const addInvoiceItem = () => {
     const newItem = {
       name: "",
@@ -398,19 +382,6 @@
             </div>
           </Accordion>
         </div>
-
-        <Dropdown
-          {config}
-          selectedValue={invoiceCurrency
-            ? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
-            : undefined}
-          placeholder="Invoice currency (labeling)"
-          options={defaultCurrencies.map((currency) => ({
-            value: currency,
-            label: `${currency.symbol} ${currency?.network ? `(${currency?.network})` : ""}`,
-          }))}
-          onchange={handleInvoiceCurrencyChange}
-        />
         <Dropdown
           {config}
           placeholder="Payment chain"
@@ -425,18 +396,63 @@
             })}
           onchange={handleNetworkChange}
         />
+        <Dropdown
+          {config}
+          selectedValue={invoiceCurrency
+            ? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
+            : undefined}
+          placeholder="Invoice currency (labeling)"
+          options={defaultCurrencies
+            ?.filter((curr) => {
+              if (!curr) return false;
+
+              return (
+                curr.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+                (curr.network && curr.network === network)
+              );
+            })
+            .map((currency) => ({
+              value: currency,
+              label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
+            })) ?? []}
+          onchange={handleInvoiceCurrencyChange}
+        />
         <Dropdown
           {config}
           placeholder="Settlement currency"
           selectedValue={currency
             ? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
             : undefined}
           options={defaultCurrencies
-            .filter((currency) => filterSettlementCurrencies(currency))
+            ?.filter((curr) => {
+              if (!curr || !invoiceCurrency) return false;
+
+              if (
+                invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
+              ) {
+                return (
+                  (curr.type === Types.RequestLogic.CURRENCY.ERC20 ||
+                    curr.type === Types.RequestLogic.CURRENCY.ISO4217) &&
+                  curr.network === network
+                );
+              } else if (
+                invoiceCurrency.type === Types.RequestLogic.CURRENCY.ERC20
+              ) {
+                return (
+                  curr.type === Types.RequestLogic.CURRENCY.ERC20 &&
+                  curr.network === invoiceCurrency.network
+                );
+              } else {
+                return (
+                  curr.type === Types.RequestLogic.CURRENCY.ERC20 &&
+                  curr.network === invoiceCurrency.network
+                );
+              }
+            })
             .map((currency) => ({
               value: currency,
-              label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
-            }))}
+              label: `${currency?.symbol ?? "Unknown"} ${currency?.network ? `(${currency.network})` : ""}`,
+            })) ?? []}
           onchange={handleCurrencyChange}
         />
       </div>

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

@@ -16,10 +16,10 @@ export function getInitialFormData() {
       {
         name: "",
         quantity: 1,
-        unitPrice: "",
-        discount: "",
+        unitPrice: 0,
+        discount: 0,
         tax: {
-          amount: "",
+          amount: 0,
           type: "percentage" as "fixed" | "percentage",
         },
         currency: "",

packages/invoice-dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@requestnetwork/invoice-dashboard",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "main": "./dist/web-component.umd.cjs",
   "scripts": {
     "dev": "vite dev",