masoodafar-web
27a3ea76c5
- Introduced a new section in the Profile hub for viewing invitees, enhancing user engagement and tracking of referrals. - Added buttons for accessing the invitees page from the Profile index, improving navigation. - Enhanced the AuthDialog and PhoneVerifyForm components to support inviter mobile input, allowing users to specify who referred them. - Updated RouteConstants to include a new route for invitees, ensuring proper navigation within the application. These changes improve the user experience by facilitating better referral tracking and enhancing the profile management features.
213 lines
13 KiB
Plaintext
213 lines
13 KiB
Plaintext
@attribute [Route(RouteConstants.Profile.Index)]
|
|
@inject ISnackbar Snackbar
|
|
|
|
<PageTitle>پروفایل کاربری</PageTitle>
|
|
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
|
<MudGrid Spacing="4">
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
1. PROFILE HEADER — Modern gradient card
|
|
═══════════════════════════════════════════════ *@
|
|
<MudItem xs="12">
|
|
<MudPaper Elevation="0" Class="dash-header-card pa-5 pa-md-6 rounded-xl">
|
|
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center" Class="flex-wrap">
|
|
<MudAvatar Size="Size.Large" Class="dash-avatar">
|
|
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
|
|
</MudAvatar>
|
|
<MudStack Spacing="0" Class="flex-grow-1">
|
|
<MudText Typo="Typo.h5" Class="dash-hero-name">
|
|
@($"{_userProfile.FirstName} {_userProfile.LastName}")
|
|
</MudText>
|
|
<MudText Typo="Typo.body2" Class="dash-hero-sub">
|
|
@(_userProfile.Mobile)
|
|
</MudText>
|
|
<MudText Typo="Typo.caption" Class="dash-hero-hint">
|
|
عضو از @(_userProfile.MobileVerifiedAt?.ToDateTime().MiladiToJalali())
|
|
</MudText>
|
|
</MudStack>
|
|
<MudButton Variant="Variant.Filled"
|
|
Class="rounded-pill dash-hero-btn"
|
|
Href="https://dayadiamond.ir/"
|
|
StartIcon="@Icons.Material.Filled.Diamond">
|
|
سامانه دایا
|
|
</MudButton>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
2. WALLET STRIP — Compact inline stats
|
|
═══════════════════════════════════════════════ *@
|
|
<MudItem xs="12">
|
|
<MudPaper Elevation="1" Class="pa-2 pa-md-4 rounded-xl">
|
|
<MudStack Row="true" Justify="Justify.SpaceAround" AlignItems="AlignItems.Center" Class="flex-wrap wallet-strip">
|
|
<div class="wallet-strip-item">
|
|
<div class="wallet-strip-label">
|
|
<MudIcon Icon="@Icons.Material.Outlined.CreditCard" Size="Size.Small" Color="Color.Primary" />
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">اصلی</MudText>
|
|
</div>
|
|
<MudText Typo="Typo.subtitle2" Color="Color.Primary">@_walletCredit</MudText>
|
|
</div>
|
|
<MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
|
|
<div class="wallet-strip-item">
|
|
<div class="wallet-strip-label">
|
|
<MudIcon Icon="@Icons.Material.Outlined.Discount" Size="Size.Small" Color="Color.Success" />
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">کیف اعتباری</MudText>
|
|
</div>
|
|
<MudText Typo="Typo.subtitle2" Color="Color.Success">@_walletDiscount</MudText>
|
|
</div>
|
|
<MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
|
|
<div class="wallet-strip-item">
|
|
<div class="wallet-strip-label">
|
|
<MudIcon Icon="@Icons.Material.Outlined.Groups" Size="Size.Small" Color="Color.Warning" />
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">پاداش های دریافتی</MudText>
|
|
</div>
|
|
<MudText Typo="Typo.subtitle2" Color="Color.Warning">@_walletNetwork</MudText>
|
|
</div>
|
|
<MudDivider Vertical="true" FlexItem="true" Class="d-none d-sm-flex" />
|
|
<MudButton Variant="Variant.Text" Color="Color.Primary" Size="Size.Small"
|
|
Href="@RouteConstants.Profile.Wallet" EndIcon="@Icons.Material.Filled.ArrowBack">
|
|
کیف پول
|
|
</MudButton>
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudItem>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
3. REFERRAL SECTION
|
|
═══════════════════════════════════════════════ *@
|
|
<MudItem xs="12">
|
|
@if (CanShowReferralLink)
|
|
{
|
|
<MudPaper Elevation="1" Class="pa-5 rounded-xl">
|
|
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-3">
|
|
<MudIcon Icon="@Icons.Material.Filled.Share" Color="Color.Primary" />
|
|
<MudText Typo="Typo.h6">کد دعوت شما</MudText>
|
|
<MudSpacer />
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
Size="Size.Small"
|
|
Class="rounded-pill"
|
|
StartIcon="@Icons.Material.Filled.Share"
|
|
OnClick="ShareReferralCode">
|
|
اشتراکگذاری
|
|
</MudButton>
|
|
</MudStack>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-3">
|
|
این کد را با دوستان خود به اشتراک بگذارید تا از خریدهای آنها پاداش دریافت کنید.
|
|
</MudText>
|
|
<MudTextField @bind-Value="_userProfile.ReferralCode"
|
|
Label="کد دعوت"
|
|
Variant="Variant.Outlined"
|
|
ReadOnly="true"
|
|
Adornment="Adornment.End"
|
|
AdornmentIcon="@Icons.Material.Filled.ContentCopy"
|
|
OnAdornmentClick="CopyReferralCode"
|
|
Class="rounded-lg" />
|
|
@if (!string.IsNullOrWhiteSpace(_copyMessage))
|
|
{
|
|
<MudText Typo="Typo.caption" Color="Color.Success" Class="mt-2">@(_copyMessage)</MudText>
|
|
}
|
|
<MudButton Variant="Variant.Text"
|
|
Color="Color.Primary"
|
|
Class="mt-3"
|
|
Href="@RouteConstants.Profile.Invitees"
|
|
StartIcon="@Icons.Material.Filled.GroupAdd">
|
|
مشاهده دعوتشدگان من
|
|
</MudButton>
|
|
</MudPaper>
|
|
}
|
|
else
|
|
{
|
|
<MudPaper Elevation="0" Class="pa-6 rounded-xl text-center" Style="border:2px dashed var(--mud-palette-primary); background:rgba(99,102,241,.04);">
|
|
<MudIcon Icon="@Icons.Material.Filled.Lock" Size="Size.Large" Color="Color.Primary" Class="mb-2" Style="font-size:2.5rem;" />
|
|
<MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-2">
|
|
لینک دعوت شما هنوز فعال نشده است
|
|
</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-1" Style="max-width:560px; margin:0 auto;">
|
|
برای فعالسازی لینک دعوت، ابتدا یکی از <strong>پکیجها</strong> را تهیه کنید و سپس در <strong>باشگاه مشتریان</strong> عضو شوید.
|
|
</MudText>
|
|
<MudButton Variant="Variant.Outlined"
|
|
Color="Color.Primary"
|
|
Class="mt-3"
|
|
Href="@RouteConstants.Profile.Invitees"
|
|
StartIcon="@Icons.Material.Filled.GroupAdd">
|
|
دعوتشدگان من
|
|
</MudButton>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary mb-4" Style="max-width:560px; margin:0 auto;">
|
|
از مزایای ویژه عضویت بهرهمند شده و با فعالیت در زمینه توسعه فروشگاهها پاداش دریافت کنید.
|
|
</MudText>
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Primary"
|
|
Size="Size.Large"
|
|
Class="rounded-pill"
|
|
StartIcon="@Icons.Material.Filled.ShoppingCart"
|
|
OnClick="OpenPurchaseOptions">
|
|
تهیه پکیج
|
|
</MudButton>
|
|
</MudPaper>
|
|
}
|
|
</MudItem>
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
3.5 LATEST BLOG BANNER
|
|
═══════════════════════════════════════════════ *@
|
|
@if (_latestPost is not null)
|
|
{
|
|
<MudItem xs="12">
|
|
<MudLink Href="@($"/blog/{_latestPost.Slug}")" Underline="Underline.None">
|
|
<MudPaper Elevation="1" Class="rounded-xl dash-blog-banner overflow-hidden">
|
|
<MudStack Row="true" AlignItems="AlignItems.Center" Class="pa-2" Spacing="2">
|
|
@if (!string.IsNullOrWhiteSpace(_latestPost.ThumbnailUrl))
|
|
{
|
|
<div style="width:72px;height:72px;min-width:72px;border-radius:10px;overflow:hidden;">
|
|
<AppImage Path="@_latestPost.ThumbnailUrl" Alt="@_latestPost.Title"
|
|
ObjectFit="ObjectFit.Cover" Style="width:100%;height:100%;" />
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<MudAvatar Rounded="true" Size="Size.Large" Color="Color.Primary" Variant="Variant.Outlined">
|
|
<MudIcon Icon="@Icons.Material.Outlined.Article" />
|
|
</MudAvatar>
|
|
}
|
|
<MudStack Spacing="0" Class="flex-grow-1" Style="min-width:0;">
|
|
<MudText Typo="Typo.caption" Color="Color.Primary" Style="font-size:0.7rem;">جدیدترین مطلب</MudText>
|
|
<MudText Typo="Typo.body2" Class="dash-blog-title" Style="font-size:0.85rem;">@_latestPost.Title</MudText>
|
|
</MudStack>
|
|
<MudIcon Icon="@Icons.Material.Filled.ArrowBack" Color="Color.Primary" Size="Size.Small" />
|
|
</MudStack>
|
|
</MudPaper>
|
|
</MudLink>
|
|
</MudItem>
|
|
}
|
|
|
|
@* ═══════════════════════════════════════════════
|
|
4. QUICK ACCESS TILES — Modern grid
|
|
═══════════════════════════════════════════════ *@
|
|
<MudItem xs="12">
|
|
<MudText Typo="Typo.h6" Class="mb-3">دسترسی سریع</MudText>
|
|
<MudGrid Spacing="3" Justify="Justify.Center">
|
|
@foreach (var tile in _dashTiles)
|
|
{
|
|
<MudItem xs="6" sm="4" md="3">
|
|
<MudLink Href="@tile.Href" Underline="Underline.None" Class="tile-link">
|
|
<MudPaper Elevation="0" Class="pa-4 rounded-xl dash-tile text-center">
|
|
<MudAvatar Size="Size.Medium" Class="mx-auto mb-2" Style="@tile.AvatarStyle">
|
|
<MudIcon Icon="@tile.Icon" Size="Size.Medium" />
|
|
</MudAvatar>
|
|
<MudText Typo="Typo.subtitle2">@tile.Title</MudText>
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">@tile.Subtitle</MudText>
|
|
</MudPaper>
|
|
</MudLink>
|
|
</MudItem>
|
|
}
|
|
</MudGrid>
|
|
</MudItem>
|
|
|
|
</MudGrid>
|
|
</MudContainer>
|
|
|
|
|