kupos-ui-components-lib 9.1.5 → 9.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ServiceItem/ServiceItemMobile.js +49 -35
  2. package/dist/styles.css +5 -13
  3. package/dist/ui/DateTimeSection/DateTimeSection.js +2 -2
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/ServiceItemMobile.tsx +81 -84
  6. package/src/ui/DateTimeSection/DateTimeSection.tsx +4 -4
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -107,7 +107,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
107
107
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
108
108
  isConexion = true;
109
109
  }
110
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
110
+ return (React.createElement("div", {
111
+ // className={`relative ${
112
+ // serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
113
+ // }
114
+ className: `relative ${serviceItem.offer_text ? "" : "mb-[14px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
111
115
  isConexion ||
112
116
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
113
117
  showTopLabel
@@ -147,38 +151,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
147
151
  onDropdownToggle: () => {
148
152
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
149
153
  } })),
150
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] z-10 rounded-b-[14px] min-[420]:text-[14px] text-[12px]`, style: {
151
- backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
152
- zIndex: -1,
153
- color: "#fff",
154
- left: "0px",
155
- opacity: isSoldOut ? 0.5 : 1,
156
- } },
157
- React.createElement("div", { className: "flex flex-col" },
158
- React.createElement("div", null,
159
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" }),
160
- React.createElement("div", { className: " flex items-center mt-[2px]" },
161
- React.createElement("span", { className: "ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]" },
162
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
163
- "\u00A0"),
164
- " ",
165
- "| Termina en\u00A0",
166
- React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
167
- fontVariantNumeric: "tabular-nums",
168
- display: "inline-block",
169
- // minWidth: "70px",
170
- } })),
171
- React.createElement("div", { className: "flex items-center" },
172
- renderIcon("personIcon", "16px"),
173
- "\u00A0",
174
- React.createElement("span", { className: "ml-[6px]" },
175
- React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
176
- " ",
177
- React.createElement("span", { className: "bold-text" }, "personas"),
178
- " ",
179
- React.createElement("span", null,
180
- " ",
181
- viewersConfig.label || " están viendo este viaje"))))))),
182
154
  React.createElement("div", { className: "absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 " },
183
155
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
184
156
  backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
@@ -196,15 +168,57 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
196
168
  } },
197
169
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
198
170
  React.createElement("div", null, "Tren Express"))))),
171
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9 -mt-[15px]", style: {
172
+ backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
173
+ opacity: isSoldOut ? 0.5 : 1,
174
+ borderRadius: "0 0 14px 14px",
175
+ zIndex: -1,
176
+ } },
177
+ React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
178
+ React.createElement("div", { className: "flex flex-col" },
179
+ React.createElement("div", { className: "flex items-center" },
180
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" }),
181
+ React.createElement("div", { className: "ml-[6px] flex items-center mt-[2px]", style: {
182
+ color: "#fff",
183
+ } },
184
+ React.createElement("span", { className: " min-[380px]:text-[12px]" },
185
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
186
+ "\u00A0"),
187
+ " ",
188
+ "| Termina en\u00A0",
189
+ React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
190
+ fontVariantNumeric: "tabular-nums",
191
+ display: "inline-block",
192
+ // minWidth: "70px",
193
+ } }))),
194
+ React.createElement("div", { className: "flex items-center", style: {
195
+ color: "#fff",
196
+ } },
197
+ renderIcon("personIcon", "16px"),
198
+ "\u00A0",
199
+ React.createElement("span", { className: "" },
200
+ React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
201
+ " ",
202
+ React.createElement("span", { className: "bold-text" }, "personas"),
203
+ " ",
204
+ React.createElement("span", null,
205
+ " ",
206
+ viewersConfig.label || " están viendo este viaje"))))))),
199
207
  React.createElement("div", { style: {
200
208
  display: "grid",
201
209
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
202
210
  opacity: isItemExpanded ? 1 : 0,
203
211
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
204
212
  position: "relative",
205
- zIndex: -1,
213
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -2 : -1,
206
214
  } },
207
- React.createElement("div", { style: { overflow: "hidden", minHeight: 0, marginTop: "-10px" } },
215
+ React.createElement("div", { style: {
216
+ overflow: "hidden",
217
+ minHeight: 0,
218
+ position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "relative" : undefined,
219
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
220
+ marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
221
+ } },
208
222
  React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem })))));
209
223
  }
210
224
  export default ServiceItemMobile;
package/dist/styles.css CHANGED
@@ -60,9 +60,6 @@
60
60
  .-bottom-\[30px\] {
61
61
  bottom: calc(30px * -1);
62
62
  }
