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

| Property | Type | Description | | --- | --- | --- | | formClass | String | Class of form container | | material[?] | Boolean | Swicthes to Material UI components | | mainLogo[?] | Object | Form's main logo, image on top of the form, optional. { className<String>: image's class, source: image's src } | | loadingLogo | Object | Form's loading image, appears when the final lead is getting submitted, required. { className<String>: image's class, source: image's src } | | formTitle[?] | Object | Form's title on top of the form, optional. { text<String>: inner text, className<String>: div's class } | | stepButtons[?] | Object | Buttons to move between steps, optional. { className<String>: buttongroup's class, mainClass<String>: active button class, disabledClass<String>: inactive button class, withNumber<Boolean>: buttons have step index, default: false } | | responseError | Object | Properties of response error received after form submission, required. { className<String>: error's class, button<Object>: Properties of return button. { className<String>: button's class, text<String>: button's inner text } | | formSteps | Array | Array of form's steps. See formSteps properties |

formSteps properties

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

| Property | Type | Description | | --- | --- | --- | | className | String | Class of step's container | | firsetLeadStep[?] | Boolean | Indicates whether to send first lead on this step. Default: false | | passTest[?] | Object | Makes step a passtest step. { maxLength<Number>: maximum input length, groupClass<String>: form group's class, className<String>: input field's class , withList<Boolean>: whether to include a list of passtest requirements, defaut: false } | | button | Object | Button to trigger form validation, forward movement and lead sending; required. { className<String>: button's class, text<String>: button's inner text } | | inputs[?] | Array | An array of form inputs. See Input properties | | supportText[?] | Object | Supporting text at the bottom of a form. { className<String>: component's class , image<Arraybuffer>: image before text, main<String>: main text, tooltip<String>: text inside tooltip } |

Input properties

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

| Property | Type | Description | | --- | --- | --- | | className[?] | String | Class of input field | | groupClass[?] | String | Class of form group (input's wrapper) | | errorClass[?] | String | Class of validation error | | name | String | Name of input field, required. Has to follow general pattern (first_name, last_name, phone_number, etc.) | | type | String | Type of input field, required (text, phone_number, password, checkbox, etc.) Can receive React.Component as a property, type has to be custom - Example: { type<String>: 'custom', customInput<React.Component>: <MyCustomInput /> } | | maxLength[?] | Number | Maximum input length, optional. Default: 32 | | text[?] | String | Text after checkbox, optional. | | links[?] | Array | Array of objects in the form of {text<String>: text that will be replaced with a link, to<String>: link's href} for agreement text. Each string inside checkbox text that matches link.text will be replaced with a link to link.to. | | countryCode[?] | String | Default country code for phone_number input, optional. | | source[?] | String | Source of image for image input type | | listClass[?] | String | Class of password requirement list |

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)