@autobusal/operator-routes 1.5.0 → 1.5.1

package/Locations/Withdraw/Withdraw.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
-import { FiAlertTriangle, FiCheck, FiCopy, FiUsers } from 'react-icons/fi';
+import { FiAlertTriangle, FiCheck, FiSend, FiUsers } from 'react-icons/fi';
 import { Button } from '@autobusal/common';
 import { success, notify } from '@autobusal/utilities';
 import { LocationData } from '@autobusal/providers/types/locations';
-import { useWithdrawCheck, useMoveOptions, useMovePassenger, AffectedPassenger } from '../services';
+import { useWithdrawCheck, useMoveOptions, useMovePassenger, useNotifyAffected, AffectedPassenger } from '../services';
 import {
   Overlay, Panel, Title, Lead, Table, Row, Cell, MoveOptions, Draft, DraftField,
-  Actions, Empty, Close
+  Actions, Empty, Close, Channels
 } from './styles';
 
 interface Props {
@@ -30,29 +30,62 @@ interface Props {
  * works through it: move each passenger to another stop, or cancel them, and
  * then withdraw.
  *
- * THE MESSAGE IS DRAFTED, NOT SENT. The wording is written in the route's
- * own language and shown here to be read and edited; sending it happens in
- * the broadcast composer, which the operator opens deliberately. Only they
- * know what is replacing the stop and whether a given passenger is being
- * moved or refunded, so a system that mailed people the moment a stop was
- * withdrawn would be writing an apology in their name.
+ * THE MESSAGE IS DRAFTED, NOT SENT AUTOMATICALLY. The wording is written in
+ * the route's own language and shown here to be read and edited; it goes out
+ * only when the operator presses send. Only they know what is replacing the
+ * stop and whether a given passenger is being moved or refunded, so mailing
+ * people the moment a stop was withdrawn would be writing an apology in
+ * their name.
+ *
+ * IT GOES TO THE AFFECTED BOOKINGS AND NOBODY ELSE. The recipient list is
+ * never posted from here - obtapi resolves it from the stop, so the people
+ * told are exactly the people in the table above. Routing this through the
+ * broadcast composer instead would address a route and a date, reaching
+ * passengers boarding two towns away whose journey has not changed, and
+ * telling them a stop had changed would be a support call and doubt about a
+ * ticket that was never affected.
  */
 const Withdraw = ({ routeId, location, t, onClose, onWithdraw, onReload }: Props): JSX.Element => {
   const { data, isLoading, refetch } = useWithdrawCheck(routeId, location.id, true);
 
   const [ subject, setSubject ] = useState<string | null>(null);
   const [ message, setMessage ] = useState<string | null>(null);
+  const [ channels, setChannels ] = useState<string[]>([]);
+  const [ notified, setNotified ] = useState<boolean>(false);
 
   const passengers = data?.passengers ?? [];
   const draft = data?.draft ?? null;
+  const reach = data?.reach ?? {};
+
+  const { mutate: Notify, isPending: isSending } = useNotifyAffected(routeId);
+
+  const toggle = (key: string): void => {
+    setChannels(current => current.includes(key)
+      ? current.filter(item => item !== key)
+      : [ ...current, key ]);
+  };
+
+  const send = (): void => {
+    if (channels.length === 0) {
+      notify(t('locations_manage.withdraw.draft.pick_channel', { ns: 'common' }));
 
-  const copy = (): void => {
-    const text = `${ subject ?? draft?.subject ?? '' }\n\n${ message ?? draft?.message ?? '' }`;
+      return;
+    }
 
-    navigator.clipboard?.writeText(text).then(
-      () => success(t('locations_manage.withdraw.draft.copied', { ns: 'common' })),
-      () => notify(t('locations_manage.withdraw.draft.copy_failed', { ns: 'common' }))
-    );
+    Notify({
+      location_id: location.id,
+      subject: subject ?? draft?.subject ?? '',
+      message: message ?? draft?.message ?? '',
+      channels
+    }, {
+      onSuccess: (results) => {
+        const sent = Object.values(results ?? {}).reduce((total, row) => total + (row?.sent ?? 0), 0);
+
+        success(t('locations_manage.withdraw.draft.sent', { ns: 'common', count: sent }));
+
+        setNotified(true);
+      }
+    });
   };
 
   return (
@@ -132,9 +165,28 @@ const Withdraw = ({ routeId, location, t, onClose, onWithdraw, onReload }: Props
                   />
                 </DraftField>
 
-                <button type="button" onClick={ copy }>
-                  <FiCopy />
-                  { t('locations_manage.withdraw.draft.copy', { ns: 'common' }) }
+                { /* how many of the affected passengers each channel can
+                     actually reach, so the operator sees that WhatsApp would
+                     get two of nine BEFORE choosing it, not after */ }
+                <Channels>
+                  { Object.entries(reach).map(([ key, row ]) => (
+                    <label key={ key }>
+                      <input
+                        type="checkbox"
+                        checked={ channels.includes(key) }
+                        onChange={ () => toggle(key) }
+                      />
+                      { t(`admin_label.manage.options_notifications.${ key }`, { ns: 'common', defaultValue: key }) }
+                      <span>{ t('locations_manage.withdraw.draft.reach', { ns: 'common', count: row.count }) }</span>
+                    </label>
+                  )) }
+                </Channels>
+
+                <button type="button" disabled={ isSending || notified } onClick={ send }>
+                  <FiSend />
+                  { notified
+                    ? t('locations_manage.withdraw.draft.already_sent', { ns: 'common' })
+                    : t('locations_manage.withdraw.draft.send', { ns: 'common', count: passengers.length }) }
                 </button>
 
                 <span>

package/Locations/Withdraw/styles.ts

@@ -194,6 +194,34 @@ export const DraftField = styled.div`
   }
 `;
 
+/*
+ * The channel tick boxes, each showing how many of the AFFECTED passengers
+ * it can reach - so an operator can see that WhatsApp would get two of nine
+ * before choosing it rather than after.
+ */
+export const Channels = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-bottom: 12px;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: ${ props => props.theme.size.xs };
+    cursor: pointer;
+  }
+
+  input {
+    margin: 0;
+  }
+
+  span {
+    opacity: .65;
+  }
+`;
+
 export const Actions = styled.div`
   display: flex;
   align-items: center;

package/Locations/services.ts

@@ -210,7 +210,7 @@ export interface AffectedPassenger {
 export interface WithdrawDraft {
   subject: string
   message: string
-  /** travel dates the affected bookings fall on - one broadcast per date */
+  /** travel dates the affected bookings fall on */
   dates: string[]
   recipients: { order_id: number, order_number: string, name: string | null, email: string | null, phone: string | null, date_travel: string | null }[]
 }
@@ -223,7 +223,10 @@ export interface MoveOption {
   fare: string | number
 }
 
-export const useWithdrawCheck = (routeId: number, locationId: number, enabled: boolean): UseQueryResult<{ passengers: AffectedPassenger[], draft: WithdrawDraft | null }> => (
+/** how many of the affected passengers each channel can actually reach */
+export type ChannelReach = Record<string, { count: number, subject: boolean }>
+
+export const useWithdrawCheck = (routeId: number, locationId: number, enabled: boolean): UseQueryResult<{ passengers: AffectedPassenger[], draft: WithdrawDraft | null, reach: ChannelReach }> => (
   useQuery({
     queryKey: ['operator-location-passengers', { routeId, locationId }],
     enabled,
@@ -268,3 +271,25 @@ export const useRestoreLocation = (routeId: number): UseMutationResult<void, Err
     )
   })
 );
+
+/**
+ * Send the approved message to the affected passengers - and only them.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * The recipient list is NOT sent: obtapi resolves it from the stop, so the
+ * people told are exactly the people the panel listed when the operator read
+ * the wording. Deliberately not the broadcast composer, which addresses a
+ * route and a date and would also reach passengers boarding two towns away
+ * whose journey has not changed.
+ */
+export const useNotifyAffected = (routeId: number): UseMutationResult<Record<string, { sent: number, failed: number }>, Error, { location_id: number, subject: string, message: string, channels: string[] }, unknown> => (
+  useMutation({
+    mutationKey: ['operator-location-notify', { routeId }],
+    mutationFn: async (data) => (
+      await apiClient
+        .post('/api/locations/operator/notify', { id: routeId, ...data })
+        .then(response => response.data)
+    )
+  })
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/operator-routes",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"