Alterações em estilos - CSS

Commit de referência

Arquivos Impactados:

• Assets/CSS/input_checkout.css
• Assets/CSS/output_checkout.css

Visão Geral

Este commit implementa as diretrizes visuais e de UX obrigatórias para a certificação do Click to Pay (Mastercard). As alterações focam na estilização dos componentes de consentimento, listagem de cartões, feedbacks visuais (loading/overlay) e exibição de bandeiras, conforme exigido na documentação oficial.

Detalhes da Implementação por Cenário

1. Componentes Gerais e Identidade Visual

Foram adicionadas classes para garantir a exibição correta dos logos e ícones obrigatórios.

• Logos e Bandeiras:
  • Classes .wake-brand-clicktopay, .wake-brand-mastercard, .wake-brand-visa configuradas com as URLs oficiais dos SVGs da Mastercard (src.mastercard.com).

2. Cenário 1: Novo Cliente (Fluxo de Consentimento)

Estilização do wrapper de consentimento onde o usuário opta por salvar o cartão no Click to Pay.

• Wrapper de Consentimento: .wake-checkout-consent-wrapper
  • Implementado layout flexível com bordas e espaçamentos conforme guia do Figma.
  • Controle de visibilidade por bandeira (.wake-checkout-consent-wrapper.mastercard, .wake-checkout-consent-wrapper.visa).
• Desconto:
  • Classe .wake-click-to-pay-discount para destacar o benefício financeiro (texto em azul/destaque) quando a opção está ativa.
• Checkbox e Termos:
  • Estilização customizada do checkbox (.wake-checkout-consent-option .checkmark) e links de termos (.click-to-pay-link) para manter consistência visual.

3. Cenário 2 e 3: Cliente Recorrente (Gestão de Cartões e OTP)

Ajustes para a exibição da lista de cartões salvos e fluxo de autenticação.

• Lista de Cartões:
  • .wake-click-to-pay-cards: Contêiner principal.
  • Controle de visibilidade (display: none por padrão, ativado via .wake-card-visible) para alternar entre o "último cartão usado" e a "lista completa".
  • Link "Mostrar todos os cartões": .wake-show-all-cards-link estilizado como link de ação secundária.
• Cartões Expirados:
  • Tratamento visual para cartões inválidos/expirados via .wake-suggested-card.card-expired (fundo cinza, cursor not-allowed).
• Estados de Carregamento (Overlay):
  • Implementado overlay de processamento .wake-ctp-payment-overlay com spinner animado (.wake-ctp-spinner) para feedbacks de autenticação OTP e processamento de pagamento.

4. Responsividade e Adaptações

• Mobile First: Ajustes de tamanho de fonte e espaçamento para garantir que o fluxo de checkout seja fluido em dispositivos móveis, com media queries (ex: min-width: 1536px) para ajustes finos em telas grandes.

Trechos de Código Relevantes (CSS)

/* Exemplo: Branding Oficial */
.wake-brand-clicktopay {
  background-image: url('https://src.mastercard.com/srci/integration/components/src-ui-kit/assets/icons/src.svg');
  width: 37px;
  height: 18px;
}

/* Exemplo: Container de Consentimento */
.wake-checkout-consent-wrapper {
  @apply flex flex-col w-full mb-3 border border-gray-200 rounded-md bg-white pt-4 pb-4 pl-2 pr-5;
}

/* Exemplo: Overlay de Pagamento */
.wake-ctp-payment-overlay {
  @apply fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center;
  z-index: 99999;
}