@blocklet/payment-react 1.21.12 → 1.21.14

package/.aigne/doc-smith/config.yaml

@@ -1,7 +1,7 @@
 # Project information for documentation publishing
 projectName: "Payment Kit UI (React)"
-projectDesc: "@blocklet/payment-react is a React component library for building payment systems in blocklets, integrated with Payment Kit."
-projectLogo: https://store.blocklet.dev/assets/z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk/logo.png
+projectDesc: "@blocklet/payment-react is a React library for blocklet payment systems with Payment Kit."
+projectLogo: https://store.blocklet.dev/assets/z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk/logo.png?imageFilter=convert&f=png&w=64
 
 # =============================================================================
 # Documentation Configuration

package/es/components/country-select.d.ts

@@ -3,10 +3,14 @@ import type { CountryIso2 } from 'react-international-phone';
 export type CountrySelectProps = {
     value: CountryIso2;
     onChange: (value: CountryIso2) => void;
-    name: string;
+    name?: string;
     sx?: SxProps;
     showDialCode?: boolean;
+    label?: string;
+    allowClear?: boolean;
+    bordered?: boolean;
+    disabled?: boolean;
 };
-export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, }: CountrySelectProps & {
+export default function CountrySelect({ ref, value, onChange, name, sx, showDialCode, label, bordered, allowClear, disabled, }: CountrySelectProps & {
     ref?: React.RefObject<HTMLDivElement | null>;
 }): import("react").JSX.Element;

package/es/components/country-select.js

@@ -1,9 +1,28 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState, useEffect, useRef } from "react";
-import { Box, MenuItem, Typography, TextField, Dialog, DialogContent, IconButton, Select, Slide } from "@mui/material";
+import {
+  Box,
+  MenuItem,
+  Typography,
+  TextField,
+  Dialog,
+  DialogContent,
+  IconButton,
+  Select,
+  Slide,
+  Stack
+} from "@mui/material";
+import { Clear as ClearIcon } from "@mui/icons-material";
 import { useFormContext } from "react-hook-form";
 import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
 import { useMobile } from "../hooks/mobile.js";
+function useFormContextSafe() {
+  try {
+    return useFormContext();
+  } catch {
+    return null;
+  }
+}
 function Transition({ ref, ...props }) {
   return /* @__PURE__ */ jsx(Slide, { direction: "up", ref, timeout: 200, ...props });
 }
@@ -11,11 +30,15 @@ export default function CountrySelect({
   ref = void 0,
   value,
   onChange,
-  name,
+  name = "",
   sx = {},
-  showDialCode = false
+  showDialCode = false,
+  label = "",
+  bordered = false,
+  allowClear = false,
+  disabled = false
 }) {
-  const { setValue } = useFormContext();
+  const formContext = useFormContextSafe();
   const [open, setOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
   const inputRef = useRef(null);
@@ -117,9 +140,19 @@ export default function CountrySelect({
   }, [value]);
   const handleCountryClick = (code) => {
     onChange(code);
-    setValue(name, code);
+    if (formContext && name) {
+      formContext.setValue(name, code);
+    }
     setOpen(false);
   };
+  const handleClear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onChange("");
+    if (formContext && name) {
+      formContext.setValue(name, "");
+    }
+  };
   const handleSearchChange = (e) => {
     e.stopPropagation();
     setSearchText(e.target.value);
@@ -179,13 +212,14 @@ export default function CountrySelect({
             inputRef,
             autoFocus: !isMobile,
             fullWidth: true,
-            placeholder: "Search country...",
+            placeholder: label || "Search country...",
             value: searchText,
             onChange: handleSearchChange,
             onKeyDown: handleKeyDown,
             onClick: (e) => e.stopPropagation(),
             size: "small",
-            variant: "outlined"
+            variant: "outlined",
+            disabled
           }
         )
       }
@@ -282,7 +316,8 @@ export default function CountrySelect({
                 pt: 0,
                 display: "flex",
                 flexDirection: "column",
-                overflowY: "hidden"
+                overflowY: "hidden",
+                width: "100%"
               }
             }
           }
