@orderly.network/affiliate 3.1.3 → 3.1.4

package/dist/index.js

@@ -487,6 +487,10 @@ var useReferralCodeFormScript = (options) => {
   const { t } = i18n.useTranslation();
   const [newCode, setNewCode] = react.useState(referralCode || "");
   const [isReview, setIsReview] = react.useState(false);
+  const formattedNewCode = react.useMemo(
+    () => hooks.formatReferralCodeInput(newCode),
+    [newCode]
+  );
   const bonusMaxRebatePercentage = react.useMemo(() => {
     return new utils.Decimal(options.bonusMaxRebateRate ?? options.maxRebateRate ?? 0).mul(100).toNumber();
   }, [options.bonusMaxRebateRate, options.maxRebateRate]);
@@ -551,9 +555,13 @@ var useReferralCodeFormScript = (options) => {
     }
   };
   const onEdit = async () => {
+    if (codeChanged && !hooks.isReferralCodeLengthValid(formattedNewCode)) {
+      ui.toast.error(t("affiliate.referralCode.editCodeModal.helpText.length"));
+      return;
+    }
     const editReferralCodeParams = {
       current_referral_code: referralCode,
-      new_referral_code: newCode.toUpperCase().replace(/[^A-Z0-9]/g, "")
+      new_referral_code: formattedNewCode
     };
     const updateRebateRateParams = {
       referee_rebate_rate: new utils.Decimal(refereeBonusRebatePercentage).div(100).toNumber(),
@@ -628,8 +636,11 @@ var useReferralCodeFormScript = (options) => {
     if (type !== "edit" /* Edit */) {
       return false;
     }
+    if (codeChanged && !hooks.isReferralCodeLengthValid(formattedNewCode)) {
+      return true;
+    }
     return !codeChanged && !rateChanged;
-  }, [codeChanged, rateChanged, type]);
+  }, [codeChanged, rateChanged, formattedNewCode, type]);
   const confirmButtonLoading = isMutating;
   return {
     type,
@@ -690,8 +701,8 @@ var ReferralCodeInput = (props) => {
       },
       helpText: props.helpText,
       color: props.color,
-      maxLength: 10,
-      minLength: 4,
+      maxLength: hooks.REFERRAL_CODE_MAX_LENGTH,
+      minLength: hooks.REFERRAL_CODE_MIN_LENGTH,
       autoComplete: "off",
       disabled: props.disabled,
       autoFocus: props.autoFocus
@@ -1050,20 +1061,17 @@ ui.registerSimpleDialog(ReferralCodeFormDialogId, ReferralCodeFormWidget, {
   }
 });
 ui.registerSimpleSheet(ReferralCodeFormSheetId, ReferralCodeFormWidget);
