✓

Order confirmed

A receipt is on its way to {data.email}.

{index + 1} {label}

Step {step + 1} of 3

{labels[step]}

{step === 0 && ( <> Email update("email", event.target.value)} /> Shipping address

update("address", event.target.value)}
              />
            </label>
          </>
        )}
        {step === 1 && (
          <label>
            Last four card digits
            <input
              inputMode="numeric"
              maxLength={4}
              value={data.card}
              onChange={(event) =>
                update("card", event.target.value.replace(/\D/g, ""))
              }
            />
          </label>
        )}
        {step === 2 && (
          <dl>
            <dt>Email</dt>
            <dd>{data.email}</dd>
            <dt>Address</dt>
            <dd>{data.address}</dd>
            <dt>Card</dt>
            <dd>•••• {data.card}</dd>
          </dl>
        )}
      </section>
      <footer>
        <button
          className="back"
          disabled={step === 0}
          onClick={() => setStep((value) => value - 1)}
        >
          Back
        </button>
        <button
          disabled={!canContinue}
          onClick={() =>
            step === 2 ? setComplete(true) : setStep((value) => value + 1)
          }
        >
          {step === 2 ? "Place order" : "Continue"}
        </button>
      </footer>
    </main>
  );
}</article></body></html>