Guias
Start typing to search…

Configurações

Como lidar com ações do usuário e sucessos (callbacks) nos formulários (ex: botões clicados)?

Nos formulários

Lide com cadastros e atualizações nos formulários usando o objeto window.CREDERE.callbacks. Todos os nossos callbacks nos formulários seguem o formato <TIPO>:<ACAO>.

Para lidar com sucessos nos formulários, dois eventos podem ser disparados: <TIPO>:create e <TIPO>:update, no caso de uma criação ou atualização de um registro existente, respectivamente.

Usando o exemplo do formulário de clientes, esses eventos disparados seriam:

  • customer:create
  • customer:update

O primeiro parâmetro desses callbacks em casos de formulários, chamado de data, guarda a mesma resposta que você receberia nos endpoints da API do Credere. Para consultar o formato completo dessas respostas, visite nossa a documentação da nossa API no endereço https://docs.meucredere.com.br.

DICA! Não escute apenas o evento de create, usando aqui customer:create como exemplo, caso você não tenha absoluta certeza de que um cliente com o CPF informado ainda não existe na sua conta do Credere. Mesmo que você não informe o ID do cliente no window.CREDERE.settings.customers.form.id, se um cliente com aquele CPF existir, o evento customer:update, e não customer:create, será disparado.

Para evitar falhas na sua implementação, recomendamos que ambos os eventos sejam escutados sempre.

Exemplo de um callback de sucesso em um formulário:

window.CREDERE.callbacks = {  
  'customer:create': function(data) {  
    window.alert(`Cliente ${data.customer.name} (dentificador ${data.customer.id}) criado com sucesso!`);  
  },  
  'customer:update': function(data) {  
    window.alert(`Cliente ${data.customer.name} (dentificador ${data.customer.id}) atualizado com sucesso!`);  
  },  
};

Em ações do usuário

Em casos de ações do usuário (por exemplo: o usuário clicar em um botão), o objeto data var> terá uma propriedade action indicando qual seria a próxima ação a ser tomada caso se deseje dar continuidade no fluxo "padrão" de uma venda.
Essas ações disparam eventos no seguinte formato: <TIPO>:<ACAO>:action.

Como exemplo prático, ao clicar no botão "Cadastrar proposta" na página de resultado de uma simulação, o tipo do evento seria customers/form, porque o próximo passo no fluxo padrão seria o preenchimento dos dados completos do cliente (customer). O callback, nesse caso, seria simulation:read:action, disparado quando um usuário clica em "Cadastrar proposta" na página de resultado de uma simulação.

Além de action, data também trás uma propriedade chamada settings, que já estará no formato correto para se utilizar no window.CREDERE.settings caso se queira chamar a próxima ação (nesse caso, como descrito acima, settings.store_id, settings.simulation_uuid e settings.condition_ids, usados na criação da proposta após o cadastro/atualização do cliente).

Exemplo de callback após uma ação do usuário:

window.CREDERE.callbacks = {  
  'simulation:read:action': function(data) {  
    if (data.action === 'customers/form') {  
      window.alert(`O usuário clicou em cadastrar proposta!
        Lead - CPF: ${data.settings.cpf}
        Loja - ID: ${data.settings.store_id}
        Simulação - UUID: ${data.settings.simulation_uuid}
        Condição - ID(s): ${data.settings.condition_ids.join(', ')}`);  
    }  
  },  
};

Como cadastrar ou editar uma proposta ou tentativa após o cadastro do cliente?

Você pode utilizar os endpoints de customer:create e customer:update para cadastrar propostas automaticamente. Para isso, basta nos informar o UUID da simulação e os IDs das condições que você deseja usar como tentativas na proposta. Os requerimentos são que a Simulation tenha sido criada recentemente e que o CPF do Lead usado na simulação seja o mesmo CPF usado no cadastro do Customer.

Pra usar essa opção, configure o endpoint do formulário do cliente no seguinte formato:

