@autobusal/routes-order 1.23.0 → 1.23.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.23.2
+
+- Flexible Ticket detail is now behind a small **Read More** link rather than the title. Its own control, so the thing you click to *read* is never next to the thing you click to *buy*. Closed by default; one line — "without it, this ticket cannot be cancelled or changed" — stays outside the collapse, because that is the material fact and hiding it would be a dark pattern rather than a tidy layout.
+- **Date strip: dropped the joining comma.** Above 1024px the day number carried a `::before` comma so the cell would read "Mon, 03 Aug" on one line. The cells are narrow enough that the two parts wrap anyway, so the comma led the second line and every desktop cell rendered as "Mon" over ", 03 Aug". Punctuation that only works when text happens not to wrap will keep breaking.
+
+## 1.23.1
+
+**Flexible Ticket as a title, a price and an Add button, with the detail collapsed.**
+
+A button rather than a checkbox, because this is not the same kind of choice as the notification add-ons beside it — those are a cheap tick, this one changes what the ticket *is*. The toggle and the Add button are separate controls on purpose: reading the terms must never be a way to accidentally buy them.
+
+One line stays **outside** the collapse — "without it, this ticket cannot be cancelled or changed". Everything else is detail somebody can choose to read, but that is the material fact, and hiding what a buyer gets for nothing behind a toggle is the shape of a dark pattern rather than a tidy layout.
+
 ## 1.23.0
 
 **Flexible Ticket at checkout.**

package/Found/Dates/styles.ts

@@ -99,12 +99,20 @@ export const DayNumber = styled.span`
   display: block;
   line-height: 1.2;
 
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-03
+   *
+   * NO JOINING COMMA. This carried a ::before comma above 1024px, to read
+   * "Mon, 03 Aug" on one line. The cells are narrow enough
+   * that the weekday and the date wrap anyway, and the comma then led the
+   * second line - every desktop cell rendered as "Mon" over ", 03 Aug".
+   *
+   * Punctuation that only works when the text happens not to wrap is
+   * punctuation that will keep breaking; the two parts read perfectly well
+   * stacked without it.
+   */
   @media (min-width: 1024px) {
     display: inline;
-
-    &::before {
-      content: ', ';
-    }
   }
 `;
 

package/Step5/Addons/Addons.tsx

@@ -1,8 +1,9 @@
 import { TFunction } from 'i18next';
-import { RiWhatsappLine, RiTelegramLine, RiCalendarCheckLine } from 'react-icons/ri';
+import { useState } from 'react';
+import { RiWhatsappLine, RiTelegramLine, RiCalendarCheckLine, RiArrowUpSLine, RiArrowDownSLine } from 'react-icons/ri';
 import { FlexOffer } from '@autobusal/providers/types/routes';
 import { SubTitle } from '../../styles';
