From aedf31281263384013b7f89c9792d8d1436bd055 Mon Sep 17 00:00:00 2001
From: masoodafar-web <masoud.afarin.moghaddam@outlook.com>
Date: Sun, 20 Sep 2026 22:17:39 +0330
Subject: [PATCH] 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.
---
 .gitattributes                                |  2 +-
 .gitignore                                    |  2 +-
 src/FrontOffice.Main/FrontOffice.Main.csproj  |  8 ++-
 src/FrontOffice.Main/Pages/Checkout.razor     | 13 +++-
 src/FrontOffice.Main/Pages/Checkout.razor.cs  | 35 ++++++++++-
 .../Pages/Profile/Index.razor.cs              | 33 ++++++++--
 .../Pages/Profile/PaymentCallback.razor       |  8 +++
 .../Shared/PackagePurchaseDialog.razor        | 22 ++++++-
 .../Shared/TwentyCardCreditDialog.razor       | 60 +++++++++++++++++++
 .../appsettings.Production.json               |  3 +
 src/FrontOffice.Main/appsettings.Staging.json |  3 +
 src/FrontOffice.Main/appsettings.json         |  3 +
 12 files changed, 178 insertions(+), 14 deletions(-)
 create mode 100644 src/FrontOffice.Main/Shared/TwentyCardCreditDialog.razor

diff --git a/.gitattributes b/.gitattributes
index 82b5185..679f26c 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,2 @@
-# Keep production config from current branch during merges — never overwrite
+# Keep production config from current branch during merges — never ov erwrite
 src/FrontOffice.Main/appsettings.Production.json merge=ours
diff --git a/.gitignore b/.gitignore
index 0f13c79..28a74b2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 # ---> VisualStudio
 ## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
+## files generated by popular Visual Studio add-ons. 
 ##
 ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore 
 
diff --git a/src/FrontOffice.Main/FrontOffice.Main.csproj b/src/FrontOffice.Main/FrontOffice.Main.csproj
index 8d8f9e7..eac8e04 100644
--- a/src/FrontOffice.Main/FrontOffice.Main.csproj
+++ b/src/FrontOffice.Main/FrontOffice.Main.csproj
@@ -10,8 +10,8 @@
 
   <ItemGroup>
     <PackageReference Include="DateTimeConverterCL" Version="1.0.0" />
-    <!-- Replace all FrontOffice.BFF protobuf packages with CMS protobuf (CI/CD packs → Nexus) -->
-    <PackageReference Include="Foursat.CMSMicroservice.Protobuf" Version="0.0.211" />
+    <!-- Local protobuf until 0.0.212 is published to Nexus -->
+    <!-- <PackageReference Include="Foursat.CMSMicroservice.Protobuf" Version="0.0.212" /> -->
     <PackageReference Include="MudBlazor" Version="8.14.0" />
     <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
     <PackageReference Include="Mapster" Version="7.4.0" />
@@ -23,6 +23,10 @@
     <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="9.0.0" />
   </ItemGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\CMS\src\CMSMicroservice.Protobuf\CMSMicroservice.Protobuf.csproj" />
+  </ItemGroup>
+
   <!-- Local Proto Project Reference for development -->
 <!--  <ItemGroup>-->
 <!--    <ProjectReference Include="..\..\..\FrontOffice.BFF\src\Protobufs\FrontOffice.BFF.Package.Protobuf\FrontOffice.BFF.Package.Protobuf.csproj" />-->
diff --git a/src/FrontOffice.Main/Pages/Checkout.razor b/src/FrontOffice.Main/Pages/Checkout.razor
index f138e5b..c268589 100644
--- a/src/FrontOffice.Main/Pages/Checkout.razor
+++ b/src/FrontOffice.Main/Pages/Checkout.razor
@@ -140,7 +140,18 @@
                                        OnClick="ProcessPayment"
                                        Disabled="@(!CanProceedToPayment || _isProcessingPayment || !_selectedPackage.SupportsDirectPurchase)"
                                        Class="mt-2">
