@autobusal/routes-order 1.9.3 → 1.11.3

package/styles.ts

@@ -23,6 +23,83 @@ export const Actions = styled.div`
   margin-top: 25px;
 `;
 
+/**
+ * The search form kept on screen while browsing results.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Changing a date or a city used to mean going Back to Search and losing
+ * your place. The form stays available above the results so an adjustment
+ * is one edit rather than a round trip.
+ */
+export const SearchAgain = styled.div<{ $background: string }>`
+  position: relative;
+  margin: -35px calc(50% - 50vw) 20px;
+  padding: 18px calc(50vw - 50%);
+  background-image: url('${ props => props.$background }');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  /**
+   * Same scrim as the homepage hero, for the same reason: the artwork a
+   * brand supplies may be light or dark, and the controls on top of it must
+   * read either way.
+   */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: rgba(0, 0, 0, .45);
+  }
+`;
+
+export const SearchInner = styled.div`
+  position: relative;
+`;
+
+export const SearchToggle = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  font-size: ${ props => props.theme.size.s };
+  font-weight: 700;
+  color: #FFF;
+  border: 1px solid rgba(255, 255, 255, .45);
+  border-radius: 100px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #FFF;
+    background: rgba(255, 255, 255, .12);
+  }
+`;
+
+export const SearchSummary = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Collapsed by default: the form is there for the minority who want to
+ * change something, and left open it pushed the results themselves below
+ * the fold on the page whose whole job is showing results.
+ */
+export const SearchPanel = styled.div<{ $open: boolean }>`
+  display: ${ props => props.$open ? 'block' : 'none' };
+  margin-top: 14px;
+  padding: 20px;
+  background: ${ props => props.theme.header.transparent };
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
 /**
  * Results layout: filters beside the list, not above it.
  *

package/types.ts

@@ -10,6 +10,30 @@ export interface FoundDay {
   from_price_display?: string | null
 }
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-01
+ * Alternatives offered when a search finds nothing - see obtapi's
+ * Routes\Search\Nearby.
+ */
+export interface NearbyCity {
+  city: {
+    id: number
+    name: string
+    slug: string
+  }
+  /** kilometres from the city the passenger actually asked for */
+  distance: number
+  routes: number
+  from_price: number
+  from_price_display: string
+}
+
+export interface AlternativesData {
+  from: NearbyCity[]
+  to: NearbyCity[]
+  dates: FoundDay[]
+}
+
 export interface CouponForm {
   code: string
 }

package/Step4/Step4.tsx