window.CREDERE.settings = {  
  customers: {  
    form: {  
      \_proposal: {  
        store_id: \<ID_DA_LOJA>,  
        simulation_uuid: \<UUID_DA_SIMULACAO>,  
        condition_ids: [<ID_DA_CONDICAO_1>, <ID_DA_CONDICAO_2>, (...)],  
      },  
    },  
  },  
};

Os campos obrigatórios no formulário do cadastro do cliente serão configurados como os campos que os bancos das condições selecionadas exigem.

Em uma criação (ou atualização) bem-sucedida do cliente, uma proposta também será criada. Logo, depois do evento customer:create (ou customer:update) esperado, um evento de nome proposal:create também será disparado. Esses eventos retornarão, respectivamente, os dados do cliente criado (ou atualizado) e os dados da proposta criada, no mesmo formato retornado pela nossa API.

Para cadastrar uma nova tentativa (em um banco diferente) em uma proposta existente, a configuração do embed segue esse padrão:

Para editar uma tentativa já existente, a configuração do embed ficaria nesse padrão:

window.CREDERE.settings = {
  customers: {
    form: {
      _proposal: {
        id: <ID_DA_PROPOSTA>,

        store_id: <ID_DA_LOJA>,
        simulation_uuid: <UUID_DA_SIMULACAO>,
        condition_ids: [<ID_DA_CONDICAO_1>, <ID_DA_CONDICAO_2>, (...)],
      },
    },
  },
};

Para editar uma tentativa já existente, a configuração do embed ficaria nesse padrão:

window.CREDERE.settings = {
  customers: {
    form: {
      _proposal: {
        id: <ID_DA_PROPOSTA>,
        proposal_attempt_id: <ID_DA_TENTATIVA>,

        store_id: <ID_DA_LOJA>,
        simulation_uuid: <UUID_DA_SIMULACAO>,
        condition_ids: [<ID_DA_CONDICAO_1>],
      },
    },
  },
};

Como pré-preencher (e esconder ou não) campos nos nossos formulários?

Você pode o objeto window.CREDERE.settings para pré-preencher os campos de um formulário no nosso embed.

Por exemplo, você pode pré-informar um vendedor e uma loja no formulário de simulação dessa forma:

Por padrão, os campos pré-preenchidos serão escondidos na interface.

window.CREDERE.settings = {  
  simulations: {  
    form: {  
      store_id: \<ID_DA_LOJA>,  
      seller_id: \<ID_DO_VENDEDOR>,  
    },  
  },  
};

Você pode mudar esse comportamento para os campos estarem visíveis e editáveis ou visíveis mas somente-leitura, respectivamente, usando as propriedades visiblity e readonly nas mesmas configurações avançadas (<NOME_DO_CAMPO>) do campo, assim:

É importante notar que essas propriedades serão ignorados caso você não tenha preenchido os campos que elas representam, para evitar que campos obrigatórios sejam escondidos mesmo estando vazios.

window.CREDERE.settings = {  
  simulations: {  
    form: {  
      store_id: \<ID_DA_LOJA>,  
      \_store_id: {  
        visibility: <true OU false>,  
        readonly: <true OU false>,  
      },  
    },  
  },  
};

Esse comportamento é padrão para todos os nossos formulários. E, como de costume, propriedades nas configurações iniciadas com underline (_) indicam uma configuração padrão do embed e não existente na nossa API.


Como criar uma configuração padrão para as condições de uma simulação?

Você pode sobrescrever, ao mesmo tempo, as configurações de todas as condições a serem simuladas enviando o objeto simulations.form._condition nas configurações do embed do Credere.

É importante notar que esse campo da configuração, _condition, não existe na nossa API. O comportamento dele é exclusivo do nosso embed.

Outra singularidade importante desse campo é que a propriedade installments dele, também de forma diferente da nossa API, aceita uma lista (array) de valores. Esse comportamento foi criado para simplificar a ação de simular em prazos diferentes dos cinco prazos padrões (12, 24, 36, 48, <55> e 60) sem ter que tornar o formulário extenso para a seleção de cada uma dessas personalizações nas condições. Ilustrando o uso disso:

window.CREDERE.settings = {
  simulations: {
    form: {
      _condition: {
        // o campo abaixo tem um comportamento exclusivo no embed: diferentemente da API, aceita tanto 1 quanto "n" prazos (um integer ou um array de prazos)
        installments: [<PRAZO_1>, <PRAZO_2>, <PRAZO_3>],

        // a partir daqui, todos os campos obedecem ao padrão das condições de uma simulação na nossa API. todas as condições informadas (caso o campo "installments" acima não esteja presente) passarão por uma combinação com esse objeto "_condition". o campo da própria condição tem maior prioridade nesse merge
        down_payment: <VALOR_DA_ENTRADA>,
        min_return: <RETORNO_MINIMO>,
        max_return: <RETORNO_MAXIMO>,
        return_preference: <'min' OU 'max'>,
        quota_preference: <'min' OU 'max'>,
        credit_condition_plus: <PLUS>,
        include_financial_protection_insurance: <true OU false>,
        product_options: {
          include_capitalization_bond: <true OU false>,
          include_asset_insurance: <true OU false>,
          include_personal_insurance: <true OU false>,
        },
      },
    },
  },
};

Como habilitar configurações avançadas no formulário da simulação?

Você pode habilitar a escolha de uma parcela específica (ao invés do padrão de simular em 12, 24, 36, 48, 55 e 60 vezes), ou habilitar campos que possibilitam que o controle comercial da loja (inclusão de seguros, regras de retorno, regras de parcela mínima ou máxima, etc) seja sobrescrito utilizando as seguintes opções, respectivamente:

window.CREDERE.settings = {
  simulations: {
    form: {
      _condition: {
        // habilita o campo da escolha de simular em um prazo específico
        _enable_custom_installments: true,

        // habilita o campo de escolha da sobrescrita do controle comercial
        _enable_custom_settings: true,
      },
    },
  },
};


Como habilitar a opção de "alterar a entrada" de uma simulação existente?

O "alterar a entrada" está entres aspas porque uma simulação não pode ser alterada. O que acontece, na verdade, é que uma nova simulação (com um novo UUID) é gerada com a nova entrada desejada. Repetindo: A simulação gerada com a nova entrada é uma simulação diferente e sem relação alguma com a simulação inicial.

Um novo evento simulation:read será disparado com os dados da nova simulação assim que todas as condições dela forem processadas.

Para que o campo de alteração da entrada fique visível, a presença da seguinte configuração é necessária:

window.CREDERE.settings = {  
  simulations: {  
    read: {  
      \_enable_down_payment_field: true,  
    },  
  },  
};


Como personalizar a interface do embed para se parecer com o seu site ou sistema?

Você pode personalizar o visual do nosso embed modificando a propriedade window.CREDERE.tokens, como exemplificado abaixo:

Apesar do valor de window.CREDERE.tokens aceitar qualquer propriedade CSS, a alteração manual dessas propriedades não é recomendada. Ao invés disso, recomendamos a personalização da interface através de variáveis de CSS, como mostrado acima, garantindo a compatibilidade dos seus estilos entre diferentes partes da nossa aplicação.

window.CREDERE.tokens = `
  :root {
    --token-font-size: 16px;
    --token-font-weight-bold: 500;

    --token-color-brand-primary: #3483FA;
  }

  .credere-button {
    --border-radius: var(--token-border-radius-small);
    --font-size: var(--token-font-size-m);
  }
`;

Essa é a lista básica de tokens disponível para personalizações:

