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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -463,25 +463,11 @@ var useReferralCode = () => {
463
463
  };
464
464
 
465
465
  // src/pages/multiLevel/affiliate/referralCodeForm/referralCodeForm.script.ts
466
- function formatReferralCodeInput(raw) {
467
- return String(raw).replace(/[a-z]/g, (c) => c.toUpperCase()).replace(/[^A-Z0-9]/g, "");
468
- }
469
466
  var useReferralCodeFormScript = (options) => {
470
467
  const { type, referralCode, maxRebateRate, referrerRebateRate, accountId } = options;
471
468
  const { t } = i18n.useTranslation();
472
- const isBind = type === "bind" /* Bind */;
473
469
  const [newCode, setNewCode] = react.useState(referralCode || "");
474
- const [bindCodeInput, setBindCodeInput] = react.useState("");
475
470
  const [isReview, setIsReview] = react.useState(false);
476
- const [skipBinding, setSkipBinding] = react.useState(false);
477
- const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = react.useState(false);
478
- const formattedBindCode = react.useMemo(
479
- () => formatReferralCodeInput(bindCodeInput),
480
- [bindCodeInput]
481
- );
482
- const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = hooks.useCheckReferralCode(
483
- isBind && formattedBindCode.length >= 4 ? formattedBindCode : void 0
484
- );
485
471
  const maxRebatePercentage = react.useMemo(() => {
486
472
  return new utils.Decimal(maxRebateRate).mul(100).toNumber();
487
473
  }, [maxRebateRate]);
@@ -496,20 +482,7 @@ var useReferralCodeFormScript = (options) => {
496
482
  return 0;
497
483
  }
498
484
  );
499
- const applyCreateDefaults = () => {
500
- setReferrerRebatePercentage(Math.ceil(maxRebatePercentage / 2));
501
- };
502
- const runBindOnSuccessThenApplyDefaults = async () => {
503
- setIsAwaitingPostSuccess(true);
504
- try {
505
- await Promise.resolve(options.onSuccess?.());
506
- } finally {
507
- setIsAwaitingPostSuccess(false);
508
- }
509
- applyCreateDefaults();
510
- };
511
485
  const {
512
- bindReferralCode,
513
486
  createReferralCode,
514
487
  editReferralCode,
515
488
  updateRebateRate,
@@ -599,27 +572,8 @@ var useReferralCodeFormScript = (options) => {
599
572
  handleError(err);
600
573
  }
601
574
  };
602
- const onBind = async () => {
603
- if (skipBinding) {
604
- await runBindOnSuccessThenApplyDefaults();
605
- return;
606
- }
607
- if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
608
- return;
609
- }
610
- try {
611
- await bindReferralCode({ referral_code: formattedBindCode });
612
- ui.toast.success(t("affiliate.referralCode.bound"));
613
- await runBindOnSuccessThenApplyDefaults();
614
- } catch (err) {
615
- handleError(err);
616
- }
617
- };
618
575
  const onClick = () => {
619
576
  switch (type) {
620
- case "bind" /* Bind */:
621
- onBind();
622
- break;
623
577
  case "create" /* Create */:
624
578
  onCreate();
625
579
  break;
@@ -635,8 +589,8 @@ var useReferralCodeFormScript = (options) => {
635
589
  break;
636
590
  }
637
591
  };
638
- const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged || isBind && !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
639
- const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
592
+ const buttonDisabled = type === "edit" /* Edit */ && !codeChanged && !rateChanged;
593
+ const confirmButtonLoading = isMutating;
640
594
  return {
641
595
  type,
642
596
  onClick,
@@ -647,16 +601,9 @@ var useReferralCodeFormScript = (options) => {
647
601
  confirmButtonLoading,
648
602
  newCode,
649
603
  setNewCode,
650
- bindCodeInput,
651
- setBindCodeInput,
652
- formattedBindCode,
653
604
  isReview,
654
605
  buttonDisabled,
655
- onReset,
656
- skipBinding,
657
- setSkipBinding,
658
- isBindCodeExist,
659
- isBindCodeChecking
606
+ onReset
660
607
  };
661
608
  };
662
609
  var GiftIcon = (props) => {
@@ -681,30 +628,77 @@ var GiftIcon = (props) => {
681
628
  }
682
629
  );
683
630
  };
