Bug 1429213 - Implement the 'unknown' screen for when the merchant rejects the payment. r=MattN
authorJared Wein <jwein@mozilla.com>
Tue, 20 Mar 2018 18:38:28 -0400
changeset 409107 4cf36c1b89d53f85fa90ef384507dd9694bbdd2f
parent 409106 f1ea4c4525d6b92a39e513390aa00fcfb6c306fd
child 409108 803f2dfa6e1298ed21ff9d864a90073116942be6
push id33675
push usertoros@mozilla.com
push dateWed, 21 Mar 2018 09:40:24 +0000
treeherdermozilla-central@f4ddf30ecf57 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1429213
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1429213 - Implement the 'unknown' screen for when the merchant rejects the payment. r=MattN MozReview-Commit-ID: KHf0NtE2Kir
toolkit/components/payments/res/containers/payment-dialog.js
toolkit/components/payments/res/debugging.html
toolkit/components/payments/res/debugging.js
toolkit/components/payments/res/paymentRequest.css
toolkit/components/payments/res/paymentRequest.xhtml
toolkit/components/payments/test/mochitest/test_payment_dialog.html
--- a/toolkit/components/payments/res/containers/payment-dialog.js
+++ b/toolkit/components/payments/res/containers/payment-dialog.js
@@ -167,16 +167,17 @@ class PaymentDialog extends PaymentState
 
   _renderPayButton(state) {
     this._payButton.disabled = state.changesPrevented;
     switch (state.completionState) {
       case "initial":
       case "processing":
       case "success":
       case "fail":
+      case "unknown":
         break;
       default:
         throw new Error("Invalid completionState");
     }
 
     this._payButton.textContent = this._payButton.dataset[state.completionState + "Label"];
   }
 
--- a/toolkit/components/payments/res/debugging.html
+++ b/toolkit/components/payments/res/debugging.html
@@ -34,11 +34,12 @@
       <h1>States</h1>
       <button id="setChangesPrevented">Prevent changes</button>
       <button id="setChangesAllowed">Allow changes</button>
       <button id="setShippingError">Shipping Error</button>
       <button id="setStateDefault">Default</button>
       <button id="setStateProcessing">Processing</button>
       <button id="setStateSuccess">Success</button>
       <button id="setStateFail">Fail</button>
+      <button id="setStateUnknown">Unknown</button>
     </div>
   </body>
 </html>
--- a/toolkit/components/payments/res/debugging.js
+++ b/toolkit/components/payments/res/debugging.js
@@ -318,16 +318,22 @@ let buttonActions = {
     });
   },
 
   setStateFail() {
     requestStore.setState({
       completionState: "fail",
     });
   },
+
+  setStateUnknown() {
+    requestStore.setState({
+      completionState: "unknown",
+    });
+  },
 };
 
 window.addEventListener("click", function onButtonClick(evt) {
   let id = evt.target.id;
   if (!id || typeof(buttonActions[id]) != "function") {
     return;
   }
 
--- a/toolkit/components/payments/res/paymentRequest.css
+++ b/toolkit/components/payments/res/paymentRequest.css
@@ -78,16 +78,17 @@ payment-dialog > footer {
 
 #pay {
   background-color: #0060df;
   color: white;
   border: none;
 }
 
 payment-dialog[changes-prevented][completion-state="fail"] #pay,
+payment-dialog[changes-prevented][completion-state="unknown"] #pay,
 payment-dialog[changes-prevented][completion-state="processing"] #pay,
 payment-dialog[changes-prevented][completion-state="success"] #pay {
   /* Show the pay button above #disabled-overlay */
   position: relative;
   z-index: 1;
 }
 
 #disabled-overlay {
--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -11,16 +11,17 @@
   <!ENTITY shippingOptionsLabel       "Shipping Options">
   <!ENTITY paymentMethodsLabel        "Payment Method">
   <!ENTITY payerLabel                 "Contact Information">
   <!ENTITY cancelPaymentButton.label   "Cancel">
   <!ENTITY approvePaymentButton.label  "Pay">
   <!ENTITY processingPaymentButton.label "Processing">
   <!ENTITY successPaymentButton.label    "Done">
   <!ENTITY failPaymentButton.label       "Fail">
+  <!ENTITY unknownPaymentButton.label    "Unknown">
   <!ENTITY orderDetailsLabel          "Order Details">
   <!ENTITY orderTotalLabel            "Total">
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Security-Policy" content="default-src 'self'"/>
   <title></title>
   <link rel="stylesheet" href="paymentRequest.css"/>
@@ -92,16 +93,17 @@
         </section>
 
         <footer id="controls-container">
           <button id="cancel">&cancelPaymentButton.label;</button>
           <button id="pay"
                   data-initial-label="&approvePaymentButton.label;"
                   data-processing-label="&processingPaymentButton.label;"
                   data-fail-label="&failPaymentButton.label;"
+                  data-unknown-label="&unknownPaymentButton.label;"
                   data-success-label="&successPaymentButton.label;"></button>
         </footer>
       </section>
       <section id="order-details-overlay" hidden="hidden">
         <h1>&orderDetailsLabel;</h1>
         <order-details></order-details>
       </section>
     </div>
--- a/toolkit/components/payments/test/mochitest/test_payment_dialog.html
+++ b/toolkit/components/payments/test/mochitest/test_payment_dialog.html
@@ -35,16 +35,17 @@ Test the payment-dialog custom element
 /* import-globals-from ../../res/mixins/PaymentStateSubscriberMixin.js */
 
 let el1;
 
 let completionStates = [
     ["processing", "Processing"],
     ["success", "Done"],
     ["fail", "Fail"],
+    ["unknown", "Unknown"],
 ];
 
 /* test that:
   the view-all-items button exists
   that clicking it changes the state on the store
   that clicking it causes render to be called
 
   that order details element's hidden state matches the state on the store