Update Checkout.razor
This commit is contained in:
MeysamMoghaddam
@@ -8,7 +8,7 @@
|
||||
<MudGrid Spacing="4">
|
||||
<!-- Header -->
|
||||
<MudItem xs="12">
|
||||
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudStack Spacing="3">
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
|
||||
<MudIcon Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Large" Color="Color.Primary" />
|
||||
@@ -20,18 +20,17 @@
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<!-- Package Details -->
|
||||
<MudItem xs="12" md="8">
|
||||
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-4 fw-600">جزئیات پکیج</MudText>
|
||||
<MudStack>
|
||||
<!-- Package Details -->
|
||||
<MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-4 fw-600">جزئیات پکیج</MudText>
|
||||
|
||||
@if (_selectedPackage != null)
|
||||
{
|
||||
<MudStack Spacing="4">
|
||||
@if (_selectedPackage != null)
|
||||
{
|
||||
<MudCard>
|
||||
<MudCardContent>
|
||||
<MudGrid Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudGrid Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudItem xs="12" md="4">
|
||||
<MudPaper Class="pa-2 rounded-xl" Style="background: radial-gradient(600px 280px at 120% 0, #daccff 0, transparent 60%), radial-gradient(600px 280px at -10% 100%, #ffe2f2 0, transparent 60%), linear-gradient(180deg, #fff, #fbfaff);">
|
||||
<MudImage Src="@_selectedPackage.Image"
|
||||
@@ -41,63 +40,34 @@
|
||||
ObjectPosition="ObjectPosition.Center"
|
||||
Style="width:100%"
|
||||
Class="rounded-xl" />
|
||||
</MudPaper>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="12" md="8">
|
||||
<MudText Typo="Typo.h5" Class="mb-2">@_selectedPackage.Title</MudText>
|
||||
@((MarkupString)_selectedPackage.Body)
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
</MudGrid>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Warning" Size="Size.Large" Color="Color.Warning" />
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">پکیجی انتخاب نشده است.</MudText>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.ArrowBack"
|
||||
OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)"
|
||||
Class="mt-2">
|
||||
بازگشت به صفحه اصلی
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
}
|
||||
</MudPaper>
|
||||
|
||||
<!-- Discount Code Section -->
|
||||
<MudPaper Outlined="true" Class="pa-4 rounded-xl">
|
||||
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">کد تخفیف</MudText>
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Stretch">
|
||||
<MudTextField @bind-Value="_discountCode"
|
||||
Label="کد تخفیف"
|
||||
Variant="Variant.Outlined"
|
||||
Class="flex-grow-1"
|
||||
Placeholder="کد تخفیف خود را وارد کنید" />
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
OnClick="ApplyDiscountCode"
|
||||
Disabled="_isApplyingDiscount">
|
||||
اعمال
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
@if (!string.IsNullOrWhiteSpace(_discountMessage))
|
||||
{
|
||||
<MudText Typo="Typo.caption" Color="@(_discountApplied ? Color.Success : Color.Error)" Class="mt-2">
|
||||
@_discountMessage
|
||||
</MudText>
|
||||
}
|
||||
</MudPaper>
|
||||
</MudStack>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudStack AlignItems="AlignItems.Center" Class="py-8">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Warning" Size="Size.Large" Color="Color.Warning" />
|
||||
<MudText Typo="Typo.body1" Class="mud-text-secondary mt-2">پکیجی انتخاب نشده است.</MudText>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.ArrowBack"
|
||||
OnClick="() => Navigation.NavigateTo(RouteConstants.Main.MainPage)"
|
||||
Class="mt-2">
|
||||
بازگشت به صفحه اصلی
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
}
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<!-- Order Summary & Address -->
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack Spacing="4">
|
||||
<!-- Address Selection -->
|
||||
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-4 fw-600">انتخاب آدرس</MudText>
|
||||
|
||||
@if (_isLoadingAddresses)
|
||||
@@ -121,15 +91,15 @@
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
|
||||
<MudRadio T="long" Value="address.Id" Checked="@(_selectedAddress?.Id == address.Id)" />
|
||||
<MudText Typo="Typo.subtitle2" Class="fw-600">@address.Title</MudText>
|
||||
@if (address.IsDefault)
|
||||
@if (address.IsDefault)
|
||||
{
|
||||
<MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">پیشفرض</MudChip>
|
||||
}
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">@address.Address</MudText>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @address.PostalCode</MudText>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @address.PostalCode</MudText>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
}
|
||||
</MudStack>
|
||||
}
|
||||
@@ -148,25 +118,59 @@
|
||||
</MudStack>
|
||||
}
|
||||
</MudPaper>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Order Summary -->
|
||||
<MudItem xs="12" md="4">
|
||||
<MudStack Spacing="4">
|
||||
<!-- Discount Code Section -->
|
||||
<MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-4 fw-600">کد تخفیف</MudText>
|
||||
<MudStack Spacing="3">
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Stretch">
|
||||
<MudTextField @bind-Value="_discountCode"
|
||||
Label="کد تخفیف"
|
||||
Variant="Variant.Outlined"
|
||||
Class="flex-grow-1"
|
||||
Placeholder="کد تخفیف خود را وارد کنید" />
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Secondary"
|
||||
OnClick="ApplyDiscountCode"
|
||||
Disabled="_isApplyingDiscount">
|
||||
اعمال
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
@if (!string.IsNullOrWhiteSpace(_discountMessage))
|
||||
{
|
||||
<MudText Typo="Typo.caption" Color="@(_discountApplied ? Color.Success : Color.Error)" Class="mt-2">
|
||||
@_discountMessage
|
||||
</MudText>
|
||||
}
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
|
||||
<!-- Order Summary -->
|
||||
@if (_selectedPackage != null)
|
||||
{
|
||||
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudPaper Elevation="4" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-4 fw-600">خلاصه سفارش</MudText>
|
||||
|
||||
<MudStack Spacing="3">
|
||||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||||
<MudText Typo="Typo.body1">پکیج @(_selectedPackage.Title)</MudText>
|
||||
<MudText Typo="Typo.body1">@_selectedPackage.Price.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
|
||||
@if (_discountApplied && _discountAmount > 0)
|
||||
@if (_discountApplied && _discountAmount > 0)
|
||||
{
|
||||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||||
<MudText Typo="Typo.body2" Color="Color.Success">تخفیف (@_discountCode)</MudText>
|
||||
<MudText Typo="Typo.body2" Color="Color.Success">-@_discountAmount.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
</MudStack>
|
||||
<MudText Typo="Typo.body2" Color="Color.Success">-@_discountAmount.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
</MudStack>
|
||||
}
|
||||
|
||||
<MudDivider />
|
||||
@@ -174,20 +178,20 @@
|
||||
<MudStack Row="true" Justify="Justify.SpaceBetween">
|
||||
<MudText Typo="Typo.h6" Class="fw-600">مجموع</MudText>
|
||||
<MudText Typo="Typo.h6" Class="fw-600" Color="Color.Primary">@_finalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Success"
|
||||
Size="Size.Large"
|
||||
FullWidth="true"
|
||||
StartIcon="@Icons.Material.Filled.Payment"
|
||||
OnClick="ProcessPayment"
|
||||
Disabled="@(!CanProceedToPayment || _isProcessingPayment)"
|
||||
Class="mt-2">
|
||||
@(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Success"
|
||||
Size="Size.Large"
|
||||
FullWidth="true"
|
||||
StartIcon="@Icons.Material.Filled.Payment"
|
||||
OnClick="ProcessPayment"
|
||||
Disabled="@(!CanProceedToPayment || _isProcessingPayment)"
|
||||
Class="mt-2">
|
||||
@(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
|
||||
</MudButton>
|
||||
|
||||
@if (!CanProceedToPayment)
|
||||
@if (!CanProceedToPayment)
|
||||
{
|
||||
<MudText Typo="Typo.caption" Color="Color.Error" Align="Align.Center">
|
||||
لطفاً پکیج و آدرس را انتخاب کنید.
|
||||
|
||||
Reference in New Issue
Block a user