kupos-ui-components-lib 1.0.5 → 1.0.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 (19) hide show
  1. package/.gitattributes +1 -0
  2. package/dist/components/PaymentSideBar/PaymentItem.d.ts +4 -5
  3. package/dist/components/PaymentSideBar/PaymentItem.js +5 -18
  4. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +27 -18
  5. package/dist/components/PaymentSideBar/SimplePaymentItem.d.ts +12 -0
  6. package/dist/components/PaymentSideBar/SimplePaymentItem.js +11 -0
  7. package/dist/components/PaymentSideBar/index.d.ts +2 -1
  8. package/dist/components/PaymentSideBar/index.js +2 -1
  9. package/dist/styles.css +5 -8
  10. package/dist/utils/DateService.d.ts +1 -1
  11. package/dist/utils/DateService.js +4 -4
  12. package/package.json +1 -1
  13. package/src/components/PaymentSideBar/PaymentItem.tsx +11 -29
  14. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +37 -41
  15. package/src/components/PaymentSideBar/index.ts +2 -1
  16. package/src/utils/DateService.ts +5 -4
  17. package/kupos-ui-components-lib-1.0.1.tgz +0 -0
  18. package/kupos-ui-components-lib-1.0.2.tgz +0 -0
  19. package/kupos-ui-components-lib-1.0.3.tgz +0 -0
package/.gitattributes ADDED
@@ -0,0 +1 @@
1
+ *.tgz filter=lfs diff=lfs merge=lfs -text
package/dist/components/PaymentSideBar/PaymentItem.d.ts CHANGED
@@ -1,13 +1,12 @@
1
1
  import React, { ReactNode } from "react";
2
2
  interface PaymentItemProps {
3
- label: string | ReactNode;
4
- amount: number | string;
3
+ label: ReactNode;
4
+ amount: number;
5
5
  currency?: string;
6
- isBold?: boolean;
6
+ formatter?: (amount: number) => string;
7
+ className?: string;
7
8
  isNegative?: boolean;
8
9
  customStyle?: React.CSSProperties;
9
- className?: string;
10
- formatter?: (amount: number) => string;
11
10
  }
12
11
  declare const PaymentItem: React.FC<PaymentItemProps>;
13
12
  export default PaymentItem;
package/dist/components/PaymentSideBar/PaymentItem.js CHANGED
@@ -1,24 +1,11 @@
1
1
  import React from "react";
2
- const PaymentItem = ({ label, amount, currency = "CLP", isBold = false, isNegative = false, customStyle = {}, className = "", formatter, }) => {
3
- const formatAmount = (amount) => {
4
- if (formatter && typeof amount === "number") {
5
- return formatter(amount);
6
- }
7
- if (typeof amount === "string") {
8
- return amount;
9
- }
10
- // Default formatting
11
- const formattedAmount = amount
12
- .toString()
13
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
14
- return formattedAmount;
15
- };
16
- return (React.createElement("div", { className: `flex items-center justify-between w-[100%] mt-[5px] text-[13.33px] ${className}` },
17
- React.createElement("span", { className: isBold ? "bold-text" : "" }, label),
18
- React.createElement("div", { className: `${isBold ? "bold-text" : ""} secondary-text`, style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end", alignItems: "center" }, customStyle) },
2
+ const PaymentItem = ({ label, amount, currency = "CLP", formatter = (amount) => amount.toString(), className = "", isNegative = false, customStyle = {}, }) => {
3
+ return (React.createElement("div", { className: `flex justify-between items-center w-full ${className} text-[13.33px] `, style: { margin: "6px 0" } },
4
+ React.createElement("div", { className: "" }, label),
5
+ React.createElement("div", { className: "bold-text", style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end" }, customStyle) },
19
6
  currency,
20
7
  " ",
21
8
  isNegative ? "- " : "",
22
- formatAmount(amount))));
9
+ formatter(amount))));
23
10
  };
24
11
  export default PaymentItem;
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -47,8 +47,9 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
47
47
  " horas")))))));
