@autobusal/routes-order 1.31.0 → 1.31.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.31.1
+
+### Changed
+
+- **One payment method means one button.** The picker no longer renders when
+  there is nothing to pick, and the button reads "Pay Now" rather than "Make
+  Payment" - a heading over a single option the buyer had to press before
+  pressing the real one was a click that only ever had one answer, on the
+  last screen before paying.
+
 ## 1.31.0
 
 ### Changed

package/Checkout/Checkout.tsx

@@ -15,7 +15,7 @@ import Addons from '../Step5/Addons/Addons';
 import Billing from '../Step5/Billing/Billing';
 import Payments from '../Step5/Payments/Payments';
 import Sidebar from './Sidebar/Sidebar';
-import { getTotal, convertCoupon } from '../Step5/utilities';
+import { getTotal, convertCoupon, getAvailablePayments } from '../Step5/utilities';
 import { Title, Actions, Results, Listing } from '../styles';
 import { RoutesSearchForm } from '@autobusal/routes-search/types';
 import { PersonData, BillingData } from '@autobusal/providers/types/persons';
@@ -24,7 +24,7 @@ import { CouponData } from '@autobusal/providers/types/orders';
 import { TotalData } from '../types';
 import { useUserStore } from '@autobusal/providers/stores/user';
 import { useGetSettings } from '@autobusal/providers/services';
-import { usePostOrder, useGetFlex } from '../services';
+import { usePostOrder, useGetFlex, useGetPayments } from '../services';
 import { addon as commerceAddon, beginCheckout, stash } from '@autobusal/providers/Setup/commerce';
 import { item as commerceItem } from '../commerce';
 
@@ -74,6 +74,20 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
   const [ total, setTotal ] = useState<TotalData>(getTotal(step2, step3));
   const [ action, setAction ] = useState<string | undefined>(undefined);
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * Whether there is a payment CHOICE to be made, which decides both whether
+   * the picker draws itself and what the button says.
+   *
+   * The same query the picker runs, under the same key, so react-query
+   * answers it from cache - this reads the answer, it does not fetch it a
+   * second time.
+   */
+  const { data: paymentsData } = useGetPayments();
+
+  const singleMethod = getAvailablePayments(paymentsData, isPartner ?? false).length === 1;
+
   const [ addonWhatsapp, setAddonWhatsapp ] = useState<boolean>(false);
   const [ addonWhatsappNumber, setAddonWhatsappNumber ] = useState<string>('');
   const [ addonTelegram, setAddonTelegram ] = useState<boolean>(false);
@@ -312,6 +326,7 @@ const Checkout = ({ values, step1, step2, step3, isPartner, t, onStore, onBack }
           coupon={ coupon }
           total={ grandTotal }
           action={ action }
+          single={ singleMethod }
           pending={ isPending }
           t={ t }
           onPay={ onPay }

package/Checkout/Sidebar/Sidebar.tsx

@@ -26,6 +26,7 @@ interface Props {
   coupon?: CouponData
   total: TotalData
   action?: string
+  single?: boolean
   pending: boolean
   t: TFunction<'common'>
   onPay: () => void
@@ -45,7 +46,7 @@ interface Props {
  * page and scrolled away while add-ons were being ticked - so the number
  * changed out of sight of the person it was changing for.
  */
-const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pending, t, onPay, children, payments }: Props): JSX.Element => (
+const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, single, pending, t, onPay, children, payments }: Props): JSX.Element => (
   <Container>
     <Panel className="box">
       <SubTitle>
@@ -89,7 +90,13 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pen
         { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
              The label follows the chosen method, so the button says what it
              is about to do - "Reserve" does not take money, and a button
-             reading "Make Payment" for it would be a lie. */ }
+             reading "Make Payment" for it would be a lie.
+
+             Edited: Ferjolt Ozuni - Date: 2026-08-07
+             And when there is only one method, the picker above renders
+             nothing, so this is the whole payment step. "Make Payment" reads
+             as "proceed to the part where you pay"; with nothing left in
+             between, it should say what actually happens next. */ }
         <Button
           loading={ pending }
           noMargin
