@asdp/ferryui 0.1.22-dev.10844 → 0.1.22-dev.10923

package/dist/index.mjs

@@ -4,7 +4,7 @@ import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, F
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular, ChevronDownRegular, ArrowRightRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
-import { Controller, useForm, useWatch, useFieldArray } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import PhoneInputComponent from 'react-phone-input-2';
 import Select from 'react-select';
 import { Calendar } from '@fluentui/react-calendar-compat';
@@ -12927,6 +12927,35 @@ var useStyles27 = makeStyles({
     }
   }
 });
+function OwnerWeightSync({
+  setValue,
+  onUpdateOwner,
+  getValues,
+  control,
+  owner,
+  ownerIndex
+}) {
+  const cargoWeights = useWatch({
+    control,
+    name: (owner.cargoItems || []).map(
+      (_, cargoIndex) => `owners.${ownerIndex}.cargo.${cargoIndex}.cargoWeight`
+    )
+  });
+  const total = cargoWeights?.reduce(
+    (sum, w) => sum + (Number(w) || 0),
+    0
+  ) ?? 0;
+  const current = Number(getValues(`owners.${ownerIndex}.estimatedWeight`)) || 0;
+  useEffect(() => {
+    if (current !== total) {
+      setValue(`owners.${ownerIndex}.estimatedWeight`, total);
+      onUpdateOwner(owner.id, {
+        estimatedWeight: total
+      });
+    }
+  }, [current, ownerIndex, total]);
+  return null;
+}
 var CardVehicleOwnerForm = ({
   owners,
   hasLoad,
@@ -12971,38 +13000,6 @@ var CardVehicleOwnerForm = ({
     });
     setOpenCargoItems(allOpenItems);
   }, [owners]);