.product--embed {
  /*
    a variável --BASE, repetidamente utilizada nos calc() abaixo, é a "constante" que usamos para
    calcular todas as medidas da nossa aplicação. NÃO RECOMENDAMOS QUE ELA SEJA ALTERADA. o que os
    calc() abaixo fazem é usar esse valor para transformar medidas de "px" em "rem", preservando a
    proporção do design em caso de personalização do --token-font-size por terceiros, seja por
    estética ou por questões de acessibilidade. recomendamos o uso de "rem" como unidade padrão.
  */

  --BASE: 14;

  --token-font-size: 14px;
  --token-font-family-primary: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;
  --token-font-family-decorative: 'Space Grotesk', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Cantarell, 'Helvetica Neue', sans-serif;

  --token-font-size-xs: calc(10 / var(--BASE) * 1rem);
  --token-font-size-s: calc(12 / var(--BASE) * 1rem);
  --token-font-size-m: calc(14 / var(--BASE) * 1rem);
  --token-font-size-l: calc(16 / var(--BASE) * 1rem);
  --token-font-size-xl: calc(18 / var(--BASE) * 1rem);
  --token-font-size-xxl: calc(22 / var(--BASE) * 1rem);
  --token-font-size-xxxl: calc(26 / var(--BASE) * 1rem);
  --token-font-size-mega: calc(32 / var(--BASE) * 1rem);
  --token-font-size-giga: calc(42 / var(--BASE) * 1rem);

  --token-font-weight-regular: 400;
  --token-font-weight-bold: 700;

  --token-line-height-s: 1.2;
  --token-line-height-m: 1.4;
  --token-line-height-l: 1.5;
  --token-line-height-xl: 2.0;

  --token-border-radius-none: 0;
  --token-border-radius-small: calc(4 / var(--BASE) * 1rem);
  --token-border-radius-decorative: calc(10 / var(--BASE) * 1rem);
  --token-border-radius-circular: 50%;
  --token-border-radius-pill: 9999px;

  --token-border-width-none: 0;
  --token-border-width-soft: calc(1 / var(--BASE) * 1rem);
  --token-border-width-thin: calc(2 / var(--BASE) * 1rem);
  --token-border-width-heavy: calc(3 / var(--BASE) * 1rem);

  --token-box-shadow-around-1: 0 0 calc(8 / var(--BASE) * 1rem) rgba(0, 0, 0, 14%);
  --token-box-shadow-around-2: 0 calc(4 / var(--BASE) * 1rem) calc(12 / var(--BASE) * 1rem) rgba(0, 0, 0, 6%);
  --token-box-shadow-around-3-y: calc(8 / var(--BASE) * 1rem);
  --token-box-shadow-around-3: 0 var(--token-box-shadow-around-3-y) calc(24 / var(--BASE) * 1rem) rgba(0, 0, 0, 12%);
  --token-box-shadow-right-2: calc(8 / var(--BASE) * 1rem) 0 calc(16 / var(--BASE) * 1rem) rgba(0, 0, 0, 8%);

  --token-spacing-mini: calc(4 / var(--BASE) * 1rem);
  --token-spacing-nano: calc(6 / var(--BASE) * 1rem);
  --token-spacing-micro: calc(8 / var(--BASE) * 1rem);
  --token-spacing-xxxs: calc(12 / var(--BASE) * 1rem);
  --token-spacing-xxs: calc(14 / var(--BASE) * 1rem);
  --token-spacing-xs: calc(16 / var(--BASE) * 1rem);
  --token-spacing-s: calc(18 / var(--BASE) * 1rem);
  --token-spacing-m: calc(20 / var(--BASE) * 1rem);
  --token-spacing-l: calc(22 / var(--BASE) * 1rem);
  --token-spacing-xl: calc(24 / var(--BASE) * 1rem);
  --token-spacing-xxl: calc(26 / var(--BASE) * 1rem);
  --token-spacing-xxxl: calc(28 / var(--BASE) * 1rem);
  --token-spacing-mega: calc(30 / var(--BASE) * 1rem);
  --token-spacing-giga: calc(32 / var(--BASE) * 1rem);
  --token-spacing-ultra: calc(36 / var(--BASE) * 1rem);
  --token-spacing-blaster: calc(48 / var(--BASE) * 1rem);
  --token-spacing-xxblaster: calc(80 / var(--BASE) * 1rem);
  --token-spacing-modal: calc(480 / var(--BASE) * 1rem);

  --token-color-constant-darker: #000000;
  --token-color-constant-dark: #222222;
  --token-color-constant-light: #FFFFFF;

  --token-color-brand-primary: #474E66;
  --token-color-brand-light: #8693BF;
  --token-color-brand-medium: #6B7599;
  --token-color-brand-dark: #242733;

  --token-color-highlight-primary: #3DCC9C;
  --token-color-highlight-light: #B2FFE6;
  --token-color-highlight-medium: #A1E5CF;
  --token-color-highlight-dark: #2E9975;

  --token-color-neutral-primary: #999999;
  --token-color-neutral-lighter: #F2F2F2;
  --token-color-neutral-light: #E5E5E5;
  --token-color-neutral-medium: #CDCDCD;
  --token-color-neutral-dark: #666666;
  --token-color-neutral-darker: #333333;
  --token-color-neutral-heavy: #000000;
  --token-color-neutral-backdrop: rgba(155, 155, 155, 90%);

  --token-color-alert-danger: #CC2929;
  --token-color-alert-danger-dark: #801919;
  --token-color-alert-warning: #E58A00;
  --token-color-alert-warning-dark: #B26B00;
  --token-color-alert-success: #3DCC9C;
  --token-color-alert-success-dark: #2E9975;
  --token-color-alert-information: #3764DC;
  --token-color-alert-information-dark: #373C64;

  --token-color-tag-accent: #222222;
  --token-color-tag-external: #DCCDF0;
  --token-color-tag-danger: #FFCCCC;
  --token-color-tag-warning: #FFEBCC;
  --token-color-tag-success: #CCFFEE;
  --token-color-tag-bright: #FFD500;
  --token-color-tag-average: #CDCDCD;

  --token-color-status-01: #3764DC;
  --token-color-status-01-light: #CCE7FF;
  --token-color-status-02: #E58A00;
  --token-color-status-02-light: #FFEBCC;
  --token-color-status-03: #CC2929;
  --token-color-status-03-light: #FFCCCC;
  --token-color-status-04: #3DCC9C;
  --token-color-status-04-light: #B2FFE6;

  --token-z-index-max: 999999;
}

