kupos-ui-components-lib 9.9.9 → 9.9.10

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -131,13 +131,6 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -151,15 +144,6 @@ function ServiceItemPB({
   wowDealData,
   isFlores,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const handleSeatSelect = (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => {
-    onClearSeatSelectionError?.();
-    onSeatSelect?.(key, price, seatKey, apiSeatType);
-  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -259,7 +243,7 @@ function ServiceItemPB({
         }
       : {};
 
-  const renderIcon = (iconKey: string, size: string = "14px") => {
+  const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
     const iconValue = serviceItem.icons?.[iconKey];
     if (iconValue) {
       if (typeof iconValue === "string") {
@@ -268,6 +252,9 @@ function ServiceItemPB({
             src={iconValue}
             alt={iconKey}
             className={`${`w-[${size}] h-[${size}]`} `}
+            style={{
+              ...(styles || {}),
+            }}
           />
         );
       }
@@ -357,17 +344,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -511,11 +487,11 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
+          className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
-              ? "mt-[24px]"
+              ? "mt-[30px]"
               : "mt-[20px]"
           }	`}
         >
@@ -621,10 +597,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -640,18 +612,6 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
-                  {showSeatSelectionError === serviceItem.id && isTrain && (
-                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
-                      <div
-                        className="text-[9px] text-center whitespace-nowrap"
-                        style={{
-                          color: colors.seatPriceColor,
-                        }}
-                      >
-                        Selecciona el tipo de servicio
-                      </div>
-                    </div>
-                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -46,8 +46,6 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
-  operatorLabel,
-  isTrain,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -148,7 +146,7 @@ function ServiceItemMobile({
     return nodes;
   };
 
-  const renderIcon = (iconKey: string, size: string = "14px") => {
+  const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
     const iconValue = serviceItem.icons?.[iconKey];
     if (iconValue) {
       if (typeof iconValue === "string") {
@@ -157,7 +155,10 @@ function ServiceItemMobile({
             src={iconValue}
             alt={iconKey}
             className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
-            style={{ filter: isSoldOut ? "grayscale" : "" }}
+            style={{
+              filter: isSoldOut ? "grayscale" : "",
+              ...(styles || {}),
+            }}
           />
         );
       }
@@ -225,7 +226,15 @@ function ServiceItemMobile({
             }`}
             style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
           >
-            <div style={{ padding: "12px 12px 8px 12px" }}>
+            <div
+              style={{
+                padding: "12px 12px 8px 12px",
+                marginTop:
+                  serviceItem?.is_direct_trip && showTopLabel && isConexion
+                    ? " 10px"
+                    : "",
+              }}
+            >
               {/* Header with operator info and favorite */}
               <div className="flex justify-between  items-center mb-[10px]">
                 <div

package/src/components/ServiceItem/mobileTypes.ts

@@ -135,36 +135,36 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string;
+      personIcon?: string
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string;
-      femaleAnim?: string;
-      thunderAnim?: string;
-      personsAnim?: string;
-      whiteOrigin?: string;
-      whiteDestination?: string;
-      userIcon?: string;
-
-      sheildIcon?: string;
-      busIcon?: string;
-      whiteDownArrow?: string;
-      empressaIcon?: string;
-      flexibleIcon?: string;
-      listoIcon?: string;
-      precioIcon?: string;
-      confirmarIcon?: string;
+      whiteFireIcon?: string
+      femaleAnim?:string
+       thunderAnim?: string
+       personsAnim?: string
+        whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+      empressaIcon?: string,
+      flexibleIcon?: string,
+      listoIcon?: string,
+      precioIcon?: string,
+      confirmarIcon?: string
       cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string;
+      womenSeatIcon?: string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
-  onRemateUiButtonClick?: () => void;
+  onRemateUiButtonClick?: ()=> void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -208,7 +208,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string;
+    discountSeatPriceColor?: string
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -221,29 +221,23 @@ export interface MobileServiceItemProps {
   showLastSeats?: boolean;
   removeDuplicateSeats?: boolean;
   isLinatal?: boolean;
-  viewersConfig?: {
+    viewersConfig?: {
     min: number;
     max: number;
     interval?: number; // ms, default 5000
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
-  operatorLabel?: string;
-  isTrain?: boolean;
-  isFeatureDropDownExpand?: any;
+   isFeatureDropDownExpand?: any;
   setIsFeatureDropDownExpand?: (value: any) => void;
   ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
-  onDecreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
+  onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
-  isNewUi?: boolean;
+    isNewUi?: boolean
 
-  selectedTimeSlot?: string;
+    selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;
   onTimeDropdownToggle?: (id?: string | number | null) => void;

package/src/components/ServiceItem/types.ts

@@ -252,18 +252,6 @@ export interface ServiceItemProps {
   showLoginModal?: any;
   isLoggedIn?: any;
   showLoginOption?: boolean;
-  isTrain?: boolean;
-  selectedSeatKey?: any;
-  onSeatSelect?: (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => void;
-  onTrainButtonClick?: any;
-  showSeatSelectionError?: string | null;
-  onShowSeatSelectionError?: (serviceId: string) => void;
-  onClearSeatSelectionError?: () => void;
   selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;

package/src/ui/OfferBanner.tsx

@@ -38,7 +38,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
 }) => {
   return (
     <div
-      className="text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
+      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px]  rounded-b-[14px] text-[14px] mt-[10px]"
       style={{
         background:
           serviceItem?.offer_text && !isNewUiEnabled

package/src/ui/SeatSection/SeatSection.tsx

@@ -7,8 +7,6 @@ interface SeatType {
   label: string;
   fare: number;
   key: any;
-  apiSeatType?: string;
-  api_seat_type?: string;
 }
 
 interface SeatSectionProps {
@@ -23,15 +21,6 @@ interface SeatSectionProps {
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
-  isTrain?: boolean;
-  selectedSeatKey?: any;
-  onSeatSelect?: (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => void;
-  topLabelColor?: string;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -42,8 +31,6 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
     label: val?.label,
     price: val?.fare,
-    key: val?.key,
-    apiSeatType: val?.apiSeatType || val?.api_seat_type,
   }));
 
   seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -51,7 +38,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   return seatTypesWithPrices;
 }
 
-function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
+function getSortedSeatTypes(seatTypes: SeatType[]) {
   if (!seatTypes?.length) {
     return [{ label: "Salon cama", price: 0 }];
   }
@@ -65,9 +52,7 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  if (!isTrain) {
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-  }
+  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -112,18 +97,14 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
-  selectedSeatKey,
-  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
-  isTrain,
-  topLabelColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
+  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -135,68 +116,22 @@ function SeatSection({
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
-    return seats.map((val, key: number) => {
-      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <div
-          className="flex items-center"
-          style={isTrain ? { cursor: "pointer" } : undefined}
-          onClick={
-            isTrain && !isSoldOut
-              ? () =>
-                  val.label === selectedSeatKey
-                    ? onSeatSelect?.(null, 0, "", "")
-                    : onSeatSelect?.(
-                        val.label,
-                        val.price,
-                        val.key,
-                        (val as any).apiSeatType,
-                      )
-              : undefined
-          }
+    return seats.map((val, key: number) =>
+      SEAT_EXCEPTIONS.includes(val.label) ? null : (
+        <span
+          key={key}
+          className={`flex items-center justify-between text-[13.33px] ${
+            isSoldOut ? "text-[#c0c0c0]" : ""
+          }`}
         >
-          {isTrain && (
-            <div
-              style={{
-                border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
-                borderRadius: "50%",
-                width: "14px",
-                height: "14px",
-                minWidth: "14px",
-                marginRight: "10px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {val.label === selectedSeatKey && (
-                <div
-                  style={{
-                    backgroundColor: topLabelColor,
-                    borderRadius: "50%",
-                    width: "7px",
-                    height: "7px",
-                  }}
-                />
-              )}
-            </div>
-          )}
-          <span
-            key={key}
-            className={`flex items-center justify-between text-[13.33px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
-          >
-            {typeof val.label === "string" || typeof val.label === "number"
-              ? removeDuplicateSeats && isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : isTrain
-                  ? CommonService.truncateSeatLabel(val.label, 8)
-                  : val.label
-              : null}
-          </span>
-        </div>
-      );
-    });
+          {typeof val.label === "string" || typeof val.label === "number"
+            ? removeDuplicateSeats && isPeru
+              ? CommonService.truncateSeatLabel(val.label)
+              : val.label
+            : null}
+        </span>
+      ),
+    );
   };
 
   const renderSeatPrices = () => {

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -4,7 +4,7 @@ interface ServiceBadgesProps {
   showTopLabel?: string;
   isSoldOut: boolean;
   colors: any;
-  renderIcon: (iconKey: string, size?: string) => React.ReactNode;
+  renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
   translation?: {
     directService?: string;
   };
@@ -36,9 +36,11 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
             color: isSoldOut ? "#ccc" : colors.topLabelColor,
           }}
         >
-          <div className={isSoldOut ? "grayscale" : ""}>
-            {renderIcon("specialDeparture", "12px")}
-          </div>
+          {/* <div className={isSoldOut ? "grayscale" : ""}> */}
+          {renderIcon("specialDeparture", "12px", {
+            filter: isSoldOut ? "grayscale(0.5)" : "",
+          })}
+          {/* </div> */}
           <div>{showTopLabel}</div>
         </div>
       )}

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -25,7 +25,6 @@ interface DateTimeSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
-  isTrain?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -68,43 +67,41 @@ const TimeRow: React.FC<TimeRowProps> = ({
   isSoldOut,
 }) => {
   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]" : ""
-      }`}
-    >
-      <div className="flex items-center" style={{ flex: 1 }}>
-        <div>
-          {" "}
-          {label ? (
-            <div className="w-[60px]">{label}</div>
-          ) : (
-            <div className="w-[12px] h-auto mr-[5px]">
-              <img
-                src={icon}
-                alt={alt}
-                className={`w-[12px] h-auto mr-[5px] ${
-                  isSoldOut ? "grayscale" : ""
-                }`}
-              />
-            </div>
-          )}
-        </div>
-        <div
-          className="flex items-center relative capitalize justify-between"
-          style={{ flex: 1 }}
-        >
-          <span className="cursor-pointer black-text">{formattedDate}</span>
-          <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
-          <div className="font-[900] relative black-text">{timeContent}</div>
-        </div>
+  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]" : ""
+    }`}
+  >
+    <div className="flex items-center" style={{ flex: 1 }}>
+      <div>
+        {" "}
+        {label ? (
+          <div className="w-[60px]">{label}</div>
+        ) : (
+          <div className="w-[12px] h-auto mr-[5px]">
+            <img
+              src={icon}
+              alt={alt}
+              className={`w-[12px] h-auto mr-[5px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            />
+          </div>
+        )}
+      </div>
+      <div
+        className="flex items-center relative capitalize justify-between"
+        style={{ flex: 1 }}
+      >
+        <span className="cursor-pointer black-text">
+          {formattedDate}
+        </span>
+        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
+        <div className="font-[900] relative black-text">{timeContent}</div>
       </div>
     </div>
-  );
+  </div>;
 };
 
 function DateTimeSectionMobile({
@@ -130,7 +127,6 @@ function DateTimeSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
-  isTrain,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -157,12 +153,8 @@ function DateTimeSectionMobile({
     >
       {/* DATE AND TIME */}
       <div
-        className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
-        style={{
-          justifyContent: isCiva && "center",
-          minHeight: isTrain ? undefined : "2.5rem",
-          alignSelf: isTrain ? "stretch" : undefined,
-        }}
+        className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
+        style={{ justifyContent: isCiva && "center" }}
       >
         <TimeRow
           label={orignLabel}
@@ -206,7 +198,6 @@ function DateTimeSectionMobile({
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
         discountSeatPriceColor={discountSeatPriceColor}
-        isTrain={isTrain}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -31,7 +31,6 @@ interface SeatSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
-  isTrain?: boolean;
 }
 
 interface SeatRowProps {
@@ -43,7 +42,6 @@ interface SeatRowProps {
   seatPriceColor: string;
   hasMultipleTypes: boolean;
   textSize: string;
-  isTrain?: boolean;
 }
 
 const SeatRow: React.FC<SeatRowProps> = ({
@@ -55,7 +53,6 @@ const SeatRow: React.FC<SeatRowProps> = ({
   seatPriceColor,
   hasMultipleTypes,
   textSize,
-  isTrain,
 }) => {
   if (EXCEPTIONS.includes(type.label)) return null;
 
@@ -72,9 +69,7 @@ const SeatRow: React.FC<SeatRowProps> = ({
         className={`min-[420]:text-[13px] ${textSize} `}
         style={{ color: labelColor }}
       >
-        {isTrain
-          ? commonService.truncateSeatLabel(displayLabel, 8)
-          : displayLabel}
+        {displayLabel}
       </span>
       <span
         className={`min-[420]:text-[13px] ${textSize}  bold-text`}
@@ -123,7 +118,6 @@ function SeatSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
-  isTrain,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -284,17 +278,15 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[11px]"
-          isTrain={isTrain}
         />
       ));
     }
 
-    const filteredSeats = seatTypesData
+    return seatTypesData
       ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare);
-
-    return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))?.map(
-      (type, i) => (
+      ?.sort((a, b) => a.fare - b.fare)
+      ?.slice(0, 2)
+      ?.map((type, i) => (
         <SeatRow
           key={i}
           type={type}
@@ -305,20 +297,16 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[12px]"
-          isTrain={isTrain}
         />
-      ),
-    );
+      ));
   };
 
   const seats = removeDuplicateSeats
     ? getUniqueSeats(seatTypesData, 3)
-    : (() => {
-        const filtered = seatTypesData
-          ?.filter((item) => getFilteredSeats(item.label))
-          ?.sort((a, b) => a.fare - b.fare);
-        return isTrain ? filtered : filtered?.slice(0, 2);
-      })();
+    : seatTypesData
+        ?.filter((item) => getFilteredSeats(item.label))
+        ?.sort((a, b) => a.fare - b.fare)
+        ?.slice(0, 2);
 
   const discountedSeats = seats?.map((seat) => ({
     ...seat,
@@ -553,7 +541,7 @@ function SeatSectionMobile({
         </div>
       ) : (
         <div
-          className={`flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `}
+          className="flex flex-col justify-between h-[2.5rem] "
           style={{
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",