Update time ticket areas added to use translations

components/Selects/select-cost-center.jsx

@@ -10,12 +10,6 @@ import { QUERY_EMPLOYEE_BY_ID } from "../../graphql/employees.queries";
 import { useEffect } from "react";
 import { t } from "i18next";
 
-const data = [
-  { label: "Item 1", value: "1" },
-  { label: "Item 2", value: "3" },
-  { label: "Item 3", value: "3" },
-];
-
 const mapStateToProps = createStructuredSelector({
     bodyshop: selectBodyshop
     // timeTicketJobId: selectCurrentTimeTicketJobId,
@@ -62,8 +56,8 @@ export function CostCenterSelect(props) {
         maxHeight={300}
         labelField="label"
         valueField="value"
-        placeholder={!isFocus ? "Select Cost Center" : "..."}
+        placeholder={!isFocus ? t("selectcostcenter.labels.placeholder") : t("selectcostcenter.labels.selectedplaceholder")}
-        searchPlaceholder="Search..."
+        searchPlaceholder={t("selectcostcenter.labels.searchplaceholder")}
         onFocus={() => setIsFocus(true)}
         onBlur={() => setIsFocus(false)}
         data={costCenters}

components/Selects/select-job-id.jsx

@@ -96,7 +96,7 @@ export function JobIdSearchSelect(
   useEffect(() => {
     // console.log("useEfectDependentOn: [theOptions]");
     var count = Object.keys(theOptions).length;
-    console.log("useEfectDependentOn: [theOptions] count:", count);
+    // console.log("useEfectDependentOn: [theOptions] count:", count);
     let selectDataArray = [];
     for (let i = 0; i < count; i++) {
       selectDataArray.push({
@@ -131,8 +131,8 @@ export function JobIdSearchSelect(
         maxHeight={300}
         labelField="label"
         valueField="value"
-        placeholder={!isFocus ? "RO #" : "..."}
+        placeholder={!isFocus ? t("selectjobid.labels.placeholder") : t("selectjobid.labels.selectedplaceholder")}
-        searchPlaceholder="Search..."
+        searchPlaceholder={t("selectjobid.labels.searchplaceholder")}
         onFocus={() => setIsFocus(true)}
         onBlur={() => setIsFocus(false)}
         data={selectorData}

components/screen-main/screen-main.component.jsx

@@ -186,7 +186,7 @@ const TimeTicketBrowserStackNavigator = connect(
           <TimeTicketBrowserStack.Screen
             name="TimeTicketClockOff"
             options={() => ({
-              title: "Clock Off",
+              title: i18n.t("timeticketclockoff.titles.clockoff"),
             })}
             component={ScreenTimeTicketClockoffComponent}
           />
@@ -217,7 +217,6 @@ const BottomTabsNavigator = () => (
         } else if (route.name === "MediaBrowserTab") {
           iconName = "ios-camera";
         } else if (route.name === "TimeTicketBrowserTab") {
-          //ADDED JF check for route.name for TimeTicketBrowserTab. Also icon ios-stopwatch-outline
           iconName = "ios-stopwatch-outline";
         } else {
           //iconName = "customerservice";

components/screen-time-ticket-browser/screen-time-ticket-browser.component.jsx

@@ -25,6 +25,7 @@ import { QUERY_ACTIVE_TIME_TICKETS } from "../../graphql/timetickets.queries";
 import EmployeeClockedInList from "../time-ticket-lists/employee-clockedin-list.component";
 import { logImEXEvent } from "../../firebase/firebase.analytics";
 import StyleRepeater from "../style-repeater/style-repeater";
+import { useTranslation } from "react-i18next";
 // import  SignOutButton  from "../Buttons/employee-sign-out-button.component";
 // import  AddTimeTicketButton  from "../Buttons/create-time-ticket-button.component";
 
@@ -55,6 +56,7 @@ export function ScreenTimeTicketBrowser({
   currentSelectedTimeTicketJobId,
   currentEmployeeFullName,
 }) {
+  const { t } = useTranslation();
   const [currentSCC, setCurrentSCC] = useState(null);
   const [currentSJobId, setCurrentSJobId] = useState(null);
   const [loading, setLoading] = useState(false);
@@ -65,7 +67,7 @@ export function ScreenTimeTicketBrowser({
   });
 
   const handleFinish = async (values) => {
-    console.log("handleFinish called in ScreenTimeTicketBrowser");
+    // console.log("handleFinish called in ScreenTimeTicketBrowser");
     setLoading(true);
     setError(null);
 
@@ -77,7 +79,7 @@ export function ScreenTimeTicketBrowser({
     } else {
       // console.log("missing values!");
       setLoading(false);
-      setError({ message: "Please make sure all fields have a value." });
+      setError({ message: t("timeticketbrowser.errors.missingvalues") });
       return;
     }
 
@@ -137,7 +139,7 @@ export function ScreenTimeTicketBrowser({
     >
       <StyleRepeater childStyle={{ margin: 4 }}>
         <Card>
-          <Card.Title title={"Logged in Employee"} 
+          <Card.Title title={t("timeticketbrowser.labels.loggedinemployee")} 
           // right={(props) => <SignOutButton />} 
           />
           <Card.Content>
@@ -147,7 +149,7 @@ export function ScreenTimeTicketBrowser({
           </Card.Content>
         </Card>
         <Card>
-          <Card.Title title={"Clock Into Job"} 
+          <Card.Title title={t("timeticketbrowser.labels.clockintojob")} 
       //     right={(props) => 
       //     <View style={{ flexDirection:"row" }} ><AddTimeTicketButton /> 
       //     <Button mode="outlined"
@@ -175,7 +177,7 @@ export function ScreenTimeTicketBrowser({
             <ErrorDisplay errorMessage={error.message} />
           ) : null}
           <Button mode="outlined" loading={loading} onPress={handleFinish}>
-            <Text>Clock In</Text>
+            <Text>{t("timeticketbrowser.actions.clockin")}</Text>
           </Button>
           </Card.Content>
         </Card>

components/time-ticket-items/clockedin-list-item.component.jsx

@@ -36,16 +36,16 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
       />
       <Card.Content>
         <Text>
-          Vehicle :
+        {t("clockedinlistitem.labels.vehicle")}
           {`${ticket.job.v_model_yr || ""} ${ticket.job.v_make_desc || ""} ${
             ticket.job.v_model_desc || ""
           }`}
         </Text>
         <Text>
-          Clocked In : <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+        {t("clockedinlistitem.labels.clockedin")}<DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
         </Text>
         <Text>
-          Cost Center :{" "}
+        {t("clockedinlistitem.labels.costcenter")}
           {ticket.cost_center === "timetickets.labels.shift"
             ? t(ticket.cost_center)
             : ticket.cost_center}
@@ -53,7 +53,7 @@ export function ClockedinListItem({ setTmTicketJobIdRedux, ticket }) {
       </Card.Content>
       <Card.Actions>
         <Button mode="outlined" onPress={makeNavToTimeTicketClockOff} >
-          Clock Out
+          {t("clockedinlistitem.actions.clockout")}
         </Button>
       </Card.Actions>
     </Card>

components/time-ticket-lists/employee-clockedin-list.component.jsx

@@ -42,7 +42,7 @@ export function EmployeeClockedInList({ currentEmployee, isRefresh }) {
     if(isRefresh){
       refetch();
     }
-    console.log("useEffect: ", isRefresh);
+    // console.log("useEffect: ", isRefresh);
     // setRefreshKey(isRefresh);
     
 }, [isRefresh]);
@@ -62,19 +62,16 @@ export function EmployeeClockedInList({ currentEmployee, isRefresh }) {
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
   const onRefresh = async () => {
-    console.info("EmployeeClockedInList, onRefresh.");
+    // console.info("EmployeeClockedInList, onRefresh.");
     return refetch();
   };
 
-
-
-
   return (
     <View style={{ flex: 1, flexGrow: 1 }}>
       {jobData ? (
         <View style={{ flex: 1 }}>
           <Text style={{ paddingLeft: 12, paddingTop: 14 }}>
-            You are already clocked in to the following job(s):
+          {t("employeeclockedinlist.labels.alreadyclockedon")}
           </Text>
           <FlatList
             data={jobData?.timetickets}

components/time-ticket/screen-time-ticket-clockoff.component.jsx

@@ -62,17 +62,16 @@ export function TimeTicketClockOff({
       !!currentSCC?.value
     ) {
       if (isNaN(values.actualhours)|isNaN(values.productivehours)) {
-        console.log("actual hours is NAN!");
+        // console.log("actual hours is NAN!");
         setLoading(false);
-        setError({ message: "Please make sure all fields have valid values." });
+        setError({ message: t("timeticketclockoff.errors.nan") });
-      return;
+        return;
-      
       }
       setError(null);
-      console.log("all have values:");
+      // console.log("all have values:");
     } else {
-      console.log("missing values!");
+      // console.log("missing values!");
-      setError({ message: "Please make sure all fields have a value." });
+      setError({ message: t("timeticketclockoff.errors.missingvalues")  });
       return;
     }
     const tempcallobj = {
@@ -119,9 +118,9 @@ export function TimeTicketClockOff({
     setLoading(false);
     if (!!result.errors) {
       // console.log("updateTimeticket, result.error :", result.errors);
-      setError(SON.stringify(result.errors));
+      setError(JSON.stringify(result.errors));
     } else {
-      console.log("updateTimeticket, result. :", result.data);
+      // console.log("updateTimeticket, result :", result.data);
       navigation.goBack();
     }
     //if (completedCallback) completedCallback();
@@ -146,7 +145,7 @@ export function TimeTicketClockOff({
                 onChangeText={handleChange("actualhours")}
                 onBlur={handleBlur("actualhours")}
                 value={values.actualhours}
-                label={"Actual Hours"}
+                label={t("timeticketclockoff.labels.actualhoursplaceholder")}
                 keyboardType="numeric"
               />
               <TextInput
@@ -155,7 +154,7 @@ export function TimeTicketClockOff({
                 onChangeText={handleChange("productivehours")}
                 onBlur={handleBlur("productivehours")}
                 value={values.productivehours}
-                label={"Productive Hours"}
+                label={t("timeticketclockoff.labels.productivehoursplaceholder")}
                 keyboardType="numeric"
               />
               <CostCenterSelect
@@ -167,9 +166,9 @@ export function TimeTicketClockOff({
               <Button
                 style={localStyles.input}
                 onPress={handleSubmit}
-                title="Submit"
+                title={t("timeticketclockoff.actions.clockoff")}
               >
-                <Text style={{ fontSize: 12 }}>Clock Off</Text>
+                <Text style={{ fontSize: 12 }}>{t("timeticketclockoff.actions.clockoff")}</Text>
               </Button>
             </View>
           )}

components/time-ticket/screen-time-ticket-create.component.jsx

@@ -52,13 +52,6 @@ export function TimeTicketCreate({
   // const [currentSJob, setCurrentSJob] = useState(null);
   const [currentSJobId, setCurrentSJobId] = useState(null);
 
-  // const wrapperSetCurrentSJobState = useCallback(
-  //   (val) => {
-  //     setCurrentSJob(val);
-  //   },
-  //   [setCurrentSJob]
-  // );
-
   const showDatePicker = () => {
     setDatePickerVisibility(true);
   };
@@ -67,7 +60,6 @@ export function TimeTicketCreate({
   };
   const handleConfirm = (date) => {
     setDate2(date);
-    //console.war1n("A date has been picked: ", date);
     hideDatePicker();
   };
 
@@ -75,7 +67,7 @@ export function TimeTicketCreate({
 
   const handleFinish = async (values) => {
     logImEXEvent("handleFinish_called_in_TimeTicketCreate");
-    console.log("handleFinish called in TimeTicketCreate");
+    // console.log("handleFinish called in TimeTicketCreate");
     setError(null);
     setLoading(true);
 
@@ -93,17 +85,17 @@ export function TimeTicketCreate({
       !!values.actualhours
     ) {
       if (isNaN(values.actualhours) | isNaN(values.productivehours)) {
-        console.log("actual hours is NAN!");
+        // console.log("actual hours is NAN!");
         setLoading(false);
-        setError({ message: "Please make sure all fields have valid values." });
+        setError({ message: t("createtimeticket.errors.nan") });
         return;
       }
       setError(null);
-      console.log("have all values");
+      // console.log("have all values");
     } else {
-      console.log("missing values!");
+      // console.log("missing values!");
       setLoading(false);
-      setError({ message: "Please make sure all fields have a value." });
+      setError({ message: t("createtimeticket.errors.missingvalues")});
       return;
     }
 
@@ -211,7 +203,7 @@ export function TimeTicketCreate({
                 style={localStyles.dateButton}
               >
                 <Text style={localStyles.textForButton}>
-                  Ticket Date: {date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit',  year: 'numeric' })}
+                {t("createtimeticket.actions.ticketdate")}{date2.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit',  year: 'numeric' })}
                 </Text>
               </Button>
               <DateTimePickerModal
@@ -221,28 +213,25 @@ export function TimeTicketCreate({
                 onConfirm={handleConfirm}
                 onCancel={hideDatePicker}
               />
-              {/* Below will set to auto fill with current employee */}
               <TextInput
                 style={localStyles.inputStyle}
                 mode="outlined"
                 disabled={true}
                 value={currentEmployeeFullName}
-                label={"Employee"}
+                label={t("createtimeticket.labels.employeeplaceholder")}
               />
-
               <CostCenterSelect
                 currentRatesNCostCenters={currentRatesNCostCenters}
                 currentValue={currentSCC}
                 onValueSelected={setCurrentSCC}
               />
-
               <TextInput
                 style={localStyles.inputStyle}
                 mode="outlined"
                 onChangeText={handleChange("productivehours")}
                 onBlur={handleBlur("productivehours")}
                 value={values.productivehours}
-                label={"Productive Hours"}
+                label={t("createtimeticket.labels.productivehoursplaceholder")}
                 keyboardType="numeric"
               />
               <TextInput
@@ -251,7 +240,7 @@ export function TimeTicketCreate({
                 onChangeText={handleChange("actualhours")}
                 onBlur={handleBlur("actualhours")}
                 value={values.actualhours}
-                label={"Actual Hours"}
+                label={t("createtimeticket.labels.actualhoursplaceholder")}
                 keyboardType="numeric"
               />
               {error ? <ErrorDisplay errorMessage={error.message} /> : null}
@@ -261,7 +250,7 @@ export function TimeTicketCreate({
                 loading={loading}
                 title="Submit"
               >
-                <Text style={{ fontSize: 12 }}>Create Ticket</Text>
+                <Text style={{ fontSize: 12 }}>{t("createtimeticket.actions.createticket")}</Text>
               </Button>
             </View>
           )}

translations/en-US/common.json

@@ -330,13 +330,15 @@
 				"ticket":"Ticket",
 				"timetickets": "Time Tickets",
 				"detail": "Time Ticket Details",
-				"notickets": "There are no active tickets."
+				"notickets": "There are no active tickets.",
+				"clockin": "Clock In"
 			},
 			"labels": {
-				"converting": "Converting",
+				"loggedinemployee": "Logged in Employee",
-				"selectjob": "--- Select a ticket ---",
+				"clockintojob": "Clock Into Job"
-				"selectticketassetselector": "Please select a ticket to update. ",
+			},
-				"uploading": "Uploading"
+			"errors": {
+				"missingvalues": "Please make sure all fields have a value."
 			},
 			"titles": {
 				"timeticketbrowsertab": "Time Tickets"
@@ -349,13 +351,22 @@
 				"ticket":"Ticket",
 				"timetickets": "Time Tickets",
 				"detail": "Time Ticket Details",
-				"notickets": "There are no active tickets."
+				"notickets": "There are no active tickets.",
+				"ticketdate": "Ticket Date: ",
+				"createticket": "Create Ticket"
 			},
 			"labels": {
 				"converting": "Converting",
 				"selectjob": "--- Select a ticket ---",
 				"selectticketassetselector": "Please select a ticket to update. ",
-				"uploading": "Uploading"
+				"uploading": "Uploading",
+				"employeeplaceholder": "Employee",
+				"actualhoursplaceholder": "Actual Hours",
+				"productivehoursplaceholder": "Productive Hours"
+			},
+			"errors": {
+				"nan": "Please make sure all fields have valid values.",
+				"missingvalues": "Please make sure all fields have a value."
 			},
 			"titles": {
 				"createtimeticket": "Create a Time Ticket"
@@ -450,6 +461,52 @@
 				"requiredifparttype": "Required if a part type has been specified.",
 				"zeropriceexistingpart": "This line cannot have any price since it uses an existing part."
 			}
+		},
+		"timeticketclockoff":{
+			"actions": {
+				"clockoff": "Clock Off",				
+				"noinfo": "There is no info to display."
+			},
+			"labels": {
+				"actualhoursplaceholder": "Actual Hours",
+				"productivehoursplaceholder": "Productive Hours"
+			},
+			"errors": {
+				"nan": "Please make sure all fields have valid values.",
+				"missingvalues": "Please make sure all fields have a value."
+			},
+			"titles": {
+				"clockoff": "Clock Off"
+			}
+		},
+		"selectjobid":{
+			"labels": {
+				"placeholder": "RO #",
+				"selectedplaceholder": "...",
+				"searchplaceholder": "Search..."
+			}
+		},
+		"selectcostcenter":{
+			"labels": {
+				"placeholder": "Select Cost Center",
+				"selectedplaceholder": "...",
+				"searchplaceholder": "Search..."
+			}
+		},
+		"employeeclockedinlist": {
+			"labels": {
+				"alreadyclockedon": "You are already clocked in to the following job(s):"
+			}
+		},
+		"clockedinlistitem": {
+			"labels": {
+				"vehicle": "Vehicle : ",
+				"clockedin": "Clocked In : ",
+				"costcenter": "Cost Center : "
+			},
+			"actions": {
+				"clockout": "Clock Out"
+			}
 		}
 	}
 }

translations/es-MX/common.json

@@ -330,13 +330,15 @@
 				"ticket": "",
 				"timetickets": "",
 				"detail": "",
-				"notickets": ""
+				"notickets": "",
+				"clockin": ""
 			},
 			"labels": {
-				"converting": "",
+				"loggedinemployee": "",
-				"selectjob": "",
+				"clockintojob": ""
-				"selectticketassetselector": "",
+			},
-				"uploading": ""
+			"errors": {
+				"missingvalues": ""
 			},
 			"titles": {
 				"timeticketbrowsertab": ""
@@ -349,13 +351,22 @@
 				"ticket":" ",
 				"timetickets": "",
 				"detail": "",
-				"notickets": ""
+				"notickets": "",
+				"ticketdate": "",
+				"createticket": ""
 			},
 			"labels": {
 				"converting": "",
 				"selectjob": "",
 				"selectticketassetselector": "",
-				"uploading": ""
+				"uploading": "",
+				"employeeplaceholder": "",
+				"actualhoursplaceholder": "",
+				"productivehoursplaceholder": ""
+			},
+			"errors": {
+				"nan": "",
+				"missingvalues": ""
 			},
 			"titles": {
 				"createtimeticket": ""
@@ -450,6 +461,52 @@
 				"requiredifparttype": "",
 				"zeropriceexistingpart": ""
 			}
+		},
+		"timeticketclockoff":{
+			"actions": {
+				"clockoff": "",				
+				"noinfo": ""
+			},
+			"labels": {
+				"actualhoursplaceholder": "",
+				"productivehoursplaceholder": ""
+			},
+			"errors": {
+				"nan": "",
+				"missingvalues": ""
+			},
+			"titles": {
+				"clockoff": ""
+			}
+		},
+		"selectjobid":{
+			"labels": {
+				"placeholder": "",
+				"selectedplaceholder": "...",
+				"searchplaceholder": ""
+			}
+		},
+		"selectcostcenter":{
+			"labels": {
+				"placeholder": "",
+				"selectedplaceholder": "...",
+				"searchplaceholder": ""
+			}
+		},
+		"employeeclockedinlist": {
+			"labels": {
+				"alreadyclockedon": ""
+			}
+		},
+		"clockedinlistitem": {
+			"labels": {
+				"vehicle": "",
+				"clockedin": "",
+				"costcenter": ""
+			},
+			"actions": {
+				"clockout": ""
+			}
 		}
 	}
 }

translations/fr-CA/common.json

@@ -330,13 +330,15 @@
 				"ticket": "",
 				"timetickets": "",
 				"detail": "",
-				"notickets": ""
+				"notickets": "",
+				"clockin": ""
 			},
 			"labels": {
-				"converting": "",
+				"loggedinemployee": "",
-				"selectjob": "",
+				"clockintojob": ""
-				"selectticketassetselector": "",
+			},
-				"uploading": ""
+			"errors": {
+				"missingvalues": ""
 			},
 			"titles": {
 				"timeticketbrowsertab": ""
@@ -349,13 +351,22 @@
 				"ticket":" ",
 				"timetickets": "",
 				"detail": "",
-				"notickets": ""
+				"notickets": "",
+				"ticketdate": "",
+				"createticket": ""
 			},
 			"labels": {
 				"converting": "",
 				"selectjob": "",
 				"selectticketassetselector": "",
-				"uploading": ""
+				"uploading": "",
+				"employeeplaceholder": "",
+				"actualhoursplaceholder": "",
+				"productivehoursplaceholder": ""
+			},
+			"errors": {
+				"nan": "",
+				"missingvalues": ""
 			},
 			"titles": {
 				"createtimeticket": ""
@@ -450,6 +461,52 @@
 				"requiredifparttype": "",
 				"zeropriceexistingpart": ""
 			}
+		},
+		"timeticketclockoff":{
+			"actions": {
+				"clockoff": "",				
+				"noinfo": ""
+			},
+			"labels": {
+				"actualhoursplaceholder": "",
+				"productivehoursplaceholder": ""
+			},
+			"errors": {
+				"nan": "",
+				"missingvalues": ""
+			},
+			"titles": {
+				"clockoff": ""
+			}
+		},
+		"selectjobid":{
+			"labels": {
+				"placeholder": "",
+				"selectedplaceholder": "...",
+				"searchplaceholder": ""
+			}
+		},
+		"selectcostcenter":{
+			"labels": {
+				"placeholder": "",
+				"selectedplaceholder": "...",
+				"searchplaceholder": ""
+			}
+		},
+		"employeeclockedinlist": {
+			"labels": {
+				"alreadyclockedon": ""
+			}
+		},
+		"clockedinlistitem": {
+			"labels": {
+				"vehicle": "",
+				"clockedin": "",
+				"costcenter": ""
+			},
+			"actions": {
+				"clockout": ""
+			}
 		}
 	}
 }