-  function OwnerWeightSync({
-    owner,
-    ownerIndex
-  }) {
-    const { fields } = useFieldArray({
-      control,
-      name: `owners.${ownerIndex}.cargoItems`
-    });
-    console.log(140, fields);
-    const cargoWeights = useWatch({
-      control,
-      name: fields.map(
-        (_, cargoIndex) => `owners.${ownerIndex}.cargoItems.${cargoIndex}.cargoWeight`
-      )
-    });
-    console.log(149, cargoWeights);
-    useEffect(() => {
-      const total = cargoWeights?.reduce(
-        (sum, w) => sum + (Number(w) || 0),
-        0
-      ) ?? 0;
-      const current = Number(getValues(`owners.${ownerIndex}.estimatedWeight`)) || 0;
-      console.log(160, current, total);
-      if (current !== total) {
-        setValue(`owners.${ownerIndex}.estimatedWeight`, total);
-        onUpdateOwner(owner.id, {
-          estimatedWeight: total
-        });
-      }
-    }, [cargoWeights, ownerIndex, setValue, getValues]);
-    return null;
-  }
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -13027,7 +13024,7 @@ var CardVehicleOwnerForm = ({
         defaultOpenItems: owners.map((o) => String(o.id)),
         multiple: true,
         children: owners.map((owner, ownerIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-          /* @__PURE__ */ jsx(OwnerWeightSync, { owner, ownerIndex }),
+          /* @__PURE__ */ jsx(OwnerWeightSync, { owner, ownerIndex, control, setValue, onUpdateOwner, getValues }),
           /* @__PURE__ */ jsxs(
             AccordionItem,
             {
@@ -16536,6 +16533,17 @@ var useStyles38 = makeStyles({
     height: "40px",
     objectFit: "contain"
   },
+  skeletonOption: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonOptionLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalL
+  },
   card: {
     position: "relative",
     borderRadius: tokens.borderRadiusXLarge,
@@ -16552,13 +16560,53 @@ var CardPaymentMethodList = ({
   labels,
   methods,
   selectedValue,
-  onSelect
+  onSelect,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
     /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.method }),
-    methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
+    isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsxs(Skeleton, { children: [
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            style: {
+              width: "60%",
+              height: "20px",
+              marginBottom: tokens.spacingVerticalXXL
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles.skeletonOption, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.skeletonOptionLeft, children: [
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                shape: "circle",
+                style: { width: "40px", height: "40px" }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: { width: "140px", height: "18px" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "20px", height: "20px" }
+            }
+          )
+        ] })
+      ] })
+    ] }, `payment-method-skeleton-${index}`)) : methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
       index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
       /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
         /* @__PURE__ */ jsx(
@@ -16642,6 +16690,17 @@ var useStyles39 = makeStyles({
     ),
     backgroundColor: tokens.colorNeutralBackground1,
     zIndex: 3
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalL
   }
 });
 var CardPaymentMethodFavorite = ({
@@ -16652,7 +16711,9 @@ var CardPaymentMethodFavorite = ({
   onSelect,
   onViewAllMethods,
   showWarning = true,
-  showViewAllButton = true
+  showViewAllButton = true,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles39();
   const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
@@ -16672,29 +16733,61 @@ var CardPaymentMethodFavorite = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx(Row, { nogutter: true, style: { gap: tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsx(Col, { xs: 12, onClick: () => onSelect(option.value), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
-      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: option.image,
-          alt: option.label,
-          className: styles.image
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Subtitle2, { children: option.label }) }),
-      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
-        Radio,
+    isLoading ? /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Row, { nogutter: true, style: { gap: tokens.spacingVerticalL }, children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs("div", { className: styles.skeletonRow, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.skeletonLeft, children: [
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            shape: "circle",
+            style: { width: "40px", height: "40px" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            style: { width: "140px", height: "18px" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        SkeletonItem,
         {
-          checked: selectedValue === option.value,
-          onChange: () => onSelect(option.value),
-          value: option.value,
-          name: "payment-method-favorite",
-          disabled: option.disabled,
-          "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
+          shape: "circle",
+          style: { width: "20px", height: "20px" }
         }
-      ) })
-    ] }) }, option.value)) }),
-    showViewAllButton && /* @__PURE__ */ jsx(
+      )
+    ] }) }, `payment-favorite-skeleton-${index}`)) }) }) : /* @__PURE__ */ jsx(Row, { nogutter: true, style: { gap: tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsx(
+      Col,
+      {
+        xs: 12,
+        onClick: () => onSelect(option.value),
+        style: { cursor: "pointer" },
+        children: /* @__PURE__ */ jsxs(Row, { justify: "between", children: [
+          /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: option.image,
+              alt: option.label,
+              className: styles.image
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Subtitle2, { children: option.label }) }),
+          /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(
+            Radio,
+            {
+              checked: selectedValue === option.value,
+              onChange: () => onSelect(option.value),
+              value: option.value,
+              name: "payment-method-favorite",
+              disabled: option.disabled,
+              "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
+            }
+          ) })
+        ] })
+      },
+      option.value
+    )) }),
+    showViewAllButton && !isLoading && /* @__PURE__ */ jsx(
       Button,
       {
         style: { width: "100%" },
@@ -16871,6 +16964,18 @@ var useStyles41 = makeStyles({
       tokens.spacingHorizontalM
     ),
     color: tokens.colorNeutralForeground4
+  },
+  skeletonCenter: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokens.spacingHorizontalM
   }
 });
 var CardPaymentInfo = ({
@@ -16883,11 +16988,103 @@ var CardPaymentInfo = ({
   guides,
   onCopyVA,
   onCheckStatus,
-  onChangePayment
+  onChangePayment,
+  isLoading = false
 }) => {
   const styles = useStyles41();
   const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
-  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+  return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: styles.container, children: isLoading ? /* @__PURE__ */ jsxs(Skeleton, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "180px", height: "20px" } }),
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "260px", height: "28px" } })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.codeCard, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.skeletonRow, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "40px", height: "40px" }
+            }
+          ),
+          /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "160px", height: "20px" } })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.skeletonCenter, children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "260px", height: "36px" } }),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "80%",
+                height: "40px",
+                borderRadius: tokens.borderRadiusCircular
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: tokens.borderRadiusCircular
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            style: {
+              width: "120px",
+              height: "18px",
+              marginBottom: "8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            style: {
+              width: "100%",
+              height: "36px",
+              borderRadius: tokens.borderRadius2XLarge
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        SkeletonItem,
+        {
+          style: {
+            width: "75%",
+            height: "18px",
+            marginBottom: tokens.spacingVerticalM
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: tokens.borderRadiusCircular
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "55%", height: "20px" } }),
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "16px" } }),
+      /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "85%", height: "16px" } })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
       /* @__PURE__ */ jsx(Title2, { className: styles.expiryTitle, children: expiryDate })
@@ -16940,7 +17137,16 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: tokens.spacingVerticalM }, children: /* @__PURE__ */ jsx(Subtitle2, { style: { color: tokens.colorNeutralStrokeAccessible, fontWeight: fontWeight.Medium }, children: mergedLabels.checkStatusInfo }) }),
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: tokens.spacingVerticalM }, children: /* @__PURE__ */ jsx(
+        Subtitle2,
+        {
+          style: {
+            color: tokens.colorNeutralStrokeAccessible,
+            fontWeight: fontWeight.Medium
+          },
+          children: mergedLabels.checkStatusInfo
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -16954,7 +17160,7 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsx(CardPaymentGuide, { guides, language })
-  ] }) });
+  ] }) }) });
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts