Experiência de assinaturas no Minha Conta

Esta funcionalidade foi projetada para o Storefront 2.0 com o objetivo de oferecer ao consumidor final autonomia total na gestão de suas assinaturas e cartões de crédito. A implementação foca em segurança e continuidade de receita, permitindo que atualizações de pagamento sejam processadas e validadas em tempo real.

1. Escopo de Compatibilidade

Para a correta implementação desta funcionalidade, a loja deve obrigatoriamente atender aos seguintes requisitos:

• Wake Storefront 2.0.
• Conectores Suportados: Adyen e/ou Wake Gateway..

2. Detalhamento das features

Troca de Cartão com Tokenização Imediata

O que faz: Permite que o cliente altere o cartão de crédito de uma assinatura diretamente pelo painel "Minha Conta". O sistema dispara automaticamente um processo de tokenização em tempo real junto ao conector (Adyen ou Wake Gateway). Por que: Evita falhas de cobrança no ciclo seguinte. Ao validar o cartão no ato da troca, a agência garante que o novo token já esteja pronto para uso, eliminando erros comuns de processamento tardio.

Gestão "Meus Cartões"

Cria uma área centralizada para listagem e exclusão de cartões salvos no perfil do usuário. Oferece conformidade com normas de privacidade e dá controle ao usuário sobre seus dados financeiros armazenados, permitindo a limpeza de cartões expirados ou não utilizados.

Configuração via settings.json

A feature é controlada pelo objeto subscriptions_page no Configs/settings.json:

"subscriptions_page": {
  "show_card_change": true,
  "show_table_view": true
}

Propriedades

Observações sobre settings.json

• Se subscriptions_page não existir no settings.json, os templates usam o layout legado (sem tabela, sem troca de cartão).
• Ambas as flags são verificadas nos templates via settings.subscriptions_page?.show_table_view e settings.subscriptions_page?.show_card_change.

Arquivos alterados

Repositório awake

Funcionalidades

1. Layout em Tabela (show_table_view: true)

Substitui o accordion simples por uma tabela em grid com as colunas:

• Chevron (expandir/colapsar)
• Identificador da Assinatura
• Recorrência
• Próximo Pedido
• Produtos (clicável – abre modal)
• Ações (menu dropdown)

2. Modal de Listagem de Produtos

Ao clicar na quantidade de produtos na linha da assinatura, abre um modal com:

• Tabela com foto, nome, quantidade, valor e link para página do produto
• Botão "+ ADICIONAR PRODUTOS" que redireciona ao modal de adição existente
• Dados de imagem/nome carregados via query GraphQL única (batch de todos os variantIds)

Função: showSubscriptionProductsModal(subscriptionId) em wake_subscriptions.js

3. Troca de Cartão de Crédito (show_card_change: true)

Modal com:

• Exibição do cartão atual (bandeira, número mascarado, validade)
• Formulário para dados do novo cartão (via gateway de pagamento)
• Botões Cancelar/Alterar

Requer: {{ wake_subscription_change_card_scripts }} na página

4. Correções de UX

• hideConfirmationModal() adicionado na função removeSubscriptionProduct() para fechar o modal de confirmação após remoção
• Menu de ações com opções contextuais (pausar, cancelar, reativar) baseadas no status atual da assinatura

5. Requisitos Técnicos de Implementação (GraphQL)

Para que os dados do cartão de crédito (bandeira, validade e número mascarado) sejam exibidos corretamente nos componentes de interface, é necessário atualizar a query de busca de assinaturas.

Arquivo: Queries/account/subscriptions.graphql

Certifique-se de incluir o campo payment dentro do objeto subscriptions, conforme o esquema abaixo:

subscriptions {
  # ... campos existentes
  payment {
    card { 
      brand
      expiration 
      name
      number
    }
  }
}

Este campo é o responsável por injetar os dados do cartão atual de cada assinatura no front-end. Sem essa alteração na query, o modal de "Troca de Cartão" e as listagens podem não exibir as informações financeiras vinculadas à assinatura.

Referências repositório awake:

Branch awake (checkout-SSR): https://git.fbits.net/stores/awake

Branch wake-components (v1): https://git.fbits.net/stores/wake-components