@atomsolution/sdk-merchant 1.7.1 → 1.7.2

package/dist/merchant-profile/MerchantRegistrationForm/IndustrySelect.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 interface IndustrySelectProps {
     value: string;
     onChange: (value: string) => void;
-    lang?: "vi" | "en";
+    lang?: 'vi' | 'en';
 }
 declare const IndustrySelect: React.FC<IndustrySelectProps>;
 export default IndustrySelect;

package/dist/merchant-profile.cjs

@@ -1546,65 +1546,80 @@ const AddressFields$2 = ({
   errors,
   lang = "vi"
 }) => {
+  var _a, _b, _c, _d;
   const { translate } = useTranslation.useTranslation("form", lang);
-  const { countries, newCities, newWards } = useAddress(
+  const addressData = useAddress(
     formData.country,
     formData.city,
     formData.district
   );
-  const selects = [
-    {
-      label: "country",
-      name: "country",
-      value: formData.country,
-      options: countries.map((item) => {
-        var _a;
-        return {
-          value: (_a = item.id) != null ? _a : "",
-          label: item.name
-        };
-      })
-    },
-    {
-      label: "city",
-      name: "city",
-      value: formData.city,
-      options: newCities.map((item) => {
-        var _a;
-        return {
-          value: (_a = item.id) != null ? _a : "",
-          label: item.name
-        };
-      })
+  const countries = (_a = addressData == null ? void 0 : addressData.countries) != null ? _a : [];
+  const newCities = (_b = addressData == null ? void 0 : addressData.newCities) != null ? _b : [];
+  const newWards = (_c = addressData == null ? void 0 : addressData.newWards) != null ? _c : [];
+  const selects = React.useMemo(
+    () => {
+      var _a2, _b2, _c2;
+      return [
+        {
+          name: "country",
+          value: (_a2 = formData.country) != null ? _a2 : "",
+          placeholder: translate("country"),
+          options: countries.map((item) => {
+            var _a3, _b3;
+            return {
+              value: (_a3 = item == null ? void 0 : item.id) != null ? _a3 : "",
+              label: (_b3 = item == null ? void 0 : item.name) != null ? _b3 : ""
+            };
+          })
+        },
+        {
+          name: "city",
+          value: (_b2 = formData.city) != null ? _b2 : "",
+          placeholder: translate("city"),
+          options: newCities.map((item) => {
+            var _a3, _b3;
+            return {
+              value: (_a3 = item == null ? void 0 : item.id) != null ? _a3 : "",
+              label: (_b3 = item == null ? void 0 : item.name) != null ? _b3 : ""
+            };
+          })
+        },
+        {
+          name: "ward",
+          value: (_c2 = formData.ward) != null ? _c2 : "",
+          placeholder: translate("ward"),
+          options: newWards.map((item) => {
+            var _a3, _b3;
+            return {
+              value: (_a3 = item == null ? void 0 : item.id) != null ? _a3 : "",
+              label: (_b3 = item == null ? void 0 : item.name) != null ? _b3 : ""
+            };
+          })
+        }
+      ];
     },
-    {
-      label: "ward",
-      name: "ward",
-      value: formData.ward,
-      options: newWards.map((item) => {
-        var _a;
-        return {
-          value: (_a = item.id) != null ? _a : "",
-          label: item.name
-        };
-      })
-    }
-  ];
+    [
+      countries,
+      newCities,
+      newWards,
+      translate,
+      formData.country,
+      formData.city,
+      formData.ward
+    ]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("h3", { className: "text-sm font-semibold font-inter leading-[18px] tracking-normal text-[#2C2C2C]", children: translate("address") }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-2", children: selects.map((select) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
         "select",
         {
-          value: select.value,
-          onChange: (e) => onInputChange(
-            select.name,
-            e.target.value
-          ),
+          value: select.value || "",
+          onChange: (e) => onInputChange(select.name, e.target.value),
           className: `appearance-none w-full px-4 py-3 border ${(errors == null ? void 0 : errors[select.name]) ? "border-red-500" : "border-[#E4E7EC]"} rounded-[8px] focus:outline-none focus:ring-2 focus:ring-blue-500 text-[#6B7280] font-inter text-sm font-normal leading-[18px] tracking-normal hover:ring-2 hover:ring-blue-900`,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: "", children: translate(select.label) }),
-            (select.options || []).map((option) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: "", disabled: true, hidden: true, children: select.placeholder }),
+            select.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value))
           ]
         }
       ),