@@ -1,114 +0,0 @@
-import { TFunction } from 'i18next';
-import { useForm } from 'react-hook-form';
-import { HiUsers } from 'react-icons/hi';
-import { RiShoppingCartLine } from 'react-icons/ri';
-import { AiOutlineCaretLeft } from 'react-icons/ai';
-import { useBusOccupied } from '@autobusal/hooks';
-import { Button } from '@autobusal/common';
-import Steps from '../Steps/Steps';
-import Loading from './Loading';
-import Passengers from './Passengers/Passengers';
-import checkAge from './checkAge';
-import { Title, Actions } from '../styles';
-import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { PersonData } from '@autobusal/providers/types/persons';
-import { FoundData } from '@autobusal/providers/types/routes';
-
-interface Props {
-  values?: PersonData
-  step1: RoutesSearchForm
-  step2: FoundData
-  step3?: FoundData
-  isPartner?: boolean
-  t: TFunction<'common'>
-  onSave: (data: PersonData) => void
-  onBack: (step: number) => void
-}
-
-// Edited: Ferjolt Ozuni - Date: 2026-07-25
-// Routes without a passenger_fields config keep the pre-feature form
-const DEFAULT_FIELDS = ['sex', 'passport'];
-
-const Step4 = ({ values, step1, step2, step3, isPartner, t, onSave, onBack }: Props): JSX.Element => {
-  const { register, handleSubmit, formState: { errors }, setValue, setError } = useForm<PersonData>();
-
-  // Edited: Ferjolt Ozuni - Date: 2026-07-25
-  // one form serves both legs of a return trip, so it collects the UNION of
-  // what either route requires (mirrored by the backend rules)
-  const fields = Array.from(new Set([
-    ...(step2.trip?.passenger_fields ?? DEFAULT_FIELDS),
-    ...(step3 !== undefined ? (step3.trip?.passenger_fields ?? DEFAULT_FIELDS) : [])
-  ]));
-
-  // Edited: Ferjolt Ozuni - Date: 2026-07-27
-  // FoundData.id is widened to (number | string) for external-provider
-  // offers (Mode A: search + redirect), but those never reach Step4 -
-  // Found/Route.tsx's CTA opens the provider's click-out link for them
-  // instead of calling onSave, so a real local numeric id is guaranteed here.
-  const busFrom = useBusOccupied(step1.departure, step2.id as number);
-  const busTo = useBusOccupied(step1._return, step3?.id as (number | undefined));
-
-  if (busFrom === undefined || busTo === undefined) {
-    return <Loading t={ t } />;
-  }
-
-  const onSubmit = (data: PersonData): void => {
-    // if all the ages are ok, we move forward
-    if (checkAge(step1, data, t)) {
-      onSave(data);
-    }
-  };
-
-  const onUpdate = (name: string, value: (string | number)): void => {
-    setValue(name, value);
-    setError(name, {});
-  };
-
-  const onSendForm = (): void => {
-    handleSubmit(onSubmit)();
-  };
-
-  return (
-    <>
-      <Title>
-        <HiUsers />
-        { t('routes_order.step4.title') }
-      </Title>
-
-      <Steps value={ 4 } />
-
-      <Passengers
-        values={ values }
-        step1={ step1 }
-        fields={ fields }
-        busFrom={ busFrom }
-        busTo={ busTo }
-        t={ t }
-        errors={ errors }
-        refs={ register }
-        onUpdate={ onUpdate }
-      />
-
-      <Actions>
-        { isPartner === undefined && (
-          <Button
-            type="button"
-            subtype="secondary"
-            text={ <><AiOutlineCaretLeft /> { t('routes_order.step4.back') }</> }
-            noMargin
-            onClick={ () => onBack(step1._return ? 3 : 2) }
-          />
-        ) }
-
-        <Button
-          type="button"
-          text={ <><RiShoppingCartLine /> { t('routes_order.step4.next') }</> }
-          noMargin
-          onClick={ onSendForm }
-        />
-      </Actions>
-    </>
-  );
-};
-
-export default Step4;

package/Step5/Step5.tsx

