kupos-ui-components-lib 10.4.75 → 10.4.76

package/src/ui/FeatureServiceUI/featureServiceShared.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import DateService from "../../utils/DateService";
+
+// Shared helpers for FeatureServiceUi (desktop) and FeatureServiceUiMobile.
+
+if (typeof document !== "undefined") {
+  let style = document.getElementById("feature-spin-style");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "feature-spin-style";
+    document.head.appendChild(style);
+  }
+  // Always (re)write so an older injected version doesn't stick around
+  style.textContent =
+    "@keyframes feature-spin { to { transform: rotate(360deg); } }" +
+    // Cards stay scrollable, but the scrollbar takes no width and is hidden
+    ".feature-cards-scroll{scrollbar-width:none;-ms-overflow-style:none}" +
+    ".feature-cards-scroll::-webkit-scrollbar{display:none;width:0;height:0}";
+}
+
+export const CARD_BORDER = "1px solid #363c48";
+export const CARD_SELECTED_BORDER = "0.5px solid rgb(255, 92, 96)";
+export const CARD_SELECTED_SHADOW = "inset 0 0 0 1px rgb(255, 92, 96)";
+
+// "07:00" / "19:30" -> "07:00 am" / "07:30 pm"; leaves other formats untouched
+export const formatDepartureTime = (time?: string) => {
+  if (!time) return "";
+  const match = /^(\d{1,2}):(\d{2})$/.exec(String(time).trim());
+  if (!match) return time;
+  const hours = parseInt(match[1], 10);
+  const hours12 = hours % 12 || 12;
+  const hh = hours12 < 10 ? `0${hours12}` : String(hours12);
+  return `${hh}:${match[2]} ${hours < 12 ? "am" : "pm"}`;
+};
+
+// "2026-05-23" -> "Vie. 23 de mayo"
+export const formatTravelDate = (travelDate?: string) => {
+  if (!travelDate) return "Vie. 23 de mayo";
+  const dayName = DateService.getDayNameFromDate(
+    travelDate,
+    "yyyy-mm-dd",
+    "half",
+  );
+  const day = parseInt(
+    DateService.getDateFromDate(travelDate, "yyyy-mm-dd"),
+    10,
+  );
+  const monthName = DateService.getMonthNameFromDate(
+    travelDate,
+    "yyyy-mm-dd",
+    "full",
+  );
+  return `${dayName.charAt(0).toUpperCase() + dayName.slice(1)}. ${day} de ${monthName}`;
+};
+
+// Update a node's text without replacing the text node React is tracking
+export const setNodeText = (node: Element | null, text: string) => {
+  if (!node) return;
+  const first = node.firstChild;
+  if (first && first.nodeType === 3 && node.childNodes.length === 1) {
+    first.nodeValue = text;
+  } else {
+    node.textContent = text;
+  }
+};
+
+export const OriginIcon = ({ size = 20 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="8.5" stroke="#FF5C60" strokeWidth="1.6" />
+    <circle cx="10" cy="10" r="4.5" stroke="#FF5C60" strokeWidth="1.6" />
+  </svg>
+);
+
+export const DestinationIcon = ({ size = 20 }: { size?: number }) => (
+  <svg width={size} height={(size * 22) / 20} viewBox="0 0 20 22" fill="none">
+    <path
+      d="M10 20.5s-7-6.2-7-11.5a7 7 0 1 1 14 0c0 5.3-7 11.5-7 11.5z"
+      stroke="#FF5C60"
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+    />
+    <circle cx="10" cy="9" r="3" stroke="#FF5C60" strokeWidth="1.6" />
+  </svg>
+);
+
+export const CalendarIcon = ({ size = 20 }: { size?: number }) => (
+  <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <rect
+      x="2"
+      y="3.5"
+      width="16"
+      height="14.5"
+      rx="2"
+      stroke="#9b9b9b"
+      strokeWidth="1.4"
+    />
+    <path
+      d="M2 7.5h16M6 2v3M14 2v3"
+      stroke="#9b9b9b"
+      strokeWidth="1.4"
+      strokeLinecap="round"
+    />
+    <path
+      d="M6 11h.01M10 11h.01M14 11h.01M6 14.5h.01M10 14.5h.01M14 14.5h.01"
+      stroke="#9b9b9b"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const CrownIcon = ({
+  width = 18,
+  height = 14,
+}: {
+  width?: number;
+  height?: number;
+}) => (
+  <svg width={width} height={height} viewBox="0 0 24 18" fill="#fff">
+    <path d="M2 5.5l5 4.2L12 2l5 7.7 5-4.2-2 9.5H4L2 5.5z" />
+    <rect x="4" y="16" width="16" height="2" rx="1" />
+  </svg>
+);