Replaced appropriate number fields with calculator field. BOD-398

client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx

@@ -1,23 +1,16 @@
 import { useMutation } from "@apollo/react-hooks";
-import {
-  Button,
-  Card,
-  Form,
-  InputNumber,
-  notification,
-  Popover,
-  Select,
-} from "antd";
+import { Button, Card, Form, notification, Popover, Select } from "antd";
+import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
-import axios from "axios";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectTechnician } from "../../redux/tech/tech.selectors";
-import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { UPDATE_TIME_TICKET } from "../../graphql/timetickets.queries";
+import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
+import TechJobClockoutDelete from "../tech-job-clock-out-delete/tech-job-clock-out-delete.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -72,7 +65,7 @@ export function TechClockOffButton({
       <div>
         <Form
           form={form}
-          layout='vertical'
+          layout="vertical"
           onFinish={handleFinish}
           initialValues={{
             cost_center: isShiftTicket
@@ -80,46 +73,50 @@ export function TechClockOffButton({
               : technician
               ? technician.cost_center
               : null,
-          }}>
+          }}
+        >
           {!isShiftTicket ? (
             <div>
               <Form.Item
                 label={t("timetickets.fields.actualhrs")}
-                name='actualhrs'
+                name="actualhrs"
                 rules={[
                   {
                     required: true,
                     message: t("general.validation.required"),
                   },
-                ]}>
-                <InputNumber precision={1} />
+                ]}
+              >
+                <InputNumberCalculator precision={1} />
               </Form.Item>
               <Form.Item
                 label={t("timetickets.fields.productivehrs")}
-                name='productivehrs'
+                name="productivehrs"
                 rules={[
                   {
                     required: true,
                     message: t("general.validation.required"),
                   },
-                ]}>
-                <InputNumber precision={1} />
+                ]}
+              >
+                <InputNumberCalculator precision={1} />
               </Form.Item>
             </div>
           ) : null}
 
           <Form.Item
-            name='cost_center'
+            name="cost_center"
             label={t("timetickets.fields.cost_center")}
             rules={[
               {
                 required: true,
                 message: t("general.validation.required"),
               },
-            ]}>
+            ]}
+          >
             <Select disabled={isShiftTicket}>
               {isShiftTicket ? (
-                <Select.Option value='timetickets.labels.shift'>
+                <Select.Option value="timetickets.labels.shift">
                   {t("timetickets.labels.shift")}
                 </Select.Option>
               ) : (
@@ -131,17 +128,20 @@ export function TechClockOffButton({
               )}
             </Select>
           </Form.Item>
-          <Button type='primary' htmlType='submit' loading={loading}>
+          <Button type="primary" htmlType="submit" loading={loading}>
             {t("general.actions.save")}
           </Button>
-          <TechJobClockoutDelete completedCallback={completedCallback} timeTicketId={timeTicketId} />
+          <TechJobClockoutDelete
+            completedCallback={completedCallback}
+            timeTicketId={timeTicketId}
+          />
         </Form>
       </div>
     </Card>
   );
 
   return (
-    <Popover content={overlay} trigger='click'>
+    <Popover content={overlay} trigger="click">
       <Button loading={loading} {...otherBtnProps}>
         {t("timetickets.actions.clockout")}
       </Button>