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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, InfoLabel, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Spinner, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Menu, MenuTrigger, MenuPopover, MenuList, Radio, DialogActions, Caption2Strong, Link, Body2, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, typographyStyles, Switch, Textarea } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
@@ -10777,13 +10777,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 = makeStyles({
@@ -10793,46 +10807,169 @@ var useStyles22 = makeStyles({
     boxShadow: 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: 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: 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: tokens.colorNeutralForeground2
+  },
+  ccInputRow: {
+    display: "flex",
+    alignItems: "center"
+  },
+  ccInput: {
+    flex: 1
+  },
+  deleteButton: {
+    color: 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] = useState(false);
+  const [notificationType, setNotificationType] = 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__ */ jsxs(Card, { className: className || styles.card, children: [
-    /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
-    /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: mergedLabels.ordererName }),
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx(Title3, { className: styles.title, children: mergedLabels.title }),
+      /* @__PURE__ */ jsx(Divider, { className: styles.divider })
+    ] }),
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Col, { md: 4, children: /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Caption1, { className: styles.label, children: mergedLabels.ordererName }),
         /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.name || "-" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: mergedLabels.phoneNumber }),
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { md: 4, children: /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Caption1, { className: styles.label, children: mergedLabels.phoneNumber }),
         /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.phoneNumber || "-" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
-        /* @__PURE__ */ jsx(Subtitle2, { className: styles.label, children: mergedLabels.email }),
-        /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.email || "-" })
-      ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { md: 4, children: /* @__PURE__ */ jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsx(Caption1, { className: styles.label, children: mergedLabels.email }),
+        /* @__PURE__ */ jsx(Body1, { className: styles.value, children: orderer?.email || "-" }),
+        !showCcForm && /* @__PURE__ */ jsx(Link, { className: styles.addCcLink, onClick: handleAddCcClick, children: mergedLabels.addCcEmail })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { md: 4, children: /* @__PURE__ */ jsxs("div", { className: styles.notificationSection, children: [
+        /* @__PURE__ */ jsx(Body2, { className: styles.notificationLabel, children: mergedLabels.notificationLabel }),
+        /* @__PURE__ */ jsxs(
+          RadioGroup,
+          {
+            layout: "horizontal",
+            value: notificationType,
+            onChange: handleNotificationChange,
+            children: [
+              /* @__PURE__ */ jsx(Radio, { value: "whatsapp", label: mergedLabels.whatsapp }),
+              /* @__PURE__ */ jsx(Radio, { value: "sms", label: mergedLabels.sms })
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { md: 4, children: /* @__PURE__ */ jsx("div", { className: styles.ccSection, children: showCcForm && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Caption1, { className: styles.ccLabel, children: mergedLabels.ccEmail }),
+        /* @__PURE__ */ jsx("div", { className: styles.ccInputRow, children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: styles.ccInput,
+            type: "email",
+            placeholder: mergedLabels.ccEmailPlaceholder,
+            value: ccEmail ?? "",
+            onChange: (_e, data) => onCcEmailChange?.(data.value),
+            contentAfter: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "transparent",
+                className: styles.deleteButton,
+                onClick: handleRemoveCc,
+                icon: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: "fluent:delete-24-regular",
+                    color: tokens.colorStatusDangerForeground1,
+                    width: 18
+                  }
+                )
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Caption2, { className: styles.ccHint, children: mergedLabels.ccEmailHint })
+      ] }) }) })
     ] })
   ] });
 };