updated addressProvider and address selection

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

@@ -11,13 +11,15 @@ public class UserAddressProvider : ITransientDependency
         {
             new()
             {
-                Name = "Home",
+                Id = 1,
+                Name = EShopOnAbpPaymentConsts.DemoAddressTypes.Work,
                 Description = "Cecilia Chapman Senior 711-2880 Nulla St. Mankato Mississippi 96522/USA",
                 IsDefault = true
             },
             new()
             {
-                Name = "Work",
+                Id = 2,
+                Name = EShopOnAbpPaymentConsts.DemoAddressTypes.Work,
                 Description = "Yeşilköy Serbest Bölge Mah. E-Blok Sokak E1 Blok No:2, Bakırköy/İstanbul"
             }
         };
@@ -26,6 +28,7 @@ public class UserAddressProvider : ITransientDependency
 
 public class AddressDto
 {
+    public int Id { get; set; }
     public string Name { get; set; }
     public string Description { get; set; }
     public bool IsDefault { get; set; } = false;

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

@@ -19,11 +19,11 @@
                     @for (int j = 0; j < defaultColumnSize; j++)
                     {
                         <abp-column size-lg="_3" size-md="_4" size-sm="_6">
-                            @if ((i * defaultColumnSize) + j < Model.Address.Count)
+                            @if (i * defaultColumnSize + j < Model.Address.Count)
                             {
                                 var address = Model.Address[(i * defaultColumnSize) + j];
                                 string isSelected = address.IsDefault ? "is-selected" : string.Empty;
-                                <div class="card @isSelected">
+                                <div class="card @isSelected" data-address-id="@address.Id">
                                     <div class="card-body">
                                         <h4 class="card-title">@address.Name</h4>
                                         <p class="card-text">@address.Description</p>

apps/public-web/src/EShopOnAbp.PublicWeb/EShopOnAbpPaymentConsts.cs

@@ -3,5 +3,11 @@
     public static class EShopOnAbpPaymentConsts
     {
         public const string Currency = "USD";
+
+        public static class DemoAddressTypes
+        {
+            public const string Work = "Work";
+            public const string Home = "Home";
+        }
     }
 }

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

@@ -1,18 +1,20 @@
 .card {
     /* Add shadows to create the "card" effect */
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
 }
 
 /* On mouse-over, add a deeper shadow */
 .card:hover {
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    cursor: default;
 }
 
 /* Add some padding inside the card container */
 .card-body {
     padding: 2px 16px;
 }
-.is-selected{
+
+.is-selected {
     border: solid #bfbfe3;
 }

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

@@ -1,3 +1,22 @@
 (function () {
-    
+    abp.widgets.PaymentWidget = function ($wrapper) {
+        var widgetManager = $wrapper.data('abp-widget-manager');
+
+        var init = function (filters) {
+            $wrapper
+                .find('.address-list .card')
+                .click(function () {
+                    var $this = $(this);
+                    var addressId = $this.attr('data-address-id');
+                    abp.utils.setCookieValue("selected-address", addressId);
+                    debugger;
+                    $this.parents(".address-list").find('.card').removeClass("is-selected");
+                    $this.addClass("is-selected");
+                });
+        };
+
+        return {
+            init: init
+        };
+    };
 })();