From 61fe4038a7b2b219cd82187e3c2b547e7fb39df9 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Wed, 20 Nov 2024 14:38:20 +0100 Subject: [PATCH 1/2] feat: added better formatting, changed styles of payee and payer info --- .../src/lib/invoice/form-view.svelte | 131 ++++++++++++------ .../src/lib/dashboard/invoice-view.svelte | 97 +++++++++---- 2 files changed, 160 insertions(+), 68 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..77bfd104 100644 --- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form-view.svelte @@ -48,45 +48,49 @@ const generateDetailParagraphs = (info: any) => { const details = []; - if (info.firstName) { - details.push({ label: "First Name", value: info.firstName }); + + if (info.firstName || info.lastName) { + details.push({ + value: `${info.firstName || ""} ${info.lastName || ""}`.trim(), + }); } + if (info.email) { - details.push({ label: "Email", value: info.email }); - } - if (info.lastName) { - details.push({ label: "Last Name", value: info.lastName }); + details.push({ + value: info.email, + isEmail: true, + }); } + if (info.businessName) { - details.push({ label: "Company Name", value: info.businessName }); - } - if (info.taxRegistration) { details.push({ - label: "Tax Identification Number (TIN)", - value: info.taxRegistration, + value: info.businessName, + isCompany: true, }); } - if (info.address["country-name"]) { - details.push({ label: "Country", value: info.address["country-name"] }); - } - if (info.address["street-address"]) { + + if (info.taxRegistration) { details.push({ - label: "Street Address", - value: info.address["street-address"], + value: info.taxRegistration, }); } - if (info.address["postal-code"]) { + + const addressParts = []; + if (info.address["street-address"]) + addressParts.push(info.address["street-address"]); + if (info.address["locality"]) addressParts.push(info.address["locality"]); + if (info.address["region"]) addressParts.push(info.address["region"]); + if (info.address["postal-code"]) + addressParts.push(info.address["postal-code"]); + if (info.address["country-name"]) + addressParts.push(info.address["country-name"]); + + if (addressParts.length > 0) { details.push({ - label: "Postal Code", - value: info.address["postal-code"], + value: addressParts.join(", "), }); } - if (info.address["locality"]) { - details.push({ label: "City", value: info.address["locality"] }); - } - if (info.address["region"]) { - details.push({ label: "Region", value: info.address["region"] }); - } + return details; }; @@ -137,40 +141,46 @@ From {formData.payeeAddress}

-
0 && "invoice-details-active"} `} - > - {#each sellerInfo as paragraph} -
- {paragraph.label} - {paragraph.value} -
+
+ {#each sellerInfo as { label, value, isEmail, isCompany }} +

+ {#if isEmail} + {value} + {:else} + {value} + {/if} +

{/each}
+

Billed to {formData.payerAddress}

-
0 && "invoice-details-active"} `} - > - {#each buyerInfo as paragraph} -
- {paragraph.label} - {paragraph.value} -
+
+ {#each buyerInfo as { label, value, isEmail, isCompany }} +

+ {#if isEmail} + {value} + {:else} + {value} + {/if} +

{/each}

Payment Chain - {currency?.network ? currency.network.charAt(0).toUpperCase() + currency.network.slice(1).toLowerCase() : ""} + {currency?.network + ? currency.network.charAt(0).toUpperCase() + + currency.network.slice(1).toLowerCase() + : ""}

Invoice Currency - {invoiceCurrency ? invoiceCurrency.symbol: ""} + {invoiceCurrency ? invoiceCurrency.symbol : ""}

Settlement Currency @@ -487,4 +497,37 @@ fill: white; color: white; } + + .invoice-info { + display: flex; + flex-direction: column; + gap: 6px; + } + + .invoice-info p { + display: flex; + gap: 8px; + } + + .invoice-info span { + color: #6e7480; + } + + .invoice-info .company { + font-weight: 600 !important; + } + + .invoice-info a { + color: #6e7480; + } + + .invoice-info a:hover { + text-decoration: underline; + } + + .invoice-section-divider { + width: 100%; + height: 1px; + background-color: var(--mainColor); + } diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte index 735aa603..1e4d6826 100644 --- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte +++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte @@ -31,6 +31,12 @@ import { getConversionPaymentValues } from "../../utils/getConversionPaymentValues"; import { getEthersSigner } from "../../utils"; + interface BuyerSelerInfo { + value: string; + isCompany?: boolean; + isEmail?: boolean; + } + export let config; export let account: GetAccountReturnType; export let requestNetwork: RequestNetwork | null | undefined; @@ -53,8 +59,8 @@ let address = account.address; let firstItems: any; let otherItems: any; - let sellerInfo: { label: string; value: string }[] = []; - let buyerInfo: { label: string; value: string }[] = []; + let sellerInfo: BuyerSelerInfo[] = []; + let buyerInfo: BuyerSelerInfo[] = []; let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase(); let unsupportedNetwork = false; let hexStringChain = "0x" + account.chainId.toString(16); @@ -65,17 +71,37 @@ | undefined; const generateDetailParagraphs = (info: any) => { + const fullName = [info?.firstName, info?.lastName] + .filter(Boolean) + .join(" "); + const fullAddress = [ + info?.address?.["street-address"], + info?.address?.locality, + info?.address?.region, + info?.address?.["postal-code"], + info?.address?.["country-name"], + ] + .filter(Boolean) + .join(", "); + return [ - { label: "First Name", value: info?.firstName }, - { label: "Last Name", value: info?.lastName }, - { label: "Company Name", value: info?.businessName }, - { label: "Tax Registration", value: info?.taxRegistration }, - { label: "Country", value: info?.address?.["country-name"] }, - { label: "City", value: info?.address?.locality }, - { label: "Region", value: info?.address?.region }, - { label: "Postal Code", value: info?.address?.["postal-code"] }, - { label: "Street Address", value: info?.address?.["street-address"] }, - { label: "Email", value: info?.email }, + ...(fullName ? [{ label: "Name", value: fullName }] : []), + ...(info?.businessName + ? [ + { + label: "Company Name", + value: info?.businessName, + isCompany: true, + }, + ] + : []), + ...(info?.taxRegistration + ? [{ label: "Tax Registration", value: info?.taxRegistration }] + : []), + ...(fullAddress ? [{ label: "Address", value: fullAddress }] : []), + ...(info?.email + ? [{ label: "Email", value: info?.email, isEmail: true }] + : []), ].filter((detail) => detail.value); }; @@ -248,7 +274,7 @@ return ( (paymentNetworkExtension?.id && - await approvalCheckers[paymentNetworkExtension.id]?.()) || + (await approvalCheckers[paymentNetworkExtension.id]?.())) || false ); }; @@ -376,11 +402,16 @@

{request?.payee?.value || "-"}

{#if sellerInfo.length > 0} -
- {#each sellerInfo as { label, value }} +
+ {#each sellerInfo as { value, isCompany, isEmail }}

- {label || "-"}: - {value || "-"} + {#if isEmail} + + {:else if isCompany} + {value} + {:else} + {value} + {/if}

{/each}
@@ -391,11 +422,16 @@

{request?.payer?.value || "-"}

{#if buyerInfo.length > 0} -
- {#each buyerInfo as { label, value }} +
+ {#each buyerInfo as { value, isCompany, isEmail }}

- {label || "-"}: - {value || "-"} + {#if isEmail} + + {:else if isCompany} + {value} + {:else} + {value} + {/if}

{/each}
@@ -647,10 +683,11 @@ .invoice-info { display: flex; - flex-wrap: wrap; - gap: 18px; - padding: 0.75rem; + flex-direction: column; + gap: 6px; width: fit-content; + color: #6e7480; + font-size: 16px; } .invoice-info p { @@ -862,4 +899,16 @@ .bg-zinc-light { background-color: #f4f4f5; } + + .company-name { + font-weight: 600 !important; + } + + .email-link { + color: #6e7480; + } + + .email-link:hover { + text-decoration: underline; + } From c7d11f4b84ca4bb766acbc57cb8fc46ba952d034 Mon Sep 17 00:00:00 2001 From: sstefdev Date: Thu, 21 Nov 2024 12:30:54 +0100 Subject: [PATCH 2/2] fix: removing labels and adding better types for enityt info --- .../src/lib/invoice/form-view.svelte | 4 +-- .../src/lib/dashboard/invoice-view.svelte | 27 +++++++++---------- 2 files changed, 14 insertions(+), 17 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 77bfd104..11995cfb 100644 --- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form-view.svelte @@ -142,7 +142,7 @@ {formData.payeeAddress}

- {#each sellerInfo as { label, value, isEmail, isCompany }} + {#each sellerInfo as { value, isEmail, isCompany }}

{#if isEmail} {value} @@ -160,7 +160,7 @@ {formData.payerAddress}

- {#each buyerInfo as { label, value, isEmail, isCompany }} + {#each buyerInfo as { value, isEmail, isCompany }}

{#if isEmail} {value} diff --git a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte index 1e4d6826..76419657 100644 --- a/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte +++ b/packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte @@ -31,12 +31,16 @@ import { getConversionPaymentValues } from "../../utils/getConversionPaymentValues"; import { getEthersSigner } from "../../utils"; - interface BuyerSelerInfo { + interface EntityInfo { value: string; isCompany?: boolean; isEmail?: boolean; } + interface BuyerInfo extends EntityInfo {} + + interface SellerInfo extends EntityInfo {} + export let config; export let account: GetAccountReturnType; export let requestNetwork: RequestNetwork | null | undefined; @@ -46,7 +50,6 @@ export let wagmiConfig: any; let network: string | undefined = request?.currencyInfo?.network || "mainnet"; - // FIXME: Use a non deprecated function let currency: CurrencyTypes.CurrencyDefinition | undefined = getCurrencyFromManager(request.currencyInfo, currencyManager); let paymentCurrencies: (CurrencyTypes.CurrencyDefinition | undefined)[] = []; @@ -59,11 +62,11 @@ let address = account.address; let firstItems: any; let otherItems: any; - let sellerInfo: BuyerSelerInfo[] = []; - let buyerInfo: BuyerSelerInfo[] = []; + let sellerInfo: SellerInfo[] = []; + let buyerInfo: BuyerInfo[] = []; let isPayee = request?.payee?.value.toLowerCase() === address?.toLowerCase(); let unsupportedNetwork = false; - let hexStringChain = "0x" + account.chainId.toString(16); + let hexStringChain = "0x" + account?.chainId?.toString(16); let correctChain = hexStringChain === String(getNetworkIdFromNetworkName(network)); let paymentNetworkExtension: @@ -85,23 +88,18 @@ .join(", "); return [ - ...(fullName ? [{ label: "Name", value: fullName }] : []), + ...(fullName ? [{ value: fullName }] : []), ...(info?.businessName ? [ { - label: "Company Name", value: info?.businessName, isCompany: true, }, ] : []), - ...(info?.taxRegistration - ? [{ label: "Tax Registration", value: info?.taxRegistration }] - : []), - ...(fullAddress ? [{ label: "Address", value: fullAddress }] : []), - ...(info?.email - ? [{ label: "Email", value: info?.email, isEmail: true }] - : []), + ...(info?.taxRegistration ? [{ value: info?.taxRegistration }] : []), + ...(fullAddress ? [{ value: fullAddress }] : []), + ...(info?.email ? [{ value: info?.email, isEmail: true }] : []), ].filter((detail) => detail.value); }; @@ -133,7 +131,6 @@ $: { account = account; network = request?.currencyInfo?.network || "mainnet"; - // FIXME: Use a non deprecated function currency = getCurrencyFromManager(request.currencyInfo, currencyManager); }