From f1575473fd04bcae0e149abe81853766fb7d6b42 Mon Sep 17 00:00:00 2001
From: Emilia Repo <emiliarepo@icloud.com>
Date: Thu, 31 Oct 2024 16:58:52 +0200
Subject: [PATCH] feat: add total price to invoice generator (#548)

* add total price to invoice generator

* pass props directly & fix extra render

* update color to gray
---
 .../components/invoice-generator/index.tsx    | 81 +++++++++----------
 apps/web/src/locales/en.ts                    |  1 +
 apps/web/src/locales/fi.ts                    |  1 +
 3 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/apps/web/src/components/invoice-generator/index.tsx b/apps/web/src/components/invoice-generator/index.tsx
index 3e64e43..3b52b5b 100644
--- a/apps/web/src/components/invoice-generator/index.tsx
+++ b/apps/web/src/components/invoice-generator/index.tsx
@@ -33,42 +33,20 @@ function InputLabel({ name, htmlId }: { name: string; htmlId: string }) {
 }
 
 function InputRow({
-  placeholder,
-  label,
   id,
-  name,
-  autoComplete,
   type,
-  defaultValue,
-  multiple,
-  required,
-  step,
-  min,
-  onBeforeInput: onInput,
   unit,
-  maxLength,
+  label,
+  name,
+  ...restProps
 }: GenericFieldProps) {
   const htmlId = id ?? `inputfield.${name}`;
-
   return (
     <div>
       <InputLabel name={label} htmlId={htmlId} />
       <span className="flex">
-        <Input
-          id={htmlId}
-          name={name}
-          type={type ?? "text"}
-          placeholder={placeholder}
-          autoComplete={autoComplete}
-          defaultValue={defaultValue}
-          required={required}
-          multiple={multiple}
-          step={step}
-          min={min}
-          onBeforeInput={onInput}
-          maxLength={maxLength}
-        />
-        {unit ? <span className="ml-2 translate-y-1">{unit}</span> : null}
+        <Input id={htmlId} type={type ?? "text"} {...restProps} />
+        {unit ? <span className="ml-1 translate-y-1">{unit}</span> : null}
       </span>
     </div>
   );
@@ -239,6 +217,10 @@ function InvoiceItem({
 }) {
   const t = useScopedI18n("invoicegenerator");
 
+  const [quantity, setQuantity] = useState(0);
+  const [unitPrice, setUnitPrice] = useState(0);
+  const totalPrice = quantity * unitPrice;
+
   return (
     <fieldset>
       <ErrorMessageBlock
@@ -254,7 +236,7 @@ function InvoiceItem({
         />
       </ErrorMessageBlock>
       <fieldset className="flex">
-        <span className="mr-0.5 grow">
+        <span className="mr-1 grow">
           <ErrorMessageBlock
             elementName={`rows[${index.toString()}].quantity`}
             formState={state}
@@ -264,11 +246,12 @@ function InvoiceItem({
               name="rows.quantity"
               id={`rows[${index.toString()}].quantity`}
               type="number"
+              onInput={(e) => setQuantity(Number(e.currentTarget.value))}
               required
             />
           </ErrorMessageBlock>
         </span>
-        <span className="ml-0.5 grow">
+        <span className="ml-1 grow">
           <ErrorMessageBlock
             elementName={`rows[${index.toString()}].unit`}
             formState={state}
@@ -284,23 +267,37 @@ function InvoiceItem({
           </ErrorMessageBlock>
         </span>
       </fieldset>
-      <ErrorMessageBlock
-        elementName={`rows[${index.toString()}].unit_price`}
-        formState={state}
-      >
-        <span>
+      <fieldset className="flex">
+        <span className="mr-1 grow">
+          <ErrorMessageBlock
+            elementName={`rows[${index.toString()}].unit_price`}
+            formState={state}
+          >
+            <InputRow
+              label={t("Unit price")}
+              type="number"
+              name="rows.unit_price"
+              id={`rows[${index.toString()}].unit_price`}
+              onInput={(e) => setUnitPrice(Number(e.currentTarget.value))}
+              required
+              step={0.01}
+              min={0}
+              unit="€"
+            />
+          </ErrorMessageBlock>
+        </span>
+        <span className="ml-1 grow">
           <InputRow
-            label={t("Unit price")}
-            type="number"
-            name="rows.unit_price"
-            id={`rows[${index.toString()}].unit_price`}
-            required
-            step={0.01}
-            min={0}
+            label={t("Total price")}
+            type="text"
+            name="rows.total_price"
+            value={totalPrice.toFixed(2)}
+            id={`rows[${index.toString()}].total_price`}
             unit="€"
+            disabled={true}
           />
         </span>
-      </ErrorMessageBlock>
+      </fieldset>
     </fieldset>
   );
 }
diff --git a/apps/web/src/locales/en.ts b/apps/web/src/locales/en.ts
index a1b08a6..0b0ee87 100644
--- a/apps/web/src/locales/en.ts
+++ b/apps/web/src/locales/en.ts
@@ -56,6 +56,7 @@ const en = {
   "invoicegenerator.Quantity": "Quantity",
   "invoicegenerator.Unit": "Unit",
   "invoicegenerator.Unit price": "Unit price",
+  "invoicegenerator.Total price": "Total price",
   "invoicegenerator.Attachment": "Attachment",
   "invoicegenerator.Attachments": "Attachments",
   "invoicegenerator.Items": "Items",
diff --git a/apps/web/src/locales/fi.ts b/apps/web/src/locales/fi.ts
index d5cb7ab..e73f49c 100644
--- a/apps/web/src/locales/fi.ts
+++ b/apps/web/src/locales/fi.ts
@@ -56,6 +56,7 @@ const fi = {
   "invoicegenerator.Quantity": "Määrä",
   "invoicegenerator.Unit": "Yksikkö",
   "invoicegenerator.Unit price": "Yksikköhinta",
+  "invoicegenerator.Total price": "Yhteensä",
   "invoicegenerator.Attachment": "Liite",
   "invoicegenerator.Attachments": "Liitteet",
   "invoicegenerator.Items": "Erittely",