48
48
  };
49
49
  const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, }) => {
50
+ console.log("🚀 ~ PaymentSideBarDesktop ~ netFare:", netFare);
50
51
  return (React.createElement("div", null,
51
- React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto sticky w-[322px] relative" },
52
+ React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto w-[325px] relative" },
52
53
  React.createElement("div", { className: "p-[15px]" },
53
54
  React.createElement("div", { className: "text-[17.33px]" }, translation === null || translation === void 0 ? void 0 :
54
55
  translation.passengerSummaryDetails,
@@ -143,37 +144,45 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
143
144
  : null),
144
145
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: dateReturn
145
146
  ? returnConexionFare * conexionPassengers
146
- : conexionFare * conexionPassengers, formatter: currency, isBold: true, className: "subtotal-row font10" })) : null,
147
+ : conexionFare, formatter: currency, className: "subtotal-row font10" })) : null,
147
148
  metaData &&
148
149
  metaData.whatsapp_delivery_charges &&
149
150
  !loginData &&
150
151
  !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
151
152
  React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.whatsappDeliveryCharges),
152
- React.createElement("div", { className: "relative group pointer" },
153
+ React.createElement("div", { className: "img-hover" },
153
154
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
154
155
  marginLeft: "5px",
155
156
  marginBottom: "3px",
156
157
  width: "15px",
157
158
  } }),
158
- React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-1 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors.tooltipColor } },
159
- 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 } }),
160
- React.createElement("span", { className: "text-[13.33px]" }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, formatter: currency, isBold: true, className: "mt-[10px] font10" })) : null,
161
- removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: netFare, formatter: currency, isBold: true, isNegative: true })),
159
+ React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
160
+ React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, formatter: currency, className: "font10", customStyle: { color: "var(--secondary-color)" } })) : null,
161
+ removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: netFare, formatter: currency, isNegative: true })),
162
162
  renderDiscount(discountAmount),
163
- React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, formatter: (amount) => currency(amount).split(",")[0], isBold: true }),
163
+ React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount : 0, formatter: currency, className: "text-[13.33px]" }),
164
164
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10" },
165
165
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
166
166
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
167
167
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
168
- isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: agencyFee ? agencyFee : 0, formatter: currency, isBold: true })),
169
- walletMoney ? (React.createElement(PaymentItem, { label: "KuposPay", amount: walletMoney, formatter: currency, isBold: true })) : null,
170
- virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text bold-text" }, `kuposcréditos(${virtualLimit}%)`), amount: virtualMoney, formatter: currency, isBold: true })) : null,
171
- showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "primary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), amount: isAgency ? netFareInUsd + agencyFee : netFareInUsd, currency: "USD", formatter: (amount) => currency(amount).split(",")[0], isBold: true, customStyle: { color: "var(--primary-color)" } })) : null)),
172
- React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute bottom-[52%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
173
- React.createElement(PaymentItem, { label: "Total", amount: removeDiscountAtomValue
174
- ? 0
175
- : isAgency
176
- ? netFare + agencyFee
177
- : netFare, formatter: currency, isBold: true, className: "total-row font10", customStyle: { color: "white" } }))));
168
+ isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: agencyFee ? agencyFee : 0, formatter: currency })),
169
+ walletMoney ? (React.createElement(PaymentItem, { label: "KuposPay", amount: walletMoney, formatter: currency })) : null,
170
+ virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text bold-text" }, `kuposcréditos(${virtualLimit}%)`), amount: virtualMoney, formatter: currency, customStyle: { color: "var(--secondary-color)" } })) : null,
171
+ showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "primary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), amount: isAgency ? netFareInUsd + agencyFee : netFareInUsd, currency: "USD", formatter: (amount) => currency(amount).split(",")[0], customStyle: { color: "var(--primary-color)" } })) : null),
172
+ React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[8%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
173
+ React.createElement("div", { className: "flex justify-between items-center w-full" },
174
+ React.createElement("div", { className: "" }, "Total"),
175
+ React.createElement("div", { className: "bold-text ", style: {
176
+ minWidth: 80,
177
+ display: "flex",
178
+ justifyContent: "flex-end",
179
+ } },
180
+ "CLP",
181
+ " ",
182
+ currency(removeDiscountAtomValue
183
+ ? 0
184
+ : isAgency
185
+ ? netFare + agencyFee
186
+ : netFare)))))));
178
187
  };
