@autobusal/common 1.33.1 → 1.33.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.33.3
+
+### Added
+
+- **`RouteItem` shows a "from" price** next to the route name/code - the lowest fare across the route's own `prices`, using the row's own pre-formatted `adult_display` (same currency/decimal convention as everywhere else). Both `browse` and `view` modes get it; a route with no prices at all shows nothing, same as it always could.
+
+## 1.33.2
+
+### Added
+
+- **`Meta` now defaults `og:image`/`twitter:image` to the label's own homepage hero photo** (`{settings.url}/home/background-light.jpg`) when a page doesn't pass its own `image`. Most of the ~136 call sites never had a share-preview image at all, so a link pasted into a chat assistant or social post previewed with nothing. A page with something more specific (an operator's logo, a blog post's own photo) still passes its own `image` and wins - this only fills the gap.
 
 ## 1.33.1
 

package/Meta.tsx

@@ -237,11 +237,38 @@ const useAlternates = (noIndex: boolean, explicitUrl?: string): { locale: string
   ];
 };
 
+/**
+ * Edited: Ferjolt Ozuni - Date: 2026-08-11
+ *
+ * A default og:image/twitter:image for whichever of Meta's ~136 call
+ * sites never passes one - route detail, Help, blog index, and most
+ * static pages had NO share-preview image at all, so a link pasted into
+ * a chat assistant or social post previewed with nothing. Rather than
+ * hunt down every call site individually, the fallback lives here: the
+ * same hero photo the homepage itself uses (`home/background-light.jpg`,
+ * already uploaded per-label - see RoutesOrder.tsx's identical asset
+ * path), which every label already has. The DARK variant is deliberately
+ * not used here regardless of the visitor's own theme - a share preview
+ * is generated by whatever unpacks the URL server-side, not by this
+ * visitor's browser, so there is no "current theme" to match; picking
+ * one consistently is more correct than guessing.
+ *
+ * A page with something more specific to show (an operator's logo, a
+ * blog post's own photo) still passes its own `image` and wins - this
+ * only fills the gap when nothing more specific exists.
+ */
+const useDefaultImage = (explicit?: string): (string | undefined) => {
+  const { data: settings } = useGetSettings();
+
+  return explicit ?? (settings ? `${ settings.url }/home/background-light.jpg` : undefined);
+};
+
 const Meta = ({ title, keywords, description, image, url, type = 'website', noIndex = false, children }: Props): JSX.Element => {
   const fullTitle = withBrand(title);
   const canonicalUrl = useCanonicalUrl(url);
   const location = useLocation();
   const robots = noIndex ? 'noindex, nofollow' : 'index, follow';
+  const resolvedImage = useDefaultImage(image);
 
   const alternates = useAlternates(noIndex, url);
 
@@ -255,13 +282,13 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
     { selector: 'meta[property="og:type"]', attr: 'content', value: type },
     { selector: 'meta[property="og:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[property="og:description"]', attr: 'content', value: description },
-    { selector: 'meta[property="og:image"]', attr: 'content', value: image },
+    { selector: 'meta[property="og:image"]', attr: 'content', value: resolvedImage },
     { selector: 'meta[property="og:url"]', attr: 'content', value: canonicalUrl },
     { selector: 'meta[property="og:site_name"]', attr: 'content', value: brand },
     { selector: 'meta[name="twitter:card"]', attr: 'content', value: 'summary_large_image' },
     { selector: 'meta[name="twitter:title"]', attr: 'content', value: fullTitle },
     { selector: 'meta[name="twitter:description"]', attr: 'content', value: description },
-    { selector: 'meta[name="twitter:image"]', attr: 'content', value: image }
+    { selector: 'meta[name="twitter:image"]', attr: 'content', value: resolvedImage }
   ]);
   usePageviewTracking(location.pathname + location.search, fullTitle);
 
@@ -284,7 +311,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta property="og:type" content={ type } />
       <meta property="og:title" content={ fullTitle } />
       { description && <meta property="og:description" content={ description } /> }
-      { image && <meta property="og:image" content={ image } /> }
+      { resolvedImage && <meta property="og:image" content={ resolvedImage } /> }
       <meta property="og:url" content={ canonicalUrl } />
       { brand && <meta property="og:site_name" content={ brand } /> }
 
@@ -292,7 +319,7 @@ const Meta = ({ title, keywords, description, image, url, type = 'website', noIn
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content={ fullTitle } />
       { description && <meta name="twitter:description" content={ description } /> }
-      { image && <meta name="twitter:image" content={ image } /> }
+      { resolvedImage && <meta name="twitter:image" content={ resolvedImage } /> }
 
       { children }
     </>

package/RouteItem/RouteItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { HiOutlineInformationCircle, HiOutlineClock, HiArrowCircleRight } from 'react-icons/hi';
 import More from './More/More';
-import { Container, About, Image, Logo, Information, Name, Code, ButtonMore, Locations, Location, City, Iso, Date, Arrow, Order, LinkOrder } from './styles';
+import { Container, About, Image, Logo, Information, Name, Code, Price, ButtonMore, Locations, Location, City, Iso, Date, Arrow, Order, LinkOrder } from './styles';
 import { RouteData } from '@autobusal/providers/types/routes';
 
 interface Props {
@@ -16,6 +16,19 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
 
   const lastLocation = route.locations.length - 1;
 
+  // Edited: Ferjolt Ozuni - Date: 2026-08-11
+  // The cheapest fare on this route, same "from" semantics as everywhere
+  // else a lowest price is shown (Facts.price_from, results-page cards) -
+  // `prices` is one row per from/to leg the route sells, not one row for
+  // the whole journey, so the honest "from" figure is the minimum across
+  // all of them. Uses the row's OWN `adult_display` rather than
+  // reformatting `adult` itself - the server already applied this label's
+  // currency symbol/decimal convention, and re-deriving that here would
+  // risk disagreeing with every other price on the site.
+  const cheapest = route.prices.length > 0
+    ? route.prices.reduce((min, price) => (price.adult < min.adult ? price : min))
+    : null;
+
   return (
     <Container className="box">
       <About>
@@ -30,6 +43,8 @@ const RouteItem = ({ type, route, t }: Props): JSX.Element => {
 
           <Code>{ route.code }</Code>
 
+          { cheapest && <Price>{ t('route_item.price_from', { price: cheapest.adult_display }) }</Price> }
+
           <ButtonMore type="button" onClick={ () => setShow(!show) }>
             <HiOutlineInformationCircle />
             { t('route_item.info') }

package/RouteItem/styles.ts

@@ -60,6 +60,12 @@ export const Code = styled.div`
   font-size: ${ props => props.theme.size.xs };
 `;
 
+export const Price = styled.div`
+  font-weight: 700;
+  color: ${ props => props.theme.primary.normal };
+  font-size: ${ props => props.theme.size.s };
+`;
+
 export const ButtonMore = styled.button`
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.33.1",
+  "version": "1.33.3",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"