@autobusal/operator-routes 1.4.0 → 1.5.1

package/Locations/Browse/Item.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
 import { Validate, Display, success } from '@autobusal/utilities';
@@ -7,6 +8,7 @@ import { Data } from './styles';
 import { LocationForm } from '../types';
 import { LocationData } from '@autobusal/providers/types/locations';
 import { usePostMove, useDeleteLocation, usePostUpdate } from '../services';
+import Withdraw from '../Withdraw/Withdraw';
 
 interface Props {
   routeId: number
@@ -38,11 +40,33 @@ const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
     });
   };
 
+  /*
+   * Edited: Claude - Date: 2026-08-21
+   *
+   * Removing a stop opens the withdrawal panel rather than deleting
+   * outright. obtapi cannot delete a location anything was ever sold
+   * through - an invoice or a refund still has to describe that sale years
+   * later - so it WITHDRAWS instead, and refuses while anybody holds a live
+   * ticket through the stop.
+   *
+   * The panel is where that refusal becomes actionable: it lists who is
+   * affected, offers each of them another stop, and drafts the message.
+   * Going straight to Delete would surface a 409 as a generic failure and
+   * leave the operator with no idea who was in the way.
+   */
+  const [ withdrawing, setWithdrawing ] = useState<boolean>(false);
+
   const onDelete = (): void => {
+    setWithdrawing(true);
+  };
+
+  const onWithdraw = (): void => {
     Delete({}, {
       onSuccess: () => {
         success(t('locations_manage.messages.deleted', { ns: 'common' }));
 
+        setWithdrawing(false);
+
         onReload();
       }
     });
@@ -50,6 +74,17 @@ const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
   
   return (
     <div className="box">
+      { withdrawing && (
+        <Withdraw
+          routeId={ routeId }
+          location={ item }
+          t={ t }
+          onClose={ () => setWithdrawing(false) }
+          onWithdraw={ onWithdraw }
+          onReload={ onReload }
+        />
+      ) }
+
       <h4>{ item.city.country?.name } &rsaquo; { item.city.name } &rsaquo; { item.stop?.name }</h4>
 
       <form onSubmit={ handleSubmit(onSubmit) }>

package/Locations/Withdraw/Withdraw.tsx

@@ -0,0 +1,287 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+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, useNotifyAffected, AffectedPassenger } from '../services';
+import {
+  Overlay, Panel, Title, Lead, Table, Row, Cell, MoveOptions, Draft, DraftField,
+  Actions, Empty, Close, Channels
+} from './styles';
+
+interface Props {
+  routeId: number
+  location: LocationData
+  t: TFunction<'normal'>
+  onClose: () => void
+  onWithdraw: () => void
+  onReload: () => void
+}
+
+/**
+ * Everything that has to happen before a stop can come off a route.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * obtapi refuses the withdrawal while anybody still holds a paid ticket
+ * through the stop for a journey that has not departed. That refusal is not
+ * a dead end - it comes back with the list, and this is where the operator
+ * works through it: move each passenger to another stop, or cancel them, and
+ * then withdraw.
+ *
+ * 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' }));
+
+      return;
+    }
+
+    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 (
+    <Overlay onClick={ onClose }>
+      <Panel className="box" onClick={ event => event.stopPropagation() }>
+        <Close type="button" onClick={ onClose }>&times;</Close>
+
+        <Title>
+          { t('locations_manage.withdraw.title', {
+            ns: 'common',
+            city: location.city?.name,
+            stop: location.stop?.name ?? ''
+          }) }
+        </Title>
+
+        { isLoading && <Lead>{ t('locations_manage.withdraw.checking', { ns: 'common' }) }</Lead> }
+
+        { (!isLoading && passengers.length === 0) && (
+          <>
+            <Empty>
+              <FiCheck />
+              { t('locations_manage.withdraw.clear', { ns: 'common' }) }
+            </Empty>
+
+            <Actions>
+              <Button text={ t('locations_manage.withdraw.action', { ns: 'common' }) } onClick={ onWithdraw } noMargin />
+            </Actions>
+          </>
+        ) }
+
+        { (!isLoading && passengers.length > 0) && (
+          <>
+            <Lead>
+              <FiAlertTriangle />
+              { t('locations_manage.withdraw.blocked', { ns: 'common', count: passengers.length }) }
+            </Lead>
+
+            <Table>
+              <Row $head>
+                <Cell>{ t('locations_manage.withdraw.columns.booking', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.passenger', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.journey', { ns: 'common' }) }</Cell>
+                <Cell>{ t('locations_manage.withdraw.columns.resolve', { ns: 'common' }) }</Cell>
+              </Row>
+
+              { passengers.map(passenger => (
+                <Passenger
+                  key={ passenger.id }
+                  routeId={ routeId }
+                  passenger={ passenger }
+                  t={ t }
+                  onMoved={ () => { refetch(); onReload(); } }
+                />
+              )) }
+            </Table>
+
+            { draft && (
+              <Draft>
+                <h5><FiUsers />{ t('locations_manage.withdraw.draft.title', { ns: 'common' }) }</h5>
+                <p>{ t('locations_manage.withdraw.draft.hint', { ns: 'common' }) }</p>
+
+                <DraftField>
+                  <label>{ t('locations_manage.withdraw.draft.subject', { ns: 'common' }) }</label>
+                  <input
+                    type="text"
+                    value={ subject ?? draft.subject }
+                    onChange={ event => setSubject(event.target.value) }
+                  />
+                </DraftField>
+
+                <DraftField>
+                  <label>{ t('locations_manage.withdraw.draft.message', { ns: 'common' }) }</label>
+                  <textarea
+                    rows={ 8 }
+                    value={ message ?? draft.message }
+                    onChange={ event => setMessage(event.target.value) }
+                  />
+                </DraftField>
+
+                { /* 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>
+                  { t('locations_manage.withdraw.draft.dates', { ns: 'common', dates: draft.dates.join(', ') }) }
+                </span>
+              </Draft>
+            ) }
+          </>
+        ) }
+      </Panel>
+    </Overlay>
+  );
+};
+
+/**
+ * One affected booking, and the stops it could move to instead.
+ *
+ * The options are fetched only when the operator opens this row - a route
+ * with a dozen affected bookings would otherwise fire a dozen requests to
+ * draw a table nobody has looked at yet.
+ */
+const Passenger = ({ routeId, passenger, t, onMoved }: {
+  routeId: number
+  passenger: AffectedPassenger
+  t: TFunction<'normal'>
+  onMoved: () => void
+}): JSX.Element => {
+  const [ open, setOpen ] = useState<boolean>(false);
+
+  const { data: options } = useMoveOptions(routeId, passenger.id, passenger.affects, open);
+
+  const { mutate: Move, isPending } = useMovePassenger(routeId);
+
+  const move = (priceId: number): void => {
+    Move({ order_id: passenger.id, price_id: priceId }, {
+      onSuccess: () => {
+        success(t('locations_manage.withdraw.moved', { ns: 'common' }));
+
+        onMoved();
+      }
+    });
+  };
+
+  return (
+    <Row>
+      <Cell>
+        <strong>{ passenger.order_number }</strong>
+        <span>{ passenger.date_travel }</span>
+      </Cell>
+
+      <Cell>
+        <strong>{ passenger.name ?? '—' }</strong>
+        <span>{ passenger.email ?? passenger.phone ?? '' }</span>
+        { /* an agency booking is a different conversation - the operator
+             talks to the agent, who talks to the traveller */ }
+        { passenger.booked_by && (
+          <span>{ t('locations_manage.withdraw.booked_by', { ns: 'common', who: passenger.booked_by }) }</span>
+        ) }
+      </Cell>
+
+      <Cell>
+        { passenger.from } &rsaquo; { passenger.to }
+        <span>
+          { t(`locations_manage.withdraw.affects.${ passenger.affects }`, { ns: 'common' }) }
+        </span>
+      </Cell>
+
+      <Cell>
+        { !open && (
+          <button type="button" onClick={ () => setOpen(true) }>
+            { t('locations_manage.withdraw.move', { ns: 'common' }) }
+          </button>
+        ) }
+
+        { open && (
+          <MoveOptions>
+            { (options ?? []).length === 0 && (
+              <span>{ t('locations_manage.withdraw.nowhere', { ns: 'common' }) }</span>
+            ) }
+
+            { (options ?? []).map(option => (
+              <button
+                key={ option.price_id }
+                type="button"
+                disabled={ isPending }
+                onClick={ () => move(option.price_id) }
+              >
+                { option.city } { option.time && `· ${ option.time }` }
+              </button>
+            )) }
+          </MoveOptions>
+        ) }
+      </Cell>
+    </Row>
+  );
+};
+
+export default Withdraw;

package/Locations/Withdraw/styles.ts

@@ -0,0 +1,230 @@
+import styled from 'styled-components';
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 30px 15px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, .45);
+`;
+
+export const Panel = styled.div`
+  position: relative;
+  width: 100%;
+  max-width: 880px;
+`;
+
+export const Close = styled.button`
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  background: none;
+  border: 0;
+  font-size: 26px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: .6;
+`;
+
+export const Title = styled.h4`
+  margin-bottom: 10px;
+  padding-right: 30px;
+`;
+
+export const Lead = styled.p`
+  margin-bottom: 15px;
+  font-size: ${ props => props.theme.size.s };
+
+  svg {
+    margin-right: 6px;
+    vertical-align: -2px;
+  }
+`;
+
+export const Empty = styled.p`
+  margin-bottom: 15px;
+  font-size: ${ props => props.theme.size.s };
+
+  svg {
+    margin-right: 6px;
+    vertical-align: -2px;
+  }
+`;
+
+export const Table = styled.div`
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+export const Row = styled.div<{ $head?: boolean }>`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 4px;
+  padding: 10px 12px;
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+  background: ${ props => props.$head ? props.theme.background.neutral : 'transparent' };
+  font-weight: ${ props => props.$head ? 700 : 400 };
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  @media (min-width: 720px) {
+    grid-template-columns: 1.1fr 1.4fr 1.4fr 1.3fr;
+    gap: 12px;
+    align-items: start;
+  }
+`;
+
+export const Cell = styled.div`
+  font-size: ${ props => props.theme.size.xs };
+  min-width: 0;
+
+  strong {
+    display: block;
+  }
+
+  span {
+    display: block;
+    opacity: .7;
+    word-break: break-word;
+  }
+
+  > button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 4px 10px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+  }
+`;
+
+export const MoveOptions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+
+    &:disabled {
+      opacity: .5;
+      cursor: default;
+    }
+  }
+
+  span {
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+/*
+ * The message, shown to be read and edited - never sent from here. Styled as
+ * a working document rather than a warning: the operator is meant to rewrite
+ * it, not just approve it.
+ */
+export const Draft = styled.div`
+  margin-top: 20px;
+  padding: 14px 16px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: 4px;
+
+  h5 {
+    margin-bottom: 4px;
+
+    svg {
+      margin-right: 6px;
+      vertical-align: -2px;
+    }
+  }
+
+  > p {
+    margin-bottom: 12px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .8;
+  }
+
+  > button {
+    background: none;
+    border: 1px solid ${ props => props.theme.background.neutral };
+    border-radius: 3px;
+    padding: 5px 12px;
+    cursor: pointer;
+    font-size: ${ props => props.theme.size.xs };
+
+    svg {
+      margin-right: 6px;
+      vertical-align: -2px;
+    }
+  }
+
+  > span {
+    display: block;
+    margin-top: 8px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .7;
+  }
+`;
+
+export const DraftField = styled.div`
+  margin-bottom: 12px;
+
+  label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: ${ props => props.theme.size.xs };
+    opacity: .8;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+  }
+`;
+
+/*
+ * 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;
+  gap: 12px;
+  margin-top: 15px;
+`;

package/Locations/services.ts

@@ -180,3 +180,116 @@ export const useProposeStop = (): UseMutationResult<ProposeResponse, Error, Prop
     )
   })
 );
+
+/**
+ * The withdrawal flow.
+ *
+ * Claude - Date: 2026-08-21
+ *
+ * A stop is WITHDRAWN, not deleted - obtapi cannot delete one that anything
+ * was ever sold through, because an invoice or a refund still has to
+ * describe that sale years later. The visible behaviour is the same: it
+ * stops being sold, searched and mapped.
+ */
+export interface AffectedPassenger {
+  id: number
+  order_number: string
+  date_travel: string | null
+  departure: string | null
+  tickets: number
+  name: string | null
+  email: string | null
+  phone: string | null
+  booked_by: string | null
+  from: string | null
+  to: string | null
+  /** which end of THEIR journey this stop is */
+  affects: 'departure' | 'arrival'
+}
+
+export interface WithdrawDraft {
+  subject: string
+  message: string
+  /** 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 }[]
+}
+
+export interface MoveOption {
+  price_id: number
+  location_id: number
+  city: string | null
+  time: string | null
+  fare: string | number
+}
+
+/** 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,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/passengers', { params: { id: routeId, location_id: locationId } })
+        .then(response => response.data)
+    )
+  })
+);
+
+export const useMoveOptions = (routeId: number, orderId: number, end: string, enabled: boolean): UseQueryResult<MoveOption[]> => (
+  useQuery({
+    queryKey: ['operator-move-options', { routeId, orderId, end }],
+    enabled,
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/move/options', { params: { id: routeId, order_id: orderId, end } })
+        .then(response => response.data?.options ?? [])
+    )
+  })
+);
+
+export const useMovePassenger = (routeId: number): UseMutationResult<void, Error, { order_id: number, price_id: number }, unknown> => (
+  useMutation({
+    mutationKey: ['operator-move-passenger', { routeId }],
+    mutationFn: async (data) => (
+      await apiClient
+        .post('/api/locations/operator/move/passenger', { id: routeId, ...data })
+        .then(response => response.data)
+    )
+  })
+);
+
+export const useRestoreLocation = (routeId: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-location-restore', { routeId }],
+    mutationFn: async (locationId) => (
+      await apiClient
+        .post('/api/locations/operator/restore', { id: routeId, location_id: locationId })
+        .then(response => response.data)
+    )
+  })
+);
+
+/**
+ * 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.4.0",
+  "version": "1.5.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"