tweak: End of Service link functionality (#574)

* Increment day if after 3am when clicked.

* Added InfoPopover icon.

* Move string into const.

* Only increment when value is valid.

assets/css/info-popover.module.scss

@@ -0,0 +1,8 @@
+@import "./variables.scss";
+
+.popover {
+  --bs-popover-bg: #{$dark-bg};
+  --bs-popover-body-color: #{$text-primary};
+  --bs-popover-border-color: #{$border-primary};
+  margin-bottom: 13px;
+}

assets/css/pa-messages.module.scss

@@ -130,6 +130,7 @@
   @include flat-button;
   --bs-btn-color: #{$text-link-primary};
   padding-left: 0;
+  padding-right: 8px;
 }
 
 .audioReviewedText {

assets/js/components/Dashboard/InfoPopover.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { OverlayTrigger, Popover } from "react-bootstrap";
+import { InfoCircleFill } from "react-bootstrap-icons";
+import { type Placement } from "react-bootstrap/esm/types";
+import * as infoPopoverStyles from "Styles/info-popover.module.scss";
+
+interface Props {
+  popoverText: string;
+  placement: Placement;
+}
+
+const InfoPopover = ({ popoverText, placement }: Props) => {
+  return (
+    <OverlayTrigger
+      placement={placement}
+      overlay={
+        <Popover id="info-popover" className={infoPopoverStyles.popover} body>
+          {popoverText}
+        </Popover>
+      }
+    >
+      <InfoCircleFill fill="#8ECDFF" />
+    </OverlayTrigger>
+  );
+};
+
+export default InfoPopover;

assets/js/components/Dashboard/PaMessageForm/MainForm.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, { Dispatch, FormEvent, SetStateAction, useState } from "react";
 import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
-import DaysPicker from "Components/DaysPicker";
-import PriorityPicker from "Components/PriorityPicker";
-import IntervalPicker from "Components/IntervalPicker";
-import MessageTextBox from "Components/MessageTextBox";
 import { useNavigate } from "react-router-dom";
 import moment from "moment";
 import {
@@ -15,6 +11,11 @@ import {
   VolumeUpFill,
 } from "react-bootstrap-icons";
 import cx from "classnames";
+import DaysPicker from "Components/DaysPicker";
+import PriorityPicker from "Components/PriorityPicker";
+import IntervalPicker from "Components/IntervalPicker";
+import MessageTextBox from "Components/MessageTextBox";
+import InfoPopover from "Components/InfoPopover";
 import { ActivePeriod, Alert as AlertModel } from "Models/alert";
 import { getAlertEarliestStartLatestEnd } from "../../../util";
 import { AudioPreview, Page } from "./types";
@@ -150,6 +151,10 @@ const MainForm = ({
 
   const startDateTime = moment(`${startDate} ${startTime}`, "YYYY-MM-DD HH:mm");
   const endDateTime = moment(`${endDate} ${endTime}`, "YYYY-MM-DD HH:mm");
+  const popoverText =
+    "A service day starts at 3:00 AM, and ends at 3:00 AM the following day";
+
+  const isEndTimeInvalid = validated && !moment(endTime, "HH:mm").isValid();
 
   return (
     <div className={paMessageStyles.editPage}>
@@ -178,7 +183,7 @@ const MainForm = ({
                 >
                   Start
                 </Form.Label>
-                <div className="d-flex gap-3">
+                <div className="d-flex gap-3 align-items-center">
                   <div className={paMessageStyles.startEndItem}>
                     <Form.Control
                       className={cx(paMessageStyles.inputField, "picker")}
@@ -226,6 +231,7 @@ const MainForm = ({
                     >
                       Start of service day
                     </Button>
+                    <InfoPopover placement="top" popoverText={popoverText} />
                   </div>
                 </div>
               </Form.Group>
@@ -258,7 +264,7 @@ const MainForm = ({
                   />
                 )}
                 {!endWithEffectPeriod && (
-                  <div className="d-flex gap-3">
+                  <div className="d-flex gap-3 align-items-center">
                     <div className={paMessageStyles.startEndItem}>
                       <Form.Control
                         className={cx(paMessageStyles.inputField, "picker")}
@@ -290,9 +296,7 @@ const MainForm = ({
                         className={cx(paMessageStyles.inputField, "picker")}
                         value={endTime}
                         onChange={(event) => setEndTime(event.target.value)}
-                        isInvalid={
-                          validated && !moment(endTime, "HH:mm").isValid()
-                        }
+                        isInvalid={isEndTimeInvalid}
                       />
                       <Form.Control.Feedback type="invalid">
                         End time needs to be in the correct format
@@ -302,10 +306,23 @@ const MainForm = ({
                       <Button
                         className={paMessageStyles.serviceTimeButton}
                         variant="link"
-                        onClick={() => setEndTime("03:00")}
+                        onClick={() => {
+                          if (isEndTimeInvalid) return;
+
+                          if (moment(endTime, "HH:mm").hour() >= 3) {
+                            setEndDate(
+                              moment(endDate, "YYYY-MM-DD")
+                                .add(1, "d")
+                                .format("YYYY-MM-DD"),
+                            );
+                          }
+
+                          setEndTime("03:00");
+                        }}
                       >
                         End of service day
                       </Button>
+                      <InfoPopover placement="top" popoverText={popoverText} />
                     </div>
                   </div>
                 )}