Gender versions of the letter

src/components/Email.js

@@ -13,6 +13,8 @@ import {
   FilledInput,
   FormHelperText,
   FormControl,
+  IconButton,
+  Typography,
 } from "@material-ui/core";
 
 import Alert from "@material-ui/lab/Alert";
@@ -21,7 +23,6 @@ import EmailAction from "@components/email/Action";
 import SkeletonListItem from "@components/layout/SkeletonListItem";
 import ProgressCounter from "@components/ProgressCounter";
 import Filter from "@components/filter/Filter";
-
 import useData from "@hooks/useData";
 import useToken, { extractTokens } from "@hooks/useToken";
 import { useIsMobile } from "@hooks/useDevice";
@@ -556,7 +557,6 @@ const EmailComponent = (props) => {
   };
   //    <TwitterText text={actionText} handleChange={handleChange} label="Your message to them"/>
   //
-
   const ExtraFields = (props) => {
     return (
       <>

src/components/field/Salutation.js

@@ -7,14 +7,17 @@ import CancelIcon from "@material-ui/icons/Cancel";
 const Salutation = (props) => {
   const { t } = useTranslation();
   const { setValue, watch } = props.form;
+  const [firstname, lastname] = watch(["firstname", "lastname"]);
+  console.log(firstname, lastname);
 
   let options = t("salutations", {
     returnObjects: true,
     defaultValues: [
-      { m: "Dear {{name}}" },
-      { f: "Dear {{name}}" },
+      { m: "Dear Mr. {{name}}" },
+      { f: "Dear Ms. {{name}}" },
       { other: "Dear {{name}}" },
     ],
+    name: firstname,
   });
   const sal = watch("salutation") || "";
   const [open, setOpen] = useState(false);

src/locales/en/common.json

@@ -178,8 +178,8 @@
   "required": "required",
   "required field": "required field",
   "salutations": {
-    "f": "Dear {{name}}",
-    "m": "Dear {{name}}",
+    "f": "Dear Mr. {{name}}",
+    "m": "Dear Ms. {{name}}",
     "other": "Dear {{name}}"
   },
   "select_all": "Select all",