631
+ var WarningBox = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
632
+ ui.Flex,
633
+ {
634
+ className: "oui-bg-warning/10",
635
+ justify: "start",
636
+ itemAlign: "start",
637
+ gap: 1,
638
+ r: "lg",
639
+ p: 3,
640
+ children: [
641
+ /* @__PURE__ */ jsxRuntime.jsx(ui.WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
642
+ typeof props.children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children: props.children }) : props.children
643
+ ]
644
+ }
645
+ );
646
+ var ReferralCodeInput = (props) => {
647
+ const hasSetCursorToEnd = react.useRef(false);
648
+ return /* @__PURE__ */ jsxRuntime.jsx(
649
+ ui.TextField,
650
+ {
651
+ type: "text",
652
+ fullWidth: true,
653
+ label: props.label ?? "",
654
+ placeholder: props.placeholder,
655
+ value: props.value,
656
+ onChange: (e) => {
657
+ props.onChange(e.target.value);
658
+ },
659
+ onFocus: (e) => {
660
+ if (props.autoFocus && !hasSetCursorToEnd.current) {
661
+ hasSetCursorToEnd.current = true;
662
+ const input = e.target;
663
+ const len = input.value.length;
664
+ requestAnimationFrame(() => {
665
+ input.setSelectionRange(len, len);
666
+ });
667
+ }
668
+ },
669
+ formatters: [
670
+ ui.inputFormatter.createRegexInputFormatter((value) => {
671
+ return String(value).replace(
672
+ /[a-z]/g,
673
+ (char) => char.toUpperCase()
674
+ );
675
+ }),
676
+ ui.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
677
+ ],
678
+ className: "oui-w-full",
679
+ classNames: {
680
+ label: "oui-text-base-contrast-54 oui-text-xs",
681
+ input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
682
+ },
683
+ helpText: props.helpText,
684
+ color: props.color,
685
+ maxLength: 10,
686
+ minLength: 4,
687
+ autoComplete: "off",
688
+ disabled: props.disabled,
689
+ autoFocus: props.autoFocus
690
+ }
691
+ );
692
+ };
684
693
  var ReferralCodeForm = (props) => {
685
694
  const { type, isReview } = props;
686
695
  const { t } = i18n.useTranslation();
687
- const isBind = type === "bind" /* Bind */;
688
696
  const isReset = type === "reset" /* Reset */;
689
697
  const hasBoundReferee = !!props.directInvites && props.directInvites > 0;
690
698
  const isEditingRefereeRebateRate = !!props.accountId;
691
699
  const noCommissionAvailable = props.maxRebateRate === 0;
692
700
  const { title, description, buttonText } = react.useMemo(() => {
693
701
  switch (type) {
694
- case "bind" /* Bind */:
695
- return {
696
- title: t("affiliate.referralCode.bind.modal.title"),
697
- description: /* @__PURE__ */ jsxRuntime.jsx(
698
- ui.Text,
699
- {
700
- size: "2xs",
701
- intensity: 54,
702
- className: "oui-leading-[18px] oui-text-warning-darken",
703
- children: t("affiliate.referralCode.bind.modal.description")
704
- }
705
- ),
706
- buttonText: t("common.confirm")
707
- };
708
702
  case "create" /* Create */:
709
703
  return {
710
704
  title: t("affiliate.referralCode.create.modal.title"),
@@ -750,19 +744,6 @@ var ReferralCodeForm = (props) => {
750
744
  }
751
745
  );
752
746
  const descriptionView = /* @__PURE__ */ jsxRuntime.jsx(WarningBox, { children: description });
753
- const bindCodeInvalid = isBind && !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
754
- const bindReferralCodeInput = /* @__PURE__ */ jsxRuntime.jsx(
755
- ReferralCodeInput,
756
- {
757
- value: props.bindCodeInput,
758
- onChange: props.setBindCodeInput,
759
- autoFocus: true,
760
- disabled: props.skipBinding,
761
- placeholder: t("affiliate.referralCode.bind.input.placeholder"),
762
- helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
763
- color: bindCodeInvalid ? "danger" : void 0
764
- }
765
- );
766
747
  const referralCodeInput = /* @__PURE__ */ jsxRuntime.jsx(
767
748
  ReferralCodeInput,
768
749
  {
@@ -773,30 +754,6 @@ var ReferralCodeForm = (props) => {
773
754
  label: t("affiliate.referralCode.editCodeModal.label")
774
755
  }
775
756
  );
776
- const bindCheckbox = isBind && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
777
- /* @__PURE__ */ jsxRuntime.jsx(
778
- ui.Checkbox,
779
- {
780
- color: "white",
781
- id: "oui-checkbox-skipReferralBinding",
782
- checked: props.skipBinding,
783
- onCheckedChange: (checked) => {
784
- props.setSkipBinding(checked);
785
- if (checked) {
786
- props.setBindCodeInput("");
787
- }
788
- }
789
- }
790
- ),
791
- /* @__PURE__ */ jsxRuntime.jsx(
792
- "label",
793
- {
794
- htmlFor: "oui-checkbox-skipReferralBinding",
795
- className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
796
- children: t("affiliate.referralCode.bind.skip")
797
- }
798
- )
799
- ] });
800
757
  const commissionConfiguration = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
801
758
  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, children: t("affiliate.commissionConfiguration") }),
802
759
  !isReview && /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "2xs", intensity: 54, children: [
@@ -859,12 +816,6 @@ var ReferralCodeForm = (props) => {
859
816
  ] });
860
817
  const renderContent = () => {
861
818
  switch (type) {
862
- case "bind" /* Bind */:
863
- return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
864
- bindReferralCodeInput,
865
- bindCheckbox,
866
- buttons
867
- ] });
868
819
  case "create" /* Create */:
869
820
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 2, children: [
870
821
  commissionConfiguration,
@@ -1013,74 +964,6 @@ var RebateRateSlider = (props) => {
1013
964
  ] })
1014
965
  ] });
1015
966
  };
1016
- var ReferralCodeInput = (props) => {
1017
- const hasSetCursorToEnd = react.useRef(false);
1018
- return /* @__PURE__ */ jsxRuntime.jsx(
1019
- ui.TextField,
1020
- {
1021
- type: "text",
1022
- fullWidth: true,
1023
- label: props.label ?? "",
1024
- placeholder: props.placeholder,
1025
- value: props.value,
1026
- onChange: (e) => {
1027
- props.onChange(e.target.value);
1028
- },
1029
- onFocus: (e) => {
1030
- if (props.autoFocus && !hasSetCursorToEnd.current) {
1031
- hasSetCursorToEnd.current = true;
1032
- const input = e.target;
1033
- const len = input.value.length;
1034
- requestAnimationFrame(() => {
1035
- input.setSelectionRange(len, len);
1036
- });
1037
- }
1038
- },
1039
- formatters: [
1040
- ui.inputFormatter.createRegexInputFormatter((value) => {
1041
- return String(value).replace(
1042
- /[a-z]/g,
1043
- (char) => char.toUpperCase()
1044
- );
1045
- }),
1046
- ui.inputFormatter.createRegexInputFormatter(/[^A-Z0-9]/g)
1047
- ],
1048
- className: "oui-w-full",
1049
- classNames: {
1050
- label: "oui-text-base-contrast-54 oui-text-xs",
1051
- input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
1052
- },
1053
- helpText: props.helpText,
1054
- color: props.color,
1055
- maxLength: 10,
1056
- minLength: 4,
1057
- autoComplete: "off",
1058
- disabled: props.disabled,
1059
- autoFocus: props.autoFocus
1060
- }
1061
- );
1062
- };
1063
- var WarningBox = (props) => {
1064
- const { children } = props;
1065
- if (typeof children === "string") {
1066
- return /* @__PURE__ */ jsxRuntime.jsxs(
1067
- ui.Flex,
1068
- {
1069
- className: "oui-bg-warning/10",
1070
- justify: "start",
1071
- itemAlign: "start",
1072
- gap: 1,
1073
- r: "lg",
1074
- p: 3,
1075
- children: [
1076
- /* @__PURE__ */ jsxRuntime.jsx(ui.WarningIcon, { className: "oui-shrink-0 oui-text-warning" }),
1077
- /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "2xs", intensity: 54, className: "oui-text-warning", children })
1078
- ]
1079
- }
1080
- );
1081
- }
1082
- return children;
1083
- };
1084
967
  var ReferralCodeFormWidget = (props) => {
1085
968
  const state = useReferralCodeFormScript(props);
1086
969
  return /* @__PURE__ */ jsxRuntime.jsx(ReferralCodeForm, { ...state, ...props });
@@ -1097,6 +980,190 @@ ui.registerSimpleDialog(ReferralCodeFormDialogId, ReferralCodeFormWidget, {
1097
980
  }
1098
981
  });
1099
982
  ui.registerSimpleSheet(ReferralCodeFormSheetId, ReferralCodeFormWidget);
