austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

feat: group referral bonus display by tariff

Browse Source
This commit is contained in:
3252a8
2026-05-29 22:55:01 +03:00
parent 6803c7801f
commit 7fe8e676cd
8 changed files with 511 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/webapp.css
+83
View File
@@ -1537,6 +1537,89 @@ a {
font-size: 12px;
}
.referral-tariff-dropdown {
display: grid;
min-width: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-sheen-soft);
}
.referral-tariff-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
min-width: 0;
padding: 10px 11px;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
.referral-tariff-summary::-webkit-details-marker {
display: none;
}
.referral-tariff-copy {
display: grid;
min-width: 0;
gap: 3px;
}
.referral-tariff-copy strong {
overflow: hidden;
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.referral-tariff-copy small {
color: var(--muted);
font-size: 12px;
}
.referral-tariff-dropdown summary:hover .premium-server-help-icon,
.referral-tariff-dropdown[open] .premium-server-help-icon {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.referral-tariff-details {
display: grid;
grid-template-rows: 0fr;
padding: 0 8px;
opacity: 0;
transform: translateY(-2px);
transform-origin: top;
transition:
grid-template-rows 0.22s ease,
padding 0.22s ease,
opacity 0.18s ease,
transform 0.22s ease;
}
.referral-tariff-details > div {
min-height: 0;
overflow: hidden;
}
.referral-tariff-detail-list {
display: grid;
gap: 8px;
}
.referral-tariff-dropdown[open] .referral-tariff-details {
grid-template-rows: 1fr;
padding: 0 8px 8px;
opacity: 1;
transform: translateY(0);
}
.referral-bonus-row-nested {
background: var(--surface);
}
.settings-profile {
display: flex;
align-items: center;
frontend/src/webapp/screens/InviteScreen.svelte
+72 -13
View File
@@ -1,5 +1,5 @@
<script>
import { Copy, Gift, Ticket, TriangleAlert } from "$components/ui/icons.js";
import { CircleQuestionMark, Copy, Gift, Ticket, TriangleAlert } from "$components/ui/icons.js";
import { Tooltip } from "$components/ui/primitives.js";
import Button from "$components/ui/button.svelte";
@@ -21,6 +21,17 @@
export let clearPromoFieldError = () => {};
export let copyText = () => {};
export let t = (key) => key;
$: tariffBonusSummaries = referralBonusDetails.filter((bonus) => Array.isArray(bonus.details));
$: periodBonusDetails = referralBonusDetails.filter((bonus) => !Array.isArray(bonus.details));
$: usesTariffBonusSummaries = tariffBonusSummaries.length > 0;
function daysRange(minDays, maxDays) {
return t("wa_referral_bonus_range_days", {
min: Number(minDays || 0),
max: Number(maxDays || 0),
});
}
</script>
<main class="content with-nav">
@@ -55,20 +66,68 @@
<small>{t("wa_referral_bonus_friend_days", { days: referralWelcomeBonusDays })}</small>
</div>
{/if}
{#if referralBonusDetails.length}
{#if usesTariffBonusSummaries}
<p class="referral-bonus-intro">{t("wa_referral_bonus_depends_on_tariff")}</p>
{:else if periodBonusDetails.length}
<p class="referral-bonus-intro">{t("wa_referral_bonus_paid_intro")}</p>
{/if}
{#each referralBonusDetails as bonus, index (bonus.id || `${bonus.tariff_key || "legacy"}:${bonus.months || index}`)}
<div class="referral-bonus-row">
<strong>{bonus.title || `${bonus.months || "?"}`}</strong>
<small
>{t("wa_referral_bonus_you_days", { days: Number(bonus.inviter_days || 0) })}</small
>
<small
>{t("wa_referral_bonus_friend_days", { days: Number(bonus.friend_days || 0) })}</small
>
</div>
{/each}
{#if usesTariffBonusSummaries}
{#each tariffBonusSummaries as tariffBonus, index (tariffBonus.id || `tariff:${tariffBonus.tariff_key || index}`)}
<details class="referral-tariff-dropdown">
<summary class="referral-tariff-summary">
<span class="referral-tariff-copy">
<strong>{tariffBonus.title || tariffBonus.tariff_name}</strong>
<small>
{t("wa_referral_bonus_you_range", {
range: daysRange(tariffBonus.inviter_min_days, tariffBonus.inviter_max_days),
})}
</small>
<small>
{t("wa_referral_bonus_friend_range", {
range: daysRange(tariffBonus.friend_min_days, tariffBonus.friend_max_days),
})}
</small>
</span>
<CircleQuestionMark class="premium-server-help-icon" size={16} />
</summary>
<div class="referral-tariff-details">
<div class="referral-tariff-detail-list">
{#each tariffBonus.details || [] as bonus, detailIndex (bonus.id || `${tariffBonus.tariff_key || index}:${bonus.months || detailIndex}`)}
<div class="referral-bonus-row referral-bonus-row-nested">
<strong>{bonus.title || `${bonus.months || "?"}`}</strong>
<small
>{t("wa_referral_bonus_you_days", {
days: Number(bonus.inviter_days || 0),
})}</small
>
<small
>{t("wa_referral_bonus_friend_days", {
days: Number(bonus.friend_days || 0),
})}</small
>
</div>
{/each}
</div>
</div>
</details>
{/each}
{:else}
{#each periodBonusDetails as bonus, index (bonus.id || `${bonus.tariff_key || "legacy"}:${bonus.months || index}`)}
<div class="referral-bonus-row">
<strong>{bonus.title || `${bonus.months || "?"}`}</strong>
<small
>{t("wa_referral_bonus_you_days", {
days: Number(bonus.inviter_days || 0),
})}</small
>
<small
>{t("wa_referral_bonus_friend_days", {
days: Number(bonus.friend_days || 0),
})}</small
>
</div>
{/each}
{/if}
</div>
{:else}
<StatusMessage>{t("wa_referral_bonus_not_configured")}</StatusMessage>