-function formatReferralCodeInput(raw) {
-  return String(raw).replace(/[a-z]/g, (c) => c.toUpperCase()).replace(/[^A-Z0-9]/g, "");
-}
 var useBindReferralCodeScript = (options) => {
   const { t } = i18n.useTranslation();
   const [bindCodeInput, setBindCodeInput] = react.useState("");
   const [skipBinding, setSkipBinding] = react.useState(false);
   const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = react.useState(false);
   const formattedBindCode = react.useMemo(
-    () => formatReferralCodeInput(bindCodeInput),
+    () => hooks.formatReferralCodeInput(bindCodeInput),
     [bindCodeInput]
   );
   const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = hooks.useCheckReferralCode(
-    formattedBindCode.length >= 4 ? formattedBindCode : void 0
+    formattedBindCode.length >= hooks.REFERRAL_CODE_MIN_LENGTH ? formattedBindCode : void 0
   );
   const { bindReferralCode, isMutating } = useReferralCode();
   const getErrorMessage = (err) => {
@@ -1090,7 +1098,7 @@ var useBindReferralCodeScript = (options) => {
       await runAfterSuccess({ skipped: true });
       return;
     }
-    if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
+    if (!hooks.isReferralCodeLengthValid(formattedBindCode) || isBindCodeChecking || !isBindCodeExist) {
       return;
     }
     try {
@@ -1101,7 +1109,7 @@ var useBindReferralCodeScript = (options) => {
       handleError(err);
     }
   };
-  const buttonDisabled = !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
+  const buttonDisabled = !skipBinding && (!hooks.isReferralCodeLengthValid(formattedBindCode) || isBindCodeChecking || !isBindCodeExist);
   const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
   return {
     bindCodeInput,
@@ -1133,7 +1141,7 @@ var WarningBox = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
 );
 var BindReferralCode = (props) => {
   const { t } = i18n.useTranslation();
-  const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
+  const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= hooks.REFERRAL_CODE_MIN_LENGTH && !props.isBindCodeChecking && props.isBindCodeExist === false;
   const titleView = /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -2603,6 +2611,232 @@ var useMultiLevelReferees = (params = {}) => {
     meta: response.data?.meta
   };
 };
+var useEditRefereeDescription = () => {
+  const [doEditRefereeDescription, { isMutating }] = hooks.useMutation("/v1/referral/edit_referee_description");
+  const editRefereeDescription = async (params) => {
+    return doEditRefereeDescription(params);
+  };
+  return {
+    editRefereeDescription,
+    isMutating
+  };
+};
+
+// src/pages/multiLevel/affiliate/referrerTable/refereeDescriptionForm/refereeDescriptionForm.script.ts
+var DESCRIPTION_PATTERN = /^[a-zA-Z0-9@, _-]{0,50}$/;
+var useRefereeDescriptionFormScript = (options) => {
+  const { t } = i18n.useTranslation();
+  const [description, setDescription] = react.useState(options.description ?? "");
+  const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = react.useState(false);
+  const { editRefereeDescription, isMutating } = useEditRefereeDescription();
+  const isValid = react.useMemo(() => {
+    return DESCRIPTION_PATTERN.test(description);
+  }, [description]);
+  const buttonDisabled = !isValid;
+  const getErrorMessage = (err) => {
+    if (typeof err === "object" && err !== null && "message" in err) {
+      const msg = err.message;
+      return typeof msg === "string" ? msg : void 0;
+    }
+    return void 0;
+  };
+  const onConfirm = async () => {
+    if (!isValid) return;
+    const nextDescription = description.length === 0 ? null : description;
+    try {
+      const res = await editRefereeDescription({
+        user_address: options.address,
+        description: nextDescription
+      });
+      if (res.success) {
+        setIsAwaitingPostSuccess(true);
+        try {
+          await Promise.resolve(options.onSuccess?.());
+        } finally {
+          setIsAwaitingPostSuccess(false);
+        }
+        ui.toast.success(t("affiliate.refereeNote.save.success"));
+        options.close?.();
+      } else {
+        ui.toast.error(res.message || t("common.somethingWentWrong"));
+      }
+    } catch (err) {
+      ui.toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
+    }
+  };
+  return {
+    description,
+    setDescription,
+    isValid,
+    buttonDisabled,
+    confirmButtonLoading: isMutating || isAwaitingPostSuccess,
+    onConfirm
+  };
+};
+var RefereeDescriptionForm = (props) => {
+  const { t } = i18n.useTranslation();
+  const showError = !props.isValid;
+  const titleView = /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      width: "100%",
+      direction: "column",
+      itemAlign: "start",
+      className: "oui-refereeDescriptionForm-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Flex,
+          {
+            width: "100%",
+            height: 53,
+            itemAlign: "center",
+            className: "oui-px-5 oui-pt-3",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 98, className: "oui-leading-6", children: t("affiliate.editNote") })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8, className: "oui-w-full" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      className: "oui-affiliate-refereeDescriptionForm oui-font-semibold",
+      children: [
+        titleView,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            width: "100%",
+            direction: "column",
+            itemAlign: "start",
+            gap: 6,
+            className: "oui-p-5",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, className: "oui-leading-[18px]", children: t("affiliate.remark") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    autoFocus: true,
+                    value: props.description,
+                    onChange: (event) => props.setDescription(event.target.value),
+                    placeholder: t("affiliate.refereeNote.placeholder"),
+                    className: [
+                      "oui-h-10 oui-w-full oui-rounded-md oui-border oui-bg-base-6 oui-px-3 oui-py-2.5",
+                      "oui-text-sm oui-font-semibold oui-leading-5 oui-tracking-[0.03em] oui-text-base-contrast-98 oui-outline-none",
+                      "placeholder:oui-text-base-contrast-20",
+                      showError ? "oui-border-danger" : "oui-border-line-12 focus:oui-border-line-12"
+                    ].join(" ")
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", gap: 1, itemAlign: "start", className: "oui-pl-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: [
+                        "oui-mt-[7px] oui-size-1 oui-shrink-0 oui-rounded-full",
+                        showError ? "oui-bg-danger" : "oui-bg-base-contrast-54"
+                      ].join(" ")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      size: "2xs",
+                      intensity: showError ? 98 : 54,
+                      className: [
+                        "oui-leading-[18px]",
+                        showError ? "oui-text-danger" : void 0
+                      ].join(" "),
+                      children: showError ? t("affiliate.refereeNote.helpText") : t("affiliate.refereeNote.helpText.short")
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                ui.Flex,
+                {
+                  width: "100%",
+                  justify: "between",
+                  itemAlign: "center",
+                  gap: 2,
+                  className: "oui-text-2xs oui-font-semibold oui-leading-[18px]",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, children: t("affiliate.userAddress") }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 98, className: "oui-min-w-0 oui-flex-1 oui-text-end", children: ui.formatAddress(props.address) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            direction: "row",
+            gap: 3,
+            width: "100%",
+            className: "oui-px-5 oui-pb-5 oui-pt-3",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  variant: "contained",
+                  color: "gray",
+                  fullWidth: true,
+                  onClick: props.close,
+                  size: "md",
+                  className: "oui-refereeDescriptionForm-cancel-btn oui-rounded-md",
+                  children: t("common.cancel")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  fullWidth: true,
+                  onClick: props.onConfirm,
+                  disabled: props.buttonDisabled || props.confirmButtonLoading,
+                  loading: props.confirmButtonLoading,
+                  size: "md",
+                  className: "oui-refereeDescriptionForm-confirm-btn oui-rounded-md",
+                  children: t("common.save")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var RefereeDescriptionFormWidget = (props) => {
+  const state = useRefereeDescriptionFormScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RefereeDescriptionForm,
+    {
+      ...props,
+      ...state,
+      initialDescription: props.description
+    }
+  );
+};
+
+// src/pages/multiLevel/affiliate/referrerTable/refereeDescriptionForm/modal.ts
+var RefereeDescriptionFormDialogId = "RefereeDescriptionFormDialogId";
+ui.registerSimpleDialog(
+  RefereeDescriptionFormDialogId,
+  RefereeDescriptionFormWidget,
+  {
+    size: "sm",
+    classNames: {
+      content: "oui-border oui-border-line-6 !oui-max-w-[360px] !oui-px-0",
+      body: "!oui-py-0"
+    }
+  }
+);
 
 // src/pages/multiLevel/affiliate/referrerTable/refereesTable/refereesTable.script.tsx
 var useRefereesTableScript = (props = {}) => {
@@ -2667,6 +2901,18 @@ var useRefereesTableScript = (props = {}) => {
       refereesMutate
     ]
   );
+  const onEditDescription = react.useCallback(
+    (item) => {
+      ui.modal.show(RefereeDescriptionFormDialogId, {
+        address: item.address,
+        description: item.description,
+        onSuccess: () => {
+          refereesMutate();
+        }
+      });
+    },
+    [refereesMutate]
+  );
   const refereesData = react.useMemo(() => {
     const rows = refereesRows ?? [];
     if (!refereesSort) return rows;
@@ -2701,6 +2947,7 @@ var useRefereesTableScript = (props = {}) => {
     refereesPagination,
     isRefereesLoading,
     onEditReferee,
+    onEditDescription,
     onRefereesSort,
     showActionColumn,
     baseRebateRate
@@ -2725,11 +2972,63 @@ var getRefereeType = (bindType) => {
     tooltip: t("affiliate.multiLevel.tooltip")
   };
 };
-var MobileRefereeItem = ({ item, onEditReferee, showActionColumn, baseRebateRate }) => {
+var useMobileDescriptionModal = (content, title) => {
+  const { isMobile } = ui.useScreen();
+  return react.useCallback(
+    (e) => {
+      if (!isMobile) return;
+      e.preventDefault();
+      e.stopPropagation();
+      ui.modal.dialog({
+        title,
+        closable: true,
+        size: "sm",
+        content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-sm oui-leading-5 oui-text-base-contrast", children: content })
+      });
+    },
+    [isMobile, content, title]
+  );
+};
+var DescriptionCell = ({ description }) => {
+  const { t } = i18n.useTranslation();
+  const hasDescription = !!description && description.length > 0;
+  const onClick = useMobileDescriptionModal(
+    description,
+    t("affiliate.refereeNote")
+  );
+  const { isMobile } = ui.useScreen();
+  if (!hasDescription) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, className: "oui-leading-[18px]", children: "--" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: description, open: isMobile ? false : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Text,
+    {
+      size: "2xs",
+      intensity: 54,
+      className: "oui-block oui-max-w-full oui-cursor-pointer oui-truncate oui-underline oui-decoration-dashed oui-underline-offset-4 oui-decoration-base-contrast-36 oui-leading-[18px]",
+      onClick,
+      children: description
+    }
+  ) });
+};
+var AddressDescriptionCell = ({ item }) => {
+  const { t } = i18n.useTranslation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, className: "oui-min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AddressCell, { address: item.address, title: t("common.address") }),
+    /* @__PURE__ */ jsxRuntime.jsx(DescriptionCell, { description: item.description })
+  ] });
+};
+var MobileRefereeItem = ({
+  item,
+  onEditReferee,
+  onEditDescription,
+  showActionColumn,
+  baseRebateRate
+}) => {
   const { t } = i18n.useTranslation();
   const typeInfo = getRefereeType(item.bind_type);
   return /* @__PURE__ */ jsxRuntime.jsxs(MobileCard, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MobileCell, { label: t("common.address"), children: /* @__PURE__ */ jsxRuntime.jsx(AddressCell, { address: item.address, title: t("common.address") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(MobileCell, { label: t("common.address"), children: /* @__PURE__ */ jsxRuntime.jsx(AddressDescriptionCell, { item }) }),
     /* @__PURE__ */ jsxRuntime.jsx(MobileCell, { label: t("common.type"), children: /* @__PURE__ */ jsxRuntime.jsx(
       TooltipCell,
       {
@@ -2789,30 +3088,46 @@ var MobileRefereeItem = ({ item, onEditReferee, showActionColumn, baseRebateRate
         title: t("affiliate.commission")
       }
     ) }),
-    showActionColumn && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       MobileCell,
       {
         label: t("common.action"),
         align: "end",
         className: "oui-col-start-3",
-        children: item.bind_type !== "legacy" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text,
-            {
-              className: "oui-refereesTable-edit-btn oui-cursor-pointer oui-text-primary-light",
-              onClick: () => onEditReferee("edit" /* Edit */, item),
-              children: t("common.edit")
-            }
-          ),
-          !item.is_default_rate && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text,
-            {
-              className: "oui-refereesTable-reset-btn oui-cursor-pointer oui-text-primary-light",
-              onClick: () => onEditReferee("reset" /* Reset */, item),
-              children: t("common.reset")
-            }
-          )
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            gap: 2,
+            itemAlign: "center",
+            className: "oui-flex-wrap oui-justify-end oui-gap-y-1",
+            children: [
+              showActionColumn && item.bind_type !== "legacy" && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-edit-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => onEditReferee("edit" /* Edit */, item),
+                  children: t("common.edit")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-note-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => onEditDescription(item),
+                  children: t("affiliate.note")
+                }
+              ),
+              showActionColumn && item.bind_type !== "legacy" && !item.is_default_rate && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-reset-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => onEditReferee("reset" /* Reset */, item),
+                  children: t("common.reset")
+                }
+              )
+            ]
+          }
+        )
       }
     )
   ] });
