IO-1262 Add SMS reminder to schedule.

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>
-              {(event.job && event.job.ownr_ph1) || ""}
-            </PhoneFormatter>
+            <ChatOpenButton
+              phone={event.job && event.job.ownr_ph1}
+              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={() => {
-            const Template = TemplateList("job").appointment_reminder;
-            GenerateDocument(
-              {
-                name: Template.key,
-                variables: { id: event.job.id },
-              },
-              { to: event.job && event.job.ownr_ea, subject: Template.subject },
-              "e",
-              event.job && event.job.id
-            );
-          }}
-          disabled={event.arrived}
+
+        <Dropdown
+          overlay={
+            <Menu>
+              <Menu.Item
+                onClick={() => {
+                  const Template = TemplateList("job").appointment_reminder;
+                  GenerateDocument(
+                    {
+                      name: Template.key,
+                      variables: { id: event.job.id },
+                    },
+                    {
+                      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>
+          <Button>{t("appointments.actions.sendreminder")}</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);