Você pode simplesmente sobrescrever o valor dos tokens (ver lista completa acima) para uma personalização rápida e prática declarando novos valores para elas no escopo :root, assim:

:root {
  --token-font-size: 16px;
  --token-font-weight-bold: 500;

  --token-color-brand-primary: #3483FA;
  --token-color-brand-light: #2BADEC;
  --token-color-brand-medium: #1364E9;
  --token-color-brand-dark: #252E7C;

  --token-color-highlight-primary: #00A650;
  --token-color-highlight-light: #CFB907;
  --token-color-highlight-medium: #13D1CF;
  --token-color-highlight-dark: #00A19C;

  --token-border-radius-small: var(--token-spacing-nano);
}

Você também pode criar variáveis e as utilizar nas suas personalizações:

:root {
  --token-color-foo-bar: #FFF159;
}

E, caso queira mergulhar em personalizações mais profundas, você pode sobrescrever os valores das propriedades CSS diretamente nos elementos (nesse caso, "escopos") que desejar. Essas são as properidades disponíveis:

* {
  background-color: var(--background-color);
  border-color: var(--border-color);
  border-style: var(--border-style);
  border-width: var(--border-width);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  gap: var(--gap);
  line-height: var(--line-height);
  margin: var(--margin);
  padding: var(--padding);
}

Na prática, você pode criar personalizações mais profundas assim:

body {
  --background-color: var(--token-color-neutral-light);
}

.credere-button {
  --border-radius: var(--token-border-radius-small);
}

.credere-form-field-input,
.credere-form-field-select {
  --background-color: var(--token-color-constant-light);
  --border-radius: var(--token-border-radius-small);
  --color: var(--token-color-constant-dark);
}

.credere-form-field-input:focus,
.credere-form-field-select:focus {
  --box-shadow: 0 0 0 var(--token-border-width-thin) var(--token-color-brand-primary);
}

Updated 7 months ago