Fix for the payee address

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

@@ -135,7 +135,7 @@
     <div class="invoice-section">
       <p class="invoice-section-title">
         <span>From</span>
-        {formData.payeeAddress}
+        {formData.creatorId}
       </p>
       <div
         class={`invoice-details ${sellerInfo.length > 0 && "invoice-details-active"} `}
@@ -166,11 +166,14 @@
     </div>
     <p class="invoice-section-title">
       <span>Payment Chain</span>
-      {currency?.network ? currency.network.charAt(0).toUpperCase() + currency.network.slice(1).toLowerCase() : ""}
+      {currency?.network
+        ? currency.network.charAt(0).toUpperCase() +
+          currency.network.slice(1).toLowerCase()
+        : ""}
     </p>
     <p class="invoice-section-title">
       <span>Invoice Currency</span>
-      {invoiceCurrency ? invoiceCurrency.symbol: ""}
+      {invoiceCurrency ? invoiceCurrency.symbol : ""}
     </p>
     <p class="invoice-section-title">
       <span>Settlement Currency</span>

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

@@ -9,6 +9,7 @@
   // Icons
   import Trash from "@requestnetwork/shared-icons/trash.svelte";
   import Plus from "@requestnetwork/shared-icons/plus.svelte";
+  import Close from "@requestnetwork/shared-icons/close.svelte";
 
   // Types
   import type { IConfig, CustomFormData } from "@requestnetwork/shared-types";
@@ -49,11 +50,7 @@
     },
   };
 
-  let creatorId = "";
-
-  $: {
-    creatorId = formData.creatorId;
-  }
+  let showPayeeAddressInput = false;
 
   const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
     validationErrors[`${type}`].email = !isEmail(email);
@@ -154,6 +151,17 @@
   const removeInvoiceItem = (index: number) => {
     formData.invoiceItems = formData.invoiceItems.filter((_, i) => i !== index);
   };
+
+  const togglePayeeAddress = () => {
+    showPayeeAddressInput = !showPayeeAddressInput;
+    if (!showPayeeAddressInput) {
+      formData.payeeAddress = formData.creatorId;
+    }
+  };
+
+  $: if (!showPayeeAddressInput && formData.creatorId) {
+    formData.payeeAddress = formData.creatorId;
+  }
 </script>
 
 <form class="invoice-form">
@@ -178,10 +186,42 @@
             disabled
             id="creatorId"
             type="text"
-            value={creatorId}
+            value={formData.creatorId}
             label="From"
             placeholder="Connect wallet to populate"
           />
+          {#if !showPayeeAddressInput}
+            <Button
+              text="+ Add Recipient Address"
+              type="button"
+              onClick={togglePayeeAddress}
+              className="invoice-form-add-recipient-button"
+            />
+          {:else}
+            <div class="payee-address-container">
+              <Input
+                label="Where do you want to receive your payment?"
+                id="payeeAddress"
+                type="text"
+                value={formData.payeeAddress}
+                placeholder="0x..."
+                {handleInput}
+                onBlur={checkPayeeAddress}
+                error={validationErrors.payeeAddress
+                  ? "Please enter a valid Ethereum address"
+                  : ""}
+              />
+              <Button
+                type="button"
+                onClick={togglePayeeAddress}
+                className="invoice-form-close-recipient-button"
+              >
+                <div slot="icon" style="padding: 7px;">
+                  <Close />
+                </div>
+              </Button>
+            </div>
+          {/if}
           <Accordion title="Add Your Info">
             <div class="invoice-form-info">
               <Input
@@ -389,28 +429,16 @@
           {config}
           placeholder="Settlement currency"
           selectedValue={currency
-            ? `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`
+            ? `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`
             : undefined}
           options={defaultCurrencies
             .filter((currency) => filterSettlementCurrencies(currency))
             .map((currency) => ({
               value: currency,
-              label: `${currency.symbol ?? 'Unknown'} (${currency?.network ?? 'Unknown'})`,
+              label: `${currency.symbol ?? "Unknown"} (${currency?.network ?? "Unknown"})`,
             }))}
           onchange={handleCurrencyChange}
         />
-        <Input
-          label="Where do you want to receive your payment?"
-          id="payeeAddress"
-          type="text"
-          value={formData.payeeAddress}
-          placeholder="0x..."
-          {handleInput}
-          onBlur={checkPayeeAddress}
-          error={validationErrors.payeeAddress
-            ? "Please enter a valid Ethereum address"
-            : ""}
-        />
       </div>
     </div>
     <div class="invoice-form-dates">
@@ -639,6 +667,20 @@
     gap: 20px;
   }
 
+  :global(.invoice-form-add-recipient-button) {
+    background-color: transparent !important;
+    color: var(--mainColor) !important;
+    text-transform: uppercase;
+    transform: none !important;
+    font-weight: 500;
+    font-size: 14px !important;
+    width: fit-content;
+  }
+
+  :global(.invoice-form-add-recipient-button:hover) {
+    color: var(--secondaryColor) !important;
+  }
+
   .invoice-form-section {
     display: flex;
     flex-direction: column;
@@ -795,4 +837,25 @@
     width: 12px;
     height: 12px;
   }
+
+  .payee-address-container {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .payee-address-container :global(.input-wrapper) {
+    flex: 1;
+  }
+
+  :global(.invoice-form-close-recipient-button) {
+    position: absolute;
+    right: 0;
+    top: -4px;
+  }
+
+  :global(.invoice-form-close-recipient-button div) {
+    padding: 4px !important;
+  }
 </style>

shared/components/button.svelte

@@ -17,7 +17,7 @@
   {type}
   {disabled}
   on:click={onClick}
-  class={`button ${padding} ${className} main-button`}
+  class={`button ${padding} main-button ${className}`}
 >
   {#if icon}
     <i class={icon.class} style={icon.style}></i>