sb-lp-framework v3.0.0

Leads lp framework

This framework is a wrapper component that encapsulate several functionalities:

• Language managing
• Submitting lead and redirect to broker firm
• Input validations

Framework implementation

import { LpFramework, LpFrameworkWrapper } from 'sb-lp-framework';

Change react render to the following:

ReactDOM.render(
    <LpFramework
        resourceFile={require('./resources/languages.json')}
        funnel_name={"test"}>
        <LpFrameworkWrapper Component={App}/>
    </LpFramework>,
    document.getElementById('root')
);

Regform component

Form's main properties

formSteps properties

formSteps is an array of objects each representing specific step. Step is an object with following properties

Input properties

formSteps.inputs is an array of objects each representing specific input. Input is an object with following properties

Example

    <Regform 
        {...this.props}
        formClass='Regform'
        material=true
        mainLogo={{
            className: 'mainlogo',
            source: logo
        }}
        loadingLogo={{
            className: 'loading',
            source: logo
        }}
        formTitle={{text: 'Bitcoin Profit', className: 'form_title'}}
        formSteps={steps}
        stepButtons={{
            className: 'form_buttons',
            mainClass: 'step_button_main',
            disabledClass: 'step_button_dis',
            withNumber: true
        }}
        responseError={{
            className: 'resError',
            button: {
                className: 'button_forward',
                text: 'OK'
            }
        }}
    />
    ...
        steps = [
            {   
                className: 'cardb',
                inputs: [
                    {
                        name: 'first_name',
                        type: 'text',
                        className: 'input_small',
                        errorClass: 'inputError',
                        groupClass: 'formClass small left'
                    },
                    {
                        name: 'last_name',
                        type: 'text',
                        className: 'input_small',
                        errorClass: 'inputError',
                        groupClass: 'formClass small right'
                    },
                    {
                        name: 'email',
                        type: 'email',
                        className: 'input_small',
                        errorClass: 'inputError',
                        groupClass: 'formClass large'
                    },
                    {
                        name: 'phone_number',
                        type: 'phone_number',
                        className: 'input_small',
                        errorClass: 'inputError',
                        groupClass: 'formClass small left'
                    },
                    {
                        name: 'password',
                        type: 'password',
                        className: 'input_small',
                        errorClass: 'inputError',
                        groupClass: 'formClass small right',
                        listClass: 'req_list'
                    },
                    {
                        name: 'agree_1',
                        type: 'checkbox',
                        text: "I agree to the processing of my email address for the purposes of receiving commercial offers that we believe will be of interest to you on behalf of the companies and industries explicitly detailed in our Privacy Policy.",
                        links: [{text: 'Privacy Policy', to: '/'}],
                        groupClass: 'checkbox_text'
                    },
                    {
                        name: 'agree_2',
                        type: 'checkbox',
                        text: "By filling out and sending us the registration form you agree with the Terms & Conditions and the Privacy Policy.",
                        links: [{text: 'Terms & Conditions', to: '/terms'}, {text: 'Privacy Policy', to: '/privacy'}],
                        groupClass: 'checkbox_text'
                    }
                ],
                button: {
                    className: 'button_forward',
                    text: 'Get Access Now'
                },
                supportText: {
                    className: 'support_text',
                    image: {},
                    main: 'Lorem ipsum',
                    tooltip: 'Hello world'
                }
            }
        ]

Lead fields to handle:

first_name, last_name, email, password, phone_number, phone_country_prefix, agree_2

Props to LpFrameworkWrapper

Component - pass your app component you want to render

Framework methods

• setLeadData(formData) - Async function, updates leadData for the framework, expected to be used after validation success.
• validateInput({inputKey: inputValue}) - Validates input, returns an object of boolean error values and array of messages.
• validateParams(formData) - Validates form data, returns {success: bool, errors: Object}.
• handleLeadStep() - Sends first lead data taken from framework's own state (first_name, last_name, email) to the borker, tracks events.
• handleSubmit() - Sends final lead data taken from framework's own state to the borker, tracks events. leadData has to be filled completely before this function is called.

Example of sole validation + first lead sending sequence:

    let password = this.state.password,
    checkInput = this.props.validateInput(password)
    if (!checkInput.messages) this.props.setLeadData(form).then(this.props.handleLeadStep())

Example of complete validation + final lead sending sequence:

    let form = this.state.form,
    checkParams = this.props.validateParams(form)
    if (checkParams.messages) this.props.setLeadData(form).then(this.props.handleSubmit())

Additional Framework Components

• RegInputs - сomponent which renders input fields based on the array of input names. Accepts form, array of inputs, className, maxLength, onChange function and languageManager as properties. Example of usage:

    <RegInputs 
        form={this.state.form} 
        inputs={['first_name', 'email']}
        className={'inputfield'}
        onChange={form => this.setState({form})}
        languageManager={languageManager}/>

Output:

<input class="inputfield first_name" type="first_name" name="first_name" value="">
<input class="inputfield email" type="email" name="email" value="">

Sending data

    sendData() {
        let form = this.state.form,
        checkParams = this.props.validateParams(form)
        
        if (checkParams.success) this.setState({loading: true, errors: {}}, () => {
            this.props.setLeadData(form).then(this.props.handleSubmit).then(res => (res.redirectUrl) ? window.location = res.redirectUrl : this.setState({path: '/'}))
        })
        else this.setState({errors: checkParams.errors, loading: false})
    }

Additional functions

errorMessages(errors) - returns an array of error strings from error object

Props from LpFrameworkWrapper

the children of LpFrameworkWrapper will have this props:

• countryCode (string) - country code by location
• phone_country_prefix (string) - phone country prefix of the page by location
• language (string) - language of the page by location or by query param (see query params below)
• languageManager (function) - function that fetches text from resourceFile (see Props to LpFramework below) and returns the rigt text according to language. for example:

   this.props.languageManager('title')

Props to LpFramework

resourceFile - json file contains all fields that changing dynamically according to language. it must contain all the languages you want to support in iso2 format as key.

for example:

{
"en":{
  "disc": "Advertorial",
  "title": "Earn millions from bitcoin even when crypto markets are crashing",
  "subtitle": "Join today"
 }
"it":{
  "disc": "Pubblicità redazionale",
  "title": "Guadagna milioni dai bitcoin anche quando",
  "subtitle": "Unisciti oggi"
 }

}

funnel_name - name of funnel

Manage language and country

When the framework initialized it fetches country data (language, country code and country phone prefix) using location. you can control it using query params (see query params below) or vpn.

you get all this data as props in your rendered component that you pass in Component to LpFrameworkWrapper.

this.props.language
this.props.phone_country_prefix
this.props.countryCode

Query params

lan - control the language, pass language (iso2 foramt, ex: localhost:3000?lan=IL)