PVRT Handling IO-736

client/src/components/ca-bc-pvrt-calculator/ca-bc-pvrt-calculator.component.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import { Button, Form, InputNumber, Popover } from "antd";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { useTranslation } from "react-i18next";
+import { CalculatorFilled } from "@ant-design/icons";
+export default function CABCpvrtCalculator({ disabled, form }) {
+  const [visibility, setVisibility] = useState(false);
+
+  const { t } = useTranslation();
+
+  const handleFinish = async (values) => {
+    logImEXEvent("job_ca_bc_pvrt_calculate");
+    form.setFieldsValue({ ca_bc_pvrt: (values.rate * values.days).toFixed(2) });
+    setVisibility(false);
+  };
+
+  const popContent = (
+    <div>
+      <Form onFinish={handleFinish} initialValues={{ rate: 1.5 }}>
+        <Form.Item name="rate" label={t("jobs.labels.ca_bc_pvrt.rate")}>
+          <InputNumber precision={2} min={0} />
+        </Form.Item>
+        <Form.Item name="days" label={t("jobs.labels.ca_bc_pvrt.days")}>
+          <InputNumber precision={0} min={0} />
+        </Form.Item>
+        <Button type="primary" htmlType="submit">
+          {t("general.actions.calculate")}
+        </Button>
+        <Button onClick={() => setVisibility(false)}>Close</Button>
+      </Form>
+    </div>
+  );
+
+  return (
+    <Popover
+      destroyTooltipOnHide
+      content={popContent}
+      visible={visibility}
+      disabled={disabled}
+    >
+      <Button disabled={disabled} onClick={() => setVisibility(true)}>
+        <CalculatorFilled />
+      </Button>
+    </Popover>
+  );
+}