Bug 1459253 - Hide the 'View All Items' button when there are no display items. r=MattN
authorprathiksha <prathikshaprasadsuman@gmail.com>
Tue, 08 May 2018 16:11:43 -0700
changeset 417772 db808e8d92b42bf899350a1148b975140c46f1a0
parent 417771 d9db16ca4471aab712d5b57448bf1967c6e48916
child 417773 0f11165c90a147d9f163ed4d5339bd7e8d1b9d1c
push id33980
push userebalazs@mozilla.com
push dateFri, 11 May 2018 09:35:12 +0000
treeherdermozilla-central@8e9a4a323f0c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1459253
milestone62.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 1459253 - Hide the 'View All Items' button when there are no display items. r=MattN MozReview-Commit-ID: JJ8bdCSs8an
browser/components/payments/res/containers/payment-dialog.js
browser/components/payments/test/mochitest/test_payment_dialog.html
--- a/browser/components/payments/res/containers/payment-dialog.js
+++ b/browser/components/payments/res/containers/payment-dialog.js
@@ -105,16 +105,25 @@ export default class PaymentDialog exten
   }
 
   changeShippingOption(optionID) {
     paymentRequest.changeShippingOption({
       optionID,
     });
   }
 
+  _getAdditionalDisplayItems(state) {
+    let methodId = state.selectedPaymentCard;
+    let modifier = paymentRequest.getModifierForPaymentMethod(state, methodId);
+    if (modifier && modifier.additionalDisplayItems) {
+      return modifier.additionalDisplayItems;
+    }
+    return [];
+  }
+
   /**
    * Set some state from the privileged parent process.
    * Other elements that need to set state should use their own `this.requestStore.setState`
    * method provided by the `PaymentStateSubscriberMixin`.
    *
    * @param {object} state - See `PaymentsStore.setState`
    */
   setStateFromParent(state) {
@@ -231,16 +240,20 @@ export default class PaymentDialog exten
     this._cachedState.selectedShippingOption = state.selectedShippingOption;
   }
 
   render(state) {
     let request = state.request;
     let paymentDetails = request.paymentDetails;
     this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost;
 
+    let displayItems = request.paymentDetails.displayItems || [];
+    let additionalItems = this._getAdditionalDisplayItems(state);
+    this._viewAllButton.hidden = !displayItems.length && !additionalItems.length;
+
     let shippingType = state.request.paymentOptions.shippingType || "shipping";
     this._shippingAddressPicker.dataset.addAddressTitle =
       this.dataset[shippingType + "AddressTitleAdd"];
     this._shippingAddressPicker.dataset.editAddressTitle =
       this.dataset[shippingType + "AddressTitleEdit"];
 
     let totalItem = paymentRequest.getTotalItem(state);
     let totalAmountEl = this.querySelector("#total > currency-amount");
--- a/browser/components/payments/test/mochitest/test_payment_dialog.html
+++ b/browser/components/payments/test/mochitest/test_payment_dialog.html
@@ -84,16 +84,41 @@ add_task(async function test_initialStat
   let initialState = el1.requestStore.getState();
   let elDetails = el1._orderDetailsOverlay;
 
   is(initialState.orderDetailsShowing, false, "orderDetailsShowing is initially false");
   ok(elDetails.hasAttribute("hidden"), "Check details are hidden");
   is(initialState.page.id, "payment-summary", "Check initial page");
 });
 
+add_task(async function test_viewAllButtonVisibility() {
+  await setup();
+
+  let button = el1._viewAllButton;
+  ok(button.hidden, "Button is initially hidden when there are no items to show");
+
+  // Add a display item.
+  let request = deepClone(el1.requestStore.getState().request);
+  request.paymentDetails.displayItems = [
+    {
+      "label": "Triangle",
+      "amount": {
+        "currency": "CAD",
+        "value": "3",
+      },
+    },
+  ];
+  await el1.requestStore.setState({ request });
+  await asyncElementRendered();
+
+  // Check if the "View all items" button is visible.
+  ok(!button.hidden, "Button is visible");
+});
+
+
 add_task(async function test_viewAllButton() {
   await setup();
 
   let elDetails = el1._orderDetailsOverlay;
   let button = el1._viewAllButton;
 
   button.click();
   await asyncElementRendered();