@visns-studio/visns-components 6.20.1 → 6.23.0

package/src/components/vault/VaultShareModal.jsx

@@ -1,6 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
-import { Check, Copy, Link2, Loader2, ShieldAlert, Trash2 } from 'lucide-react';
+import {
+    AlertTriangle,
+    Check,
+    Copy,
+    Link2,
+    Loader2,
+    Mail,
+    ShieldAlert,
+    Trash2,
+} from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 import StandardModal from '../generic/StandardModal';
@@ -14,6 +23,8 @@ import {
     availableShareFields,
     initialShareFields,
     isShareRevocable,
+    shareEmailEnabled,
+    shareEmailIssue,
     shareFieldsLabel,
     shareRequestBody,
     shareStatus,
@@ -51,6 +62,19 @@ const STATUS_CLASS = {
  * the recipient reveals — never the seed. That is said on the checkbox, not
  * just in this comment, because it is the one thing about this dialog a person
  * could reasonably get wrong.
+ *
+ * EMAILING THE LINK is optional and changes none of the above. The server sends
+ * it at creation — the only moment the raw URL exists on that side — and the
+ * mail carries the entry's title, the link and its limits, never a value off
+ * the credential. Two consequences show up in this file:
+ *
+ *  - The URL is still shown here, always, exactly as before. An email is a
+ *    delivery, not a substitute for the one copy of the link, and a send that
+ *    quietly failed must not take the credential with it — which is why the
+ *    server answers 201 with `email_error` rather than an error status, and why
+ *    the success panel below reports either outcome next to a copyable URL.
+ *  - Whether the field appears at all is the server's call, read from
+ *    `meta.email_enabled` on the share list this modal already fetches.
  */
 const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
     const routes = useMemo(() => resolveVaultEndpoints(endpoints), [endpoints]);
@@ -60,6 +84,12 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
     const [fields, setFields] = useState(() => initialShareFields(entry));
     const [expiresInHours, setExpiresInHours] = useState(DEFAULT_EXPIRY_HOURS);
     const [maxViews, setMaxViews] = useState(null);
+    const [recipient, setRecipient] = useState('');
+
+    // Whether the server will email at all. Optimistic until the list answers:
+    // a field that flickers away is better than one that never appears because
+    // a request was slow, and the server refuses a recipient it did not offer.
+    const [emailEnabled, setEmailEnabled] = useState(true);
 
     const [creating, setCreating] = useState(false);
     // The one and only copy of a freshly minted URL. Held in component state
@@ -97,6 +127,9 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
                 if (!mountedRef.current) return;
 
                 setShares(Array.isArray(result?.data) ? result.data : []);
+                // The one place this modal can learn its own configuration:
+                // the list request it was already making.
+                setEmailEnabled(shareEmailEnabled(result));
                 setLoading(false);
             },
             null
@@ -120,6 +153,11 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
 
     const toggle = (key) => setFields((current) => toggleShareField(current, key));
 
+    // A typo caught here is a sentence under the field; the same typo caught by
+    // the server is a 422 — and the server validates before it mints, so no
+    // link is lost either way. This is politeness, not a control.
+    const emailIssue = emailEnabled ? shareEmailIssue(recipient) : null;
+
     const create = useCallback(() => {
         if (!entry?.id || fields.length === 0) return;
 
@@ -128,7 +166,15 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
         CustomFetch(
             routes.createShare(entry.id),
             'POST',
-            shareRequestBody({ fields, expiresInHours, maxViews }),
+            shareRequestBody({
+                fields,
+                expiresInHours,
+                maxViews,
+                // Never sent when the server said it does not email, so a
+                // stale tab cannot post a recipient into an installation that
+                // has switched it off.
+                recipientEmail: emailEnabled ? recipient : '',
+            }),
             (result) => {
                 if (!mountedRef.current) return;
 
@@ -150,7 +196,16 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
             // server's "this entry has no password to share".
             if (mountedRef.current) setCreating(false);
         });
-    }, [routes, entry, fields, expiresInHours, maxViews, load]);
+    }, [
+        routes,
+        entry,
+        fields,
+        expiresInHours,
+        maxViews,
+        recipient,
+        emailEnabled,
+        load,
+    ]);
 
     const copyUrl = useCallback(async () => {
         if (!created?.url) return;
@@ -240,6 +295,29 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
                             </button>
                         </div>
 
+                        {created.emailed_to && (
+                            <p className={styles.shareEmailed}>
+                                <Mail size={14} strokeWidth={2.2} aria-hidden="true" />
+                                <span>
+                                    Also emailed to{' '}
+                                    <strong>{created.emailed_to}</strong>. The
+                                    email carries this link and the entry's
+                                    title — none of the details themselves.
+                                </span>
+                            </p>
+                        )}
+
+                        {created.email_error && (
+                            <p className={styles.shareEmailFailed} role="alert">
+                                <AlertTriangle
+                                    size={14}
+                                    strokeWidth={2.2}
+                                    aria-hidden="true"
+                                />
+                                <span>{created.email_error}</span>
+                            </p>
+                        )}
+
                         <p className={styles.shareWarning}>
                             <ShieldAlert size={14} strokeWidth={2.2} aria-hidden="true" />
                             <span>
@@ -259,6 +337,10 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
                                 onClick={() => {
                                     setCreated(null);
                                     setCopied(false);
+                                    // A second link almost never goes to the
+                                    // same person, and a left-over address is
+                                    // how one quietly does.
+                                    setRecipient('');
                                 }}
                             >
                                 Create another
@@ -361,17 +443,56 @@ const VaultShareModal = ({ entry, endpoints, isOpen = true, onClose }) => {
                             </p>
                         </div>
 
+                        {emailEnabled && (
+                            <div className={styles.field}>
+                                <label
+                                    className={styles.label}
+                                    htmlFor="vault-share-recipient"
+                                >
+                                    Email the link to (optional)
+                                </label>
+                                <input
+                                    id="vault-share-recipient"
+                                    type="email"
+                                    className={styles.input}
+                                    value={recipient}
+                                    placeholder="name@example.com"
+                                    autoComplete="off"
+                                    spellCheck="false"
+                                    onChange={(e) => setRecipient(e.target.value)}
+                                />
+                                {emailIssue ? (
+                                    <p className={styles.fieldError}>{emailIssue}</p>
+                                ) : (
+                                    <p className={styles.help}>
+                                        Sent when you create the link. The email
+                                        carries the link and this entry's title —
+                                        never the username, password or code. You
+                                        still get the link here to copy.
+                                    </p>
+                                )}
+                            </div>
+                        )}
+
                         <div className={styles.formActions}>
                             <button
                                 type="button"
                                 className={styles.primaryButton}
                                 onClick={create}
-                                disabled={creating || fields.length === 0}
+                                disabled={
+                                    creating ||
+                                    fields.length === 0 ||
+                                    Boolean(emailIssue)
+                                }
                             >
                                 {creating && (
                                     <Loader2 size={15} className={styles.spin} />
                                 )}
-                                {creating ? 'Creating…' : 'Create link'}
+                                {creating
+                                    ? 'Creating…'
+                                    : recipient.trim() !== '' && emailEnabled
+                                      ? 'Create and email link'
+                                      : 'Create link'}
                             </button>
                             <button
                                 type="button"

package/src/components/vault/vaultShares.js

@@ -131,17 +131,69 @@ export const toggleShareField = (fields, key) => {
     return known.filter((field) => next.includes(field));
 };
 
+/**
+ * Whether this installation will email a link for the sender.
+ *
+ * Read off the share LIST response, which the modal already fetches when it
+ * opens — a second request to learn one boolean would be a round trip for
+ * nothing. Defaults to true when the key is absent, so a build talking to a
+ * server that predates the flag offers the field and lets the server refuse,
+ * rather than hiding a feature that is switched on.
+ *
+ * @param {object} listResponse the payload from `endpoints.shares(id)`
+ * @returns {boolean}
+ */
+export const shareEmailEnabled = (listResponse) => {
+    const flag = listResponse?.meta?.email_enabled;
+
+    return flag === undefined || flag === null ? true : Boolean(flag);
+};
+
+/**
+ * What is wrong with the typed recipient address, or null.
+ *
+ * Deliberately the loosest check that still catches a typo — something, an @,
+ * something with a dot in it. The server validates properly and is the only
+ * opinion that counts; this exists so that a mistyped address is a sentence
+ * under the field rather than a 422 toast after the link has already been
+ * minted.
+ *
+ * @param {string} value
+ * @returns {(string|null)}
+ */
+export const shareEmailIssue = (value) => {
+    const address = String(value ?? '').trim();
+
+    if (address === '') return null;
+
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(address)
+        ? null
+        : 'That does not look like an email address.';
+};
+
 /**
  * The body the create endpoint wants.
  *
  * `max_views` is omitted rather than sent as null when there is no limit: the
  * server treats an absent key and a null the same way, and a body that carries
- * only what was chosen is easier to read in a network panel.
+ * only what was chosen is easier to read in a network panel. `recipient_email`
+ * is omitted the same way when nobody is being mailed — a create request with
+ * no recipient key in it is a create request that cannot possibly send mail,
+ * which is worth being able to read off a network panel at a glance.
+ *
+ * A recipient name is only sent alongside an address: it is the greeting on the
+ * email and means nothing without one.
  *
- * @param {{fields: Array<string>, expiresInHours: number, maxViews: (number|null)}} choice
+ * @param {{fields: Array<string>, expiresInHours: number, maxViews: (number|null), recipientEmail?: string, recipientName?: string}} choice
  * @returns {object}
  */
-export const shareRequestBody = ({ fields, expiresInHours, maxViews } = {}) => {
+export const shareRequestBody = ({
+    fields,
+    expiresInHours,
+    maxViews,
+    recipientEmail,
+    recipientName,
+} = {}) => {
     const known = SHARE_FIELDS.map((field) => field.key);
     const clean = known.filter((field) => (fields || []).includes(field));
 
@@ -160,6 +212,18 @@ export const shareRequestBody = ({ fields, expiresInHours, maxViews } = {}) => {
         body.max_views = Math.round(views);
     }
 
+    const address = String(recipientEmail ?? '').trim();
+
+    if (address !== '') {
+        body.recipient_email = address;
+
+        const name = String(recipientName ?? '').trim();
+
+        if (name !== '') {
+            body.recipient_name = name;
+        }
+    }
+
     return body;
 };
 

package/src/index.js

@@ -178,6 +178,7 @@ import {
     clientRecipient,
     conversationCountLabel,
     describeTransport,
+    displayNumber,
     fillTemplate,
     groupMessagesByDay,
     initialsFor,
@@ -189,11 +190,37 @@ import {
     pickInitialThread,
     relativeTime,
     segmentCount,
+    smsHref,
     splitPersonName,
+    telHref,
     threadDisplayName,
     toE164,
 } from './components/sms/smsHelpers';
 
+// Zoom Phone presence — the header phone chip. ZoomPhoneBadge mounts through
+// Navigation's `renderers` slot and is the whole feature; the helpers are
+// exported for a consumer that wants the same roster somewhere else (a wall
+// board, say) without re-deriving what "available" means.
+import ZoomPhoneBadge from './components/phone/ZoomPhoneBadge';
+import useZoomPhoneLive from './components/phone/useZoomPhoneLive';
+import {
+    DEFAULT_ENDPOINTS as DEFAULT_PHONE_PRESENCE_ENDPOINTS,
+    makePhonePresenceEndpoints,
+    resolvePhonePresenceEndpoints,
+} from './components/phone/phonePresenceEndpoints';
+import {
+    STATUS as PHONE_PRESENCE_STATUS,
+    applyPresenceEvent,
+    callDuration,
+    callSummary,
+    freshnessLabel,
+    onCallCount,
+    orderRoster,
+    presenceNote,
+    statusLabel as phoneStatusLabel,
+    statusTone as phoneStatusTone,
+} from './components/phone/phonePresenceHelpers';
+
 // Desktop alerts — the browser Notification API behind three gates (support,
 // permission, the user's own switch). Used by the bell and the SMS badge; the
 // module is exported so a consumer can drive it from anywhere else too.
@@ -247,6 +274,30 @@ import SectionTypeSelector from './components/proposal/SectionTypeSelector';
 import VariableInserter from './components/proposal/VariableInserter';
 import ProposalTemplatePreview from './components/proposal/ProposalTemplatePreview';
 
+/**
+ * Page primitives.
+ *
+ * The scaffolding a bespoke screen is built out of — the strip of figures over a
+ * list, the underline tabs, the urgency bands, the header row and the band of
+ * facts under a record's title. Every one of them was written by hand on three
+ * or more CRM screens first, and had already drifted between them; see
+ * `styles/_surface.scss` for the two-level token scheme that lets a page with an
+ * existing palette adopt them without redrawing itself.
+ */
+import AnchoredMenu from './components/layout/AnchoredMenu';
+import BandedList, { Band } from './components/layout/BandedList';
+import FactsBand, { Fact } from './components/layout/FactsBand';
+import PageHeader from './components/layout/PageHeader';
+import ScrollRegion from './components/layout/ScrollRegion';
+import StatStrip, { Stat } from './components/layout/StatStrip';
+import useContainedHeight from './components/layout/useContainedHeight';
+import TabStrip from './components/navigation/TabStrip';
+
+// Copying, and what to do when the browser will not. Named for the vault
+// because that is where it was written; nothing in it is vault-specific, and
+// every screen with a copy button was otherwise restating it.
+import { canCopy, copyText } from './components/vault/vaultClipboard';
+
 /** OAuth Components */
 import OAuthManager from './components/oauth/OAuthManager';
 import OAuthProviderCard from './components/oauth/OAuthProviderCard';
@@ -254,7 +305,6 @@ import OAuthConnectionStatus from './components/oauth/OAuthConnectionStatus';
 import OAuthIntegrationsPage from './components/oauth/OAuthIntegrationsPage';
 import DataSyncWizard from './components/oauth/DataSyncWizard';
 
-
 export {
     applyUsernameDomain,
     AsyncSelect,
@@ -339,6 +389,42 @@ export {
     useSmsLive,
     UniversalSearch,
     useSmsThreads,
+    // Phone numbers, for display and for dialling. Beside the SMS module's own
+    // normaliser because that is the formatter they are built on.
+    displayNumber,
+    smsHref,
+    telHref,
+    // Zoom Phone presence — the header roster.
+    ZoomPhoneBadge,
+    useZoomPhoneLive,
+    DEFAULT_PHONE_PRESENCE_ENDPOINTS,
+    makePhonePresenceEndpoints,
+    resolvePhonePresenceEndpoints,
+    PHONE_PRESENCE_STATUS,
+    applyPresenceEvent,
+    callDuration,
+    callSummary,
+    freshnessLabel,
+    onCallCount,
+    orderRoster,
+    presenceNote,
+    phoneStatusLabel,
+    phoneStatusTone,
+    // Page primitives.
+    AnchoredMenu,
+    Band,
+    BandedList,
+    Fact,
+    FactsBand,
+    PageHeader,
+    ScrollRegion,
+    Stat,
+    StatStrip,
+    TabStrip,
+    useContainedHeight,
+    // Clipboard.
+    canCopy,
+    copyText,
     CameraPlacement,
     CellWithTooltip,
     clampOtp,
@@ -458,4 +544,4 @@ export {
     VariableInserter,
     verifyContactFor,
     Verify,
-};
+};