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

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { createContext, useState, useEffect, useRef, useMemo, useContext, useCallback, Fragment as Fragment$1 } from 'react';
-import { useMutation, cleanStringStyle, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useReferralRebateSummary, useLocalStorage, useRefereeRebateSummary, useRefereeInfo, useCheckReferralCode } from '@orderly.network/hooks';
+import { useMutation, cleanStringStyle, useCheckReferralCode, useAccount, usePrivateQuery, noCacheConfig, useDaily, useMemoizedFn, useMediaQuery, useReferralRebateSummary, useLocalStorage, useRefereeRebateSummary, useRefereeInfo } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
 import { AccountStatusEnum, EMPTY_LIST } from '@orderly.network/types';
-import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, useScreen, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, modal, useModal, SimpleDialog, TextField, inputFormatter, Flex, Text, cn, toast, Dialog, DialogContent, DialogTitle, Divider, Input as Input$1, Button, formatAddress, Checkbox, Box, Slider, WarningIcon, Grid, Spinner, Collapsible, CollapsibleContent, Select, Tabs, TabPanel, usePagination, DatePicker, TabsBase, TabsList, TabsTrigger, TabsContent, parseNumber, ListView, CopyIcon, DataTable, useScreen, Statistic, Tooltip, DialogTrigger, DialogHeader, DialogBody } from '@orderly.network/ui';
 import { subDays, format, toDate } from 'date-fns';
 import { Decimal, commify, commifyOptional } from '@orderly.network/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -76,7 +76,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,
@@ -106,6 +110,7 @@ var useMultiLevelReferralData = () => {
     isMultiLevelEnabled,
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
+    maxRebateRateMutate,
     isLoading
   };
 };
@@ -154,6 +159,7 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
+    maxRebateRateMutate,
     isLoading: isMultiLevelLoading
   } = useMultiLevelReferralData();
   const [showHome, setShowHome] = useState(isLoading);
@@ -197,10 +203,12 @@ var ReferralProvider = (props) => {
     }
   }, [isAffiliate, isTrader]);
   const memoMutate = useMemoizedFn(() => {
-    volumeStatisticsMutate();
-    dailyVolumeMutate();
-    referralInfoMutate();
-    generateCodeMutate();
+    return Promise.allSettled([
+      volumeStatisticsMutate(),
+      dailyVolumeMutate(),
+      referralInfoMutate(),
+      generateCodeMutate()
+    ]);
   });
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
@@ -263,7 +271,8 @@ var ReferralProvider = (props) => {
       isMultiLevelEnabled,
       isMultiLevelReferralUnlocked,
       multiLevelRebateInfoMutate,
-      maxRebateRate
+      maxRebateRate,
+      maxRebateRateMutate
     };
   }, [
     becomeAnAffiliateUrl,
@@ -294,7 +303,8 @@ var ReferralProvider = (props) => {
     isMultiLevelReferralUnlocked,
     multiLevelRebateInfoMutate,
     maxRebateRate,
-    isMultiLevelLoading
+    isMultiLevelLoading,
+    maxRebateRateMutate
   ]);
   return /* @__PURE__ */ jsx(ReferralContext.Provider, { value: memoizedValue, children });
 };
@@ -415,6 +425,7 @@ var ChevronIcon = ({ expanded }) => /* @__PURE__ */ jsx(
   }
 );
 var useReferralCode = () => {
+  const [doBindReferralCode, { isMutating: isBindMutating }] = useMutation("/v1/referral/bind");
   const [doCreateReferralCode, { isMutating: isCreateMutating }] = useMutation(
     "/v1/referral/multi_level/claim_code"
   );
@@ -426,6 +437,9 @@ var useReferralCode = () => {
   const createReferralCode = async (params) => {
     return doCreateReferralCode(params);
   };
+  const bindReferralCode = async (params) => {
+    return doBindReferralCode(params);
+  };
   const editReferralCode = async (params) => {
     return doEditReferralCode(params);
   };
@@ -435,8 +449,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,
@@ -446,11 +461,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 } = 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]);
@@ -465,7 +494,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,
@@ -477,15 +519,22 @@ var useReferralCodeFormScript = (options) => {
       0,
       new Decimal(maxRebatePercentage).sub(referrerRebatePercentage).toNumber()
     );
-  }, [referrerRebatePercentage]);
+  }, [maxRebatePercentage, referrerRebatePercentage]);
   const codeChanged = useMemo(() => {
     return newCode !== referralCode;
   }, [newCode, referralCode]);
   const rateChanged = useMemo(() => {
     return new Decimal(referrerRebatePercentage).toNumber() !== new 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) => {
-    toast.error(err?.message || t("common.somethingWentWrong"));
+    toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
   };
   const handleResult = (res) => {
     if (res.success) {
@@ -493,7 +542,7 @@ var useReferralCodeFormScript = (options) => {
       toast.success(t("affiliate.confirmChanges.success"));
       options.close?.();
     } else {
-      toast.error(res.message);
+      toast.error(res.message || t("common.somethingWentWrong"));
     }
   };
   const onEdit = async () => {
@@ -548,8 +597,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 });
+      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;
@@ -565,19 +633,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) => {
@@ -605,12 +682,27 @@ var GiftIcon = (props) => {
 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"),
@@ -656,15 +748,53 @@ 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,
     {
       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__ */ 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: [
@@ -717,8 +847,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
@@ -727,6 +857,12 @@ 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,
@@ -772,6 +908,9 @@ var ReferralCodeForm = (props) => {
 var NoCommissionCard = (props) => {
   const { t } = useTranslation();
   const amount = props.directBonusRebateRate;
+  if (!amount || amount <= 0) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -786,7 +925,7 @@ var NoCommissionCard = (props) => {
         /* @__PURE__ */ jsxs(Flex, { justify: "between", width: "100%", itemAlign: "center", children: [
           /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, children: [
             /* @__PURE__ */ jsx(Text, { size: "2xs", intensity: 54, children: t("affiliate.noCommissionCard.title") }),
-            /* @__PURE__ */ jsxs(Text, { size: "lg", className: "oui-text-primary-light oui-font-semibold", children: [
+            /* @__PURE__ */ jsxs(Text, { size: "lg", className: "oui-font-semibold oui-text-primary-light", children: [
               "+ ",
               amount,
               "%"
@@ -848,7 +987,7 @@ var RebateRateSlider = (props) => {
           GiftIcon,
           {
             size: 16,
-            className: "oui-text-base-contrast oui-mt-[1px]"
+            className: "oui-mt-px oui-text-base-contrast"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -873,14 +1012,14 @@ var RebateRateSlider = (props) => {
   ] });
 };
 var ReferralCodeInput = (props) => {
-  const { t } = useTranslation();
   const hasSetCursorToEnd = useRef(false);
   return /* @__PURE__ */ jsx(
     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);
@@ -909,6 +1048,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",
@@ -1056,6 +1197,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 } = useTranslation();
   const { state } = useAccount();
@@ -1064,21 +1210,42 @@ var Hero = () => {
   const {
     isMultiLevelReferralUnlocked,
     isMultiLevelEnabled,
+    isTrader,
     multiLevelRebateInfo,
     multiLevelRebateInfoMutate,
-    maxRebateRate
+    maxRebateRate,
+    maxRebateRateMutate,
+    mutate
   } = useReferralContext();
-  const onCreateReferralCode = () => {
+  const showCreateReferralCodeModal = (maxRateOverride) => {
     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) {
+      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 = useMemo(() => {
     if (wrongNetwork) {
       return t("affiliate.wrongNetwork.description");
@@ -1530,8 +1697,8 @@ var useMultiLevelReferralScript = () => {
     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();
       }
@@ -2976,6 +3143,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",
@@ -3039,7 +3207,7 @@ var SummaryItem = (props) => {
           Text.numeral,
           {
             rule,
-            dp: props.dp,
+            dp,
             size: "3xl",
             prefix: props.prefix,
             placeholder: "--",
@@ -3058,7 +3226,7 @@ var SummaryItem = (props) => {
               Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.direct,
@@ -3076,7 +3244,7 @@ var SummaryItem = (props) => {
               Text.numeral,
               {
                 rule,
-                dp: props.dp,
+                dp,
                 prefix: props.prefix,
                 intensity: 54,
                 className: props.classNames?.indirect,
@@ -3084,15 +3252,28 @@ var SummaryItem = (props) => {
               }
             )
           ] })
-        ] })
+        ] }),
+        props.referredByCode ? /* @__PURE__ */ jsx(
+          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 } = useTranslation();
+  const { referralInfo } = useReferralContext();
   const [period, setPeriod] = useState("all_time" /* All */);
   const { data } = useMultiLevelStatistics(period);
+  const referredByCode = 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 */ },
@@ -3134,7 +3315,8 @@ var useSummaryScript = () => {
     period,
     periodTypes,
     onPeriodChange,
-    statistics
+    statistics,
+    referredByCode
   };
 };
 var SummaryWidget = () => {