@@ -300,7 +335,7 @@ export default function CountrySelect({
           },
           ".MuiSelect-select": {
             padding: "8px",
-            paddingRight: "24px !important"
+            paddingRight: allowClear && value ? "48px !important" : "24px !important"
           },
           svg: {
             right: 0
@@ -313,9 +348,12 @@ export default function CountrySelect({
         value,
         onChange: (e) => {
           onChange(e.target.value);
-          setValue(name, e.target.value);
+          if (formContext && name) {
+            formContext.setValue(name, e.target.value);
+          }
         },
-        renderValue: (code) => /* @__PURE__ */ jsxs(
+        disabled,
+        renderValue: (code) => /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
@@ -323,12 +361,65 @@ export default function CountrySelect({
               alignItems: "center",
               flexWrap: "nowrap",
               gap: 0.5,
-              cursor: "pointer"
+              cursor: "pointer",
+              width: "100%"
             },
-            children: [
-              /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
-              /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
-            ]
+            children: code ? /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                sx: {
+                  alignItems: "center",
+                  gap: 0.5,
+                  justifyContent: "space-between",
+                  width: "100%"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Stack,
+                    {
+                      direction: "row",
+                      sx: {
+                        alignItems: "center",
+                        gap: 0.5
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+                        /* @__PURE__ */ jsx(Typography, { sx: { flex: 1 }, children: countryDetail?.name })
+                      ]
+                    }
+                  ),
+                  allowClear && value && /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      onClick: handleClear,
+                      onMouseDown: (event) => {
+                        event.stopPropagation();
+                        event.preventDefault();
+                      },
+                      onTouchStart: (event) => {
+                        event.stopPropagation();
+                      },
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        cursor: "pointer",
+                        p: 0,
+                        borderRadius: "50%",
+                        border: "none",
+                        background: "transparent",
+                        zIndex: 2,
+                        marginRight: "-28px",
+                        "&:hover": {
+                          backgroundColor: "action.hover"
+                        }
+                      },
+                      children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", flex: 1 }, children: label || "Select country..." })
           }
         ),
         children: countryListContent
@@ -339,7 +430,10 @@ export default function CountrySelect({
     /* @__PURE__ */ jsxs(
       Box,
       {
-        onClick: () => setOpen(true),
+        onClick: () => {
+          if (disabled) return;
+          setOpen(true);
+        },
         sx: {
           display: "flex",
           alignItems: "center",
@@ -349,7 +443,9 @@ export default function CountrySelect({
           padding: "8px",
           paddingRight: "24px",
           position: "relative",
-          border: "none",
+          ...!bordered ? {
+            border: "none"
+          } : {},
           "-webkit-tap-highlight-color": "transparent",
           userSelect: "none",
           background: "none",
@@ -357,11 +453,51 @@ export default function CountrySelect({
             backgroundColor: "transparent",
             outline: "none"
           },
+          ...disabled ? {
+            backgroundColor: "grey.100",
+            cursor: "not-allowed",
+            color: "text.disabled",
+            "&:hover, &:focus, &:active": {
+              backgroundColor: "grey.100",
+              color: "text.disabled"
+            }
+          } : {},
           touchAction: "manipulation"
         },
         children: [
-          /* @__PURE__ */ jsx(FlagEmoji, { iso2: value, style: { display: "flex" } }),
-          /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name }),
+          value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(FlagEmoji, { iso2: value, style: { display: "flex" } }),
+            /* @__PURE__ */ jsx(Typography, { sx: { flex: 1 }, children: countryDetail?.name }),
+            allowClear && /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "button",
+                type: "button",
+                onClick: handleClear,
+                onMouseDown: (event) => {
+                  event.stopPropagation();
+                  event.preventDefault();
+                },
+                onTouchStart: (event) => {
+                  event.stopPropagation();
+                },
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  p: 0.5,
+                  mr: 1,
+                  borderRadius: "50%",
+                  border: "none",
+                  background: "transparent",
+                  "&:hover": {
+                    backgroundColor: "action.hover"
+                  }
+                },
+                children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", flex: 1 }, children: label || "Select country..." }),
           /* @__PURE__ */ jsx(
             Box,
             {
@@ -386,18 +522,22 @@ export default function CountrySelect({
         onClose: () => setOpen(false),
         fullWidth: true,
         maxWidth: "xs",
-        TransitionComponent: Transition,
-        PaperProps: {
-          sx: {
-            position: "absolute",
-            bottom: 0,
-            m: 0,
-            p: 0,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            width: "100%"
+        slotProps: {
+          paper: {
+            sx: {
+              position: "absolute",
+              bottom: 0,
+              m: 0,
+              p: 0,
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              width: "100%"
+            }
           }
         },
+        slots: {
+          transition: Transition
+        },
         children: [
           /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
             /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Select Country" }),

package/es/components/source-data-viewer.js

@@ -121,19 +121,30 @@ function SourceDataViewer({
   const normalizedData = normalizeData(data);
   const displayItems = maxItems ? normalizedData.slice(0, maxItems) : normalizedData;
   if (compact) {
-    return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [
-      displayItems.map((field) => /* @__PURE__ */ jsx(
-        Chip,
-        {
-          label: `${getLocalizedText(field.label)}: ${field.value}`,
-          size: "small",
-          variant: "outlined",
-          sx: { maxWidth: 200 }
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 1,
+        useFlexGap: true,
+        sx: {
+          flexWrap: "wrap"
         },
-        field.key
-      )),
-      maxItems && normalizedData.length > maxItems && /* @__PURE__ */ jsx(Chip, { label: `+${normalizedData.length - maxItems} more`, size: "small", color: "primary", variant: "outlined" })
-    ] });
+        children: [
+          displayItems.map((field) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: `${getLocalizedText(field.label)}: ${field.value}`,
+              size: "small",
+              variant: "outlined",
+              sx: { maxWidth: 200 }
+            },
+            field.key
+          )),
+          maxItems && normalizedData.length > maxItems && /* @__PURE__ */ jsx(Chip, { label: `+${normalizedData.length - maxItems} more`, size: "small", color: "primary", variant: "outlined" })
+        ]
+      }
+    );
   }
   if (showGroups) {
     const groupedData = displayItems.reduce(
@@ -177,8 +188,8 @@ function SourceDataViewer({
               Typography,
               {
                 variant: "body2",
-                color: "text.secondary",
                 sx: {
+                  color: "text.secondary",
                   fontSize: "0.8rem",
                   minWidth: 100,
                   fontWeight: 600,
@@ -209,8 +220,8 @@ function SourceDataViewer({
           Typography,
           {
             variant: "body2",
-            color: "text.secondary",
             sx: {
+              color: "text.secondary",
               fontSize: "0.8rem",
               minWidth: 100,
               fontWeight: 600,

package/es/history/credit/transactions-list.js

@@ -202,7 +202,17 @@ const TransactionsTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
-          return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontSize: "0.875rem" }, children: formatToDate(item.created_at, locale, "YYYY-MM-DD HH:mm") });
+          return /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: {
+                color: "text.secondary",
+                fontSize: "0.875rem"
+              },
+              children: formatToDate(item.created_at, locale, "YYYY-MM-DD HH:mm")
+            }
+          );
         }
       }
     },

package/es/index.d.ts

@@ -56,3 +56,4 @@ export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
 export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };
+export type { CountrySelectProps } from './components/country-select';

package/es/libs/validator.d.ts

@@ -1,2 +1,163 @@
+export declare const postalCodePatterns: {
+    GB: RegExp;
+    JE: RegExp;
+    GG: RegExp;
+    IM: RegExp;
+    US: RegExp;
+    CA: RegExp;
+    DE: RegExp;
+    JP: RegExp;
+    FR: RegExp;
+    AU: RegExp;
+    IT: RegExp;
+    CH: RegExp;
+    AT: RegExp;
+    ES: RegExp;
+    NL: RegExp;
+    BE: RegExp;
+    DK: RegExp;
+    SE: RegExp;
+    NO: RegExp;
+    BR: RegExp;
+    PT: RegExp;
+    FI: RegExp;
+    AX: RegExp;
+    KR: RegExp;
+    CN: RegExp;
+    TW: RegExp;
+    SG: RegExp;
+    DZ: RegExp;
+    AD: RegExp;
+    AR: RegExp;
+    AM: RegExp;
+    AZ: RegExp;
+    BH: RegExp;
+    BD: RegExp;
+    BB: RegExp;
+    BY: RegExp;
+    BM: RegExp;
+    BA: RegExp;
+    IO: RegExp;
+    BN: RegExp;
+    BG: RegExp;
+    KH: RegExp;
+    CV: RegExp;
+    CL: RegExp;
+    CR: RegExp;
+    HR: RegExp;
+    CY: RegExp;
+    CZ: RegExp;
+    DO: RegExp;
+    EC: RegExp;
+    EG: RegExp;
+    EE: RegExp;
+    FO: RegExp;
+    GE: RegExp;
+    GR: RegExp;
+    GL: RegExp;
+    GT: RegExp;
+    HT: RegExp;
+    HN: RegExp;
+    HU: RegExp;
+    IS: RegExp;
+    IN: RegExp;
+    ID: RegExp;
+    IL: RegExp;
+    JO: RegExp;
+    KZ: RegExp;
+    KE: RegExp;
+    KW: RegExp;
+    LA: RegExp;
+    LV: RegExp;
+    LB: RegExp;
+    LI: RegExp;
+    LT: RegExp;
+    LU: RegExp;
+    MK: RegExp;
+    MY: RegExp;
+    MV: RegExp;
+    MT: RegExp;
+    MU: RegExp;
+    MX: RegExp;
+    MD: RegExp;
+    MC: RegExp;
+    MA: RegExp;
+    NP: RegExp;
+    NZ: RegExp;
+    NI: RegExp;
+    NG: RegExp;
+    OM: RegExp;
+    PK: RegExp;
+    PY: RegExp;
+    PH: RegExp;
+    PL: RegExp;
+    PR: RegExp;
+    RO: RegExp;
+    RU: RegExp;
+    SM: RegExp;
+    SA: RegExp;
+    SN: RegExp;
+    SK: RegExp;
+    SI: RegExp;
+    ZA: RegExp;
+    LK: RegExp;
+    TJ: RegExp;
+    TH: RegExp;
+    TN: RegExp;
+    TR: RegExp;
+    TM: RegExp;
+    UA: RegExp;
+    UY: RegExp;
+    UZ: RegExp;
+    VA: RegExp;
+    VE: RegExp;
+    ZM: RegExp;
+    AS: RegExp;
+    CC: RegExp;
+    CK: RegExp;
+    RS: RegExp;
+    ME: RegExp;
+    CS: RegExp;
+    YU: RegExp;
+    CX: RegExp;
+    ET: RegExp;
+    FK: RegExp;
+    NF: RegExp;
+    FM: RegExp;
+    GF: RegExp;
+    GN: RegExp;
+    GP: RegExp;
+    GS: RegExp;
+    GU: RegExp;
+    GW: RegExp;
+    HM: RegExp;
+    IQ: RegExp;
+    KG: RegExp;
+    LR: RegExp;
+    LS: RegExp;
+    MG: RegExp;
+    MH: RegExp;
+    MN: RegExp;
+    MP: RegExp;
+    MQ: RegExp;
+    NC: RegExp;
+    NE: RegExp;
+    VI: RegExp;
+    VN: RegExp;
+    PF: RegExp;
+    PG: RegExp;
+    PM: RegExp;
+    PN: RegExp;
+    PW: RegExp;
+    RE: RegExp;
+    SH: RegExp;
+    SJ: RegExp;
+    SO: RegExp;
+    SZ: RegExp;
+    TC: RegExp;
+    WF: RegExp;
+    XK: RegExp;
+    YT: RegExp;
+};
 export declare function validatePostalCode(postalCode: string, country?: string): boolean;
 export declare function getFieldValidation(fieldName: string, validations?: Record<string, any>, locale?: string): Record<string, any>;