feat(campaign-stats): add estimated campaign cost

src/config.js

@@ -476,6 +476,12 @@ const validators = {
     default: 99999,
     isClient: true
   }),
+  MMS_MESSAGE_COST: num({
+    desc:
+      "Estimated USD cost for each outbound MMS message, shown in campaign stats.",
+    default: 0.0325,
+    isClient: true
+  }),
   METRICS_ENABLED: bool({
     desc: "Whether to expose the /metrics endpoint for Prometheus scraping.",
     default: true
@@ -613,6 +619,12 @@ const validators = {
     default: 100,
     isClient: true
   }),
+  SMS_SEGMENT_COST: num({
+    desc:
+      "Estimated USD cost for each outbound SMS segment, shown in campaign stats.",
+    default: 0.013,
+    isClient: true
+  }),
   SESSION_SECRET: str({
     desc: "Unique key used to encrypt sessions."
   }),

src/containers/AdminCampaignStats/components/CampaignCostStat.tsx

@@ -0,0 +1,118 @@
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import React, { useState } from "react";
+
+import CampaignStat from "./CampaignStat";
+
+const useStyles = makeStyles((theme) => ({
+  clickable: {
+    cursor: "pointer",
+    height: "100%"
+  },
+  breakdown: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: theme.spacing(1, 3),
+    marginBottom: theme.spacing(2)
+  },
+  total: {
+    fontWeight: 700
+  }
+}));
+
+const formatUsd = (amount: number, maximumFractionDigits = 2) =>
+  new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits
+  }).format(amount);
+
+interface CampaignCostStatProps {
+  loading?: boolean;
+  error?: string;
+  smsSegments?: number;
+  mmsMessages?: number;
+}
+
+export const CampaignCostStat: React.FC<CampaignCostStatProps> = ({
+  loading,
+  error,
+  smsSegments,
+  mmsMessages
+}) => {
+  const classes = useStyles();
+  const [open, setOpen] = useState(false);
+  const smsCost = (smsSegments ?? 0) * window.SMS_SEGMENT_COST;
+  const mmsCost = (mmsMessages ?? 0) * window.MMS_MESSAGE_COST;
+  const estimatedCost = smsCost + mmsCost;
+  const hasStats = smsSegments !== undefined && mmsMessages !== undefined;
+  const openDialog = () => setOpen(true);
+
+  return (
+    <>
+      <div
+        className={hasStats ? classes.clickable : undefined}
+        onClick={hasStats ? openDialog : undefined}
+        onKeyDown={
+          hasStats
+            ? (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  openDialog();
+                }
+              }
+            : undefined
+        }
+        role={hasStats ? "button" : undefined}
+        tabIndex={hasStats ? 0 : undefined}
+      >
+        <CampaignStat
+          title="Estimated Campaign Cost"
+          loading={loading}
+          error={error}
+          count={hasStats ? formatUsd(estimatedCost) : undefined}
+        />
+      </div>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Estimated Campaign Cost</DialogTitle>
+        <DialogContent>
+          <div className={classes.breakdown}>
+            <Typography>SMS segments</Typography>
+            <Typography>
+              {smsSegments} × {formatUsd(window.SMS_SEGMENT_COST, 4)}
+            </Typography>
+            <Typography>{formatUsd(smsCost)}</Typography>
+            <Typography>MMS messages</Typography>
+            <Typography>
+              {mmsMessages} × {formatUsd(window.MMS_MESSAGE_COST, 4)}
+            </Typography>
+            <Typography>{formatUsd(mmsCost)}</Typography>
+            <Typography className={classes.total}>Estimated total</Typography>
+            <span />
+            <Typography className={classes.total}>
+              {formatUsd(estimatedCost)}
+            </Typography>
+          </div>
+          <DialogContentText>
+            This estimate is based on the campaign's current SMS and MMS usage.
+            Final billing costs may vary.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button color="primary" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+export default CampaignCostStat;

src/containers/AdminCampaignStats/components/TopLineStats.jsx

@@ -5,6 +5,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 import { withQueries } from "../../hoc/with-operations";
+import CampaignCostStat from "./CampaignCostStat";
 import CampaignStat from "./CampaignStat";
 
 export const TopLineStats = (props) => {
@@ -97,23 +98,15 @@ export const TopLineStats = (props) => {
           }
         />
       </Grid>
-      <Grid item xs={6} sm={3}>
-        <CampaignStat
-          title="SMS Segments"
+      <Grid item xs={12} sm={6}>
+        <CampaignCostStat
           loading={sentMessagesCount.loading}
           error={sentMessagesCount.errors && sentMessagesCount.errors.message}
-          count={
+          smsSegments={
             sentMessagesCount.campaign &&
             sentMessagesCount.campaign.stats.sentSmsSegmentsCount
           }
-        />
-      </Grid>
-      <Grid item xs={6} sm={3}>
-        <CampaignStat
-          title="MMS Sent"
-          loading={sentMessagesCount.loading}
-          error={sentMessagesCount.errors && sentMessagesCount.errors.message}
-          count={
+          mmsMessages={
             sentMessagesCount.campaign &&
             sentMessagesCount.campaign.stats.sentMmsCount
           }

src/global.d.ts

@@ -7,6 +7,7 @@ interface Window {
   GRAPHQL_URL: string;
   SPOKE_VERSION: string;
   MAX_MESSAGE_LENGTH: number;
+  MMS_MESSAGE_COST: number;
   PASSPORT_STRATEGY: string;
   TZ: string;
   RENDERED_CLASS_NAMES: string[];
@@ -15,6 +16,7 @@ interface Window {
   BASE_URL: string;
   ENABLE_TROLLBOT: boolean;
   ENABLE_AUTOSENDING: boolean;
+  SMS_SEGMENT_COST: number;
 
   CHATWOOT_WEBSITE_TOKEN?: string;
   CHATWOOT_BASE_URL?: string;