179
188
  export default PaymentSideBarDesktop;
package/dist/components/PaymentSideBar/SimplePaymentItem.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React, { ReactNode } from "react";
2
+ interface SimplePaymentItemProps {
3
+ label: ReactNode;
4
+ amount: number;
5
+ currency?: string;
6
+ formatter?: (amount: number) => string;
7
+ className?: string;
8
+ isNegative?: boolean;
9
+ customStyle?: React.CSSProperties;
10
+ }
11
+ declare const SimplePaymentItem: React.FC<SimplePaymentItemProps>;
12
+ export default SimplePaymentItem;
package/dist/components/PaymentSideBar/SimplePaymentItem.js ADDED
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ const SimplePaymentItem = ({ label, amount, currency = "CLP", formatter = (amount) => amount.toString(), className = "", isNegative = false, customStyle = {}, }) => {
3
+ return (React.createElement("div", { className: `flex justify-between items-center w-full ${className}` },
4
+ React.createElement("div", { className: "" }, label),
5
+ React.createElement("div", { className: "bold-text", style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end" }, customStyle) },
6
+ currency,
7
+ " ",
8
+ isNegative ? "- " : "",
9
+ formatter(amount))));
10
+ };
11
+ export default SimplePaymentItem;
package/dist/components/PaymentSideBar/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import PaymentSideBarDesktop from "./PaymentSideBarDesktop";
2
2
  import PaymentSideBarMobile from "./PaymentSideBarMobile";
3
3
  import ResponsivePaymentSideBar from "./ResponsivePaymentSideBar";
4
- export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar };
4
+ import PaymentItem from "./PaymentItem";
5
+ export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, PaymentItem };
5
6
  export type { PaymentSideBarProps } from "./types";
package/dist/components/PaymentSideBar/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import PaymentSideBarDesktop from "./PaymentSideBarDesktop";
2
2
  import PaymentSideBarMobile from "./PaymentSideBarMobile";
3
3
  import ResponsivePaymentSideBar from "./ResponsivePaymentSideBar";
4
- export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar };
4
+ import PaymentItem from "./PaymentItem";
5
+ export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, PaymentItem };
package/dist/styles.css CHANGED
@@ -12,9 +12,6 @@
12
12
  .static {
13
13
  position: static;
14
14
  }
15
- .sticky {
16
- position: sticky;
17
- }
18
15
  .-top-\[7px\] {
19
16
  top: calc(7px * -1);
20
17
  }
@@ -42,15 +39,15 @@
42
39
  .top-\[46\%\] {
43
40
  top: 46%;
44
41
  }
42
+ .-bottom-\[8\%\] {
43
+ bottom: calc(8% * -1);
44
+ }
45
45
  .-bottom-\[36px\] {
46
46
  bottom: calc(36px * -1);
47
47
  }
48
48
  .-bottom-\[160px\] {
49
49
  bottom: calc(160px * -1);
50
50
  }
51
- .bottom-\[52\%\] {
52
- bottom: 52%;
53
- }
54
51
  .-left-\[6px\] {
55
52
  left: calc(6px * -1);
56
53
  }
@@ -267,8 +264,8 @@
267
264
  .w-\[280px\] {
268
265
  width: 280px;
269
266
  }
