From 934c847497d796c7adc780b22159a8e1feb7f767 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Tue, 19 Nov 2024 14:36:26 +0100
Subject: [PATCH 1/2] feat: changed button components, updated form to use add
 address for payee

---
 .../src/lib/invoice/form.svelte               | 98 +++++++++++++++----
 shared/components/button.svelte               |  2 +-
 2 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 11202080..b4a35248 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/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";
@@ -39,11 +40,8 @@
     },
   };
 
-  let creatorId = "";
-
-  $: {
-    creatorId = formData.creatorId;
-  }
+  let creatorId = formData.creatorId || "";
+  let showPayeeAddressInput = false;
 
   const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
     validationErrors[`${type}`].email = !isEmail(email);
@@ -129,6 +127,17 @@
   const removeInvoiceItem = (index: number) => {
     formData.invoiceItems = formData.invoiceItems.filter((_, i) => i !== index);
   };
+
+  const togglePayeeAddress = () => {
+    showPayeeAddressInput = !showPayeeAddressInput;
+    if (!showPayeeAddressInput) {
+      formData.payeeAddress = creatorId;
+    }
+  };
+
+  $: if (!showPayeeAddressInput && creatorId) {
+    formData.payeeAddress = creatorId;
+  }
 </script>
 
 <form class="invoice-form">
@@ -157,6 +166,38 @@
             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
@@ -354,18 +395,6 @@
           }))}
           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">
@@ -594,6 +623,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;
@@ -750,4 +793,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>
diff --git a/shared/components/button.svelte b/shared/components/button.svelte
index 37e49cdb..9a50a391 100644
--- a/shared/components/button.svelte
+++ b/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>

From 473aae9d7d4140925b826b9245fe2b7c707bd589 Mon Sep 17 00:00:00 2001
From: sstefdev <sstefandev@gmail.com>
Date: Wed, 20 Nov 2024 15:06:11 +0100
Subject: [PATCH 2/2] fix: payee indetity field populating

---
 .../src/lib/invoice/form-view.svelte                |  9 ++++++---
 .../create-invoice-form/src/lib/invoice/form.svelte | 13 ++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/create-invoice-form/src/lib/invoice/form-view.svelte b/packages/create-invoice-form/src/lib/invoice/form-view.svelte
index b027102b..9645da8a 100644
--- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte
+++ b/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>
diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte
index 8f1b454f..d0abf3b4 100644
--- a/packages/create-invoice-form/src/lib/invoice/form.svelte
+++ b/packages/create-invoice-form/src/lib/invoice/form.svelte
@@ -50,7 +50,6 @@
     },
   };
 
-  let creatorId = formData.creatorId || "";
   let showPayeeAddressInput = false;
 
   const validateEmail = (email: string, type: "sellerInfo" | "buyerInfo") => {
@@ -156,12 +155,12 @@
   const togglePayeeAddress = () => {
     showPayeeAddressInput = !showPayeeAddressInput;
     if (!showPayeeAddressInput) {
-      formData.payeeAddress = creatorId;
+      formData.payeeAddress = formData.creatorId;
     }
   };
 
-  $: if (!showPayeeAddressInput && creatorId) {
-    formData.payeeAddress = creatorId;
+  $: if (!showPayeeAddressInput && formData.creatorId) {
+    formData.payeeAddress = formData.creatorId;
   }
 </script>
 
@@ -187,7 +186,7 @@
             disabled
             id="creatorId"
             type="text"
-            value={creatorId}
+            value={formData.creatorId}
             label="From"
             placeholder="Connect wallet to populate"
           />
@@ -430,13 +429,13 @@
           {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}
         />