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

package/dist/index.d.mts

@@ -3826,6 +3826,16 @@ interface CardPaymentMethodListProps {
     methods: PaymentMethodCategory[];
     selectedValue?: string;
     onSelect: (value: string) => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton categories to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodList: React$1.FC<CardPaymentMethodListProps>;
@@ -3882,6 +3892,16 @@ interface CardPaymentMethodFavoriteProps {
      * @default true
      */
     showViewAllButton?: boolean;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton payment methods to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodFavorite: React$1.FC<CardPaymentMethodFavoriteProps>;
@@ -3942,6 +3962,11 @@ interface CardPaymentInfoProps {
     onCopyVA?: () => void;
     onCheckStatus?: () => void;
     onChangePayment?: () => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardPaymentInfo: React$1.FC<CardPaymentInfoProps>;

package/dist/index.d.ts

@@ -3826,6 +3826,16 @@ interface CardPaymentMethodListProps {
     methods: PaymentMethodCategory[];
     selectedValue?: string;
     onSelect: (value: string) => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton categories to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodList: React$1.FC<CardPaymentMethodListProps>;
@@ -3882,6 +3892,16 @@ interface CardPaymentMethodFavoriteProps {
      * @default true
      */
     showViewAllButton?: boolean;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton payment methods to display while loading
+     * @default 3
+     */
+    skeletonCount?: number;
 }
 
 declare const CardPaymentMethodFavorite: React$1.FC<CardPaymentMethodFavoriteProps>;
@@ -3942,6 +3962,11 @@ interface CardPaymentInfoProps {
     onCopyVA?: () => void;
     onCheckStatus?: () => void;
     onChangePayment?: () => void;
+    /**
+     * Loading state for skeleton display
+     * @default false
+     */
+    isLoading?: boolean;
 }
 
 declare const CardPaymentInfo: React$1.FC<CardPaymentInfoProps>;

package/dist/index.js

@@ -12936,6 +12936,35 @@ var useStyles27 = reactComponents.makeStyles({
     }
   }
 });
+function OwnerWeightSync({
+  setValue,
+  onUpdateOwner,
+  getValues,
+  control,
+  owner,
+  ownerIndex
+}) {
+  const cargoWeights = reactHookForm.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;
+  React.useEffect(() => {
+    if (current !== total) {
+      setValue(`owners.${ownerIndex}.estimatedWeight`, total);
+      onUpdateOwner(owner.id, {
+        estimatedWeight: total
+      });
+    }
+  }, [current, ownerIndex, total]);
+  return null;
+}
 var CardVehicleOwnerForm = ({
   owners,
   hasLoad,
@@ -12980,38 +13009,6 @@ var CardVehicleOwnerForm = ({
     });
     setOpenCargoItems(allOpenItems);
   }, [owners]);
-  function OwnerWeightSync({
-    owner,
-    ownerIndex
-  }) {
-    const { fields } = reactHookForm.useFieldArray({
-      control,
-      name: `owners.${ownerIndex}.cargoItems`
-    });
-    console.log(140, fields);
-    const cargoWeights = reactHookForm.useWatch({
-      control,
-      name: fields.map(
-        (_, cargoIndex) => `owners.${ownerIndex}.cargoItems.${cargoIndex}.cargoWeight`
-      )
-    });
-    console.log(149, cargoWeights);
-    React.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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -13036,7 +13033,7 @@ var CardVehicleOwnerForm = ({
         defaultOpenItems: owners.map((o) => String(o.id)),
         multiple: true,
         children: owners.map((owner, ownerIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OwnerWeightSync, { owner, ownerIndex }),
+          /* @__PURE__ */ jsxRuntime.jsx(OwnerWeightSync, { owner, ownerIndex, control, setValue, onUpdateOwner, getValues }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactComponents.AccordionItem,
             {
@@ -16545,6 +16542,17 @@ var useStyles38 = reactComponents.makeStyles({
     height: "40px",
     objectFit: "contain"
   },
+  skeletonOption: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonOptionLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalL
+  },
   card: {
     position: "relative",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -16561,13 +16569,53 @@ var CardPaymentMethodList = ({
   labels,
   methods,
   selectedValue,
-  onSelect
+  onSelect,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.method }),
-    methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "60%",
+              height: "20px",
+              marginBottom: reactComponents.tokens.spacingVerticalXXL
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonOption, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonOptionLeft, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                shape: "circle",
+                style: { width: "40px", height: "40px" }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: { width: "140px", height: "18px" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "20px", height: "20px" }
+            }
+          )
+        ] })
+      ] })
+    ] }, `payment-method-skeleton-${index}`)) : methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -16651,6 +16699,17 @@ var useStyles39 = reactComponents.makeStyles({
     ),
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     zIndex: 3
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  skeletonLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalL
   }
 });
 var CardPaymentMethodFavorite = ({
@@ -16661,7 +16720,9 @@ var CardPaymentMethodFavorite = ({
   onSelect,
   onViewAllMethods,
   showWarning = true,
-  showViewAllButton = true
+  showViewAllButton = true,
+  isLoading = false,
+  skeletonCount = 3
 }) => {
   const styles = useStyles39();
   const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
@@ -16681,29 +16742,61 @@ var CardPaymentMethodFavorite = ({
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, onClick: () => onSelect(option.value), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: option.image,
-          alt: option.label,
-          className: styles.image
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: option.label }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.Radio,
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            shape: "circle",
+            style: { width: "40px", height: "40px" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: { width: "140px", height: "18px" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.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__ */ jsxRuntime.jsx(
+      )
+    ] }) }, `payment-favorite-skeleton-${index}`)) }) }) : /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingVerticalL }, children: methods.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      reactGridSystem.Col,
+      {
+        xs: 12,
+        onClick: () => onSelect(option.value),
+        style: { cursor: "pointer" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: option.image,
+              alt: option.label,
+              className: styles.image
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: option.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.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__ */ jsxRuntime.jsx(
       reactComponents.Button,
       {
         style: { width: "100%" },
@@ -16880,6 +16973,18 @@ var useStyles41 = reactComponents.makeStyles({
       reactComponents.tokens.spacingHorizontalM
     ),
     color: reactComponents.tokens.colorNeutralForeground4
+  },
+  skeletonCenter: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalM
+  },
+  skeletonRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: reactComponents.tokens.spacingHorizontalM
   }
 });
 var CardPaymentInfo = ({
@@ -16892,11 +16997,103 @@ var CardPaymentInfo = ({
   guides,
   onCopyVA,
   onCheckStatus,
-  onChangePayment
+  onChangePayment,
+  isLoading = false
 }) => {
   const styles = useStyles41();
   const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.container, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "180px", height: "20px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "260px", height: "28px" } })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              shape: "circle",
+              style: { width: "40px", height: "40px" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "160px", height: "20px" } })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.skeletonCenter, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "260px", height: "36px" } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "80%",
+                height: "40px",
+                borderRadius: reactComponents.tokens.borderRadiusCircular
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: reactComponents.tokens.borderRadiusCircular
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "120px",
+              height: "18px",
+              marginBottom: "8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.SkeletonItem,
+          {
+            style: {
+              width: "100%",
+              height: "36px",
+              borderRadius: reactComponents.tokens.borderRadius2XLarge
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "75%",
+            height: "18px",
+            marginBottom: reactComponents.tokens.spacingVerticalM
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.SkeletonItem,
+        {
+          style: {
+            width: "100%",
+            height: "40px",
+            borderRadius: reactComponents.tokens.borderRadiusCircular
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "55%", height: "20px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "16px" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "85%", height: "16px" } })
+    ] })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.expiryTitle, children: expiryDate })
@@ -16949,7 +17146,16 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralStrokeAccessible, fontWeight: fontWeight.Medium }, children: mergedLabels.checkStatusInfo }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Subtitle2,
+        {
+          style: {
+            color: reactComponents.tokens.colorNeutralStrokeAccessible,
+            fontWeight: fontWeight.Medium
+          },
+          children: mergedLabels.checkStatusInfo
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Button,
         {
@@ -16963,7 +17169,7 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(CardPaymentGuide, { guides, language })
-  ] }) });
+  ] }) }) });
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts