@orderly.network/affiliate 3.0.0-beta.4 → 3.0.0-beta.6

package/dist/index.mjs

@@ -461,25 +461,11 @@ var useReferralCode = () => {
 };
 
 // src/pages/multiLevel/affiliate/referralCodeForm/referralCodeForm.script.ts
-function formatReferralCodeInput(raw) {
-  return String(raw).replace(/[a-z]/g, (c) => c.toUpperCase()).replace(/[^A-Z0-9]/g, "");
-}
 var useReferralCodeFormScript = (options) => {
   const { type, referralCode, maxRebateRate, referrerRebateRate, accountId } = options;
   const { t } = useTranslation();
-  const isBind = type === "bind" /* Bind */;
   const [newCode, setNewCode] = useState(referralCode || "");
-  const [bindCodeInput, setBindCodeInput] = useState("");
   const [isReview, setIsReview] = useState(false);
-  const [skipBinding, setSkipBinding] = useState(false);
-  const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = useState(false);
-  const formattedBindCode = useMemo(
-    () => formatReferralCodeInput(bindCodeInput),
-    [bindCodeInput]
-  );
-  const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = useCheckReferralCode(
-    isBind && formattedBindCode.length >= 4 ? formattedBindCode : void 0
-  );
   const maxRebatePercentage = useMemo(() => {
     return new Decimal(maxRebateRate).mul(100).toNumber();
   }, [maxRebateRate]);
@@ -494,20 +480,7 @@ var useReferralCodeFormScript = (options) => {
       return 0;
     }
   );
-  const applyCreateDefaults = () => {
-    setReferrerRebatePercentage(Math.ceil(maxRebatePercentage / 2));
-  };
-  const runBindOnSuccessThenApplyDefaults = async () => {
-    setIsAwaitingPostSuccess(true);
-    try {
-      await Promise.resolve(options.onSuccess?.());
-    } finally {
-      setIsAwaitingPostSuccess(false);
-    }
-    applyCreateDefaults();
-  };
   const {
-    bindReferralCode,
     createReferralCode,
     editReferralCode,
     updateRebateRate,
@@ -597,27 +570,8 @@ var useReferralCodeFormScript = (options) => {
       handleError(err);
     }
   };
-  const onBind = async () => {
-    if (skipBinding) {
-      await runBindOnSuccessThenApplyDefaults();
-      return;
-    }
-    if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
-      return;
-    }
-    try {
-      await bindReferralCode({ referral_code: formattedBindCode });
-      toast.success(t("affiliate.referralCode.bound"));
-      await runBindOnSuccessThenApplyDefaults();
-    } catch (err) {
-      handleError(err);
-    }
-  };
   const onClick = () => {
     switch (type) {
-      case "bind" /* Bind */:
-        onBind();
-        break;
       case "create" /* Create */:
         onCreate();
         break;
@@ -633,8 +587,8 @@ var useReferralCodeFormScript = (options) => {
         break;
     }
   };
-  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged || isBind && !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
-  const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
+  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
+  const confirmButtonLoading = isMutating;
   return {
     type,
     onClick,
@@ -645,16 +599,9 @@ var useReferralCodeFormScript = (options) => {
     confirmButtonLoading,
     newCode,
     setNewCode,
-    bindCodeInput,
-    setBindCodeInput,
-    formattedBindCode,
     isReview,
     buttonDisabled,
-    onReset,
-    skipBinding,
-    setSkipBinding,
-    isBindCodeExist,
-    isBindCodeChecking
+    onReset
   };
 };
 var GiftIcon = (props) => {
@@ -679,30 +626,77 @@ var GiftIcon = (props) => {
     }
   );
 };
