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

package/dist/index.mjs

@@ -16533,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,
@@ -16549,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(
@@ -16639,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 = ({
@@ -16649,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 };
@@ -16669,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%" },
@@ -16868,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 = ({
@@ -16880,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 })
@@ -16937,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,
         {
@@ -16951,7 +17160,7 @@ var CardPaymentInfo = ({
       )
     ] }),
     /* @__PURE__ */ jsx(CardPaymentGuide, { guides, language })
-  ] }) });
+  ] }) }) });
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts