browser/components/payments/res/paymentRequest.xhtml
author Matthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 20 Sep 2018 21:07:20 +0000
changeset 437550 1f44117fee2ea257eca27f6015b3437d2ad7cd70
parent 437352 8889fed6e2cf56f4e6a9540c9477a7ecf0e39c02
child 438132 bc6c96d6c44031d21043c00c608558c35d29d13a
permissions -rw-r--r--
Bug 1463545 - Replace grid layout of <address-option> with a new two line design. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D5186

<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html [
  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  %globalDTD;
  <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" >
  %brandDTD;

  <!ENTITY viewAllItems               "View All Items">
  <!ENTITY paymentSummaryTitle        "Your Payment">
  <!ENTITY header.payTo               "Pay to">
  <!ENTITY fieldRequiredSymbol        "*">

  <!ENTITY shippingAddressLabel       "Shipping Address">
  <!ENTITY deliveryAddressLabel       "Delivery Address">
  <!ENTITY pickupAddressLabel         "Pickup Address">
  <!ENTITY shippingOptionsLabel       "Shipping Options">
  <!ENTITY deliveryOptionsLabel       "Delivery Options">
  <!ENTITY pickupOptionsLabel         "Pickup Options">
  <!ENTITY shippingGenericError       "Can’t ship to this address. Select a different address.">
  <!ENTITY deliveryGenericError       "Can’t deliver to this address. Select a different address.">
  <!ENTITY pickupGenericError         "Can’t pick up from this address. Select a different address.">
  <!ENTITY paymentMethodsLabel        "Payment Method">
  <!ENTITY address.fieldSeparator     ", ">
  <!ENTITY address.addLink.label      "Add">
  <!ENTITY address.editLink.label     "Edit">
  <!ENTITY basicCard.addLink.label    "Add">
  <!ENTITY basicCard.editLink.label   "Edit">
  <!ENTITY payer.addLink.label        "Add">
  <!ENTITY payer.editLink.label       "Edit">
  <!ENTITY shippingAddress.addPage.title  "Add Shipping Address">
  <!ENTITY shippingAddress.editPage.title "Edit Shipping Address">
  <!ENTITY deliveryAddress.addPage.title  "Add Delivery Address">
  <!ENTITY deliveryAddress.editPage.title "Edit Delivery Address">
  <!ENTITY pickupAddress.addPage.title    "Add Pickup Address">
  <!ENTITY pickupAddress.editPage.title   "Edit Pickup Address">
  <!ENTITY billingAddress.addPage.title   "Add Billing Address">
  <!ENTITY billingAddress.editPage.title  "Edit Billing Address">
  <!ENTITY basicCard.addPage.title    "Add Credit Card">
  <!ENTITY basicCard.editPage.title   "Edit Credit Card">
  <!ENTITY basicCard.cvv.placeholder  "CVV&fieldRequiredSymbol;">
  <!ENTITY payer.addPage.title        "Add Payer Contact">
  <!ENTITY payer.editPage.title       "Edit Payer Contact">
  <!ENTITY payerLabel                 "Contact Information">
  <!ENTITY cancelPaymentButton.label   "Cancel">
  <!ENTITY approvePaymentButton.label  "Pay">
  <!ENTITY processingPaymentButton.label "Processing">
  <!ENTITY successPaymentButton.label    "Done">
  <!ENTITY unknownPaymentButton.label    "Unknown">
  <!ENTITY orderDetailsLabel          "Order Details">
  <!ENTITY orderTotalLabel            "Total">
  <!ENTITY basicCardPage.error.genericSave    "There was an error saving the payment card.">
  <!ENTITY basicCardPage.addressAddLink.label "Add">
  <!ENTITY basicCardPage.addressEditLink.label "Edit">
  <!ENTITY basicCardPage.backButton.label     "Back">
  <!ENTITY basicCardPage.addButton.label      "Add">
  <!ENTITY basicCardPage.nextButton.label     "Next">
  <!ENTITY basicCardPage.updateButton.label   "Update">
  <!ENTITY basicCardPage.persistCheckbox.label     "Save credit card to &brandShortName; (Security code will not be saved)">
  <!ENTITY addressPage.error.genericSave      "There was an error saving the address.">
  <!ENTITY addressPage.cancelButton.label     "Cancel">
  <!ENTITY addressPage.backButton.label       "Back">
  <!ENTITY addressPage.addButton.label        "Add">
  <!ENTITY addressPage.nextButton.label       "Next">
  <!ENTITY addressPage.updateButton.label     "Update">
  <!ENTITY addressPage.persistCheckbox.label  "Save address to &brandShortName;">
  <!ENTITY failErrorPage.title                "We couldn’t complete your payment to **host-name**">
  <!ENTITY failErrorPage.suggestionHeading    "The most likely cause is a hiccup with your credit card.">
  <!ENTITY failErrorPage.suggestion1          "Make sure the card you’re using hasn’t expired">
  <!ENTITY failErrorPage.suggestion2          "Double check the card number and expiration date">
  <!ENTITY failErrorPage.suggestion3          "If your credit card information is correct, contact the merchant for more information">
  <!ENTITY failErrorPage.doneButton.label     "Close">
  <!ENTITY timeoutErrorPage.title             "**host-name** is taking too long to respond.">
  <!ENTITY timeoutErrorPage.suggestionHeading "The most likely cause is a temporary connection hiccup. Open a new tab to check your network connection or click “Close” to try again.">
  <!ENTITY timeoutErrorPage.doneButton.label     "Close">
  <!ENTITY webPaymentsBranding.label             "&brandShortName; Checkout">
  <!ENTITY invalidOption.label                   "Missing or invalid information">
  <!ENTITY acceptedCards.label                   "Merchant accepts:">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>&paymentSummaryTitle;</title>

  <!-- chrome: is needed for global.dtd -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' chrome:"/>

  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
  <link rel="stylesheet" href="resource://formautofill/editDialog-shared.css"/>
  <link rel="stylesheet" href="resource://formautofill/editAddress.css"/>
  <link rel="stylesheet" href="resource://formautofill/editCreditCard.css"/>
  <link rel="stylesheet" href="resource://formautofill/editDialog.css"/>
  <link rel="stylesheet" href="paymentRequest.css"/>
  <link rel="stylesheet" href="components/rich-select.css"/>
  <link rel="stylesheet" href="components/address-option.css"/>
  <link rel="stylesheet" href="components/basic-card-option.css"/>
  <link rel="stylesheet" href="components/shipping-option.css"/>
  <link rel="stylesheet" href="components/payment-details-item.css"/>
  <link rel="stylesheet" href="components/accepted-cards.css"/>
  <link rel="stylesheet" href="containers/address-form.css"/>
  <link rel="stylesheet" href="containers/basic-card-form.css"/>
  <link rel="stylesheet" href="containers/order-details.css"/>
  <link rel="stylesheet" href="containers/rich-picker.css"/>
  <link rel="stylesheet" href="containers/error-page.css"/>

  <script src="unprivileged-fallbacks.js"></script>

  <script src="formautofill/autofillEditForms.js"></script>

  <script type="module" src="containers/payment-dialog.js"></script>
  <script type="module" src="paymentRequest.js"></script>

  <template id="payment-dialog-template">
    <header>
      <div class="page-error"
           data-shipping-generic-error="&shippingGenericError;"
           data-delivery-generic-error="&deliveryGenericError;"
           data-pickup-generic-error="&pickupGenericError;"
           aria-live="polite"></div>
      <div id="total">
        <currency-amount display-code="display-code"></currency-amount>
        <div>&header.payTo; <span id="host-name"></span></div>
      </div>
      <div id="top-buttons" hidden="hidden">
        <button id="view-all" class="closed">&viewAllItems;</button>
      </div>
    </header>

    <div id="main-container">
      <payment-request-page id="payment-summary">
        <div class="page-body">
          <address-picker class="shipping-related"
                          data-add-link-label="&address.addLink.label;"
                          data-edit-link-label="&address.editLink.label;"
                          data-field-separator="&address.fieldSeparator;"
                          data-shipping-address-label="&shippingAddressLabel;"
                          data-delivery-address-label="&deliveryAddressLabel;"
                          data-pickup-address-label="&pickupAddressLabel;"
                          data-invalid-label="&invalidOption.label;"
                          selected-state-key="selectedShippingAddress"></address-picker>

          <shipping-option-picker class="shipping-related"
                                  data-shipping-options-label="&shippingOptionsLabel;"
                                  data-delivery-options-label="&deliveryOptionsLabel;"
                                  data-pickup-options-label="&pickupOptionsLabel;"></shipping-option-picker>

          <payment-method-picker selected-state-key="selectedPaymentCard"
                                 data-add-link-label="&basicCard.addLink.label;"
                                 data-edit-link-label="&basicCard.editLink.label;"
                                 data-cvv-placeholder="&basicCard.cvv.placeholder;"
                                 data-invalid-label="&invalidOption.label;"
                                 label="&paymentMethodsLabel;">
          </payment-method-picker>
          <accepted-cards hidden="hidden" label="&acceptedCards.label;"></accepted-cards>
          <address-picker class="payer-related"
                          label="&payerLabel;"
                          data-add-link-label="&payer.addLink.label;"
                          data-edit-link-label="&payer.editLink.label;"
                          data-field-separator="&address.fieldSeparator;"
                          data-invalid-label="&invalidOption.label;"
                          selected-state-key="selectedPayerAddress"></address-picker>
        </div>

        <footer>
          <span class="branding">&webPaymentsBranding.label;</span>
          <button id="cancel">&cancelPaymentButton.label;</button>
          <button id="pay"
                  class="primary"
                  data-label="&approvePaymentButton.label;"
                  data-processing-label="&processingPaymentButton.label;"
                  data-unknown-label="&unknownPaymentButton.label;"
                  data-success-label="&successPaymentButton.label;"></button>
        </footer>
      </payment-request-page>
      <section id="order-details-overlay" hidden="hidden">
        <h2>&orderDetailsLabel;</h2>
        <order-details></order-details>
      </section>

      <basic-card-form id="basic-card-page"
                       data-add-basic-card-title="&basicCard.addPage.title;"
                       data-edit-basic-card-title="&basicCard.editPage.title;"
                       data-error-generic-save="&basicCardPage.error.genericSave;"
                       data-address-add-link-label="&basicCardPage.addressAddLink.label;"
                       data-address-edit-link-label="&basicCardPage.addressEditLink.label;"
                       data-billing-address-title-add="&billingAddress.addPage.title;"
                       data-billing-address-title-edit="&billingAddress.editPage.title;"
                       data-back-button-label="&basicCardPage.backButton.label;"
                       data-add-button-label="&basicCardPage.addButton.label;"
                       data-next-button-label="&basicCardPage.nextButton.label;"
                       data-update-button-label="&basicCardPage.updateButton.label;"
                       data-cancel-button-label="&cancelPaymentButton.label;"
                       data-persist-checkbox-label="&basicCardPage.persistCheckbox.label;"
                       data-accepted-cards-label="&acceptedCards.label;"
                       data-field-required-symbol="&fieldRequiredSymbol;"
                       hidden="hidden"></basic-card-form>

      <address-form id="address-page"
                    data-error-generic-save="&addressPage.error.genericSave;"
                    data-cancel-button-label="&addressPage.cancelButton.label;"
                    data-back-button-label="&addressPage.backButton.label;"
                    data-add-button-label="&addressPage.addButton.label;"
                    data-next-button-label="&addressPage.nextButton.label;"
                    data-update-button-label="&addressPage.updateButton.label;"
                    data-persist-checkbox-label="&addressPage.persistCheckbox.label;"
                    data-field-required-symbol="&fieldRequiredSymbol;"
                    hidden="hidden"></address-form>

      <completion-error-page id="completion-timeout-error" class="illustrated"
                  data-page-title="&timeoutErrorPage.title;"
                  data-suggestion-heading="&timeoutErrorPage.suggestionHeading;"
                  data-branding-label="&webPaymentsBranding.label;"
                  data-done-button-label="&timeoutErrorPage.doneButton.label;"
                  hidden="hidden"></completion-error-page>
      <completion-error-page id="completion-fail-error" class="illustrated"
                  data-page-title="&failErrorPage.title;"
                  data-suggestion-heading="&failErrorPage.suggestionHeading;"
                  data-suggestion-1="&failErrorPage.suggestion1;"
                  data-suggestion-2="&failErrorPage.suggestion2;"
                  data-suggestion-3="&failErrorPage.suggestion3;"
                  data-branding-label="&webPaymentsBranding.label;"
                  data-done-button-label="&failErrorPage.doneButton.label;"
                  hidden="hidden"></completion-error-page>
    </div>

    <div id="disabled-overlay" hidden="hidden">
      <!-- overlay to prevent changes while waiting for a response from the merchant -->
    </div>
  </template>

  <template id="order-details-template">
    <ul class="main-list"></ul>
    <ul class="footer-items-list"></ul>

    <div class="details-total">
      <h2 class="label">&orderTotalLabel;</h2>
      <currency-amount></currency-amount>
    </div>
  </template>
</head>
<body dir="&locale.dir;">
  <iframe id="debugging-console"
          hidden="hidden">
  </iframe>
  <payment-dialog data-shipping-address-title-add="&shippingAddress.addPage.title;"
                  data-shipping-address-title-edit="&shippingAddress.editPage.title;"
                  data-delivery-address-title-add="&deliveryAddress.addPage.title;"
                  data-delivery-address-title-edit="&deliveryAddress.editPage.title;"
                  data-pickup-address-title-add="&pickupAddress.addPage.title;"
                  data-pickup-address-title-edit="&pickupAddress.editPage.title;"
                  data-billing-address-title-add="&billingAddress.addPage.title;"
                  data-payer-title-add="&payer.addPage.title;"
                  data-payer-title-edit="&payer.editPage.title;"></payment-dialog>
</body>
</html>