import { checkTemplate, getInputFromTemplate, Template } from "@pdfme/common"; import { Form, Viewer } from "@pdfme/ui"; import { useEffect, useRef, useState } from "react"; import LoaderSun from "@/components/common/Loader/LoaderSun"; import { Menubar } from "@/components/ui/menubar"; import { baixarAwsContent } from "@/requests/common/Aws/baixarAws"; import { obterAgendamentoInstalacaoNegocio } from "@/requests/CRM/AgendamentosInstalacoes/obterAgendamentoInstalacaoNegocio"; import { listarComplementosColeta } from "@/requests/CRM/kanban"; import { listarUcsColeta } from "@/requests/CRM/UCs/listarUcsColeta"; import { listarComponentesKitByKitId, obterItem, } from "@/requests/CRUD/ColetaDados/cadastroColetaDados"; import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias"; import { listarDistribuidores } from "@/requests/CRUD/Distribuidores/listarDistribuidores"; import { listarDistribuidoresNativos } from "@/requests/CRUD/Distribuidores/listarDistribuidoresNativos"; import { listarFabricantes } from "@/requests/CRUD/Fabricante/listarFabricantes"; import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas"; import { listarChecklistNegocio } from "@/requests/CRUD/PendenciaEngenharia/listarChecklistNegocio"; import { obterDistribuicaoModulos } from "@/requests/CRUD/Propostas/obterDistribuicaoModulos"; import { listarTiposNegocios } from "@/requests/CRUD/TiposNegocios/listarTiposNegocios"; import { listarTiposTelhados } from "@/requests/CRUD/TiposTelhados/listarTiposTelhados"; import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios"; import { useAuth } from "@/src/contexts/authContext"; import { useContractContext } from "@/src/contexts/ContractProvider"; import { useScreenContext } from "@/src/contexts/ScreenContext"; import { formatarValor, FormatFields } from "@/utils"; import { generatePDF, getFontsData, getPlugins, getTemplate, isJsonString, openBlob, } from "@/utils/pdfme/helper"; import Image from "next/image"; import { FaFileUpload, FaRegFilePdf } from "react-icons/fa"; import { toast } from "react-toastify"; import LoaderGif from "../../../../public/images/loaders/loader2.gif"; // type Mode = "form" | "viewer"; // let contratoIdTemporario = 0; // let contratoSalvo = false; const FormDocumentoPersonalizado = ({ dadosCard, dadosCliente, dadosProposta, template, onSubmitFunction, camposPersonalizados, titulo, }: any) => { const uiRef = useRef(null); const ui = useRef
(null); const [isLoaded, setIsLoaded] = useState(false); const [isSavingDocument, setIsSavingDocument] = useState(false); const [isGeneratingPdf, setIsGeneratingPdf] = useState(false); const { formatarNumero, formatarDataHora } = FormatFields; const { valuesSession } = useAuth(); const { session } = valuesSession(); const { relacionar } = useContractContext(); const { isMobile } = useScreenContext(); useEffect(() => { if (isMobile) { toast.info("Para melhor visualização gire o seu celular"); } }, []); const initTemplate = async () => { // let template: Template = getTemplate(); try { // const templateString = localStorage.getItem("template"); // const templateString = await obterTemplateContrato().then( // (res) => res.template_contrato // ); const templateString = template; // const contratoId = Number(await listarUltimoIdContrato()); const camposPersonalizadosSearch = Object.fromEntries( Object.entries(camposPersonalizados).filter( ([key, value]) => key.endsWith("_campo_personalizado") || (key.endsWith("_cp") && ((typeof value === "string" && value.trim() !== "") || (Array.isArray(value) && value.every( (v) => typeof v === "string" && v.trim() !== "", )))), ), ); // Passo 2: Formatando as chaves para pegar apenas a parte depois do `^` const camposPersonalizadosFormat = Object.fromEntries( Object.entries(camposPersonalizadosSearch).map(([key, value]) => [ key.split("^").pop(), value, ]), ); // setContratoIdTemporario(contratoId); // contratoIdTemporario = contratoId; const dados = { ...dadosCliente, ...dadosCard, ...dadosProposta, }; const dadosAdicionais: any = {}; dadosAdicionais["potencia_modulos"] = formatarNumero( dados["potencia_modulo_proposta"], ); dadosAdicionais["potencia_inversores"] = formatarNumero(dados["potencia_inversores_proposta"]) + "kW"; await Promise.all([ listarTiposNegocios().then((res) => { dadosAdicionais["tipoNegocio"] = res.find( (tipoNegocio: any) => tipoNegocio.id_tipo_negocio == dados.tipoNegocio_coleta, )?.nome_tipo_negocio; }), listarTiposTelhados().then((res) => { dadosAdicionais["telhado_proposta"] = res.find( (telhado: any) => telhado.id_telhado == dados.telhado_proposta, )?.nome_telhado; }), obterDistribuicaoModulos(dados.id_proposta) .then((res) => { dadosAdicionais["orientacoes_proposta"] = res .map( (dadosDistribuicao: any) => dadosDistribuicao.sigla_orientacao, ) .join(", "); }) .catch(() => {}), listarComponentesKitByKitId(dados.kit_proposta) .then(async (res) => { await Promise.all([ listarFabricantes(), listarDistribuidores(), listarDistribuidoresNativos(), ]) .then( async ([ fabricantes, distribuidores, distribuidoresNativos, ]) => { const modulo = res["componentesKit"]?.find( (e: any) => e.codModulo_kit == e.id_item, ); dadosAdicionais["descricao_modulos"] = modulo?.descricao; if (!modulo.modelo_item && modulo.cod_item) { await obterItem(modulo.cod_item).then((novoModulo) => { dadosAdicionais["modelo_modulos"] = novoModulo.modelo_item; }); } else { dadosAdicionais["modelo_modulos"] = modulo.modelo_item; } if (modulo.tipoOrigem_item == "0") { dadosAdicionais["distribuidor_modulos"] = distribuidores.find( (distribuidor: any) => distribuidor.id_distribuidor == modulo.codDistribuidor_item, )?.nome_distribuidor; } else { dadosAdicionais["distribuidor_modulos"] = distribuidoresNativos.find( (distribuidor: any) => distribuidor.id_distribuidor == modulo.codDistribuidor_item, )?.nome_distribuidor; } dadosAdicionais["fabricante_modulos"] = fabricantes.find( (fabricante: any) => fabricante.id_fabricante == modulo.codFabricante_item, )?.nome_fabricante; const inversores = res["componentesKit"].filter( (item: any) => { return ( item.codInversor1_kit == item.id_item || item.codInversor2_kit == item.id_item ); }, ); // [ // res["componentesKit"]?.find( // (e: any) => e.codInversor1_kit == e.id_item // ), // res["componentesKit"]?.find( // (e: any) => e.codInversor2_kit == e.id_item // ), // ]; dadosAdicionais["descricao_inversores"] = inversores .map((inversor: any) => inversor.descricao) .join(", "); dadosAdicionais["modelos_inversores"] = inversores .map((inversor: any) => inversor.modelo_item) .join(", "); dadosAdicionais["fabricantes_inversores"] = inversores .map( (inversor: any) => fabricantes.find( (fabricante: any) => fabricante.id_fabricante == inversor.codFabricante_item, )?.nome_fabricante, ) .filter((nome: any) => !!nome) .join(", "); dadosAdicionais["distribuidores_inversores"] = inversores .map((inversor: any) => { if (inversor.tipoOrigem_item == "0") { return distribuidores.find( (distribuidor: any) => distribuidor.id_distribuidor == inversor.codDistribuidor_item, )?.nome_distribuidor; } else { return distribuidoresNativos.find( (distribuidor: any) => distribuidor.id_distribuidor == inversor.codDistribuidor_item, )?.nome_distribuidor; } }) .filter((nome: any) => !!nome) .join(", "); dadosAdicionais["quantidade_inversores"] = String( res["componentesKit"]?.reduce( (acc: number, item: any) => (acc = item.categoria == "Inversores" ? acc + +item.qtd : acc), 0, ), ); }, ) .then(async () => { await listarComplementosColeta({ id_coleta: dados.id_coleta_cliente, tipo_complemento_card: "Troca de Kit", }).then((res) => { const trocaDeKit = !!res[0]; const novoKit = res[0]; dadosAdicionais["marca_inversor_complemento"] = novoKit?.inversores?.length > 0 ? novoKit?.inversores .map( (dadosInversor: any) => dadosInversor?.fabricante, ) .join(", ") : dadosAdicionais["fabricantes_inversores"]; dadosAdicionais["qtd_inversor_complemento"] = novoKit?.inversores?.length > 0 ? String( novoKit?.inversores?.reduce( (acc: number, item: any) => { acc = acc + (+item.quantidade_inversor_complemento_card || 0); return acc; }, 0, ), ) : dadosAdicionais["quantidade_inversores"]; dadosAdicionais["potencia_inversor_complemento"] = novoKit?.inversores?.length > 0 ? [...novoKit?.inversores] .map( (dadosInversor: any) => dadosInversor?.potencia_inversor_complemento_card + "kW", ) .join(", ") : dadosAdicionais["potencia_inversores"]; dadosAdicionais["descricao_inversor_complemento"] = novoKit?.inversores.length > 0 ? novoKit?.inversores .map( (dadosInversor: any) => dadosInversor?.descricao_inversor_complemento_card, ) .filter((e: any) => !!e) .join(", ") : dadosAdicionais["descricao_inversores"]; dadosAdicionais["modelo_inversor_complemento"] = novoKit?.inversores.length > 0 ? novoKit?.inversores .map( (dadosInversor: any) => dadosInversor?.modelo_inversor_complemento_card, ) .filter((e: any) => !!e) .join(", ") : dadosAdicionais["modelos_inversores"]; dadosAdicionais["fornecedor_inversor_complemento"] = novoKit?.inversores?.length > 0 ? [...novoKit?.inversores] .map( (dadosInversor: any) => dadosInversor?.distribuidor, ) .join(", ") : dadosAdicionais["distribuidores_inversores"]; dadosAdicionais["marca_modulo_complemento"] = novoKit?.fabricante_modulo || dadosAdicionais["fabricante_modulos"]; dadosAdicionais["qtd_modulo_complemento"] = novoKit?.qtd_modulo_complemento_card || dados["modulosDigitado_proposta"] || 0; dadosAdicionais["potencia_modulo_complemento"] = novoKit?.potencia_modulo_complemento_card ? formatarNumero( novoKit?.potencia_modulo_complemento_card, ) : dadosAdicionais["potencia_modulos"]; dadosAdicionais["descricao_modulo_complemento"] = novoKit?.descricao_modulo_complemento_card || dadosAdicionais["descricao_modulos"]; dadosAdicionais["modelo_modulo_complemento"] = novoKit?.modelo_modulo_complemento_card || dadosAdicionais["modelo_modulos"]; dadosAdicionais["fornecedor_modulo_complemento"] = novoKit?.distribuidor_modulo || dadosAdicionais["distribuidor_modulos"]; }); }); }) .catch(() => {}), listarUcsColeta(dados.id_coleta_cliente).then((res) => { const ucs = res; const ug = ucs.find((uc: any) => uc.isGeradora_uc_coleta == "1"); dadosAdicionais["consumo_ug"] = formatarNumero( +ug.valor == +ug.valor ? +ug.valor : ug.valor.reduce((acc: number, curr: string) => acc + +curr, 0) / 12, ); dadosAdicionais["valor_consumo_ug"] = dados[ "precoDigitadoTarifa_proposta" ] ? formatarValor( (+ug.valor == +ug.valor ? +ug.valor : ug.valor.reduce( (acc: number, curr: string) => acc + +curr, 0, ) / 12) * +dados["precoDigitadoTarifa_proposta"], ) : " "; dadosAdicionais["ucs_beneficiarias"] = ucs .filter((_: any, index: number) => index != 0) .map((uc: any) => uc.numero_uc_coleta) .join(`, `); }), listarConcessionarias().then((concessionarias: any) => { dadosAdicionais["concessionaria_negocio"] = concessionarias.find( (concessionaria: any) => concessionaria.id_concessionaria == dados["concessionaria_coleta"], )?.nome_concessionaria; }), listarLojas(session.id_usuario).then((lojas: any) => { const loja = lojas.find( (loja: any) => loja.id_loja == dados["id_loja_coleta"], ); dadosAdicionais["razaosocial_loja"] = loja?.razaosocial_loja; dadosAdicionais["cnpj_loja"] = loja?.cnpj_loja; dadosAdicionais["endereco_loja"] = loja?.endereco_loja; dadosAdicionais["numero_loja"] = loja?.numero_loja; dadosAdicionais["bairro_loja"] = loja?.bairro_loja; dadosAdicionais["cidade_loja"] = loja?.cidade_loja; dadosAdicionais["cep_loja"] = loja?.cep_loja; dadosAdicionais["telefone_loja"] = loja?.telefone_loja; }), listarUsuarios().then((res) => { dadosAdicionais["instalador_coleta"] = res.find( (usuario: any) => usuario.id_usuario == dados["responsaveis"]["Instalador"], )?.nome_usuario; }), obterAgendamentoInstalacaoNegocio(dados.id_coleta_cliente).then( (res) => { dadosAdicionais["observacoes_instalacao"] = res?.observacoes_instalacao; }, ), listarUcsColeta(dados.id_coleta_cliente).then((res) => { const ucsBeneficiarias = res.filter( (uc: any) => uc.isGeradora_uc_coleta == "0", ); dadosAdicionais["tabela_ubs"] = ucsBeneficiarias.map( (uc: any, index: number) => ({ id_uc_coleta: uc.id_uc_coleta, uc: !uc.numero_uc_coleta ? "" : uc.numero_uc_coleta, nome: uc.isGeradora_uc_coleta == "1" ? "UG " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta) : "UB " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta), key: index, tipoValor: +uc.valor == +uc.valor ? "Média" : "Mensal", concessionaria: dadosCard.nome_concessionaria, valor: formatarNumero( +uc.valor == +uc.valor ? +uc.valor : uc.valor.reduce( (acc: number, curr: string) => acc + +curr, 0, ) / 12, ) + "kWh", conta: formatarValor( (+uc.valor == +uc.valor ? +uc.valor : uc.valor.reduce( (acc: number, curr: string) => acc + +curr, 0, ) / 12) * +dados.precoDigitadoTarifa_proposta, ), }), ); }), listarChecklistNegocio({ id_loja: dados.id_loja_coleta, id_negocio: dados.id_coleta_cliente, }).then((res) => { dadosAdicionais["observacoes_engenharia"] = res .map( (checkData: any) => `${checkData.nome_item_checklist_engenharia}: ${checkData.observacao_item_checklist_engenharia}`, ) .join(`\\n`); }), dados.caminho_resultadoPrecificacao_proposta ? baixarAwsContent(dados.caminho_resultadoPrecificacao_proposta).then( (resultadoPrecificacao_proposta) => { const resPrecificacao = JSON.parse( resultadoPrecificacao_proposta, ); if (resPrecificacao) { dadosAdicionais["preco_venda"] = formatarValor( +resPrecificacao.preco_venda, ); dadosAdicionais["valor_desconto"] = formatarNumero( ( ((+dados["valorTotal_proposta"] - +resPrecificacao.preco_venda) / dados["valorTotal_proposta"]) * 100 ).toFixed(2), ) + " %"; } }, ) : () => {}, ]); if (dados["telefone2_cliente"] == "") { dadosAdicionais["telefone2_cliente"] = " "; } const arrayTipo = [ { value: "1", label: "Monofásico" }, { value: "2", label: "Bifásico" }, { value: "3", label: "Trifásico" }, ]; dadosAdicionais["tipo_fase"] = arrayTipo.find( (ligacao) => ligacao.value == dados["tipoLigacao_proposta"], )?.label; dadosAdicionais["area_modulos"] = dados["area_modulos_ocupada_proposta"] ? formatarNumero(dados["area_modulos_ocupada_proposta"]) : " "; dadosAdicionais["potencia_kit"] = dados["potenciaSistema_proposta"] ? formatarNumero(dados["potenciaSistema_proposta"]) : " "; dadosAdicionais["valor_proposta"] = formatarValor( +dados["valorTotal_proposta"], ); dadosAdicionais["dataNascimento_cliente"] = formatarDataHora( dados["dataNascimento_cliente"], "dd/mm/AAAA", ); dadosAdicionais["condicao_pagamento_proposta"] = dados[ "condicao_pagamento_proposta" ] ? JSON.stringify(dados["condicao_pagamento_proposta"]).slice(1, -1) : ""; dadosAdicionais["data_instalacao"] = dados["data_instalacao"] ? formatarDataHora(dados["data_instalacao"], "dd/mm/AAAA") : ""; dadosAdicionais["ie_cliente"] = dados["ie_cliente"] || dados["rg_cliente"]; const dadosParaRelacionamento = { ...dados, ...dadosAdicionais, ...camposPersonalizadosFormat, }; // Função para sanitizar strings que podem causar problemas no relacionamento const sanitizeString = (value: any): any => { if (typeof value === "string") { // Remove ou escapa aspas duplas problemáticas return value .replace(/"/g, "'") // Substitui aspas duplas por aspas simples .replace(/\r\n/g, " ") // Remove quebras de linha .replace(/\n/g, " ") // Remove quebras de linha .replace(/\r/g, " ") // Remove carriage return .replace(/\t/g, " ") // Remove tabs .replace(/\s+/g, " ") // Remove espaços múltiplos .trim(); // Remove espaços nas extremidades } return value; }; Object.keys(dadosParaRelacionamento).map((chave) => { if (!dadosParaRelacionamento[chave]) { dadosParaRelacionamento[chave] = " "; } else { // Sanitiza o valor para evitar problemas com aspas e caracteres especiais dadosParaRelacionamento[chave] = sanitizeString( dadosParaRelacionamento[chave], ); } }); let templateJson = getTemplate(); if (isJsonString(templateString)) { templateJson = JSON.parse(templateString); await relacionar(templateJson, dadosParaRelacionamento).then( (res: any) => { templateJson = res; }, ); } // let templateJson = templateString // ? JSON.parse( // await relacionar(templateString, { // ...dadosCliente, // ...dadosCard, // ...dadosProposta, // }) // ) // : getTemplate(); // const basePdf = await addAnexo(templateJson.basePdf, proposta); // templateJson = { // ...templateJson, // // basePdf: basePdf, // schemas: [...templateJson.schemas, {}], // }; checkTemplate(templateJson); template = templateJson as Template; setIsLoaded(true); } catch (err) { console.error(err); localStorage.removeItem("template"); } return template; }; // const [mode, setMode] = useState( // (localStorage.getItem("mode") as Mode) ?? "form" // ); // useEffect(() => { // return () => { // if (!contratoSalvo) { // deletarContrato({ id_contrato: contratoIdTemporario }); // } // }; // }, []); useEffect(() => { async function loadTemplate() { const template = await initTemplate(); let inputs = getInputFromTemplate(template) ?? [{}]; try { const inputsString = localStorage.getItem("inputs"); const inputsJson = inputsString ? JSON.parse(inputsString) : (getInputFromTemplate(template) ?? [{}]); inputs = inputsJson; } catch { localStorage.removeItem("inputs"); } getFontsData().then((font) => { if (uiRef.current) { ui.current = new Form({ domContainer: uiRef.current, // @ts-ignore template, inputs, options: { font, // labels: { clear: "消去" }, theme: { token: { colorPrimary: "#25c2a0", }, }, }, plugins: getPlugins(), }); } }); } loadTemplate(); // return () => { // if (ui.current) { // ui.current.destroy(); // } // }; }, [uiRef]); // const onChangeMode = (e: React.ChangeEvent) => { // const value = e.target.value as Mode; // setMode(value); // localStorage.setItem("mode", value); // }; // const onSaveInputs = () => { // if (ui.current) { // const inputs = ui.current.getInputs(); // localStorage.setItem("inputs", JSON.stringify(inputs)); // toast.success("Salvo"); // } // }; const onResetInputs = async () => { localStorage.removeItem("inputs"); if (ui.current) { const template = await initTemplate(); ui.current.setInputs(getInputFromTemplate(template) ?? [{}]); } }; const onSaveFormDocumentoPersonalizado = () => { setIsSavingDocument(true); generatePDF(ui.current, titulo).then(async (pdfBlob) => { if (pdfBlob) { onSubmitFunction({ pdfBlob }).finally(() => setIsSavingDocument(false)); } }); }; return (
{isLoaded ? ( {/* */} ) : (
)}
); }; export default FormDocumentoPersonalizado;