CEC-758 Add SMS send page and result (#173)

* Add SMS send and result pages

* Update snapshot

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/SMS/Send/SendForm.jsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from "react";
+import {
+  Button,
+  FormControlLabel,
+  Checkbox,
+  TextField,
+} from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { SMS } from "../../Contexts/SMSContext";
+
+const SendForm = ({ onSend, busy }) => {
+  const classes = useStyles();
+
+  const iccidEl = useRef(null);
+
+  const [message, setMessage] = useState(null);
+  const [isAwaited, setAwait] = useState(false);
+
+  const onSubmit = async (event) => {
+    event.preventDefault();
+
+    if (onSend) onSend(new SMS(message, iccidEl.current.value, isAwaited));
+  };
+
+  const onMessageChange = (event) => {
+    setMessage(event.target.value);
+  };
+
+  const onAwaitChange = (event) => {
+    setAwait(event.target.checked);
+  };
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="iccid"
+          name="iccid"
+          label="ICCID"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "50",
+            minLength: "15",
+          }}
+          required
+          fullWidth
+          inputRef={iccidEl}
+        />
+        <TextField
+          id="message"
+          name="message"
+          label="Message"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "320",
+          }}
+          required
+          fullWidth
+          onChange={onMessageChange}
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={isAwaited}
+              onChange={onAwaitChange}
+              value="isAwaited"
+              color="primary"
+            />
+          }
+          label="Await delivery"
+        />
+
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Sending..." : "Send"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default SendForm;

src/components/SMS/Send/ViewResult.jsx

@@ -0,0 +1,39 @@
+import { Button } from "@material-ui/core";
+import React from "react";
+
+import useStyles from "../../useStyles";
+
+const ViewResult = ({ result, onChangeView }) => {
+  const classes = useStyles();
+
+  const onNewSMS = (event) => {
+    event.preventDefault();
+    if (!onChangeView) return;
+    onChangeView();
+  };
+  return (
+    <div>
+      <h2>View Result</h2>
+      <ul>
+        {Object.keys(result).map((key) => (
+          <li key={key}>
+            {key}:{result[key]}
+            <br />
+          </li>
+        ))}
+      </ul>
+      <Button
+        type="submit"
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={onNewSMS}
+      >
+        Done
+      </Button>
+    </div>
+  );
+};
+
+export default ViewResult;

src/components/SMS/Send/ViewResult.test.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+
+import ViewResult from "./ViewResult";
+
+describe("ViewResult", () => {
+  beforeAll(() => {
+    global.URL.createObjectURL = jest.fn();
+    global.URL.revokeObjectURL = jest.fn();
+  });
+
+  it("Render", async () => {
+    const { container } = render(
+      <ViewResult result={{ result: "success", message: "message" }} />
+    );
+    await waitFor(() => {
+      /* render */
+    });
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/SMS/Send/__snapshots__/ViewResult.test.jsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewResult Render 1`] = `
+<div>
+  <div>
+    <h2>
+      View Result
+    </h2>
+    <ul>
+      <li>
+        result
+        :
+        success
+        <br />
+      </li>
+      <li>
+        message
+        :
+        message
+        <br />
+      </li>
+    </ul>
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
+      tabindex="0"
+      type="submit"
+    >
+      <span
+        class="MuiButton-label"
+      >
+        Done
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </button>
+  </div>
+</div>
+`;

src/components/SMS/Send/index.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+
+import { useSMSContext, SMSProvider } from "../../Contexts/SMSContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { logger } from "../../../services/monitoring";
+import SendForm from "./SendForm";
+import ViewResult from "./ViewResult";
+
+const VIEW_FORM = 0;
+const VIEW_RESULT = 1;
+
+const MainForm = () => {
+  const { busy, sendSMS } = useSMSContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [view, setView] = useState(VIEW_FORM);
+  const [result, setResult] = useState(null);
+
+  useEffect(() => {
+    setTitle("Send SMS");
+    setSitePath([
+      {
+        label: "Tools",
+        link: "/tools/sms/send",
+      },
+      {
+        label: "Send SMS",
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSend = async (data) => {
+    try {
+      setResult(await sendSMS(data, token));
+
+      setMessage(`Sent ${data.messageText} to ${data.ICCID}`);
+      setView(VIEW_RESULT);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const onChangeView = () => {
+    setResult(null);
+
+    setView(VIEW_FORM);
+  };
+
+  if (view === VIEW_RESULT)
+    return <ViewResult result={result} onChangeView={onChangeView} />;
+
+  return <SendForm onSend={onSend} busy={busy} />;
+};
+
+const SMSSend = () => (
+  <SMSProvider>
+    <MainForm />
+  </SMSProvider>
+);
+
+export default SMSSend;