Add client referral bonus manager flow

2026-04-04 14:59:02 +07:00
parent ad1f6b8a35
commit 540418c1dc
7 changed files with 262 additions and 15 deletions
--- a/app/composables/graphql/generated.ts
+++ b/app/composables/graphql/generated.ts
@@ -134,7 +134,9 @@ export type CreateMyDeliveryAddressInput = {
 };

 export type CreateReferralInput = {
+  bonusPercent: Scalars['Float']['input'];
  refereeUserId: Scalars['ID']['input'];
+  referrerUserId: Scalars['ID']['input'];
 };

 export enum Decision {
@@ -185,6 +187,22 @@ export type ManagerBonusBalance = {
  userId: Scalars['ID']['output'];
 };

+export type ManagerReferralLink = {
+  __typename?: 'ManagerReferralLink';
+  bonusPercent: Scalars['Float']['output'];
+  createdAt: Scalars['DateTime']['output'];
+  createdById: Scalars['ID']['output'];
+  id: Scalars['ID']['output'];
+  refereeCompanyName?: Maybe<Scalars['String']['output']>;
+  refereeEmail: Scalars['String']['output'];
+  refereeId: Scalars['ID']['output'];
+  refereeName: Scalars['String']['output'];
+  referrerCompanyName?: Maybe<Scalars['String']['output']>;
+  referrerEmail: Scalars['String']['output'];
+  referrerId: Scalars['ID']['output'];
+  referrerName: Scalars['String']['output'];
+};
+
 export type ManagerUser = {
  __typename?: 'ManagerUser';
  companyName?: Maybe<Scalars['String']['output']>;
@@ -526,6 +544,7 @@ export type Query = {
  managerBonusBalances: Array<ManagerBonusBalance>;
  managerNotificationHistory: Array<NotificationHistoryItem>;
  managerOrders: Array<Order>;
+  managerReferralLinks: Array<ManagerReferralLink>;
  managerUsers: Array<ManagerUser>;
  managerWithdrawalRequests: Array<ManagerWithdrawalRequest>;
  me?: Maybe<User>;
@@ -582,7 +601,9 @@ export type ReadyOrderItemInput = {

 export type ReferralLink = {
  __typename?: 'ReferralLink';
+  bonusPercent: Scalars['Float']['output'];
  createdAt: Scalars['DateTime']['output'];
+  createdById: Scalars['ID']['output'];
  id: Scalars['ID']['output'];
  refereeId: Scalars['ID']['output'];
  referrerId: Scalars['ID']['output'];
@@ -839,7 +860,7 @@ export type CreateReferralMutationVariables = Exact<{
 }>;


-export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdAt: any } };
+export type CreateReferralMutation = { __typename?: 'Mutation', createReferral: { __typename?: 'ReferralLink', id: string, referrerId: string, refereeId: string, createdById: string, bonusPercent: number, createdAt: any } };

 export type ManagerBonusBalancesQueryVariables = Exact<{ [key: string]: never; }>;

@@ -862,6 +883,11 @@ export type ManagerOrdersQueryVariables = Exact<{

 export type ManagerOrdersQuery = { __typename?: 'Query', managerOrders: Array<{ __typename?: 'Order', id: string, code: string, status: OrderStatus, kind: OrderKind, customerId: string, deliveryAddress?: string | null, deliveryTerms?: string | null, deliveryFee?: number | null, totalPrice?: number | null, createdAt: any, items: Array<{ __typename?: 'OrderItem', id: string, productName: string, quantity: number, unitPrice?: number | null, lineTotal?: number | null }> }> };

+export type ManagerReferralLinksQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ManagerReferralLinksQuery = { __typename?: 'Query', managerReferralLinks: Array<{ __typename?: 'ManagerReferralLink', id: string, referrerId: string, referrerName: string, referrerEmail: string, referrerCompanyName?: string | null, refereeId: string, refereeName: string, refereeEmail: string, refereeCompanyName?: string | null, createdById: string, bonusPercent: number, createdAt: any }> };
+
 export type ManagerUsersDetailQueryVariables = Exact<{ [key: string]: never; }>;


@@ -870,7 +896,7 @@ export type ManagerUsersDetailQuery = { __typename?: 'Query', managerUsers: Arra
 export type ManagerUsersQueryVariables = Exact<{ [key: string]: never; }>;


-export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, fullName: string, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };
+export type ManagerUsersQuery = { __typename?: 'Query', managerUsers: Array<{ __typename?: 'ManagerUser', id: string, email: string, fullName: string, role: UserRole, companyName?: string | null, telegramConnection?: { __typename?: 'MessengerConnection', id: string, type: MessengerType, channelId: string, displayName?: string | null, username?: string | null, avatarAvailable: boolean } | null }> };

 export type ManagerWithdrawalRequestsQueryVariables = Exact<{
  status?: InputMaybe<WithdrawalStatus>;
@@ -1625,6 +1651,8 @@ export const CreateReferralDocument = gql`
    id
    referrerId
    refereeId
+    createdById
+    bonusPercent
    createdAt
  }
 }
@@ -1763,6 +1791,44 @@ export function useManagerOrdersLazyQuery(variables: ManagerOrdersQueryVariables
  return VueApolloComposable.useLazyQuery<ManagerOrdersQuery, ManagerOrdersQueryVariables>(ManagerOrdersDocument, variables, options);
 }
 export type ManagerOrdersQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerOrdersQuery, ManagerOrdersQueryVariables>;
+export const ManagerReferralLinksDocument = gql`
+    query ManagerReferralLinks {
+  managerReferralLinks {
+    id
+    referrerId
+    referrerName
+    referrerEmail
+    referrerCompanyName
+    refereeId
+    refereeName
+    refereeEmail
+    refereeCompanyName
+    createdById
+    bonusPercent
+    createdAt
+  }
+}
+    `;
+
+/**
+ * __useManagerReferralLinksQuery__
+ *
+ * To run a query within a Vue component, call `useManagerReferralLinksQuery` and pass it any options that fit your needs.
+ * When your component renders, `useManagerReferralLinksQuery` returns an object from Apollo Client that contains result, loading and error properties
+ * you can use to render your UI.
+ *
+ * @param options that will be passed into the query, supported options are listed on: https://v4.apollo.vuejs.org/guide-composable/query.html#options;
+ *
+ * @example
+ * const { result, loading, error } = useManagerReferralLinksQuery();
+ */
+export function useManagerReferralLinksQuery(options: VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> = {}) {
+  return VueApolloComposable.useQuery<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>(ManagerReferralLinksDocument, {}, options);
+}
+export function useManagerReferralLinksLazyQuery(options: VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>> = {}) {
+  return VueApolloComposable.useLazyQuery<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>(ManagerReferralLinksDocument, {}, options);
+}
+export type ManagerReferralLinksQueryCompositionFunctionResult = VueApolloComposable.UseQueryReturn<ManagerReferralLinksQuery, ManagerReferralLinksQueryVariables>;
 export const ManagerUsersDetailDocument = gql`
    query ManagerUsersDetail {
  managerUsers {
@@ -1809,7 +1875,10 @@ export const ManagerUsersDocument = gql`
    query ManagerUsers {
  managerUsers {
    id
+    email
    fullName
+    role
+    companyName
    telegramConnection {
      id
      type
--- a/app/pages/bonus-system/index.vue
+++ b/app/pages/bonus-system/index.vue
@@ -92,6 +92,12 @@ const filteredWithdrawals = computed(() => {
      title="Бонусы"
      :search-placeholder="activeTab === 'balances' ? 'Пользователь, email или сумма' : 'Пользователь, сумма или статус'"
    >
+      <template #controls>
+        <NuxtLink to="/bonus-system/referrals/new" class="btn btn-primary border-0">
+          Добавить связь
+        </NuxtLink>
+      </template>
+
      <template #tabs>
        <div class="tabs tabs-boxed w-fit bg-white">
          <button
--- a/app/pages/bonus-system/referrals/new.vue
+++ b/app/pages/bonus-system/referrals/new.vue
@@ -1,24 +1,81 @@
 <script setup lang="ts">
-import { useMutation } from '@vue/apollo-composable';
-import { CreateReferralDocument } from '~/composables/graphql/generated';
+import { useMutation, useQuery } from '@vue/apollo-composable';
+import {
+  CreateReferralDocument,
+  ManagerReferralLinksDocument,
+  ManagerUsersDocument,
+  type ManagerReferralLinksQuery,
+  type ManagerUsersQuery,
+} from '~/composables/graphql/generated';

 definePageMeta({
  middleware: ['manager-only'],
 });

+type ManagerUserItem = ManagerUsersQuery['managerUsers'][number];
+type ManagerReferralLinkItem = ManagerReferralLinksQuery['managerReferralLinks'][number];
+
+const referrerUserId = ref('');
 const refereeUserId = ref('');
+const bonusPercent = ref(5);
 const createdReferralId = ref('');
+const errorMessage = ref('');
+const usersQuery = useQuery(ManagerUsersDocument);
+const linksQuery = useQuery(ManagerReferralLinksDocument);
 const createReferralMutation = useMutation(CreateReferralDocument);

+const clientOptions = computed<ManagerUserItem[]>(() => (
+  (usersQuery.result.value?.managerUsers ?? [])
+    .filter((user) => user.role === 'CLIENT')
+    .slice()
+    .sort((left, right) => left.fullName.localeCompare(right.fullName, 'ru'))
+));
+
+const referralLinks = computed<ManagerReferralLinkItem[]>(() => (
+  linksQuery.result.value?.managerReferralLinks ?? []
+));
+
+function userOptionLabel(user: ManagerUserItem) {
+  return [user.fullName, user.companyName || user.email]
+    .filter(Boolean)
+    .join(' • ');
+}
+
 async function createReferral() {
  createdReferralId.value = '';
-  const response = await createReferralMutation.mutate({
-    input: {
-      refereeUserId: refereeUserId.value,
-    },
-  });
+  errorMessage.value = '';

-  createdReferralId.value = response?.data?.createReferral.id ?? '';
+  if (!referrerUserId.value || !refereeUserId.value) {
+    errorMessage.value = 'Выберите обоих клиентов для связки.';
+    return;
+  }
+
+  if (referrerUserId.value === refereeUserId.value) {
+    errorMessage.value = 'Нельзя связать клиента с самим собой.';
+    return;
+  }
+
+  const normalizedBonusPercent = Number(bonusPercent.value);
+  if (!Number.isFinite(normalizedBonusPercent) || normalizedBonusPercent <= 0 || normalizedBonusPercent > 100) {
+    errorMessage.value = 'Укажите процент бонуса от 0.01 до 100.';
+    return;
+  }
+
+  try {
+    const response = await createReferralMutation.mutate({
+      input: {
+        referrerUserId: referrerUserId.value,
+        refereeUserId: refereeUserId.value,
+        bonusPercent: normalizedBonusPercent,
+      },
+    });
+
+    createdReferralId.value = response?.data?.createReferral.id ?? '';
+    refereeUserId.value = '';
+    await linksQuery.refetch();
+  } catch (error: any) {
+    errorMessage.value = error?.message || 'Не удалось создать бонусную связку.';
+  }
 }
 </script>

@@ -28,22 +85,96 @@ async function createReferral() {

    <div class="manager-hero">
      <p class="manager-eyebrow">Бонусы</p>
-      <h1 class="manager-title">Создать реферальную связь</h1>
+      <h1 class="manager-title">Создать бонусную связку клиентов</h1>
+      <p class="max-w-2xl text-sm text-[#466653]">
+        Первый клиент получает процент бонуса, когда заказ второго клиента переходит в статус доставленного.
+      </p>
    </div>

-    <div class="surface-card rounded-3xl p-5">
+    <div class="surface-card rounded-3xl p-5 space-y-4">
      <label class="form-control">
-        <span class="label-text">ID приглашенного пользователя</span>
-        <input v-model="refereeUserId" class="input manager-field w-full" placeholder="user id">
+        <span class="label-text">Клиент, который получает бонус</span>
+        <select v-model="referrerUserId" class="select manager-field w-full">
+          <option value="">Выберите клиента</option>
+          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+            {{ userOptionLabel(user) }}
+          </option>
+        </select>
+      </label>
+
+      <label class="form-control">
+        <span class="label-text">Клиент, с чьих заказов начисляется бонус</span>
+        <select v-model="refereeUserId" class="select manager-field w-full">
+          <option value="">Выберите клиента</option>
+          <option v-for="user in clientOptions" :key="user.id" :value="user.id">
+            {{ userOptionLabel(user) }}
+          </option>
+        </select>
+      </label>
+
+      <label class="form-control">
+        <span class="label-text">Процент бонусной программы</span>
+        <input
+          v-model="bonusPercent"
+          type="number"
+          min="0.01"
+          max="100"
+          step="0.01"
+          class="input manager-field w-full"
+          placeholder="5"
+        >
      </label>

      <div class="mt-4">
-        <button class="btn btn-primary border-0" @click="createReferral">Создать</button>
+        <button
+          class="btn btn-primary border-0"
+          :disabled="createReferralMutation.loading.value || usersQuery.loading.value"
+          @click="createReferral"
+        >
+          {{ createReferralMutation.loading.value ? 'Сохраняем...' : 'Создать связь' }}
+        </button>
      </div>
    </div>

+    <div v-if="errorMessage" class="surface-card rounded-3xl border border-[#d27d7d] bg-[#fff4f4] p-5 text-sm text-[#8b2a2a]">
+      {{ errorMessage }}
+    </div>
+
    <div v-if="createdReferralId" class="surface-card rounded-3xl p-5 text-sm text-[#123824]">
      Создана связь: <span class="font-semibold">{{ createdReferralId }}</span>
    </div>
+
+    <div class="space-y-4">
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="text-lg font-bold text-[#123824]">Текущие бонусные связки</h2>
+        <span class="text-sm text-[#466653]">{{ referralLinks.length }}</span>
+      </div>
+
+      <div v-if="linksQuery.loading.value" class="manager-empty-state">
+        Загружаем связки...
+      </div>
+      <div v-else-if="referralLinks.length === 0" class="manager-empty-state">
+        Бонусных связок пока нет.
+      </div>
+      <div v-else class="space-y-3">
+        <article
+          v-for="link in referralLinks"
+          :key="link.id"
+          class="surface-card rounded-3xl p-5"
+        >
+          <div class="space-y-2">
+            <p class="text-sm font-semibold text-[#123824]">
+              {{ link.referrerName }} получает {{ link.bonusPercent }}% с заказов {{ link.refereeName }}
+            </p>
+            <p class="text-sm text-[#466653]">
+              {{ link.referrerCompanyName || link.referrerEmail }} → {{ link.refereeCompanyName || link.refereeEmail }}
+            </p>
+            <p class="text-xs text-[#5c7b69]">
+              Создано {{ new Date(link.createdAt).toLocaleString() }}
+            </p>
+          </div>
+        </article>
+      </div>
+    </div>
  </section>
 </template>