270
- .w-\[322px\] {
271
- width: 322px;
267
+ .w-\[325px\] {
268
+ width: 325px;
272
269
  }
273
270
  .w-auto {
274
271
  width: auto;
package/dist/utils/DateService.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const DateService: {
3
3
  getDayname: (day: number, type?: string) => string;
4
4
  getMonthName: (month: number, type?: string) => string;
5
5
  getDayNameFromDate: (date: string, format?: string, type?: string) => string;
6
- getDateFromDate: (dateStr: string, format?: string) => string;
6
+ getDateFromDate: (date: any, format?: string) => string | number;
7
7
  getMonthFromDate: (dateStr: string, format?: string) => string;
8
8
  getMonthNameFromDate: (dateStr: string, format?: string, type?: string) => string;
9
9
  getYearFromDate: (dateStr: string, format?: string) => string;
package/dist/utils/DateService.js CHANGED
@@ -79,15 +79,15 @@ const DateService = {
79
79
  let day = dt.getDay();
80
80
  return DateService.getDayname(day, type);
81
81
  },
82
- getDateFromDate: (dateStr, format = "yyyy-mm-dd") => {
83
- let d = DateService.changeDateFormat(dateStr, format, "yyyy-mm-dd");
82
+ getDateFromDate: (date, format = "dd/mm/yyyy") => {
83
+ let d = DateService.changeDateFormat(date, format, "yyyy-mm-dd");
84
84
  if (!d) {
85
85
  return "";
86
86
  }
87
87
  let doo = new Date(Date.parse(d + datePostfix));
88
88
  let dt = new Date(doo.getTime() + Math.abs(doo.getTimezoneOffset() * 60000));
89
- let dateNum = dt.getDate().toString();
90
- return dateNum.length === 1 ? "0" + dateNum : dateNum;
89
+ let day = dt.getDate();
90
+ return day > 9 ? day : "0" + day;
91
91
  },
92
92
  getMonthFromDate: (dateStr, format = "yyyy-mm-dd") => {
93
93
  let d = DateService.changeDateFormat(dateStr, format, "yyyy-mm-dd");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentItem.tsx CHANGED
@@ -1,59 +1,41 @@
1
1
  import React, { ReactNode } from "react";
2
2
 
3
3
  interface PaymentItemProps {
4
- label: string | ReactNode;
5
- amount: number | string;
4
+ label: ReactNode;
5
+ amount: number;
6
6
  currency?: string;
7
- isBold?: boolean;
7
+ formatter?: (amount: number) => string;
8
+ className?: string;
8
9
  isNegative?: boolean;
9
10
  customStyle?: React.CSSProperties;
10
- className?: string;
11
- formatter?: (amount: number) => string;
12
11
  }
13
12
 
14
13
  const PaymentItem: React.FC<PaymentItemProps> = ({
15
14
  label,
16
15
  amount,
17
16
  currency = "CLP",
18
- isBold = false,
17
+ formatter = (amount) => amount.toString(),
18
+ className = "",
19
19
  isNegative = false,
20
20
  customStyle = {},
21
- className = "",
22
- formatter,
23
21
  }) => {
24
- const formatAmount = (amount: number | string): string => {
25
- if (formatter && typeof amount === "number") {
26
- return formatter(amount);
27
- }
28
-
29
- if (typeof amount === "string") {
30
- return amount;
31
- }
32
-
33
- // Default formatting
34
- const formattedAmount = amount
35
- .toString()
36
- .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
37
- return formattedAmount;
38
- };
39
-
40
22
  return (
41
23
  <div
42
- className={`flex items-center justify-between w-[100%] mt-[5px] text-[13.33px] ${className}`}
24
+ className={`flex justify-between items-center w-full ${className} text-[13.33px] `}
25
+ style={{ margin: "6px 0" }}
43
26
  >
44
- <span className={isBold ? "bold-text" : ""}>{label}</span>
27
+ <div className="">{label}</div>
45
28
  <div
46
- className={`${isBold ? "bold-text" : ""} secondary-text`}
29
+ className="bold-text"
47
30
  style={{
48
31
  minWidth: 80,
49
32
  display: "flex",
50
33
  justifyContent: "flex-end",
51
- alignItems: "center",
52
34
  ...customStyle,
53
35
  }}
54
36
  >
55
37
  {currency} {isNegative ? "- " : ""}
56
- {formatAmount(amount)}
38
+ {formatter(amount)}
57
39
  </div>
58
40
  </div>
59
41
  );
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -160,9 +160,10 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
160
160
  renderDiscount,
161
161
  discountAmount,
162
162
  }) => {
163
+ console.log("🚀 ~ PaymentSideBarDesktop ~ netFare:", netFare);
163
164
  return (
164
165
  <div>
165
- <div className="bg-white rounded-[20px] shadow-service mb-[10px] mx-auto sticky w-[322px] relative">
166
+ <div className="bg-white rounded-[20px] shadow-service mb-[10px] mx-auto w-[325px] relative">
166
167
  <div className="p-[15px]">
167
168
  <div className="text-[17.33px]">
168
169
  {translation?.passengerSummaryDetails}{" "}
@@ -311,10 +312,9 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
311
312
  amount={
312
313
  dateReturn
313
314
  ? returnConexionFare * conexionPassengers
314
- : conexionFare * conexionPassengers
315
+ : conexionFare
315
316
  }
316
317
  formatter={currency}
317
- isBold={true}
318
318
  className="subtotal-row font10"
319
319
  />
320
320
  ) : null}
@@ -329,7 +329,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
329
329
  <div className="font10">
330
330
  {translation?.whatsappDeliveryCharges}
331
331
  </div>
332
- <div className="relative group pointer">
332
+ <div className="img-hover">
333
333
  <img
334
334
  src={icons?.whatsappInfoIcon}
335
335
  alt=""
@@ -340,24 +340,18 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
340
340
  }}
341
341
  />
342
342
  <div
343
- className=" hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-1 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service"
344
- style={{ backgroundColor: colors.tooltipColor }}
343
+ className="duration-mouseover font9"
344
+ style={{ lineHeight: "1.3" }}
345
345
  >
346
- <div
347
- 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"
348
- style={{ borderBottomColor: colors.tooltipColor }}
349
- ></div>
350
- <span className="text-[13.33px]">
351
- {translation?.whatsappInfoIcon}
352
- </span>
346
+ <span>{translation?.whatsappInfoIcon}</span>
353
347
  </div>
354
348
  </div>
355
349
  </div>
356
350
  }
357
351
  amount={metaData.whatsapp_delivery_charges}
358
352
  formatter={currency}
359
- isBold={true}
360
- className="mt-[10px] font10"
353
+ className="font10"
354
+ customStyle={{ color: "var(--secondary-color)" }}
361
355
  />
362
356
  ) : null}