983
+ function formatReferralCodeInput(raw) {
984
+ return String(raw).replace(/[a-z]/g, (c) => c.toUpperCase()).replace(/[^A-Z0-9]/g, "");
985
+ }
986
+ var useBindReferralCodeScript = (options) => {
987
+ const { t } = i18n.useTranslation();
988
+ const [bindCodeInput, setBindCodeInput] = react.useState("");
989
+ const [skipBinding, setSkipBinding] = react.useState(false);
990
+ const [isAwaitingPostSuccess, setIsAwaitingPostSuccess] = react.useState(false);
991
+ const formattedBindCode = react.useMemo(
992
+ () => formatReferralCodeInput(bindCodeInput),
993
+ [bindCodeInput]
994
+ );
995
+ const { isExist: isBindCodeExist, isLoading: isBindCodeChecking } = hooks.useCheckReferralCode(
996
+ formattedBindCode.length >= 4 ? formattedBindCode : void 0
997
+ );
998
+ const { bindReferralCode, isMutating } = useReferralCode();
999
+ const getErrorMessage = (err) => {
1000
+ if (typeof err === "object" && err !== null && "message" in err) {
1001
+ const msg = err.message;
1002
+ return typeof msg === "string" ? msg : void 0;
1003
+ }
1004
+ return void 0;
1005
+ };
1006
+ const handleError = (err) => {
1007
+ ui.toast.error(getErrorMessage(err) || t("common.somethingWentWrong"));
1008
+ };
1009
+ const runAfterSuccess = async (payload) => {
1010
+ setIsAwaitingPostSuccess(true);
1011
+ try {
1012
+ await Promise.resolve(options.onSuccess?.(payload));
1013
+ } finally {
1014
+ setIsAwaitingPostSuccess(false);
1015
+ }
1016
+ options.close?.();
1017
+ };
1018
+ const onConfirm = async () => {
1019
+ if (skipBinding) {
1020
+ await runAfterSuccess({ skipped: true });
1021
+ return;
1022
+ }
1023
+ if (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist) {
1024
+ return;
1025
+ }
1026
+ try {
1027
+ await bindReferralCode({ referral_code: formattedBindCode });
1028
+ ui.toast.success(t("affiliate.referralCode.bound"));
1029
+ await runAfterSuccess({ skipped: false });
1030
+ } catch (err) {
1031
+ handleError(err);
1032
+ }
1033
+ };
1034
+ const buttonDisabled = !skipBinding && (formattedBindCode.length < 4 || formattedBindCode.length > 10 || isBindCodeChecking || !isBindCodeExist);
1035
+ const confirmButtonLoading = isMutating || isAwaitingPostSuccess;
1036
+ return {
1037
+ bindCodeInput,
1038
+ setBindCodeInput,
1039
+ skipBinding,
1040
+ setSkipBinding,
1041
+ formattedBindCode,
1042
+ isBindCodeExist,
1043
+ isBindCodeChecking,
1044
+ buttonDisabled,
1045
+ confirmButtonLoading,
1046
+ onConfirm
1047
+ };
1048
+ };
1049
+ var BindReferralCode = (props) => {
1050
+ const { t } = i18n.useTranslation();
1051
+ const bindCodeInvalid = !props.skipBinding && props.formattedBindCode.length >= 4 && !props.isBindCodeChecking && props.isBindCodeExist === false;
1052
+ const titleView = /* @__PURE__ */ jsxRuntime.jsxs(
1053
+ ui.Flex,
1054
+ {
1055
+ width: "100%",
1056
+ direction: "column",
1057
+ itemAlign: "start",
1058
+ gap: 3,
1059
+ className: "oui-bindReferralCode-header",
1060
+ children: [
1061
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "base", intensity: 98, children: t("affiliate.referralCode.bind.modal.title") }),
1062
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { intensity: 8, className: "oui-w-full" })
1063
+ ]
1064
+ }
1065
+ );
1066
+ const descriptionView = /* @__PURE__ */ jsxRuntime.jsx(WarningBox, { children: /* @__PURE__ */ jsxRuntime.jsx(
1067
+ ui.Text,
1068
+ {
1069
+ size: "2xs",
1070
+ intensity: 54,
1071
+ className: "oui-leading-[18px] oui-text-warning-darken",
1072
+ children: t("affiliate.referralCode.bind.modal.description")
1073
+ }
1074
+ ) });
1075
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1076
+ ui.Flex,
1077
+ {
1078
+ direction: "column",
1079
+ itemAlign: "start",
1080
+ gap: 6,
1081
+ className: "oui-affiliate-bindReferralCode oui-font-semibold",
1082
+ children: [
1083
+ titleView,
1084
+ descriptionView,
1085
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { width: "100%", direction: "column", itemAlign: "start", gap: 4, children: [
1086
+ /* @__PURE__ */ jsxRuntime.jsx(
1087
+ ReferralCodeInput,
1088
+ {
1089
+ value: props.bindCodeInput,
1090
+ onChange: props.setBindCodeInput,
1091
+ autoFocus: true,
1092
+ disabled: props.skipBinding,
1093
+ placeholder: t("affiliate.referralCode.bind.input.placeholder"),
1094
+ helpText: bindCodeInvalid ? t("affiliate.referralCode.notExist") : void 0,
1095
+ color: bindCodeInvalid ? "danger" : void 0
1096
+ }
1097
+ ),
1098
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-gap-[6px]", children: [
1099
+ /* @__PURE__ */ jsxRuntime.jsx(
1100
+ ui.Checkbox,
1101
+ {
1102
+ color: "white",
1103
+ id: "oui-checkbox-bindReferralCode-skip",
1104
+ checked: props.skipBinding,
1105
+ onCheckedChange: (checked) => {
1106
+ props.setSkipBinding(checked);
1107
+ if (checked) {
1108
+ props.setBindCodeInput("");
1109
+ }
1110
+ }
1111
+ }
1112
+ ),
1113
+ /* @__PURE__ */ jsxRuntime.jsx(
1114
+ "label",
1115
+ {
1116
+ htmlFor: "oui-checkbox-bindReferralCode-skip",
1117
+ className: "oui-text-2xs oui-font-normal oui-text-base-contrast-54",
1118
+ children: t("affiliate.referralCode.bind.skip")
1119
+ }
1120
+ )
1121
+ ] }),
1122
+ /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", gap: 2, width: "100%", mt: 0, pt: 5, children: [
1123
+ /* @__PURE__ */ jsxRuntime.jsx(
1124
+ ui.Button,
1125
+ {
1126
+ variant: "contained",
1127
+ color: "gray",
1128
+ fullWidth: true,
1129
+ onClick: props.close,
1130
+ size: "md",
1131
+ className: "oui-bindReferralCode-cancel-btn",
1132
+ children: t("common.cancel")
1133
+ }
1134
+ ),
1135
+ /* @__PURE__ */ jsxRuntime.jsx(
1136
+ ui.Button,
1137
+ {
1138
+ fullWidth: true,
1139
+ onClick: props.onConfirm,
1140
+ disabled: props.buttonDisabled || props.confirmButtonLoading,
1141
+ loading: props.confirmButtonLoading,
1142
+ size: "md",
1143
+ className: "oui-bindReferralCode-confirm-btn",
1144
+ children: t("common.confirm")
1145
+ }
1146
+ )
1147
+ ] })
1148
+ ] })
1149
+ ]
1150
+ }
1151
+ );
1152
+ };
1153
+ var BindReferralCodeWidget = (props) => {
1154
+ const state = useBindReferralCodeScript(props);
1155
+ return /* @__PURE__ */ jsxRuntime.jsx(BindReferralCode, { ...state, ...props });
1156
+ };
1157
+
1158
+ // src/pages/multiLevel/components/bindReferralCode/modal.ts
1159
+ var BindReferralCodeDialogId = "BindReferralCodeDialogId";
1160
+ ui.registerSimpleDialog(BindReferralCodeDialogId, BindReferralCodeWidget, {
1161
+ size: "sm",
1162
+ classNames: {
1163
+ content: "oui-border oui-border-line-6",
1164
+ body: "!oui-pt-3"
1165
+ }
1166
+ });
1100
1167
  var TradingVolumeProgress = (props) => {
1101
1168
  const { t } = i18n.useTranslation();
1102
1169
  const { classNames } = props;
@@ -1217,8 +1284,18 @@ var Hero = () => {
1217
1284
  multiLevelRebateInfoMutate,
1218
1285
  maxRebateRate,
1219
1286
  maxRebateRateMutate,
1220
- mutate
1287
+ mutate,
1288
+ referralInfo
1221
1289
  } = useReferralContext();
1290
+ const boundReferralCode = referralInfo?.referee_info?.referer_code?.trim() ?? "";
1291
+ const openBindReferralOnlyModal = () => {
1292
+ ui.modal.show(BindReferralCodeDialogId, {
1293
+ onSuccess: async ({ skipped }) => {
1294
+ if (skipped) return;
1295
+ await Promise.allSettled([multiLevelRebateInfoMutate?.(), mutate?.()]);
1296
+ }
1297
+ });
1298
+ };
1222
1299
  const showCreateReferralCodeModal = (maxRateOverride) => {
1223
1300
  ui.modal.show(ReferralCodeFormDialogId, {
1224
1301
  type: "create" /* Create */,
@@ -1231,10 +1308,12 @@ var Hero = () => {
1231
1308
  };
1232
1309
  const onCreateReferralCode = () => {
1233
1310
  if (!isTrader) {
1234
- ui.modal.show(ReferralCodeFormDialogId, {
1235
- type: "bind" /* Bind */,
1236
- maxRebateRate,
1237
- onSuccess: async () => {
1311
+ ui.modal.show(BindReferralCodeDialogId, {
1312
+ onSuccess: async ({ skipped }) => {
1313
+ if (skipped) {
1314
+ showCreateReferralCodeModal();
1315
+ return;
1316
+ }
1238
1317
  const results = await Promise.allSettled([
1239
1318
  maxRebateRateMutate(),
1240
1319
  multiLevelRebateInfoMutate(),
@@ -1262,24 +1341,64 @@ var Hero = () => {
1262
1341
  return "";
1263
1342
  }
1264
1343
  return t("affiliate.newReferralProgram.description");
1265
- }, [t, wrongNetwork, status]);
1344
+ }, [t, wrongNetwork, status, isMultiLevelReferralUnlocked]);
1266
1345
  const renderContent = () => {
1267
1346
  if (!isMultiLevelReferralUnlocked) {
1268
- return /* @__PURE__ */ jsxRuntime.jsx(
1269
- TradingVolumeProgress,
1347
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1348
+ ui.Flex,
1270
1349
  {
1271
- classNames: {
1272
- root: "oui-items-start",
1273
- description: "!oui-text-start"
1274
- },
1275
- buttonProps: {
1276
- size: "xl"
1277
- }
1350
+ direction: "column",
1351
+ itemAlign: "start",
1352
+ gap: 4,
1353
+ className: "oui-w-full",
1354
+ children: [
1355
+ /* @__PURE__ */ jsxRuntime.jsx(
1356
+ TradingVolumeProgress,
1357
+ {
1358
+ classNames: {
1359
+ root: "oui-items-start",
1360
+ description: "!oui-text-start"
1361
+ },
1362
+ buttonProps: {
1363
+ size: "xl"
1364
+ }
1365
+ }
1366
+ ),
1367
+ boundReferralCode ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
1368
+ code: boundReferralCode
1369
+ }) }) : /* @__PURE__ */ jsxRuntime.jsx(
1370
+ "button",
1371
+ {
1372
+ type: "button",
1373
+ className: ui.cn(
1374
+ "oui-cursor-pointer oui-border-none oui-bg-transparent oui-p-0",
1375
+ "oui-text-start oui-text-sm oui-font-normal oui-text-base-contrast-54 oui-underline oui-underline-offset-2",
1376
+ "oui-affiliate-landing-hero-bindReferralCode"
1377
+ ),
1378
+ onClick: openBindReferralOnlyModal,
1379
+ children: t("affiliate.newReferralProgram.wereYouReferred")
1380
+ }
1381
+ )
1382
+ ]
1278
1383
  }
1279
1384
  );
1280
1385
  }
1281
1386
  if (isMultiLevelEnabled && !multiLevelRebateInfo?.referral_code) {
1282
- return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") });
1387
+ return /* @__PURE__ */ jsxRuntime.jsxs(
1388
+ ui.Flex,
1389
+ {
1390
+ direction: "column",
1391
+ itemAlign: "start",
1392
+ gap: 4,
1393
+ className: "oui-w-full",
1394
+ children: [
1395
+ /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "lg", className: "oui-px-4", onClick: onCreateReferralCode, children: t("affiliate.referralCode.create") }),
1396
+ boundReferralCode ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", intensity: 54, className: "oui-leading-normal", children: t("affiliate.newReferralProgram.referredBy", {
1397
+ code: boundReferralCode
1398
+ }) }) : null
1399
+ ]
1400
+ }
1401
+ );
1283
1402
  }
1284
1403
  return "";
1285
1404
  };