@@ -1,185 +0,0 @@
-import { useCallback, useState } from 'react';
-import { TFunction } from 'i18next';
-import { useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import { RiShoppingCartLine } from 'react-icons/ri';
-import { AiOutlineCaretLeft } from 'react-icons/ai';
-import { MdDone } from 'react-icons/md';
-import { Button } from '@autobusal/common';
-import Steps from '../Steps/Steps';
-import Summary from './Summary/Summary';
-import Coupons from './Coupons/Coupons';
-import Addons from './Addons/Addons';
-import Billing from './Billing/Billing';
-import Payments from './Payments/Payments';
-import { getTotal, convertCoupon } from './utilities';
-import { Title, Actions } from '../styles';
-import { PersonData, BillingData } from '@autobusal/providers/types/persons';
-import { FoundData } from '@autobusal/providers/types/routes';
-import { CouponData } from '@autobusal/providers/types/orders';
-import { RoutesSearchForm } from '@autobusal/routes-search/types';
-import { TotalData } from '../types';
-import { useUserStore } from '@autobusal/providers/stores/user';
-import { useGetSettings } from '@autobusal/providers/services';
-import { usePostOrder } from '../services';
-
-interface Props {
-  step1: RoutesSearchForm
-  step2: FoundData
-  step3?: FoundData
-  step4: PersonData
-  isPartner?: boolean
-  t: TFunction<'common'>
-  onBack: (step: number) => void
-}
-
-const Step5 = ({ step1, step2, step3, step4, isPartner, t, onBack }: Props): JSX.Element => {
-  const [ coupon, setCoupon ] = useState<CouponData | undefined>(undefined);
-  const [ total, setTotal ] = useState<TotalData>(
-    getTotal(step2, step3)
-  );
-  const [ action, setAction ] = useState<string | undefined>(undefined);
-
-  const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
-  const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
-  const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
-
-  const { data: UserData } = useUserStore();
-  const { data: SettingsData } = useGetSettings();
-
-  const navigate = useNavigate();
-
-  const { register, handleSubmit, formState: { errors } } = useForm<BillingData>();
-
-  // Edited: Ferjolt Ozuni - Date: 2026-07-25
-  // Paid addons are priced/verified server-side (see obtapi's
-  // App\Libraries\Orders\Make\Addons) - this is only for the checkout
-  // summary display and the grand total shown before payment.
-  const currency = total.display.split(' ')[1] ?? '';
-
-  const addonItems = [
-    addonWhatsapp && SettingsData?.addons?.whatsapp.available ? {
-      label: t('routes_order.step5.addons.whatsapp.label'),
-      price: SettingsData.addons.whatsapp.price
-    } : null,
-    addonTelegram && SettingsData?.addons?.telegram.available ? {
-      label: t('routes_order.step5.addons.telegram.label'),
-      price: SettingsData.addons.telegram.price
-    } : null
-  ].filter((item): item is { label: string, price: number } => item !== null);
-
-  const addonsValue = addonItems.reduce((sum, item) => sum + item.price, 0);
-
-  const grandTotal: TotalData = {
-    display: `${ total.value + addonsValue } ${ currency }`,
-    value: total.value + addonsValue
-  };
-
-  const { mutate: OrderSend, isPending } = usePostOrder(step1, step2, step3, step4, coupon, action, {
-    whatsapp: addonWhatsapp,
-    whatsappNumber: addonWhatsappNumber,
-    telegram: addonTelegram
-  });
-
-  const onApplyCoupon = (data: CouponData): void => {
-    setTotal(
-      convertCoupon(data)
-    );
-
-    setCoupon(data);
-  };
-
-  const onAction = useCallback((action: string): void => {
-    setAction(action);
-  }, []);
-
-  const onSendForm = async (): Promise<void> => {
-    if (addonWhatsapp && addonWhatsappNumber.trim().length < 5) {
-      alert(t('routes_order.step5.addons.whatsapp.phone_error'));
-
-      return;
-    }
-
-    await handleSubmit(onSubmit)();
-  };
-
-  const onSubmit = (data: BillingData): void => {
-    OrderSend(data, {
-      onSuccess: (data) => {
-        if (data === undefined) {
-          return;
-        }
-
-        const hash = step1.type === 'return' ? data.return : data.departure;
-
-        navigate(`/orders/process/${ action }/${ hash }`);
-      }
-    });
-  };
-
-  return (
-    <>
-      <Title>
-        <RiShoppingCartLine />
-        { t('routes_order.step5.title') }
-      </Title>
-
-      <Steps value={ 5 } />
-
-      <Summary
-        step1={ step1 }
-        step2={ step2 }
-        step3={ step3 }
-        step4={ step4 }
-        coupon={ coupon }
-        addons={ addonItems.map(item => ({ label: item.label, value: `${ item.price } ${ currency }` })) }
-        total={ grandTotal }
-        t={ t }
-      />
-
-      <Coupons current={ coupon } step2={ step2 } total={ total } t={ t } onApplied={ onApplyCoupon } />
-
-      <Addons
-        data={ SettingsData?.addons }
-        currency={ currency }
-        whatsapp={ addonWhatsapp }
-        whatsappNumber={ addonWhatsappNumber }
-        telegram={ addonTelegram }
-        t={ t }
-        onChangeWhatsapp={ setAddonWhatsapp }
-        onChangeWhatsappNumber={ setAddonWhatsappNumber }
-        onChangeTelegram={ setAddonTelegram }
-      />
-
-      { UserData === undefined && <Billing t={ t } errors={ errors } refs={ register } /> }
-
-      <Payments
-        selected={ action ?? '' }
-        isPartner={ isPartner ?? false }
-        t={ t }
-        onChange={ onAction }
-      />
-
-      <Actions>
-        <Button
-          type="button"
-          subtype="secondary"
-          text={ <><AiOutlineCaretLeft /> { t('routes_order.step5.back') }</> }
-          noMargin
-          onClick={ () => onBack(4) }
-        />
-
-        <Button
-          loading={isPending}
-          noMargin
-          text={ (
-            <><MdDone />{ t('routes_order.step5.next') }</>
-          ) }
-          onClick={ onSendForm }
-        />
-      </Actions>
-    </>
-  );
-};
-
-export default Step5;