@blocklet/payment-react 1.21.14 → 1.21.16

package/es/payment/form/address.js

@@ -96,6 +96,20 @@ export default function AddressForm({ mode, sx = {}, fieldValidation = {}, error
     ] }) }) });
   }
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+    /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
+    /* @__PURE__ */ jsx(
+      FormInput,
+      {
+        name: "billing_address.state",
+        rules: {
+          required: t("payment.checkout.required"),
+          ...getFieldValidation("billing_address.state", fieldValidation, locale)
+        },
+        errorPosition,
+        variant: "outlined",
+        placeholder: t("payment.checkout.billing.state")
+      }
+    ),
     /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
     /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
       FormInput,

package/es/payment/form/index.js

@@ -284,6 +284,16 @@ export default function PaymentForm({
         return false;
       }
     }
+    if (!address.province) {
+      return false;
+    }
+    const stateValidation = getFieldValidation("billing_address.state", fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
     if (checkoutSession.phone_number_collection?.enabled) {
       if (!phone || phone.trim() === "") {
         return false;
@@ -315,13 +325,6 @@ export default function PaymentForm({
           return false;
         }
       }
-      const stateValidation = getFieldValidation("billing_address.state", fieldValidation, locale);
-      if (stateValidation.pattern) {
-        const pattern = stateValidation.pattern.value;
-        if (!pattern.test(address.province)) {
-          return false;
-        }
-      }
     }
     return true;
   };

package/lib/payment/form/address.js

@@ -131,6 +131,18 @@ function AddressForm({
         className: "cko-payment-form",
         spacing: 0,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
+          className: "base-label",
+          children: t("payment.checkout.billing.state")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+          name: "billing_address.state",
+          rules: {
+            required: t("payment.checkout.required"),
+            ...(0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale)
+          },
+          errorPosition,
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.state")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_label.default, {
           className: "base-label",
           children: t("payment.checkout.billing.postal_code")
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {

package/lib/payment/form/index.js

@@ -323,6 +323,16 @@ function PaymentForm({
         return false;
       }
     }
+    if (!address.province) {
+      return false;
+    }
+    const stateValidation = (0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
     if (checkoutSession.phone_number_collection?.enabled) {
       if (!phone || phone.trim() === "") {
         return false;
@@ -354,13 +364,6 @@ function PaymentForm({
           return false;
         }
       }
-      const stateValidation = (0, _validator.getFieldValidation)("billing_address.state", fieldValidation, locale);
-      if (stateValidation.pattern) {
-        const pattern = stateValidation.pattern.value;
-        if (!pattern.test(address.province)) {
-          return false;
-        }
-      }
     }
     return true;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.21.14",
+  "version": "1.21.16",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.21.14",
+    "@blocklet/payment-types": "1.21.16",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "31f93a8310fe5184be8dd4ff23b362906c8a66cf"
+  "gitHead": "16509d9abd2da2f52587972c863c79ba9e4cd49d"
 }

package/src/payment/form/address.tsx

@@ -102,6 +102,17 @@ export default function AddressForm({ mode, sx = {}, fieldValidation = {}, error
     <Fade in>
       <Stack className="cko-payment-address cko-payment-form" sx={sx}>
         <Stack direction="column" className="cko-payment-form" spacing={0}>
+          <FormLabel className="base-label">{t('payment.checkout.billing.state')}</FormLabel>
+          <FormInput
+            name="billing_address.state"
+            rules={{
+              required: t('payment.checkout.required'),
+              ...getFieldValidation('billing_address.state', fieldValidation, locale),
+            }}
+            errorPosition={errorPosition}
+            variant="outlined"
+            placeholder={t('payment.checkout.billing.state')}
+          />
           <FormLabel className="base-label">{t('payment.checkout.billing.postal_code')}</FormLabel>
           <Stack direction="row" spacing={0}>
             <FormInput

package/src/payment/form/index.tsx

@@ -418,6 +418,17 @@ export default function PaymentForm({
       }
     }
 
+    if (!address.province) {
+      return false;
+    }
+    const stateValidation = getFieldValidation('billing_address.state', fieldValidation, locale);
+    if (stateValidation.pattern) {
+      const pattern = stateValidation.pattern.value;
+      if (!pattern.test(address.province)) {
+        return false;
+      }
+    }
+
     if (checkoutSession.phone_number_collection?.enabled) {
       if (!phone || phone.trim() === '') {
         return false;
@@ -452,14 +463,6 @@ export default function PaymentForm({
           return false;
         }
       }
-
-      const stateValidation = getFieldValidation('billing_address.state', fieldValidation, locale);
-      if (stateValidation.pattern) {
-        const pattern = stateValidation.pattern.value;
-        if (!pattern.test(address.province)) {
-          return false;
-        }
-      }
     }
 
     return true;