+var WarningBox = (props) => /* @__PURE__ */ jsxs(
+  Flex,
+  {
+    className: "oui-bg-warning/10",
+    justify: "start",
+    itemAlign: "start",
+    gap: 1,
+    r: "lg",
+    p: 3,
+    children: [
+      /* @__PURE__ */ jsx(WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
+      typeof props.children === "string" ? /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children: props.children }) : props.children
+    ]
+  }
+);
+var ReferralCodeInput = (props) => {
+  const hasSetCursorToEnd = useRef(false);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      type: "text",
+      fullWidth: true,
+      label: props.label ?? "",
+      placeholder: props.placeholder,
+      value: props.value,
+      onChange: (e) => {
+        props.onChange(e.target.value);
+      },
+      onFocus: (e) => {
+        if (props.autoFocus && !hasSetCursorToEnd.current) {
+          hasSetCursorToEnd.current = true;
+          const input = e.target;
+          const len = input.value.length;
+          requestAnimationFrame(() => {
+            input.setSelectionRange(len, len);
+          });
+        }
+      },
+      formatters: [
+        inputFormatter.createRegexInputFormatter((value) => {
+          return String(value).replace(
+            /[a-z]/g,
+            (char) => char.toUpperCase()
+          );
+        }),
+        inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
+      ],
+      className: "oui-w-full",
+      classNames: {
+        label: "oui-text-base-contrast-54 oui-text-xs",
+        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
+      },
+      helpText: props.helpText,
+      color: props.color,
+      maxLength: 10,
+      minLength: 4,
+      autoComplete: "off",
+      disabled: props.disabled,
+      autoFocus: props.autoFocus
+    }
+  );
+};
 var ReferralCodeForm = (props) => {
   const { type, isReview } = props;
   const { t } = useTranslation();
-  const isBind = type === "bind" /* Bind */;
   const isReset = type === "reset" /* Reset */;
   const hasBoundReferee = !!props.directInvites && props.directInvites > 0;
   const isEditingRefereeRebateRate = !!props.accountId;
   const noCommissionAvailable = props.maxRebateRate === 0;
   const { title, description, buttonText } = useMemo(() => {
     switch (type) {
-      case "bind" /* Bind */:
-        return {
-          title: t("affiliate.referralCode.bind.modal.title"),
-          description: /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "2xs",
-              intensity: 54,
-              className: "oui-leading-[18px] oui-text-warning-darken",
-              children: t("affiliate.referralCode.bind.modal.description")
-            }
-          ),
-          buttonText: t("common.confirm")
-        };
       case "create" /* Create */:
         return {
           title: t("affiliate.referralCode.create.modal.title"),
@@ -748,19 +742,6 @@ var ReferralCodeForm = (props) => {
     }
   );
   const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: description });
-  const bindCodeInvalid = isBind && !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
-  const bindReferralCodeInput = /* @__PURE__ */ jsx(
-    ReferralCodeInput,
-    {
-      value: props.bindCodeInput,
-      onChange: props.setBindCodeInput,
-      autoFocus: true,
-      disabled: props.skipBinding,
-      placeholder: t("affiliate.referralCode.bind.input.placeholder"),
-      helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
-      color: bindCodeInvalid ? "danger" : void 0
-    }
-  );
   const referralCodeInput = /* @__PURE__ */ jsx(
     ReferralCodeInput,
     {
@@ -771,30 +752,6 @@ var ReferralCodeForm = (props) => {
       label: t("affiliate.referralCode.editCodeModal.label")
     }
   );
-  const bindCheckbox = isBind && /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        color: "white",
-        id: "oui-checkbox-skipReferralBinding",
-        checked: props.skipBinding,
-        onCheckedChange: (checked) => {
-          props.setSkipBinding(checked);
-          if (checked) {
-            props.setBindCodeInput("");
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: "oui-checkbox-skipReferralBinding",
-        className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
-        children: t("affiliate.referralCode.bind.skip")
-      }
-    )
-  ] });
   const commissionConfiguration = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.commissionConfiguration") }),
     !isReview && /* @__PURE__ */ jsxs(Text, { size: "2xs", intensity: 54, children: [
@@ -857,12 +814,6 @@ var ReferralCodeForm = (props) => {
   ] });
   const renderContent = () => {
     switch (type) {
-      case "bind" /* Bind */:
-        return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
-          bindReferralCodeInput,
-          bindCheckbox,
-          buttons
-        ] });
       case "create" /* Create */:
         return /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
           commissionConfiguration,
@@ -1011,74 +962,6 @@ var RebateRateSlider = (props) => {
     ] })
   ] });
 };
