@autobusal/routes-order 1.23.1 → 1.23.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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.**

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

@@ -3,7 +3,7 @@ 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, FlexHeader, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
+import { Container, Option, Notice, Terms, Term, FlexHeader, FlexTitle, FlexToggle, FlexPrice, FlexAdd, FlexDetails } from './styles';
 
 interface AddonsData {
   whatsapp: { available: boolean, price: number }
@@ -103,15 +103,13 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
       { hasFlex && (
         <Option>
           <FlexHeader>
-            <FlexToggle type="button" aria-expanded={ open } onClick={ () => setOpen(!open) }>
+            <FlexTitle>
               <RiCalendarCheckLine />
 
               { t('routes_order.step5.flex.title') }
 
               <FlexPrice>{ flexOffer?.price_display }</FlexPrice>
-
-              { open ? <RiArrowUpSLine /> : <RiArrowDownSLine /> }
-            </FlexToggle>
+            </FlexTitle>
 
             <FlexAdd type="button" $added={ flex } onClick={ () => onChangeFlex(!flex) }>
               { flex ? t('routes_order.step5.flex.remove') : t('routes_order.step5.flex.add') }
@@ -128,6 +126,12 @@ const Addons = ({ data, flexOffer, currency, whatsapp, whatsappNumber, telegram,
             */}
           <Notice>{ t('routes_order.step5.flex.default') }</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>

package/Step5/Addons/styles.ts

@@ -69,19 +69,34 @@ export const FlexHeader = styled.div`
   gap: 10px;
 `;
 
-export const FlexToggle = styled.button`
+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: inherit;
+  color: ${ props => props.theme.primary.normal };
   font-family: inherit;
-  font-size: inherit;
-  font-weight: 700;
+  font-size: ${ props => props.theme.size.xs };
   cursor: pointer;
-  text-align: left;
+  text-decoration: underline;
 `;
 
 export const FlexPrice = styled.span`

package/package.json

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