npm package: @solfacil/store-tools-financing
Description: Store tools for financing
Latest version: 0.17.9-fintech
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Store Tools Financing

Componente para vendas de Kits Solares que será incorporado em projetos Solfácil.

## Pré-requisitos

Antes de começar, certifique-se de ter instalado o [Node.js](https://nodejs.org/) e o [Yarn](https://classic.yarnpkg.com/en/docs/install/) em sua máquina.

## Instalação

1. Clone o repositório do projeto:

   ```bash
   git clone https://github.com/seu-usuario/seu-projeto.git

2. Na pasta do projeto execute a instalação:

   ```bash
   yarn install

## Ambiente de desenvolvimento
Para que os kits sejam exibidos em ambiente de desenvolvimento é necessario que no arquivo ```apollo.ts``` o ```useCookie``` esteja comentado
   ```bash
   // import { useCookie } from './cookies'
   // const access_token = useCookie<string>().get('access_token')
```
e a constante ```access_token ``` receba um token que está autenticado em https://stg-loja.solfacil.com.br/
   ```bash
   const access_token = 'token_de_autenticacao'
```
## Instalação de um Pacote Localmente

A instalação local é útil quando você deseja testar um pacote ou módulo em desenvolvimento antes de publicá-lo no registro npm.

## Passo a Passo

### Passo 1: Compilar o Pacote

Antes de empacotar o pacote, é necessário compilá-lo para garantir que todas as dependências estejam corretamente resolvidas e que o código esteja pronto para uso. Para fazer isso, siga os passos abaixo:

```bash
yarn build:lib:ts
```
### Passo 2: Empacotamento
Após a compilação do pacote, você pode empacotá-lo usando o Yarn. O empacotamento cria um arquivo .tgz contendo o pacote que pode ser instalado localmente em outros projetos. Execute o seguinte comando:
```bash
yarn pack
```
Este comando criará um arquivo ```.tgz``` no diretório raiz do seu projeto. O nome do arquivo terá o formato ```nome-do-pacote-versao.tgz```, onde ```nome-do-pacote``` é o nome do seu pacote e versao: ```X.X.X``` é a versão atual do pacote.

### Passo 3: Instalar Localmente
Agora que você criou o pacote com sucesso, você pode instalá-lo em outro projeto localmente usando o arquivo ```.tgz``` que você criou. Vá para o diretório do projeto onde deseja instalar o pacote localmente e execute o seguinte comando:

```bash
yarn add file:/caminho/para/o/arquivo/nome-do-pacote-versao.tgz
```
Substitua ```/caminho/para/o/arquivo/nome-do-pacote-versao.tgz``` pelo caminho completo para o arquivo .tgz que você criou no Passo 2.

Isso instalará o pacote localmente em seu projeto, e agora você pode usá-lo como qualquer outro pacote instalado via Yarn.

### Passo 4: Integrar a Biblioteca "@solfacil/store-tools-financing" no Projeto
No arquivo `package.json` do seu projeto, adicione a biblioteca `"@solfacil/store-tools-financing"` como uma dependência. Certifique-se de usar a versão específica do pacote que você deseja. Você pode fazer isso da seguinte maneira:

```bash
"dependencies": {
  "@solfacil/store-tools-financing": "./solfacil-store-tools-financing-v0.0.0.tgz"
}
```

### Passo 5: Execute o comando de instalação
Use o gerenciador de pacotes para instalar a biblioteca e suas dependências executando o seguinte comando no terminal:

```bash
pnpm install
```

### Passo 6: Crie um arquivo "store-tools-financing.ts"
Na pasta "modules" do seu projeto, crie um novo arquivo chamado "store-tools-financing.ts". Dentro deste arquivo, adicione o seguinte código:

```bash
import { install as StoreToolsFinancing } from '@solfacil/store-tools-financing'
import '@solfacil/store-tools-financing/dist/style.css'
import type { UseModule } from '~/types'

export const install: UseModule = ({ instance }) => {
  instance.use(StoreToolsFinancing)
}

```

### Passo 7: Adicione o componente à sua página Vue desejada
Agora você pode adicionar o componente `"@solfacil/store-tools-financing"` ao arquivo ".vue" desejado em seu projeto. Certifique-se de fornecer os parâmetros necessários, como o ambiente, o ID do parceiro e o ID do carrinho. Aqui está um exemplo de como adicionar o componente:

```vue
<template>
  <div>
    <!-- Outro conteúdo da sua página -->

    <!-- Adicione o componente StoreMarketFinancing com os parâmetros necessários -->
    <StoreMarketFinancing
      environment="stg"
      partner-id="90891"
      cart-id="650c3864-ac6f-44ed-afc3-851e15bd034f"
    />

    <!-- Mais conteúdo da sua página, se houver -->
  </div>
</template>
```

## Componente
### Propriedades

| Nome | Tipo | Descrição |
| --- | --- | --- |
| cartId | string | ID do carrinho |
| partnerId | string | ID do parceiro |
| environment | string | Ambiente de execução |
| title | string | Título do componente |
| subtitle | string | Subtítulo do componente |
| hideHeader | boolean | Oculta o cabeçalho do componente |
| hideFilters | boolean | Oculta os filtros do componente |
| disableFilters | boolean | Desabilita os filtros do componente |
| disableCart | boolean | Desabilita o carrinho do componente |
| segmentationId | string | ID externo de identificação  |
| channel | enum | Canal de execução, valores ['LOJA', 'FINANCIAMENTO'] |
| filters | object | Filtros do componente |
| ----------------- | ----------------- | ----------------- |