Merge branch '172-set-the-payment-recipient-to-the-payee-identity-address-by-default-add-checkbox-to-reveal-where-would-you-like-to-receive-your-payment-field' of github.com:RequestNetwork/web-components into 172-set-the-payment-recipient-to-the-payee-identity-address-by-default-add-checkbox-to-reveal-where-would-you-like-to-receive-your-payment-field

Author: sstefdev

package.json

@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "find . -path './node_modules' -prune -o -name 'dist' -type d -exec rm -rf '{}' \\; -printf '%p deleted\\n' 2>/dev/null",
     "deep-clean": "find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \\;",
     "build": "turbo run build",
     "build:form": "turbo run build --filter=@requestnetwork/create-invoice-form",

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

@@ -8,11 +8,16 @@
   import type { IConfig } from "@requestnetwork/shared-types";
   import { APP_STATUS } from "@requestnetwork/shared-types/enums";
   import type { RequestNetwork } from "@requestnetwork/request-client.js";
+  import { Types } from "@requestnetwork/request-client.js";
+  import { CurrencyTypes } from "@requestnetwork/types";
   // Utils
   import { getInitialFormData, prepareRequestParams } from "./utils";
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { calculateInvoiceTotals } from "@requestnetwork/shared-utils/invoiceTotals";
-  import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
+  import {
+    getCurrencySupportedNetworksForConversion,
+    initializeCurrencyManager,
+  } from "@requestnetwork/shared-utils/initCurrencyManager";
   // Components
   import { InvoiceForm, InvoiceView } from "./invoice";
   import Button from "@requestnetwork/shared-components/button.svelte";
@@ -34,26 +39,34 @@
   const extractUniqueNetworkNames = (): string[] => {
     const networkSet = new Set<string>();
 
-    currencyManager.knownCurrencies.forEach((currency: any) => {
-      networkSet.add(currency.network);
-    });
+    currencyManager.knownCurrencies.forEach(
+      (currency: CurrencyTypes.CurrencyDefinition) => {
+        if (currency.network) {
+          networkSet.add(currency.network);
+        }
+      }
+    );
 
     return Array.from(networkSet);
   };
 
-  let networks = extractUniqueNetworkNames();
+  let networks: string[] = extractUniqueNetworkNames();
 
-  let network = networks[0];
+  let network: string | undefined = undefined;
+  let currency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
+  let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined = undefined;
 
