@orderly.network/affiliate 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/index.d.mts

@@ -53,6 +53,7 @@ declare const useMultiLevelReferralData: () => {
     isMultiLevelEnabled: boolean;
     isMultiLevelReferralUnlocked: boolean | undefined;
     multiLevelRebateInfoMutate: _orderly_network_hooks.KeyedMutator<_orderly_network_types.API.Referral.MultiLevelRebateInfo>;
+    maxRebateRateMutate: _orderly_network_hooks.KeyedMutator<_orderly_network_types.API.Referral.MaxRebateRate>;
     isLoading: boolean;
 };
 type MultiLevelReferralData = ReturnType<typeof useMultiLevelReferralData>;

package/dist/index.d.ts

@@ -53,6 +53,7 @@ declare const useMultiLevelReferralData: () => {
     isMultiLevelEnabled: boolean;
     isMultiLevelReferralUnlocked: boolean | undefined;
     multiLevelRebateInfoMutate: _orderly_network_hooks.KeyedMutator<_orderly_network_types.API.Referral.MultiLevelRebateInfo>;
+    maxRebateRateMutate: _orderly_network_hooks.KeyedMutator<_orderly_network_types.API.Referral.MaxRebateRate>;
     isLoading: boolean;
 };
 type MultiLevelReferralData = ReturnType<typeof useMultiLevelReferralData>;

package/dist/index.js

@@ -78,7 +78,11 @@ var useMultiLevelStatistics = (time_range) => {
 // src/hooks/useMultiLevelReferralData.ts
 var useMultiLevelReferralData = () => {
   const { data: volumePrerequisite, isLoading: volumePrerequisiteLoading } = useVolumePrerequisite();
-  const { data: maxRebateRateRes, isLoading: maxRebateRateLoading } = useMaxRebateRate();
+  const {
+    data: maxRebateRateRes,
+    mutate: maxRebateRateMutate,
+    isLoading: maxRebateRateLoading
+  } = useMaxRebateRate();
   const {
     data: multiLevelRebateInfoRes,
     mutate: multiLevelRebateInfoMutate,
@@ -108,6 +112,7 @@ var useMultiLevelReferralData = () => {
     isMultiLevelEnabled,
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
+    maxRebateRateMutate,
     isLoading
   };
 };
@@ -156,6 +161,7 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateMutate,
     isLoading: isMultiLevelLoading
   } = useMultiLevelReferralData();
   const [showHome, setShowHome] = react.useState(isLoading);
@@ -199,10 +205,12 @@ var ReferralProvider = (props) => {
     }
   }, [isAffiliate, isTrader]);
   const memoMutate = hooks.useMemoizedFn(() => {
-    volumeStatisticsMutate();
-    dailyVolumeMutate();
-    referralInfoMutate();
-    generateCodeMutate();
+    return Promise.allSettled([
+      volumeStatisticsMutate(),
+      dailyVolumeMutate(),
+      referralInfoMutate(),
+      generateCodeMutate()
+    ]);
   });
   react.useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -265,7 +273,8 @@ var ReferralProvider = (props) => {
       isMultiLevelEnabled,
       isMultiLevelReferralUnlocked,
       multiLevelRebateInfoMutate,
-      maxRebateRate
+      maxRebateRate,
+      maxRebateRateMutate
     };
   }, [
     becomeAnAffiliateUrl,
@@ -296,7 +305,8 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
-    isMultiLevelLoading
+    isMultiLevelLoading,
+    maxRebateRateMutate
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(ReferralContext.Provider, { value: memoizedValue, children });
 };
