kupos-ui-components-lib 10.4.62 → 10.4.64

package/src/ui/SeatSection/SeatSection.tsx

@@ -119,6 +119,13 @@ function getUniqueSeats(seatTypes: SeatType[], isTrain?: boolean) {
   });
 }
 
+// Matches "160°" as well as a bare "160" label
+function hasInclinationSeatTypes(seatTypes: SeatType[]) {
+  return (seatTypes ?? []).some((seat) =>
+    /\b(120|140|160|180)\b/.test(String(seat?.label ?? "")),
+  );
+}
+
 function getNumberOfSeats(seatTypes: SeatType[]) {
   return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
 }
@@ -169,6 +176,14 @@ function SeatSection({
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
   const numberOfSeats = getNumberOfSeats(seatTypes);
+  const isMovilBus =
+    serviceItem?.operator_service_name === "MovilBus" ||
+    serviceItem?.operator_service_name === "Movil Bus";
+  // Peru: list every seat type with its own fare (MovilBus, or inclination
+  // seats like 160° / 180°) instead of only the cheapest one.
+  const showSeatTypeRows =
+    (isMovilBus || hasInclinationSeatTypes(seatTypes)) &&
+    uniqueSeats.length > 1;
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
   const formatPrice = (price: number) =>
@@ -256,12 +271,8 @@ function SeatSection({
 
   const renderSeatPrices = () => {
     if (isPeru) {
-      const isMovilBus =
-        serviceItem?.operator_service_name === "MovilBus" ||
-        serviceItem?.operator_service_name === "Movil Bus";
-
-      // Multiple unique seat types → show a price row for each (MovilBus only)
-      if (isMovilBus && uniqueSeats.length > 1) {
+      // Multiple unique seat types → show a price row for each
+      if (showSeatTypeRows) {
         return uniqueSeats
           .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
           .map((val, key) => {
@@ -378,12 +389,8 @@ function SeatSection({
 
   const renderLabels = () => {
     if (isPeru) {
-      const isMovilBus =
-        serviceItem?.operator_service_name === "MovilBus" ||
-        serviceItem?.operator_service_name === "Movil Bus";
-
-      // Multiple unique seat types → show a label row for each (MovilBus only)
-      if (isMovilBus && uniqueSeats.length > 1) {
+      // Multiple unique seat types → show a label row for each
+      if (showSeatTypeRows) {
         return uniqueSeats
           .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
           .map((val, key) => (
@@ -404,7 +411,20 @@ function SeatSection({
                   }}
                 />
               )}
-              {CommonService.truncateSeatLabel(val.label)}
+              {!isMovilBus && isShowSeatIcon && (
+                <img
+                  src={getSeatLabelIcon(val.label, serviceItem)}
+                  alt="seattype"
+                  style={{
+                    width: "20px",
+                    height: "20px",
+                    marginRight: "5px",
+                  }}
+                />
+              )}
+              {isMovilBus
+                ? CommonService.truncateSeatLabel(val.label)
+                : CommonService.capitalize(addSeatDegree(val.label))}
             </span>
           ));
       }
@@ -496,6 +516,8 @@ function SeatSection({
     serviceItem?.dp_discount_percents || {},
   ).sort(([, a], [, b]) => Number(a) - Number(b))[0];
   const dpDiscountPercent = dpDiscountEntry?.[1];
+  // show_dp_ui: false falls through to the regular fare layout
+  const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
   const getLowestDpValue = (source: any): number | undefined => {
     if (!source) return undefined;
     const values: any[] = Array.isArray(source)
@@ -591,7 +613,7 @@ function SeatSection({
     );
   };
 
-  if (serviceItem?.is_dp_enabled && !dpDiscountEntry) {
+  if (serviceItem?.is_dp_enabled && !isDpUiHidden && !dpDiscountEntry) {
     const dpSeats = (
       removeDuplicateSeats ? uniqueSeats : sortedSeatTypes
     ).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
@@ -616,25 +638,27 @@ function SeatSection({
             <div className="absolute -left-[20px]  transform -translate-y-1/2 top-[16px]">
               {renderIcon("fireIcon", "16px")}
             </div>
-            <div
-              className="absolute bottom-[35px] left-1/2 -translate-x-1/2 "
-              style={{
-                animation: "pulse-zoom 2s ease-in-out infinite",
-                whiteSpace: "nowrap",
-              }}
-            >
-              <span
-                className="rounded-[100px]  px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white"
+            {CommonService.showDpBestPrice(serviceItem) && (
+              <div
+                className="absolute bottom-[35px] left-1/2 -translate-x-1/2 "
                 style={{
                   animation: "pulse-zoom 2s ease-in-out infinite",
                   whiteSpace: "nowrap",
-                  color: dpSeatColor,
-                  backgroundColor: tooltipColor,
                 }}
               >
-                Mejor precio
-              </span>
-            </div>
+                <span
+                  className="rounded-[100px]  px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white"
+                  style={{
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    whiteSpace: "nowrap",
+                    color: dpSeatColor,
+                    backgroundColor: tooltipColor,
+                  }}
+                >
+                  Mejor precio
+                </span>
+              </div>
+            )}
             <div
               className="text-[22px] bold-text leading-[30px] text-center"
               style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
@@ -649,7 +673,7 @@ function SeatSection({
     );
   }
 
-  if (dpDiscountEntry) {
+  if (dpDiscountEntry && !isDpUiHidden) {
     const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
     const allFares = (serviceItem.seat_types ?? [])
       .map((st: any) => st.fare)

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -32,7 +32,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
   getAnimationIcon,
 }) => {
   return (
-    <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
+    <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
       {showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -112,8 +112,9 @@ function addSeatDegree(label: string | null) {
 }
 
 function hasInclinationSeatTypes(seatTypes: SeatType[]): boolean {
+  // Matches "160°" as well as a bare "160" label
   return (seatTypes ?? []).some((seat) =>
-    String(seat?.label ?? "").includes("°"),
+    /\b(120|140|160|180)\b/.test(String(seat?.label ?? "")),
   );
 }
 
@@ -247,7 +248,9 @@ function SeatSectionMobile({
                       }}
                     />
                   )}
-                  {commonService.truncateSeatLabel(seat.label)}
+                  {commonService.truncateSeatLabel(
+                    commonService.addSeatDegree(seat.label),
+                  )}
                 </span>
                 <span
                   className="min-[420]:text-[13px] text-[12px] bold-text"
@@ -357,27 +360,29 @@ function SeatSectionMobile({
         className="relative flex flex-col justify-center h-full"
         style={{ opacity: isSoldOut ? 0.5 : 1 }}
       >
-        <div
-          className="absolute right-[0px]"
-          style={{
-            animation: "pulse-zoom 2s ease-in-out infinite",
-            top:
-              (serviceItem?.available_seats < 10 &&
-                serviceItem?.available_seats > 0) ||
-              isSoldOut
-                ? "-20px"
-                : "-15px",
-          }}
-        >
-          <span
-            className="rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
+        {commonService.showDpBestPrice(serviceItem) && (
+          <div
+            className="absolute right-[0px]"
             style={{
-              backgroundColor: tooltipBgColor,
+              animation: "pulse-zoom 2s ease-in-out infinite",
+              top:
+                (serviceItem?.available_seats < 10 &&
+                  serviceItem?.available_seats > 0) ||
+                isSoldOut
+                  ? "-20px"
+                  : "-15px",
             }}
           >
-            Mejor precio
-          </span>
-        </div>
+            <span
+              className="rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]"
+              style={{
+                backgroundColor: tooltipBgColor,
+              }}
+            >
+              Mejor precio
+            </span>
+          </div>
+        )}
         <div className="w-[100%] flex flex-row justify-between items-center">
           <span
             className="min-[420]:text-[13px] text-[12px]"
@@ -565,7 +570,11 @@ function SeatSectionMobile({
     )
     ?.sort((a, b) => a.fare - b.fare)[0]?.fare;
 
+  // show_dp_ui: false falls through to the regular fare layout
+  const isDpUiHidden = commonService.isDpUiHidden(serviceItem);
+
   const hasDpDiscount =
+    !isDpUiHidden &&
     serviceItem?.dp_discounted_seats &&
     serviceItem?.dp_discount_percents &&
     originalDpPrice != null &&
@@ -578,6 +587,7 @@ function SeatSectionMobile({
       style={{ width: "40%", flexShrink: 0 }}
     >
       {serviceItem?.is_dp_enabled &&
+      !isDpUiHidden &&
       !serviceItem?.dp_discounted_seats?.length &&
       !dpDiscountPercent ? (
         <div

package/src/utils/CommonService.ts

@@ -349,6 +349,19 @@ const commonService = {
     return match ? icons?.[`seat${match[1]}`] || null : null;
   },
 
+  // The backend can switch off the DP look (gradient card, ribbon, DP fare
+  // block) per DP service with show_dp_ui: false. DP fare rules (no changes /
+  // cancellations) still apply. A missing flag keeps the current UI.
+  isDpUiHidden: (serviceItem?: {
+    is_dp_enabled?: boolean;
+    show_dp_ui?: boolean;
+  }): boolean =>
+    Boolean(serviceItem?.is_dp_enabled) && serviceItem?.show_dp_ui === false,
+
+  // "Mejor precio" pill on DP fares; a missing flag keeps the current UI.
+  showDpBestPrice: (serviceItem?: { show_best_price?: boolean }): boolean =>
+    serviceItem?.show_best_price !== false,
+
   calculateDiscountedPrice: (
     originalPrice: number | string,
     serviceItem?: {