// pages-flow.jsx — Cart, Checkout, Confirmation

// ─── CART ────────────────────────────────────────────────────────
function CartPage({ navigate }) {
  const cart = React.useContext(CartContext);
  const [couponInput, setCouponInput] = React.useState(cart.coupon || '');
  const items = cart.items.map((i) => ({ ...i, product: PRODUCTS.find((p) => p.id === i.id) })).filter((i) => i.product);
  const couponData = cart.coupon && COUPONS[cart.coupon.toUpperCase()];
  const shipPrice = cart.freeShip ? 0 : (cart.subtotal > 200 ? 0 : 24.9);
  const total = Math.max(0, cart.subtotal - cart.discount + shipPrice);

  if (items.length === 0) {
    return (
      <main className="pg empty">
        <div className="hd__container empty__inner">
          <div className="empty__art">
            <ProductImage product={PRODUCTS[6]} />
          </div>
          <h1>Seu carrinho está vazio</h1>
          <p>Comece sua coleção agora — álbuns, envelopes, kits e cards prontos para despachar.</p>
          <div className="empty__cta">
            <button className="btn btn--gold btn--lg" onClick={() => navigate('category')}>Ver coleção 2026</button>
            <button className="btn btn--ghost btn--lg" onClick={() => navigate('home')}>Voltar ao início</button>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="pg">
      <div className="pgcrumb">
        <div className="hd__container">
          <a onClick={() => navigate('home')}>Início</a><Icon name="chevron-right" size={12} /><span>Carrinho</span>
        </div>
      </div>
      <div className="hd__container cartlayout">
        <section className="cartmain">
          <div className="cartmain__head">
            <h1>Seu carrinho</h1>
            <span className="muted">{cart.totalCount} {cart.totalCount === 1 ? 'item' : 'itens'}</span>
          </div>
          <div className="cartlist">
            {items.map((i) => (
              <div key={i.id} className="cartrow">
                <div className="cartrow__media"><ProductImage product={i.product} /></div>
                <div className="cartrow__body">
                  <div className="card__type">{i.product.type}</div>
                  <h3 onClick={() => navigate('product', { id: i.id })}>{i.product.name}</h3>
                  <div className="muted">SKU {i.id.toUpperCase()} · Lacrado · Em estoque</div>
                  <div className="cartrow__rmv">
                    <button onClick={() => cart.remove(i.id)}>Remover</button>
                    <button onClick={() => cart.toggleWish(i.id)}>Salvar para depois</button>
                  </div>
                </div>
                <div className="cartrow__qty">
                  <div className="qtybtn">
                    <button onClick={() => cart.setQty(i.id, i.qty - 1)}><Icon name="minus" size={14} /></button>
                    <span>{i.qty}</span>
                    <button onClick={() => cart.setQty(i.id, i.qty + 1)}><Icon name="plus" size={14} /></button>
                  </div>
                </div>
                <div className="cartrow__price">
                  <div className="card__cur" style={{ fontSize: 20 }}>{BRL(i.product.price * i.qty)}</div>
                  <div className="muted" style={{ fontSize: 12 }}>{BRL(i.product.price)} cada</div>
                </div>
              </div>
            ))}
          </div>
          <div className="cartmain__foot">
            <button className="btn btn--ghost" onClick={() => navigate('category')}><Icon name="chevron-left" size={14} /> Continuar comprando</button>
            <button className="btn btn--ghost" onClick={() => cart.clear()}>Esvaziar carrinho</button>
          </div>
        </section>
        <aside className="cartside">
          <h3>Resumo do pedido</h3>
          <div className="cartside__row"><span>Subtotal</span><span>{BRL(cart.subtotal)}</span></div>
          {cart.discount > 0 && <div className="cartside__row cartside__row--off"><span>Desconto ({cart.coupon})</span><span>-{BRL(cart.discount)}</span></div>}
          <div className="cartside__row"><span>Frete</span><span>{shipPrice === 0 ? 'GRÁTIS' : BRL(shipPrice)}</span></div>
          <div className="cartside__cpn">
            <h4>Cupom de desconto</h4>
            <div className="cartside__cpn-row">
              <input placeholder="Digite seu cupom" value={couponInput} onChange={(e) => setCouponInput(e.target.value.toUpperCase())} />
              <button className="btn btn--ghost btn--sm" onClick={() => cart.setCoupon(couponInput)}>Aplicar</button>
            </div>
            {couponData && <div className="cartside__cpn-ok"><Icon name="check" size={14} /> {couponData.label}</div>}
            {cart.coupon && !couponData && <div className="cartside__cpn-err">Cupom inválido</div>}
            <div className="cartside__cpn-hints">
              Experimente: <button onClick={() => { cart.setCoupon('COPA10'); setCouponInput('COPA10'); }}>COPA10</button> ·
              <button onClick={() => { cart.setCoupon('FRETEGRATIS'); setCouponInput('FRETEGRATIS'); }}>FRETEGRATIS</button> ·
              <button onClick={() => { cart.setCoupon('TORCIDA20'); setCouponInput('TORCIDA20'); }}>TORCIDA20</button>
            </div>
          </div>
          <div className="cartside__total">
            <span>Total</span>
            <strong>{BRL(total)}</strong>
          </div>
          <div className="cartside__inst">em até {installments(total)}</div>
          <button className="btn btn--gold btn--lg btn--block" onClick={() => navigate('checkout')}>
            Finalizar compra <Icon name="arrow-right" size={18} />
          </button>
          <div className="cartside__perks">
            <div><Icon name="lock" size={14} /> Pagamento 100% seguro</div>
            <div><Icon name="truck" size={14} /> Despachamos em 24h</div>
            <div><Icon name="shield" size={14} /> Compra protegida</div>
          </div>
        </aside>
      </div>
    </main>
  );
}

// ─── CHECKOUT ────────────────────────────────────────────────────
function CheckoutPage({ navigate }) {
  const cart = React.useContext(CartContext);
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    name: cart.user?.name || '', email: cart.user?.email || '', cpf: '', phone: '',
    cep: '', street: '', number: '', complement: '', district: '', city: '', state: '',
    shipping: 'sedex', payment: 'pix',
  });
  const [pixData, setPixData] = React.useState(null); // { code, txid, amount } depois de gerado
  const [pixCopied, setPixCopied] = React.useState(false);
  const [pixCountdown, setPixCountdown] = React.useState(15 * 60);
  const [pixStatus, setPixStatus] = React.useState('aguardando'); // aguardando | confirmado

  React.useEffect(() => {
    if (!pixData || pixStatus === 'confirmado') return;
    const t = setInterval(() => setPixCountdown((s) => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, [pixData, pixStatus]);
  const setField = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const items = cart.items.map((i) => ({ ...i, product: PRODUCTS.find((p) => p.id === i.id) })).filter((i) => i.product);
  const ship = SHIPPING_RATES[data.shipping];
  const shipPrice = cart.freeShip ? 0 : ship.price;
  const total = Math.max(0, cart.subtotal - cart.discount + shipPrice);
  const pixTotal = total * 0.95;

  if (items.length === 0) {
    return (
      <main className="pg"><div className="hd__container" style={{ padding: '60px 0', textAlign: 'center' }}>
        <h2>Carrinho vazio</h2>
        <button className="btn btn--gold btn--lg" onClick={() => navigate('category')}>Ver coleção</button>
      </div></main>
    );
  }

  const finishOrder = () => {
    const order = cart.placeOrder({
      shipping: ship.name,
      shipPrice,
      payment: data.payment,
      total: data.payment === 'pix' ? pixTotal : total,
      address: { ...data },
      customer: { name: data.name, email: data.email, cpf: data.cpf, phone: data.phone },
    });
    if (data.payment === 'card') {
      // Cartão: abre WhatsApp com pedido pré-montado
      const msg = buildWhatsAppCardMessage(order);
      openWhatsApp(msg);
      navigate('confirmation', { orderId: order.id });
      return;
    }
    // Pix: gera o BR Code e mostra a tela de pagamento (mantém-se no checkout)
    const txid = order.id.replace(/[^A-Z0-9]/gi, '').slice(0, 25);
    const code = buildPixCode(pixTotal, txid);
    setPixData({ code, txid, amount: pixTotal, orderId: order.id });
    setPixCountdown(15 * 60);
    setStep(6);
    // Simula confirmação do gateway após 18s para fins de demo
    setTimeout(() => setPixStatus('confirmado'), 18000);
  };

  const fmtCountdown = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;

  const stepNames = ['Identificação', 'Endereço', 'Entrega', 'Pagamento', 'Revisão'];

  return (
    <main className="pg checkout">
      <div className="hd__container">
        <div className="checkout__head">
          <a onClick={() => navigate('cart')} className="checkout__back"><Icon name="chevron-left" size={14} /> Voltar ao carrinho</a>
          <Logo />
          <div className="checkout__safe"><Icon name="lock" size={14} /> Ambiente seguro</div>
        </div>
        <div className="checkout__steps">
          {stepNames.map((n, i) => (
            <div key={n} className={'cstep' + (step > i + 1 ? ' is-done' : '') + (step === i + 1 ? ' is-on' : '')}>
              <span className="cstep__n">{step > i + 1 ? <Icon name="check" size={12} /> : i + 1}</span>
              <span className="cstep__l">{n}</span>
            </div>
          ))}
        </div>
        <div className="checkout__layout">
          <section className="checkout__main">
            {step === 1 && (
              <div className="cbox">
                <h3>1. Dados pessoais</h3>
                <div className="frm">
                  <Field label="Nome completo"><input value={data.name} onChange={(e) => setField('name', e.target.value)} placeholder="Como aparece no documento" /></Field>
                  <Field label="E-mail"><input type="email" value={data.email} onChange={(e) => setField('email', e.target.value)} placeholder="seu@email.com" /></Field>
                  <Field label="CPF"><input value={data.cpf} onChange={(e) => setField('cpf', e.target.value)} placeholder="000.000.000-00" /></Field>
                  <Field label="WhatsApp"><input value={data.phone} onChange={(e) => setField('phone', e.target.value)} placeholder="(11) 98765-4321" /></Field>
                </div>
                <button className="btn btn--gold btn--lg" onClick={() => setStep(2)}>Continuar <Icon name="arrow-right" size={16} /></button>
              </div>
            )}
            {step === 2 && (
              <div className="cbox">
                <h3>2. Endereço de entrega</h3>
                <div className="frm">
                  <Field label="CEP" col="2"><input value={data.cep} onChange={(e) => setField('cep', e.target.value)} placeholder="00000-000" /></Field>
                  <Field label="Rua" col="4"><input value={data.street} onChange={(e) => setField('street', e.target.value)} /></Field>
                  <Field label="Número" col="2"><input value={data.number} onChange={(e) => setField('number', e.target.value)} /></Field>
                  <Field label="Complemento" col="4"><input value={data.complement} onChange={(e) => setField('complement', e.target.value)} placeholder="Apto, bloco…" /></Field>
                  <Field label="Bairro" col="3"><input value={data.district} onChange={(e) => setField('district', e.target.value)} /></Field>
                  <Field label="Cidade" col="3"><input value={data.city} onChange={(e) => setField('city', e.target.value)} /></Field>
                  <Field label="Estado" col="2">
                    <select value={data.state} onChange={(e) => setField('state', e.target.value)}>
                      <option value="">--</option>
                      {['SP','RJ','MG','PR','RS','BA','PE','CE','SC'].map((s) => <option key={s}>{s}</option>)}
                    </select>
                  </Field>
                </div>
                <div className="cbox__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(1)}>Voltar</button>
                  <button className="btn btn--gold btn--lg" onClick={() => setStep(3)}>Continuar <Icon name="arrow-right" size={16} /></button>
                </div>
              </div>
            )}
            {step === 3 && (
              <div className="cbox">
                <h3>3. Forma de entrega</h3>
                <div className="shipopts">
                  {Object.entries(SHIPPING_RATES).map(([k, s]) => (
                    <label key={k} className={'shipopt' + (data.shipping === k ? ' is-on' : '')}>
                      <input type="radio" checked={data.shipping === k} onChange={() => setField('shipping', k)} />
                      <div className="shipopt__icon"><Icon name="truck" size={20} /></div>
                      <div className="shipopt__body">
                        <strong>{s.name}</strong>
                        <span className="muted">{s.days}</span>
                      </div>
                      <div className="shipopt__price">{s.price === 0 ? 'GRÁTIS' : BRL(s.price)}</div>
                    </label>
                  ))}
                </div>
                <div className="cbox__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(2)}>Voltar</button>
                  <button className="btn btn--gold btn--lg" onClick={() => setStep(4)}>Continuar <Icon name="arrow-right" size={16} /></button>
                </div>
              </div>
            )}
            {step === 4 && (
              <div className="cbox">
                <h3>4. Forma de pagamento</h3>
                <div className="paytabs paytabs--2">
                  <button className={'paytab' + (data.payment === 'pix' ? ' is-on' : '')} onClick={() => setField('payment', 'pix')}>
                    <Icon name="pix" size={22} />
                    <div>
                      <strong>Pix</strong>
                      <span className="paytab__sub">Confirmação imediata · 5% off · Aqui no site</span>
                    </div>
                    <span className="paytab__pill">RECOMENDADO</span>
                  </button>
                  <button className={'paytab' + (data.payment === 'card' ? ' is-on' : '')} onClick={() => setField('payment', 'card')}>
                    <Icon name="whatsapp" size={22} color="#25D366" />
                    <div>
                      <strong>Cartão de crédito</strong>
                      <span className="paytab__sub">Atendimento humano via WhatsApp · até 6x sem juros</span>
                    </div>
                  </button>
                </div>
                {data.payment === 'pix' && (
                  <div className="paypanel paypanel--pix">
                    <div>
                      <h4>Pagamento via Pix — direto no site</h4>
                      <p>Ao revisar e finalizar, geraremos o QR Code e o copia-e-cola na próxima tela. Você paga sem sair daqui.</p>
                      <ul>
                        <li><Icon name="check" size={14} /> Confirmação imediata após o pagamento</li>
                        <li><Icon name="check" size={14} /> 5% de desconto sobre o total</li>
                        <li><Icon name="check" size={14} /> Despacho no mesmo dia útil</li>
                        <li><Icon name="check" size={14} /> Chave Pix: {STORE.pixKey}</li>
                      </ul>
                    </div>
                    <div className="paypanel__total">
                      <span>Total no Pix</span>
                      <strong>{BRL(pixTotal)}</strong>
                      <span className="paypanel__off">Você economiza {BRL(total - pixTotal)}</span>
                    </div>
                  </div>
                )}
                {data.payment === 'card' && (
                  <div className="paypanel paypanel--wa">
                    <div>
                      <h4>Cartão de crédito é via WhatsApp</h4>
                      <p>
                        Para garantir o parcelamento e a segurança da sua compra,
                        finalizamos o cartão por uma maquineta virtual conduzida pelo nosso atendimento.
                        É rápido, seguro e você fala com uma pessoa de verdade.
                      </p>
                      <ul>
                        <li><Icon name="check" size={14} /> Em até 6x sem juros · Visa, Master, Elo, Hiper</li>
                        <li><Icon name="check" size={14} /> Resposta humana em minutos · seg a sex 9h–19h</li>
                        <li><Icon name="check" size={14} /> Levamos seu pedido pré-montado para o WhatsApp</li>
                      </ul>
                    </div>
                    <div className="paypanel__wa">
                      <Icon name="whatsapp" size={40} color="#25D366" />
                      <span>{STORE.whatsappDisplay}</span>
                      <small>Você revisa e confirma na próxima tela</small>
                    </div>
                  </div>
                )}
                <div className="cbox__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(3)}>Voltar</button>
                  <button className="btn btn--gold btn--lg" onClick={() => setStep(5)}>Revisar pedido <Icon name="arrow-right" size={16} /></button>
                </div>
              </div>
            )}
            {step === 5 && (
              <div className="cbox">
                <h3>5. Revisão final</h3>
                <div className="rev">
                  <div className="rev__sec">
                    <h4>Identificação</h4>
                    <p>{data.name || '—'}<br />{data.email || '—'} · {data.phone || '—'}</p>
                  </div>
                  <div className="rev__sec">
                    <h4>Endereço</h4>
                    <p>{data.street || '—'}, {data.number} {data.complement && '· ' + data.complement}<br />
                      {data.district} · {data.city}/{data.state} · CEP {data.cep || '—'}</p>
                  </div>
                  <div className="rev__sec">
                    <h4>Entrega</h4>
                    <p><strong>{ship.name}</strong> · {ship.days}</p>
                  </div>
                  <div className="rev__sec">
                    <h4>Pagamento</h4>
                    <p>{data.payment === 'pix' ? <><strong>Pix</strong> · 5% off · {BRL(pixTotal)}</> : <><strong>Cartão de crédito</strong> · finalizamos via WhatsApp <Icon name="whatsapp" size={14} color="#25D366" /></>}</p>
                  </div>
                </div>
                <div className="cbox__nav">
                  <button className="btn btn--ghost" onClick={() => setStep(4)}>Voltar</button>
                  <button className="btn btn--gold btn--lg" onClick={finishOrder}>
                    {data.payment === 'pix' ? <>Gerar Pix <Icon name="pix" size={16} /></> : <>Finalizar via WhatsApp <Icon name="whatsapp" size={16} /></>}
                  </button>
                </div>
              </div>
            )}
            {step === 6 && pixData && (
              <div className="cbox pixbox">
                {pixStatus === 'confirmado' ? (
                  <div className="pixbox__ok">
                    <div className="pixbox__ok-seal"><Icon name="check" size={36} color="#0d4a30" /></div>
                    <h3>Pagamento confirmado!</h3>
                    <p>Recebemos seu Pix. Já estamos separando seu pedido para o despacho.</p>
                    <button className="btn btn--gold btn--lg" onClick={() => navigate('confirmation', { orderId: pixData.orderId })}>
                      Ver detalhes do pedido <Icon name="arrow-right" size={16} />
                    </button>
                  </div>
                ) : (
                  <>
                    <div className="pixbox__head">
                      <div>
                        <div className="hero__kicker"><span className="hero__dot" /> AGUARDANDO PAGAMENTO</div>
                        <h3>Pague o Pix para confirmar seu pedido</h3>
                        <p className="muted">Pedido <strong>{pixData.orderId}</strong> · Expira em <strong style={{ color: '#c2391f' }}>{fmtCountdown(pixCountdown)}</strong></p>
                      </div>
                      <div className="pixbox__amt">
                        <span>Valor a pagar</span>
                        <strong>{BRL(pixData.amount)}</strong>
                      </div>
                    </div>
                    <div className="pixbox__grid">
                      <div className="pixbox__qr">
                        <PixQR text={pixData.code} />
                        <div className="muted" style={{ textAlign: 'center', fontSize: 12 }}>Aponte a câmera do banco</div>
                      </div>
                      <div className="pixbox__copy">
                        <h4>1. Pix copia-e-cola</h4>
                        <textarea readOnly value={pixData.code} onClick={(e) => e.target.select()} />
                        <button className="btn btn--gold btn--block" onClick={() => {
                          navigator.clipboard?.writeText(pixData.code);
                          setPixCopied(true);
                          setTimeout(() => setPixCopied(false), 2000);
                        }}>
                          {pixCopied ? <><Icon name="check" size={14} /> Copiado!</> : 'Copiar código Pix'}
                        </button>
                        <h4 style={{ marginTop: 14 }}>2. Abra o app do seu banco</h4>
                        <p className="muted" style={{ fontSize: 13 }}>Cole o código na opção <strong>Pix Copia e Cola</strong>, ou escaneie o QR. A confirmação chega em segundos.</p>
                      </div>
                    </div>
                    <div className="pixbox__status">
                      <div className="pixbox__spin" /> Aguardando confirmação do gateway Pix…
                      <button className="btn btn--ghost btn--sm" onClick={() => setPixStatus('confirmado')}>Já paguei</button>
                    </div>
                  </>
                )}
              </div>
            )}
          </section>
          <aside className="checkout__side">
            <h3>Resumo</h3>
            <div className="checkout__items">
              {items.map((i) => (
                <div key={i.id} className="checkout__item">
                  <div className="checkout__item-art"><ProductImage product={i.product} /></div>
                  <div className="checkout__item-body">
                    <div className="checkout__item-name">{i.product.short}</div>
                    <div className="muted" style={{ fontSize: 12 }}>{i.qty} × {BRL(i.product.price)}</div>
                  </div>
                  <div className="checkout__item-price">{BRL(i.product.price * i.qty)}</div>
                </div>
              ))}
            </div>
            <div className="cartside__row"><span>Subtotal</span><span>{BRL(cart.subtotal)}</span></div>
            {cart.discount > 0 && <div className="cartside__row cartside__row--off"><span>Cupom {cart.coupon}</span><span>-{BRL(cart.discount)}</span></div>}
            <div className="cartside__row"><span>Frete</span><span>{shipPrice === 0 ? 'GRÁTIS' : BRL(shipPrice)}</span></div>
            <div className="cartside__total"><span>Total</span><strong>{BRL(total)}</strong></div>
            {data.payment === 'pix' && <div className="muted" style={{ fontSize: 12, textAlign: 'right' }}>No Pix: <strong style={{ color: '#0d4a30' }}>{BRL(pixTotal)}</strong></div>}
          </aside>
        </div>
      </div>
    </main>
  );
}

function Field({ label, children, col }) {
  return (
    <label className="fld" style={col ? { gridColumn: 'span ' + col } : null}>
      <span>{label}</span>
      {children}
    </label>
  );
}

// ─── CONFIRMATION ────────────────────────────────────────────────
function ConfirmationPage({ navigate, params }) {
  const cart = React.useContext(CartContext);
  const order = cart.orders.find((o) => o.id === params.orderId) || cart.orders[0];

  if (!order) {
    return (
      <main className="pg"><div className="hd__container" style={{ padding: '80px 0', textAlign: 'center' }}>
        <h2>Pedido não encontrado.</h2>
        <button className="btn btn--gold" onClick={() => navigate('home')}>Voltar ao início</button>
      </div></main>
    );
  }

  return (
    <main className="pg conf">
      <div className="hd__container conf__inner">
        <div className="conf__seal">
          <Icon name="check" size={42} color="#0d4a30" />
        </div>
        <div className="conf__kicker">PEDIDO CONFIRMADO</div>
        <h1>Você acaba de garantir <span>sua coleção</span></h1>
        <p className="conf__lead">
          Recebemos seu pedido. Enviamos um e-mail com o resumo e o status atualizado.
          Acompanhe a entrega na sua área do cliente.
        </p>
        <div className="conf__num">
          <span>Número do pedido</span>
          <strong>{order.id}</strong>
        </div>
        <div className="conf__grid">
          <div className="conf__card">
            <h3>Itens do pedido</h3>
            {order.items.map((i) => (
              <div key={i.id} className="conf__item">
                <div className="conf__item-art"><ProductImage product={i.product} /></div>
                <div>
                  <div className="conf__item-name">{i.product.short}</div>
                  <div className="muted">Qtd {i.qty} · {BRL(i.product.price * i.qty)}</div>
                </div>
              </div>
            ))}
            <div className="conf__total"><span>Total</span><strong>{BRL(order.total)}</strong></div>
          </div>
          <div className="conf__card">
            <h3>Entrega</h3>
            <p><strong>{order.shipping}</strong><br />
              {order.address.street}, {order.address.number} · {order.address.city}/{order.address.state} · CEP {order.address.cep}
            </p>
            <h3 style={{ marginTop: 18 }}>Pagamento</h3>
            <p>{order.payment === 'pix' && 'Pix · pago direto no site'}{order.payment === 'card' && 'Cartão de crédito · finalização via WhatsApp'}</p>
            <h3 style={{ marginTop: 18 }}>Status</h3>
            <ol className="conf__timeline">
              <li className="is-on"><span /> Pedido recebido</li>
              <li><span /> Pagamento confirmado</li>
              <li><span /> Em separação</li>
              <li><span /> Despachado</li>
              <li><span /> Entregue</li>
            </ol>
          </div>
        </div>
        <div className="conf__cta">
          <button className="btn btn--gold btn--lg" onClick={() => navigate('account', { tab: 'orders' })}>Ver meus pedidos</button>
          <button className="btn btn--ghost btn--lg" onClick={() => navigate('home')}>Voltar à loja</button>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CartPage, CheckoutPage, ConfirmationPage, Field });