@blocklet/payment-react 1.21.13 → 1.21.14

package/lib/components/country-select.js

@@ -7,9 +7,17 @@ module.exports = CountrySelect;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _mobile = require("../hooks/mobile");
+function useFormContextSafe() {
+  try {
+    return (0, _reactHookForm.useFormContext)();
+  } catch {
+    return null;
+  }
+}
 function Transition({
   ref,
   ...props
@@ -25,13 +33,15 @@ function CountrySelect({
   ref = void 0,
   value,
   onChange,
-  name,
+  name = "",
   sx = {},
-  showDialCode = false
+  showDialCode = false,
+  label = "",
+  bordered = false,
+  allowClear = false,
+  disabled = false
 }) {
-  const {
-    setValue
-  } = (0, _reactHookForm.useFormContext)();
+  const formContext = useFormContextSafe();
   const [open, setOpen] = (0, _react.useState)(false);
   const [searchText, setSearchText] = (0, _react.useState)("");
   const inputRef = (0, _react.useRef)(null);
@@ -136,9 +146,19 @@ 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);
@@ -194,13 +214,14 @@ 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
       })
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
       ref: listRef,
@@ -285,7 +306,8 @@ function CountrySelect({
               pt: 0,
               display: "flex",
               flexDirection: "column",
-              overflowY: "hidden"
+              overflowY: "hidden",
+              width: "100%"
             }
           }
         }
@@ -303,7 +325,7 @@ function CountrySelect({
         },
         ".MuiSelect-select": {
           padding: "8px",
-          paddingRight: "24px !important"
+          paddingRight: allowClear && value ? "48px !important" : "24px !important"
         },
         svg: {
           right: 0
@@ -316,24 +338,79 @@ 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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      disabled,
+      renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           display: "flex",
           alignItems: "center",
           flexWrap: "nowrap",
           gap: 0.5,
-          cursor: "pointer"
+          cursor: "pointer",
+          width: "100%"
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-          iso2: code,
-          style: {
-            display: "flex"
-          }
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          children: countryDetail?.name
-        })]
+        children: code ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          sx: {
+            alignItems: "center",
+            gap: 0.5,
+            justifyContent: "space-between",
+            width: "100%"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            sx: {
+              alignItems: "center",
+              gap: 0.5
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+              iso2: code,
+              style: {
+                display: "flex"
+              }
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                flex: 1
+              },
+              children: countryDetail?.name
+            })]
+          }), allowClear && value && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Clear, {
+              fontSize: "small"
+            })
+          })]
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: "text.secondary",
+            flex: 1
+          },
+          children: label || "Select country..."
+        })
       }),
       children: countryListContent
     });
@@ -344,7 +421,10 @@ function CountrySelect({
       ...sx
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      onClick: () => setOpen(true),
+      onClick: () => {
+        if (disabled) return;
+        setOpen(true);
+      },
       sx: {
         display: "flex",
         alignItems: "center",
@@ -354,7 +434,9 @@ function CountrySelect({
         padding: "8px",
         paddingRight: "24px",
         position: "relative",
-        border: "none",
+        ...(!bordered ? {
+          border: "none"
+        } : {}),
         "-webkit-tap-highlight-color": "transparent",
         userSelect: "none",
         background: "none",
@@ -362,15 +444,62 @@ 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__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-        iso2: value,
-        style: {
-          display: "flex"
-        }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        children: countryDetail?.name
+      children: [value ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
+          iso2: value,
+          style: {
+            display: "flex"
+          }
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            flex: 1
+          },
+          children: countryDetail?.name
+        }), allowClear && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Clear, {
+            fontSize: "small"
+          })
+        })]
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "text.secondary",
+          flex: 1
+        },
+        children: label || "Select country..."
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           position: "absolute",
@@ -387,18 +516,22 @@ 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__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
           p: 2,

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

@@ -127,8 +127,10 @@ function SourceDataViewer({
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       spacing: 1,
-      flexWrap: "wrap",
       useFlexGap: true,
+      sx: {
+        flexWrap: "wrap"
+      },
       children: [displayItems.map(field => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
         label: `${getLocalizedText(field.label)}: ${field.value}`,
         size: "small",
@@ -181,8 +183,8 @@ function SourceDataViewer({
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               variant: "body2",
-              color: "text.secondary",
               sx: {
+                color: "text.secondary",
                 fontSize: "0.8rem",
                 minWidth: 100,
                 fontWeight: 600,
@@ -215,8 +217,8 @@ function SourceDataViewer({
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body2",
-        color: "text.secondary",
         sx: {
+          color: "text.secondary",
           fontSize: "0.8rem",
           minWidth: 100,
           fontWeight: 600,

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

@@ -227,8 +227,8 @@ const TransactionsTable = _react.default.memo(props => {
         const item = data?.list[index];
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "body2",
-          color: "text.secondary",
           sx: {
+            color: "text.secondary",
             fontSize: "0.875rem"
           },
           children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD HH:mm")

package/lib/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/lib/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>;