-var ReferralCodeInput = (props) => {
-  const hasSetCursorToEnd = useRef(false);
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      type: "text",
-      fullWidth: true,
-      label: props.label ?? "",
-      placeholder: props.placeholder,
-      value: props.value,
-      onChange: (e) => {
-        props.onChange(e.target.value);
-      },
-      onFocus: (e) => {
-        if (props.autoFocus && !hasSetCursorToEnd.current) {
-          hasSetCursorToEnd.current = true;
-          const input = e.target;
-          const len = input.value.length;
-          requestAnimationFrame(() => {
-            input.setSelectionRange(len, len);
-          });
-        }
-      },
-      formatters: [
-        inputFormatter.createRegexInputFormatter((value) => {
-          return String(value).replace(
-            /[a-z]/g,
-            (char) => char.toUpperCase()
-          );
-        }),
-        inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
-      ],
-      className: "oui-w-full",
-      classNames: {
-        label: "oui-text-base-contrast-54 oui-text-xs",
-        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
-      },
-      helpText: props.helpText,
-      color: props.color,
-      maxLength: 10,
-      minLength: 4,
-      autoComplete: "off",
-      disabled: props.disabled,
-      autoFocus: props.autoFocus
-    }
-  );
-};
-var WarningBox = (props) => {
-  const { children } = props;
-  if (typeof children === "string") {
-    return /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        className: "oui-bg-warning/10",
-        justify: "start",
-        itemAlign: "start",
-        gap: 1,
-        r: "lg",
-        p: 3,
-        children: [
-          /* @__PURE__ */ jsx(WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
-          /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children })
-        ]
-      }
-    );
-  }
-  return children;
-};
 var ReferralCodeFormWidget = (props) => {
   const state = useReferralCodeFormScript(props);
   return /* @__PURE__ */ jsx(ReferralCodeForm, { ...state, ...props });
@@ -1095,6 +978,190 @@ registerSimpleDialog(ReferralCodeFormDialogId, ReferralCodeFormWidget, {
   }
 });
 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 } = useTranslation();
