u
This commit is contained in:
MeysamMoghaddam
238
src/FrontOffice.Main/Pages/Contact.razor
Normal file
238
src/FrontOffice.Main/Pages/Contact.razor
Normal file
@@ -0,0 +1,238 @@
|
||||
@attribute [Route(RouteConstants.Contact.Index)]
|
||||
|
||||
<PageTitle>ارتباط با ما | فرصت</PageTitle>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="contact-hero-section py-16">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="4">
|
||||
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Filled" Class="mb-2">ارتباط با ما</MudChip>
|
||||
<MudText Typo="Typo.h2" Align="Align.Center" Class="mb-3">
|
||||
آماده شنیدن صدای شما هستیم
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body1" Align="Align.Center" Class="mud-text-secondary mb-6" MaxWidth="600px">
|
||||
سوالات، پیشنهادات یا انتقادات خود را با ما در میان بگذارید. تیم ما آماده پاسخگویی به شماست.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<MudStack Spacing="6">
|
||||
|
||||
<!-- Contact Form & Info -->
|
||||
<section class="py-8">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudGrid Spacing="6">
|
||||
<!-- Contact Form -->
|
||||
<MudItem xs="12" lg="8">
|
||||
<MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h5" Class="mb-6 mud-typography-subtitle1">فرم تماس</MudText>
|
||||
|
||||
<MudForm @ref="_form" Model="_contactForm">
|
||||
<MudGrid Spacing="4">
|
||||
<MudItem xs="12" md="6">
|
||||
<MudTextField @bind-Value="_contactForm.FirstName"
|
||||
For="@(() => _contactForm.FirstName)"
|
||||
Label="نام"
|
||||
Variant="Variant.Outlined"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن نام الزامی است." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudTextField @bind-Value="_contactForm.LastName"
|
||||
For="@(() => _contactForm.LastName)"
|
||||
Label="نام خانوادگی"
|
||||
Variant="Variant.Outlined"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن نام خانوادگی الزامی است." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudTextField @bind-Value="_contactForm.Email"
|
||||
For="@(() => _contactForm.Email)"
|
||||
Label="ایمیل"
|
||||
Variant="Variant.Outlined"
|
||||
InputType="InputType.Email"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن ایمیل الزامی است." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudTextField @bind-Value="_contactForm.Phone"
|
||||
For="@(() => _contactForm.Phone)"
|
||||
Label="شماره تماس"
|
||||
Variant="Variant.Outlined"
|
||||
InputType="InputType.Text" />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudSelect @bind-Value="_contactForm.Subject"
|
||||
Label="موضوع پیام"
|
||||
Variant="Variant.Outlined"
|
||||
Required="true"
|
||||
RequiredError="انتخاب موضوع الزامی است.">
|
||||
<MudSelectItem Value="@("general")">عمومی</MudSelectItem>
|
||||
<MudSelectItem Value="@("support")">پشتیبانی فنی</MudSelectItem>
|
||||
<MudSelectItem Value="@("sales")">فروش و قیمتگذاری</MudSelectItem>
|
||||
<MudSelectItem Value="@("partnership")">شریک تجاری</MudSelectItem>
|
||||
<MudSelectItem Value="@("complaint")">شکایت</MudSelectItem>
|
||||
<MudSelectItem Value="@("suggestion")">پیشنهاد</MudSelectItem>
|
||||
</MudSelect>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudTextField @bind-Value="_contactForm.Message"
|
||||
For="@(() => _contactForm.Message)"
|
||||
Label="پیام شما"
|
||||
Variant="Variant.Outlined"
|
||||
Lines="5"
|
||||
Required="true"
|
||||
RequiredError="وارد کردن پیام الزامی است."
|
||||
Placeholder="پیام خود را بنویسید..." />
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12">
|
||||
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Start">
|
||||
<MudCheckBox T="bool" @bind-Checked="_contactForm.AcceptTerms" />
|
||||
<MudText Typo="Typo.body2" Class="mud-text-secondary">
|
||||
با ارسال این فرم،
|
||||
<MudLink Href="/privacy" Target="_blank">سیاست حفظ حریم خصوصی</MudLink>
|
||||
و
|
||||
<MudLink Href="/terms" Target="_blank">شرایط استفاده</MudLink>
|
||||
را میپذیرم.
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudStack Row="true" Justify="Justify.FlexEnd" Class="mt-6">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
OnClick="SubmitContactForm"
|
||||
Disabled="_isSubmitting"
|
||||
StartIcon="@Icons.Material.Filled.Send">
|
||||
@(_isSubmitting ? "در حال ارسال..." : "ارسال پیام")
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudForm>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<MudItem xs="12" lg="4">
|
||||
<MudStack Spacing="4">
|
||||
<!-- Contact Details -->
|
||||
<MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">اطلاعات تماس</MudText>
|
||||
|
||||
<MudStack Spacing="4">
|
||||
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.LocationOn" Color="Color.Primary" Size="Size.Large" />
|
||||
<div>
|
||||
<MudText Typo="Typo.body2" Class="fw-600">آدرس</MudText>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
||||
تهران، خیابان ولیعصر، پلاک ۱۲۳۴<br />
|
||||
کد پستی: ۱۲۳۴۵۶۷۸۹۰
|
||||
</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Phone" Color="Color.Success" Size="Size.Large" />
|
||||
<div>
|
||||
<MudText Typo="Typo.body2" Class="fw-600">تلفن</MudText>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">۰۲۱-۱۲۳۴۵۶۷۸</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Info" Size="Size.Large" />
|
||||
<div>
|
||||
<MudText Typo="Typo.body2" Class="fw-600">ایمیل</MudText>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">info@foursat.co</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Start">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Schedule" Color="Color.Warning" Size="Size.Large" />
|
||||
<div>
|
||||
<MudText Typo="Typo.body2" Class="fw-600">ساعات کاری</MudText>
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary">
|
||||
شنبه تا پنجشنبه<br />
|
||||
۹ صبح تا ۶ عصر
|
||||
</MudText>
|
||||
</div>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
|
||||
<!-- Social Media -->
|
||||
<MudPaper Elevation="3" Class="pa-6 rounded-2xl mud-theme-surface">
|
||||
<MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">شبکههای اجتماعی</MudText>
|
||||
|
||||
<MudStack Spacing="3">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Inherit"
|
||||
StartIcon="@Icons.Custom.Brands.Telegram"
|
||||
Href="https://t.me/foursat"
|
||||
Target="_blank"
|
||||
FullWidth="true">
|
||||
تلگرام
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Inherit"
|
||||
StartIcon="@Icons.Custom.Brands.Instagram"
|
||||
Href="https://instagram.com/foursat"
|
||||
Target="_blank"
|
||||
FullWidth="true">
|
||||
اینستاگرام
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Inherit"
|
||||
StartIcon="@Icons.Custom.Brands.LinkedIn"
|
||||
Href="https://linkedin.com/company/foursat"
|
||||
Target="_blank"
|
||||
FullWidth="true">
|
||||
لینکدین
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Inherit"
|
||||
StartIcon="@Icons.Custom.Brands.WhatsApp"
|
||||
Href="https://wa.me/989123456789"
|
||||
Target="_blank"
|
||||
FullWidth="true">
|
||||
واتساپ
|
||||
</MudButton>
|
||||
</MudStack>
|
||||
</MudPaper>
|
||||
</MudStack>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
</section>
|
||||
|
||||
<!-- Map Section -->
|
||||
<section class="py-8 bg-grey-50">
|
||||
<MudContainer MaxWidth="MaxWidth.Large">
|
||||
<MudText Typo="Typo.h4" Align="Align.Center" Class="mb-8 mud-typography-subtitle1">موقعیت مکانی</MudText>
|
||||
|
||||
<MudPaper Elevation="3" Class="pa-4 rounded-2xl overflow-hidden">
|
||||
<!-- Placeholder for Map -->
|
||||
<div style="height: 400px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
|
||||
<MudStack AlignItems="AlignItems.Center" Spacing="3">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Map" Size="Size.Large" Style="color: white;" />
|
||||
<MudText Typo="Typo.h6" Style="color: white;">نقشه موقعیت مکانی</MudText>
|
||||
<MudText Typo="Typo.body2" Style="color: rgba(255,255,255,0.8);" Align="Align.Center">
|
||||
تهران، خیابان ولیعصر، پلاک ۱۲۳۴
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</div>
|
||||
</MudPaper>
|
||||
</MudContainer>
|
||||
</section>
|
||||
</MudStack>
|
||||
|
||||
90
src/FrontOffice.Main/Pages/Contact.razor.cs
Normal file
90
src/FrontOffice.Main/Pages/Contact.razor.cs
Normal file
@@ -0,0 +1,90 @@
|
||||
using FluentValidation;
|
||||
using MudBlazor;
|
||||
using Severity = MudBlazor.Severity;
|
||||
|
||||
namespace FrontOffice.Main.Pages;
|
||||
public partial class Contact
|
||||
{
|
||||
private ContactForm _contactForm = new();
|
||||
private MudForm? _form;
|
||||
private bool _isSubmitting;
|
||||
private readonly ContactFormValidator _contactFormValidator = new();
|
||||
|
||||
private async Task SubmitContactForm()
|
||||
{
|
||||
if (_form is null) return;
|
||||
|
||||
await _form.Validate();
|
||||
if (!_form.IsValid) return;
|
||||
|
||||
if (!_contactForm.AcceptTerms)
|
||||
{
|
||||
Snackbar.Add("لطفاً شرایط و قوانین را بپذیرید.", MudBlazor.Severity.Warning);
|
||||
return;
|
||||
}
|
||||
|
||||
_isSubmitting = true;
|
||||
|
||||
try
|
||||
{
|
||||
// TODO: Send contact form to API
|
||||
await Task.Delay(2000); // Simulate API call
|
||||
|
||||
Snackbar.Add("پیام شما با موفقیت ارسال شد. به زودی با شما تماس خواهیم گرفت.", Severity.Success);
|
||||
|
||||
// Reset form
|
||||
_contactForm = new ContactForm();
|
||||
await _form.ResetAsync();
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Snackbar.Add($"خطا در ارسال پیام: {ex.Message}", Severity.Error);
|
||||
}
|
||||
finally
|
||||
{
|
||||
_isSubmitting = false;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
}
|
||||
|
||||
private void StartChat()
|
||||
{
|
||||
// TODO: Open chat widget or redirect to chat page
|
||||
Snackbar.Add("چت آنلاین به زودی فعال خواهد شد.", Severity.Info);
|
||||
}
|
||||
|
||||
private void CallSupport()
|
||||
{
|
||||
// TODO: Initiate phone call or show phone number
|
||||
Snackbar.Add("شماره تماس: ۰۲۱-۱۲۳۴۵۶۷۸", Severity.Info);
|
||||
}
|
||||
|
||||
private void SendEmail()
|
||||
{
|
||||
// TODO: Open email client or redirect to email page
|
||||
Snackbar.Add("ایمیل: info@foursat.co", Severity.Info);
|
||||
}
|
||||
|
||||
public class ContactForm
|
||||
{
|
||||
public string? FirstName { get; set; }
|
||||
public string? LastName { get; set; }
|
||||
public string? Email { get; set; }
|
||||
public string? Phone { get; set; }
|
||||
public string? Subject { get; set; }
|
||||
public string? Message { get; set; }
|
||||
public bool AcceptTerms { get; set; }
|
||||
}
|
||||
|
||||
public class ContactFormValidator : FluentValidation.AbstractValidator<ContactForm>
|
||||
{
|
||||
public ContactFormValidator()
|
||||
{
|
||||
RuleFor(x => x.FirstName).NotEmpty().WithMessage("نام الزامی است");
|
||||
RuleFor(x => x.LastName).NotEmpty().WithMessage("نام خانوادگی الزامی است");
|
||||
RuleFor(x => x.Email).NotEmpty().EmailAddress().WithMessage("ایمیل معتبر نیست");
|
||||
RuleFor(x => x.Subject).NotEmpty().WithMessage("انتخاب موضوع الزامی است");
|
||||
RuleFor(x => x.Message).NotEmpty().MinimumLength(10).WithMessage("پیام باید حداقل ۱۰ کاراکتر باشد");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -37,7 +37,7 @@
|
||||
<div class="d-none d-md-flex align-center gap-10">
|
||||
<MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" Class="mud-link">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" Class="mud-link">درباره ما</MudLink>
|
||||
<MudLink Href="#contact" Typo="Typo.subtitle1" Class="mud-link">ارتباط با ما</MudLink>
|
||||
<MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" Class="mud-link">ارتباط با ما</MudLink>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-2">
|
||||
@@ -64,7 +64,7 @@
|
||||
<MudStack Spacing="2">
|
||||
<MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">سوالات متداول</MudLink>
|
||||
<MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">درباره ما</MudLink>
|
||||
<MudLink Href="#contact" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">ارتباط</MudLink>
|
||||
<MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">ارتباط با ما</MudLink>
|
||||
|
||||
<MudDivider Class="my-2" />
|
||||
@if (_isAuthenticated)
|
||||
|
||||
@@ -32,4 +32,9 @@ public static class RouteConstants
|
||||
{
|
||||
public const string Index = "/faq";
|
||||
}
|
||||
|
||||
public static class Contact
|
||||
{
|
||||
public const string Index = "/contact";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user