Better formating and style for invoice info

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 @@
         <span>From</span>
         {formData.payeeAddress}
       </p>
-      <div
-        class={`invoice-details ${sellerInfo.length > 0 && "invoice-details-active"} `}
-      >
-        {#each sellerInfo as paragraph}
-          <div class="invoice-details-info">
-            <span>{paragraph.label}</span>
-            {paragraph.value}
-          </div>
+      <div class={`invoice-info`}>
+        {#each sellerInfo as { value, isEmail, isCompany }}
+          <p>
+            {#if isEmail}
+              <a href="mailto:{value}">{value}</a>
+            {:else}
+              <span class:company={isCompany}>{value}</span>
+            {/if}
+          </p>
         {/each}
       </div>
     </div>
+    <div class="invoice-section-divider"></div>
     <div class="invoice-section">
       <p class="invoice-section-title">
         <span>Billed to</span>
         {formData.payerAddress}
       </p>
-      <div
-        class={`invoice-details ${buyerInfo.length > 0 && "invoice-details-active"} `}
-      >
-        {#each buyerInfo as paragraph}
-          <div class="invoice-details-info">
-            <span>{paragraph.label}</span>
-            {paragraph.value}
-          </div>
+      <div class={`invoice-info`}>
+        {#each buyerInfo as { value, isEmail, isCompany }}
+          <p>
+            {#if isEmail}
+              <a href="mailto:{value}">{value}</a>
+            {:else}
+              <span class:company={isCompany}>{value}</span>
+            {/if}
+          </p>
         {/each}
       </div>
     </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>
@@ -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);
+  }
 </style>

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

@@ -31,6 +31,16 @@
   import { getConversionPaymentValues } from "../../utils/getConversionPaymentValues";
   import { getEthersSigner } from "../../utils";
 
+  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;
@@ -40,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)[] = [];
@@ -53,29 +62,44 @@
   let address = account.address;
   let firstItems: any;
   let otherItems: any;
-  let sellerInfo: { label: string; value: string }[] = [];
-  let buyerInfo: { label: string; value: string }[] = [];
+  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:
     | Types.Extension.IPaymentNetworkState<any>
     | 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 ? [{ value: fullName }] : []),
+      ...(info?.businessName
+        ? [
+            {
+              value: info?.businessName,
+              isCompany: true,
+            },
+          ]
+        : []),
+      ...(info?.taxRegistration ? [{ value: info?.taxRegistration }] : []),
+      ...(fullAddress ? [{ value: fullAddress }] : []),
+      ...(info?.email ? [{ value: info?.email, isEmail: true }] : []),
     ].filter((detail) => detail.value);
   };
 
@@ -107,7 +131,6 @@
   $: {
     account = account;
     network = request?.currencyInfo?.network || "mainnet";
-    // FIXME: Use a non deprecated function
     currency = getCurrencyFromManager(request.currencyInfo, currencyManager);
   }
 
@@ -248,7 +271,7 @@
 
     return (
       (paymentNetworkExtension?.id &&
-        await approvalCheckers[paymentNetworkExtension.id]?.()) ||
+        (await approvalCheckers[paymentNetworkExtension.id]?.())) ||
       false
     );
   };
@@ -376,11 +399,16 @@
     <p>{request?.payee?.value || "-"}</p>
   </div>
   {#if sellerInfo.length > 0}
-    <div class={`invoice-info bg-zinc-light`}>
-      {#each sellerInfo as { label, value }}
+    <div class={`invoice-info`}>
+      {#each sellerInfo as { value, isCompany, isEmail }}
         <p>
-          <span>{label || "-"}:</span>
-          {value || "-"}
+          {#if isEmail}
+            <a href="mailto:{value}" class="email-link">{value}</a>
+          {:else if isCompany}
+            <span class="company-name">{value}</span>
+          {:else}
+            {value}
+          {/if}
         </p>
       {/each}
     </div>
@@ -391,11 +419,16 @@
     <p>{request?.payer?.value || "-"}</p>
   </div>
   {#if buyerInfo.length > 0}
-    <div class={`invoice-info bg-zinc-light`}>
-      {#each buyerInfo as { label, value }}
+    <div class={`invoice-info`}>
+      {#each buyerInfo as { value, isCompany, isEmail }}
         <p>
-          <span>{label || "-"}:</span>
-          {value || "-"}
+          {#if isEmail}
+            <a href="mailto:{value}" class="email-link">{value}</a>
+          {:else if isCompany}
+            <span class="company-name">{value}</span>
+          {:else}
+            {value}
+          {/if}
         </p>
       {/each}
     </div>
@@ -647,10 +680,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 +896,16 @@
   .bg-zinc-light {
     background-color: #f4f4f5;
   }
+
+  .company-name {
+    font-weight: 600 !important;
+  }
+
+  .email-link {
+    color: #6e7480;
+  }
+
+  .email-link:hover {
+    text-decoration: underline;
+  }
 </style>