@@ -98,7 +105,9 @@ const Sidebar = ({ step1, step2, step3, fare, addons, coupon, total, action, pen
               <MdDone />
               { action === 'reserve'
                 ? t('routes_order.step5.reserve')
-                : t('routes_order.step5.next') }
+                : single
+                  ? t('routes_order.step5.pay_now')
+                  : t('routes_order.step5.next') }
             </>
           ) }
           onClick={ onPay }

package/Step5/Payments/Payments.tsx

@@ -7,6 +7,7 @@ import { Inline } from '@autobusal/common';
 import { SubTitle } from '../../styles';
 import { Container, ContainerPayments, ButtonPayment } from './styles';
 import { useGetPayments } from '../../services';
+import { getAvailablePayments } from '../utilities';
 
 interface Props {
   selected: string
@@ -15,9 +16,11 @@ interface Props {
   onChange: (action: string) => void
 }
 
-const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
+const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element | null => {
   const { data, isLoading, isSuccess } = useGetPayments();
 
+  const available = getAvailablePayments(data, isPartner);
+
   useEffect(() => {
     if (isSuccess) {
       const found = Object.keys(data).find(item => {
@@ -37,6 +40,26 @@ const Payments = ({ selected, isPartner, t, onChange }: Props): JSX.Element => {
     );
   }
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * One method is not a choice, so there is nothing to draw.
+   *
+   * A heading reading "Payment Method" over a single button the buyer must
+   * press before pressing the real one is a step that only ever has one
+   * answer - and it is the last screen before paying, which is the worst
+   * place to spend a click. The effect above has already selected it, so the
+   * button beside this can simply say "Pay Now".
+   *
+   * Rendering nothing rather than hiding with CSS: the picker is a control,
+   * and a control nobody can act on should not be in the page at all - it
+   * would still be reachable by keyboard and still announced by a screen
+   * reader as a thing to decide.
+   */
+  if (available.length <= 1) {
+    return null;
+  }
+
   return (
     <>
       <Container>

package/Step5/utilities.ts

@@ -1,6 +1,6 @@
 import { FoundData } from '@autobusal/providers/types/routes';
 import { CouponData } from '@autobusal/providers/types/orders';
-import { TotalData } from '../types';
+import { ActionData, TotalData } from '../types';
 
 export const getTotal = (step2: FoundData, step3?: FoundData): TotalData => {
   // we get the currency
@@ -21,4 +21,41 @@ export const convertCoupon = (data: CouponData): TotalData => {
     display: data.total,
     value: Number(currency[0])
   };
-};
+};
+
+/**
+ * The payment methods actually offered on this checkout, in the order the
+ * picker shows them.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-07
+ *
+ * Pulled out of Payments because two places need the same answer and they
+ * must not disagree: the picker decides what to draw, and the button decides
+ * whether it is asking the buyer to choose ("Make Payment", after picking a
+ * method) or simply to pay ("Pay Now", when there is nothing to pick). A
+ * second copy of these conditions would eventually drift and produce a
+ * button offering a choice that is not on screen.
+ *
+ * The conditions themselves are unchanged, including their oddities: `cash`
+ * rides on the `funds` flag rather than one of its own, and a partner is
+ * offered every card gateway regardless of what the label enabled. Both were
+ * already true; this is a move, not a rewrite.
+ */
+export const getAvailablePayments = (data?: ActionData, isPartner = false): string[] => {
+  if (!data) {
+    return [];
+  }
+
+  const available: string[] = [];
+
+  if (data.reserve && !isPartner) { available.push('reserve'); }
+  if (data.funds && !isPartner) { available.push('funds', 'cash'); }
+
+  if (data.bkt || isPartner) { available.push('bkt'); }
+  if (data.stripe || isPartner) { available.push('stripe'); }
+  if (data.mollie || isPartner) { available.push('mollie'); }
+  if (data.raiffeisen || isPartner) { available.push('raiffeisen'); }
+  if (data.nexi || isPartner) { available.push('nexi'); }
+
+  return available;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.31.0",
+  "version": "1.31.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"