@solfacil/store-tools-financing

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