From 00af90902e5921f77831c35045923a12f257c238 Mon Sep 17 00:00:00 2001
From: arpanetus <digitsaurum@gmail.com>
Date: Tue, 2 Aug 2022 01:11:11 +0600
Subject: [PATCH] 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/App/App.test.js                |   9 +
 .../App/__snapshots__/App.test.js.snap        | 982 ++++++++++++++++--
 src/components/Certificates/Add/index.jsx     |   2 +-
 src/components/Contexts/SMSContext.jsx        |  63 ++
 src/components/Layouts/SideMenu.jsx           |   6 +
 .../__snapshots__/SideMenu.test.jsx.snap      |  22 +
 src/components/Routes/SiteRoutes.jsx          |   9 +
 src/components/SMS/Send/SendForm.jsx          |  92 ++
 src/components/SMS/Send/ViewResult.jsx        |  39 +
 src/components/SMS/Send/ViewResult.test.jsx   |  21 +
 .../__snapshots__/ViewResult.test.jsx.snap    |  39 +
 src/components/SMS/Send/index.jsx             |  68 ++
 src/services/smsAPI.js                        |  27 +
 13 files changed, 1307 insertions(+), 72 deletions(-)
 create mode 100644 src/components/Contexts/SMSContext.jsx
 create mode 100644 src/components/SMS/Send/SendForm.jsx
 create mode 100644 src/components/SMS/Send/ViewResult.jsx
 create mode 100644 src/components/SMS/Send/ViewResult.test.jsx
 create mode 100644 src/components/SMS/Send/__snapshots__/ViewResult.test.jsx.snap
 create mode 100644 src/components/SMS/Send/index.jsx
 create mode 100644 src/services/smsAPI.js

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index b78ce25..e92f442 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -132,6 +132,10 @@ describe("App", () => {
     await check("/tools/certificates/add", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /tools/sms/send unauthenticated", async () => {
+    await check("/tools/sms/send", "span.MuiButton-label", "Sign In");
+  })
+
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });
@@ -189,4 +193,9 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/tools/certificates/add", "h6", "Create Certificate");
   });
