admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Checkout.razor

Browse Source
This commit is contained in:
MeysamMoghaddam
2025-10-13 16:54:22 +03:30
parent fe72c2b446
commit 6f0cd12d8d
1 changed files with 84 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/FrontOffice.Main/Pages/Checkout.razor
View File

@@ -8,7 +8,7 @@
<MudGrid Spacing="4"> <MudGrid Spacing="4">
<!-- Header --> <!-- Header -->
<MudItem xs="12"> <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 Spacing="3">
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3"> <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
<MudIcon Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Large" Color="Color.Primary" /> <MudIcon Icon="@Icons.Material.Filled.ShoppingCart" Size="Size.Large" Color="Color.Primary" />
@@ -20,18 +20,17 @@
</MudStack> </MudStack>
</MudPaper> </MudPaper>
</MudItem> </MudItem>
<!-- Package Details -->
<MudItem xs="12" md="8"> <MudItem xs="12" md="8">
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface"> <MudStack>
<MudText Typo="Typo.h5" Class="mb-4 fw-600">جزئیات پکیج</MudText> <!-- 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) @if (_selectedPackage != null)
{ {
<MudStack Spacing="4">
<MudCard> <MudCard>
<MudCardContent> <MudCardContent>
<MudGrid Spacing="3" AlignItems="AlignItems.Start"> <MudGrid Spacing="3" AlignItems="AlignItems.Start">
<MudItem xs="12" md="4"> <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);"> <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" <MudImage Src="@_selectedPackage.Image"
@@ -41,63 +40,34 @@
ObjectPosition="ObjectPosition.Center" ObjectPosition="ObjectPosition.Center"
Style="width:100%" Style="width:100%"
Class="rounded-xl" /> Class="rounded-xl" />
</MudPaper> </MudPaper>
</MudItem> </MudItem>
<MudItem xs="12" md="8"> <MudItem xs="12" md="8">
<MudText Typo="Typo.h5" Class="mb-2">@_selectedPackage.Title</MudText> <MudText Typo="Typo.h5" Class="mb-2">@_selectedPackage.Title</MudText>
@((MarkupString)_selectedPackage.Body) @((MarkupString)_selectedPackage.Body)
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</MudCardContent> </MudCardContent>
</MudCard> </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 --> <!-- 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> <MudText Typo="Typo.h5" Class="mb-4 fw-600">انتخاب آدرس</MudText>
@if (_isLoadingAddresses) @if (_isLoadingAddresses)
@@ -121,15 +91,15 @@
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2"> <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
<MudRadio T="long" Value="address.Id" Checked="@(_selectedAddress?.Id == address.Id)" /> <MudRadio T="long" Value="address.Id" Checked="@(_selectedAddress?.Id == address.Id)" />
<MudText Typo="Typo.subtitle2" Class="fw-600">@address.Title</MudText> <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> <MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">پیش‌فرض</MudChip>
} }
</MudStack> </MudStack>
<MudText Typo="Typo.body2" Class="mud-text-secondary">@address.Address</MudText> <MudText Typo="Typo.body2" Class="mud-text-secondary">@address.Address</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @address.PostalCode</MudText> <MudText Typo="Typo.caption" Class="mud-text-secondary">کد پستی: @address.PostalCode</MudText>
</MudStack> </MudStack>
</MudPaper> </MudPaper>
} }
</MudStack> </MudStack>
} }
@@ -148,25 +118,59 @@
</MudStack> </MudStack>
} }
</MudPaper> </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 --> <!-- Order Summary -->
@if (_selectedPackage != null) @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> <MudText Typo="Typo.h5" Class="mb-4 fw-600">خلاصه سفارش</MudText>
<MudStack Spacing="3"> <MudStack Spacing="3">
<MudStack Row="true" Justify="Justify.SpaceBetween"> <MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.body1">پکیج @(_selectedPackage.Title)</MudText> <MudText Typo="Typo.body1">پکیج @(_selectedPackage.Title)</MudText>
<MudText Typo="Typo.body1">@_selectedPackage.Price.ToThousands().ToCurrencyUnitIRT()</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"> <MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.body2" Color="Color.Success">تخفیف (@_discountCode)</MudText> <MudText Typo="Typo.body2" Color="Color.Success">تخفیف (@_discountCode)</MudText>
<MudText Typo="Typo.body2" Color="Color.Success">-@_discountAmount.ToThousands().ToCurrencyUnitIRT()</MudText> <MudText Typo="Typo.body2" Color="Color.Success">-@_discountAmount.ToThousands().ToCurrencyUnitIRT()</MudText>
</MudStack> </MudStack>
} }
<MudDivider /> <MudDivider />
@@ -174,20 +178,20 @@
<MudStack Row="true" Justify="Justify.SpaceBetween"> <MudStack Row="true" Justify="Justify.SpaceBetween">
<MudText Typo="Typo.h6" Class="fw-600">مجموع</MudText> <MudText Typo="Typo.h6" Class="fw-600">مجموع</MudText>
<MudText Typo="Typo.h6" Class="fw-600" Color="Color.Primary">@_finalPrice.ToThousands().ToCurrencyUnitIRT()</MudText> <MudText Typo="Typo.h6" Class="fw-600" Color="Color.Primary">@_finalPrice.ToThousands().ToCurrencyUnitIRT()</MudText>
</MudStack> </MudStack>
<MudButton Variant="Variant.Filled" <MudButton Variant="Variant.Filled"
Color="Color.Success" Color="Color.Success"
Size="Size.Large" Size="Size.Large"
FullWidth="true" FullWidth="true"
StartIcon="@Icons.Material.Filled.Payment" StartIcon="@Icons.Material.Filled.Payment"
OnClick="ProcessPayment" OnClick="ProcessPayment"
Disabled="@(!CanProceedToPayment || _isProcessingPayment)" Disabled="@(!CanProceedToPayment || _isProcessingPayment)"
Class="mt-2"> Class="mt-2">
@(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین") @(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
</MudButton> </MudButton>
@if (!CanProceedToPayment) @if (!CanProceedToPayment)
{ {
<MudText Typo="Typo.caption" Color="Color.Error" Align="Align.Center"> <MudText Typo="Typo.caption" Color="Color.Error" Align="Align.Center">
لطفاً پکیج و آدرس را انتخاب کنید. لطفاً پکیج و آدرس را انتخاب کنید.