{"section":"tutorials","requestedLocale":"pt","requestedSlug":"vtex-sales-app-configurar-o-arquivo-checkout-instore-customjs","locale":"pt","slug":"vtex-sales-app-configurar-o-arquivo-checkout-instore-customjs","path":"docs/pt/tutorials/apps/vtex-sales-app/vtex-sales-app-configurar-o-arquivo-checkout-instore-customjs.md","branch":"main","content":"O `checkout-instore-custom.js` é o arquivo usado para personalizar as configurações do **VTEX Sales App**. Este artigo descreve as propriedades disponíveis nesse arquivo e como defini-las. Para localizá-lo, siga os passos abaixo:\r\n\r\n1. No Admin VTEX, acesse **Configurações da loja > Storefront > Checkout** ou digite **Checkout** no campo de busca.\r\n2. Clique na engrenagem da conta principal em que o **Sales App** foi instalado.\r\n3. Clique na aba **Código**.\r\n4. Na seção **Arquivos**, você verá o arquivo `checkout-instore-custom.js`.\r\n\r\n## Idioma e localidade\r\n\r\n- `window.LOCALE_MESSAGES.locale`: define o idioma e a localidade usados no **Sales App**, como português do Brasil (`'pt-br'`), inglês dos EUA (`'en-us'`) e espanhol da Espanha (`'es-es'`).\r\n\r\n## Configuração por conta\r\n\r\n- `window.INSTORE_CONFIG_BY_ACCOUNT`: objeto que mapeia lojas e contas para configurações específicas.\r\n  - **Chave:** ID e nome da loja (ex: `\"1\"` e `\"nomedaloja\"`).\r\n  - `name`: nome da conta VTEX.\r\n- `accounts`: localizado dentro de `INSTORE_CONFIG`, recebe o valor de `window.INSTORE_CONFIG_BY_ACCOUNT` e associa o **Sales App** às lojas configuradas.\r\n\r\n## Autenticação\r\n\r\n- `auth.oAuthProviderName`: define o provedor de autenticação OAuth usado para fazer login no **Sales App** (ex.: `'Google'`).\r\n\r\n## Fluxo de checkout e navegação\r\n\r\n- `enableNewCheckout`: ativa o novo fluxo de checkout do **Sales App**. O valor padrão dessa flag é `false`. Quando o lojista conclui a configuração inicial, essa flag é salva como `true` na loja.\r\n\r\n  > ⚠️ Não altere o valor de `enableNewCheckout`. O **Sales App** grava esse valor automaticamente após a configuração inicial e uma alteração manual pode interromper o fluxo do checkout e gerar problemas na finalização de pedidos.\r\n\r\n- `enableExplore`: ativa a tela com a experiência **Explore** (vitrine e anúncios).\r\n- `initialPage`: define a página que abre primeiro após o login. Os valores aceitos são:\r\n\r\n  | Valor | Rota | O que abre |\r\n  | :--- | :--- | :--- |\r\n  | `'advertisements'` | `/checkout/advertisements` | Vitrine e anúncios (a página **Explore**) |\r\n  | `'sale'` | `/sale` | Fluxo de venda (rota descontinuada) |\r\n  | `'turn-list'` | `/turn-list` | Lista da vez |\r\n  | `'b2b'` | `/b2b` | Página inicial B2B |\r\n\r\n- `pathAfterLogin`: determina a rota interna para onde o usuário é direcionado depois de realizar o login (ex: `'/sale'`). Essa flag foi descontinuada e substituída por `initialPage`. Ela ainda tem precedência sobre `initialPage`. Se a loja tiver `pathAfterLogin` no arquivo, `initialPage` é ignorado.\r\n\r\n  > ⚠️ Use `initialPage` no lugar de `pathAfterLogin`.\r\n\r\n- `topbarTitle`: define o texto exibido na barra superior do **Sales App** (ex: `'Nome da loja'`).\r\n- `enableChangePrice`: quando configurado como `true`, permite que o vendedor altere o preço manualmente no **Sales App**. Quando `false`, não permite. Está relacionado ao campo `manualPrice` do [OrderForm](https://developers.vtex.com/docs/guides/orderform-fields).\r\n\r\n## Vendas e rastreio\r\n\r\n- `sales.enabled`: habilita a funcionalidade de venda no **Sales App**.\r\n- `salesAssociateTracking.enabled`: ativa o rastreio de vendas por vendedor, de forma que pedidos sejam associados a um código de vendedor.\r\n\r\n  > ⚠️ Tanto `sales.enabled` quanto `salesAssociateTracking.enabled` precisam estar configurados como `true` para que o **Sales App** funcione corretamente.\r\n\r\n- `salesPerformance.enabled`: quando configurado como `true`, exibe o monitor de performance da loja no menu novo do **Sales App**. Quando `false`, não exibe.\r\n- `enableStorePerformance`: quando configurado como `true`, exibe a performance da loja na barra lateral da versão anterior do **Sales App**. Quando `false`, não exibe. Essa flag é independente de `salesPerformance.enabled`.\r\n- `showItemOriginSeller`: quando configurado como `true`, exibe o texto **loja parceira** nos itens vendidos por um seller externo. Quando `false`, não exibe.\r\n\r\n## Busca de produtos (`search`)\r\n\r\n- `search.vtexSearch`: quando configurado como `true`, usa o [**Intelligent Search**](https://help.vtex.com/pt/docs/tutorials/intelligent-search-visao-geral). Quando `false` ou ausente do arquivo, usa o [**VTEX Search (Legado)**](https://help.vtex.com/pt/docs/tutorials/como-funciona-vtex-search-legado). Os filtros facetados (`search.filtersEnabled`) e a regionalização (`search.regionalizationEnabled`) dependem desta flag estar configurada como `true`.\r\n- `search.filtersEnabled`: habilita filtros facetados na interface de busca. Só tem efeito quando `search.vtexSearch` está configurada como `true`.\r\n- `search.regionalizationEnabled`: ativa a [busca regionalizada](https://help.vtex.com/pt/docs/tutorials/regionalizacao). Só tem efeito quando `search.vtexSearch` está configurada como `true`.\r\n- `search.alternateIdRegex`: expressão regular (regex) usada para reconhecer IDs alternativos de SKU, como códigos de barras.\r\n\r\n## Estoque e venda sem estoque\r\n\r\n- `sellWithoutStockInHands`: permite vender produtos sem estoque local em lojas com configuração de vendas de estoque local (**On Hands**).\r\n- `showStock`: quando configurado como `true`, exibe a quantidade em estoque nas telas de produto e de busca. Quando `false`, não exibe.\r\n\r\n## Anexos e serviços\r\n\r\n- `enableAttachments`: habilita serviços e anexos no fluxo de venda (ex: embalagem para presente).\r\n- `giftPackagingName`: nome exibido para o serviço ou anexo (ex: `'embalagem'`).\r\n\r\n## Social Selling\r\n\r\n- `socialShare.vendorType`: determina a identificação do vendedor nos links de [**Social Selling**](https://help.vtex.com/pt/docs/tracks/compartilhar-carrinho-utilizando-o-vtex-sales-app-social-selling) (ex: `'code'` para usar o código do vendedor).\r\n- `socialShare.hostName`: define o endereço do site que aparece no link compartilhado com o cliente. O **Sales App** usa, nesta ordem, o valor definido nesta propriedade (`socialShare.hostName`), o endereço já salvo para o compartilhamento (`share.hostName`) e, por último, o endereço da página em que o vendedor está (`window.location.host`).\r\n\r\n## Código do vendedor (`noteAsVendorCode`)\r\n\r\n- `noteAsVendorCode.type`: define o tipo de campo do código do vendedor. Apenas o valor `'select'` cria uma lista de seleção. Os outros valores exibem um campo aberto de texto. Os valores aceitos são:\r\n\r\n  | Valor | Resultado |\r\n  | :--- | :--- |\r\n  | `'select'` | Lista de seleção com os vendedores da loja do vendedor logado. A lista é preenchida pelo `getVendorsByStore` a partir do `storeId` desse vendedor. |\r\n  | `'input'` | Campo de texto (`TextBox`). |\r\n  | `'text'` | Campo de texto (`TextBox`). |\r\n\r\n- `noteAsVendorCode.skipValidation`: controla a obrigatoriedade do código do vendedor e a consulta ao [Master Data](https://help.vtex.com/pt/docs/tutorials/master-data).\r\n\r\n  | Valor | Resultado |\r\n  | :--- | :--- |\r\n  | `false` | Torna o campo obrigatório. |\r\n  | `true` | Salva o código sem consultar o **Master Data**. |\r\n  | Flag ausente do arquivo | O campo não fica obrigatório, mas o **Sales App** ainda valida se o código informado está correto. |\r\n\r\n- `noteAsVendorCode.autofill`: define se o código do vendedor é preenchido automaticamente no link compartilhado. Essa flag só funciona se `socialShare` estiver definido. Veja [Social Selling](#social-selling).\r\n\r\n  | Valor | Resultado |\r\n  | :--- | :--- |\r\n  | `false` | Não preenche o código automaticamente. |\r\n  | `true` | Preenche automaticamente o código do vendedor no link compartilhado. |\r\n  | Flag ausente do arquivo | O valor padrão é `true`. |\r\n\r\n- `noteAsVendorCode.mask`: expressão regular (regex) que valida o formato do código do vendedor.\r\n\r\n  | Valor | Resultado |\r\n  | :--- | :--- |\r\n  | Regex configurada | Valida o formato do código do vendedor. É ignorada quando `noteAsVendorCode.type` é `'select'`. |\r\n  | Flag ausente do arquivo | A expressão regular (regex) permanece vazia e o campo aceita qualquer formato. |\r\n\r\nVeja um exemplo de como configurar o `noteAsVendorCode`:\r\n\r\n```js\r\nnoteAsVendorCode: {\r\n  type: 'input',\r\n  mask: '^LL.{0,8}$',\r\n  skipValidation: true,\r\n  autofill: false,\r\n}\r\n```\r\n\r\n## Cliente anônimo\r\n\r\n- `allowAnonymousUser`: quando configurado como `true`, permite finalizar pedidos sem identificar o cliente. Quando `false`, não permite. Utilizado para vendas de estoque local (**On Hands**).\r\n\r\n## Cadastro e perfil do cliente\r\n\r\n- `customerProfile.isCorporate`: define se a venda para pessoa jurídica (PJ) fica disponível no cadastro do cliente. Além de `true` e `false`, a flag aceita o objeto `{ optional: true }`.\r\n\r\n  | Valor | Resultado |\r\n  | :--- | :--- |\r\n  | `false` | Desabilita a venda para pessoa jurídica. |\r\n  | `true` | Torna obrigatório identificar a venda como pessoa jurídica. |\r\n  | `{ optional: true }` | Mantém a venda para pessoa jurídica disponível, mas o preenchimento é opcional. |\r\n\r\n## Tipos de identificação do cliente\r\n\r\n- `enableIdentificationTypes`: define quais tipos de identificação do cliente ficam disponíveis no **Sales App**. Configure cada propriedade como `true` para habilitar o método ou como `false` para desabilitá-lo.\r\n  - `QRCode`: quando configurado como `true`, permite que o cliente identifique-se usando o QR Code. Quando `false`, não permite.\r\n  - `CPF`: quando configurado como `true`, permite que o cliente identifique-se usando o CPF. Quando `false`, não permite.\r\n  - `Email`: quando configurado como `true`, permite que o cliente identifique-se usando o email. Quando `false`, não permite.\r\n  - `Phone`: quando configurado como `true`, permite que o cliente identifique-se usando o número de telefone. Quando `false`, não permite.\r\n\r\nVeja um exemplo de como configurar o `enableIdentificationTypes`:\r\n\r\n```js\r\nenableIdentificationTypes: {\r\n  QRCode: false,\r\n  CPF: false,\r\n  Email: true,\r\n  Phone: false,\r\n}\r\n```\r\n\r\n## Pagamentos\r\n\r\n- `challengeDrivenPaymentWorkflow`: ativa um fluxo de pagamento com validações adicionais, como [carteiras digitais (ewallets)](https://help.vtex.com/pt/docs/tracks/carteira-digital-e-wallet), [Payment Apps](https://developers.vtex.com/docs/guides/payments-integration-payment-app) e [POS (Point of Sale)](https://developers.vtex.com/docs/guides/payments-integration-ppp-applied-to-pos).\r\n- `payments.filters`: lista os IDs dos meios de pagamento (`paymentSystemId`) que podem aparecer no checkout do **Sales App** (ex: `'1'`, `'4'`, `'125'`, `'202'`, `'44'`, `'45'`, `'207'`, `'208'`, `'209'`).\r\n\r\n## Cancelamento de pedido\r\n\r\n- `isCancelOrderAlwaysVisible`: quando configurado como `true`, mantém sempre visível na interface a opção de cancelar o pedido. Quando `false`, não mantém visível.\r\n\r\n## Dispositivos e impressora\r\n\r\n- `printedOrderExtraText`: texto adicional impresso no comprovante do pedido.\r\n- `enablePrintButton`: quando configurado como `true`, exibe o botão de imprimir no pedido. Quando `false`, não exibe. O valor padrão é `true`."}