@asdp/ferryui 0.1.6 → 0.1.8

package/dist/index.js

@@ -3562,6 +3562,595 @@ 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"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+var useStyles12 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  passengerSection: {
+    marginTop: reactComponents.tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    width: "100%"
+  },
+  accordionHeader: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightBold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  accordionTitleAndInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginLeft: reactComponents.tokens.spacingHorizontalM,
+    flex: 1
+  },
+  accordionBody: {
+    marginLeft: "100px"
+  },
+  footer: {
+    marginTop: reactComponents.tokens.spacingVerticalL,
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalM,
+    justifyContent: "flex-end"
+  }
+});
+var ModalTypeOfService = ({
+  open,
+  onClose,
+  title = "Pilih Tipe Layanan",
+  serviceTypes,
+  selectedService,
+  onSave,
+  renderImage
+}) => {
+  const styles = useStyles12();
+  const [selectedServiceTitle, setSelectedServiceTitle] = React2.useState(
+    selectedService?.title || ""
+  );
+  const [openItems, setOpenItems] = React2.useState(() => {
+    if (!selectedService) return void 0;
+    for (const item of serviceTypes) {
+      if (item.type === "accordion" && item.child.length > 0) {
+        const hasSelectedChild = item.child.some(
+          (child) => child.title === selectedService.title
+        );
+        if (hasSelectedChild) {
+          return item.id;
+        }
+      }
+    }
+    return void 0;
+  });
+  const defaultRenderImage = ({ src, alt, width, height }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, width, height, style: { objectFit: "contain" } });
+  const imageRenderer = renderImage || defaultRenderImage;
+  React2.useEffect(() => {
+    const newTitle = selectedService?.title || "";
+    if (newTitle !== selectedServiceTitle) {
+      setSelectedServiceTitle(newTitle);
+    }
+    if (selectedService) {
+      for (const item of serviceTypes) {
+        if (item.type === "accordion" && item.child.length > 0) {
+          const hasSelectedChild = item.child.some(
+            (child) => child.title === selectedService.title
+          );
+          if (hasSelectedChild && openItems !== item.id) {
+            setOpenItems(item.id);
+            break;
+          }
+        }
+      }
+    } else if (openItems !== void 0) {
+      setOpenItems(void 0);
+    }
+  }, [open, selectedService?.title]);
+  const handleConfirm = () => {
+    if (selectedServiceTitle) {
+      let selectedItem = null;
+      for (const item of serviceTypes) {
+        if (item.title === selectedServiceTitle) {
+          selectedItem = {
+            id: item.id,
+            image: item.image,
+            title: item.title,
+            info: item.info,
+            price: item.price,
+            parentTitle: "",
+            parentId: 0,
+            type: item.type,
+            typeOfPassanger: item.typeOfPassanger,
+            child: []
+          };
+          break;
+        }
+        if (item.child && item.child.length > 0) {
+          const childItem = item.child.find((child) => child.title === selectedServiceTitle);
+          if (childItem) {
+            selectedItem = {
+              id: childItem.id,
+              image: childItem.image,
+              title: childItem.title,
+              info: childItem.info,
+              price: childItem.price,
+              parentTitle: childItem.parentTitle,
+              parentId: childItem.parentId,
+              type: childItem.type,
+              typeOfPassanger: childItem.typeOfPassanger,
+              child: []
+            };
+            break;
+          }
+        }
+      }
+      if (selectedItem) {
+        onSave(selectedItem);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.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-24-regular" }),
+                onClick: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Accordion,
+            {
+              collapsible: true,
+              openItems,
+              onToggle: (_, data) => setOpenItems(data.openItems[0]),
+              className: styles.passengerSection,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.RadioGroup,
+                {
+                  value: selectedServiceTitle,
+                  onChange: (_, data) => setSelectedServiceTitle(data.value),
+                  children: serviceTypes.map((item, index) => {
+                    if (item.type === "accordion") {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: item.id, className: styles.accordionItem, children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          reactComponents.AccordionHeader,
+                          {
+                            className: styles.accordionHeader,
+                            expandIconPosition: "end",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({ src: item.image, alt: "vehicles", width: 74, height: 74 }) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.title }),
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: item.info })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionBody, children: item.child.length > 0 && item.child.map((childItem, childIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
+                          {
+                            className: reactComponents.mergeClasses(
+                              styles.accordionHeader,
+                              styles.accordionItem
+                            ),
+                            style: { padding: reactComponents.tokens.spacingHorizontalXS },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({
+                                src: childItem.image,
+                                alt: childItem.title,
+                                width: 48,
+                                height: 48
+                              }) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: childItem.title })
+                            ]
+                          },
+                          childIndex
+                        )) })
+                      ] }, index);
+                    } else if (item.type === "radio") {
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: reactComponents.mergeClasses(styles.accordionHeader, styles.accordionItem),
+                          style: { padding: reactComponents.tokens.spacingHorizontalXS },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 2 }, children: imageRenderer({ src: item.image, alt: item.title, width: 74, height: 74 }) }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, style: { marginLeft: 18 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.title }),
+                              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: item.info })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: item.title })
+                          ]
+                        },
+                        index
+                      );
+                    }
+                    return null;
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: "Batal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "primary",
+                shape: "circular",
+                onClick: handleConfirm,
+                disabled: !selectedServiceTitle,
+                children: "Simpan"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+
+// src/components/ModalTypeOfService/constants.ts
+var DEFAULT_VEHICLE_ICONS = {
+  pedestrian: "/assets/images/icons/pedestrian.webp",
+  roadbike: "/assets/images/icons/roadbike.webp",
+  motorbike1: "/assets/images/icons/motorbike-1.webp",
+  motorbike2: "/assets/images/icons/motorbike-2.svg",
+  smallCar: "/assets/images/icons/small-car.webp",
+  smallBus: "/assets/images/icons/small-bus.webp",
+  bigBus: "/assets/images/icons/big-bus.webp",
+  truck: "/assets/images/icons/truck.webp",
+  bigTruck: "/assets/images/icons/big-truck.webp",
+  looseLoad: "/assets/images/icons/loose-load.webp"
+};
+
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
 exports.CardBanner = CardBanner;
@@ -3570,12 +4159,16 @@ exports.CardServiceMenu = CardServiceMenu;
 exports.CardTicket = CardTicket;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
 exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES2;
+exports.DEFAULT_SERVICE_CLASSES = DEFAULT_SERVICE_CLASSES;
+exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 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.ModalTypeOfService = ModalTypeOfService;
 exports.getModalPreset = getModalPreset;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map