updated payment ui

apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/Default.cshtml

@@ -12,40 +12,47 @@
 <div class="row">
     <div class="col-lg-9">
         <div class="address-list p-5">
-            <h3>Select Address</h3>
+            <h5>Select Address</h5>
-            @for (int i = 0; i < Math.Ceiling(Model.Address.Count / (double) defaultColumnSize); i++)
+            <abp-row>
-            {
+                @foreach (var address in Model.Address)
-                <abp-row>
+                {
-                    @for (int j = 0; j < defaultColumnSize; j++)
+                    string isSelectedAddressClass = address.IsDefault ? "is-selected" : string.Empty;
-                    {
+                    <abp-column size="_3">
-                        <abp-column size-lg="_3" size-md="_4" size-sm="_6">
+                        <div class="card @isSelectedAddressClass" data-address-id="@address.Id">
-                            @if (i * defaultColumnSize + j < Model.Address.Count)
+                            <div class="card-header">
-                            {
+                                <h4>@address.Type</h4>
-                                var address = Model.Address[(i * defaultColumnSize) + j];
+                            </div>
-                                string isSelected = address.IsDefault ? "is-selected" : string.Empty;
+                            <div class="card-body">
-                                <div class="card @isSelected" data-address-id="@address.Id">
+                                <p class="card-text">@address.ToString()</p>
-                                    <div class="card-header"><h4>@address.Type</h4></div>
+                            </div>
-                                    <div class="card-body">
+                            <div class="card-footer">@address.Type</div>
-                                        <p class="card-text">@address.ToString()</p>
+                        </div>
-                                    </div>
+                    </abp-column>
-                                    <div class="card-footer">@address.Description</div>
+                }
-                                </div>
+            </abp-row>
-                            }
-                        </abp-column>
-                    }
-                </abp-row>
-            }
         </div>
 
         <div class="payment-list p-5">
-            <h3>Select Payment Method</h3>
+            <h5>Select Payment Method</h5>
             <abp-row>
-                <abp-column size-lg="_3" size-md="_4" size-sm="_6">
+                @foreach (var paymentType in Model.PaymentTypes)
-                    <abp-card class="is-selected" data-payment-id="1">
+                {
-                    <img class="" src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="paypal logo">
+                    string isSelectedClass = paymentType.IsDefault ? "is-selected" : "";
-                    </abp-card>
+                    <abp-column size="_2">
-                </abp-column>
+                        <abp-card class="@isSelectedClass" data-payment-id="@paymentType.Id">
+                            <abp-card-body>
+                                <p class="card-title payment-type-header" style="text-align: center">
+                                    @paymentType.Name
+                                </p>
+                                <p class="card-text">
+                                    <i class="fa fa-5x @paymentType.IconCss"></i>
+                                </p>
+                            </abp-card-body>
+                        </abp-card>
+                    </abp-column>
+                }
             </abp-row>
+
         </div>
     </div>
     <div class="col-lg-3">

apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetViewComponent.cs

@@ -18,19 +18,25 @@ public class PaymentWidgetViewComponent : AbpViewComponent
 {
     private readonly UserBasketProvider _userBasketProvider;
     private readonly UserAddressProvider _userAddressProvider;
+    private readonly PaymentTypeProvider _paymentTypeProvider;
 
-    public PaymentWidgetViewComponent(UserBasketProvider userBasketProvider, UserAddressProvider userAddressProvider)
+    public PaymentWidgetViewComponent(
+        UserBasketProvider userBasketProvider,
+        UserAddressProvider userAddressProvider,
+        PaymentTypeProvider paymentTypeProvider)
     {
         _userBasketProvider = userBasketProvider;
         _userAddressProvider = userAddressProvider;
+        _paymentTypeProvider = paymentTypeProvider;
     }
 
     public async Task<IViewComponentResult> InvokeAsync()
     {
-        var viewModel = new PaymentViewModel()
+        var viewModel = new PaymentViewModel
         {
             Basket = await _userBasketProvider.GetBasketAsync(),
-            Address = _userAddressProvider.GetDemoAddresses()
+            Address = _userAddressProvider.GetDemoAddresses(),
+            PaymentTypes = _paymentTypeProvider.GetPaymentTypes()
         };
         return View("~/Components/Payment/Default.cshtml", viewModel);
     }
@@ -40,4 +46,5 @@ public class PaymentViewModel
 {
     public BasketDto Basket { get; set; }
     public List<AddressDto> Address { get; set; }
+    public List<PaymentType> PaymentTypes { get; set; }
 }

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml

@@ -11,7 +11,6 @@
 }
 
 <div class="row">
