chrome/browser/resources/settings/autofill_page/payments_section.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../people_page/sync_browser_proxy.html">
<link rel="import" href="credit_card_edit_dialog.html">
<link rel="import" href="credit_card_list.html">
<link rel="import" href="passwords_shared_css.html">

<dom-module id="settings-payments-section">
  <template>
    <style include="settings-shared passwords-shared">
      .expiration-column {
        align-items: center;
        display: flex;
        flex: 1;
      }

      #migrateCreditCards {
        border-bottom: var(--settings-separator-line);
        border-top: none;
      }

      #migrateCreditCardsButton {
        margin: 0 auto;
      }
    </style>
    <settings-toggle-button id="autofillCreditCardToggle"
        class="settings-box first"
        aria-label="$i18n{creditCards}" no-extension-indicator
        label="$i18n{enableCreditCardsLabel}"
        sub-label="$i18n{enableCreditCardsSublabel}"
        pref="{{prefs.autofill.credit_card_enabled}}">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.autofill.credit_card_enabled.extensionId]]">
      <div class="settings-box continuation">
        <extension-controlled-indicator class="start"
            id="autofillExtensionIndicator"
            extension-id="[[prefs.autofill.credit_card_enabled.extensionId]]"
            extension-name="[[
                prefs.autofill.credit_card_enabled.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.autofill.credit_card_enabled.extensionCanBeDisabled]]">
        </extension-controlled-indicator>
      </div>
    </template>

    <!--The version of settings that contains all the credit cards.-->
    <template is="dom-if" if="[[!splitCreditCardList_]]">
      <div class="settings-box continuation">
        <h2 class="start">$i18n{creditCards}</h2>
        <paper-button id="addCreditCard"
            class="secondary-button header-aligned-button"
            on-click="onAddCreditCardTap_"
            hidden$="[[!prefs.autofill.credit_card_enabled.value]]">
          $i18n{add}
        </paper-button>
      </div>
      <div class="settings-box two-line" id="migrateCreditCards"
          hidden$="[[!checkIfMigratable_(syncStatus, creditCards,
              prefs.autofill.credit_card_enabled.value)]]"
          on-click="onMigrateCreditCardsClick_" actionable>
        <div class="start">
          $i18n{migrateCreditCardsLabel}
          <div class="secondary">[[migratableCreditCardsInfo_]]</div>
        </div>
        <paper-icon-button-light id="migrateCreditCardsButton"
            class="subpage-arrow">
          <button aria-label="[[migrateCreditCardsLabel_]]"></button>
        </paper-icon-button-light>
      </div>
      <settings-credit-card-list id="creditCardList" class="list-frame"
          credit-cards="[[creditCards]]">
      </settings-credit-card-list>
    </template>

    <!--The version of settings that have split credit card sections.-->
    <template is="dom-if" if="[[splitCreditCardList_]]">
      <!--The section that contains the local credit cards.-->
      <div class="settings-box continuation">
        <h2 class="start">$i18n{localCreditCardsSectionTitle}</h2>
        <paper-button id="addCreditCard"
            class="secondary-button header-aligned-button"
            on-click="onAddCreditCardTap_"
            hidden$="[[!prefs.autofill.credit_card_enabled.value]]">
          $i18n{add}
        </paper-button>
      </div>
      <div class="settings-box two-line" id="migrateCreditCards"
          hidden$="[[!checkIfMigratable_(syncStatus, localCreditCards,
              prefs.autofill.credit_card_enabled.value)]]"
          on-click="onMigrateCreditCardsClick_" actionable>
        <div class="start">
          $i18n{migrateCreditCardsLabel}
          <div class="secondary">[[migratableCreditCardsInfo_]]</div>
        </div>
        <paper-icon-button-light id="migrateCreditCardsButton"
            class="subpage-arrow">
          <button aria-label="[[migrateCreditCardsLabel_]]"></button>
        </paper-icon-button-light>
      </div>
      <settings-credit-card-list id="localCreditCardList" class="list-frame"
          credit-cards="[[localCreditCards]]">
      </settings-credit-card-list>

      <!--The section that contains the server credit cards.-->
      <div class="settings-box continuation">
        <h2 class="start">$i18n{serverCreditCardsSectionTitle}</h2>
      </div>
      <settings-credit-card-list id="serverCreditCardList" class="list-frame"
          credit-cards="[[serverCreditCards]]">
      </settings-credit-card-list>
    </template>

    <div id="manageLink" class="settings-box first">
      <!-- This span lays out the URL correctly, relative to the label. -->
      <span>$i18nRaw{manageCreditCardsLabel}</span>
    </div>

    <cr-action-menu id="creditCardSharedMenu">
      <button id="menuEditCreditCard" class="dropdown-item"
          on-click="onMenuEditCreditCardTap_">$i18n{edit}</button>
      <button id="menuRemoveCreditCard" class="dropdown-item"
          hidden$="[[!activeCreditCard.metadata.isLocal]]"
          on-click="onMenuRemoveCreditCardTap_">$i18n{removeCreditCard}</button>
      <button id="menuClearCreditCard" class="dropdown-item"
          on-click="onMenuClearCreditCardTap_"
          hidden$="[[!activeCreditCard.metadata.isCached]]">
        $i18n{clearCreditCard}
      </button>
    </cr-action-menu>
    <template is="dom-if" if="[[showCreditCardDialog_]]" restamp>
      <settings-credit-card-edit-dialog credit-card="[[activeCreditCard]]"
          on-close="onCreditCardDialogClose_">
      </settings-credit-card-edit-dialog>
    </template>
  </template>
  <script src="payments_section.js"></script>
</dom-module>