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 e o Yarn em sua máquina.

Instalação

1. Clone o repositório do projeto:

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

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

   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

// 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/

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:

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:

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:

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:

"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:

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:

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:

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