@asdp/ferryui 0.1.6 → 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, Checkbox, typographyStyles, 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';
@@ -3553,6 +3553,326 @@ var ModalService = ({
   );
 };
 
-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, ModalService, getModalPreset };
+// 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, DEFAULT_SERVICE_CLASSES, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, ModalTotalPassengers, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map