Aligned text and fixed issues with formatting

Wholteza · Jun 27, 2023 · 09ed4d8 · 09ed4d8
1 parent 248a969
commit 09ed4d8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,10 @@ const getVatTotalForItems = (
     .filter((row) => row.vat === vatPercentage)
     .reduce(
       (aggregate, current) =>
-        aggregate + current.total * Number(`0.${vatPercentage}`),
+        aggregate +
+        current.pricePerPiece *
+          Number(`0.${vatPercentage.toString().padStart(2, "0")}`) *
+          current.amount,
       0
     );
 
@@ -126,12 +129,18 @@ const App = () => {
     const vat25 = getVatTotalForItems(receiptRows, 25);
     const vat12 = getVatTotalForItems(receiptRows, 12);
     const vat6 = getVatTotalForItems(receiptRows, 6);
-    const vat0 = getVatTotalForItems(receiptRows, 0);
+    const vat0 = receiptRows
+      .filter((row) => row.vatPercentage === 0)
+      .reduce(
+        (total, current) => total + current.amount * current.pricePerPiece,
+        0
+      );
     const totalBeforeVat = receiptRows.reduce(
       (total, current) => total + current.total,
       0
     );
     const totalVat = vat25 + vat12 + vat6;
+
     return {
       vat25,
       vat12,

diff --git a/src/translate.ts b/src/translate.ts
@@ -15,6 +15,12 @@ const dictionary: { [key: string]: { [key: string]: string } } = {
     number: "Nummer",
     paymentTerms: "Betalningsvilkor",
     date: "Datum",
+    amount: "Antal",
+    description: "Beskrivning",
+    pricePerPiece: "À-pris",
+    vatPercentage: "Moms %",
+    vat: "Moms (SEK)",
+    total: "Total (utan moms)",
   },
 };
 export default translate;
diff --git a/src/use-form.tsx b/src/use-form.tsx
@@ -61,7 +61,13 @@ const useForm = <T,>(key: string, initialState: T): [JSX.Element[], T] => {
   const handleOnChange = useCallback(
     (field: Field, event: React.ChangeEvent<HTMLInputElement>) => {
       const oldState = JSON.parse(JSON.stringify(formState));
-      mutatePropOnPath(oldState, field.propertyPath, event.target.value);
+      const value =
+        field.type === "date"
+          ? new Date(event.target.value)
+          : field.type === "number"
+          ? Number(event.target.value)
+          : event.target.value;
+      mutatePropOnPath(oldState, field.propertyPath, value);
       setFormState(oldState);
     },
     [formState, setFormState]

diff --git a/src/use-pdf.tsx b/src/use-pdf.tsx
@@ -68,6 +68,7 @@ type PdfText = {
   x: number;
   color?: "black" | "white";
   type?: "body" | "title" | "subtitle" | "footer";
+  align?: "left" | "right";
   options?: TextOptionsLight;
 };
 
@@ -185,7 +186,9 @@ const usePdf = () => {
               : lineHeightFactorToRestore
           );
 
-          doc.text(textRow.text, textRow.x, y);
+          doc.text(textRow.text, textRow.x, y, {
+            align: textRow.align ?? "left",
+          });
 
           doc.setTextColor(DefaultTextColor);
           doc.setFontSize(fontSizes.body);
@@ -323,9 +326,10 @@ const usePdf = () => {
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.vat25}`,
+          text: `${receiptTotalInformation.vat25} kr`,
           x: columns.total.left.right,
           type: "footer",
+          align: "right",
         },
       ]);
       writeOnNewLine([
@@ -335,9 +339,10 @@ const usePdf = () => {
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.vat12}`,
+          text: `${receiptTotalInformation.vat12} kr`,
           x: columns.total.left.right,
           type: "footer",
+          align: "right",
         },
       ]);
       writeOnNewLine([
@@ -347,19 +352,21 @@ const usePdf = () => {
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.vat6}`,
+          text: `${receiptTotalInformation.vat6} kr`,
           x: columns.total.left.right,
           type: "footer",
+          align: "right",
         },
         {
           text: "Belopp före moms",
           x: columns.total.right.left,
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.totalBeforeVat}`,
+          text: `${receiptTotalInformation.totalBeforeVat} kr`,
           x: columns.total.right.right,
           type: "footer",
+          align: "right",
         },
       ]);
       writeOnNewLine([
@@ -369,19 +376,21 @@ const usePdf = () => {
           type: "footer",
         },
         {
-          text: "",
+          text: `${receiptTotalInformation.vat0} kr`,
           x: columns.total.left.right,
           type: "footer",
+          align: "right",
         },
         {
           text: "Total moms",
           x: columns.total.right.left,
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.totalVat}`,
+          text: `${receiptTotalInformation.totalVat} kr`,
           x: columns.total.right.right,
           type: "footer",
+          align: "right",
         },
       ]);
 
@@ -394,9 +403,10 @@ const usePdf = () => {
           type: "footer",
         },
         {
-          text: `${receiptTotalInformation.total}`,
+          text: `${receiptTotalInformation.total} kr`,
           x: columns.total.right.right,
           type: "footer",
+          align: "right",
         },
       ]);