diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte index 96bb541b..8f1b454f 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"; @@ -49,11 +50,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); @@ -154,6 +152,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; + }
@@ -182,6 +191,38 @@ label="From" placeholder="Connect wallet to populate" /> + {#if !showPayeeAddressInput} + + + {/if}
-
@@ -639,6 +668,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 +838,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; + } 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}