@aglyn/plugins-marketing 1.0.0-beta.143

package/src/lib/components/campaign-reach-sections.js

@@ -0,0 +1,694 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppLink } from "@aglyn/shared-ui-jsx";
+import { Figure, MoneyFigure, Section } from "@aglyn/shared-ui-email-campaigns/components/report-figures";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { ScrollTable } from "@aglyn/shared-ui-jsx/components/scroll-table.component";
+import { Alert, Button, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import { collection, doc, getCountFromServer, getDoc, query, where } from "firebase/firestore";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useFirestore } from "@aglyn/tenant-feature-instance";
+import { campaignRevenueAcrossSends, CAMPAIGN_CONVERSION_KINDS, CAMPAIGN_CONVERSION_KIND_COPY, EMAIL_ATTRIBUTION_WINDOW_DAYS } from "@aglyn/shared-ui-email-campaigns/model";
+/**
+ * A CAMPAIGN BEYOND ITS MAIL — what it caused, what it earned, and where it
+ * sent people.
+ *
+ * ## Attribution is the mechanism, and there is no other one
+ *
+ * A campaign owns no screen, no form and no overlay. Nothing in the stored
+ * model connects `emailCampaigns/{id}` to a page a visitor lands on:
+ * `HostExperiment` names a screen and never a campaign, `HostOverlay` names
+ * neither, and a form document carries no campaign field. So a section
+ * claiming a campaign CONTAINS a landing page would be inventing an edge, and
+ * the containment would be a claim nothing in the data supports.
+ *
+ * What the data does support is EVIDENCE, of two kinds, and both are already
+ * being written:
+ *
+ *  - **Where it sent people.** `campaigns/{sendId}/reports/links` counts
+ *    clicks per destination URL, so the union across a campaign's emails is
+ *    the set of pages that campaign drove traffic to — observed rather than
+ *    declared, which is also why it stays true when a marketer re-points a
+ *    link.
+ *  - **What it caused there.** `campaignAttributions` records one row per
+ *    identify moment — a form submission, a lead, a contact, a booking —
+ *    carrying the SEND whose link the visitor followed.
+ *  - **What it earned there.** `campaigns/{sendId}/reports/revenue` buckets
+ *    the orders credited to that send by currency, so the merge across a
+ *    campaign's emails is what the campaign was credited with — per currency,
+ *    because the buckets have units and a total across them would not.
+ *
+ * All three sections below therefore hang off the campaign's own send ids,
+ * which is the only handle any of those collections offers.
+ *
+ * ## What neither section can say, and says so instead
+ *
+ * A conversion credited to a WEB touch carries `utm_` labels and no send id.
+ * A campaign container has no `utm_` label of its own — a marketer types
+ * those into a URL — so there is no join to make, and no amount of matching
+ * on the campaign's NAME would be one: two campaigns may share a name, and a
+ * label is a string anybody who can vary a query string can mint. The
+ * site-wide Conversions section is where the web channel is read, and the
+ * copy below points at it rather than quietly leaving it out.
+ *
+ * A conversion with no touch at all is credited to nobody and is in neither
+ * collection. The same holds for an order: one placed by somebody who never
+ * clicked is credited to no campaign. That makes a page showing only credited
+ * outcomes a partial account by construction, which is why the figures are
+ * labelled "credited to this campaign" everywhere they appear.
+ */ /** Firestore's cap on the values in one `in` filter. */ const ID_CHUNK = 30;
+/** The ids as one primitive, so an effect depends on the VALUE not the array. */ const idsKey = (sendIds)=>sendIds.join(',');
+/** `['a','b','c']` in runs of at most {@link ID_CHUNK}. */ function chunked(ids) {
+    const out = [];
+    for(let index = 0; index < ids.length; index += ID_CHUNK){
+        out.push(ids.slice(index, index + ID_CHUNK));
+    }
+    return out;
+}
+/**
+ * WHAT THE CAMPAIGN CAUSED, counted rather than listed.
+ *
+ * Four aggregation counts over `campaignAttributions`, one per kind, each
+ * narrowed to this campaign's own sends. An aggregation is billed per
+ * thousand index entries rather than per document, so the honest figure costs
+ * about as much as a single row — which is what lets this run on mount
+ * instead of behind a button. Listing the records would not: that is the
+ * per-record read every figure on this page is arranged to avoid, and the
+ * site-wide Conversions section already lists them.
+ *
+ * The composite index the query needs — `kind` then `campaignId` — is already
+ * declared for the conversions list's own campaign-scoped view, and an `in`
+ * runs as a disjunction of equalities against that same index.
+ *
+ * ## The kinds are never added together
+ *
+ * One form submission by a new person writes a submission, a contact AND a
+ * lead: three true statements about one visit. A total would count that visit
+ * three times and would look exactly like a bigger number, so there is no
+ * total here and the note under the figures says why.
+ */ export function CampaignConversionsSection(props) {
+    const { hostId, sendIds, truncated, basePath } = props;
+    const firestore = useFirestore();
+    const key = idsKey(sendIds);
+    const [counts, setCounts] = useState(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(()=>{
+        const ids = key ? key.split(',') : [];
+        setCounts(null);
+        setFailed(false);
+        if (!ids.length) return;
+        let active = true;
+        const attributions = collection(firestore, 'hosts', hostId, 'campaignAttributions');
+        /*
+     * Summed ACROSS chunks, which is safe because a record carries exactly
+     * one `campaignId`: the chunks partition the send ids, so no record can
+     * be counted by two of them.
+     */ void Promise.all(CAMPAIGN_CONVERSION_KINDS.map(async (kind)=>{
+            const perChunk = await Promise.all(chunked(ids).map((chunk)=>getCountFromServer(query(attributions, where('kind', '==', kind), where('campaignId', 'in', chunk))).then((snapshot)=>{
+                    var _snapshot_data_count;
+                    return Number((_snapshot_data_count = snapshot.data().count) != null ? _snapshot_data_count : 0);
+                })));
+            return [
+                kind,
+                perChunk.reduce((sum, value)=>sum + value, 0)
+            ];
+        })).then((entries)=>{
+            if (active) setCounts(Object.fromEntries(entries));
+        }).catch(()=>{
+            /*
+         * WITHHELD, never zeroed. A count that failed and a campaign that
+         * caused nothing are opposite facts, and rendering the first as the
+         * second is the most flattering wrong answer available here.
+         */ if (active) setFailed(true);
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        firestore,
+        hostId,
+        key
+    ]);
+    return /*#__PURE__*/ _jsxs(Section, {
+        title: "What it caused",
+        children: [
+            !key ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'No emails have gone out under this campaign, so nothing can be ' + 'credited to it yet.'
+            }) : failed ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: 'The conversions credited to this campaign could not be counted.'
+            }) : !counts ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: 'Counting what this campaign is credited with…'
+            }) : /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 3,
+                        sx: {
+                            flexWrap: 'wrap'
+                        },
+                        children: CAMPAIGN_CONVERSION_KINDS.map((kind)=>{
+                            var _counts_kind;
+                            return /*#__PURE__*/ _jsx(Figure, {
+                                label: CAMPAIGN_CONVERSION_KIND_COPY[kind].label,
+                                value: (_counts_kind = counts[kind]) != null ? _counts_kind : 0,
+                                note: CAMPAIGN_CONVERSION_KIND_COPY[kind].note
+                            }, kind);
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'These count different things about the same visits and are ' + 'deliberately not added together — one person filling in one ' + 'form appears as a submission, a contact and a lead.'
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Credited to this campaign’s own emails. Somebody who arrived ' + 'from a link tagged with utm_ parameters is credited to that ' + 'label instead, and somebody who arrived directly is credited ' + 'to nobody — both are counted on the site’s conversions list.'
+                    }),
+                    truncated ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Over the emails listed below. This campaign has sent more ' + 'than the page holds, and their conversions are not in these ' + 'figures.'
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                children: /*#__PURE__*/ _jsx(Button, _extends({
+                    component: AppLink
+                }, {
+                    componentVariant: 'naked',
+                    nativeButton: false
+                }, {
+                    href: `${basePath}/conversions`,
+                    size: "small",
+                    color: "primary",
+                    children: 'All conversions'
+                }))
+            })
+        ]
+    });
+}
+CampaignConversionsSection.displayName = 'CampaignConversionsSection';
+/**
+ * The rule the amounts were credited under, in the sentence a reader can
+ * check them against.
+ *
+ * Plural where the campaign is plural. A container can hold emails credited
+ * under different models or windows, and printing one of them as though it
+ * governed all of them would be the same lie as printing one currency symbol
+ * over two currencies.
+ */ function creditedUnder(report) {
+    const model = report.models.length === 1 ? report.models[0] : '';
+    const rule = model === 'last-click' ? 'to the last campaign whose link the buyer clicked' : model ? `under the ${model} model` : 'under more than one attribution model';
+    const window = report.windowDays.length === 1 ? `within ${report.windowDays[0]} days of that click` : `within ${report.windowDays.join(' or ')} days of that click, ` + 'depending on the email';
+    return `Credited ${rule}, ${window}.`;
+}
+/**
+ * WHAT THE CAMPAIGN EARNED — per currency, and never across them.
+ *
+ * The same question a campaign of one email answers, answered the same way by
+ * a campaign of several: how many messages a container happens to hold is not
+ * a fact about whether its revenue is knowable. So this is the same section
+ * the single-send report carries — `Revenue`, in the same place in the page's
+ * order, drawn by the same money components — over a merge rather than over
+ * one document.
+ *
+ * ## Why it takes a merge, and what the merge may not do
+ *
+ * `reports/revenue` is written per SEND. There is no container-level rollup
+ * and there should not be one: it would have to be kept true against every
+ * order and every refund of every email in the campaign, duplicating figures
+ * that are already correct one level down. So the campaign's figure is one
+ * document per email and an addition — and the addition is the danger.
+ *
+ * **Currency is to money what kind is to a conversion.** The section above
+ * refuses to total form submissions with leads because one visit writes both;
+ * this refuses to total USD with EUR because the sum has no unit. Both
+ * refusals are structural rather than remembered:
+ * {@link campaignRevenueAcrossSends} keys its accumulator on the currency, so
+ * amounts in different currencies never reach the same addition, and the
+ * result carries no combined field for a screen to print.
+ *
+ * ## One currency reads as one figure; several read as several
+ *
+ * The common case is one currency, and it is drawn exactly as a single
+ * email's report draws it — net, gross, refunded, orders — with no currency
+ * heading, because a label saying `USD` over a page that only ever shows
+ * dollars is noise. The moment a second currency appears every block gets its
+ * code as a heading and its own email count, and a caveat says in words what
+ * the headings say in layout: these do not add up, and nothing here converts
+ * between them. The rare case pays for itself; the common one does not pay
+ * for the rare one.
+ *
+ * ## Behind a button, and the button says the price
+ *
+ * One document per email — the per-record read the conversions section above
+ * is shaped to avoid. That section can run on mount because an aggregation is
+ * billed per thousand index entries, so its four honest figures cost about as
+ * much as a single row however large the campaign is. This cannot: fifty
+ * emails is fifty document reads, every time the page opens, for a section
+ * most readers of a campaign are not opening the page for. So it is asked
+ * for, at the same control and in the same words as the destinations section
+ * below, which buys its rows the same way.
+ *
+ * ## Nothing, and nothing readable, are different sentences
+ *
+ * The rollup is created by the writer on the first order it credits, so an
+ * email with no record has never earned. A campaign where NO email has one
+ * has not been shown to have earned nothing — it is also every campaign sent
+ * before the join existed and every campaign on a site with no store, which
+ * is the distinction the single-send report draws in the same two sentences.
+ * A read that is REFUSED shows neither: the figures are withheld behind a
+ * warning, and any figures already on screen are dropped rather than left
+ * standing beside it, because a stale total under a fresh error is the one
+ * arrangement that looks authoritative and is not.
+ */ export function CampaignRevenueSection(props) {
+    const { hostId, sendIds, truncated } = props;
+    const firestore = useFirestore();
+    const key = idsKey(sendIds);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [report, setReport] = useState(null);
+    // A merge over one set of emails describes that set. Leaving it on screen
+    // after the campaign's emails change labels it as something it is not.
+    useEffect(()=>{
+        setReport(null);
+        setError(null);
+    }, [
+        key
+    ]);
+    const load = useCallback(async ()=>{
+        if (busy) return;
+        const ids = key ? key.split(',') : [];
+        if (!ids.length) return;
+        setBusy(true);
+        setError(null);
+        try {
+            const snapshots = await Promise.all(ids.map((id)=>getDoc(doc(firestore, 'hosts', hostId, 'campaigns', id, 'reports', 'revenue'))));
+            /*
+       * `data()` is `undefined` on a document that does not exist, and it is
+       * handed on as `undefined` rather than as an empty rollup: the merge
+       * counts the records that EXIST to tell a campaign that earned nothing
+       * from one whose revenue was never recorded at all.
+       */ setReport(campaignRevenueAcrossSends(snapshots.map((snapshot)=>snapshot.data())));
+        } catch (caught) {
+            console.error(caught);
+            /*
+       * WITHHELD, never zeroed and never left stale. A refused read and a
+       * campaign that earned nothing are opposite facts, and the second is
+       * the more flattering of the two.
+       */ setReport(null);
+            setError('The revenue credited to this campaign could not be read');
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        firestore,
+        hostId,
+        key
+    ]);
+    const count = key ? key.split(',').length : 0;
+    return /*#__PURE__*/ _jsx(Section, {
+        title: "Revenue",
+        children: !count ? /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: 'No emails have gone out under this campaign, so nothing can be ' + 'credited to it yet.'
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'What this campaign’s emails were credited with, read from each ' + 'email’s own revenue record and merged by currency.'
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            onClick: ()=>void load(),
+                            disabled: busy,
+                            children: busy ? 'Reading…' : report ? 'Read again' : 'Show revenue'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `Reads one record per email — ${count.toLocaleString()} of them.`
+                        })
+                    ]
+                }),
+                error ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    children: error
+                }) : null,
+                report ? report.currencies.length ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 3,
+                    children: [
+                        report.caveats.map((caveat)=>/*#__PURE__*/ _jsx(Alert, {
+                                severity: "info",
+                                children: caveat.message
+                            }, caveat.id)),
+                        report.currencies.map((entry)=>/*#__PURE__*/ _jsxs(Stack, {
+                                spacing: 1,
+                                children: [
+                                    report.multiCurrency ? /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "subtitle2",
+                                        children: entry.currency.toUpperCase()
+                                    }) : null,
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        direction: "row",
+                                        spacing: 4,
+                                        useFlexGap: true,
+                                        sx: {
+                                            flexWrap: 'wrap'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                label: "Net revenue",
+                                                cents: entry.netCents,
+                                                currency: entry.currency,
+                                                note: "after refunds"
+                                            }),
+                                            /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                label: "Gross revenue",
+                                                cents: entry.grossCents,
+                                                currency: entry.currency,
+                                                note: "as charged"
+                                            }),
+                                            /*#__PURE__*/ _jsx(MoneyFigure, {
+                                                label: "Refunded",
+                                                cents: entry.refundedCents,
+                                                currency: entry.currency,
+                                                note: "handed back"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Orders",
+                                                value: entry.orders,
+                                                note: "credited to this campaign"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Fully refunded",
+                                                value: entry.refundedOrders,
+                                                note: "of those orders"
+                                            }),
+                                            report.multiCurrency ? /*#__PURE__*/ _jsx(Figure, {
+                                                label: "Emails",
+                                                value: entry.emails,
+                                                note: `earned in ${entry.currency.toUpperCase()}`
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            }, entry.currency)),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `${report.attributedOrders.toLocaleString()} ` + `${report.attributedOrders === 1 ? 'order' : 'orders'} ` + `credited, across ${report.recorded.toLocaleString()} of ` + `this campaign’s ${report.read.toLocaleString()} ` + `${report.read === 1 ? 'email' : 'emails'}. The rest have ` + 'never been credited with a sale.'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `${creditedUnder(report)} Clicks only — an open is not ` + 'treated as evidence that anybody read the email. An ' + 'order placed by somebody who never clicked, or who ' + 'checked out without giving an address, is credited to no ' + 'campaign, so this is a floor rather than every sale this ' + 'campaign influenced.'
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: report.recorded ? 'No orders have been credited to this campaign.' : 'No revenue has been attributed to any of this ' + 'campaign’s emails. Orders are credited to the last ' + 'campaign whose link the buyer clicked, within ' + `${EMAIL_ATTRIBUTION_WINDOW_DAYS} days — emails sent ` + 'before that was recorded, or a site with no store, will ' + 'never show a figure here.'
+                }) : null,
+                report && truncated ? /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: `Across the ${report.read.toLocaleString()} emails this page ` + 'holds. The campaign has sent more.'
+                }) : null
+            ]
+        })
+    });
+}
+CampaignRevenueSection.displayName = 'CampaignRevenueSection';
+/**
+ * WHERE THE CAMPAIGN SENT PEOPLE — the pages its mail pointed at.
+ *
+ * The union of `campaigns/{sendId}/reports/links` across the campaign's
+ * emails, which is the closest the stored data comes to "the surfaces this
+ * campaign runs across". It is observed rather than declared: a page is on
+ * this list because a link in this campaign's mail was followed to it.
+ *
+ * ## Behind a button, and the button says the price
+ *
+ * One document per email, up to the ceiling the page holds — which is the
+ * per-record read the figures above are shaped to avoid, so it is asked for
+ * rather than paid on mount. The same bargain the conversions list makes for
+ * its landing-page grouping.
+ *
+ * ## What a row is, and what it is not
+ *
+ * A destination is the link's address with its query string dropped, because
+ * a campaign body is merged per recipient and a personalised query would mint
+ * one row per person — and could carry that person's address into an
+ * aggregate the whole team reads. The cost is that two links to one page
+ * distinguished only by their tracking parameters are one row, which the note
+ * under the table states rather than leaving the reader to discover.
+ *
+ * Clicks are EVENTS. One reader clicking twice counts twice, so a destination
+ * total is not a count of people.
+ */ export function CampaignDestinationsSection(props) {
+    const { hostId, sendIds, truncated } = props;
+    const firestore = useFirestore();
+    const key = idsKey(sendIds);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    /*
+   * The page is a SLICE of a window this section already holds. One campaign
+   * can reach fifty destinations per email over fifty emails, so the row
+   * count is bounded by the rollups rather than small — and a table that
+   * grows with the campaign gets a footer like every other one.
+   */ const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
+    const visibleRows = useMemo(()=>{
+        var _ref;
+        return ((_ref = result == null ? void 0 : result.rows) != null ? _ref : []).slice(page * pageSize, page * pageSize + pageSize);
+    }, [
+        result,
+        page,
+        pageSize
+    ]);
+    // A grouping read for one set of emails describes that set. Leaving it on
+    // screen after the campaign's emails change labels it as something it is not.
+    useEffect(()=>{
+        setResult(null);
+        setError(null);
+        setPage(0);
+    }, [
+        key
+    ]);
+    const load = useCallback(async ()=>{
+        if (busy) return;
+        const ids = key ? key.split(',') : [];
+        if (!ids.length) return;
+        setBusy(true);
+        setError(null);
+        try {
+            const snapshots = await Promise.all(ids.map((id)=>getDoc(doc(firestore, 'hosts', hostId, 'campaigns', id, 'reports', 'links'))));
+            const byUrl = new Map();
+            let overflowClicks = 0;
+            let unattributedClicks = 0;
+            snapshots.forEach((snapshot)=>{
+                var _rollup_overflowClicks, _rollup_unattributedClicks, _rollup_links;
+                const rollup = snapshot.data();
+                if (!rollup) return;
+                overflowClicks += Number((_rollup_overflowClicks = rollup.overflowClicks) != null ? _rollup_overflowClicks : 0);
+                unattributedClicks += Number((_rollup_unattributedClicks = rollup.unattributedClicks) != null ? _rollup_unattributedClicks : 0);
+                Object.values((_rollup_links = rollup.links) != null ? _rollup_links : {}).forEach((entry)=>{
+                    var _ref, _byUrl_get, _ref1;
+                    const url = String((_ref = entry == null ? void 0 : entry.url) != null ? _ref : '').trim();
+                    if (!url) return;
+                    const row = (_byUrl_get = byUrl.get(url)) != null ? _byUrl_get : {
+                        url,
+                        clicks: 0,
+                        emails: 0
+                    };
+                    row.clicks += Number((_ref1 = entry == null ? void 0 : entry.clicks) != null ? _ref1 : 0);
+                    // One rollup holds at most one entry per destination, so this
+                    // counts EMAILS that linked there rather than link occurrences.
+                    row.emails += 1;
+                    byUrl.set(url, row);
+                });
+            });
+            setPage(0);
+            setResult({
+                rows: [
+                    ...byUrl.values()
+                ].sort((a, b)=>b.clicks - a.clicks || a.url.localeCompare(b.url)),
+                read: ids.length,
+                overflowClicks,
+                unattributedClicks
+            });
+        } catch (caught) {
+            console.error(caught);
+            setError('The destinations could not be read');
+        } finally{
+            setBusy(false);
+        }
+    }, [
+        busy,
+        firestore,
+        hostId,
+        key
+    ]);
+    const count = key ? key.split(',').length : 0;
+    return /*#__PURE__*/ _jsx(Section, {
+        title: "Where it sent people",
+        children: !count ? /*#__PURE__*/ _jsx(Typography, {
+            variant: "body2",
+            color: "text.secondary",
+            children: 'No emails have gone out under this campaign, so it has sent ' + 'nobody anywhere yet.'
+        }) : /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 1,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'The pages this campaign’s links were followed to. A campaign ' + 'does not own a page — this is where its mail actually sent ' + 'people, read from each email’s own click report.'
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Button, {
+                            size: "small",
+                            onClick: ()=>void load(),
+                            disabled: busy,
+                            children: busy ? 'Reading…' : result ? 'Read again' : 'Show destinations'
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `Reads one record per email — ${count.toLocaleString()} of them.`
+                        })
+                    ]
+                }),
+                error ? /*#__PURE__*/ _jsx(Alert, {
+                    severity: "warning",
+                    children: error
+                }) : null,
+                result ? result.rows.length ? /*#__PURE__*/ _jsxs(Stack, {
+                    spacing: 0.5,
+                    children: [
+                        /*#__PURE__*/ _jsxs(ScrollTable, {
+                            size: "small",
+                            children: [
+                                /*#__PURE__*/ _jsx(TableHead, {
+                                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: 'Destination'
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                children: 'Emails'
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                align: "right",
+                                                children: 'Clicks'
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(TableBody, {
+                                    children: visibleRows.map((row)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    sx: {
+                                                        wordBreak: 'break-all'
+                                                    },
+                                                    children: row.url
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    align: "right",
+                                                    children: row.emails.toLocaleString()
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    align: "right",
+                                                    children: row.clicks.toLocaleString()
+                                                })
+                                            ]
+                                        }, row.url))
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(ListPagination, {
+                            page: page,
+                            pageSize: pageSize,
+                            rowCount: visibleRows.length,
+                            count: result.rows.length,
+                            onPageChange: setPage,
+                            onPageSizeChange: setPageSize
+                        }),
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: 'A destination is the address without its query string, ' + 'so two links to one page that differ only in their ' + 'tracking parameters are one row. Clicks are events — ' + 'one reader clicking twice counts twice.'
+                        }),
+                        result.overflowClicks ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `${result.overflowClicks.toLocaleString()} further ` + 'clicks landed on destinations past the per-email cap ' + 'and are not in the table.'
+                        }) : null,
+                        result.unattributedClicks ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `${result.unattributedClicks.toLocaleString()} clicks ` + 'arrived naming no destination, so they belong to no ' + 'row.'
+                        }) : null,
+                        truncated ? /*#__PURE__*/ _jsx(Typography, {
+                            variant: "caption",
+                            color: "text.secondary",
+                            children: `Across the ${result.read.toLocaleString()} emails this ` + 'page holds. The campaign has sent more.'
+                        }) : null
+                    ]
+                }) : /*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    color: "text.secondary",
+                    children: 'None of this campaign’s emails has recorded a followed ' + 'link yet.'
+                }) : null
+            ]
+        })
+    });
+}
+CampaignDestinationsSection.displayName = 'CampaignDestinationsSection';
+
+//# sourceMappingURL=campaign-reach-sections.js.map