@@ -2826,7 +3141,7 @@ var RefereesTableUI = (props) => {
       {
         title: t("common.address"),
         dataIndex: "address",
-        render: (value) => /* @__PURE__ */ jsxRuntime.jsx(AddressCell, { address: value, title: t("common.address") })
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsx(AddressDescriptionCell, { item: record })
       },
       {
         title: t("common.type"),
@@ -2917,35 +3232,52 @@ var RefereesTableUI = (props) => {
         ),
         onSort: true
       },
-      ...props.showActionColumn ? [
-        {
-          title: t("common.action"),
-          dataIndex: "action",
-          render: (_, record) => record.bind_type !== "legacy" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text,
-              {
-                className: "oui-refereesTable-edit-btn oui-cursor-pointer oui-text-primary-light",
-                onClick: () => props.onEditReferee("edit" /* Edit */, record),
-                children: t("common.edit")
-              }
-            ),
-            !record.is_default_rate && /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Text,
-              {
-                className: "oui-refereesTable-reset-btn oui-ms-2 oui-cursor-pointer oui-text-primary-light",
-                onClick: () => props.onEditReferee(
-                  "reset" /* Reset */,
-                  record
-                ),
-                children: t("common.reset")
-              }
-            )
-          ] }) : null
-        }
-      ] : []
+      {
+        title: t("common.action"),
+        dataIndex: "action",
+        render: (_, record) => /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            gap: 2,
+            itemAlign: "center",
+            className: "oui-flex-wrap oui-gap-y-1",
+            children: [
+              props.showActionColumn && record.bind_type !== "legacy" && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-edit-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => props.onEditReferee("edit" /* Edit */, record),
+                  children: t("common.edit")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-note-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => props.onEditDescription(record),
+                  children: t("affiliate.note")
+                }
+              ),
+              props.showActionColumn && record.bind_type !== "legacy" && !record.is_default_rate && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text,
+                {
+                  className: "oui-refereesTable-reset-btn oui-shrink-0 oui-cursor-pointer oui-text-primary-light",
+                  onClick: () => props.onEditReferee("reset" /* Reset */, record),
+                  children: t("common.reset")
+                }
+              )
+            ]
+          }
+        )
+      }
     ];
