@asdp/ferryui 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, typographyStyles, Checkbox, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
+import { makeStyles, tokens, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, Body1, Button, Carousel, mergeClasses, CarouselViewport, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Subtitle2, Card, Tooltip, Badge, Caption1, Title2, Caption2, Divider, Title3, Caption1Strong, Field, Label, Text, Body1Strong, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, typographyStyles, RadioGroup, Radio, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React2, { forwardRef, useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Icon } from '@iconify/react';
@@ -3361,7 +3361,518 @@ var ModalSelectDate = ({
     }
   );
 };
+var useStyles10 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    paddingTop: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  headerRow: {
+    display: "flex",
+    justifyContent: "end",
+    alignItems: "center",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  serviceList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0px",
+    maxHeight: "400px",
+    overflowY: "auto",
+    paddingLeft: "20px"
+  },
+  serviceItem: {
+    padding: "16px 0px",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    cursor: "pointer",
+    transition: "background-color 0.2s ease",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    }
+  },
+  serviceContent: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  serviceName: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    color: tokens.colorNeutralForeground1
+  },
+  serviceType: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2
+  },
+  serviceDescription: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground3,
+    lineHeight: "1.4"
+  },
+  footer: {
+    padding: "16px 20px",
+    borderTop: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  saveButton: {
+    width: "100%",
+    borderRadius: tokens.borderRadiusCircular
+  }
+});
+var ModalService = ({
+  open,
+  onClose,
+  title = "Pilih Kelas Layanan",
+  services,
+  selectedServiceIds,
+  onSave,
+  isLoading = false,
+  isError = false
+}) => {
+  const styles = useStyles10();
+  const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
+  useEffect(() => {
+    if (open) {
+      if (selectedServiceIds && selectedServiceIds.length > 0) {
+        const validIds = services.filter((s) => selectedServiceIds.includes(s.id)).map((s) => s.id);
+        setSelectedServices(validIds);
+      } else {
+        setSelectedServices(services.map((s) => s.id));
+      }
+    }
+  }, [open, services, selectedServiceIds]);
+  const handleClose = () => {
+    onClose();
+  };
+  const handleToggleService = (serviceId) => {
+    setSelectedServices((prev) => {
+      if (prev.includes(serviceId)) {
+        return prev.filter((id) => id !== serviceId);
+      } else {
+        return [...prev, serviceId];
+      }
+    });
+  };
+  const handleToggleAll = () => {
+    if (selectedServices.length === services.length) {
+      setSelectedServices([]);
+    } else {
+      setSelectedServices(services.map((s) => s.id));
+    }
+  };
+  const handleSave = () => {
+    const selectedServiceItems = services.filter((s) => selectedServices.includes(s.id));
+    onSave(selectedServiceItems);
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: handleClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: "Loading..." }) : isError ? /* @__PURE__ */ jsx(Body1, { children: "Error loading services" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+              /* @__PURE__ */ jsx(Body1, { children: "Pilih Semua" }),
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedServices.length === services.length,
+                  onChange: handleToggleAll
+                }
+              )
+            ] }),
+            services.map((service) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.serviceItem,
+                onClick: () => handleToggleService(service.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
+                    /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
+                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: selectedServices.includes(service.id),
+                      onChange: () => handleToggleService(service.id)
+                    }
+                  )
+                ]
+              },
+              service.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              size: "medium",
+              className: styles.saveButton,
+              onClick: handleSave,
+              disabled: selectedServices.length === 0,
+              children: "Simpan"
+            }
+          ) })
+        ] }) })
+      ] }) })
+    }
+  );
+};
+
+// 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 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  passengerSection: {
+    marginTop: tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionHeader: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightBold
+  },
+  accordionItem: {
+    borderRadius: tokens.borderRadiusXLarge,
+    marginBottom: "1rem",
+    border: `1px solid ${tokens.colorNeutralStroke2}`
+  },
+  passengerCount: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  },
+  counterButton: {
+    minWidth: "24px",
+    height: "24px",
+    padding: "0",
+    borderRadius: tokens.borderRadiusCircular,
+    color: tokens.colorBrandBackground,
+    border: `1px solid ${tokens.colorBrandBackground}`,
+    "&:hover": {
+      border: `1px solid ${tokens.colorBrandBackgroundHover}`,
+      color: tokens.colorBrandBackgroundHover
+    },
+    "&:disabled": {
+      border: `1px solid ${tokens.colorNeutralStrokeDisabled}`,
+      color: tokens.colorNeutralForegroundDisabled
+    }
+  },
+  countText: {
+    minWidth: "24px",
+    textAlign: "center"
+  },
+  nestedSection: {
+    borderTop: `2px solid ${tokens.colorBrandBackground}`,
+    display: "flex",
+    flexDirection: "column",
+    padding: "0.6rem"
+  },
+  nestedRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "4px",
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: tokens.colorNeutralBackground1
+  },
+  submitButton: {
+    marginTop: "16px",
+    width: "100%",
+    borderRadius: 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] = useState([]);
+  const [openItems, setOpenItems] = useState([]);
+  const defaultInfoMessage = `Anda dapat menambahkan hingga ${maxPassengers} penumpang pada golongan kendaraan ini.`;
+  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__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      children: /* @__PURE__ */ jsx(DialogSurface, { children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-12-regular" }),
+                onClick: onClose
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsx(MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
+          isLoading ? /* @__PURE__ */ jsx(Body1, { children: "Loading..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                collapsible: true,
+                multiple: true,
+                openItems,
+                onToggle: (_, data) => setOpenItems(data.openItems),
+                className: styles.passengerSection,
+                children: passengerTypes.map((passengerType) => {
+                  return /* @__PURE__ */ jsxs(
+                    AccordionItem,
+                    {
+                      value: String(passengerType.id),
+                      className: styles.accordionItem,
+                      children: [
+                        /* @__PURE__ */ jsxs(AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: [
+                          passengerType.passengerTypeName,
+                          " (",
+                          getTotalForType(passengerType.passengerTypeCode),
+                          ")"
+                        ] }),
+                        /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: serviceClasses.map((service) => /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
+                          /* @__PURE__ */ jsx(Body1, { children: service.name }),
+                          /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                appearance: "outline",
+                                className: styles.counterButton,
+                                size: "small",
+                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleDecrement(
+                                    passengerType.passengerTypeCode,
+                                    service.serviceName
+                                  );
+                                },
+                                disabled: getServiceCount(
+                                  passengerType.passengerTypeCode,
+                                  service.serviceName
+                                ) === 0
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+                              passengerType.passengerTypeCode,
+                              service.serviceName
+                            ) }),
+                            /* @__PURE__ */ jsx(
+                              Button,
+                              {
+                                appearance: "outline",
+                                className: styles.counterButton,
+                                size: "small",
+                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleIncrement(
+                                    passengerType.passengerTypeCode,
+                                    service.serviceName
+                                  );
+                                }
+                              }
+                            )
+                          ] })
+                        ] }, service.key)) }) })
+                      ]
+                    },
+                    passengerType.id
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "medium",
+                className: styles.submitButton,
+                onClick: handleSave,
+                children: "Simpan"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, getModalPreset };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, ModalTotalPassengers, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map