@asdp/ferryui 0.1.7 → 0.1.9

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, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, 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, RadioGroup, Radio, typographyStyles, 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';
@@ -3872,7 +3872,276 @@ var ModalTotalPassengers = ({
     }
   );
 };
+var useStyles12 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  passengerSection: {
+    marginTop: tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    width: "100%"
+  },
+  accordionHeader: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightBold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  accordionTitleAndInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginLeft: tokens.spacingHorizontalM,
+    flex: 1
+  },
+  accordionBody: {
+    marginLeft: "100px"
+  },
+  footer: {
+    marginTop: tokens.spacingVerticalL,
+    display: "flex",
+    gap: tokens.spacingHorizontalM,
+    justifyContent: "flex-end"
+  }
+});
+var ModalTypeOfService = ({
+  open,
+  onClose,
+  title = "Pilih Tipe Layanan",
+  serviceTypes,
+  selectedService,
+  onSave,
+  renderImage
+}) => {
+  const styles = useStyles12();
+  const [selectedServiceTitle, setSelectedServiceTitle] = useState(
+    selectedService?.title || ""
+  );
+  const [openItems, setOpenItems] = 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__ */ jsx("img", { src, alt, width, height, style: { objectFit: "contain" } });
+  const imageRenderer = renderImage || defaultRenderImage;
+  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__ */ 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: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(
+            Accordion,
+            {
+              collapsible: true,
+              openItems,
+              onToggle: (_, data) => setOpenItems(data.openItems[0]),
+              className: styles.passengerSection,
+              children: /* @__PURE__ */ jsx(
+                RadioGroup,
+                {
+                  value: selectedServiceTitle,
+                  onChange: (_, data) => setSelectedServiceTitle(data.value),
+                  children: serviceTypes.map((item, index) => {
+                    if (item.type === "accordion") {
+                      return /* @__PURE__ */ jsxs(AccordionItem, { value: item.id, className: styles.accordionItem, children: [
+                        /* @__PURE__ */ jsxs(
+                          AccordionHeader,
+                          {
+                            className: styles.accordionHeader,
+                            expandIconPosition: "end",
+                            children: [
+                              /* @__PURE__ */ jsx("div", { children: imageRenderer({ src: item.image, alt: "vehicles", width: 74, height: 74 }) }),
+                              /* @__PURE__ */ jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsx(Body1, { children: item.title }),
+                                /* @__PURE__ */ jsx(Caption1, { children: item.info })
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionBody, children: item.child.length > 0 && item.child.map((childItem, childIndex) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: mergeClasses(
+                              styles.accordionHeader,
+                              styles.accordionItem
+                            ),
+                            style: { padding: tokens.spacingHorizontalXS },
+                            children: [
+                              /* @__PURE__ */ jsx("div", { children: imageRenderer({
+                                src: childItem.image,
+                                alt: childItem.title,
+                                width: 48,
+                                height: 48
+                              }) }),
+                              /* @__PURE__ */ jsxs("div", { className: styles.accordionTitleAndInfo, children: [
+                                /* @__PURE__ */ jsx(Body1, { children: childItem.title }),
+                                /* @__PURE__ */ jsx(Caption1, { children: childItem.info })
+                              ] }),
+                              /* @__PURE__ */ jsx(Radio, { value: childItem.title })
+                            ]
+                          },
+                          childIndex
+                        )) })
+                      ] }, index);
+                    } else if (item.type === "radio") {
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: mergeClasses(styles.accordionHeader, styles.accordionItem),
+                          style: { padding: tokens.spacingHorizontalXS },
+                          children: [
+                            /* @__PURE__ */ jsx("div", { style: { marginLeft: 2 }, children: imageRenderer({ src: item.image, alt: item.title, width: 74, height: 74 }) }),
+                            /* @__PURE__ */ jsxs("div", { className: styles.accordionTitleAndInfo, style: { marginLeft: 18 }, children: [
+                              /* @__PURE__ */ jsx(Body1, { children: item.title }),
+                              /* @__PURE__ */ jsx(Caption1, { children: item.info })
+                            ] }),
+                            /* @__PURE__ */ jsx(Radio, { value: item.title })
+                          ]
+                        },
+                        index
+                      );
+                    }
+                    return null;
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsx(Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: "Batal" }),
+            /* @__PURE__ */ jsx(
+              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"
+};
 
-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 };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardBanner, CardPromo, CardServiceMenu, CardTicket, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES2 as DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, DEFAULT_VEHICLE_ICONS, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalIllustration, ModalSearchHarbor, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, getModalPreset };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map