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.
160 lines
9.4 KiB
Plaintext
160 lines
9.4 KiB
Plaintext
@using CMSMicroservice.Protobuf.Protos.UserAddress
|
||
@attribute [Route(RouteConstants.DiscountStore.Checkout)]
|
||
|
||
<PageTitle>تسویه حساب فروشگاه اعتباری</PageTitle>
|
||
|
||
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
|
||
<PageHeader Title="تسویه حساب اعتباری" BackHref="@RouteConstants.DiscountStore.Cart" />
|
||
<MudGrid Spacing="3">
|
||
<!-- Left Column: Address + Payment Settings -->
|
||
<MudItem xs="12" md="8">
|
||
<!-- Address Selection -->
|
||
<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>
|
||
|
||
<!-- Notes -->
|
||
<MudPaper Elevation="2" Class="pa-4 rounded-lg">
|
||
<MudText Typo="Typo.h6" Class="mb-2">توضیحات سفارش</MudText>
|
||
<MudTextField T="string" @bind-Value="_notes" Lines="3"
|
||
Placeholder="توضیحات اختیاری..."
|
||
Variant="Variant.Outlined" />
|
||
</MudPaper>
|
||
</MudItem>
|
||
|
||
<!-- Right Column: Order Summary -->
|
||
<MudItem xs="12" md="4">
|
||
<MudPaper Elevation="2" Class="pa-4 rounded-lg" Style="position:sticky; top:80px;">
|
||
<MudText Typo="Typo.h6" Class="mb-2">خلاصه سفارش</MudText>
|
||
|
||
@if (DiscountCart.Items.Count == 0)
|
||
{
|
||
<MudAlert Severity="Severity.Info">سبد خرید شما خالی است.</MudAlert>
|
||
}
|
||
else
|
||
{
|
||
<MudList T="string" Dense="true">
|
||
@foreach (var item in DiscountCart.Items)
|
||
{
|
||
<MudListItem T="string">
|
||
<MudListItemText>
|
||
<MudStack Spacing="1">
|
||
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
||
<AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
|
||
ImgWidth="40" ImgHeight="40" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
|
||
<MudText Typo="Typo.subtitle2" Style="flex:1; margin:0 8px;">@item.Title</MudText>
|
||
<MudText Typo="Typo.subtitle2">@FormatPrice(item.FinalPrice)</MudText>
|
||
</MudStack>
|
||
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
|
||
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
||
@item.Quantity × @FormatPrice(item.UnitPrice)
|
||
</MudText>
|
||
@if (item.MaxDiscountPercent > 0)
|
||
{
|
||
<MudText Typo="Typo.caption" Color="Color.Error">@item.MaxDiscountPercent% اعتبار</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(DiscountCart.TotalPrice) تومان</MudText>
|
||
</MudStack>
|
||
|
||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||
<MudText Typo="Typo.body2" Color="Color.Success">اعتبار از کیف اعتباری:</MudText>
|
||
<MudText Typo="Typo.body2" Color="Color.Success">@FormatPrice(DiscountCart.TotalDiscount)- تومان</MudText>
|
||
</MudStack>
|
||
|
||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||
<MudText Typo="Typo.body2">مبلغ پس از اعتبار:</MudText>
|
||
<MudText Typo="Typo.body2">@FormatPrice(NetGatewayAmount) تومان</MudText>
|
||
</MudStack>
|
||
|
||
<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(VatAmount)+ تومان</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(FinalGatewayAmount) تومان
|
||
</MudText>
|
||
</MudStack>
|
||
</MudStack>
|
||
|
||
<MudButton Disabled="@(!CanPlaceOrder || _placing)" Class="mt-3 w-100-mobile"
|
||
Variant="Variant.Filled" Color="Color.Primary"
|
||
OnClick="PlaceOrder" FullWidth="true"
|
||
StartIcon="@Icons.Material.Filled.CheckCircle">
|
||
@(_placing ? "در حال ثبت سفارش..." : "ثبت و پرداخت سفارش")
|
||
</MudButton>
|
||
}
|
||
</MudPaper>
|
||
</MudItem>
|
||
</MudGrid>
|
||
</MudContainer>
|