+
+  it("Route /tools/sms/send authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/tools/sms/send", "h6", "Send SMS");
+  });
 });
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e5d83d8..ebc871d 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -310,6 +310,28 @@ exports[`App Route / authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -808,6 +830,28 @@ exports[`App Route /home authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -1342,6 +1386,28 @@ exports[`App Route /package-create authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -1399,10 +1465,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1227"
+                        class="PrivateNotchedOutline-legendLabelled-1288"
                       >
                         <span>
                           Package name
@@ -1445,10 +1511,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1227"
+                        class="PrivateNotchedOutline-legendLabelled-1288"
                       >
                         <span>
                           Version
@@ -1499,10 +1565,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1227"
+                        class="PrivateNotchedOutline-legendLabelled-1288"
                       >
                         <span>
                           Description
@@ -1546,10 +1612,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1227"
+                        class="PrivateNotchedOutline-legendLabelled-1288"
                       >
                         <span>
                           Release Notes URL
@@ -2097,11 +2163,11 @@ exports[`App Route /package-create authenticated 1`] = `
                           </svg>
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                             style="padding-left: 8px;"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legend-1226"
+                              class="PrivateNotchedOutline-legend-1287"
                               style="width: 0.01px;"
                             >
                               <span>
@@ -2324,11 +2390,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                   </svg>
                                   <fieldset
                                     aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1225 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-1286 MuiOutlinedInput-notchedOutline"
                                     style="padding-left: 8px;"
                                   >
                                     <legend
-                                      class="PrivateNotchedOutline-legend-1226"
+                                      class="PrivateNotchedOutline-legend-1287"
                                       style="width: 0.01px;"
                                     >
                                       <span>
@@ -2839,6 +2905,28 @@ exports[`App Route /package-deploy authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -2977,14 +3065,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1160 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1221 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1163"
+                                    class="PrivateSwitchBase-input-1224"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -3711,6 +3799,28 @@ exports[`App Route /package-status authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -4319,6 +4429,28 @@ exports[`App Route /packages authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -5129,6 +5261,28 @@ exports[`App Route /page-not-found authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -5606,6 +5760,28 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -5660,10 +5836,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1490 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-1551 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1492"
+                      class="PrivateNotchedOutline-legendLabelled-1553"
                     >
                       <span>
                         VIN
@@ -5690,20 +5866,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1495 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1555 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1556 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-1497"
+                        class="PrivateSwitchBase-input-1558"
                         name="cert-type"
                         type="radio"
                         value="TBOX"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1498 PrivateRadioButtonIcon-checked-1500"
+                        class="PrivateRadioButtonIcon-root-1559 PrivateRadioButtonIcon-checked-1561"
                       >
                         <svg
                           aria-hidden="true"
@@ -5717,7 +5893,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1560"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5742,19 +5918,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1555 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1497"
+                        class="PrivateSwitchBase-input-1558"
                         name="cert-type"
                         type="radio"
                         value="ICC"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1498"
+                        class="PrivateRadioButtonIcon-root-1559"
                       >
                         <svg
                           aria-hidden="true"
@@ -5768,7 +5944,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1560"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5793,19 +5969,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1494 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1555 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1497"
+                        class="PrivateSwitchBase-input-1558"
                         name="cert-type"
                         type="radio"
                         value="Charging"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1498"
+                        class="PrivateRadioButtonIcon-root-1559"
                       >
                         <svg
                           aria-hidden="true"
@@ -5819,7 +5995,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1499"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1560"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5919,6 +6095,604 @@ exports[`App Route /tools/certificates/add unauthenticated 1`] = `
 </div>
 `;
 
+exports[`App Route /tools/sms/send authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-0000"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0000 makeStyles-appBarShift-0000 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <div>
+            <h6
+              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+            >
+              Send SMS
+            </h6>
+            <nav
+              aria-label="breadcrumb"
+              class="MuiTypography-root MuiBreadcrumbs-root MuiTypography-body1 MuiTypography-colorInherit"
+              style="font-size: 10px;"
+            >
+              <ol
+                class="MuiBreadcrumbs-ol"
+              >
+                <li
+                  class="MuiBreadcrumbs-li"
+                >
+                  <a
+                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
+                    href="/tools/sms/send"
+                  >
+                    Tools
+                  </a>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="MuiBreadcrumbs-separator"
+                >
+                  /
+                </li>
+                <li
+                  class="MuiBreadcrumbs-li"
+                >
+                  <a
+                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
+                    href="/tools/sms/send"
+                  >
+                    Send SMS
+                  </a>
+                </li>
+              </ol>
+            </nav>
+          </div>
+          <div
+            class="makeStyles-rightToolbar-0000"
+            color="inherit"
+          >
+            <button
+              aria-controls="fade-menu"
+              aria-haspopup="true"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                John
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-0000"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-0000 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+        >
+          <div
+            class="makeStyles-drawerHeader-0000 makeStyles-drawerHeaderLogo-0000"
+          >
+            <img
+              alt="Fisker Admin Portal"
+              class="makeStyles-logo-0000"
+              src="fisker-badge.svg"
+            />
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Home
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/packages"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Deployments
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicles"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/fleets"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-1 1v1h1l2-2.03L9 18v-5H4V5.98L13 6v2h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 13.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V18h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Fleets
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-0000 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                href="https://dev-superset.cloud.fiskerinc.com/r/3"
+                rel="noopener"
+                role="button"
+                tabindex="0"
+                target="_blank"
+              >
+                <div
+                  class="MuiListItemIcon-root"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Datascope
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <span>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/certificates/add"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemIcon-root"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
+                      />
+                    </svg>
+                  </div>
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Tools
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
+            </span>
+            <ul
+              style="margin-left: 50px;"
+            >
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/certificates/add"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      Certificate
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
+            </ul>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-0000 makeStyles-contentShift-0000"
+      >
+        <div
+          class="makeStyles-drawerHeader-0000"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthLg"
+        >
+          <div
+            class="makeStyles-paper-0000"
+          >
+            <form
+              action="{onSubmit}"
+              class="makeStyles-form-0000"
+              novalidate=""
+            >
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  data-shrink="false"
+                  for="iccid"
+                  id="iccid-label"
+                >
+                  ICCID
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="iccid"
+                    maxlength="50"
+                    minlength="15"
+                    name="iccid"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-1623 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-1625"
+                    >
+                      <span>
+                        ICCID
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                  data-shrink="false"
+                  for="message"
+                  id="message-label"
+                >
+                  Message
+                  <span
+                    aria-hidden="true"
+                    class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                  >
+                     
+                    *
+                  </span>
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="message"
+                    maxlength="320"
+                    name="message"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-1623 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-1625"
+                    >
+                      <span>
+                        Message
+                         *
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
+              <label
+                class="MuiFormControlLabel-root"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1627 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <input
+                      class="PrivateSwitchBase-input-1630"
+                      data-indeterminate="false"
+                      type="checkbox"
+                      value="isAwaited"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </span>
+                <span
+                  class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                >
+                  Await delivery
+                </span>
+              </label>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0000 MuiButton-containedPrimary MuiButton-fullWidth"
+                tabindex="0"
+                type="submit"
+              >
+                <span
+                  class="MuiButton-label"
+                >
+                  Send
+                </span>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </button>
+            </form>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /tools/sms/send unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-0000"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0000 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <div>
+            <h6
+              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+            />
+          </div>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-0000"
+      >
+        <div
+          class="makeStyles-drawerHeader-0000"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthLg"
+        >
+          <div
+            class="makeStyles-paper-0000 makeStyles-textJustifyAlign-0000"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0000 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`App Route /vehicle-add authenticated 1`] = `
 <div>
   <div
@@ -6265,6 +7039,28 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -6322,10 +7118,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1292"
+                        class="PrivateNotchedOutline-legendLabelled-1353"
                       >
                         <span>
                           VIN
@@ -6368,10 +7164,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
+                        class="PrivateNotchedOutline-legendLabelled-1353 PrivateNotchedOutline-legendNotched-1354"
                       >
                         <span>
                           Model
@@ -6415,10 +7211,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
+                        class="PrivateNotchedOutline-legendLabelled-1353 PrivateNotchedOutline-legendNotched-1354"
                       >
                         <span>
                           Year
@@ -6462,10 +7258,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
+                        class="PrivateNotchedOutline-legendLabelled-1353 PrivateNotchedOutline-legendNotched-1354"
                       >
                         <span>
                           Trim
@@ -6492,19 +7288,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="trace"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298"
+                          class="PrivateRadioButtonIcon-root-1359"
                         >
                           <svg
                             aria-hidden="true"
@@ -6518,7 +7314,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6543,19 +7339,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="debug"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298"
+                          class="PrivateRadioButtonIcon-root-1359"
                         >
                           <svg
                             aria-hidden="true"
@@ -6569,7 +7365,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6594,20 +7390,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1295 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1356 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="info"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298 PrivateRadioButtonIcon-checked-1300"
+                          class="PrivateRadioButtonIcon-root-1359 PrivateRadioButtonIcon-checked-1361"
                         >
                           <svg
                             aria-hidden="true"
@@ -6621,7 +7417,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6646,19 +7442,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="warn"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298"
+                          class="PrivateRadioButtonIcon-root-1359"
                         >
                           <svg
                             aria-hidden="true"
@@ -6672,7 +7468,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6697,19 +7493,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="error"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298"
+                          class="PrivateRadioButtonIcon-root-1359"
                         >
                           <svg
                             aria-hidden="true"
@@ -6723,7 +7519,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6748,19 +7544,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           name="log-level-group"
                           type="radio"
                           value="critical"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1298"
+                          class="PrivateRadioButtonIcon-root-1359"
                         >
                           <svg
                             aria-hidden="true"
@@ -6774,7 +7570,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1299"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1360"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -6809,14 +7605,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1295 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1356 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -6875,10 +7671,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
+                          class="PrivateNotchedOutline-legendLabelled-1353 PrivateNotchedOutline-legendNotched-1354"
                         >
                           <span>
                             Max Memory Buffer Size (0 uses default size)
@@ -6893,13 +7689,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1294 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1355 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1297"
+                          class="PrivateSwitchBase-input-1358"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -6960,10 +7756,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1290 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1351 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1292 PrivateNotchedOutline-legendNotched-1293"
+                        class="PrivateNotchedOutline-legendLabelled-1353 PrivateNotchedOutline-legendNotched-1354"
                       >
                         <span>
                           Max Disk Buffer Size (0 uses default size)
@@ -7399,6 +8195,28 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
@@ -7416,7 +8234,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             class="makeStyles-paper-0000 makeStyles-tableSize-0000"
           >
             <div
-              class="MuiBox-root MuiBox-root-1423 makeStyles-tableToolbar-0000"
+              class="MuiBox-root MuiBox-root-1484 makeStyles-tableToolbar-0000"
             >
               <div
                 class="MuiTabs-root"
@@ -7504,7 +8322,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                   </div>
                   <span
-                    class="PrivateTabIndicator-root-1424 PrivateTabIndicator-colorSecondary-1426 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-1485 PrivateTabIndicator-colorSecondary-1487 MuiTabs-indicator"
                     style="left: 0px; width: 0px;"
                   />
                 </div>
@@ -7516,7 +8334,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               role="tabpanel"
             >
               <div
-                class="MuiBox-root MuiBox-root-1428"
+                class="MuiBox-root MuiBox-root-1489"
               >
                 <div
                   class="makeStyles-paper-0000 makeStyles-tableSize-0000"
@@ -8088,6 +8906,28 @@ exports[`App Route /vehicles authenticated 1`] = `
                   />
                 </a>
               </li>
+              <li>
+                <a
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                  href="/tools/sms/send"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="MuiListItemText-root"
+                  >
+                    <span
+                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                    >
+                      SMS
+                    </span>
+                  </div>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </a>
+              </li>
             </ul>
           </ul>
         </div>
diff --git a/src/components/Certificates/Add/index.jsx b/src/components/Certificates/Add/index.jsx
index 6cf9ed0..bfbb9f9 100644
--- a/src/components/Certificates/Add/index.jsx
+++ b/src/components/Certificates/Add/index.jsx
@@ -53,7 +53,7 @@ const MainForm = () => {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-  };
+  };  
 
   const onChangeView = () => {
     setPubCert(null);
diff --git a/src/components/Contexts/SMSContext.jsx b/src/components/Contexts/SMSContext.jsx
new file mode 100644
index 0000000..c40de21
--- /dev/null
+++ b/src/components/Contexts/SMSContext.jsx
@@ -0,0 +1,63 @@
+import React, { useContext, useState } from "react";
+
+import api from "../../services/smsAPI";
+
+const SMSContext = React.createContext();
+
+export class SMS {
+  constructor(message, ICCID, isAwaited) {
+    /** @type {string} */
+    this.messageText = message;
+    /** @type {string} */
+    this.ICCID = ICCID;
+    /** @type {boolean} */
+    this.await = isAwaited;
+  }
+}
+
+/**
+ * @param {SMS} data
+ */
+const validateSend = (data) => {
+  if (!data.messageText) throw new Error("message is required");
+  if (!data.ICCID) throw new Error("ICCID is required");
+};
+
+export const SMSProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+
+  /**
+   * @param {SMS} data
+   * @param {*} token
+   * @returns
+   */
+  const sendSMS = async (data, token) => {
+    try {
+      setBusy(true);
+
+      validateSend(data);
+
+      const result = await api.send(data, token);
+      if (result.error) {
+        throw new Error(`Send message error. ${result.message}`);
+      }
+
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <SMSContext.Provider
+      value={{
+        busy,
+        sendSMS,
+      }}
+    >
+      {children}
+    </SMSContext.Provider>
+  );
+};
+
+export const useSMSContext = () => useContext(SMSContext);
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index 8991a8b..e7e281c 100644
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -62,8 +62,14 @@ const menuData = [
         to: "/tools/certificates/add",
         roles: [Roles.CERTIFICATES],
       },
+      {
+        label: "SMS",
+        to: "/tools/sms/send",
+        roles: [],
+      }
     ],
   },
+
 ];
 
 const MenuItem = ({ item, children }) => {
diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
index b494939..2e8b86f 100644
--- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
+++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
@@ -253,6 +253,28 @@ exports[`SideMenu Authenticated 1`] = `
             />
           </a>
         </li>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/tools/sms/send"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                SMS
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
       </ul>
     </ul>
   </div>
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index cb75b6a..3d8dd01 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -34,6 +34,7 @@ const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
 const VehicleUpdateForm = React.lazy(() => import("../Cars/Update"));
 const CertificateCreate = React.lazy(() => import("../Certificates/Add"));
+const SMSSend = React.lazy(() => import("../SMS/Send"));
 const SuppliersList = React.lazy(() => import("../Suppliers/List"));
 const SupplierDetails = React.lazy(() => import("../Suppliers/Details"));
 
@@ -208,6 +209,14 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.CERTIFICATES]}
         />
+        <AuthRoute
+          path="/tools/sms/send"
+          render={() => <SMSSend />}
+          type={TYPES.PROTECTED}
+          token={token}
+          groups={groups}
+          // roles={[Roles.CREATE]}
+        />
         <AuthRoute
           path="/suppliers"
           render={() => <SuppliersList />}
diff --git a/src/components/SMS/Send/SendForm.jsx b/src/components/SMS/Send/SendForm.jsx
new file mode 100644
index 0000000..0aa5dcf
--- /dev/null
+++ b/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;
diff --git a/src/components/SMS/Send/ViewResult.jsx b/src/components/SMS/Send/ViewResult.jsx
new file mode 100644
index 0000000..abab5d8
--- /dev/null
+++ b/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;
diff --git a/src/components/SMS/Send/ViewResult.test.jsx b/src/components/SMS/Send/ViewResult.test.jsx
new file mode 100644
index 0000000..09ffcab
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/SMS/Send/__snapshots__/ViewResult.test.jsx.snap b/src/components/SMS/Send/__snapshots__/ViewResult.test.jsx.snap
new file mode 100644
index 0000000..cda76a3
--- /dev/null
+++ b/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>
+`;
diff --git a/src/components/SMS/Send/index.jsx b/src/components/SMS/Send/index.jsx
new file mode 100644
index 0000000..0d4005b
--- /dev/null
+++ b/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;
diff --git a/src/services/smsAPI.js b/src/services/smsAPI.js
new file mode 100644
index 0000000..396d50f
--- /dev/null
+++ b/src/services/smsAPI.js
@@ -0,0 +1,27 @@
+import {
+  errorHandler,
+  getAuthHeaderOptions,
+  fetchRespHandler,
+} from "../utils/http";
+
+const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
+
+const smsAPI = {
+  /**
+   * Sends a SMS to an ICCID
+   * @param {*} data 
+   * @param {*} token 
+   * @returns 
+   */
+  send: async (data, token) =>
+    fetch(`${API_ENDPOINT}/sms`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      body: JSON.stringify(data),
+    }).then(fetchRespHandler).catch(errorHandler),
+};
+
+export default smsAPI;
\ No newline at end of file