Update shipping method selection page to support shipping options

Author: mattbrailsford

src/Umbraco.Commerce.Checkout/Client/src/js/uccheckout.js

@@ -1,4 +1,4 @@
-(function () {
+(function () {
 
     // Initialization
     function init() {
@@ -34,6 +34,13 @@
             h();
         });
 
+        // Update shippingOptionId based on selected shipping method
+        document.querySelectorAll("input[name=shippingMethod]").forEach(el => {
+          var h = () => { document.querySelector("input[name=shippingOptionId]").value = document.querySelector("input[name=shippingMethod]:checked").dataset.optionId; }
+          el.addEventListener("change", h);
+          if (el.checked) h();
+        });
+
         // Enable / disable continue button when accepting terms
         var acceptTermsEl = document.getElementById("accept-terms");
         if (acceptTermsEl) {

src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout/UmbracoCommerceCheckoutShippingMethodPage.cshtml

@@ -32,6 +32,10 @@
                 ? shippingCountry.DefaultShippingMethodId.Value
                 : shippingMethods.FirstOrDefault()?.Id;
 
+    var currentShippinOptionId = currentShippingMethodId.HasValue && currentOrder.ShippingInfo.ShippingMethodId.HasValue && currentShippingMethodId == currentOrder.ShippingInfo.ShippingMethodId
+        ? currentOrder.ShippingInfo.ShippingOption?.Id
+        : null;
+
     var checkoutPage = Model.GetCheckoutPage();
     var nextStepPage = Model.GetNextStepPage();
 }
@@ -44,15 +48,55 @@
     <ul class="border border-gray-300 rounded">
         @foreach (var item in shippingMethods.Select((sm, i) => new { ShippingMethod = sm, Index = i }))
         {
-            <li class="border-gray-300 @(item.Index > 0 ? "border-t " : "")">
-                <label class="flex items-center py-4 px-4 cursor-pointer hover:bg-gray-50">
-                    <input name="shippingMethod" type="radio" value="@item.ShippingMethod.Id" class="mr-3" @Html.Raw(currentShippingMethodId.HasValue && currentShippingMethodId.Value == item.ShippingMethod.Id ? "checked=\"checked\"" : "") required />
-                    <span class="font-medium">@(item.ShippingMethod.Name)</span>
-                    <span class="flex-1 text-right">@(item.ShippingMethod.CalculatePrice()?.Formatted())</span>
-                </label>
-            </li>
+            var rates = item.ShippingMethod.TryCalculateRates(currentOrder);
+            if (rates.Success)
+            {
+                foreach (var rate in rates.Result)
+                {
+                    var isSelected = false;
+
+                    if (currentShippingMethodId.HasValue && currentShippingMethodId.Value == item.ShippingMethod.Id)
+                    {
+                        if (rate.Option != null)
+                        {
+                            if (currentShippinOptionId == null)
+                            {
+                                currentShippinOptionId = rate.Option?.Id;
+                                isSelected = true;
+                            }
+                            else if (currentShippinOptionId == rate.Option?.Id)
+                            {
+                                isSelected = true;
+                            }
+                        }
+                        else
+                        {
+                            isSelected = true;
+                        }
+                    }
+
+                    <li class="border-gray-300 @(item.Index > 0 ? "border-t " : "")">
+                        <label class="flex items-center py-4 px-4 cursor-pointer hover:bg-gray-50">
+                            <input name="shippingMethod" type="radio" value="@item.ShippingMethod.Id"
+                                data-option-id="@rate.Option?.Id"
+                                class="mr-3" required 
+                                @Html.Raw(isSelected ? " checked=\"checked\"" : "") />
+                            <span class="font-medium">
+                                @(item.ShippingMethod.Name)
+                                @if (rate.Option != null)
+                                {
+                                    <text> - @rate.Option.Name</text>
+                                }
+                            </span>
+                            <span class="flex-1 text-right">@(rate.Value?.Formatted())</span>
+                        </label>
+                    </li>
+                }
+            }
         }
     </ul>
+
+    <input type="hidden" name="shippingOptionId" value="@(currentShippinOptionId)" />
 
     @Html.Partial("~/Views/UmbracoCommerceCheckout/Partials/UmbracoCommerceCheckoutPrevNext.cshtml")
 }

src/Umbraco.Commerce.Checkout/Web/Controllers/UmbracoCommerceCheckoutSurfaceController.cs

@@ -17,6 +17,7 @@
 using Umbraco.Extensions;
 
 using UmbracoCommerceConstants = Umbraco.Commerce.Core.Constants;
+using Umbraco.Commerce.Common.Models;
 
 namespace Umbraco.Commerce.Checkout.Web.Controllers
 {
@@ -183,8 +184,26 @@ public IActionResult UpdateOrderShippingMethod(UccUpdateOrderShippingMethodDto m
                     var checkoutPage = CurrentPage.GetCheckoutPage();
                     var store = CurrentPage.GetStore();
                     var order = _commerceApi.GetCurrentOrder(store.Id)
-                        .AsWritable(uow)
-                        .SetShippingMethod(model.ShippingMethod);
+                        .AsWritable(uow);
+
+                    if (!model.ShippingOptionId.IsNullOrWhiteSpace())
+                    {
+                        var shippingMethod = _commerceApi.GetShippingMethod(model.ShippingMethod);
+                        var shippingRateAttempt = shippingMethod.TryCalculateRate(model.ShippingOptionId, order);
+
+                        if (shippingRateAttempt.Success)
+                        {
+                            order.SetShippingMethod(model.ShippingMethod, shippingRateAttempt.Result.Option);
+                        }
+                        else
+                        {
+                            throw new ValidationException(new[] { new ValidationError("Unable to locate the selected shipping option") });
+                        }
+                    }
+                    else
+                    {
+                        order.SetShippingMethod(model.ShippingMethod);
+                    }
 
                     _commerceApi.SaveOrder(order);
 

src/Umbraco.Commerce.Checkout/Web/Dtos/UccUpdateOrderShippingMethodDto.cs

@@ -6,6 +6,8 @@ public class UccUpdateOrderShippingMethodDto
     {
         public Guid ShippingMethod { get; set; }
 
+        public string ShippingOptionId { get; set; }
+
         public Guid? NextStep { get; set; }
     }
 }