Closes #497

Author: Michael-Herzog

src/Plugins/SmartStore.PayPal/Views/PayPalDirect/PaymentInfo.Mobile.cshtml

@@ -17,7 +17,6 @@
 <div data-role="fieldcontain">
     <fieldset data-role="controlgroup" data-type="horizontal">
         @Html.DropDownListFor(model => model.ExpireMonth, Model.ExpireMonths)
-        /
         @Html.DropDownListFor(model => model.ExpireYear, Model.ExpireYears)
     </fieldset>
 </div>

src/Presentation/SmartStore.Web/Themes/Mobile/Content/styles.css

@@ -161,6 +161,13 @@
 .checkout-data .payment-info{text-align:left;height:auto;}
 .checkout-data .payment-info .body{text-align:left;vertical-align:text-top;}
 .checkout-data .payment-info .select-button{text-align:left;}
+.checkout-data .payment-method-info .pull-left {  
+    float: left;  
+    margin: 0 10px 10px 15px;
+}
+.checkout-data .payment-method-info .media-body {
+    margin: 5px 10px 10px 15px;
+}
 .checkout-data .confirm-order{text-align:left;height:auto;}
 .checkout-data .confirm-order .select-button{text-align:left;}
 .checkout-data .confirm-order .message-error{text-align:left;}

src/Presentation/SmartStore.Web/Views/Checkout/PaymentMethod.Mobile.cshtml

@@ -31,14 +31,19 @@
                         @for (int i = 0; i < Model.PaymentMethods.Count; i++)
                         {
                             var paymentMethod = Model.PaymentMethods[i];
+                            var infoRoute = paymentMethod.PaymentInfoRoute;
                             var paymentMethodName = paymentMethod.Name;
                             if (!String.IsNullOrEmpty(paymentMethod.Fee))
                             {
                                 paymentMethodName = string.Format("{0} ({1})", paymentMethodName, paymentMethod.Fee);
                             }
                             <div class="payment-method-item">
                                 <div class="option-name">
-                                    <input id="paymentmethod_@(i)" type="radio" name="paymentmethod" value="@(paymentMethod.PaymentMethodSystemName)" checked="@paymentMethod.Selected" />
+                                    <input id="paymentmethod_@(i)" type="radio" name="paymentmethod"
+                                           data-has-info='@(infoRoute != null ? "true" : "false")'
+                                           data-lazy-info='@(paymentMethod.RequiresInteraction ? "true" : "false")'
+                                           class="opt-radio"
+                                           value="@(paymentMethod.PaymentMethodSystemName)" checked="@paymentMethod.Selected" />
                                     <label for="paymentmethod_@(i)">
 										@paymentMethodName
 									</label>
@@ -49,7 +54,21 @@
 										</div>
 									}
                                 </div>
-                            </div>
+                                @if (!paymentMethod.RequiresInteraction || (paymentMethod.Selected && infoRoute != null))
+                                {
+                                    <div class="payment-method-item payment-method-info"
+                                         @Html.Attr("data-lazy-info", "true", paymentMethod.RequiresInteraction)
+                                         data-system-name="@paymentMethod.PaymentMethodSystemName">
+                                        @if (paymentMethod.Selected && !ViewData.ModelState.IsValid)
+                                        {
+                                            <div id="payment-info-validation-summary">
+                                                @Html.ValidationSummary(false)
+                                            </div>
+                                        }
+                                        @Html.Action(infoRoute.Action, infoRoute.Controller, infoRoute.RouteValues)
+                                    </div>
+                                }
+                            </div> 
                         }
                         <div class="select-button">
                             <input type="submit" name="nextstep" value="@T("Checkout.NextButton")" />
@@ -67,3 +86,70 @@
         }
     </div>
 </div>
+
+<script>
+	$(function () {
+
+		var validationSummary = $('#payment-info-validation-summary');
+
+		if (validationSummary.length) {
+			$.scrollTo(validationSummary, 600, { offset: -100 });
+		}
+
+		$('.checkout-data .opt-radio').on('change', function (e) {
+			var radio = $(this);
+			var systemName = radio.val();
+
+			function removeInfoPanels() {
+			    $('.checkout-data .payment-method-item').each(function (i, val) {
+					var el = $(val);
+					if (el.data('system-name') != systemName && el.data('lazy-info')) {
+						el.remove();
+					}
+				});
+			}
+
+			$('.checkout-data .payment-method-item').removeClass('selected');
+
+			var item = radio.closest('.payment-method-item');
+			item.addClass("selected");
+
+			if (!radio.data("has-info") || !radio.data("lazy-info")) {
+				removeInfoPanels();
+				return;
+			}
+
+			$.ajax({
+				type: 'POST',
+				cache: false,
+				dataType: 'html',
+				async: false,
+				url: '@Url.Action("PaymentInfoAjax")',
+				data: { paymentMethodSystemName: systemName },
+				success: function (html) {
+					if (!html)
+						return;
+
+					var panel = item.find('.payment-method-item');
+
+					if (panel.length == 0) {
+					    panel = $('<div class="payment-method-item payment-method-info"></div>')
+							.appendTo(item)
+							.data('system-name', systemName)
+							.data('lazy-info', true);
+					}
+
+					panel.html(html);
+					panel.trigger('create'); 
+				},
+				error: function (xhr, ajaxOptions, thrownError) {
+					console.error(thrownError);
+				},
+				complete: function () {
+					// remove all other info containers
+					removeInfoPanels();
+				}
+			});
+		});
+	});
+</script>