kupos-ui-components-lib 9.10.0 → 9.10.2

package/src/components/Survey/SurveyMobile.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { SurveyProps } from "./types";
+import { BottomSheet } from "../../ui/BottomSheet";
+import {
+  ThankYouCard,
+  SurveyHeader,
+  ScoreButtons,
+  FeedbackBanner,
+  FeedbackTextarea,
+  SurveyFooter,
+  getFeedbackConfig,
+} from "../../ui/Survey";
+import KuposButton from "../../ui/KuposButton/KuposButton";
+
+const SurveyMobile = ({
+  isOpen,
+  isSubmitted,
+  selectedScore,
+  onScoreChange,
+  feedback = "",
+  onFeedbackChange,
+  onClose,
+  onSkip,
+  onSubmit,
+  colors,
+  icons,
+  isLoading,
+}: SurveyProps) => {
+  if (!isOpen) return null;
+
+  const config = getFeedbackConfig(selectedScore);
+
+  const handleSubmit = () => {
+    if (selectedScore != null) {
+      onSubmit?.(selectedScore, feedback);
+    }
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isOpen ?? false}
+      onClose={onClose}
+      showHandle={true}
+      showBackdrop={false}
+      blurBackground={true}
+      blurAmount="2px"
+      padding={isSubmitted ? 0 : "0 20px 32px"}
+    >
+      {/* {isSubmitted ? (
+        <ThankYouCard onClose={onClose} titleFontSize="1.35rem" />
+      ) : ( */}
+      <>
+        {/* <SurveyHeader onClose={onClose} /> */}
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          aria-label="Close survey"
+          className="absolute top-[15px] right-[25px] bg-transparent border-none cursor-pointer text-[22px] text-gray-400 flex items-center justify-center p-1 z-10 transition-colors duration-200 hover:text-gray-600"
+        >
+          <img
+            src={icons.closeIcon}
+            alt="Close"
+            className="w-[16px] h-[16px] block"
+          />
+        </button>
+
+        {/* Centered Illustration */}
+        {icons?.surveyIcon && (
+          <div className="flex justify-center mb-3 mt-2">
+            <img
+              src={icons.surveyIcon}
+              alt="Survey Illustration"
+              className="w-[90px] h-[90px] block"
+            />
+          </div>
+        )}
+
+        {/* Centered Title */}
+        <h2 className="text-[18px] bold-text leading-[1.25]  text-center mt-4 mb-2">
+          Ayúdanos a mejorar
+        </h2>
+
+        {/* Centered Subtitle */}
+        <p className="text-[13.33px] text-center leading-[1.4] mb-6 max-w-[460px] mx-auto">
+          Basándote en tu experiencia de compra.
+          <br />
+          ¿Nos recomendarías a un amigo?
+        </p>
+
+        <ScoreButtons
+          selectedScore={selectedScore}
+          onScoreChange={onScoreChange}
+          buttonHeight={44}
+          fontSize={13}
+          gap={6}
+          colors={colors}
+        />
+
+        {/* <FeedbackBanner config={config} /> */}
+
+        <FeedbackTextarea
+          config={config}
+          feedback={feedback}
+          onFeedbackChange={onFeedbackChange}
+        />
+
+        <div className="flex justify-center mt-[20px]">
+          <div className="w-[180px]">
+            <KuposButton
+              isSoldOut={selectedScore == null}
+              isLoading={isLoading || false}
+              buttonColor={"#FF8E43"}
+              buyLabel="Enviar"
+              soldOutLabel="Enviar"
+              onClick={handleSubmit}
+            />
+          </div>
+        </div>
+      </>
+      {/* )} */}
+    </BottomSheet>
+  );
+};
+
+export default SurveyMobile;

package/src/components/Survey/index.ts

@@ -0,0 +1,5 @@
+import SurveyDesktop from "./SurveyDesktop";
+import SurveyMobile from "./SurveyMobile";
+import ResponsiveSurvey from "./ResponsiveSurvey";
+export { SurveyDesktop, SurveyMobile, ResponsiveSurvey };
+export type { SurveyProps } from "./types";

package/src/components/Survey/types.ts