-                                @(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین")
+                                @(_isProcessingPayment ? "در حال پردازش..." : "پرداخت آنلاین (زرین‌پال)")
+                            </MudButton>
+
+                            <MudButton Variant="Variant.Filled"
+                                       Color="Color.Info"
+                                       Size="Size.Large"
+                                       FullWidth="true"
+                                       StartIcon="@Icons.Material.Filled.AccountBalance"
+                                       OnClick="ProcessTwentyCardPayment"
+                                       Disabled="@(!CanProceedToPayment || _isProcessingPayment || !_selectedPackage.SupportsDirectPurchase)"
+                                       Class="mt-2">
+                                پرداخت با ۲۰کارت
                             </MudButton>
 
                             @if (_selectedPackage.SupportsDayaPurchase)
diff --git a/src/FrontOffice.Main/Pages/Checkout.razor.cs b/src/FrontOffice.Main/Pages/Checkout.razor.cs
index 5e30af5..a15bf17 100644
--- a/src/FrontOffice.Main/Pages/Checkout.razor.cs
+++ b/src/FrontOffice.Main/Pages/Checkout.razor.cs
@@ -107,6 +107,33 @@ public partial class Checkout
     }
 
     private async Task ProcessPayment()
+        => await StartGatewayPayment(gatewayProvider: null);
+
+    private async Task ProcessTwentyCardPayment()
+    {
+        if (!CanProceedToPayment || _selectedPackage == null)
+        {
+            Snackbar.Add("لطفاً پکیج را انتخاب کنید.", Severity.Warning);
+            return;
+        }
+
+        var options = new DialogOptions
+        {
+            MaxWidth = MaxWidth.Small,
+            FullWidth = true,
+            CloseOnEscapeKey = true,
+            BackdropClick = true
+        };
+
+        var dialog = await DialogService.ShowAsync<Shared.TwentyCardCreditDialog>(
+            string.Empty, options);
+        var result = await dialog.Result;
+        if (result.Canceled) return;
+
+        await StartGatewayPayment(gatewayProvider: "20card");
+    }
+
+    private async Task StartGatewayPayment(string? gatewayProvider)
     {
         if (_isProcessingPayment) return;
 
@@ -120,11 +147,15 @@ public partial class Checkout
 
         try
         {
-            var response = await PackageClient.CustomerPurchasePackageAsync(new CustomerPurchasePackageRequest
+            var request = new CustomerPurchasePackageRequest
             {
                 PackageId = _selectedPackage.Id,
                 PurchaseMethod = PurchaseMethodEnum.PurchaseMethodGateway
-            });
+            };
+            if (!string.IsNullOrWhiteSpace(gatewayProvider))
+                request.GatewayProvider = gatewayProvider;
+
+            var response = await PackageClient.CustomerPurchasePackageAsync(request);
 
             if (!response.Success)
             {
diff --git a/src/FrontOffice.Main/Pages/Profile/Index.razor.cs b/src/FrontOffice.Main/Pages/Profile/Index.razor.cs
index 2f4a266..09708a7 100644
--- a/src/FrontOffice.Main/Pages/Profile/Index.razor.cs
+++ b/src/FrontOffice.Main/Pages/Profile/Index.razor.cs
@@ -421,7 +421,10 @@ public partial class Index
             switch (purchase.Method)
             {
                 case Shared.PackagePurchaseDialog.PaymentMethodType.DirectPayment:
-                    await ProcessDirectPayment(purchase.Package.Id);
+                    await ProcessDirectPayment(purchase.Package.Id, gatewayProvider: null);
+                    break;
+                case Shared.PackagePurchaseDialog.PaymentMethodType.TwentyCard:
+                    await ProcessTwentyCardPayment(purchase.Package.Id);
                     break;
                 case Shared.PackagePurchaseDialog.PaymentMethodType.DayaLoan:
                     await ProcessDayaLoanPayment();
@@ -430,7 +433,25 @@ public partial class Index
         }
     }
 
-    private async Task ProcessDirectPayment(long packageId)
+    private async Task ProcessTwentyCardPayment(long packageId)
+    {
+        var options = new DialogOptions
+        {
+            MaxWidth = MaxWidth.Small,
+            FullWidth = true,
+            CloseOnEscapeKey = true,
+            BackdropClick = true
+        };
+
+        var dialog = await DialogService.ShowAsync<Shared.TwentyCardCreditDialog>(
+            string.Empty, options);
+        var result = await dialog.Result;
+        if (result.Canceled) return;
+
+        await ProcessDirectPayment(packageId, gatewayProvider: "20card");
+    }
+
+    private async Task ProcessDirectPayment(long packageId, string? gatewayProvider = null)
     {
         if (_isProcessingPayment) return;
 
@@ -439,11 +460,15 @@ public partial class Index
 
         try
         {
-            var response = await PackageContract.CustomerPurchasePackageAsync(new CustomerPurchasePackageRequest
+            var request = new CustomerPurchasePackageRequest
             {
                 PackageId = packageId,
                 PurchaseMethod = PurchaseMethodEnum.PurchaseMethodGateway
-            });
+            };
+            if (!string.IsNullOrWhiteSpace(gatewayProvider))
+                request.GatewayProvider = gatewayProvider;
+
+            var response = await PackageContract.CustomerPurchasePackageAsync(request);
 
             if (!response.Success)
             {
diff --git a/src/FrontOffice.Main/Pages/Profile/PaymentCallback.razor b/src/FrontOffice.Main/Pages/Profile/PaymentCallback.razor
index c70178f..3ca2632 100644
--- a/src/FrontOffice.Main/Pages/Profile/PaymentCallback.razor
+++ b/src/FrontOffice.Main/Pages/Profile/PaymentCallback.razor
@@ -85,6 +85,10 @@
     
     [SupplyParameterFromQuery(Name = "Status")]
     private string? Status { get; set; }
+
+    /// <summary>۲۰کارت callback — هم‌معنی Status زرین‌پال</summary>
+    [SupplyParameterFromQuery(Name = "PaymentStatus")]
+    private string? PaymentStatus { get; set; }
     
     private bool _isLoading = true;
     private bool _isSuccess;
@@ -132,6 +136,10 @@
     {
         try
         {
+            // ۲۰کارت: PaymentStatus؛ زرین‌پال: Status
+            if (string.IsNullOrWhiteSpace(Status) && !string.IsNullOrWhiteSpace(PaymentStatus))
+                Status = PaymentStatus;
+
             // تعیین نوع پرداخت — اگر type نباشد، پیش‌فرض خرید پکیج
             var type = PaymentType?.ToLowerInvariant() ?? "package";
             
diff --git a/src/FrontOffice.Main/Shared/PackagePurchaseDialog.razor b/src/FrontOffice.Main/Shared/PackagePurchaseDialog.razor
index c997ff1..5230825 100644
--- a/src/FrontOffice.Main/Shared/PackagePurchaseDialog.razor
+++ b/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);
 }
diff --git a/src/FrontOffice.Main/Shared/TwentyCardCreditDialog.razor b/src/FrontOffice.Main/Shared/TwentyCardCreditDialog.razor
new file mode 100644
index 0000000..1f9b13f
--- /dev/null
+++ b/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();
+}
diff --git a/src/FrontOffice.Main/appsettings.Production.json b/src/FrontOffice.Main/appsettings.Production.json
index 6f08557..3411fe9 100644
--- a/src/FrontOffice.Main/appsettings.Production.json
+++ b/src/FrontOffice.Main/appsettings.Production.json
@@ -1,6 +1,9 @@
 {
   "GwUrl": "https://cms.kbs1.ir",
   "DownloadUrl": "",
+  "TwentyCard": {
+    "CreditPortalUrl": "https://20card.ir"
+  },
   "EncryptionSettings": {
     "Key": "kmcQ3XTmH4mrdh8VHziuscyf8LLYjG//Kyni81nH/0E=",
     "IV": "1wyF3Tt142MOkCpIyCxh/g=="
diff --git a/src/FrontOffice.Main/appsettings.Staging.json b/src/FrontOffice.Main/appsettings.Staging.json
index f07c714..038c752 100644
--- a/src/FrontOffice.Main/appsettings.Staging.json
+++ b/src/FrontOffice.Main/appsettings.Staging.json
@@ -6,6 +6,9 @@
   },
   "GwUrl": "https://cms.se.kbs1.ir",
   "DownloadUrl": "",
+  "TwentyCard": {
+    "CreditPortalUrl": "https://20card.ir"
+  },
   "EncryptionSettings": {
     "Key": "kmcQ3XTmH4mrdh8VHziuscyf8LLYjG//Kyni81nH/0E=",
     "IV": "1wyF3Tt142MOkCpIyCxh/g=="
diff --git a/src/FrontOffice.Main/appsettings.json b/src/FrontOffice.Main/appsettings.json
index a8b7510..9ecc7ab 100644
--- a/src/FrontOffice.Main/appsettings.json
+++ b/src/FrontOffice.Main/appsettings.json
@@ -6,6 +6,9 @@
   },
   "GwUrl": "https://cms.se.kbs1.ir",
   "DownloadUrl": "",
+  "TwentyCard": {
+    "CreditPortalUrl": "https://20card.ir"
+  },
   "EncryptionSettings": {
     "Key": "kmcQ3XTmH4mrdh8VHziuscyf8LLYjG//Kyni81nH/0E=",
     "IV": "1wyF3Tt142MOkCpIyCxh/g=="