63
- .-bottom-\[35px\] {
64
- bottom: calc(35px * -1);
65
- }
66
63
  .-bottom-\[36px\] {
67
64
  bottom: calc(36px * -1);
68
65
  }
@@ -126,6 +123,9 @@
126
123
  .mx-auto {
127
124
  margin-inline: auto;
128
125
  }
126
+ .-mt-\[15px\] {
127
+ margin-top: calc(15px * -1);
128
+ }
129
129
  .-mt-\[16px\] {
130
130
  margin-top: calc(16px * -1);
131
131
  }
@@ -710,9 +710,6 @@
710
710
  .text-left {
711
711
  text-align: left;
712
712
  }
713
- .text-\[6px\] {
714
- font-size: 6px;
715
- }
716
713
  .text-\[10px\] {
717
714
  font-size: 10px;
718
715
  }
@@ -877,14 +874,9 @@
877
874
  font-size: 13px;
878
875
  }
879
876
  }
880
- .min-\[420\]\:text-\[14px\] {
881
- @media (width >= 420) {
882
- font-size: 14px;
883
- }
884
- }
885
- .min-\[380px\]\:text-\[11px\] {
877
+ .min-\[380px\]\:text-\[12px\] {
886
878
  @media (width >= 380px) {
887
- font-size: 11px;
879
+ font-size: 12px;
888
880
  }
889
881
  }
890
882
  .min-\[420px\]\:text-\[12px\] {
package/dist/ui/DateTimeSection/DateTimeSection.js CHANGED
@@ -33,14 +33,14 @@ function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArri
33
33
  React.createElement("div", { className: "flex flex-col gap-[4px]" },
34
34
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
35
35
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
36
- !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
36
+ !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
37
37
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
38
38
  React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
39
39
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
40
40
  React.createElement("div", null, "\u2022")),
41
41
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
42
42
  React.createElement("div", { className: "flex flex-col gap-[4px]" },
43
- React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
43
+ React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
44
44
  React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
45
45
  cleanedDepTime,
46
46
  " ",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.1.5",
3
+ "version": "9.1.6",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -169,9 +169,10 @@ function ServiceItemMobile({
169
169
 
170
170
  return (
171
171
  <div
172
- className={`relative ${
173
- serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
174
- } ${
172
+ // className={`relative ${
173
+ // serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
174
+ // }
175
+ className={`relative ${serviceItem.offer_text ? "" : "mb-[14px]"} ${
175
176
  serviceItem?.is_direct_trip ||
176
177
  isConexion ||
177
178
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -323,85 +324,6 @@ function ServiceItemMobile({
323
324
  />
324
325
  </div>
325
326
 
326
- {serviceItem?.offer_text && (
327
- <div
328
- className={` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] z-10 rounded-b-[14px] min-[420]:text-[14px] text-[12px]`}
329
- style={{
330
- backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
331
- zIndex: -1,
332
- color: "#fff",
333
- left: "0px",
334
- opacity: isSoldOut ? 0.5 : 1,
335
- }}
336
- >
337
- {/* <div className="flex justify-between items-center w-full">
338
- <div className="flex items-center">
339
- <LottiePlayer
340
- animationData={serviceItem.icons.bombAnim}
341
- width="18px"
342
- height="18px"
343
- />
344
- <span className="bold-text ml-[8px]">
345
- {" "}
346
- {serviceItem?.offer_text || ""}
347
- </span>
348
- </div>
349
- <div>
350
- Termina en&nbsp;
351
- <span
352
- className="bold-text text-end"
353
- ref={startCountdown}
354
- style={{
355
- fontVariantNumeric: "tabular-nums",
356
- display: "inline-block",
357
- // minWidth: "70px",
358
- }}
359
- />
360
- </div>
361
- </div> */}
362
- <div className="flex flex-col">
363
- <div>
364
- <LottiePlayer
365
- animationData={serviceItem.icons.bombAnim}
366
- width="18px"
367
- height="18px"
368
- />
369
- <div className=" flex items-center mt-[2px]">
370
- <span className="ml-[6px] text-[#fff] min-[380px]:text-[11px] text-[6px]">
371
- {serviceItem?.offer_text || ""}&nbsp;
372
- </span>{" "}
373
- | Termina en&nbsp;
374
- <span
375
- className="bold-text"
376
- ref={startCountdown}
377
- style={{
378
- fontVariantNumeric: "tabular-nums",
379
- display: "inline-block",
380
- // minWidth: "70px",
381
- }}
382
- />
383
- </div>
384
- <div className="flex items-center">
385
- {renderIcon("personIcon", "16px")}
386
- &nbsp;
387
- <span className="ml-[6px]">
388
- <span
389
- className="bold-text"
390
- ref={startViewerCount}
391
- style={{ fontVariantNumeric: "tabular-nums" }}
392
- />{" "}
393
- <span className="bold-text">personas</span>{" "}
394
- <span>
395
- {" "}
396
- {viewersConfig.label || " están viendo este viaje"}
397
- </span>
398
- </span>
399
- </div>
400
- </div>
401
- </div>
402
- </div>
403
- )}
404
-
405
327
  <div className="absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 ">
406
328
  {showTopLabel && (
407
329
  <div
@@ -460,6 +382,73 @@ function ServiceItemMobile({
460
382
  </div>
461
383
 
462
384
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
385
+ {serviceItem?.offer_text && (
386
+ <div
387
+ className="px-[12px] pt-[22px] pb-[12px] relative -z-9 -mt-[15px]"
388
+ style={{
389
+ backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
390
+ opacity: isSoldOut ? 0.5 : 1,
391
+ borderRadius: "0 0 14px 14px",
392
+ zIndex: -1,
393
+ }}
394
+ >
395
+ <div
396
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
397
+ style={{ lineHeight: 1.6 }}
398
+ >
399
+ <div className="flex flex-col">
400
+ <div className="flex items-center">
401
+ <LottiePlayer
402
+ animationData={serviceItem.icons.bombAnim}
403
+ width="18px"
404
+ height="18px"
405
+ />
406
+ <div
407
+ className="ml-[6px] flex items-center mt-[2px]"
408
+ style={{
409
+ color: "#fff",
410
+ }}
411
+ >
412
+ <span className=" min-[380px]:text-[12px]">
413
+ {serviceItem?.offer_text || ""}&nbsp;
414
+ </span>{" "}
415
+ | Termina en&nbsp;
416
+ <span
417
+ className="bold-text"
418
+ ref={startCountdown}
419
+ style={{
420
+ fontVariantNumeric: "tabular-nums",
421
+ display: "inline-block",
422
+ // minWidth: "70px",
423
+ }}
424
+ />
425
+ </div>
426
+ </div>
427
+ <div
428
+ className="flex items-center"
429
+ style={{
430
+ color: "#fff",
431
+ }}
432
+ >
433
+ {renderIcon("personIcon", "16px")}
434
+ &nbsp;
435
+ <span className="">
436
+ <span
437
+ className="bold-text"
438
+ ref={startViewerCount}
439
+ style={{ fontVariantNumeric: "tabular-nums" }}
440
+ />{" "}
441
+ <span className="bold-text">personas</span>{" "}
442
+ <span>
443
+ {" "}
444
+ {viewersConfig.label || " están viendo este viaje"}
445
+ </span>
446
+ </span>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ )}
463
452
  <div
464
453
  style={{
465
454
  display: "grid",
@@ -468,10 +457,18 @@ function ServiceItemMobile({
468
457
  transition:
469
458
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
470
459
  position: "relative",
471
- zIndex: -1,
460
+ zIndex: serviceItem?.offer_text ? -2 : -1,
472
461
  }}
473
462
  >
474
- <div style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}>
463
+ <div
464
+ style={{
465
+ overflow: "hidden",
466
+ minHeight: 0,
467
+ position: serviceItem?.offer_text ? "relative" : undefined,
468
+ zIndex: serviceItem?.offer_text ? -3 : undefined,
469
+ marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
470
+ }}
471
+ >
475
472
  <ExpandedDropdownMobile serviceItem={serviceItem} />
476
473
  </div>
477
474
  </div>
package/src/ui/DateTimeSection/DateTimeSection.tsx CHANGED
@@ -124,8 +124,8 @@ function DateTimeSection({
124
124
  {/* Arrival Date */}
125
125
  {!isCiva && (
126
126
  <StageTooltip
127
- stageData={serviceItem.boarding_stages}
128
- direction={1}
127
+ stageData={serviceItem.dropoff_stages}
128
+ direction={2}
129
129
  terminals={busStage}
130
130
  serviceItem={serviceItem}
131
131
  metaData={metaData}
@@ -159,8 +159,8 @@ function DateTimeSection({
159
159
  <div className="flex flex-col gap-[4px]">
160
160
  {/* Departure Time */}
161
161
  <StageTooltip
162
- stageData={serviceItem.dropoff_stages}
163
- direction={2}
162
+ stageData={serviceItem.boarding_stages}
163
+ direction={1}
164
164
  terminals={busStage}
165
165
  serviceItem={serviceItem}
166
166
  metaData={metaData}