@@ -1632,7 +1647,7 @@ const AddressFields$2 = ({
       "input",
       {
         type: "text",
-        value: formData.address,
+        value: (_d = formData.address) != null ? _d : "",
         onChange: (e) => onInputChange("address", e.target.value),
         placeholder: translate("street"),
         className: `w-full px-3 py-3 border hover:ring-2 hover:ring-blue-900 ${(errors == null ? void 0 : errors.address) ? "border-red-500" : "border-[#E4E7EC]"} rounded-md text-[#6B7280] font-inter text-sm font-normal leading-[18px] tracking-normal`
@@ -1831,16 +1846,14 @@ const useMCCList = () => {
   }, []);
   return { industries, loading, error };
 };
-const IndustrySelect = React.memo(({
-  value,
-  onChange,
-  lang = "vi"
-}) => {
-  const { translate } = useTranslation.useTranslation("form", lang);
-  const { industries, loading, error } = useMCCList();
-  const isDisabled = loading || Boolean(error);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
+const IndustrySelect = React.memo(
+  ({ value, onChange, lang = "vi" }) => {
+    const { translate } = useTranslation.useTranslation("form", lang);
+    const { industries, loading, error } = useMCCList();
+    const safeIndustries = React.useMemo(() => industries != null ? industries : [], [industries]);
+    const isDisabled = Boolean(loading) || Boolean(error);
+    const errorMessage = typeof error === "string" ? error : error && typeof error === "object" && "message" in error ? String(error.message) : error ? String(error) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("label", { className: "block text-sm font-semibold text-[#2C2C2C] mb-2", children: [
         translate("industry"),
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })
@@ -1849,19 +1862,19 @@ const IndustrySelect = React.memo(({
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
           "select",
           {
-            value,
+            value: value != null ? value : "",
             onChange: (e) => onChange(e.target.value),
             className: `
-                            appearance-none w-full px-4 py-3 pr-10 border rounded-[8px] 
-                            focus:outline-none focus:ring-2 focus:ring-blue-500 
-                            text-[#6B7280] font-inter text-sm font-normal leading-[18px] 
-                            tracking-normal hover:ring-2 hover:ring-blue-900
-                            ${isDisabled ? "bg-gray-100 cursor-not-allowed" : "bg-white"}
-                        `,
+              appearance-none w-full px-4 py-3 pr-10 border rounded-[8px]
+              focus:outline-none focus:ring-2 focus:ring-blue-500
+              text-[#6B7280] font-inter text-sm font-normal leading-[18px]
+              tracking-normal hover:ring-2 hover:ring-blue-900
+              ${isDisabled ? "bg-gray-100 cursor-not-allowed" : "bg-white"}
+            `,
             disabled: isDisabled,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: "", children: translate("select_industry") }),
-              industries.map((industry) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: industry.code, children: industry.name }, industry.code))
+              safeIndustries.map((industry) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("option", { value: industry.code, children: industry.name }, industry.code))
             ]
           }
         ),
@@ -1883,12 +1896,12 @@ const IndustrySelect = React.memo(({
             )
           }
         ) })
-      ] })
-    ] }),
-    loading && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-sm text-blue-500 mt-2", children: translate("loading_industries") }),
-    error && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-sm text-red-500 mt-2", children: error })
-  ] });
-});
+      ] }),
+      loading && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-sm text-blue-500 mt-2", children: translate("loading_industries") }),
+      Boolean(errorMessage) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "text-sm text-red-500 mt-2", children: errorMessage })
+    ] });
+  }
+);
 IndustrySelect.displayName = "IndustrySelect";
 const Input = ({
   label,