feat: add budget to order details

[ArthurTriis1]

What's the purpose of this pull request?

No contexto do B2B FastStore, clientes corporativos precisam visualizar informações sobre os budgets alocados em seus pedidos para ter transparência sobre como os orçamentos foram utilizados. Atualmente, essas informações não estão disponíveis na página de detalhes do pedido no My Account, dificultando o acompanhamento financeiro e a gestão de budgets pelos compradores B2B.

Esta implementação adiciona a exibição dos budgets alocados diretamente na página de detalhes do pedido, seguindo o mesmo padrão visual dos outros cards informativos (Payment, Delivery, Summary, etc.), proporcionando uma experiência consistente e completa para os usuários B2B.

How it works?

Esta feature adiciona um novo card MyAccountBudgetsCard na página de detalhes do pedido (/pvt/account/orders/[id]) que exibe informações sobre os budgets alocados ao pedido.

Implementação técnica:

1. GraphQL Schema (packages/api/src/typeDefs/userOrder.graphql):

   • Adicionados novos tipos GraphQL para representar a estrutura de dados de budgets:
     • UserOrderBudgetData: Container principal com lista de budgets
     • UserOrderBudget: Informações do budget (id, name, unitId, cycleConfiguration, balance, allocations)
     • UserOrderBudgetAllocation: Informações de alocação específica (linkedEntity, balance, reservations, ToBeSpent)
     • UserOrderBudgetBalance: Valores financeiros (amount, balanceAdjustment, remaining)
     • UserOrderBudgetCycleConfiguration: Configuração do ciclo do budget
   • Campo budgetData adicionado aos tipos UserOrder e UserOrderResult

2. API Layer (packages/api/src/platforms/vtex/resolvers/query.ts):

   • O resolver userOrder agora retorna o campo budgetData diretamente da API VTEX OMS
   • Os dados são obtidos através do endpoint /api/oms/user/orders/${orderId} que já retorna essas informações

3. Componente React (packages/core/src/components/account/orders/MyAccountOrderDetails/MyAccountBudgetsCard/):

   • Novo componente MyAccountBudgetsCard criado seguindo o padrão dos outros cards do My Account
   • Exibe uma tabela com as seguintes colunas:
     • Name: Nome do budget (truncado se > 20 caracteres) e IDs das allocations relacionadas
     • Available: Valor disponível do budget (baseado na maior allocation)
     • To be spent: Valor a ser gasto (balanceAdjustment)
     • Remaining: Valor restante após o gasto
   • O componente processa múltiplos budgets e suas allocations, selecionando a allocation com maior valor de balance para exibição
   • Renderização condicional: o card só é exibido se budgetData existir e contiver budgets com allocations válidas

4. Integração (packages/core/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderDetails.tsx):

   • O componente MyAccountBudgetsCard foi integrado na página de detalhes do pedido
   • Posicionado após o MyAccountSummaryCard e antes dos accordions de delivery options
   • Renderização condicional baseada na existência de order.budgetData

5. Query GraphQL (packages/core/src/pages/pvt/account/orders/[id].tsx):

   • Adicionado o fragment budgetData na query ServerOrderDetailsQuery para buscar todas as informações necessárias dos budgets

Comportamento:

• O card só aparece quando há budgets alocados ao pedido
• Valores são formatados usando a moeda do pedido (currencyCode)
• Se não houver budgets ou allocations válidas, o card não é renderizado (fail-safe)

How to test it?

Pré-requisitos:

• Ter acesso a uma conta VTEX B2B com budgets configurados
• Ter um pedido que utilize budgets alocados

Passos para teste:

1. Configurar ambiente de desenvolvimento:

   pnpm install
   pnpm dev

2. Acessar a página de detalhes do pedido:

   • Fazer login no My Account
   • Navegar para /pvt/account/orders
   • Selecionar um pedido que tenha budgets alocados

3. Verificar a exibição do card de budgets:

   • O card "Budgets" deve aparecer após o card "Summary"
   • Verificar se os valores estão sendo exibidos corretamente:
     • Nome do budget truncado corretamente se > 20 caracteres
     • Valores formatados na moeda correta
     • IDs das allocations exibidos na linha secundária do nome
   • Verificar se os cálculos estão corretos:
     • Available: valor disponível
     • To be spent: valor do balanceAdjustment
     • Remaining: valor restante

4. Testar casos edge:

   • Pedido sem budgets: o card não deve aparecer
   • Budget sem allocations: o card não deve aparecer
   • Múltiplos budgets: todos devem ser exibidos na tabela

5. Verificar responsividade:

   • Testar em diferentes tamanhos de tela
   • Verificar se a tabela se adapta corretamente

Starters Deploy Preview

References

Task relacionada:

• B2BTEAM-2726 - Exibir budgets alocados no detalhe do pedido do myaccount

Documentação:

• Documento de produto
• FastStore My Account
• FastStore - My Account Vision
• Building My Account
• My Account - Extensibilidade de páginas
• My Account - FastStore - Extensibilidade de sections

Relacionado:

• B2BTEAM-2724 - Task relacionada que serviu de referência para esta implementação

Checklist

You may erase this after checking them all 😉

PR Title and Commit Messages

• PR title and commit messages follow the Conventional Commits specification
  • Available prefixes: feat, fix, chore, docs, style, refactor, ci and test

PR Description

• Added a label according to the PR goal - breaking change, bug, contributing, performance, documentation..

Dependencies

• Committed the pnpm-lock.yaml file when there were changes to the packages

Documentation

• PR description
• For documentation changes, ping @Mariana-Caetano to review and update (Or submit a doc request)

---

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.