363
357
 
@@ -366,7 +360,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
366
360
  label="Cupón"
367
361
  amount={netFare}
368
362
  formatter={currency}
369
- isBold={true}
370
363
  isNegative={true}
371
364
  />
372
365
  )}
@@ -378,8 +371,8 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
378
371
  amount={
379
372
  promoCode?.promoCouponAmount ? promoCode?.promoCouponAmount : 0
380
373
  }
381
- formatter={(amount) => currency(amount).split(",")[0]}
382
- isBold={true}
374
+ formatter={currency}
375
+ className="text-[13.33px]"
383
376
  />
384
377
  {promoCode?.promoCouponAmount ? (
385
378
  <div className="promocode font10">
@@ -399,7 +392,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
399
392
  label={translation?.agencyFee}
400
393
  amount={agencyFee ? agencyFee : 0}
401
394
  formatter={currency}
402
- isBold={true}
403
395
  />
404
396
  )}
405
397
 
@@ -408,7 +400,6 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
408
400
  label="KuposPay"
409
401
  amount={walletMoney}
410
402
  formatter={currency}
411
- isBold={true}
412
403
  />
413
404
  ) : null}
414
405
 
@@ -419,7 +410,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
419
410
  }
420
411
  amount={virtualMoney}
421
412
  formatter={currency}
