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.

C. 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

Propriedade	Tipo	Padrão	Descrição
`show_table_view`	boolean	`false`	Habilita o novo layout em tabela (grid) para a listagem de assinaturas. Quando `false`, mantém o layout legado com accordion simples.
`show_card_change`	boolean	`false`	Exibe o botão e modal de "Alterar Cartão de Crédito" nas ações da assinatura. Requer que os scripts de pagamento estejam carregados na página (`wake_subscription_change_card_scripts`).

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`

Arquivo	Tipo	Descrição
`Configs/settings.json`	Configuração	Adicionado objeto `subscriptions_page` com flags `show_card_change` e `show_table_view`
`Pages/account/subscriptions.html`	Página	Adicionado `{{ wake_subscription_change_card_scripts }}` para carregar scripts de troca de cartão
`Assets/CSS/input_account.css`	Estilos (Tailwind)	Novos estilos para layout tabela, modal de produtos, botão de produtos, troca de cartão
`Assets/CSS/output_account.css`	Estilos (compilado)	CSS compilado correspondente ao `input_account.css`

Repositório `wake-components`

Arquivo	Tipo	Descrição
`Assets/JS/wake_subscriptions.js`	JavaScript	Adicionado `hideConfirmationModal()` na remoção de produtos; nova função `showSubscriptionProductsModal()` para modal de listagem de produtos
`Assets/JS/wake_subscription_change_card.js`	JavaScript (novo)	Lógica completa de troca de cartão de crédito da assinatura
`Components/account/wake_account_subscription_card_view.html`	Componente	Novo layout tabela com colunas (chevron, nome, recorrência, próximo pedido, produtos, ações); modal de listagem de produtos; modal de troca de cartão
`Components/account/wake_account_subscription_content.html`	Componente	Conteúdo expandido da assinatura com detalhes do cartão, endereço, lista de produtos e barra de ações
`Components/account/wake_account_subscription_product_view.html`	Componente	Layout de produto em linha para a tabela; botão de exclusão com modal de confirmação
`Components/account/wake_account_subscriptions.html`	Componente	Header da tabela com colunas; renderização condicional baseada em `show_table_view`; estado vazio
`Components/wake_subscription_change_card_scripts.html`	Componente (novo)	Carrega scripts necessários para troca de cartão (`wake_payment_functions`, `wake_subscription_change_card`, `wake_fbits_gateway`)
`Configs/components.json`	Configuração	Registro do novo componente `wake_subscription_change_card_scripts`

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

Dependências

SDK Client ({{ sdk_client }}): API de assinaturas (client.customer.subscriptionProductRemove, client.customer.subscriptionUpdateStatus, etc.)
wake_utils.js: Funções showModalAccount, closeModalAccount, showOverlay, hideConfirmationModal, showConfirmationModal
wake_account.js: Funções showModalAccount, closeModalAccount
wake_payment_functions.js + wake_fbits_gateway.js: Necessários apenas quando show_card_change: true

Referências repositório awake:

Branch awake: 2425-criacao-de-experiencia-de-troca-de-cartao-no-minha-conta Branch wake-components: https://git.fbits.net/stores/wake-components/-/merge_requests/160 Branch de Testes na Awake3: https://awake3.fbits.store/?preview-theme=Awvdowv5S6fzL%2boSclfDjMAEdto%2bwLRzhebKNXOJVi8%3d

Updated about 1 hour ago