@asdp/ferryui 0.1.22-dev.10593 → 0.1.22-dev.10665

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction, DialogProps } from '@fluentui/react-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, Path, Control, UseFormWatch, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 
@@ -548,13 +547,13 @@ declare const CardTicket: React$1.FC<CardTicketProps>;
  * Horizontal ticket card background with decorative perforated edges
  * Use this for desktop/landscape layouts
  */
-declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 /**
  * Vertical ticket card background with decorative perforated edges
  * Use this for mobile/portrait layouts
  */
-declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 type ServiceId = 'ferry' | 'ifcs' | 'skpt' | 'hotel' | 'other';
 interface CardServiceMenuLabels {
@@ -2504,6 +2503,7 @@ type StepStatus = 'completed' | 'active' | 'inactive';
 
 declare const Stepper: React$1.FC<StepperProps>;
 
+type NotificationType = 'whatsapp' | 'sms';
 interface Orderer {
     name?: string;
     phoneNumber?: string;
@@ -2514,6 +2514,13 @@ interface CardOrdererInfoLabels {
     ordererName: string;
     phoneNumber: string;
     email: string;
+    addCcEmail: string;
+    ccEmail: string;
+    ccEmailPlaceholder: string;
+    ccEmailHint: string;
+    notificationLabel: string;
+    whatsapp: string;
+    sms: string;
 }
 interface CardOrdererInfoProps {
     /**
@@ -2534,6 +2541,28 @@ interface CardOrdererInfoProps {
      * Additional CSS class name
      */
     className?: string;
+    /**
+     * Current CC email value
+     */
+    ccEmail?: string;
+    /**
+     * Callback when CC email input value changes
+     */
+    onCcEmailChange?: (value: string) => void;
+    /**
+     * Callback when CC email is removed (trash button clicked)
+     * When provided, the "Tambahkan Cc Email" link is shown
+     */
+    onCcEmailRemove?: () => void;
+    /**
+     * Selected notification type
+     * @default 'whatsapp'
+     */
+    notificationType?: NotificationType;
+    /**
+     * Callback when notification type changes
+     */
+    onNotificationTypeChange?: (type: NotificationType) => void;
 }
 
 declare const CardOrdererInfo: React$1.FC<CardOrdererInfoProps>;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import React$1, { ReactNode } from 'react';
 import { CarouselAnnouncerFunction, DialogProps } from '@fluentui/react-components';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, Path, Control, UseFormWatch, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 
@@ -548,13 +547,13 @@ declare const CardTicket: React$1.FC<CardTicketProps>;
  * Horizontal ticket card background with decorative perforated edges
  * Use this for desktop/landscape layouts
  */
-declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 /**
  * Vertical ticket card background with decorative perforated edges
  * Use this for mobile/portrait layouts
  */
-declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => React$1.JSX.Element;
 
 type ServiceId = 'ferry' | 'ifcs' | 'skpt' | 'hotel' | 'other';
 interface CardServiceMenuLabels {
@@ -2504,6 +2503,7 @@ type StepStatus = 'completed' | 'active' | 'inactive';
 
 declare const Stepper: React$1.FC<StepperProps>;
 
+type NotificationType = 'whatsapp' | 'sms';
 interface Orderer {
     name?: string;
     phoneNumber?: string;
@@ -2514,6 +2514,13 @@ interface CardOrdererInfoLabels {
     ordererName: string;
     phoneNumber: string;
     email: string;
+    addCcEmail: string;
+    ccEmail: string;
+    ccEmailPlaceholder: string;
+    ccEmailHint: string;
+    notificationLabel: string;
+    whatsapp: string;
+    sms: string;
 }
 interface CardOrdererInfoProps {
     /**
@@ -2534,6 +2541,28 @@ interface CardOrdererInfoProps {
      * Additional CSS class name
      */
     className?: string;
+    /**
+     * Current CC email value
+     */
+    ccEmail?: string;
+    /**
+     * Callback when CC email input value changes
+     */
+    onCcEmailChange?: (value: string) => void;
+    /**
+     * Callback when CC email is removed (trash button clicked)
+     * When provided, the "Tambahkan Cc Email" link is shown
+     */
+    onCcEmailRemove?: () => void;
+    /**
+     * Selected notification type
+     * @default 'whatsapp'
+     */
+    notificationType?: NotificationType;
+    /**
+     * Callback when notification type changes
+     */
+    onNotificationTypeChange?: (type: NotificationType) => void;
 }
 
 declare const CardOrdererInfo: React$1.FC<CardOrdererInfoProps>;

package/dist/index.js

@@ -10786,13 +10786,27 @@ var DEFAULT_LABELS21 = {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
     phoneNumber: "Nomor Handphone",
-    email: "Email"
+    email: "Email",
+    addCcEmail: "Tambahkan Cc Email",
+    ccEmail: "CC Email",
+    ccEmailPlaceholder: "Masukkan email",
+    ccEmailHint: "E-Tiket akan di kirim ke email ini",
+    notificationLabel: "Pilih pengiriman notifkasi",
+    whatsapp: "WhatsApp",
+    sms: "SMS"
   },
   en: {
     title: "Orderer Information",
     ordererName: "Orderer Name",
     phoneNumber: "Phone Number",
-    email: "Email"
+    email: "Email",
+    addCcEmail: "Add Cc Email",
+    ccEmail: "CC Email",
+    ccEmailPlaceholder: "Enter email",
+    ccEmailHint: "E-Ticket will be sent to this email",
+    notificationLabel: "Select notification delivery",
+    whatsapp: "WhatsApp",
+    sms: "SMS"
   }
 };
 var useStyles22 = reactComponents.makeStyles({
@@ -10802,46 +10816,169 @@ var useStyles22 = reactComponents.makeStyles({
     boxShadow: reactComponents.tokens.shadow4,
     zIndex: 3
   },
-  container: {
+  header: {
     display: "flex",
-    justifyContent: "space-between",
-    marginTop: "1rem"
+    alignItems: "center",
+    gap: "1rem",
+    marginBottom: "1.25rem"
+  },
+  title: {
+    flexShrink: 0
+  },
+  divider: {
+    flexGrow: 1
   },
   fieldGroup: {
     display: "flex",
     flexDirection: "column",
-    gap: "0.25rem"
+    gap: "0.25rem",
+    flex: 1
   },
   label: {
     color: reactComponents.tokens.colorNeutralForeground2
   },
   value: {
     color: tokensV2_default.lightModeColors.Neutral_Foreground_Disabled_Rest
+  },
+  addCcLink: {
+    marginTop: "0.375rem"
+  },
+  bottomRow: {
+    display: "flex",
+    flexDirection: "row",
+    gap: "2rem",
+    marginTop: "1.25rem",
+    alignItems: "flex-start"
+  },
+  // Notification section aligns under the first column (Nama Pemesan)
+  notificationSection: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column"
+  },
+  notificationLabel: {
+    color: reactComponents.tokens.colorNeutralForeground2,
+    display: "block",
+    marginBottom: "0.5rem"
+  },
+  // CC section spans the remaining two columns (Phone + Email)
+  ccSection: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.375rem"
+  },
+  ccLabel: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  ccInputRow: {
+    display: "flex",
+    alignItems: "center"
+  },
+  ccInput: {
+    flex: 1
+  },
+  deleteButton: {
+    color: reactComponents.tokens.colorStatusDangerForeground1,
+    minWidth: "unset",
+    padding: "0 0.5rem"
+  },
+  ccHint: {
+    color: tokensV2_default.lightModeColors.Neutral_Foreground_Disabled_Rest
   }
 });
 var CardOrdererInfo = ({
   language = "id",
   orderer,
   labels,
-  className
+  className,
+  ccEmail,
+  onCcEmailChange,
+  onCcEmailRemove,
+  notificationType: notificationTypeProp = "whatsapp",
+  onNotificationTypeChange
 }) => {
   const styles = useStyles22();
   const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
+  const [showCcForm, setShowCcForm] = React.useState(false);
+  const [notificationType, setNotificationType] = React.useState(notificationTypeProp);
+  const handleNotificationChange = (_e, data) => {
+    const value = data.value;
+    setNotificationType(value);
+    onNotificationTypeChange?.(value);
+  };
+  const handleAddCcClick = () => {
+    setShowCcForm(true);
+  };
+  const handleRemoveCc = () => {
+    setShowCcForm(false);
+    onCcEmailChange?.("");
+    onCcEmailRemove?.();
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: mergedLabels.title }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: mergedLabels.ordererName }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.title, children: mergedLabels.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.divider })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.label, children: mergedLabels.ordererName }),
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.name || "-" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: mergedLabels.phoneNumber }),
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.label, children: mergedLabels.phoneNumber }),
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.phoneNumber || "-" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: mergedLabels.email }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.email || "-" })
-      ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.label, children: mergedLabels.email }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.email || "-" }),
+        !showCcForm && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { className: styles.addCcLink, onClick: handleAddCcClick, children: mergedLabels.addCcEmail })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 4, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.notificationSection, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body2, { className: styles.notificationLabel, children: mergedLabels.notificationLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.RadioGroup,
+          {
+            layout: "horizontal",
+            value: notificationType,
+            onChange: handleNotificationChange,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "whatsapp", label: mergedLabels.whatsapp }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "sms", label: mergedLabels.sms })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { md: 4, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ccSection, children: showCcForm && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.ccLabel, children: mergedLabels.ccEmail }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ccInputRow, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Input,
+          {
+            className: styles.ccInput,
+            type: "email",
+            placeholder: mergedLabels.ccEmailPlaceholder,
+            value: ccEmail ?? "",
+            onChange: (_e, data) => onCcEmailChange?.(data.value),
+            contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "transparent",
+                className: styles.deleteButton,
+                onClick: handleRemoveCc,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:delete-24-regular",
+                    color: reactComponents.tokens.colorStatusDangerForeground1,
+                    width: 18
+                  }
+                )
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { className: styles.ccHint, children: mergedLabels.ccEmailHint })
+      ] }) }) })
     ] })
   ] });
 };
