wip

midday-ai · Oct 27, 2024 · 99c2676 · 99c2676
1 parent 6386d37
commit 99c2676
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 7 deletions.
diff --git a/packages/invoice/src/templates/html/components/editor-content.tsx b/packages/invoice/src/templates/html/components/editor-content.tsx
@@ -6,8 +6,6 @@ export function EditorContent({ content }: { content?: JSON }) {
   }
 
   return (
-    <div className="font-mono text-[11px] leading-5">
-      {formatEditorToHtml(content)}
-    </div>
+    <div className="font-mono text-[11px]">{formatEditorToHtml(content)}</div>
   );
 }
diff --git a/packages/invoice/src/templates/html/components/line-items.tsx b/packages/invoice/src/templates/html/components/line-items.tsx
@@ -0,0 +1,44 @@
+import { formatAmount } from "../../../utils/format";
+import type { LineItem } from "../../types";
+type Props = {
+  lineItems: LineItem[];
+  currency: string;
+  descriptionLabel: string;
+  quantityLabel: string;
+  priceLabel: string;
+  totalLabel: string;
+};
+
+export function LineItems({
+  lineItems,
+  currency,
+  descriptionLabel,
+  quantityLabel,
+  priceLabel,
+  totalLabel,
+}: Props) {
+  return (
+    <div className="mt-5">
+      <div className="flex border-b border-black pb-1 mb-1">
+        <div className="flex-3 text-xs font-medium">{descriptionLabel}</div>
+        <div className="flex-1 text-xs font-medium">{priceLabel}</div>
+        <div className="flex-[0.5] text-xs font-medium">{quantityLabel}</div>
+        <div className="flex-1 text-xs font-medium text-right">
+          {totalLabel}
+        </div>
+      </div>
+      {lineItems.map((item, index) => (
+        <div key={`line-item-${index.toString()}`} className="flex py-1">
+          <div className="flex-3 text-xs">{item.name}</div>
+          <div className="flex-1 text-xs">
+            {formatAmount({ currency, amount: item.price })}
+          </div>
+          <div className="flex-[0.5] text-xs">{item.quantity}</div>
+          <div className="flex-1 text-xs text-right">
+            {formatAmount({ currency, amount: item.quantity * item.price })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/invoice/src/templates/html/components/meta.tsx b/packages/invoice/src/templates/html/components/meta.tsx
@@ -1,5 +1,5 @@
-import type { Template } from "@midday/invoice/types";
 import { format } from "date-fns";
+import type { Template } from "../../types";
 
 type Props = {
   template: Template;

diff --git a/packages/invoice/src/templates/html/index.tsx b/packages/invoice/src/templates/html/index.tsx
@@ -3,6 +3,7 @@ import type { TemplateProps } from "../types";
 import { CustomerDetails } from "./components/customer-details";
 import { EditorContent } from "./components/editor-content";
 import { FromDetails } from "./components/from-details";
+import { LineItems } from "./components/line-items";
 import { Logo } from "./components/logo";
 import { Meta } from "./components/meta";
 
@@ -62,6 +63,14 @@ export function HtmlTemplate({
             <EditorContent content={customer_details} />
           </div>
         </div>
+
+        <div className="mt-8">
+          <LineItems
+            lineItems={line_items}
+            currency={currency}
+            descriptionLabel={template.description_label}
+          />
+        </div>
       </div>
     </ScrollArea>
   );

diff --git a/packages/invoice/src/templates/pdf/components/line-items.tsx b/packages/invoice/src/templates/pdf/components/line-items.tsx
@@ -1,6 +1,6 @@
 import { Text, View } from "@react-pdf/renderer";
-import type { LineItem } from "../template/invoice";
-import { formatAmount } from "../utils/format";
+import { formatAmount } from "../../../utils/format";
+import type { LineItem } from "../../types";
 
 type Props = {
   lineItems: LineItem[];

diff --git a/packages/invoice/src/utils/format.tsx b/packages/invoice/src/utils/format.tsx
@@ -122,7 +122,10 @@ export function formatEditorToHtml(doc?: EditorDoc): JSX.Element | null {
       {doc.content.map((node, nodeIndex) => {
         if (node.type === "paragraph") {
           return (
-            <p key={`paragraph-${nodeIndex.toString()}`} className="mb-1">
+            <p
+              key={`paragraph-${nodeIndex.toString()}`}
+              className="mb-1 leading-relaxed"
+            >
               {node.content?.map((inlineContent, inlineIndex) => {
                 if (inlineContent.type === "text") {
                   let style = "text-xs";