IO-1262 Add SMS reminder to schedule.

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -799,6 +799,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>reminder</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>scheduledfor</name>
                                         <definition_loaded>false</definition_loaded>
@@ -14305,6 +14326,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>sms</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <folder_node>
                                         <name>sub_status</name>
                                         <children>

client/src/components/job-at-change/schedule-event.component.jsx

@@ -1,26 +1,50 @@
-import { Button, Divider, Popover, Space } from "antd";
 import { AlertFilled } from "@ant-design/icons";
+import {
+  Button,
+  Divider,
+  Dropdown,
+  Menu,
+  notification,
+  Popover,
+  Space,
+} from "antd";
+import parsePhoneNumber from "libphonenumber-js";
+import moment from "moment";
+import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import {
+  openChatByPhone,
+  setMessage,
+} from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import PhoneFormatter from "../../utils/PhoneFormatter";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
-import queryString from "query-string";
 import ScheduleEventNote from "./schedule-event.note.component";
 
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "schedule" })),
+  openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
+  setMessage: (text) => dispatch(setMessage(text)),
 });
 
 export function ScheduleEventComponent({
+  bodyshop,
+  setMessage,
+  openChatByPhone,
   event,
   refetch,
   handleCancel,
@@ -77,9 +101,10 @@ export function ScheduleEventComponent({
             {(event.job && event.job.ownr_ea) || ""}
           </DataLabel>
           <DataLabel label={t("jobs.fields.ownr_ph1")}>
-            <PhoneFormatter>
+            <ChatOpenButton
-              {(event.job && event.job.ownr_ph1) || ""}
+              phone={event.job && event.job.ownr_ph1}
-            </PhoneFormatter>
+              jobid={event.job.id}
+            />
           </DataLabel>
           <DataLabel label={t("jobs.fields.alt_transport")}>
             {(event.job && event.job.alt_transport) || ""}
@@ -109,23 +134,62 @@ export function ScheduleEventComponent({
             {t("appointments.actions.preview")}
           </Button>
         ) : null}
-        <Button
+
-          onClick={() => {
+        <Dropdown
-            const Template = TemplateList("job").appointment_reminder;
+          overlay={
-            GenerateDocument(
+            <Menu>
-              {
+              <Menu.Item
-                name: Template.key,
+                onClick={() => {
-                variables: { id: event.job.id },
+                  const Template = TemplateList("job").appointment_reminder;
-              },
+                  GenerateDocument(
-              { to: event.job && event.job.ownr_ea, subject: Template.subject },
+                    {
-              "e",
+                      name: Template.key,
-              event.job && event.job.id
+                      variables: { id: event.job.id },
-            );
+                    },
-          }}
+                    {
-          disabled={event.arrived}
+                      to: event.job && event.job.ownr_ea,
+                      subject: Template.subject,
+                    },
+                    "e",
+                    event.job && event.job.id
+                  );
+                }}
+                disabled={event.arrived}
+              >
+                {t("general.labels.email")}
+              </Menu.Item>
+              <Menu.Item
+                onClick={() => {
+                  const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
+                  if (p && p.isValid()) {
+                    openChatByPhone({
+                      phone_num: p.formatInternational(),
+                      jobid: event.job.id,
+                    });
+                    setMessage(
+                      t("appointments.labels.reminder", {
+                        shopname: bodyshop.shopname,
+                        date: moment(event.start).format("MM/DD/YYYY"),
+                        time: moment(event.start).format("HH:MM a"),
+                      })
+                    );
+                    setVisible(false);
+                  } else {
+                    notification["error"]({
+                      message: t("messaging.error.invalidphone"),
+                    });
+                  }
+                }}
+                disabled={event.arrived || !bodyshop.messagingservicesid}
+              >
+                {t("general.labels.sms")}
+              </Menu.Item>
+            </Menu>
+          }
         >
-          {t("appointments.actions.sendreminder")}
+          <Button>{t("appointments.actions.sendreminder")}</Button>
-        </Button>
+        </Dropdown>
+
         <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
           {t("appointments.actions.cancel")}
         </Button>
@@ -206,4 +270,7 @@ export function ScheduleEventComponent({
     </Popover>
   );
 }
-export default connect(null, mapDispatchToProps)(ScheduleEventComponent);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleEventComponent);

client/src/translations/en_us/common.json

@@ -53,6 +53,7 @@
 				"nocompletingjobs": "No jobs scheduled for completion.",
 				"nodateselected": "No date has been selected.",
 				"priorappointments": "Previous Appointments",
+				"reminder": "This is {{shopname}} reminding you about an appointment on {{date}} at {{time}}. Please let us know if you are not able to make the appointment. We look forward to seeing you soon. ",
 				"scheduledfor": "Scheduled appointment for: ",
 				"smartscheduling": "Smart Scheduling",
 				"suggesteddates": "Suggested Dates"
@@ -897,6 +898,7 @@
 				"sendagain": "Send Again",
 				"sendby": "Send By",
 				"signin": "Sign In",
+				"sms": "SMS",
 				"sub_status": {
 					"expired": "The subscription for this shop has expired.  Please contact technical support to reactivate the subscription. "
 				},

client/src/translations/es/common.json

@@ -53,6 +53,7 @@
 				"nocompletingjobs": "",
 				"nodateselected": "No se ha seleccionado ninguna fecha.",
 				"priorappointments": "Nombramientos previos",
+				"reminder": "",
 				"scheduledfor": "Cita programada para:",
 				"smartscheduling": "",
 				"suggesteddates": ""
@@ -897,6 +898,7 @@
 				"sendagain": "",
 				"sendby": "",
 				"signin": "",
+				"sms": "",
 				"sub_status": {
 					"expired": ""
 				},

client/src/translations/fr/common.json

@@ -53,6 +53,7 @@
 				"nocompletingjobs": "",
 				"nodateselected": "Aucune date n'a été sélectionnée.",
 				"priorappointments": "Rendez-vous précédents",
+				"reminder": "",
 				"scheduledfor": "Rendez-vous prévu pour:",
 				"smartscheduling": "",
 				"suggesteddates": ""
@@ -897,6 +898,7 @@
 				"sendagain": "",
 				"sendby": "",
 				"signin": "",
+				"sms": "",
 				"sub_status": {
 					"expired": ""
 				},