@asdp/ferryui 0.1.22-dev.8661 → 0.1.22-dev.8694

package/dist/index.d.mts

@@ -2196,6 +2196,8 @@ interface ModalPassengerFormLabels {
     ticketClassLabel: string;
     saveButton: string;
     cancelButton: string;
+    idTypeOtherLabel: string;
+    idTypeOtherPlaceholder: string;
     errors: {
         requiredTitle: string;
         requiredName: string;
@@ -2287,10 +2289,6 @@ interface ModalPassengerFormProps {
      * Options for title select field
      */
     titleOptions: SelectOption[];
-    /**
-     * Options for ID type select field
-     */
-    idTypeOptions: SelectOption[];
     /**
      * Options for city select field
      */

package/dist/index.d.ts

@@ -2196,6 +2196,8 @@ interface ModalPassengerFormLabels {
     ticketClassLabel: string;
     saveButton: string;
     cancelButton: string;
+    idTypeOtherLabel: string;
+    idTypeOtherPlaceholder: string;
     errors: {
         requiredTitle: string;
         requiredName: string;
@@ -2287,10 +2289,6 @@ interface ModalPassengerFormProps {
      * Options for title select field
      */
     titleOptions: SelectOption[];
-    /**
-     * Options for ID type select field
-     */
-    idTypeOptions: SelectOption[];
     /**
      * Options for city select field
      */

package/dist/index.js

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React5 = require('react');
 var reactGridSystem = require('react-grid-system');
 var react = require('@iconify/react');
-var iconify_js = require('@iconify/react/dist/iconify.js');
 var reactHookForm = require('react-hook-form');
 var PhoneInputComponent = require('react-phone-input-2');
 var Select = require('react-select');
@@ -2037,7 +2036,7 @@ var useStyles7 = reactComponents.makeStyles({
       display: "none"
     },
     "& .fui-Radio__label": {
-      padding: "10px 24px",
+      padding: "5px 10px",
       border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
       borderRadius: reactComponents.tokens.borderRadiusCircular,
       cursor: "pointer",
@@ -3557,7 +3556,7 @@ var CardTicketSearch = ({
                               control,
                               type: "text",
                               contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                iconify_js.Icon,
+                                react.Icon,
                                 {
                                   icon: "fluent:vehicle-ship-16-filled",
                                   color: reactComponents.tokens.colorBrandBackground
@@ -3626,7 +3625,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                              react.Icon,
                               {
                                 icon: "fluent:location-24-filled",
                                 color: reactComponents.tokens.colorBrandBackground
@@ -3665,7 +3664,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                              react.Icon,
                               {
                                 icon: "fluent:calendar-24-filled",
                                 color: reactComponents.tokens.colorBrandBackground
@@ -3725,7 +3724,7 @@ var CardTicketSearch = ({
                             control,
                             type: "text",
                             contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                              react.Icon,
                               {
                                 icon: "fluent:calendar-24-filled",
                                 color: reactComponents.tokens.colorBrandBackground
@@ -3798,7 +3797,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                  iconify_js.Icon,
+                                  react.Icon,
                                   {
                                     icon: "fluent:ribbon-star-24-filled",
                                     color: reactComponents.tokens.colorBrandBackground
@@ -3832,7 +3831,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                  iconify_js.Icon,
+                                  react.Icon,
                                   {
                                     icon: "fluent:apps-list-24-filled",
                                     color: reactComponents.tokens.colorBrandBackground
@@ -3867,7 +3866,7 @@ var CardTicketSearch = ({
                                 control,
                                 type: "text",
                                 contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                  iconify_js.Icon,
+                                  react.Icon,
                                   {
                                     icon: "fluent:people-24-filled",
                                     color: reactComponents.tokens.colorBrandBackground
@@ -3889,7 +3888,7 @@ var CardTicketSearch = ({
                           appearance: "primary",
                           size: "large",
                           type: "submit",
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(iconify_js.Icon, { icon: "fluent:vehicle-ship-20-filled" }),
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-20-filled" }),
                           disabled: submitDisabled,
                           children: labels.searchButton
                         }
@@ -7829,6 +7828,8 @@ var DEFAULT_LABELS22 = {
     ticketClassLabel: "Kelas penumpang",
     saveButton: "Simpan",
     cancelButton: "Batal",
+    idTypeOtherLabel: "Tanggal lahir",
+    idTypeOtherPlaceholder: "DD/MM/YYYY",
     errors: {
       requiredTitle: "Title harus dipilih",
       requiredName: "Nama lengkap harus diisi",
@@ -7862,6 +7863,8 @@ var DEFAULT_LABELS22 = {
     ticketClassLabel: "Passenger Class",
     saveButton: "Save",
     cancelButton: "Cancel",
+    idTypeOtherLabel: "Date of Birth",
+    idTypeOtherPlaceholder: "DD/MM/YYYY",
     errors: {
       requiredTitle: "Title is required",
       requiredName: "Full name is required",
@@ -7877,6 +7880,24 @@ var DEFAULT_LABELS22 = {
     }
   }
 };
+var TYPE_OPTIONS = [
+  {
+    label: "KTP",
+    value: "ktp"
+  },
+  {
+    label: "SIM",
+    value: "sim"
+  },
+  {
+    label: "Paspor",
+    value: "paspor"
+  },
+  {
+    label: "Lainnya",
+    value: "lainnya"
+  }
+];
 var useStyles22 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -7905,7 +7926,6 @@ var ModalPassengerForm = ({
   defaultValues,
   isAdultForm = true,
   titleOptions,
-  idTypeOptions,
   cityOptions,
   ticketClassOptions
 }) => {
@@ -7916,12 +7936,18 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
-  const { control, handleSubmit, reset } = reactHookForm.useForm({
+  const { control, handleSubmit, reset, watch, setValue } = reactHookForm.useForm({
     defaultValues
   });
+  const idType = watch("idType");
   React5.useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
+  React5.useEffect(() => {
+    if (idType) {
+      setValue("idNumber", "");
+    }
+  }, [idType, setValue]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -7977,6 +8003,45 @@ var ModalPassengerForm = ({
               }
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "age",
+              control,
+              type: "number",
+              label: mergedLabels.ageLabel,
+              placeholder: mergedLabels.agePlaceholder,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: mergedErrors.requiredAge,
+                min: {
+                  value: 1,
+                  message: mergedErrors.minAge
+                },
+                max: {
+                  value: 150,
+                  message: mergedErrors.maxAge
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "cityId",
+              control,
+              type: "select",
+              label: mergedLabels.cityLabel,
+              options: cityOptions,
+              placeholder: mergedLabels.cityPlaceholder,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: mergedErrors.requiredCity
+              }
+            }
+          ),
           isAdultForm ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               InputDynamic_default,
@@ -7986,7 +8051,7 @@ var ModalPassengerForm = ({
                 type: "select",
                 label: mergedLabels.idTypeLabel,
                 placeholder: mergedLabels.idTypePlaceholder,
-                options: idTypeOptions,
+                options: TYPE_OPTIONS,
                 size: "large",
                 required: true,
                 validationRules: {
@@ -7994,48 +8059,40 @@ var ModalPassengerForm = ({
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            idType ? idType === "lainnya" ? /* @__PURE__ */ jsxRuntime.jsx(
               InputDynamic_default,
               {
                 name: "idNumber",
                 control,
-                type: "text",
-                label: mergedLabels.idNumberLabel,
-                placeholder: mergedLabels.idNumberPlaceholder,
+                type: "date",
+                label: mergedLabels.idTypeOtherLabel,
+                placeholder: mergedLabels.idTypeOtherPlaceholder,
                 size: "large",
                 required: true,
+                max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
                 validationRules: {
-                  required: mergedErrors.requiredIdNumber,
-                  minLength: {
-                    value: 6,
-                    message: mergedErrors.minLengthIdNumber
-                  }
+                  required: mergedErrors.requiredDate
                 }
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
               InputDynamic_default,
               {
-                name: "age",
+                name: "idNumber",
                 control,
-                type: "number",
-                label: mergedLabels.ageLabel,
-                placeholder: mergedLabels.agePlaceholder,
+                type: idType === "ktp" ? "number" : "text",
+                label: mergedLabels.idNumberLabel,
+                placeholder: mergedLabels.idNumberPlaceholder,
                 size: "large",
                 required: true,
                 validationRules: {
-                  required: mergedErrors.requiredAge,
-                  min: {
-                    value: 1,
-                    message: mergedErrors.minAge
-                  },
-                  max: {
-                    value: 150,
-                    message: mergedErrors.maxAge
+                  required: mergedErrors.requiredIdNumber,
+                  minLength: {
+                    value: 6,
+                    message: mergedErrors.minLengthIdNumber
                   }
                 }
               }
-            )
+            ) : null
           ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
             InputDynamic_default,
             {
@@ -8051,22 +8108,6 @@ var ModalPassengerForm = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            InputDynamic_default,
-            {
-              name: "cityId",
-              control,
-              type: "select",
-              label: mergedLabels.cityLabel,
-              options: cityOptions,
-              placeholder: mergedLabels.cityPlaceholder,
-              size: "large",
-              required: true,
-              validationRules: {
-                required: mergedErrors.requiredCity
-              }
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsx("br", {}),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
           /* @__PURE__ */ jsxRuntime.jsx("br", {}),