-import { Container, Option, Notice, Terms, Term } from './styles';
+import { Container, Option, Notice, Terms, Term, FlexHeader, FlexTitle, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
 
 interface AddonsData {
   whatsapp: { available: boolean, price: number }
@@ -39,6 +40,11 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
   // than no checkbox.
   const hasFlex = flexOffer?.available === true;
 
+  // Closed to begin with. The title, the price and the Add button are the
+  // decision; the windows and the small print are for somebody who wants to
+  // check before making it.
+  const [ open, setOpen ] = useState<boolean>(false);
+
   if (!data || (!data.whatsapp.available && !data.telegram.available && !hasFlex)) {
     return null;
   }
@@ -96,53 +102,68 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
 
       { hasFlex && (
         <Option>
-          <label>
-            <input
-              type="checkbox"
-              checked={ flex }
-              onChange={ (event) => onChangeFlex(event.target.checked) }
-            />
+          <FlexHeader>
+            <FlexTitle>
+              <RiCalendarCheckLine />
 
-            <RiCalendarCheckLine />
+              { t('routes_order.step5.flex.title') }
 
-            { t('routes_order.step5.flex.add', { price: flexOffer?.price_display }) }
-          </label>
+              <FlexPrice>{ flexOffer?.price_display }</FlexPrice>
+            </FlexTitle>
+
+            <FlexAdd type="button" $added={ flex } onClick={ () => onChangeFlex(!flex) }>
+              { flex ? t('routes_order.step5.flex.remove') : t('routes_order.step5.flex.add') }
+            </FlexAdd>
+          </FlexHeader>
 
           {/*
-            * The default is stated FIRST and plainly. The passenger is being
-            * asked to pay for flexibility, so what they get without paying
-            * has to be the thing they read before the price, not a
-            * disclosure buried under it.
+            * Deliberately OUTSIDE the collapse. Everything else here is
+            * detail somebody can choose to read, but this one line is the
+            * material fact - a buyer is being asked to pay for a right they
+            * would otherwise not have, and hiding what they get for nothing
+            * behind a toggle is the shape of a dark pattern rather than a
+            * tidy layout.
             */}
           <Notice>{ t('routes_order.step5.flex.default') }</Notice>
 
-          <Terms>
-            { flexOffer?.refund_hours != null && (
-              <Term>{ t('routes_order.step5.flex.refund', { hours: flexOffer.refund_hours }) }</Term>
-            ) }
-
-            {/*
-              * Either half can be absent on its own. An operator who will
-              * move a booking but not refund it is a real case, and listing
-              * only what this booking actually includes is the difference
-              * between an offer and a misrepresentation.
-              */}
-            { flexOffer?.reschedule_hours != null && (
-              <Term>{ t('routes_order.step5.flex.reschedule', { hours: flexOffer.reschedule_hours }) }</Term>
-            ) }
-          </Terms>
-
-          <Notice>{ t('routes_order.step5.flex.nonrefundable') }</Notice>
-
-          {/*
-            * Statutory rights when the OPERATOR cancels are untouched by
-            * this and by anything else sold here. Saying so at the point of
-            * sale is both accurate and reassuring; leaving it out would
-            * imply the add-on is what grants them.
-            */}
-          <Notice>{ t('routes_order.step5.flex.carrier') }</Notice>
+          <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+            { open ? t('routes_order.step5.flex.less') : t('routes_order.step5.flex.more') }
+
+            { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
+          </FlexToggle>
+
+          { open && (
+            <FlexDetails>
+              <Terms>
+                { flexOffer?.refund_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.refund', { hours: flexOffer.refund_hours }) }</Term>
+                ) }
+
+                {/*
+                  * Either half can be absent on its own. An operator who
+                  * will move a booking but not refund it is a real case, and
+                  * listing only what this booking actually includes is the
+                  * difference between an offer and a misrepresentation.
+                  */}
+                { flexOffer?.reschedule_hours != null && (
+                  <Term>{ t('routes_order.step5.flex.reschedule', { hours: flexOffer.reschedule_hours }) }</Term>
+                ) }
+              </Terms>
+
+              <Notice>{ t('routes_order.step5.flex.nonrefundable') }</Notice>
+
+              {/*
+                * Statutory rights when the OPERATOR cancels are untouched by
+                * this and by anything else sold here. Saying so is both
+                * accurate and reassuring; leaving it out would imply the
+                * add-on is what grants them.
+                */}
+              <Notice>{ t('routes_order.step5.flex.carrier') }</Notice>
+            </FlexDetails>
+          ) }
         </Option>
       ) }
+
     </Container>
   );
 };

package/Step5/Addons/styles.ts

@@ -50,3 +50,77 @@ export const Term = styled.li`
   font-size: 14px;
   line-height: 1.5;
 `;
+
+/**
+ * The Flexible Ticket row: what it is and its price on the left, the
+ * decision on the right.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ *
+ * A button rather than a checkbox, because this is not the same kind of
+ * choice as the notification add-ons beside it - those are a cheap tick, this
+ * one changes what the ticket IS. The two halves are separate controls on
+ * purpose: reading the terms must never be a way to accidentally buy them.
+ */
+export const FlexHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+`;
+
+export const FlexTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 700;
+`;
+
+/**
+ * "Read More", small and quiet, under the one line that always shows.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-08-03
+ * Its own control rather than the title, so the thing you click to READ is
+ * never next to the thing you click to BUY.
+ */
+export const FlexToggle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: 4px;
+  margin-left: 22px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: ${ props => props.theme.primary.normal };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.xs };
+  cursor: pointer;
+  text-decoration: underline;
+`;
+
+export const FlexPrice = styled.span`
+  font-weight: 700;
+  white-space: nowrap;
+`;
+
+export const FlexAdd = styled.button<{ $added: boolean }>`
+  flex: 0 0 auto;
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: 1px solid ${ props => props.theme.primary.normal };
+  background: ${ props => props.$added ? 'transparent' : props.theme.primary.normal };
+  color: ${ props => props.$added ? props.theme.primary.normal : props.theme.primary.contrast };
+  font-family: inherit;
+  font-size: ${ props => props.theme.size.xs };
+  font-weight: 700;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+
+export const FlexDetails = styled.div`
+  margin-left: 22px;
+`;

package/package.json

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