kupos-ui-components-lib 9.0.3 → 9.0.5

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -38,6 +38,7 @@ import StageTooltip from "../../ui/StagesTooltip";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, }) {
     var _a, _b;
+    console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
     const animationMap = {
         promoAnim: {
             kupos: promoAnimation,

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -74,7 +74,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] ", style: {
                         // marginLeft: "10px",
                         color: isSoldOut ? "#bbb" : "#464647",
-                    } }, type.label),
+                    } }, commonService.truncateSeatLabel(type.label)),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[11px]  bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) <= 0 && !isPeru
                     ? commonService.currency(0, currencySign)
                     : commonService.currency(type.fare, currencySign))));
@@ -183,11 +183,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             : typeof raw === "string"
                 ? raw.split("|").filter(Boolean)
                 : [];
-        const nodes = list
-            .slice(0, 2)
-            .map((am, i) => {
+        const nodes = list.slice(0, 2).map((am, i) => {
             var _a;
-            return (React.createElement("img", { key: i, className: "amenity", height: 14, width: 14, src: getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase()), alt: "icon" }));
+            return (React.createElement("img", { key: i, className: "amenity", height: 14, width: 14, 
+                // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
+                src: commonService.getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), serviceItem), alt: "icon" }));
         });
         return nodes;
     };

package/dist/styles.css

@@ -3,6 +3,9 @@
 .pointer-events-none {
   pointer-events: none;
 }
+.visible {
+  visibility: visible;
+}
 .absolute {
   position: absolute;
 }

package/dist/ui/AmenitiesBlock.js

@@ -1,78 +1,83 @@
 import React from "react";
 import LottiePlayer from "../assets/LottiePlayer";