+  const [bindCodeInput, setBindCodeInput] = useState("");
+  const [skipBinding, setSkipBinding] = useState(false);
+  const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = useState(false);
+  const formattedBindCode = useMemo(
+    () => formatReferralCodeInput(bindCodeInput),
+    [bindCodeInput]
+  );
+  const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = useCheckReferralCode(
+    formattedBindCode.length >= 4 ? formattedBindCode : void 0
+  );
+  const { bindReferralCode, isMutating } = useReferralCode();
+  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 handleError = (err) => {
+    toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
+  };
+  const runAfterSuccess = async (payload) => {
+    setIsAwaitingPostSuccess(true);
+    try {
+      await Promise.resolve(options.onSuccess?.(payload));
+    } finally {
+      setIsAwaitingPostSuccess(false);
+    }
+    options.close?.();
+  };
+  const onConfirm = async () => {
+    if (skipBinding) {
+      await runAfterSuccess({ skipped: true });
+      return;
+    }
+    if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
+      return;
+    }
+    try {
+      await bindReferralCode({ referral_code: formattedBindCode });
+      toast.success(t("affiliate.referralCode.bound"));
+      await runAfterSuccess({ skipped: false });
+    } catch (err) {
+      handleError(err);
+    }
+  };
+  const buttonDisabled = !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
+  const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
+  return {
+    bindCodeInput,
+    setBindCodeInput,
+    skipBinding,
+    setSkipBinding,
+    formattedBindCode,
+    isBindCodeExist,
+    isBindCodeChecking,
+    buttonDisabled,
+    confirmButtonLoading,
+    onConfirm
+  };
+};
+var BindReferralCode = (props) => {
+  const { t } = useTranslation();
+  const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
+  const titleView = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      width: "100%",
+      direction: "column",
+      itemAlign: "start",
+      gap: 3,
+      className: "oui-bindReferralCode-header",
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: t("affiliate.referralCode.bind.modal.title") }),
+        /* @__PURE__ */ jsx(Divider, { intensity: 8, className: "oui-w-full" })
+      ]
+    }
+  );
+  const descriptionView = /* @__PURE__ */ jsx(WarningBox, { children: /* @__PURE__ */ jsx(
+    Text,
+    {
+      size: "2xs",
+      intensity: 54,
+      className: "oui-leading-[18px] oui-text-warning-darken",
+      children: t("affiliate.referralCode.bind.modal.description")
+    }
+  ) });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      gap: 6,
+      className: "oui-affiliate-bindReferralCode oui-font-semibold",
+      children: [
+        titleView,
+        descriptionView,
+        /* @__PURE__ */ jsxs(Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
+          /* @__PURE__ */ jsx(
+            ReferralCodeInput,
+            {
+              value: props.bindCodeInput,
+              onChange: props.setBindCodeInput,
+              autoFocus: true,
+              disabled: props.skipBinding,
+              placeholder: t("affiliate.referralCode.bind.input.placeholder"),
+              helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
+              color: bindCodeInvalid ? "danger" : void 0
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { className: "oui-gap-[6px]", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                color: "white",
+                id: "oui-checkbox-bindReferralCode-skip",
+                checked: props.skipBinding,
+                onCheckedChange: (checked) => {
+                  props.setSkipBinding(checked);
+                  if (checked) {
+                    props.setBindCodeInput("");
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "oui-checkbox-bindReferralCode-skip",
+                className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
+                children: t("affiliate.referralCode.bind.skip")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "gray",
+                fullWidth: true,
+                onClick: props.close,
+                size: "md",
+                className: "oui-bindReferralCode-cancel-btn",
+                children: t("common.cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: true,
+                onClick: props.onConfirm,
+                disabled: props.buttonDisabled || props.confirmButtonLoading,
+                loading: props.confirmButtonLoading,
+                size: "md",
+                className: "oui-bindReferralCode-confirm-btn",
+                children: t("common.confirm")
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var BindReferralCodeWidget = (props) => {
+  const state = useBindReferralCodeScript(props);
+  return /* @__PURE__ */ jsx(BindReferralCode, { ...state, ...props });
+};
+
+// src/pages/multiLevel/components/bindReferralCode/modal.ts
+var BindReferralCodeDialogId = "BindReferralCodeDialogId";
+registerSimpleDialog(BindReferralCodeDialogId, BindReferralCodeWidget, {
+  size: "sm",
+  classNames: {
+    content: "oui-border oui-border-line-6",
+    body: "!oui-pt-3"
+  }
+});
 var TradingVolumeProgress = (props) => {
   const { t } = useTranslation();
   const { classNames } = props;
@@ -1215,8 +1282,18 @@ var Hero = () => {
     multiLevelRebateInfoMutate,
     maxRebateRate,
     maxRebateRateMutate,
-    mutate
+    mutate,
+    referralInfo
   } = useReferralContext();
+  const boundReferralCode = referralInfo?.referee_info?.referer_code?.trim() ?? "";
+  const openBindReferralOnlyModal = () => {
+    modal.show(BindReferralCodeDialogId, {
+      onSuccess: async ({ skipped }) => {
+        if (skipped) return;
+        await Promise.allSettled([multiLevelRebateInfoMutate?.(), mutate?.()]);
+      }
+    });
+  };
   const showCreateReferralCodeModal = (maxRateOverride) => {
     modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
@@ -1229,10 +1306,12 @@ var Hero = () => {
   };
   const onCreateReferralCode = () => {
     if (!isTrader) {
-      modal.show(ReferralCodeFormDialogId, {
-        type: "bind" /* Bind */,
-        maxRebateRate,
-        onSuccess: async () => {
+      modal.show(BindReferralCodeDialogId, {
+        onSuccess: async ({ skipped }) => {
+          if (skipped) {
+            showCreateReferralCodeModal();
+            return;
+          }
           const results = await Promise.allSettled([
             maxRebateRateMutate(),
             multiLevelRebateInfoMutate(),
@@ -1260,24 +1339,64 @@ var Hero = () => {
       return "";
     }
     return t("affiliate.newReferralProgram.description");
-  }, [t, wrongNetwork, status]);
+  }, [t, wrongNetwork, status, isMultiLevelReferralUnlocked]);
   const renderContent = () => {
     if (!isMultiLevelReferralUnlocked) {
-      return /* @__PURE__ */ jsx(
-        TradingVolumeProgress,
+      return /* @__PURE__ */ jsxs(
+        Flex,
         {
-          classNames: {
-            root: "oui-items-start",
-            description: "!oui-text-start"
-          },
-          buttonProps: {
-            size: "xl"
-          }
+          direction: "column",
+          itemAlign: "start",
+          gap: 4,
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsx(
+              TradingVolumeProgress,
+              {
+                classNames: {
+                  root: "oui-items-start",
+                  description: "!oui-text-start"
+                },
+                buttonProps: {
+                  size: "xl"
+                }
+              }
+            ),
+            boundReferralCode ? /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
+              code: boundReferralCode
+            }) }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "oui-cursor-pointer oui-border-none oui-bg-transparent oui-p-0",
+                  "oui-text-start oui-text-sm oui-font-normal oui-text-base-contrast-54 oui-underline oui-underline-offset-2",
+                  "oui-affiliate-landing-hero-bindReferralCode"
+                ),
+                onClick: openBindReferralOnlyModal,
+                children: t("affiliate.newReferralProgram.wereYouReferred")
+              }
+            )
+          ]
         }
       );
     }
     if (isMultiLevelEnabled && !multiLevelRebateInfo?.referral_code) {
-      return /* @__PURE__ */ jsx(Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") });
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          direction: "column",
+          itemAlign: "start",
+          gap: 4,
+          className: "oui-w-full",
+          children: [
+            /* @__PURE__ */ jsx(Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") }),
+            boundReferralCode ? /* @__PURE__ */ jsx(Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
+              code: boundReferralCode
+            }) }) : null
+          ]
+        }
+      );
     }
     return "";
   };