-  }, [t, props.onEditReferee, props.showActionColumn, props.baseRebateRate]);
+  }, [
+    t,
+    props.onEditReferee,
+    props.onEditDescription,
+    props.showActionColumn,
+    props.baseRebateRate
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-affiliate-refereesTable oui-flex oui-flex-col oui-px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
     ui.ListView,
     {
@@ -2957,6 +3289,7 @@ var RefereesTableUI = (props) => {
           {
             item,
             onEditReferee: props.onEditReferee,
+            onEditDescription: props.onEditDescription,
             showActionColumn: props.showActionColumn,
             baseRebateRate: props.baseRebateRate
           }
@@ -4892,7 +5225,7 @@ var EditCodeModal = ui.modal.create((props) => {
       length: false,
       format: false
     };
-    if (_code.length < 4 || _code.length > 10) {
+    if (!hooks.isReferralCodeLengthValid(_code)) {
       _fieldError.length = true;
     }
     if (!/^[A-Z0-9]+$/.test(_code)) {
@@ -4918,7 +5251,7 @@ var EditCodeModal = ui.modal.create((props) => {
             try {
               const res = await editCode({
                 current_referral_code: props.code.code,
-                new_referral_code: newCode.toUpperCase()
+                new_referral_code: hooks.formatReferralCodeInput(newCode)
               });
               if (res.success) {
                 ui.toast.success(
@@ -4947,8 +5280,7 @@ var EditCodeModal = ui.modal.create((props) => {
             },
             value: newCode,
             onChange: (e) => {
-              const _value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
-              setNewCode(_value);
+              setNewCode(hooks.formatReferralCodeInput(e.target.value));
             },
             formatters: [
               ui.inputFormatter.createRegexInputFormatter((value) => {
@@ -4963,8 +5295,8 @@ var EditCodeModal = ui.modal.create((props) => {
               label: "oui-text-base-contrast-54 oui-text-xs",
               input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
             },
-            maxLength: 10,
-            minLength: 4,
+            maxLength: hooks.REFERRAL_CODE_MAX_LENGTH,
+            minLength: hooks.REFERRAL_CODE_MIN_LENGTH,
             autoComplete: "off",
             helpText: ""
           }
@@ -6286,8 +6618,7 @@ var EntryCode = (props) => {
             placeholder: t("affiliate.referralCode"),
             value: props.code,
             onChange: (e) => {
-              const _value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
-              props.setCode(_value);
+              props.setCode(hooks.formatReferralCodeInput(e.target.value));
             },
             formatters: [
               ui.inputFormatter.createRegexInputFormatter(
@@ -6304,11 +6635,13 @@ var EntryCode = (props) => {
               props.setCode("");
             },
             label: t("affiliate.referralCode.label"),
+            maxLength: hooks.REFERRAL_CODE_MAX_LENGTH,
+            minLength: hooks.REFERRAL_CODE_MIN_LENGTH,
             classNames: {
               label: "oui-text-2xs oui-text-base-contrast-54"
             },
-            helpText: !props.isExist && !props.isLoading && props.code.length > 0 ? t("affiliate.referralCode.notExist") : void 0,
-            color: !props.isExist && !props.isLoading && props.code.length > 0 ? "danger" : void 0
+            helpText: hooks.isReferralCodeLengthValid(props.code) && !props.isExist && !props.isLoading ? t("affiliate.referralCode.notExist") : void 0,
+            color: hooks.isReferralCodeLengthValid(props.code) && !props.isExist && !props.isLoading ? "danger" : void 0
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gapY: 3, mt: 6, children: [
@@ -6321,7 +6654,7 @@ var EntryCode = (props) => {
               size: "md",
               className: "oui-px-[40px]",
               fullWidth: true,
-              disabled: props.code.length < 4 || !props.isExist,
+              disabled: !hooks.isReferralCodeLengthValid(props.code) || !props.isExist,
               onClick: (e) => {
                 e.stopPropagation();
                 props.onClickConfirm();
@@ -6356,7 +6689,9 @@ var useAsTraderScript = () => {
     isExist,
     error: checkCodeError,
     isLoading
-  } = hooks.useCheckReferralCode(code);
+  } = hooks.useCheckReferralCode(
+    code.length >= hooks.REFERRAL_CODE_MIN_LENGTH ? code : void 0
+  );
   const hide = () => {
     setOpen(false);
   };
@@ -6365,6 +6700,9 @@ var useAsTraderScript = () => {
     "POST"
   );
   const onClickConfirm = async () => {
+    if (!hooks.isReferralCodeLengthValid(code) || !isExist) {
+      return;
+    }
     try {
       await bindCode({ referral_code: code });
       ui.toast.success(t("affiliate.referralCode.bound"));