feat: full FrontOffice updates - discount store, blog, payment gateway, UI improvements
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
Build and Deploy to Kubernetes / build-and-deploy (push) Failing after 4m55s
- Discount store pages (products, cart, orders, order detail) - Blog pages and services - Payment gateway callback page - AppImage component, EmptyState, LoadingState, PageHeader - DiscountCartService, DiscountOrderService, DiscountProductService - BlogCategoryService, BlogPostService, SitePageService, ImageCacheService - PhoneVerifyForm component - Profile Hub page - UI/UX improvements across all pages - landing.js for homepage - Config and routing updates
This commit is contained in:
masoodafar-web
@@ -1,168 +1,101 @@
|
||||
@if (InlineMode)
|
||||
{
|
||||
@* Inline rendering without MudDialog wrapper *@
|
||||
<MudStack Spacing="2">
|
||||
<MudText Typo="Typo.h5" Align="Align.Center">@GetDialogTitle()</MudText>
|
||||
@PhoneOrVerifyContent()
|
||||
</MudStack>
|
||||
<div class="auth-dialog-content">
|
||||
<MudStack Spacing="3" AlignItems="AlignItems.Center" Class="mb-4">
|
||||
<MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Filled">
|
||||
<MudIcon Icon="@(_currentStep == AuthStep.Phone ? Icons.Material.Outlined.PhoneAndroid : Icons.Material.Outlined.LockOpen)" Size="Size.Large" />
|
||||
</MudAvatar>
|
||||
<MudText Typo="Typo.h5">@GetDialogTitle()</MudText>
|
||||
</MudStack>
|
||||
<PhoneVerifyForm @ref="_phoneVerifyForm"
|
||||
CurrentStep="_currentStep"
|
||||
PhoneRequest="_phoneRequest"
|
||||
VerifyRequest="_verifyRequest"
|
||||
CaptchaCode="@_captchaCode"
|
||||
CaptchaInput="@_captchaInput"
|
||||
CaptchaInputChanged="@(v => _captchaInput = v)"
|
||||
OnRefreshCaptcha="GenerateCaptcha"
|
||||
IsBusy="_isBusy"
|
||||
ErrorMessage="@_errorMessage"
|
||||
InfoMessage="@_infoMessage"
|
||||
PhoneNumber="@_phoneNumber"
|
||||
ResendRemaining="_resendRemaining"
|
||||
OnChangePhone="ChangePhoneAsync"
|
||||
OnResendOtp="ResendOtpAsync" />
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h4" Align="Align.Center">@GetDialogTitle()</MudText>
|
||||
</TitleContent>
|
||||
<MudDialog Class="auth-dialog-wrapper">
|
||||
<DialogContent>
|
||||
@PhoneOrVerifyContent()
|
||||
<div class="auth-dialog-content">
|
||||
<MudStack Spacing="2" AlignItems="AlignItems.Center" Class="mb-4 pt-2">
|
||||
<MudAvatar Size="Size.Large" Color="Color.Primary" Variant="Variant.Filled">
|
||||
<MudIcon Icon="@(_currentStep == AuthStep.Phone ? Icons.Material.Outlined.PhoneAndroid : Icons.Material.Outlined.LockOpen)" Size="Size.Large" />
|
||||
</MudAvatar>
|
||||
<MudText Typo="Typo.h5" Align="Align.Center">@GetDialogTitle()</MudText>
|
||||
</MudStack>
|
||||
|
||||
<PhoneVerifyForm @ref="_phoneVerifyForm"
|
||||
CurrentStep="_currentStep"
|
||||
PhoneRequest="_phoneRequest"
|
||||
VerifyRequest="_verifyRequest"
|
||||
CaptchaCode="@_captchaCode"
|
||||
CaptchaInput="@_captchaInput"
|
||||
CaptchaInputChanged="@(v => _captchaInput = v)"
|
||||
OnRefreshCaptcha="GenerateCaptcha"
|
||||
IsBusy="_isBusy"
|
||||
ErrorMessage="@_errorMessage"
|
||||
InfoMessage="@_infoMessage"
|
||||
PhoneNumber="@_phoneNumber"
|
||||
ResendRemaining="_resendRemaining"
|
||||
OnChangePhone="ChangePhoneAsync"
|
||||
OnResendOtp="ResendOtpAsync" />
|
||||
|
||||
<MudStack Class="mt-4" Spacing="2">
|
||||
@if (_currentStep == AuthStep.Phone)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="SendOtpAsync"
|
||||
Disabled="_isBusy"
|
||||
Class="rounded-lg"
|
||||
FullWidth="true"
|
||||
Size="Size.Large">
|
||||
@if (_isBusy)
|
||||
{
|
||||
<MudProgressCircular Size="Size.Small" Indeterminate="true" Class="me-2" />
|
||||
}
|
||||
ارسال رمز پویا
|
||||
</MudButton>
|
||||
}
|
||||
else if (_currentStep == AuthStep.Verify)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="VerifyOtpAsync"
|
||||
Disabled="_isBusy || IsVerificationLocked"
|
||||
Class="rounded-lg"
|
||||
FullWidth="true"
|
||||
Size="Size.Large">
|
||||
@if (_isBusy)
|
||||
{
|
||||
<MudProgressCircular Size="Size.Small" Indeterminate="true" Class="me-2" />
|
||||
}
|
||||
تأیید و ورود
|
||||
</MudButton>
|
||||
}
|
||||
@if (!HideCancelButton)
|
||||
{
|
||||
<MudButton Variant="Variant.Text"
|
||||
OnClick="Cancel"
|
||||
Disabled="_isBusy"
|
||||
FullWidth="true">لغو
|
||||
</MudButton>
|
||||
}
|
||||
</MudStack>
|
||||
</div>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
@if (!HideCancelButton)
|
||||
{
|
||||
<MudButton Variant="Variant.Text"
|
||||
OnClick="Cancel"
|
||||
Disabled="_isBusy">لغو
|
||||
</MudButton>
|
||||
}
|
||||
@if (_currentStep == AuthStep.Phone)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="SendOtpAsync"
|
||||
Disabled="_isBusy"
|
||||
FullWidth="true">
|
||||
ارسال رمز پویا
|
||||
</MudButton>
|
||||
}
|
||||
else if (_currentStep == AuthStep.Verify)
|
||||
{
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="VerifyOtpAsync"
|
||||
Disabled="_isBusy || IsVerificationLocked"
|
||||
FullWidth="true">
|
||||
تأیید و ورود
|
||||
</MudButton>
|
||||
}
|
||||
</DialogActions>
|
||||
</MudDialog>
|
||||
}
|
||||
|
||||
@code {
|
||||
|
||||
private RenderFragment PhoneOrVerifyContent() => __builder =>
|
||||
{
|
||||
if (_currentStep == AuthStep.Phone)
|
||||
{
|
||||
// Phone Step
|
||||
__builder.OpenComponent(0, typeof(MudText));
|
||||
__builder.AddAttribute(1, "Typo", Typo.body2);
|
||||
__builder.AddAttribute(2, "Class", "mb-4");
|
||||
__builder.AddAttribute(3, "Align", Align.Center);
|
||||
__builder.AddContent(4, "لطفاً شماره موبایل خود را وارد کنید تا رمز پویا ارسال شود.");
|
||||
__builder.CloseComponent();
|
||||
|
||||
<MudForm @ref="_phoneForm" Model="_phoneRequest">
|
||||
<MudTextField @bind-Value="_phoneRequest.Mobile"
|
||||
For="@(() => _phoneRequest.Mobile)"
|
||||
Label="شماره موبایل"
|
||||
InputType="InputType.Telephone"
|
||||
InputMode="InputMode.tel"
|
||||
Variant="Variant.Outlined"
|
||||
Immediate="true"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن شماره موبایل الزامی است."
|
||||
HelperText="مثال: 09121234567"
|
||||
Class="mb-2"/>
|
||||
|
||||
@* @if (EnableCaptcha) *@
|
||||
@* { *@
|
||||
<MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1" Class="mt-2 mb-2">
|
||||
<MudItem xs="7" md="12">
|
||||
<MudTextField xs="4" Label="کد کپچا" Placeholder="کد نمایش داده شده" Immediate="true"
|
||||
Variant="Variant.Outlined" @bind-Value="_captchaInput" Required="true"
|
||||
RequiredError="لطفاً کد کپچا را وارد کنید."/>
|
||||
</MudItem>
|
||||
<MudItem xs="4" >
|
||||
<MudPaper Elevation="1" Class="captcha-box d-flex align-center justify-center"
|
||||
Style="min-width:100px;min-height:48px;">
|
||||
<MudText Typo="Typo.h5">@_captchaCode</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
<MudItem xs="1" >
|
||||
<MudButton Variant="Variant.Text" Color="Color.Primary"
|
||||
StartIcon="@Icons.Material.Filled.Refresh" Disabled="_isBusy"
|
||||
OnClick="GenerateCaptcha">
|
||||
</MudButton>
|
||||
</MudItem>
|
||||
|
||||
</MudStack>
|
||||
|
||||
@* } *@
|
||||
@* *@
|
||||
<MudCheckBox T="bool" Required="true"
|
||||
Label="شرایط و قوانین را میپذیرم"
|
||||
RequiredError="برای ادامه باید شرایط و قوانین را بپذیرید."
|
||||
Class="mb-1"/>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(_errorMessage))
|
||||
{
|
||||
<MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
|
||||
Class="mb-2">@_errorMessage</MudAlert>
|
||||
}
|
||||
</MudForm>
|
||||
}
|
||||
else if (_currentStep == AuthStep.Verify)
|
||||
{
|
||||
// Verify Step
|
||||
<MudText Typo="Typo.body2" Class="mb-4" Align="Align.Center">رمز پویا شش رقمی ارسال شده به @_phoneNumber را
|
||||
وارد کنید.
|
||||
</MudText>
|
||||
|
||||
<MudForm @ref="_verifyForm" Model="_verifyRequest">
|
||||
<MudTextField @bind-Value="_verifyRequest.Code"
|
||||
For="@(() => _verifyRequest.Code)"
|
||||
Label="رمز پویا"
|
||||
InputType="InputType.Telephone"
|
||||
InputMode="InputMode.tel"
|
||||
Variant="Variant.Outlined"
|
||||
Immediate="true"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن رمز پویا الزامی است."
|
||||
HelperText="کد ۶ رقمی"
|
||||
Class="mb-2"
|
||||
MaxLength="6"/>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(_errorMessage))
|
||||
{
|
||||
<MudAlert Severity="Severity.Error" Dense="true" Elevation="0"
|
||||
Class="mb-2">@(_errorMessage)</MudAlert>
|
||||
}
|
||||
@if (!string.IsNullOrWhiteSpace(_infoMessage))
|
||||
{
|
||||
<MudAlert Severity="Severity.Success" Dense="true" Elevation="0"
|
||||
Class="mb-2">@(_infoMessage)</MudAlert>
|
||||
}
|
||||
|
||||
<MudStack Spacing="2">
|
||||
<MudButton Variant="Variant.Text" Color="Color.Secondary" Disabled="_isBusy"
|
||||
OnClick="ChangePhoneAsync">تغییر شماره
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
<MudDivider Class="my-2"/>
|
||||
@if (_resendRemaining > 0)
|
||||
{
|
||||
<MudText Typo="Typo.body2" Align="Align.Center" Class="mud-text-secondary">امکان ارسال مجدد
|
||||
تا @_resendRemaining ثانیه دیگر
|
||||
</MudText>
|
||||
}
|
||||
else
|
||||
{
|
||||
<MudButton Variant="Variant.Text" Color="Color.Primary" Disabled="_isBusy" OnClick="ResendOtpAsync">
|
||||
ارسال مجدد رمز پویا
|
||||
</MudButton>
|
||||
}
|
||||
</MudForm>
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user