masoodafar-web
c243b59113
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 6m48s
- Updated the Checkout and CheckoutSummary components to allow users to add new addresses directly from the interface, improving accessibility and user experience. - Introduced dialog functionality for adding and editing addresses, streamlining the address management process. - Removed the calculation of order PV from the OrderDetail component, simplifying the order details view and improving performance. These changes enhance the usability of the checkout process by making address management more intuitive and efficient.
147 lines
8.9 KiB
Plaintext
147 lines
8.9 KiB
Plaintext
@using CMSMicroservice.Protobuf.Protos.UserOrder
|
|
@using CMSMicroservice.Protobuf.Protos
|
|
@attribute [Route(RouteConstants.Store.CheckoutSummary)]
|
|
|
|
<PageTitle>خلاصه خرید</PageTitle>
|
|
|
|
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
|
<PageHeader Title="خلاصه خرید" BackHref="@RouteConstants.Store.Cart" />
|
|
<MudGrid Spacing="3">
|
|
<MudItem xs="12" md="8">
|
|
<MudPaper Elevation="2" Class="pa-4 rounded-lg mb-3">
|
|
<MudText Typo="Typo.h6" Class="mb-2">انتخاب آدرس</MudText>
|
|
|
|
@if (_loadingAddresses)
|
|
{
|
|
<MudStack AlignItems="AlignItems.Center" Class="py-4">
|
|
<MudProgressCircular Indeterminate="true" Color="Color.Primary" />
|
|
<MudText Class="mt-2 mud-text-secondary">در حال بارگذاری آدرسها...</MudText>
|
|
</MudStack>
|
|
}
|
|
else if (_addresses.Count == 0)
|
|
{
|
|
<MudAlert Severity="Severity.Warning">
|
|
هیچ آدرسی ثبت نشده است. میتوانید همینجا آدرس جدید اضافه کنید.
|
|
</MudAlert>
|
|
<MudButton Class="mt-2" Variant="Variant.Outlined" Color="Color.Primary"
|
|
StartIcon="@Icons.Material.Filled.Add"
|
|
OnClick="OpenAddAddressDialog">افزودن آدرس</MudButton>
|
|
}
|
|
else
|
|
{
|
|
<MudStack Spacing="1">
|
|
@foreach (var address in _addresses)
|
|
{
|
|
<MudPaper Outlined="@(_selectedAddress?.Id != address.Id)"
|
|
Elevation="@(_selectedAddress?.Id == address.Id ? 2 : 0)"
|
|
Class="pa-3 rounded-xl cursor-pointer"
|
|
Style="@(_selectedAddress?.Id == address.Id ? "border: 2px solid var(--mud-palette-primary);" : "")"
|
|
@onclick="() => _selectedAddress = address">
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
|
<MudStack>
|
|
<MudText Typo="Typo.subtitle2">@address.Title</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@address.Address</MudText>
|
|
</MudStack>
|
|
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
|
|
@if (address.IsDefault)
|
|
{
|
|
<MudChip T="string" Color="Color.Success" Variant="Variant.Outlined" Size="Size.Small">پیشفرض</MudChip>
|
|
}
|
|
<span @onclick:stopPropagation="true">
|
|
<MudIconButton Icon="@Icons.Material.Filled.Edit"
|
|
Size="Size.Small"
|
|
Color="Color.Primary"
|
|
aria-label="ویرایش آدرس"
|
|
OnClick="@(() => OpenEditAddressDialog(address))" />
|
|
</span>
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudPaper>
|
|
}
|
|
<MudButton Class="mt-2" Variant="Variant.Text" Color="Color.Primary"
|
|
StartIcon="@Icons.Material.Filled.Add"
|
|
OnClick="OpenAddAddressDialog">افزودن آدرس جدید</MudButton>
|
|
</MudStack>
|
|
}
|
|
</MudPaper>
|
|
|
|
<MudPaper Elevation="2" Class="pa-4 rounded-lg">
|
|
<MudText Typo="Typo.h6" Class="mb-2">روش پرداخت</MudText>
|
|
<MudRadioGroup T="PaymentMethod" @bind-SelectedOption="_payment" Color="Color.Primary">
|
|
<MudRadio T="PaymentMethod" Option="@PaymentMethod.Wallet" Color="Color.Primary">
|
|
@* <MudText></MudText> *@
|
|
@* <MudText>20000</MudText> *@
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
|
<MudText Typo="Typo.subtitle1">کیف پول <b></b></MudText>
|
|
<MudText Typo="Typo.subtitle2"> @(FormatPrice(walletBalance)) <b></b></MudText>
|
|
|
|
</MudStack>
|
|
</MudRadio>
|
|
</MudRadioGroup>
|
|
<MudAlert Severity="Severity.Info" Variant="Variant.Outlined">در حال حاضر تنها پرداخت از طریق کیف پول فعال است.</MudAlert>
|
|
</MudPaper>
|
|
</MudItem>
|
|
|
|
<MudItem xs="12" md="4">
|
|
<MudPaper Elevation="2" Class="pa-4 rounded-lg">
|
|
<MudText Typo="Typo.h6" Class="mb-2">خلاصه سفارش</MudText>
|
|
@if (Cart.Items.Count == 0)
|
|
{
|
|
<MudAlert Severity="Severity.Info">سبد خرید شما خالی است.</MudAlert>
|
|
}
|
|
else
|
|
{
|
|
<MudList T="CartItem" Dense="true">
|
|
@foreach (var item in Cart.Items)
|
|
{
|
|
<MudListItem T="CartItem">
|
|
|
|
<MudListItemText>
|
|
<MudStack Spacing="1">
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
|
<AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title"
|
|
ImgWidth="48" ImgHeight="48" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
|
|
<MudText Typo="Typo.subtitle2">@item.Title</MudText>
|
|
<MudText Typo="Typo.subtitle2">@FormatPrice(item.LineTotal)</MudText>
|
|
</MudStack>
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">تعداد: @item.Quantity</MudText>
|
|
@if (item.Discount > 0)
|
|
{
|
|
<MudText Typo="Typo.caption" Class="mud-text-secondary">@($"تخفیف: {item.Discount}%")</MudText>
|
|
}
|
|
</MudStack>
|
|
</MudStack>
|
|
</MudListItemText>
|
|
</MudListItem>
|
|
}
|
|
</MudList>
|
|
<MudDivider Class="my-2" />
|
|
|
|
@* نمایش جزئیات مالی با مالیات *@
|
|
<MudStack Spacing="1">
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
|
<MudText Typo="Typo.body2">جمع کالاها:</MudText>
|
|
<MudText Typo="Typo.body2">@FormatPrice(Cart.Total)</MudText>
|
|
</MudStack>
|
|
@if (VAT.IsEnabled)
|
|
{
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">مالیات بر ارزش افزوده (@VAT.VatPercentage%):</MudText>
|
|
<MudText Typo="Typo.body2" Class="mud-text-secondary">@FormatPrice(CalculateVAT())</MudText>
|
|
</MudStack>
|
|
}
|
|
<MudDivider Class="my-1" />
|
|
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
|
<MudText Typo="Typo.subtitle1" Class="fw-bold">مبلغ قابل پرداخت:</MudText>
|
|
<MudText Typo="Typo.subtitle1" Color="Color.Primary" Class="fw-bold">@FormatPrice(VAT.AddVAT(Cart.Total))</MudText>
|
|
</MudStack>
|
|
</MudStack>
|
|
|
|
<MudButton Disabled="@(!CanPlaceOrder)" Class="mt-3 w-100-mobile" Variant="Variant.Filled" Color="Color.Primary" OnClick="PlaceOrder" StartIcon="@Icons.Material.Filled.CheckCircle">ثبت سفارش</MudButton>
|
|
}
|
|
</MudPaper>
|
|
</MudItem>
|
|
</MudGrid>
|
|
</MudContainer>
|