feat(payment): integrate TwentyCard payment option and enhance checkout flow

- Added a new payment method for TwentyCard in the checkout process, allowing users to select it alongside direct payment options.
- Implemented the logic for processing TwentyCard payments, including user feedback and dialog interactions for payment confirmation.
- Updated the appsettings files to include configuration for the new payment method.
- Enhanced the user interface in the PackagePurchaseDialog to reflect the new payment option and its requirements.

These changes improve the payment flexibility in the checkout process, providing users with additional options for completing their transactions.

src/FrontOffice.Main/Shared/PackagePurchaseDialog.razor

@@ -52,7 +52,7 @@
                     روش پرداخت خود را انتخاب کنید:
                 </MudText>
 
-                @* Direct Payment — always available *@
+                @* Direct Payment (ZarinPal) — always available *@
                 <MudPaper Elevation="0" Class="pa-4 rounded-lg pkg-payment-option"
                           Style="border:2px solid var(--mud-palette-primary); cursor:pointer;"
                           @onclick="() => SelectPaymentMethod(PaymentMethodType.DirectPayment)">
@@ -61,13 +61,29 @@
                             <MudIcon Icon="@Icons.Material.Filled.CreditCard" Color="Color.Primary" Size="Size.Medium" />
                             <MudStack Spacing="0" Class="flex-grow-1">
                                 <MudText Typo="Typo.subtitle1" Color="Color.Primary"><b>پرداخت مستقیم</b></MudText>
-                                <MudText Typo="Typo.caption" Class="mud-text-secondary">پرداخت آنی از طریق درگاه بانکی</MudText>
+                                <MudText Typo="Typo.caption" Class="mud-text-secondary">پرداخت آنی از طریق درگاه بانکی (زرین‌پال)</MudText>
                             </MudStack>
                             <MudIcon Icon="@Icons.Material.Filled.ArrowBack" Color="Color.Primary" Size="Size.Small" />
                         </MudStack>
                     </MudStack>
                 </MudPaper>
 
+                @* TwentyCard IPG *@
+                <MudPaper Elevation="0" Class="pa-4 rounded-lg pkg-payment-option"
+                          Style="border:2px solid var(--mud-palette-info); cursor:pointer;"
+                          @onclick="() => SelectPaymentMethod(PaymentMethodType.TwentyCard)">
+                    <MudStack Spacing="2">
+                        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                            <MudIcon Icon="@Icons.Material.Filled.AccountBalance" Color="Color.Info" Size="Size.Medium" />
+                            <MudStack Spacing="0" Class="flex-grow-1">
+                                <MudText Typo="Typo.subtitle1" Color="Color.Info"><b>پرداخت با ۲۰کارت</b></MudText>
+                                <MudText Typo="Typo.caption" Class="mud-text-secondary">پرداخت از طریق درگاه ۲۰کارت (نیاز به تأمین اعتبار)</MudText>
+                            </MudStack>
+                            <MudIcon Icon="@Icons.Material.Filled.ArrowBack" Color="Color.Info" Size="Size.Small" />
+                        </MudStack>
+                    </MudStack>
+                </MudPaper>
+
                 @* Daya Loan — only for base package AND first purchase cycle *@
                 @if (_selectedPackage.SupportsDayaPurchase && PurchaseCycleCount == 0)
                 {
@@ -229,6 +245,6 @@
             : "background:rgba(16,185,129,.12); color:#10b981;";
     }
 
-    public enum PaymentMethodType { DirectPayment, DayaLoan }
+    public enum PaymentMethodType { DirectPayment, TwentyCard, DayaLoan }
     public record PackagePurchaseResult(PackageDto Package, PaymentMethodType Method);
 }

src/FrontOffice.Main/Shared/TwentyCardCreditDialog.razor

@@ -0,0 +1,60 @@
+@inject IConfiguration Configuration
+@inject IJSRuntime JSRuntime
+
+<MudDialog>
+    <TitleContent>
+        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+            <MudIcon Icon="@Icons.Material.Filled.AccountBalance" Color="Color.Primary" />
+            <MudText Typo="Typo.h6">تأمین اعتبار ۲۰کارت</MudText>
+        </MudStack>
+    </TitleContent>
+    <DialogContent>
+        <MudStack Spacing="3">
+            <MudText Typo="Typo.body2" Class="mud-text-secondary">
+                برای پرداخت از طریق درگاه ۲۰کارت، ابتدا باید اعتبار حساب ۲۰کارت خود را تأمین کنید.
+                پس از تأمین اعتبار، روی «ادامه پرداخت» بزنید تا به درگاه هدایت شوید.
+            </MudText>
+
+            <MudAlert Severity="Severity.Info" Dense="true" Variant="Variant.Outlined">
+                اگر قبلاً اعتبار را تأمین کرده‌اید، می‌توانید مستقیم ادامه دهید.
+            </MudAlert>
+        </MudStack>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="Cancel" Variant="Variant.Text">انصراف</MudButton>
+        <MudButton Variant="Variant.Outlined"
+                   Color="Color.Primary"
+                   StartIcon="@Icons.Material.Filled.OpenInNew"
+                   OnClick="OpenCreditPortal"
+                   Disabled="@string.IsNullOrWhiteSpace(_creditPortalUrl)">
+            تأمین اعتبار
+        </MudButton>
+        <MudButton Variant="Variant.Filled"
+                   Color="Color.Primary"
+                   StartIcon="@Icons.Material.Filled.Payment"
+                   OnClick="ContinuePayment">
+            ادامه پرداخت
+        </MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = default!;
+
+    private string _creditPortalUrl = string.Empty;
+
+    protected override void OnInitialized()
+    {
+        _creditPortalUrl = Configuration["TwentyCard:CreditPortalUrl"] ?? string.Empty;
+    }
+
+    private async Task OpenCreditPortal()
+    {
+        if (string.IsNullOrWhiteSpace(_creditPortalUrl)) return;
+        await JSRuntime.InvokeVoidAsync("open", _creditPortalUrl, "_blank");
+    }
+
+    private void ContinuePayment() => MudDialog.Close(DialogResult.Ok(true));
+
+    private void Cancel() => MudDialog.Cancel();
+}