-  const handleNetworkChange = (network: string) => {
-    if (network) {
+  const handleNetworkChange = (newNetwork: string) => {
+    if (newNetwork) {
       const newCurrencies = currencyManager.knownCurrencies.filter(
-        (currency: any) => currency.network === network
+        (currency: CurrencyTypes.CurrencyDefinition) =>
+          currency.type === Types.RequestLogic.CURRENCY.ISO4217 ||
+          currency.network === newNetwork
       );
 
-      network = network;
+      network = newNetwork;
       defaultCurrencies = newCurrencies;
-      currency = newCurrencies[0];
+      currency = undefined;
     }
   };
 
@@ -62,12 +75,33 @@
   let appStatus: APP_STATUS[] = [];
   let formData = getInitialFormData();
   let defaultCurrencies = currencyManager.knownCurrencies.filter(
-    (currency: any) => currency.network === network
+    (currency: CurrencyTypes.CurrencyDefinition) =>
+      currency.type === Types.RequestLogic.CURRENCY.ISO4217 || network
+        ? currency.network === network
+        : true
   );
 
-  let currency = defaultCurrencies[0];
+  const handleInvoiceCurrencyChange = (
+    value: CurrencyTypes.CurrencyDefinition
+  ) => {
+    invoiceCurrency = value;
+    network = undefined;
+    currency = undefined;
+
+    if (
+      invoiceCurrency &&
+      invoiceCurrency.type === Types.RequestLogic.CURRENCY.ISO4217
+    ) {
+      networks = getCurrencySupportedNetworksForConversion(
+        invoiceCurrency.hash,
+        currencyManager
+      );
+    } else {
+      networks = extractUniqueNetworkNames();
+    }
+  };
 
-  const handleCurrencyChange = (value: string) => {
+  const handleCurrencyChange = (value: CurrencyTypes.CurrencyDefinition) => {
     currency = value;
   };
 
@@ -93,7 +127,14 @@
 
   $: {
     const basicDetailsFilled =
-      formData.payeeAddress && formData.payerAddress && formData.dueDate;
+      formData.payeeAddress &&
+      formData.payerAddress &&
+      formData.dueDate &&
+      formData.invoiceNumber &&
+      formData.issuedOn &&
+      invoiceCurrency &&
+      currency &&
+      formData.issuedOn;
     const hasItems =
       formData.invoiceItems.length > 0 &&
       formData.invoiceItems.every(isValidItem);
@@ -132,6 +173,7 @@
     const requestCreateParameters = prepareRequestParams({
       address: account?.address,
       formData,
+      invoiceCurrency,
       currency,
       invoiceTotals,
     });
@@ -172,13 +214,19 @@
       bind:formData
       config={activeConfig}
       bind:defaultCurrencies
+      {handleInvoiceCurrencyChange}
       {handleCurrencyChange}
       {handleNetworkChange}
       {networks}
+      {currencyManager}
+      {invoiceCurrency}
+      {currency}
+      {network}
     />
     <div class="invoice-view-wrapper">
       <InvoiceView
         config={activeConfig}
+        {invoiceCurrency}
         {currency}
         bind:formData
         bind:canSubmit

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

@@ -8,6 +8,7 @@
 
   // Types
   import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
+  import { CurrencyTypes } from "@requestnetwork/types";
 
   // Utils
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
@@ -18,7 +19,8 @@
   export let config: IConfig;
   export let canSubmit = false;
   export let formData: CustomFormData;
-  export let currency = defaultCurrencies[0];
+  export let currency: CurrencyTypes.CurrencyDefinition | undefined;
+  export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
   export let submitForm: (e: Event) => Promise<void>;
   export let invoiceTotals = {
     amountWithoutTax: 0,
@@ -164,16 +166,15 @@
     </div>
     <p class="invoice-section-title">
       <span>Payment Chain</span>
-      {currency.network[0].toUpperCase() + currency.network.slice(1)}
+      {currency?.network ? currency.network.charAt(0).toUpperCase() + currency.network.slice(1).toLowerCase() : ""}
     </p>
     <p class="invoice-section-title">
       <span>Invoice Currency</span>
-      {currency.symbol}
-      ({currency.network})
+      {invoiceCurrency ? invoiceCurrency.symbol: ""}
     </p>
     <p class="invoice-section-title">
-      <span>Invoice Type</span>
-      Regular Invoice
+      <span>Settlement Currency</span>
+      {currency ? `${currency.symbol} (${currency.network})` : ""}
     </p>
     <div class="invoice-table-wrapper">
       <table class="invoice-table">
@@ -221,7 +222,7 @@
       >
         <span>Due: </span>
         <span
-          >{currency.symbol}
+          >{currency ? currency.symbol : ""}
           {" "}
           {invoiceTotals.totalAmount.toFixed(2)}</span
         >

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

@@ -18,16 +18,26 @@
   import { calculateItemTotal } from "@requestnetwork/shared-utils/invoiceTotals";
   import { checkAddress } from "@requestnetwork/shared-utils/checkEthAddress";
   import { inputDateFormat } from "@requestnetwork/shared-utils/formatDate";
+  import { Types } from "@requestnetwork/request-client.js";
+  import { CurrencyTypes } from "@requestnetwork/types";
   import isEmail from "validator/es/lib/isEmail";
 
   export let config: IConfig;
   export const invoiceNumber: number = 1;
   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 = [];
+  export let currencyManager: any;
+  export let invoiceCurrency: CurrencyTypes.CurrencyDefinition | undefined;
+  export let currency:
+    | CurrencyTypes.ERC20Currency
+    | CurrencyTypes.NativeCurrency
+    | undefined;
+  export let network: any;
 
   let validationErrors = {
     payeeAddress: false,
@@ -108,6 +118,21 @@
     }
   };
 
+  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: "",
@@ -374,25 +399,45 @@
             </div>
           </Accordion>
         </div>
-        <Dropdown
-          {config}
-          placeholder="Select payment chain"
-          options={networks.map((network) => {
-            return {
-              value: network,
-              label: network[0].toUpperCase() + network.slice(1),
-            };
-          })}
-          onchange={handleNetworkChange}
-        />
 
         <Dropdown
           {config}
-          placeholder="Select a currency"
+          selectedValue={invoiceCurrency
+            ? `${invoiceCurrency.symbol} ${invoiceCurrency?.network ? `(${invoiceCurrency?.network})` : ""}`
+            : undefined}
+          placeholder="Invoice currency (labeling)"
           options={defaultCurrencies.map((currency) => ({
             value: currency,
-            label: `${currency.symbol} (${currency.network})`,
+            label: `${currency.symbol} ${currency?.network ? `(${currency?.network})` : ""}`,
           }))}
+          onchange={handleInvoiceCurrencyChange}
+        />
+        <Dropdown
+          {config}
+          placeholder="Payment chain"
+          selectedValue={network}
+          options={networks
+            .filter((networkItem) => networkItem)
+            .map((networkItem) => {
+              return {
+                value: networkItem,
+                label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
+              };
+            })}
+          onchange={handleNetworkChange}
+        />
+        <Dropdown
+          {config}
+          placeholder="Settlement currency"
+          selectedValue={currency
+            ? `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`
+            : undefined}
+          options={defaultCurrencies
+            .filter((currency) => filterSettlementCurrencies(currency))
+            .map((currency) => ({
+              value: currency,
+              label: `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`,
+            }))}
           onchange={handleCurrencyChange}
         />
       </div>