-const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
-    var _a, _b;
-    if (!metaData ||
-        !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
-        !serviceItem.operator_details[4].length) {
-        return null;
-    }
-    const PRIORITY_IDS = ["2", "3", "13"];
-    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;
+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) => { var _a; return (_a = amenityStr === null || amenityStr === void 0 ? void 0 : amenityStr.split(".")[0]) !== null && _a !== void 0 ? _a : ""; };
+const isWater = (amenityStr) => { var _a; return ((_a = getAmenityBaseName(amenityStr)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "WATER"; };
+const TooltipArrow = ({ color }) => (React.createElement("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
     ============================ */
-    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;
-        }
+        return hasPriority
+            ? { visible: priority, plus: nonPriority }
+            : { visible: [], plus: amenities };
     }
     /* ============================
          🌍 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 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, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
+    var _a, _b, _c;
+    if (!metaData ||
+        !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
+        !serviceItem.operator_details[4].length) {
+        return null;
     }
+    const operatorPriorityIds = (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _b === void 0 ? void 0 : _b[5];
+    const priorityIds = (operatorPriorityIds === null || operatorPriorityIds === void 0 ? void 0 : operatorPriorityIds.length) > 0
+        ? operatorPriorityIds
+        : DEFAULT_PRIORITY_IDS;
+    const amenities = [...serviceItem.operator_details[4]];
+    const { visible: visibleAmenities, plus: plusAmenities } = getAmenitySplit({
+        isPeru,
+        amenities,
+        priorityIds,
+    });
+    const shouldShowPlus = plusAmenities.length > 0;
+    const grayscaleClass = isSoldOut ? "grayscale" : "";
     return (React.createElement("div", { className: "flex items-center gap-[6px]" },
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
+        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass },
             React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
         visibleAmenities.map((val, key) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
-                React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
-                    React.createElement(SvgAmenities, { moreAnemities: false, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toLowerCase() })),
-                React.createElement("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]", style: {
+            const raw = metaData.amenities[val];
+            if (isWater(raw))
+                return null;
+            const baseName = getAmenityBaseName(raw);
+            return (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
+                React.createElement("div", { className: grayscaleClass },
+                    React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
+                React.createElement("div", { className: TOOLTIP_CLASS, style: {
                         backgroundColor: colors.tooltipColor,
                         zIndex: 21,
                         padding: "12px",
                     } },
-                    React.createElement("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((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
+                    React.createElement(TooltipArrow, { color: colors.tooltipColor }),
+                    getAmenityName(baseName.split("_").join(" ")))));
         }),
         shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
             React.createElement("div", { className: "group" },
-                React.createElement("img", { src: ((_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.plus) ||
+                React.createElement("img", { src: ((_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.plus) ||
                         "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
-                React.createElement("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]" },
-                    React.createElement("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,
-                        } }),
-                    React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: {
-                            backgroundColor: colors.tooltipColor,
-                        } }, plusAmenities.map((val, key) => {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !==
-                            "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
-                            React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" }),
-                            getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))) : null;
+                React.createElement("div", { style: { zIndex: 100 }, className: TOOLTIP_CLASS },
+                    React.createElement(TooltipArrow, { color: colors.tooltipColor }),
+                    React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: { backgroundColor: colors.tooltipColor } }, plusAmenities.map((val, key) => {
+                        const raw = metaData.amenities[val];
+                        if (isWater(raw))
+                            return null;
+                        const baseName = getAmenityBaseName(raw);
+                        return (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
+                            React.createElement(SvgAmenities, { moreAnemities: true, name: baseName.toUpperCase(), color: "white" }),
+                            getAmenityName(baseName.split("_").join(" "))));
                     }))))))));
 };
 export default AmenitiesBlock;

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -72,6 +72,7 @@ function ServiceItemPB({
   siteType,
   isAllinBus,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
   const animationMap: Record<string, Record<string, any>> = {
     promoAnim: {
       kupos: promoAnimation,

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -116,8 +116,8 @@ function ServiceItemMobile({
     const uniqueSeats = Array.from(seatMap.values())
       .sort((a, b) => a.fare - b.fare)
       .slice(0, 3);
-    return uniqueSeats.map((type, i) =>
-      exceptions.includes(type.label) ? null : (
+    return uniqueSeats.map((type, i) => {
+      return exceptions.includes(type.label) ? null : (
         <div
           className={
             serviceItem.seat_types?.length > 2
@@ -133,7 +133,7 @@ function ServiceItemMobile({
               color: isSoldOut ? "#bbb" : "#464647",
             }}
           >
-            {type.label}
+            {commonService.truncateSeatLabel(type.label)}
           </span>
           <span
             className={"min-[420]:text-[13px] text-[11px]  bold-text"}
@@ -149,8 +149,8 @@ function ServiceItemMobile({
               : commonService.currency(type.fare, currencySign)}
           </span>
         </div>
-      ),
-    );
+      );
+    });
   };
 
   const getFilteredSeats = (item) => {
@@ -257,18 +257,20 @@ function ServiceItemMobile({
         ? raw.split("|").filter(Boolean)
         : [];
 
-    const nodes = list
-      .slice(0, 2)
-      .map((am, i) => (
-        <img
-          key={i}
-          className="amenity"
-          height={14}
-          width={14}
-          src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
-          alt="icon"
-        />
-      ));
+    const nodes = list.slice(0, 2).map((am, i) => (
+      <img
+        key={i}
+        className="amenity"
+        height={14}
+        width={14}
+        // src={getAmenitiesImage(amenitiesData?.[am]?.toLowerCase())}
+        src={commonService.getAmenitiesImage(
+          amenitiesData?.[am]?.toLowerCase(),
+          serviceItem,
+        )}
+        alt="icon"
+      />
+    ));
 
     return nodes;
   };

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,56 +63,28 @@ 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 { visible: visibleAmenities, plus: plusAmenities } = getAmenitySplit({
+    isPeru,
+    amenities,
+    priorityIds,
+  });
 
-  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;
-    }
-  }
-
-  /* ============================
-       🌍 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" : ""}>
+        <div className={grayscaleClass}>
           <LottiePlayer
             animationData={getAnimationIcon("locationAnim")}
             width="20px"
@@ -78,38 +94,35 @@ const AmenitiesBlock = ({
       )}
 
       {/* 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 */}
             <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} />
+              {getAmenityName(baseName.split("_").join(" "))}
             </div>
           </div>
-        ) : null,
-      )}
+        );
+      })}
 
       {/* PLUS ICON */}
       {shouldShowPlus && (
@@ -124,46 +137,32 @@ 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>