MPGS-430: Fix for the mobile view for saved card

Mastercard-Gateway · Sep 6, 2021 · 64fb1e2 · 64fb1e2
1 parent faffe69
commit 64fb1e2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 8 deletions.
diff --git a/views/css/style.css b/views/css/style.css
@@ -343,16 +343,16 @@ body#checkout section.checkout-step .payment-options .simplify-cc-details label.
     margin-bottom: 15px;
 }
 
-#simplify-payment-form  #simplify-cc-details .save-card-container input[type="checkbox"] {
+#simplify-payment-form #simplify-cc-details .save-card-container input[type="checkbox"] {
     margin-right: 0.5rem;
     margin-bottom: 3px;
 }
 
-#simplify-payment-form  #simplify-cc-details .save-card-container {
+#simplify-payment-form #simplify-cc-details .save-card-container {
     margin-top: 1rem;
 }
 
-#simplify-payment-form  #simplify-cc-details .save-card-container .save-label {
+#simplify-payment-form #simplify-cc-details .save-card-container .save-label {
     text-transform: none;
 }
 
@@ -942,3 +942,44 @@ i.simplifyFormContainer mg.enable {
 .simplify-form-container .simplify-new-card-container iframe {
     -webkit-appearance: none;
 }
+
+@media (max-width: 480px) {
+    body#checkout .simplifyFormContainer.box.additional-information {
+        margin-left: 0;
+    }
+
+    .simplify-form-container .simplify-card-selector {
+        padding: 1rem;
+    }
+
+    .card-detail {
+        max-width: 60px;
+    }
+
+    .simplify-form-container .simplify-card-selector .card-deletion-confirmation {
+        height: 6rem;
+        flex-wrap: wrap;
+    }
+
+    .simplify-form-container .simplify-card-selector .card-deletion-confirmation small {
+        width: 100%;
+    }
+
+    .simplify-form-container .simplify-card-selector .card-deletion-confirmation .card-deletion-actions {
+        display: flex;
+        width: 100%;
+    }
+
+    .simplify-form-container .simplify-card-selector .card-deletion-confirmation .card-deletion-actions .card-deletion-action {
+        width: 50%;
+        display: block;
+        text-align: center;
+        border: 1px solid #cccccc;
+        height: 2rem;
+        line-height: 1.9rem;
+    }
+
+    .simplify-form-container .simplify-saved-card-deletion-confirmation {
+        white-space: nowrap;
+    }
+}
diff --git a/views/js/simplify.embedded.js b/views/js/simplify.embedded.js
@@ -98,7 +98,8 @@ $(function () {
 
     elements.newCardSelector.on('click', function () {
         setState({
-            chosenPaymentOption: PAYMENT_OPTION_NEW
+            chosenPaymentOption: PAYMENT_OPTION_NEW,
+            isCardDeletionInProgress: false
         });
     });
 
@@ -119,23 +120,26 @@ $(function () {
         setState({
             isCardDeletionInProgress: true,
             isCardDeleted: false,
-        })
+        });
+        return false;
     });
 
     elements.savedCardDeletionUndoAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: false,
             isCardDeleted: false,
-        })
+        });
+        return false;
     });
 
     elements.savedCardCancelDeletionAction.on('click', function (e) {
         e.stopPropagation();
         setState({
             isCardDeletionInProgress: false,
             isCardDeleted: false,
-        })
+        });
+        return false;
     });
 
     elements.savedCardConfirmDeletionAction.on('click', function (e) {
@@ -144,7 +148,8 @@ $(function () {
             isCardDeletionInProgress: true,
             isCardDeleted: true,
             chosenPaymentOption: PAYMENT_OPTION_NEW,
-        })
+        });
+        return false;
     });
 
     elements.paymentSubmitAction.on('click', function (e) {