@asdp/ferryui 0.1.6 → 0.1.7

package/dist/index.d.mts

@@ -731,4 +731,127 @@ interface ModalServiceProps {
  */
 declare const ModalService: React.FC<ModalServiceProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, type RadioOption, type SelectOption, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service class codes for passenger services
+ */
+type PassengerServiceCode = 'ECONOMY' | 'BUSINESS' | 'EXECUTIVE';
+/**
+ * Service class data structure
+ */
+interface ServiceClass {
+    id: number;
+    name: string;
+    key: string;
+    serviceName: PassengerServiceCode;
+}
+/**
+ * Default service classes available
+ */
+declare const DEFAULT_SERVICE_CLASSES: ServiceClass[];
+
+/**
+ * Passenger object structure
+ */
+interface Passenger {
+    [key: string]: any;
+}
+/**
+ * Service with passenger count
+ */
+interface PassengerService {
+    serviceId: number;
+    serviceName: PassengerServiceCode;
+    count: number;
+    passengers: Passenger[];
+}
+/**
+ * Passenger type from API
+ */
+interface PassengerType {
+    id: number;
+    passengerTypeCode: string;
+    passengerTypeName: string;
+}
+/**
+ * Selected passenger item structure
+ */
+interface SelectedPassengerItem {
+    passengerTypeId: number;
+    passengerTypeCode: string;
+    passengerTypeName: string;
+    services: PassengerService[];
+}
+/**
+ * Props for ModalTotalPassengers component
+ */
+interface ModalTotalPassengersProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Jumlah Penumpang"
+     */
+    title?: string;
+    /**
+     * Array of passenger types from API
+     */
+    passengerTypes: PassengerType[];
+    /**
+     * Array of service classes
+     * @default DEFAULT_SERVICE_CLASSES
+     */
+    serviceClasses?: ServiceClass[];
+    /**
+     * Currently selected passengers
+     */
+    selectedPassengers: SelectedPassengerItem[];
+    /**
+     * Callback when save button is clicked
+     */
+    onSave: (passengers: SelectedPassengerItem[]) => void;
+    /**
+     * Loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Maximum number of passengers allowed
+     * @default 10
+     */
+    maxPassengers?: number;
+    /**
+     * Message to display in the info bar
+     * @default "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini."
+     */
+    infoMessage?: string;
+}
+/**
+ * ModalTotalPassengers - A reusable modal component for selecting passenger counts
+ *
+ * This component provides a passenger selection modal with features like:
+ * - Accordion for each passenger type
+ * - Counter for each service class (Economy, Business, Executive)
+ * - Automatic default selection (1 adult economy)
+ * - Validation and save functionality
+ *
+ * @example
+ * ```tsx
+ * <ModalTotalPassengers
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Jumlah Penumpang"
+ *   passengerTypes={passengerTypes}
+ *   selectedPassengers={selectedPassengers}
+ *   onSave={handleSave}
+ * />
+ * ```
+ */
+declare const ModalTotalPassengers: React$1.FC<ModalTotalPassengersProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.d.ts

@@ -731,4 +731,127 @@ interface ModalServiceProps {
  */
 declare const ModalService: React.FC<ModalServiceProps>;
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, type RadioOption, type SelectOption, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };
+/**
+ * Service class codes for passenger services
+ */
+type PassengerServiceCode = 'ECONOMY' | 'BUSINESS' | 'EXECUTIVE';
+/**
+ * Service class data structure
+ */
+interface ServiceClass {
+    id: number;
+    name: string;
+    key: string;
+    serviceName: PassengerServiceCode;
+}
+/**
+ * Default service classes available
+ */
+declare const DEFAULT_SERVICE_CLASSES: ServiceClass[];
+
+/**
+ * Passenger object structure
+ */
+interface Passenger {
+    [key: string]: any;
+}
+/**
+ * Service with passenger count
+ */
+interface PassengerService {
+    serviceId: number;
+    serviceName: PassengerServiceCode;
+    count: number;
+    passengers: Passenger[];
+}
+/**
+ * Passenger type from API
+ */
+interface PassengerType {
+    id: number;
+    passengerTypeCode: string;
+    passengerTypeName: string;
+}
+/**
+ * Selected passenger item structure
+ */
+interface SelectedPassengerItem {
+    passengerTypeId: number;
+    passengerTypeCode: string;
+    passengerTypeName: string;
+    services: PassengerService[];
+}
+/**
+ * Props for ModalTotalPassengers component
+ */
+interface ModalTotalPassengersProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Pilih Jumlah Penumpang"
+     */
+    title?: string;
+    /**
+     * Array of passenger types from API
+     */
+    passengerTypes: PassengerType[];
+    /**
+     * Array of service classes
+     * @default DEFAULT_SERVICE_CLASSES
+     */
+    serviceClasses?: ServiceClass[];
+    /**
+     * Currently selected passengers
+     */
+    selectedPassengers: SelectedPassengerItem[];
+    /**
+     * Callback when save button is clicked
+     */
+    onSave: (passengers: SelectedPassengerItem[]) => void;
+    /**
+     * Loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Maximum number of passengers allowed
+     * @default 10
+     */
+    maxPassengers?: number;
+    /**
+     * Message to display in the info bar
+     * @default "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini."
+     */
+    infoMessage?: string;
+}
+/**
+ * ModalTotalPassengers - A reusable modal component for selecting passenger counts
+ *
+ * This component provides a passenger selection modal with features like:
+ * - Accordion for each passenger type
+ * - Counter for each service class (Economy, Business, Executive)
+ * - Automatic default selection (1 adult economy)
+ * - Validation and save functionality
+ *
+ * @example
+ * ```tsx
+ * <ModalTotalPassengers
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Pilih Jumlah Penumpang"
+ *   passengerTypes={passengerTypes}
+ *   selectedPassengers={selectedPassengers}
+ *   onSave={handleSave}
+ * />
+ * ```
+ */
+declare const ModalTotalPassengers: React$1.FC<ModalTotalPassengersProps>;
+
+export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceItem, type ServiceMenuItem, type TabType, getModalPreset };

