@visns-studio/visns-components 6.32.3 → 6.34.0

package/src/components/sms/SmsInbox.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
     Inbox,
     Loader2,
+    Megaphone,
     MessageSquare,
     PenSquare,
     Unplug,
@@ -103,6 +104,13 @@ const SmsInboxInner = ({
     echo = null,
     channelFor = defaultChannelFor,
     settingsUrl = '/settings/sms',
+    // Opt-in, and absent by default: a deployment with no campaigns screen
+    // must not grow a link to one. Drawn beside the settings link rather than
+    // beside "New message", because a campaign is somewhere you GO and a new
+    // message is something you DO — and it is deliberately a ghost button
+    // rather than a second primary, since the inbox's own primary action is
+    // still writing to one person.
+    campaignsUrl = null,
     clientUrl = (id) => `/clients/${id}`,
     // Both opt-in, both handed straight to the conversation pane — see
     // SmsThreadPanel for the shapes. Absent, this page is exactly what it was.
@@ -301,6 +309,16 @@ const SmsInboxInner = ({
                 </div>
 
                 <div className={styles.headActions}>
+                    {campaignsUrl && (
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={() => navigate(campaignsUrl)}
+                        >
+                            <Megaphone size={14} strokeWidth={2} aria-hidden="true" />
+                            Campaigns
+                        </button>
+                    )}
                     {canManage && (
                         <button
                             type="button"

package/src/components/sms/SmsThreadPanel.jsx

@@ -12,6 +12,7 @@ import {
     ArrowLeft,
     CheckSquare,
     ChevronUp,
+    CircleSlash,
     ExternalLink,
     FileText,
     Link2,
@@ -1054,6 +1055,25 @@ const SmsThreadPanel = ({
                 </div>
             ) : (
             <div className={styles.composer}>
+                {/*
+                  * Opted out of CAMPAIGNS, which is not the same thing as
+                  * opted out of being spoken to.
+                  *
+                  * Nothing is disabled and nothing should be: this person
+                  * texted us, and refusing to let a member of staff answer a
+                  * question because a bulk send would skip them is the wrong
+                  * answer to the wrong question. What the line does is say so,
+                  * once, in the muted register — so a reply here is a decision
+                  * somebody made rather than one they made unaware.
+                  */}
+                {thread?.opted_out && (
+                    <p className={styles.optedOutNote}>
+                        <CircleSlash size={13} strokeWidth={2} aria-hidden="true" />
+                        This number has opted out of messages. A reply is still allowed,
+                        but Zoom blocks texts to them until they reply START.
+                    </p>
+                )}
+
                 <div className={styles.composerBox}>
                     <textarea
                         ref={composerRef}

package/src/components/sms/smsEndpoints.js

@@ -36,6 +36,29 @@ export const makeSmsEndpoints = (base = '/ajax/sms') => ({
     templates: `${base}/templates`,
     template: (id) => `${base}/templates/${id}`,
 
+    // Bulk sends. `campaigns` is both the list and the create; everything else
+    // hangs off one campaign's id.
+    //
+    // `campaignPreview` is a POST that only reads, and it is a route rather
+    // than a client-side render on purpose: the server owns what `{first_name}`
+    // means, and a composer that filled the tokens itself would show a message
+    // that differed from the one that went out on any placeholder the two
+    // implementations disagreed about.
+    campaigns: `${base}/campaigns`,
+    campaignPreview: `${base}/campaigns/preview`,
+    campaign: (id) => `${base}/campaigns/${id}`,
+    campaignRecipients: (id) => `${base}/campaigns/${id}/recipients`,
+    campaignStart: (id) => `${base}/campaigns/${id}/start`,
+    campaignPause: (id) => `${base}/campaigns/${id}/pause`,
+    campaignCancel: (id) => `${base}/campaigns/${id}/cancel`,
+    campaignRetryFailed: (id) => `${base}/campaigns/${id}/retry-failed`,
+
+    // Numbers that must not be sent to again. Kept beside campaigns because a
+    // bulk send is the only place the list is applied in anger, but an opt-out
+    // is a fact about the number and outlives every campaign that honoured it.
+    optOuts: `${base}/opt-outs`,
+    optOut: (id) => `${base}/opt-outs/${id}`,
+
     settingsLines: `${base}/settings/lines`,
     settingsLine: (id) => `${base}/settings/lines/${id}`,
 });

package/src/components/styles/DataGrid.module.scss

@@ -478,6 +478,28 @@
     }
 }
 
+/* A row action that is PRESENT but not permitted on this row — `disabled` on a
+   settings entry (see resolveRowActionDisabled in utils/rowActionSettings.js).
+   The icon stays in the cell so the column does not change shape from row to
+   row; it simply stops being an offer.
+
+   POINTER EVENTS ARE NOT TURNED OFF, and that is deliberate rather than an
+   omission: the whole value of this over `condition` is the tooltip that says
+   why, and a glyph with `pointer-events: none` can never be hovered to show
+   one. The click is swallowed in JS instead, where it can also be stopped from
+   reaching the row underneath. */
+.vs-action--disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+
+    /* The hover tint below would otherwise say the icon is still live. */
+    .tdaction,
+    .tdaction:hover {
+        cursor: not-allowed;
+        color: #6b7280;
+    }
+}
+
 .uploadSection {
     margin-bottom: 16px;
     border-bottom: 1px solid #e5e7eb;

package/src/components/styles/Form.module.scss

@@ -336,6 +336,16 @@ input[type='file'] {
     justify-content: space-between;
     gap: var(--spacing-md);
     padding: var(--spacing-md) var(--spacing-lg);
+    /* STUCK TO THE TOP OF THE PANEL. The dialog is one scroll region now (see
+       `.modal__content` below and StandardModal.module.scss), and in a single
+       scroller a header that is not sticky is a header that scrolls away —
+       taking the close button with it, which on a phone is the only obvious
+       way out of the dialog. Opaque, or the form scrolls through it. */
+    position: sticky;
+    top: 0;
+    /* Above the form's own sticky button bar, which is 2. */
+    z-index: 3;
+    background: var(--tertiary-color);
 
     h1 {
         /* Was --secondary-color, the same red that means destructive
@@ -418,12 +428,25 @@ input[type='file'] {
     }
 }
 
+/* ONE SCROLL REGION PER DIALOG, and it is the panel — not this.
+ *
+ * This used to be `max-height: 85vh; overflow-y: auto` INSIDE a panel that was
+ * also `max-height: 85vh; overflow-y: auto`, so a dialog had two nested
+ * scrollers of the same height. The form's Save bar is `position: sticky;
+ * bottom: 0`, which sticks it to the bottom of the INNER box — and the inner
+ * box starts below the header, so its bottom edge sits below the bottom of the
+ * outer one. The bar was therefore off-screen until the outer region had been
+ * scrolled as well: reach the end of the form, and Save is still not there.
+ * On a phone, where the sheet was `100vh` against a shorter visual viewport,
+ * it could not be reached at all.
+ *
+ * With the cap and the overflow gone this is ordinary content in the panel's
+ * scroller, the header above it is sticky and the button bar below it is
+ * sticky, and both stay on screen at every height. */
 .modal__content {
     width: 100%;
     position: relative;
     padding: 1rem;
-    max-height: 85vh;
-    overflow-y: auto;
     min-height: 400px;
 
     .btn {
@@ -675,3 +698,78 @@ input[type='file'] {
             color-mix(in srgb, var(--highlight-color, #3cbf7d) 30%, transparent);
     }
 }
+
+/* ============================================================================
+ * The dialog on a phone
+ * ----------------------------------------------------------------------------
+ * The panel's own shape is StandardModal.module.scss's job — full width, a
+ * bottom sheet, `100dvh`. What is left is what the panel CONTAINS, and all of
+ * it is inside a `max-width: 640px` query, so not one declaration applies to
+ * the desktop dialog.
+ *
+ * The field grid needs nothing: `.formcontainer` is a `container-type:
+ * inline-size` container and `size: "half"` / `"quarter"` already collapse to
+ * one track at 640px of CONTAINER width, which a full-width phone panel always
+ * is. See the block at the top of this file.
+ * ==========================================================================*/
+@media (max-width: 640px) {
+    /* 400px of empty white under a two-line confirm dialog, on a screen with
+       maybe 700 to spend. The panel is bounded and scrolls; the content does
+       not need a floor. */
+    .modal__content {
+        min-height: 0;
+        padding: 0.875rem;
+    }
+
+    .modal__header {
+        padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+
+        h1 {
+            /* One step down: a 1.125rem title beside a 44px close button wraps
+               to two lines on a 390px screen. */
+            font-size: var(--font-size-md, 1rem);
+        }
+    }
+
+    /* A 32px target is a miss. 2.75rem is the 44px Apple and Google both
+       publish, and it is the only way out of a dialog that fills the screen. */
+    .modal__close {
+        width: 2.75rem;
+        height: 2.75rem;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+    }
+
+    /* The bar keeps its full-bleed margins against the smaller padding above,
+       or it sits inset from the panel edges by the difference. */
+    .buttonContainer {
+        margin: 1rem -0.875rem -0.875rem;
+        padding: 0.75rem 0.875rem;
+        /* Both buttons reachable with one thumb; Save stays on the right. */
+        gap: 0.5rem;
+    }
+}
+
+/* ============================================================================
+ * iOS zooms the page when a control smaller than 16px takes focus
+ * ----------------------------------------------------------------------------
+ * Not a preference and not configurable: Safari on iPhone zooms to the focused
+ * field whenever its computed font-size is below 16px, and it does not zoom
+ * back out. The form's controls are `--font-size-sm` (13px), so every tap into
+ * a field in a dialog scaled the page up and left the user pinching back.
+ *
+ * Scoped to a coarse pointer as well as to the width, so a 640px-wide desktop
+ * window keeps the type scale it has always had — this is a fix for a touch
+ * keyboard, not for a narrow window. Scoped to the dialog because that is
+ * where the complaint is; a page form on a phone is a separate question with a
+ * separate blast radius.
+ * ==========================================================================*/
+@media (max-width: 640px) and (pointer: coarse) {
+    .modalwrap {
+        input:not([type='checkbox']):not([type='radio']),
+        select,
+        textarea {
+            font-size: 16px;
+        }
+    }
+}

package/src/components/styles/Navigation.module.scss

@@ -320,10 +320,22 @@
                 color: #fff;
             }
 
+            /* THE HEADER BAR'S ICONS ONLY, and the two hiding declarations
+               have moved out of here for it — see `.hwrap .app-nav … svg` at
+               the foot of this file.
+
+               `.app-nav` is not a header class. The same list class is used by
+               the top bar and by the sidebar rail, so a bare `svg { display:
+               none }` in here reached the rail as well and hid every icon
+               `renderNav` draws for the `cms` / `simple` layouts. It was not
+               even a fight the rail could win on specificity: the rail's own
+               svg rule is five classes deep and outranks this one easily, but
+               it only ever set `position`, `right`, `opacity` and `color` — it
+               never mentioned `display`, so there was nothing for the higher
+               specificity to override and `display: none` simply applied. That
+               is the whole bug: a blank rail, expanded and collapsed alike. */
             svg {
                 color: var(--secondary-color);
-                display: none;
-                visibility: hidden;
             }
 
             /* The current page: a filled pill AND the rule below. The pill
@@ -782,8 +794,14 @@
        centre. The anchor is the chip itself, and the pill stays INSIDE its
        box: the chip row is a scroll container (see the overflow comment
        below), and a scroll container clips both axes — a pill overhanging
-       the edge by 2px rendered as a numberless green sliver. */
-    > ul > li > a {
+       the edge by 2px rendered as a numberless green sliver.
+
+       `:not([data-nav-overlay] *)` for the same reason every other rule in
+       this block carries it (see the long note below): a popover mounted in
+       the cluster advertises itself with `data-nav-overlay`, and a link in
+       ITS list is not a chip — this rule was pinning any `.nav-badge` inside
+       one to the corner of its row. */
+    > ul > li > a:not([data-nav-overlay] *) {
         position: relative;
 
         .nav-badge {
@@ -1272,6 +1290,9 @@
                         display: flex;
                         flex-wrap: nowrap;
                         align-items: center;
+                        /* Icon, then label. Only pays for itself when there is
+                           an icon: a row with one child has no gap to draw. */
+                        gap: 0.6rem;
                         color: var(--tertiary-color);
                         box-sizing: border-box;
                         padding: 0.5rem 1rem;
@@ -1285,11 +1306,30 @@
 
                     svg {
                         position: relative;
-                        right: 8px;
+                        /* Was `right: 8px` — a nudge that made sense while
+                           these rows were text only and the occasional icon
+                           was hidden anyway. With the icon drawn it pulls the
+                           glyph into the row's left padding and out of line
+                           with the rows above and below it. The space between
+                           the icon and the label is the `gap` on the row now,
+                           which is what it should have been. */
+                        right: 0;
                         opacity: 1;
                         transition: opacity 0.65s
                             cubic-bezier(0.25, 0.8, 0.25, 1);
                         color: var(--secondary-color);
+                        /* STATED, not assumed. Something else in this file
+                           used to hide these (see the `.hwrap` note), and the
+                           reason it could is that this rule never said what
+                           `display` a rail icon has. It says so now, so the
+                           rail cannot be blanked by a rule it outranks. */
+                        display: block;
+                        visibility: visible;
+                        /* An 18px glyph in a flex row shrinks with the row
+                           unless it refuses to; a label long enough to squeeze
+                           it is a label that would otherwise take the icon's
+                           width and leave nothing. */
+                        flex: 0 0 auto;
                     }
 
                     &:hover a,
@@ -2469,3 +2509,280 @@ $drawer-top: var(
         padding-right: var(--spacing-sm, 0.5rem);
     }
 }
+
+/* ============================================================================
+ * The collapsible rail (sidebar layouts, desktop only)
+ * ----------------------------------------------------------------------------
+ * The rail costs `--sidebar-width` of every page, permanently, to show a
+ * handful of words. Collapsed, it is an icon strip and the page gets the rest
+ * back; the tooltips the rows now carry become the labels (they are rendered
+ * only in this state — see Navigation.jsx).
+ *
+ * ONE LEVER does the geometry: `--sidebar-width` is REDEFINED on the root when
+ * the rail is collapsed. The rail's own `width`, the content's `margin-left`
+ * and everything else in the product that already sizes itself against that
+ * variable follow with no second rule to keep in step — and an app that has
+ * retuned `--sidebar-width` keeps its own expanded width, because only the
+ * collapsed value is stated here.
+ *
+ *   --sidebar-collapsed-width   the icon strip's width.       default: 64px
+ *
+ * The state lives on `<html>` as `data-nav-collapsed="true"`, written by
+ * Navigation from a preference remembered in localStorage (see
+ * utils/navCollapsed.js). ABSENT IS EXPANDED, so an app that has never had the
+ * toggle clicked matches not one selector in this block.
+ *
+ * EVERYTHING IS INSIDE `min-width: 1025px`. Below that the rail is the mobile
+ * drawer — a panel that slides over the page and is dismissed by tapping the
+ * backdrop — where there is no width to reclaim and no room for a second
+ * dismissal mechanism. The drawer is untouched by every rule here, and the
+ * component refuses to apply the state there as well (`railCollapsed`).
+ * ==========================================================================*/
+
+/* `.nav-label` — the label a collapsed row hides — deliberately has NO rule of
+   its own here. On the nav rows it exists only while the rail is collapsed
+   (Navigation.jsx emits the bare text node otherwise), and on the action rows
+   it is the span those rows have always rendered, now merely named. Giving it
+   so much as a `min-width` would be a declaration applying to an expanded rail
+   that was not applying to it before. The only rules that touch it are inside
+   the collapsed block below. */
+
+/* The stand-in for a row with no icon. Rendered only while collapsed, so this
+   never appears beside an expanded label. */
+.nav-initial {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.14);
+    color: var(--secondary-color);
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+/* Hidden by default, in both senses: the header layout has no rail, and below
+   1024px the rail is a drawer. Only the block below turns it on. */
+.rail-toggle {
+    display: none;
+}
+
+@media (min-width: 1025px) {
+    :root[data-nav-collapsed='true'] {
+        --sidebar-width: var(--sidebar-collapsed-width, 64px);
+    }
+
+    /* The only two properties that move, so the two move together. */
+    .aside--cms {
+        transition: width var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    .content {
+        transition: margin-left var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    /* The toggle sits ON the logo plate, absolutely positioned against it, so
+       an expanded rail is laid out exactly as it was — the logo stays centred
+       in the plate and nothing is pushed anywhere. */
+    .aside--cms .logo .rail-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 50%;
+        right: 4px;
+        transform: translateY(-50%);
+        width: 26px;
+        height: 26px;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        border: none;
+        border-radius: var(--br);
+        background: transparent;
+        /* The plate is the near-white band, so the ink is the page's, not the
+           rail's white-on-dark. */
+        color: var(--primary-color, #1b3933);
+        opacity: 0.5;
+        cursor: pointer;
+        appearance: none;
+        transition: opacity var(--speed, 0.18s) var(--ease, ease),
+            background-color var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    .aside--cms .logo .rail-toggle:hover,
+    .aside--cms .logo .rail-toggle:focus-visible {
+        opacity: 1;
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
+    }
+
+    :root[data-nav-collapsed='true'] {
+        /* With no square mark the plate holds the toggle alone (the link is
+           not rendered), so it centres rather than hugging an edge. With one,
+           the mark keeps clear of it. */
+        .aside--cms .logo .rail-toggle {
+            right: 50%;
+            transform: translate(50%, -50%);
+        }
+
+        .aside--cms .logo a {
+            max-width: calc(100% - 26px);
+            margin-right: 24px;
+        }
+
+        .aside--cms .logo a img {
+            max-width: 100%;
+            max-height: calc(var(--nav-logo-height, 50px) - 12px);
+        }
+
+        .aside--cms .logo:has(a) .rail-toggle {
+            right: 2px;
+            transform: translateY(-50%);
+        }
+
+        /* --- the nav rows ------------------------------------------------ */
+        /* The rail's own rules are five classes deep
+           (`.aside--cms .awrap .navwrap .app-nav .nav-item a`), so these
+           carry the same chain rather than relying on source order to win a
+           specificity tie. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item {
+            padding: 0.15rem 0.35rem;
+        }
+
+        .aside--cms .awrap .navwrap .app-nav .nav-item > a,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > button,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > span {
+            justify-content: center;
+            gap: 0;
+            padding: 0.6rem 0;
+        }
+
+        /* The rail nudges a row's icon 8px left to sit under the label's
+           optical start. Centred in a square there is no label to sit under. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item > a > svg,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > button > svg,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > span > svg {
+            right: 0;
+        }
+
+        /* A two-level menu has nowhere to open in a 64px strip; tapping a
+           group expands the rail instead (see Navigation.jsx). */
+        .aside--cms .navDropdown,
+        .aside--cms .awrap .navwrap .app-nav .nav-item > ul {
+            display: none;
+        }
+
+        /* --- the pinned action rows -------------------------------------- */
+        .rail-actions > ul > li {
+            padding: 0.15rem 0.35rem;
+        }
+
+        .rail-actions > ul > li > a,
+        .rail-actions > ul > li > button,
+        .rail-actions > ul > li > div > a,
+        .rail-actions > ul > li > div > button {
+            justify-content: center;
+            gap: 0;
+            padding: 0.6rem 0;
+        }
+
+        /* A mounted component's label is a `::after` fed by
+           `--nav-action-label` (the account switcher, the vault palette). It
+           is the same label the row's tooltip now carries. */
+        .rail-actions > ul > li > div > a::after,
+        .rail-actions > ul > li > div > button::after {
+            display: none;
+        }
+
+        /* Every visible label, gone — but still in the accessibility tree.
+           `clip-path` plus a 1px box is the treatment that survives being
+           inside a flex row; `display: none` would take it out of the
+           accessible name as well.
+
+           TWO SELECTORS, and the long one is not decoration. This rail styles
+           `span` as a descendant of `.nav-item`, five classes deep
+           (`.aside--cms .awrap .navwrap .app-nav .nav-item span` — the rule
+           belongs to the group heading, which used to be a `<span>`), and it
+           sets a background, a display and 1.25em of padding. A one-class
+           `.nav-label` loses that cascade outright, which is a full-width
+           `--primary-color` block where a hidden label should be. The action
+           rows have no such rule, so the short selector is enough for them. */
+        .nav-label {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .aside--cms .awrap .navwrap .app-nav .nav-item .nav-label {
+            display: block;
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+            border: 0;
+            background: none;
+        }
+
+        /* Same cascade, same answer: the initial is a `<span>` inside a
+           `.nav-item` too, so every property that makes it a circle has to be
+           restated above that rule rather than inherited from the one-class
+           definition at the top of this block. */
+        .aside--cms .awrap .navwrap .app-nav .nav-item .nav-initial {
+            display: inline-flex;
+            position: static;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: 22px;
+            height: 22px;
+            margin: 0;
+            padding: 0;
+            border: none;
+            border-radius: 50%;
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.14);
+            color: var(--secondary-color);
+            font-size: 0.75rem;
+            font-weight: 700;
+            line-height: 1;
+            text-align: center;
+        }
+    }
+}
+
+/* ============================================================================
+ * The header bar hides its nav icons — and only the header bar
+ * ----------------------------------------------------------------------------
+ * This pair used to live inside `.app-nav .nav-item { svg { … } }`, which is a
+ * class BOTH layouts use: the one-line bar across the top and the sidebar rail
+ * down the left. So the bar's decision — the bar is a row of words, and an icon
+ * per word at that density is noise — was silently taken for the rail as well,
+ * where the icon is the point and, once collapsed, the only thing in the row.
+ *
+ * `.hwrap` is the header layout's own root element (`layout="full"`); the
+ * sidebar layouts render `.cwrap > .aside--cms` and never match it. The
+ * `full` layout's ≤1024px drawer is inside `.hwrap` too, but it draws its rows
+ * through `.drawer-nav`, not `.app-nav`, so it is unaffected either way.
+ *
+ * Both declarations are kept exactly as they were, because the bar's rendering
+ * is not what was wrong.
+ * ==========================================================================*/
+.hwrap .app-nav .nav-item svg,
+.hwrap .app-nav .nav-item-alternate svg {
+    display: none;
+    visibility: hidden;
+}