@@ -417,6 +427,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var useReferralCode = () => {
+  const [doBindReferralCode, { isMutating: isBindMutating }] = hooks.useMutation("/v1/referral/bind");
   const [doCreateReferralCode, { isMutating: isCreateMutating }] = hooks.useMutation(
     "/v1/referral/multi_level/claim_code"
   );
@@ -428,6 +439,9 @@ var useReferralCode = () => {
   const createReferralCode = async (params) => {
     return doCreateReferralCode(params);
   };
+  const bindReferralCode = async (params) => {
+    return doBindReferralCode(params);
+  };
   const editReferralCode = async (params) => {
     return doEditReferralCode(params);
   };
@@ -437,8 +451,9 @@ var useReferralCode = () => {
   const resetRebateRate = async (params) => {
     return doResetRebateRate(params);
   };
-  const isMutating = isCreateMutating || isEditMutating || isUpdateRebateRateMutating || isResetRebateRateMutating;
+  const isMutating = isBindMutating || isCreateMutating || isEditMutating || isUpdateRebateRateMutating || isResetRebateRateMutating;
   return {
+    bindReferralCode,
     createReferralCode,
     editReferralCode,
     updateRebateRate,
@@ -448,11 +463,25 @@ 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 } = i18n.useTranslation();
+  const isBind = type === "bind" /* Bind */;
   const [newCode, setNewCode] = react.useState(referralCode || "");
+  const [bindCodeInput, setBindCodeInput] = react.useState("");
   const [isReview, setIsReview] = react.useState(false);
+  const [skipBinding, setSkipBinding] = react.useState(false);
+  const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = react.useState(false);
+  const formattedBindCode = react.useMemo(
+    () => formatReferralCodeInput(bindCodeInput),
+    [bindCodeInput]
+  );
+  const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = hooks.useCheckReferralCode(
+    isBind && formattedBindCode.length >= 4 ? formattedBindCode : void 0
+  );
   const maxRebatePercentage = react.useMemo(() => {
     return new utils.Decimal(maxRebateRate).mul(100).toNumber();
   }, [maxRebateRate]);
@@ -467,7 +496,20 @@ 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,
@@ -479,15 +521,22 @@ var useReferralCodeFormScript = (options) => {
       0,
       new utils.Decimal(maxRebatePercentage).sub(referrerRebatePercentage).toNumber()
     );
-  }, [referrerRebatePercentage]);
+  }, [maxRebatePercentage, referrerRebatePercentage]);
   const codeChanged = react.useMemo(() => {
     return newCode !== referralCode;
   }, [newCode, referralCode]);
   const rateChanged = react.useMemo(() => {
     return new utils.Decimal(referrerRebatePercentage).toNumber() !== new utils.Decimal(referrerRebateRate || 0).mul(100).toNumber();
   }, [referrerRebatePercentage, referrerRebateRate, newCode]);
+  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) => {
-    ui.toast.error(err?.message || t("common.somethingWentWrong"));
+    ui.toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
   };
   const handleResult = (res) => {
     if (res.success) {
@@ -495,7 +544,7 @@ var useReferralCodeFormScript = (options) => {
       ui.toast.success(t("affiliate.confirmChanges.success"));
       options.close?.();
     } else {
-      ui.toast.error(res.message);
+      ui.toast.error(res.message || t("common.somethingWentWrong"));
     }
   };
   const onEdit = async () => {
@@ -550,8 +599,27 @@ 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 });
+      ui.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;
@@ -567,19 +635,28 @@ var useReferralCodeFormScript = (options) => {
         break;
     }
   };
