@visns-studio/visns-components 6.32.3 → 6.34.3

package/src/components/sms/SmsInbox.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
     Inbox,
     Loader2,
-    MessageSquare,
+    Megaphone,
     PenSquare,
     Unplug,
     Search,
@@ -103,6 +103,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.
@@ -276,10 +283,8 @@ const SmsInboxInner = ({
         <div className={styles.inbox}>
             <div className={styles.inboxHead}>
                 <div className={styles.inboxHeading}>
-                    <h1 className={styles.pageTitle}>
-                        <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
-                        {pageTitle}
-                    </h1>
+                    {/* No icon: no other page title in a host CRM carries one. */}
+                    <h1 className={styles.pageTitle}>{pageTitle}</h1>
                     <p className={styles.pageIntro}>
                         Text messages sent and received on the practice's phone lines.
                         Replies come back to the line they were sent from.
@@ -301,6 +306,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/SmsLineSettings.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Loader2, MessageSquare, Plus, TriangleAlert, X } from 'lucide-react';
+import { Loader2, Plus, TriangleAlert, X } from 'lucide-react';
 import { toast } from 'react-toastify';
 
 import CustomFetch from '../Fetch';
@@ -264,10 +264,7 @@ const SmsLineSettings = ({
             {pageTitle !== null && (
                 <div className={styles.settingsHead}>
                     <div>
-                        <h1 className={styles.pageTitle}>
-                            <MessageSquare size={22} strokeWidth={2.2} aria-hidden="true" />
-                            {pageTitle}
-                        </h1>
+                        <h1 className={styles.pageTitle}>{pageTitle}</h1>
                         <p className={styles.pageIntro}>
                             A line is one Zoom Phone number and the staff who can see its
                             conversations. Everything staff send goes out from the line they

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;