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

package/dist/index.d.mts

@@ -2504,6 +2504,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 +2515,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 +2542,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

@@ -2504,6 +2504,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 +2515,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 +2542,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 })
+      ] }) }) })
     ] })
   ] });
 };