-  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
+  const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged || isBind && !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
+  const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
   return {
+    type,
     onClick,
     maxRebatePercentage,
     referrerRebatePercentage,
     setReferrerRebatePercentage,
     refereeRebatePercentage,
-    isMutating,
+    confirmButtonLoading,
     newCode,
     setNewCode,
+    bindCodeInput,
+    setBindCodeInput,
+    formattedBindCode,
     isReview,
     buttonDisabled,
-    onReset
+    onReset,
+    skipBinding,
+    setSkipBinding,
+    isBindCodeExist,
+    isBindCodeChecking
   };
 };
 var GiftIcon = (props) => {
@@ -607,12 +684,27 @@ var GiftIcon = (props) => {
 var ReferralCodeForm = (props) => {
   const { type, isReview } = props;
   const { t } = i18n.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 } = react.useMemo(() => {
     switch (type) {
+      case "bind" /* Bind */:
+        return {
+          title: t("affiliate.referralCode.bind.modal.title"),
+          description: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.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"),
@@ -658,15 +750,53 @@ var ReferralCodeForm = (props) => {
     }
   );
   const descriptionView = /* @__PURE__ */ jsxRuntime.jsx(WarningBox, { children: description });
+  const bindCodeInvalid = isBind && !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
+  const bindReferralCodeInput = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
     ReferralCodeInput,
     {
       value: props.newCode,
       onChange: props.setNewCode,
       autoFocus: props.focusField === "referralCode" /* ReferralCode */,
-      disabled: isReview || hasBoundReferee
+      disabled: isReview || hasBoundReferee,
+      label: t("affiliate.referralCode.editCodeModal.label")
     }
   );
+  const bindCheckbox = isBind && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Checkbox,
+      {
+        color: "white",
+        id: "oui-checkbox-skipReferralBinding",
+        checked: props.skipBinding,
+        onCheckedChange: (checked) => {
+          props.setSkipBinding(checked);
+          if (checked) {
+            props.setBindCodeInput("");
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("affiliate.commissionConfiguration") }),
     !isReview && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", intensity: 54, children: [
@@ -719,8 +849,8 @@ var ReferralCodeForm = (props) => {
       {
         fullWidth: true,
         onClick: props.onClick,
-        disabled: props.buttonDisabled || props.isMutating,
-        loading: props.isMutating,
+        disabled: props.buttonDisabled || props.confirmButtonLoading,
+        loading: props.confirmButtonLoading,
         size: "md",
         className: "oui-referralCodeForm-confirm-btn",
         children: buttonText
@@ -729,6 +859,12 @@ var ReferralCodeForm = (props) => {
   ] });
   const renderContent = () => {
     switch (type) {
+      case "bind" /* Bind */:
+        return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
+          bindReferralCodeInput,
+          bindCheckbox,
+          buttons
+        ] });
       case "create" /* Create */:
         return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
           commissionConfiguration,
@@ -774,6 +910,9 @@ var ReferralCodeForm = (props) => {
 var NoCommissionCard = (props) => {
   const { t } = i18n.useTranslation();
   const amount = props.directBonusRebateRate;
+  if (!amount || amount <= 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -788,7 +927,7 @@ var NoCommissionCard = (props) => {
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "between", width: "100%", itemAlign: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("affiliate.noCommissionCard.title") }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "lg", className: "oui-text-primary-light oui-font-semibold", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "lg", className: "oui-font-semibold oui-text-primary-light", children: [
               "+ ",
               amount,
               "%"
@@ -850,7 +989,7 @@ var RebateRateSlider = (props) => {
           GiftIcon,
           {
             size: 16,
-            className: "oui-text-base-contrast oui-mt-[1px]"
+            className: "oui-mt-px oui-text-base-contrast"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -875,14 +1014,14 @@ var RebateRateSlider = (props) => {
   ] });
 };
 var ReferralCodeInput = (props) => {
-  const { t } = i18n.useTranslation();
   const hasSetCursorToEnd = react.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.TextField,
     {
       type: "text",
       fullWidth: true,
-      label: t("affiliate.referralCode.editCodeModal.label"),
+      label: props.label ?? "",
+      placeholder: props.placeholder,
       value: props.value,
       onChange: (e) => {
         props.onChange(e.target.value);
@@ -911,6 +1050,8 @@ var ReferralCodeInput = (props) => {
         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",
@@ -1058,6 +1199,11 @@ var TradingVolumeProgress = (props) => {
     }
   );
 };
+function parseMaxRebateRateFromSettled(result) {
+  if (result.status !== "fulfilled") return void 0;
+  const num = result.value?.max_rebate_rate;
+  return typeof num === "number" ? num : void 0;
+}
 var Hero = () => {
   const { t } = i18n.useTranslation();
   const { state } = hooks.useAccount();
@@ -1066,21 +1212,42 @@ var Hero = () => {
   const {
     isMultiLevelReferralUnlocked,
     isMultiLevelEnabled,
+    isTrader,
     multiLevelRebateInfo,
     multiLevelRebateInfoMutate,
-    maxRebateRate
+    maxRebateRate,
+    maxRebateRateMutate,
+    mutate
   } = useReferralContext();
-  const onCreateReferralCode = () => {
+  const showCreateReferralCodeModal = (maxRateOverride) => {
     ui.modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
-      maxRebateRate,
-      directBonusRebateRate: 10,
-      // Hardcoded value before API is ready
+      maxRebateRate: maxRateOverride ?? maxRebateRate ?? 0,
+      directBonusRebateRate: 0,
       onSuccess: () => {
         multiLevelRebateInfoMutate();
       }
     });
   };
+  const onCreateReferralCode = () => {
+    if (!isTrader) {
+      ui.modal.show(ReferralCodeFormDialogId, {
+        type: "bind" /* Bind */,
+        maxRebateRate,
+        onSuccess: async () => {
+          const results = await Promise.allSettled([
+            maxRebateRateMutate(),
+            multiLevelRebateInfoMutate(),
+            mutate()
+          ]);
+          const latestMaxRebateRate = parseMaxRebateRateFromSettled(results[0]) ?? maxRebateRate;
+          showCreateReferralCodeModal(latestMaxRebateRate);
+        }
+      });
+      return;
+    }
+    showCreateReferralCodeModal();
+  };
   const description = react.useMemo(() => {
     if (wrongNetwork) {
       return t("affiliate.wrongNetwork.description");
@@ -1532,8 +1699,8 @@ var useMultiLevelReferralScript = () => {
     ui.modal.show(ReferralCodeFormDialogId, {
       type: "create" /* Create */,
       maxRebateRate,
-      directBonusRebateRate: 10,
-      // Hardcoded value before API is ready
+      // because there is no multi level code, the /v1/referral/multi_level/rebate_info interface will throw an error, so here set to 0, and hide the extra bonus display when creating multi level code
+      directBonusRebateRate: 0,
       onSuccess: () => {
         multiLevelRebateInfoMutate();
       }
@@ -2978,6 +3145,7 @@ var Summary = (props) => {
             value: statistics.total_rebate,
             direct: statistics.direct_rebate + statistics.direct_bonus_rebate,
             indirect: statistics.indirect_rebate,
+            referredByCode: props.referredByCode,
             classNames: {
               root: "!oui-py-12",
               value: "oui-text-trade-profit",
@@ -3041,7 +3209,7 @@ var SummaryItem = (props) => {
           ui.Text.numeral,
           {
             rule,
-            dp: props.dp,
+            dp,
             size: "3xl",
             prefix: props.prefix,
             placeholder: "--",
@@ -3060,7 +3228,7 @@ var SummaryItem = (props) => {
               ui.Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.direct,
@@ -3078,7 +3246,7 @@ var SummaryItem = (props) => {
               ui.Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.indirect,
@@ -3086,15 +3254,28 @@ var SummaryItem = (props) => {
               }
             )
           ] })
-        ] })
+        ] }),
+        props.referredByCode ? /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Text,
+          {
+            intensity: 54,
+            className: "oui-affiliate-summary-referred-by oui-mt-5 oui-text-base-contrast-54",
+            children: t("affiliate.referredBy", { name: props.referredByCode })
+          }
+        ) : null
       ]
     }
   );
 };
 var useSummaryScript = () => {
   const { t } = i18n.useTranslation();
+  const { referralInfo } = useReferralContext();
   const [period, setPeriod] = react.useState("all_time" /* All */);
   const { data } = useMultiLevelStatistics(period);
+  const referredByCode = react.useMemo(() => {
+    const code = referralInfo?.referee_info?.referer_code?.trim();
+    return code || void 0;
+  }, [referralInfo]);
   const periodTypes = [
     { label: t("common.all"), value: "all_time" /* All */ },
     { label: t("common.select.1d"), value: "1d" /* 1d */ },
@@ -3136,7 +3317,8 @@ var useSummaryScript = () => {
     period,
     periodTypes,
     onPeriodChange,
-    statistics
+    statistics,
+    referredByCode
   };
 };
 var SummaryWidget = () => {