@@ -14518,22 +14655,22 @@ var CardBookingAddOn = ({
   const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   const addOnRows = [
-    {
+    addOnData?.lounge && {
       key: "lounge",
-      label: addOnData?.lounge?.label || mergedLabels.loungeLabel,
-      price: addOnData?.lounge?.price || mergedLabels.addOnPrice
+      label: addOnData.lounge.label || mergedLabels.loungeLabel,
+      price: addOnData.lounge.price
     },
-    {
+    addOnData?.assurance && {
       key: "assurance",
-      label: addOnData?.assurance?.label || mergedLabels.assuranceLabel,
-      price: addOnData?.assurance?.price || mergedLabels.addOnPrice
+      label: addOnData.assurance.label || mergedLabels.assuranceLabel,
+      price: addOnData.assurance.price
     },
-    {
+    addOnData?.meal && {
       key: "meal",
-      label: addOnData?.meal?.label || mergedLabels.mealLabel,
-      price: addOnData?.meal?.price || mergedLabels.addOnPrice
+      label: addOnData.meal.label || mergedLabels.mealLabel,
+      price: addOnData.meal.price
     }
-  ];
+  ].filter(Boolean);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -15552,6 +15689,16 @@ var useStyles34 = reactComponents.makeStyles({
     flexDirection: "column",
     rowGap: reactComponents.tokens.spacingVerticalL
   },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalL
+  },
+  passengerListScrollable: {
+    maxHeight: "560px",
+    overflowY: "auto",
+    paddingRight: reactComponents.tokens.spacingHorizontalXS
+  },
   passengerCard: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -15610,12 +15757,13 @@ var CardReviewPassenger = ({
   const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.title;
+  const isScrollable = !isLoading && passengers.length > 5;
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.list, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.titleDivider })
     ] }) }),
-    isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.passengerList} ${isScrollable ? styles.passengerListScrollable : ""}`, children: isLoading ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: styles.passengerCard, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.passengerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "18px", marginBottom: "8px" } }),
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "220px", height: "16px" } })
@@ -15653,7 +15801,7 @@ var CardReviewPassenger = ({
           }
         ) })
       ] }) }) }, passenger.id || index);
-    })
+    }) })
   ] }) });
 };