-    @* <h3 class="pt-5 pb-4 text-center">@L["Payment"]</h3> *@
     <div id="PaymentArea" class="pt-5">
         @await Component.InvokeAsync(typeof(PaymentWidgetViewComponent))
     </div>

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml.cs

@@ -59,7 +59,7 @@ public class PaymentModel : AbpPageModel
 
         var placedOrder = await _orderAppService.CreateAsync(new OrderCreateDto()
         {
-            PaymentTypeId = 1, // Paypal
+            PaymentTypeId = model.SelectedPaymentId, 
             Address = GetUserAddress(model.SelectedAddressId),
             Products = productItems
         });

apps/public-web/src/EShopOnAbp.PublicWeb/ServiceProviders/PaymentTypeProvider.cs

@@ -0,0 +1,24 @@
+using System.Collections.Generic;
+using Volo.Abp.DependencyInjection;
+
+namespace EShopOnAbp.PublicWeb.ServiceProviders;
+
+public class PaymentTypeProvider : ITransientDependency
+{
+    public List<PaymentType> GetPaymentTypes()
+    {
+        return new List<PaymentType>
+        {
+            new() {Id = 0, Name = "Demo", IconCss = "fa-credit-card demo", IsDefault = true},
+            new() {Id = 1, Name = "Paypal", IconCss = "fa-cc-paypal paypal"}
+        };
+    }
+}
+
+public class PaymentType
+{
+    public int Id { get; set; }
+    public string Name { get; set; }
+    public string IconCss { get; set; }
+    public bool IsDefault { get; set; } = false;
+}

apps/public-web/src/EShopOnAbp.PublicWeb/ServiceProviders/UserAddressProvider.cs

@@ -26,8 +26,7 @@ public class UserAddressProvider : ITransientDependency
                 Street = "Yeşilköy Serbest Bölge Mah. E-Blok Sk. Bakırköy",
                 City = "İstanbul",
                 Country = "Turkey",
-                ZipCode = "34149",
+                ZipCode = "34149"
-                Description = "Near Ataturk Airport"
             }
         };
     }
@@ -38,7 +37,6 @@ public class AddressDto
     public int Id { get; set; }
     public string Type { get; set; }
     public bool IsDefault { get; set; } = false;
-    public string Description { get; set; }
     public string Street { get; set; }
     public string City { get; set; }
     public string Country { get; set; }

apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.css

@@ -17,4 +17,16 @@
 
 .is-selected {
     border: solid #bfbfe3;
+}
+
+.payment-type-header {
+    font-weight: 500;
+}
+
+.paypal {
+    color: #6c84fa;
+}
+
+.demo {
+    color: darkgray;
 }

apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.js

@@ -6,12 +6,20 @@
             $wrapper
                 .find('.address-list .card')
                 .click(function () {
-                    var $this = $(this);
+                    const $this = $(this);
-                    var addressId = $this.attr('data-address-id');
+                    // const addressId = $this.attr('data-address-id');
-                    abp.utils.setCookieValue("selected-address", addressId);
                     $this.parents(".address-list").find('.card').removeClass("is-selected");
                     $this.addClass("is-selected");
                 });
+
+            $wrapper
+                .find('.payment-list .card')
+                .click(el => {
+                    const $this = $(el.currentTarget);
+                    // const paymentTypeId = $this.attr('data-payment-id');
+                    $this.parents(".payment-list").find('.card').removeClass("is-selected");
+                    $this.addClass("is-selected");
+                });
         };
 
         return {