@@ -0,0 +1,22 @@
+export interface SurveyProps {
+  variant?: "mobile" | "desktop";
+  isOpen?: boolean;
+  selectedScore?: number | null;
+  onScoreChange?: (score: number) => void;
+  feedback?: string;
+  onFeedbackChange?: (text: string) => void;
+  onClose?: () => void;
+  onSkip?: () => void;
+  onSubmit?: (score: number, feedback: string) => void;
+  isSubmitted?: boolean;
+  isLoading?: boolean;
+  colors?: {
+    secondaryColor?: string;
+    tertiaryColor?: string;
+    primaryColor?: string;
+  };
+  icons?: {
+    surveyIcon?: string;
+    closeIcon?: string;
+  };
+}

package/src/index.ts

@@ -25,6 +25,16 @@ import {
   ResponsiveFilterBar,
 } from "./components/FilterBar";
 
+// Import Survey components
+import {
+  SurveyDesktop,
+  SurveyMobile,
+  ResponsiveSurvey,
+} from "./components/Survey";
+
+// Import Modal components
+import { Modal, ModalHeader } from "./ui/Modal";
+
 export {
   ServiceItemDesktop,
   ServiceItemMobile,
@@ -46,6 +56,16 @@ export {
   FilterBarDesktop,
   FilterBarMobile,
   ResponsiveFilterBar,
+
+
+  //Survey components
+  SurveyDesktop,
+  SurveyMobile,
+  ResponsiveSurvey,
+
+  // Modal components
+  Modal,
+  ModalHeader,
 };
 
 // Also export types
@@ -54,3 +74,6 @@ export type { MobileServiceItemProps } from "./components/ServiceItem/mobileType
 export type { PaymentSideBarProps } from "./components/PaymentSideBar/types";
 export type { ServiceListProps } from "./components/ServiceList/types";
 export type { FilterBarProps } from "./components/FilterBar/tyoes";
+export type { SurveyProps } from "./components/Survey/types";
+export type { ModalProps, ModalVariant, ModalSize, ModalHeaderProps } from "./ui/Modal";
+

package/src/ui/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export interface BottomSheetProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  showHandle?: boolean;
+  showBackdrop?: boolean;
+  backdropColor?: string;
+  blurBackground?: boolean;
+  blurAmount?: string;
+  closeOnBackdrop?: boolean;
+  padding?: string | number;
+  maxHeight?: string;
+  borderRadius?: string;
+}
+
+const STYLE_ID = "__kupos_bottom_sheet_style__";
+
+const injectStyle = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+    @keyframes __ks_slideUp {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes __ks_fadeIn {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    .__ks_sheet {
+      animation: __ks_slideUp 0.38s cubic-bezier(0.32, 0.72, 0, 1) both;
+    }
+    .__ks_backdrop {
+      animation: __ks_fadeIn 0.3s ease both;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+const BottomSheet = ({
+  isOpen,
+  onClose,
+  children,
+  showHandle = true,
+  showBackdrop = false,
+  backdropColor = "rgba(0,0,0,0.45)",
+  blurBackground = false,
+  blurAmount = "6px",
+  closeOnBackdrop = true,
+  padding = "20px 20px 32px",
+  maxHeight = "92vh",
+  borderRadius = "24px 24px 0 0",
+}: BottomSheetProps) => {
+  if (!isOpen) return null;
+
+  injectStyle();
+
+  const sheet = (
+    <>
+      {(showBackdrop || blurBackground) && (
+        <div
+          className="__ks_backdrop"
+          onClick={closeOnBackdrop ? onClose : undefined}
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 9998,
+            backgroundColor: showBackdrop ? backdropColor : "rgba(0,0,0,0.4)",
+            backdropFilter: blurBackground ? `blur(${blurAmount})` : undefined,
+            WebkitBackdropFilter: blurBackground
+              ? `blur(${blurAmount})`
+              : undefined,
+          }}
+        />
+      )}
+
+      <div
+        className="__ks_sheet"
+        style={{
+          position: "fixed",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 9999,
+          background: "#FFFFFF",
+          maxHeight,
+          borderRadius,
+          overflowY: "auto",
+          boxSizing: "border-box" as const,
+          boxShadow: "0 -8px 40px rgba(0,0,0,0.15)",
+        }}
+      >
+        {showHandle && (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              padding: "12px 0 4px",
+            }}
+          >
+            <div
+              style={{
+                width: 40,
+                height: 4,
+                borderRadius: 999,
+                backgroundColor: "#E5E7EB",
+              }}
+            />
+          </div>
+        )}
+
+        <div style={{ padding }}>{children}</div>
+      </div>
+    </>
+  );
+
+  if (typeof document !== "undefined") {
+    return ReactDOM.createPortal(sheet, document.body) as React.ReactElement;
+  }
+  return sheet;
+};
+
+export default BottomSheet;