422
- isBold={true}
413
+ customStyle={{ color: "var(--secondary-color)" }}
423
414
  />
424
415
  ) : null}
425
416
 
@@ -431,30 +422,35 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
431
422
  amount={isAgency ? netFareInUsd + agencyFee : netFareInUsd}
432
423
  currency="USD"
433
424
  formatter={(amount) => currency(amount).split(",")[0]}
434
- isBold={true}
435
425
  customStyle={{ color: "var(--primary-color)" }}
436
426
  />
437
427
  ) : null}
438
428
  </div>
439
- </div>
440
- <div
441
- className={` text-white p-[10px_15px] text-left w-full flex items-center absolute bottom-[52%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
442
- style={{ backgroundColor: colors?.bottomStripColor }}
443
- >
444
- <PaymentItem
445
- label="Total"
446
- amount={
447
- removeDiscountAtomValue
448
- ? 0
449
- : isAgency
450
- ? netFare + agencyFee
451
- : netFare
452
- }
453
- formatter={currency}
454
- isBold={true}
455
- className="total-row font10"
456
- customStyle={{ color: "white" }}
457
- />
429
+ <div
430
+ className={` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[8%] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
431
+ style={{ backgroundColor: colors?.bottomStripColor }}
432
+ >
433
+ <div className="flex justify-between items-center w-full">
434
+ <div className="">Total</div>
435
+ <div
436
+ className="bold-text "
437
+ style={{
438
+ minWidth: 80,
439
+ display: "flex",
440
+ justifyContent: "flex-end",
441
+ }}
442
+ >
443
+ CLP{" "}
444
+ {currency(
445
+ removeDiscountAtomValue
446
+ ? 0
447
+ : isAgency
448
+ ? netFare + agencyFee
449
+ : netFare
450
+ )}
451
+ </div>
452
+ </div>
453
+ </div>
458
454
  </div>
459
455
  </div>
460
456
  );
package/src/components/PaymentSideBar/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import PaymentSideBarDesktop from "./PaymentSideBarDesktop";
2
2
  import PaymentSideBarMobile from "./PaymentSideBarMobile";
3
3
  import ResponsivePaymentSideBar from "./ResponsivePaymentSideBar";
4
- export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar };
4
+ import PaymentItem from "./PaymentItem";
5
+ export { PaymentSideBarDesktop, PaymentSideBarMobile, ResponsivePaymentSideBar, PaymentItem };
5
6
  export type { PaymentSideBarProps } from "./types";
package/src/utils/DateService.ts CHANGED
@@ -93,8 +93,9 @@ const DateService = {
93
93
  return DateService.getDayname(day, type);
94
94
  },
95
95
 
96
- getDateFromDate: (dateStr: string, format = "yyyy-mm-dd"): string => {
97
- let d = DateService.changeDateFormat(dateStr, format, "yyyy-mm-dd");
96
+
97
+ getDateFromDate: (date, format = "dd/mm/yyyy") => {
98
+ let d = DateService.changeDateFormat(date, format, "yyyy-mm-dd");
98
99
  if (!d) {
99
100
  return "";
100
101
  }
@@ -102,8 +103,8 @@ const DateService = {
102
103
  let dt = new Date(
103
104
  doo.getTime() + Math.abs(doo.getTimezoneOffset() * 60000),
104
105
  );
105
- let dateNum = dt.getDate().toString();
106
- return dateNum.length === 1 ? "0" + dateNum : dateNum;
106
+ let day = dt.getDate();
107
+ return day > 9 ? day : "0" + day;
107
108
  },
108
109
 
109
110
  getMonthFromDate: (dateStr: string, format = "yyyy-mm-dd"): string => {
package/kupos-ui-components-lib-1.0.1.tgz DELETED
Binary file
package/kupos-ui-components-lib-1.0.2.tgz DELETED
Binary file
package/kupos-ui-components-lib-1.0.3.tgz DELETED
Binary file