kupos-ui-components-lib 9.6.4 → 9.6.6

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -262,7 +262,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         ? "14px"
                         : "",
                 } },
-                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
+                React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
                     React.createElement("div", { className: "flex flex-col gap-[5px]" },
                         React.createElement("div", null,
                             React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto]  ${isSoldOut ? "grayscale" : ""}` }),
@@ -299,7 +299,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                         boxSizing: "border-box",
                     }
                     : {})) },
-                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut })))),
+                React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })))),
         children,
         React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
 }

package/dist/styles.css

@@ -479,8 +479,8 @@
 .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
   grid-template-columns: 14% 40% 0.5% 24% 13.5%;
 }
-.\[grid-template-columns\:22\%_28\%_2\.5\%_24\%_15\.5\%\] {
-  grid-template-columns: 22% 28% 2.5% 24% 15.5%;
+.\[grid-template-columns\:20\%_30\%_2\.5\%_24\%_15\.5\%\] {
+  grid-template-columns: 20% 30% 2.5% 24% 15.5%;
 }
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1061,6 +1061,11 @@
     }
   }
 }
+.max-\[399px\]\:left-\[53\%\] {
+  @media (width < 399px) {
+    left: 53%;
+  }
+}
 .min-\[420\]\:text-\[12px\] {
   @media (width >= 420) {
     font-size: 12px;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -11,6 +11,8 @@ interface ExpandedDropdownProps {
     getAnimationIcon?: (iconName: string) => any;
     isChangeTicket?: boolean;
     isSoldOut?: boolean;
+    ladiesBookedSeats?: string;
+    isDpEnabled?: boolean;
 }
-declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, }: ExpandedDropdownProps): React.ReactElement;
+declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownProps): React.ReactElement;
 export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -1,6 +1,6 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
-function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, }) {
+function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
@@ -29,6 +29,13 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
                 React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
                     React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
+            ladiesBookedSeats &&
+                String(ladiesBookedSeats).trim() !== "" &&
+                isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
+                React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
+                React.createElement("span", null,
+                    React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
+                    " Esta empresa cuenta con asientos recomendados para mujeres."))),
             React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
                 React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
                 React.createElement("span", null,

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -21,16 +21,20 @@ const getCleanedDepTime = (raw) => {
     }
     return { cleaned, hasAM, hasPM };
 };
-const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
-    React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
-        React.createElement("div", null,
-            " ",
-            label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
-                React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
-        React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
-            React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
-            React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
-            React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
+const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
+    const formattedDate = DateService.getServiceItemDate(date);
+    const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+    return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
+        React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
+            React.createElement("div", null,
+                " ",
+                label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
+                    React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
+            React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
+                React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
+                React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
+                React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
+};
 function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.6.4",
+  "version": "9.6.6",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -463,7 +463,7 @@ function ServiceItemPB({
                     : "",
               }}
             >
-              <div className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center">
+              <div className="grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center">
                 {/* OPERATOR LOGO */}
                 <div className="flex flex-col gap-[5px]">
                   <div>
@@ -611,6 +611,8 @@ function ServiceItemPB({
                   getAnimationIcon={getAnimationIcon}
                   isChangeTicket={serviceItem.is_change_ticket === true}
                   isSoldOut={isSoldOut}
+                  ladiesBookedSeats={serviceItem.ladies_booked_seats}
+                  isDpEnabled={serviceItem.is_dp_enabled}
                 />
               </div>
             </div>

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -13,6 +13,8 @@ interface ExpandedDropdownProps {
   getAnimationIcon?: (iconName: string) => any;
   isChangeTicket?: boolean;
   isSoldOut?: boolean;
+  ladiesBookedSeats?: string;
+  isDpEnabled?: boolean;
 }
 
 function ExpandedDropdown({
@@ -22,6 +24,8 @@ function ExpandedDropdown({
   getAnimationIcon,
   isChangeTicket = false,
   isSoldOut,
+  ladiesBookedSeats,
+  isDpEnabled,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -76,6 +80,18 @@ function ExpandedDropdown({
           </div>
         )}
 
+             {ladiesBookedSeats &&
+          String(ladiesBookedSeats).trim() !== "" &&
+          isDpEnabled === true && (
+            <div className="flex gap-[6px]">
+              <span style={{ marginTop: "2px" }}>•</span>
+              <span>
+                <span className="bold-text">Asientos para damas:</span> Esta
+                empresa cuenta con asientos recomendados para mujeres.
+              </span>
+            </div>
+          )}
+
         <div className="flex gap-[8px] text-[13.33px]">
           <span style={{ marginTop: "2px" }}>•</span>
           <span>

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -65,8 +65,10 @@ const TimeRow: React.FC<TimeRowProps> = ({
   date,
   timeContent,
   isSoldOut,
-}) => (
-  <div
+}) => {
+  const formattedDate = DateService.getServiceItemDate(date);
+  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
+  return <div
     className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
       isSoldOut ? "text-[#c0c0c0]" : ""
     }`}
@@ -93,14 +95,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
         style={{ flex: 1 }}
       >
         <span className="cursor-pointer black-text">
-          {DateService.getServiceItemDate(date)}
+          {formattedDate}
         </span>
-        <div className="absolute left-[50%]">•</div>
+        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
         <div className="font-[900] relative black-text">{timeContent}</div>
       </div>
     </div>
-  </div>
-);
+  </div>;
+};
 
 function DateTimeSectionMobile({
   onBookButtonPress,