package/src/ui/BottomSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from "./BottomSheet";
+export type { BottomSheetProps } from "./BottomSheet";

package/src/ui/Modal/Modal.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export type ModalVariant = "center" | "bottom-sheet";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  variant?: ModalVariant;
+  size?: ModalSize;
+  closeOnBackdrop?: boolean;
+  padding?: string | number;
+  borderRadius?: string | number;
+  backdropColor?: string;
+  maxWidth?: number | string;
+}
+
+const SIZE_MAP: Record<ModalSize, number | string> = {
+  sm: 400,
+  md: 520,
+  lg: 640,
+  xl: 800,
+  full: "100%",
+};
+
+const Modal = ({
+  isOpen,
+  onClose,
+  children,
+  variant = "center",
+  size = "md",
+  closeOnBackdrop = true,
+  padding = "28px 32px 24px",
+  borderRadius,
+  backdropColor = "rgba(0,0,0,0.45)",
+  maxWidth,
+}: ModalProps) => {
+  if (!isOpen) return null;
+
+  const resolvedMaxWidth = maxWidth ?? SIZE_MAP[size];
+  const resolvedRadius =
+    borderRadius ?? (variant === "bottom-sheet" ? "24px 24px 0 0" : 24);
+
+  const overlayStyle: React.CSSProperties = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 9999,
+    display: "flex",
+    alignItems: variant === "bottom-sheet" ? "flex-end" : "center",
+    justifyContent: "center",
+    padding: variant === "bottom-sheet" ? 0 : 16,
+    backgroundColor: backdropColor,
+  };
+
+  const cardStyle: React.CSSProperties = {
+    background: "#FFFFFF",
+    width: "100%",
+    maxWidth: resolvedMaxWidth,
+    maxHeight: variant === "bottom-sheet" ? "92vh" : undefined,
+    borderRadius: resolvedRadius,
+    padding,
+    position: "relative",
+    boxSizing: "border-box",
+    overflowY: variant === "bottom-sheet" ? "auto" : undefined,
+  };
+
+  const modal = (
+    <div
+      style={overlayStyle}
+      onClick={closeOnBackdrop ? onClose : undefined}
+    >
+      <div
+        style={cardStyle}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+
+  if (typeof document !== "undefined") {
+    return ReactDOM.createPortal(modal, document.body) as React.ReactElement;
+  }
+  return modal;
+};
+
+export default Modal;

package/src/ui/Modal/ModalHeader.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+export interface ModalHeaderProps {
+  title?: React.ReactNode;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+
+const ModalHeader = ({ title, onClose, children }: ModalHeaderProps) => (
+  <div
+    style={{
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 20,
+    }}
+  >
+    <div style={{ flex: 1 }}>
+      {title && (
+        <span
+          style={{
+            fontSize: "1rem",
+            fontWeight: 700,
+            color: "#111827",
+          }}
+        >
+          {title}
+        </span>
+      )}
+      {children}
+    </div>
+
+    {onClose && (
+      <button
+        onClick={onClose}
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: "50%",
+          background: "#F3F4F6",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 14,
+          color: "#6B7280",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          marginLeft: 12,
+        }}
+      >
+        ✕
+      </button>
+    )}
+  </div>
+);
+
+export default ModalHeader;

package/src/ui/Modal/index.ts

@@ -0,0 +1,4 @@
+export { default as Modal } from "./Modal";
+export { default as ModalHeader } from "./ModalHeader";
+export type { ModalProps, ModalVariant, ModalSize } from "./Modal";
+export type { ModalHeaderProps } from "./ModalHeader";

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,71 +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(
-                      CommonService.capitalize(String(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/Survey/FeedbackBanner.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { FeedbackConfig } from "./constants";
+
+interface FeedbackBannerProps {
+  config: FeedbackConfig | null;
+}
+
+const FeedbackBanner = ({ config }: FeedbackBannerProps) => {
+  if (!config) return null;
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        borderRadius: 20,
+        padding: "12px 16px",
+        marginTop: 16,
+        backgroundColor: config.bannerBg,
+      }}
+    >
+      <span style={{ fontSize: 22 }}>{config.emoji}</span>
+      <span
+        style={{
+          fontWeight: 600,
+          fontSize: "13.33px",
+          color: config.bannerText,
+        }}
+      >
+        {config.message}
+      </span>
+    </div>
+  );
+};
+
+export default FeedbackBanner;