package/dist/index.js

@@ -3562,6 +3562,326 @@ var ModalService = ({
   );
 };
 
+// src/components/ModalTotalPassengers/constants.ts
+var DEFAULT_SERVICE_CLASSES = [
+  { id: 1, name: "Ekonomi", key: "ekonomi", serviceName: "ECONOMY" },
+  { id: 2, name: "Bisnis", key: "bisnis", serviceName: "BUSINESS" },
+  { id: 3, name: "Eksekutif", key: "eksekutif", serviceName: "EXECUTIVE" }
+];
+var useStyles11 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  passengerSection: {
+    marginTop: reactComponents.tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionHeader: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightBold
+  },
+  accordionItem: {
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    marginBottom: "1rem",
+    border: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`
+  },
+  passengerCount: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  },
+  counterButton: {
+    minWidth: "24px",
+    height: "24px",
+    padding: "0",
+    borderRadius: reactComponents.tokens.borderRadiusCircular,
+    color: reactComponents.tokens.colorBrandBackground,
+    border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
+    "&:hover": {
+      border: `1px solid ${reactComponents.tokens.colorBrandBackgroundHover}`,
+      color: reactComponents.tokens.colorBrandBackgroundHover
+    },
+    "&:disabled": {
+      border: `1px solid ${reactComponents.tokens.colorNeutralStrokeDisabled}`,
+      color: reactComponents.tokens.colorNeutralForegroundDisabled
+    }
+  },
+  countText: {
+    minWidth: "24px",
+    textAlign: "center"
+  },
+  nestedSection: {
+    borderTop: `2px solid ${reactComponents.tokens.colorBrandBackground}`,
+    display: "flex",
+    flexDirection: "column",
+    padding: "0.6rem"
+  },
+  nestedRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "4px",
+    borderRadius: reactComponents.tokens.borderRadiusSmall,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1
+  },
+  submitButton: {
+    marginTop: "16px",
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusCircular
+  },
+  accordionPanel: {
+    margin: 0
+  }
+});
+var ModalTotalPassengers = ({
+  open,
+  onClose,
+  title = "Pilih Jumlah Penumpang",
+  passengerTypes,
+  serviceClasses = DEFAULT_SERVICE_CLASSES,
+  selectedPassengers,
+  onSave,
+  isLoading = false,
+  maxPassengers = 10,
+  infoMessage
+}) => {
+  const styles = useStyles11();
+  const [passengers, setPassengers] = React2.useState([]);
+  const [openItems, setOpenItems] = React2.useState([]);
+  const defaultInfoMessage = `Anda dapat menambahkan hingga ${maxPassengers} penumpang pada golongan kendaraan ini.`;
+  React2.useEffect(() => {
+    if (passengerTypes.length === 0) return;
+    const defaultPassengers = passengerTypes.map((passengerType) => ({
+      passengerTypeId: passengerType.id,
+      passengerTypeCode: passengerType.passengerTypeCode,
+      passengerTypeName: passengerType.passengerTypeName,
+      services: serviceClasses.map((sc) => ({
+        serviceId: sc.id,
+        serviceName: sc.serviceName,
+        count: 0,
+        passengers: []
+      }))
+    }));
+    if (selectedPassengers && selectedPassengers.length > 0) {
+      const mergedPassengers = defaultPassengers.map((defaultP) => {
+        const selectedP = selectedPassengers.find(
+          (p) => p.passengerTypeCode === defaultP.passengerTypeCode
+        );
+        if (selectedP) {
+          const mergedServices = defaultP.services.map((defaultS) => {
+            const selectedS = selectedP.services.find((s) => s.serviceName === defaultS.serviceName);
+            return selectedS ? { ...defaultS, count: selectedS.count, passengers: selectedS.passengers || [] } : defaultS;
+          });
+          return { ...defaultP, services: mergedServices };
+        }
+        return defaultP;
+      });
+      setPassengers(mergedPassengers);
+      const itemsWithData = selectedPassengers.filter((p) => p.services.some((s) => s.count > 0)).map((p) => {
+        const passengerType = passengerTypes.find(
+          (pt) => pt.passengerTypeCode === p.passengerTypeCode
+        );
+        return passengerType ? String(passengerType.id) : "";
+      }).filter((id) => id !== "");
+      setOpenItems(itemsWithData);
+    } else {
+      setPassengers(defaultPassengers);
+      setOpenItems([]);
+    }
+  }, [open, passengerTypes, serviceClasses, selectedPassengers]);
+  const getServiceCount = (passengerTypeCode, serviceName) => {
+    const passenger = passengers.find((p) => p.passengerTypeCode === passengerTypeCode);
+    if (!passenger) return 0;
+    const service = passenger.services.find((s) => s.serviceName === serviceName);
+    return service?.count || 0;
+  };
+  const getTotalForType = (passengerTypeCode) => {
+    const passenger = passengers.find((p) => p.passengerTypeCode === passengerTypeCode);
+    if (!passenger) return "0";
+    const parts = [];
+    passenger.services.forEach((service) => {
+      if (service.count > 0) {
+        const serviceClass = serviceClasses.find((sc) => sc.serviceName === service.serviceName);
+        const serviceName = serviceClass?.name || service.serviceName;
+        parts.push(`${service.count} ${serviceName}`);
+      }
+    });
+    return parts.length > 0 ? parts.join(", ") : "0";
+  };
+  const handleIncrement = (passengerTypeCode, serviceName) => {
+    setPassengers(
+      (prev) => prev.map((passenger) => {
+        if (passenger.passengerTypeCode === passengerTypeCode) {
+          return {
+            ...passenger,
+            services: passenger.services.map((service) => {
+              if (service.serviceName === serviceName) {
+                const newCount = service.count + 1;
+                const newPassengers = [...service.passengers || []];
+                while (newPassengers.length < newCount) {
+                  newPassengers.push({});
+                }
+                return {
+                  ...service,
+                  count: newCount,
+                  passengers: newPassengers
+                };
+              }
+              return service;
+            })
+          };
+        }
+        return passenger;
+      })
+    );
+  };
+  const handleDecrement = (passengerTypeCode, serviceName) => {
+    setPassengers(
+      (prev) => prev.map((passenger) => {
+        if (passenger.passengerTypeCode === passengerTypeCode) {
+          return {
+            ...passenger,
+            services: passenger.services.map((service) => {
+              if (service.serviceName === serviceName && service.count > 0) {
+                const newCount = service.count - 1;
+                const newPassengers = (service.passengers || []).slice(0, newCount);
+                return {
+                  ...service,
+                  count: newCount,
+                  passengers: newPassengers
+                };
+              }
+              return service;
+            })
+          };
+        }
+        return passenger;
+      })
+    );
+  };
+  const handleSave = () => {
+    const filteredPassengers = passengers.map((passenger) => ({
+      ...passenger,
+      services: passenger.services.filter((service) => service.count > 0)
+    })).filter((passenger) => passenger.services.length > 0);
+    onSave(filteredPassengers);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-12-regular" }),
+                onClick: onClose
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Loading..." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Accordion,
+              {
+                collapsible: true,
+                multiple: true,
+                openItems,
+                onToggle: (_, data) => setOpenItems(data.openItems),
+                className: styles.passengerSection,
+                children: passengerTypes.map((passengerType) => {
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.AccordionItem,
+                    {
+                      value: String(passengerType.id),
+                      className: styles.accordionItem,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: [
+                          passengerType.passengerTypeName,
+                          " (",
+                          getTotalForType(passengerType.passengerTypeCode),
+                          ")"
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: serviceClasses.map((service) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: service.name }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              reactComponents.Button,
+                              {
+                                appearance: "outline",
+                                className: styles.counterButton,
+                                size: "small",
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleDecrement(
+                                    passengerType.passengerTypeCode,
+                                    service.serviceName
+                                  );
+                                },
+                                disabled: getServiceCount(
+                                  passengerType.passengerTypeCode,
+                                  service.serviceName
+                                ) === 0
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
+                              passengerType.passengerTypeCode,
+                              service.serviceName
+                            ) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              reactComponents.Button,
+                              {
+                                appearance: "outline",
+                                className: styles.counterButton,
+                                size: "small",
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-12-regular" }),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleIncrement(
+                                    passengerType.passengerTypeCode,
+                                    service.serviceName
+                                  );
+                                }
+                              }
+                            )
+                          ] })
+                        ] }, service.key)) }) })
+                      ]
+                    },
+                    passengerType.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "primary",
+                size: "medium",
+                className: styles.submitButton,
+                onClick: handleSave,
+                children: "Simpan"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
 exports.CardBanner = CardBanner;
@@ -3570,12 +3890,14 @@ exports.CardServiceMenu = CardServiceMenu;
 exports.CardTicket = CardTicket;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
 exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES2;
+exports.DEFAULT_SERVICE_CLASSES = DEFAULT_SERVICE_CLASSES;
 exports.InputDynamic = InputDynamic_default;
 exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalSearchHarbor = ModalSearchHarbor;
 exports.ModalSelectDate = ModalSelectDate;
 exports.ModalService = ModalService;
+exports.ModalTotalPassengers = ModalTotalPassengers;
 exports.getModalPreset = getModalPreset;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map