kupos-ui-components-lib 9.0.4 → 9.0.6

package/src/components/ServiceItem/mobileTypes.ts

@@ -113,6 +113,9 @@ export interface MobileServiceItemProps {
       seatFallBackIcon: string;
       headPhoneIcon?: string;
       allowCancellationIcon?: string;
+      bombAnim?: string;
+      whiteBoardingIcon?: string;
+      downArrow?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/components/ServiceItem/types.ts

@@ -117,6 +117,9 @@ export interface ServiceItemProps {
       seatFallBackIcon: string;
       headPhoneIcon?: string;
       allowCancellationIcon?: string;
+      whiteBoardingIcon?: string
+      bombJson?:string
+      downArrow?:string
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -192,7 +195,11 @@ export interface ServiceItemProps {
   petFriendlyAnim?: string;
   priorityStageAnim?: string;
   promoAnim?: string;
+  bombAnimation?: string;
   isPeru?: boolean;
   siteType?: "kupos" | "pullman" | "opsites" | "linatal";
   isAllinBus?: boolean;
+  isExpand?: any;
+  setIsExpand?: (value: any) => void;
+  coachKey?: number
 }

package/src/ui/AmenitiesBlock.tsx

@@ -1,6 +1,50 @@
 import React from "react";
 import LottiePlayer from "../assets/LottiePlayer";
 
+const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
+
+const TOOLTIP_CLASS =
+  "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
+
+const getAmenityBaseName = (amenityStr) => amenityStr?.split(".")[0] ?? "";
+
+const isWater = (amenityStr) =>
+  getAmenityBaseName(amenityStr)?.toUpperCase() === "WATER";
+
+const TooltipArrow = ({ color }) => (
+  <div
+    className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
+    style={{ borderBottomColor: color }}
+  />
+);
+
+const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
+  const priority = amenities.filter((id) => priorityIds.includes(id));
+  const nonPriority = amenities.filter((id) => !priorityIds.includes(id));
+  const hasPriority = priority.length > 0;
+
+  /* ============================
+       🇵🇪 PERU LOGIC
+  ============================ */
+  if (isPeru) {
+    return hasPriority
+      ? { visible: priority, plus: nonPriority }
+      : { visible: [], plus: amenities };
+  }
+
+  /* ============================
+       🌍 NON-PERU LOGIC
+  ============================ */
+  const sorted = [...amenities].sort(
+    (a, b) => Number(priorityIds.includes(b)) - Number(priorityIds.includes(a)),
+  );
+
+  return {
+    visible: sorted.slice(0, 3),
+    plus: sorted.slice(3),
+  };
+};
+
 const AmenitiesBlock = ({
   serviceItem,
   metaData,
@@ -19,100 +63,77 @@ const AmenitiesBlock = ({
     return null;
   }
 
-  const PRIORITY_IDS = ["2", "3", "13"];
+  const operatorPriorityIds = serviceItem?.operator_details?.[5];
+  const priorityIds =
+    operatorPriorityIds?.length > 0
+      ? operatorPriorityIds
+      : DEFAULT_PRIORITY_IDS;
 
   const amenities = [...serviceItem.operator_details[4]];
 
-  const priorityAmenities = amenities.filter((id) => PRIORITY_IDS.includes(id));
-
-  const nonPriorityAmenities = amenities.filter(
-    (id) => !PRIORITY_IDS.includes(id),
-  );
-
-  const hasPriority = priorityAmenities.length > 0;
-
-  /* ============================
-       🇵🇪 PERU LOGIC
-  ============================ */
-  let visibleAmenities = [];
-  let shouldShowPlus = false;
-  let plusAmenities = [];
-
-  if (isPeru) {
-    if (hasPriority) {
-      visibleAmenities = priorityAmenities;
-      shouldShowPlus = nonPriorityAmenities.length > 0;
-      plusAmenities = nonPriorityAmenities;
-    } else {
-      visibleAmenities = [];
-      shouldShowPlus = amenities.length > 0;
-      plusAmenities = amenities;
-    }
-  }
+  const { visible: visibleAmenities, plus: plusAmenities } = getAmenitySplit({
+    isPeru,
+    amenities,
+    priorityIds,
+  });
 
-  /* ============================
-       🌍 NON-PERU LOGIC
-  ============================ */
-  if (!isPeru) {
-    const sortedAmenities = [...amenities].sort(
-      (a, b) =>
-        Number(PRIORITY_IDS.includes(b)) - Number(PRIORITY_IDS.includes(a)),
-    );
-
-    visibleAmenities = sortedAmenities.slice(0, 3);
-    shouldShowPlus = sortedAmenities.length > 3;
-    plusAmenities = sortedAmenities.slice(3);
-  }
+  const shouldShowPlus = plusAmenities.length > 0;
+  const grayscaleClass = isSoldOut ? "grayscale" : "";
 
   return (
     <div className="flex items-center gap-[6px]">
-      {/* GPS */}
-      {serviceItem?.is_tracking_enabled && (
-        <div className={isSoldOut ? "grayscale" : ""}>
-          <LottiePlayer
-            animationData={getAnimationIcon("locationAnim")}
-            width="20px"
-            height="20px"
-          />
-        </div>
-      )}
-
       {/* AMENITIES */}
-      {visibleAmenities.map((val, key) =>
-        metaData.amenities[val]?.split(".")[0]?.toUpperCase() !== "WATER" ? (
+      {visibleAmenities.map((val, key) => {
+        const raw = metaData.amenities[val];
+        if (isWater(raw)) return null;
+        const baseName = getAmenityBaseName(raw);
+
+        return (
           <div key={key} className="relative group cursor-pointer">
-            <div className={`${isSoldOut ? "grayscale" : ""}`}>
+            <div className={grayscaleClass}>
               <SvgAmenities
                 moreAnemities={false}
-                name={metaData.amenities[val]?.split(".")[0]?.toLowerCase()}
+                name={baseName.toLowerCase()}
               />
             </div>
 
-            {/* Tooltip */}
+            {/* Tooltip – show ALL amenities */}
             <div
-              className="hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]"
+              className={TOOLTIP_CLASS}
               style={{
                 backgroundColor: colors.tooltipColor,
                 zIndex: 21,
                 padding: "12px",
               }}
             >
-              <div
-                className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
-                style={{
-                  borderBottomColor: colors.tooltipColor,
-                }}
-              />
-              {getAmenityName(
-                metaData.amenities[val]?.split(".")[0]?.split("_")?.join(" "),
-              )}
+              <TooltipArrow color={colors.tooltipColor} />
+              <div className="flex flex-col gap-[10px]">
+                {amenities.map((id, i) => {
+                  const rawItem = metaData.amenities[id];
+                  if (isWater(rawItem)) return null;
+                  const name = getAmenityBaseName(rawItem);
+                  return (
+                    <div
+                      key={i}
+                      className="flex items-center gap-[5px] text-xs whitespace-nowrap"
+                    >
+                      <SvgAmenities
+                        moreAnemities={true}
+                        name={name.toUpperCase()}
+                        color="white"
+                      />
+                      {getAmenityName(name.split("_").join(" "))}
+                    </div>
+                  );
+                })}
+              </div>
             </div>
           </div>
-        ) : null,
-      )}
+        );
+      })}
 
       {/* PLUS ICON */}
-      {shouldShowPlus && (
+      {/* {shouldShowPlus && (
         <div className="relative ml-1 cursor-pointer">
           <div className="group">
             <img
@@ -124,51 +145,48 @@ const AmenitiesBlock = ({
               alt="plus"
             />
 
-            <div
-              style={{ zIndex: 100 }}
-              className="hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]"
-            >
-              <div
-                className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
-                style={{
-                  borderBottomColor: colors.tooltipColor,
-                }}
-              ></div>
+            <div style={{ zIndex: 100 }} className={TOOLTIP_CLASS}>
+              <TooltipArrow color={colors.tooltipColor} />
 
               <div
                 className="flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md"
-                style={{
-                  backgroundColor: colors.tooltipColor,
-                }}
+                style={{ backgroundColor: colors.tooltipColor }}
               >
-                {plusAmenities.map((val, key) =>
-                  metaData.amenities[val]?.split(".")[0]?.toUpperCase() !==
-                  "WATER" ? (
+                {plusAmenities.map((val, key) => {
+                  const raw = metaData.amenities[val];
+                  if (isWater(raw)) return null;
+                  const baseName = getAmenityBaseName(raw);
+
+                  return (
                     <div
                       key={key}
                       className="flex items-center gap-[5px] text-xs whitespace-nowrap"
                     >
                       <SvgAmenities
                         moreAnemities={true}
-                        name={metaData.amenities[val]
-                          ?.split(".")[0]
-                          ?.toUpperCase()}
+                        name={baseName.toUpperCase()}
                         color="white"
                       />
-                      {getAmenityName(
-                        metaData.amenities[val]
-                          ?.split(".")[0]
-                          ?.split("_")
-                          ?.join(" "),
-                      )}
+                      {getAmenityName(baseName.split("_").join(" "))}
                     </div>
-                  ) : null,
-                )}
+                  );
+                })}
               </div>
             </div>
           </div>
         </div>
-      )}
+      )} */}
+
+      {/* GPS */}
+      {/* {serviceItem?.is_tracking_enabled && (
+        <div className={grayscaleClass}>
+          <LottiePlayer
+            animationData={getAnimationIcon("locationAnim")}
+            width="20px"
+            height="20px"
+          />
+        </div>
+      )} */}
     </div>
   );
 };

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import FlexibleBlock from "../FlexibleBlock";
+import PetBlock from "../PetBlock";
+
+interface ItemEntry {
+  key: string;
+  render: React.ReactNode;
+}
+
+interface BottomAmenitiesProps {
+  otherItems: ItemEntry[];
+  serviceItem: {
+    id: string;
+    is_tracking_enabled?: boolean;
+    is_change_ticket?: boolean;
+    pet_seat_info?: Record<string, any>;
+  };
+  grayscaleClass: string;
+  isSoldOut: boolean;
+  isItemExpanded: boolean;
+  colors: Record<string, any>;
+  translation?: { [key: string]: string };
+  getAnimationIcon: (icon: string) => any;
+  downArrowIcon?: React.ReactNode;
+  onToggleExpand: () => void;
+}
+
+function BottomAmenities({
+  otherItems,
+  serviceItem,
+  grayscaleClass,
+  isSoldOut,
+  isItemExpanded,
+  colors,
+  translation,
+  getAnimationIcon,
+  downArrowIcon,
+  onToggleExpand,
+}: BottomAmenitiesProps): React.ReactElement {
+  const hasPetInfo =
+    serviceItem.pet_seat_info &&
+    Object.keys(serviceItem.pet_seat_info).length > 0;
+
+  const showDownArrow =
+    (serviceItem?.is_change_ticket && serviceItem.pet_seat_info) ||
+    (serviceItem.pet_seat_info &&
+      Object.keys(serviceItem.pet_seat_info).length > 0);
+
+  return (
+    <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[6px]">
+      {/* OTHER ITEMS (GRID) */}
+      <div
+        className="grid items-center gap-[2%] flex-1 "
+        style={{
+          gridTemplateColumns: "18% 18% 23% 23%",
+        }}
+      >
+        {otherItems.map((item) => (
+          <div key={item.key} className="flex items-center">
+            {item.render}
+          </div>
+        ))}
+      </div>
+
+      {/* PET + FLEXIBLE (always visible) */}
+      <div className="flex items-center justify-end shrink-0 ml-[5px] w-[150px]">
+        {serviceItem?.is_tracking_enabled && (
+          <div className={grayscaleClass + " mr-[10px]"}>
+            <LottiePlayer
+              animationData={getAnimationIcon("locationAnim")}
+              width="20px"
+              height="20px"
+            />
+          </div>
+        )}
+        {serviceItem.is_change_ticket && (
+          <FlexibleBlock
+            translation={translation}
+            getAnimationIcon={getAnimationIcon}
+            colors={colors}
+            serviceItem={serviceItem}
+            isSoldOut={isSoldOut}
+          />
+        )}
+        {hasPetInfo && (
+          <PetBlock
+            translation={translation}
+            getAnimationIcon={getAnimationIcon}
+            colors={colors}
+            isSoldOut={isSoldOut}
+          />
+        )}
+
+        {/* DOWN ARROW ICON */}
+        {showDownArrow ? (
+          <div
+            className="flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px]"
+            onClick={onToggleExpand}
+          >
+            {downArrowIcon}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default BottomAmenities;

package/src/ui/DurationBlock.tsx

@@ -7,12 +7,12 @@ const DurationBlock = ({
   isSoldOut,
   colors,
 }) => (
-  <div className="flex items-baseline relative whitespace-nowrap">
+  <div className="flex items-baseline relative whitespace-nowrap ">
     <div className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}>
       {renderIcon("hours", "14px")}
     </div>
 
-    <div className="group text-[13.33px]">
+    <div className="group text-[13.33px] cursor-pointer">
       {serviceItem.duration} {translation.hours}
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+
+interface ExpandedDropdownProps {
+  serviceItem: {
+    pet_seat_info?: Record<string, any>;
+    is_change_ticket?: boolean;
+    is_tracking_enabled?: boolean;
+  };
+  showPromo: boolean;
+  colors: {
+    priceColor?: string;
+  };
+  grayscaleClass: string;
+  translation?: { [key: string]: string };
+  getAnimationIcon: (icon: string) => any;
+}
+
+function ExpandedDropdown({
+  serviceItem,
+  showPromo,
+  colors,
+  grayscaleClass,
+  translation,
+  getAnimationIcon,
+}: ExpandedDropdownProps): React.ReactElement {
+  const hasPetInfo =
+    serviceItem.pet_seat_info &&
+    Object.keys(serviceItem.pet_seat_info).length > 0;
+
+  return (
+    <div
+      className="px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[20px] relative -z-9"
+      style={{
+        backgroundColor: "#f5f5f5",
+        borderRadius: "0 0 10px 10px",
+        // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
+        border: `1px solid ${colors.priceColor}`,
+
+        borderTop: "none",
+      }}
+    >
+      <div className="flex flex-col gap-[12px] text-[13px] text-[#464647]">
+        {hasPetInfo && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("petFriendlyAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.petFriendly}</span>
+            </div>
+          </div>
+        )}
+        {serviceItem.is_change_ticket && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("flexibleIcon")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.flexible}</span>
+            </div>
+          </div>
+        )}
+        {serviceItem?.is_tracking_enabled && (
+          <div className={`${grayscaleClass} flex items-center gap-[10px]`}>
+            <LottiePlayer
+              animationData={getAnimationIcon("locationAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{"GPS Tracker"}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ExpandedDropdown;

package/src/ui/FlexibleBlock.tsx

@@ -9,7 +9,7 @@ const FlexibleBlock = ({
   isSoldOut,
 }) => (
   <div className="flex items-center">
-    <div className="relative group cursor-default">
+    <div className="relative group cursor-pointer">
       <div className="flex items-center">
         <div className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}>
           <LottiePlayer
@@ -19,9 +19,9 @@ const FlexibleBlock = ({
             height="20px"
           />
         </div>
-        <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
+        {/* <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
           <span>{translation?.flexible}</span>
-        </div>
+        </div> */}
       </div>
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"

package/src/ui/KuposButton/KuposButton.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+interface KuposButtonProps {
+  isSoldOut: boolean;
+  isLoading: boolean;
+  buttonColor?: string;
+  buyLabel?: string;
+  soldOutLabel?: string;
+  soldOutIcon?: React.ReactNode;
+  onClick: () => void;
+}
+
+function KuposButton({
+  isSoldOut,
+  isLoading,
+  buttonColor,
+  buyLabel,
+  soldOutLabel,
+  soldOutIcon,
+  onClick,
+}: KuposButtonProps): React.ReactElement {
+  const isDisabled = isLoading || isSoldOut;
+
+  return (
+    <button
+      onClick={() => (!isSoldOut ? onClick() : null)}
+      disabled={isLoading}
+      className="w-full py-[12px] text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center"
+      style={{
+        backgroundColor: isDisabled ? "lightgray" : buttonColor,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+      }}
+    >
+      <span className="min-w-[75px] flex justify-center items-center bold-text uppercase">
+        {isSoldOut ? soldOutIcon : null}
+        {isLoading ? (
+          <span className="loader-circle"></span>
+        ) : !isSoldOut ? (
+          buyLabel
+        ) : (
+          soldOutLabel
+        )}
+      </span>
+    </button>
+  );
+}
+
+export default KuposButton;

package/src/ui/PetBlock.tsx

@@ -13,9 +13,9 @@ const PetBlock = ({ translation, getAnimationIcon, colors, isSoldOut }) => (
             height="20px"
           />
         </div>
-        <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
+        {/* <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
           <span>{translation?.petFriendly}</span>
-        </div>
+        </div> */}
       </div>
       <div
         className=" hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service"

package/src/ui/RatingBlock.tsx

@@ -20,15 +20,27 @@ const RatingBlock = ({
       />
     )}
 
-    <span
-      className="ml-[10px] text-[13.33px]"
+    <div
+      className="group relative ml-[10px] text-[13.33px]"
       style={{
         marginLeft: showRating ? "10px" : "0",
         color: isSoldOut ? "#c0c0c0" : "#464647",
       }}
     >
-      {serviceItem.operator_details[2]}
-    </span>
+      <span className="block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer">
+        {serviceItem.operator_details[2]}
+      </span>
+      <div
+        className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
+        style={{ backgroundColor: colors.tooltipColor }}
+      >
+        <div
+          className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
+          style={{ borderBottomColor: colors.tooltipColor }}
+        ></div>
+        {serviceItem.operator_details[2]}
+      </div>
+    </div>
   </div>
 );