<!doctype html>
<meta charset="utf8">
<link rel="help" href="https://w3c.github.io/payment-request/#updatewith-method">
<title>
  Incremental updates via updateWith()
</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({
  explicit_done: true,
  explicit_timeout: true,
});

const methods = [{
  supportedMethods: "basic-card",
}, {
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantIdentifier: "merchant.com.example",
    countryCode: "US",
    merchantCapabilities: ["supports3DS"],
    supportedNetworks: ["visa"],
  }
}];

const options = {
  requestShipping: true,
};

const initialDetails = {
  total: {
    label: "Initial total",
    amount: {
      currency: "USD",
      value: "1.0",
    },
  },
  shippingOptions: [
    {
      id: "neutral",
      label: "NEUTRAL SHIPPING OPTION",
      selected: true,
      amount: {
        currency: "USD",
        value: "0.00",
      },
    },
  ],
};

function testFireEvent(button, updateDetails) {
  button.disabled = true;
  const request = new PaymentRequest(methods, initialDetails, options);
  const handlerPromise = new Promise(resolve => {
    request.onshippingaddresschange = event => {
      event.updateWith(updateDetails);
      resolve(event);
    };
  });
  promise_test(async t => {
    const response = await request.show();
    const event = await handlerPromise;
    await response.complete("success");
  }, button.textContent.trim());
}

</script>
<h2>
  Incremental updates
</h2>
<p>
  Click on each button in sequence from top to bottom without refreshing the page.
  Each button will bring up the Payment Request UI window.
</p>
<p>
  Unless stated otherwise, each test will update some part of the displayed payment sheet in
  a manner indicated below. When prompted, please change or enter a new
  shipping address, look for the tested change, and complete the payment.
</p>
<p>
  If the payment request locks up or otherwise aborts, the test has failed.
</p>
<ol>
  <li>
    <button onclick="testFireEvent(this, {});">
      Passing an empty dictionary does not cause the sheet to change.
      No values in the sheet must change.
    </button>
  </li>
</ol>

<section>
  <h3>Incremental updates via PaymentDetailsUpdate.total</h3>
  <ol>
    <li>
      <button onclick="
      const total = {
        label: 'PASS',
        amount: {
          currency: 'XXX',
          value: '20',
        },
      };
      const updatedDetails = { total };
      testFireEvent(this, updatedDetails);">
        After changing shipping address, the total becomes XXX20, with the label "PASS".
      </button>
    </li>
  </ol>
</section>

<section>
  <h3>Incremental updates via PaymentDetailsBase.displayItems</h3>
  <ol>
    <li>
      <button onclick="
      const item = {
        label: 'PASS',
        amount: { currency: 'ABC', value: '55.00' },
      };
      const updatedDetails = {
        displayItems: [ item ]
      };
      testFireEvent(this, updatedDetails);">
        After changing shipping address, a new display item is shown
        with a with label PASS, and value of ABC55.00.
      </button>
    </li>
  </ol>
</section>

<section>
  <h3>Incremental updates via PaymentDetailsBase.shippingOptions</h3>
  <ol>
    <li>
      <button onclick="
      const shippingOptions = [
        {
          id: 'pass',
          label: 'PASS',
          amount: { currency: 'USD', value: '1.00' },
          selected: true,
        },
        {
          id: 'fail',
          label: 'FAIL IF THIS IS SELECTED',
          amount: { currency: 'USD', value: '25.00' }
        },
      ];
      const updatedDetails = {
        shippingOptions
      };
      testFireEvent(this, updatedDetails);">
        After changing shipping address, two new shipping options appear.
        The shipping option labelled "PASS" with a value of USD1.0 is selected.
      </button>
    </li>
  </ol>
</section>

<section>
  <h3>Incremental updates via PaymentDetailsBase.modifiers</h3>
  <ol>
    <li>
      <button onclick="
      const additionalItem = {
        label: 'PASS-DISPLAY-ITEM',
        amount: { currency: 'USD', value: '3.00' },
      };
      const modifiers = [{
        additionalDisplayItems: [ additionalItem ],
        supportedMethods: 'basic-card',
        total: {
          label: 'PASS-TOTAL',
          amount: { currency: 'USD', value: '123.00' },
        },
      }];
      const updatedDetails = { modifiers };
      testFireEvent(this, updatedDetails);">
        After changing shipping address, a new display item is shown
        with a with label PASS-DISPLAY-ITEM, and value of ABC55.00 and the total is
        labelled PASS-TOTAL with a value of USD123.0
      </button>
    </li>
    <li>
      <button onclick="done()">DONE - see results</button>
    </li>
  </ol>
</section>

<small>
  If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a>
  and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>.
</small>