feat: Add Type-to-Search and Icons for Payment Chain and Currency in Create Invoice Form (#227)

Author: sstefdev

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

@@ -23,7 +23,7 @@
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Status from "@requestnetwork/shared-components/status.svelte";
   import Modal from "@requestnetwork/shared-components/modal.svelte";
-  import { EncryptionTypes, CipherProviderTypes } from '@requestnetwork/types';
+  import { EncryptionTypes, CipherProviderTypes } from "@requestnetwork/types";
 
   export let config: IConfig;
   export let wagmiConfig: WagmiConfig;
@@ -115,7 +115,7 @@
     totalAmount: 0,
   };
 
-  $: cipherProvider = requestNetwork?.getCipherProvider();
+  $: cipherProvider = undefined;
 
   $: {
     if (wagmiConfig) {
@@ -188,7 +188,7 @@
       try {
         addToStatus(APP_STATUS.PERSISTING_TO_IPFS);
         let request;
-        if(cipherProvider && formData.isEncrypted) {
+        if (cipherProvider && formData.isEncrypted) {
           const payeeEncryptionParams = {
             key: requestCreateParameters.requestInfo.payee?.value!,
             method: EncryptionTypes.METHOD.KMS,
@@ -205,7 +205,7 @@
               paymentNetwork: requestCreateParameters.paymentNetwork,
               contentData: requestCreateParameters.contentData,
             },
-            [payeeEncryptionParams, payerEncryptionParams],
+            [payeeEncryptionParams, payerEncryptionParams]
           );
         } else {
           request = await requestNetwork.createRequest({

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

@@ -194,7 +194,7 @@
       </span>
     </p>
     <p class="invoice-section-title">
-      <span>Settlement Currency</span>
+      <span>Payment Currency</span>
       <span class="invoice-section-title-content">
         {currency ? `${currency.symbol} (${currency.network})` : ""}
       </span>

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

@@ -5,6 +5,7 @@
   import Input from "@requestnetwork/shared-components/input.svelte";
   import Labels from "@requestnetwork/shared-components/labels.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
+  import SearchableDropdown from "@requestnetwork/shared-components/searchable-dropdown.svelte";
 
   // Icons
   import Trash from "@requestnetwork/shared-icons/trash.svelte";
@@ -410,77 +411,65 @@
             </div>
           </Accordion>
         </div>
-        <Dropdown
-          {config}
-          placeholder="Payment chain"
-          selectedValue={network}
-          options={networks
-            .filter((networkItem) => networkItem)
-            .map((networkItem) => ({
-              value: networkItem,
-              label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
-            }))}
-          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) => ({
+
+        <div class="searchable-dropdown-container">
+          <SearchableDropdown
+            getValue={(currency) => currency.value.symbol}
+            getDisplayValue={(currency) =>
+              `${currency.value.symbol} ${currency.value.network ? `(${currency.value.network})` : ""}`}
+            placeholder="Invoice currency"
+            items={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})` : ""}`,
+                type: "invoiceCurrency",
+              })) ?? []}
+            onSelect={handleInvoiceCurrencyChange}
+          />
+          <SearchableDropdown
+            items={networks
+              .filter((networkItem) => networkItem)
+              .map((networkItem) => {
+                return {
+                  value: networkItem,
+                  label: networkItem[0]?.toUpperCase() + networkItem?.slice(1),
+                  type: "network",
+                };
+              })}
+            placeholder="Payment chain"
+            getValue={(network) => network.value}
+            getDisplayValue={(network) => network.label}
+            onSelect={handleNetworkChange}
+          />
+          <SearchableDropdown
+            items={filteredSettlementCurrencies.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={filteredSettlementCurrencies.map((currency) => ({
-            value: currency,
-            label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
-          }))}
-          onchange={handleCurrencyChange}
-        />
-        {#if cipherProvider}
-          <Input
-            type="checkbox"
-            id="isEncrypted"
-            label="Encrypt invoice"
-            bind:checked={formData.isEncrypted}
+              type: "settlementCurrency",
+            }))}
+            placeholder="Payment currency"
+            getValue={(currency) => currency.value.symbol}
+            getDisplayValue={(currency) =>
+              `${currency.value.symbol} (${currency.value.network})`}
+            onSelect={handleCurrencyChange}
+          />
+          {#if cipherProvider}
+            <Input
+              type="checkbox"
+              id="isEncrypted"
+              label="Encrypt invoice"
+              bind:checked={formData.isEncrypted}
             />
-        {/if}
+          {/if}
+        </div>
       </div>
     </div>
-    <div class="invoice-form-dates">
-      <Input
-        id="issuedOn"
-        type="date"
-        value={inputDateFormat(new Date())}
-        label="Issued Date"
-        {handleInput}
-      />
-      <Input
-        id="dueDate"
-        type="date"
-        min={inputDateFormat(formData.issuedOn)}
-        value={new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000}
-        label="Due Date"
-        {handleInput}
-      />
-    </div>
   </div>
   <div class="invoice-form-table-section">
     <div class="invoice-form-table-wrapper">
@@ -592,6 +581,26 @@
         </div>
       </Button>
     </div>
+    <div class="invoice-form-dates">
+      <Input
+        id="issuedOn"
+        type="date"
+        value={inputDateFormat(new Date())}
+        label="Issued Date"
+        {handleInput}
+      />
+      <Input
+        id="dueDate"
+        type="date"
+        min={inputDateFormat(formData.issuedOn)}
+        value={inputDateFormat(
+          new Date(new Date(formData.issuedOn).getTime() + 24 * 60 * 60 * 1000)
+        )}
+        label="Due Date"
+        {handleInput}
+      />
+    </div>
+
     <div class="invoice-form-label-wrapper">
       <Input
         max={200}
@@ -635,7 +644,7 @@
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
     gap: 20px;
     box-sizing: border-box;
-    min-width: 700px;
+    min-width: 760px;
   }
 
   .invoice-form-container {
@@ -658,15 +667,17 @@
 
   .invoice-form-dates {
     display: flex;
-    flex-direction: column;
-    gap: 9px;
-    margin-left: auto;
-    width: 260px;
+    gap: 16px;
+    width: 100%;
+  }
+
+  :global(.invoice-form-dates .input-wrapper) {
+    width: 100%;
   }
 
   @media only screen and (max-width: 1300px) {
     .invoice-form-dates {
-      margin-left: 0;
+      flex-direction: column;
     }
 
     .invoice-form-container {
@@ -781,7 +792,7 @@
   }
 
   .invoice-form-table-body-quantity {
-    width: 80px !important;
+    width: 180px !important;
   }
 
   .invoice-form-table-body-amount {
@@ -868,4 +879,20 @@
   :global(.invoice-form-close-recipient-button div) {
     padding: 4px !important;
   }
+
+  .searchable-dropdown-container {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 30px;
+  }
+
+  @media only screen and (max-width: 1300px) {
+    .searchable-dropdown-container {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  :global(.danger) {
+    color: #ff0000;
+  }
 </style>