hey all,
I am stuck in part one where I need to override the pre chat form in snap-ins with the fields defined in contact object
I have created a lightning component for the pre chat form and over-ridden that in a snap-ins setting and the prechat form loads just fine however when I click on start chat it does not fire the chat:

Below is the code:
==============
Component: 

<aura:component
    implements="lightningsnapin:prechatUI,flexipage:availableForAllPageTypes,force:appHostable,force:lightningQuickActionWithoutHeader"
    controller="Bot_PreChatCmpCnt">
      
    <aura:attribute name="userId" access="PRIVATE" type="string" default="-"/>
    <aura:attribute name="FirstName" access="PRIVATE" type="string" />
    <aura:attribute name="LastName" access="PRIVATE" type="string" />
    <aura:attribute name="Email" access="PRIVATE" type="string" />
    <aura:attribute name="Phone" access="PRIVATE" type="string" />
    <aura:attribute name="Salutation" access="PRIVATE" type="string" /> 
    <aura:attribute name="Organization_Name__c" access="PRIVATE" type="string" />.
   <!-- <aura:attribute name="OrganizationType" access="PRIVATE" type="string" /> -->
  
    <!-- Contains methods for getting pre-chat fields, starting a chat, and validating fields -->
    <lightningsnapin:prechatAPI aura:id="prechatAPI"/>
      
  
    <!-- After this component has rendered, call the controller's onRender function -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <aura:renderIf isTrue="{!v.userId}">
        
            <lightning:input type="text" value="{!v.Salutation}" label="Salutation *"/> 
            <lightning:input type="text" value="{!v.FirstName}" label="Name *"/>
            <lightning:input type="text" value="{!v.LastName}" label="Lastname *"/>
            <lightning:input type="text" value="{!v.Email}" label="Email *"/>
            <lightning:input type="text" value="{!v.Phone}" label="Phone *"/>
            <lightning:input type="text" value="{!v.Organization_Name__c}" label="Organisation Name *"/>
        <!--    <lightning:input type="text" value="{!v.OrganizationType}" label="Organization Type *"/> -->
        <aura:set attribute="else">
              <lightning:input type="text" value="" label="Salutation *"/> 
            <lightning:input type="text" value="" label="Name *"/>
            <lightning:input type="text" value="" label="Lastname *"/>
            <lightning:input type="text" value="" label="Email *"/>
            <lightning:input type="text" value="" label="Phone *"/>
            <lightning:input type="text" value="" label="Organisation Name *"/>
        <!--    <lightning:input type="text" value="" label="Organization Type *"/> -->
        </aura:set>
       
    </aura:renderIf>
     <lightning:button label="Start chat!" onclick="{!c.onStartButtonClick}"/>
        
    
</aura:component>

Client side js:
==========
({
doInit: function(component, event, helper) {
    debugger
        var prechatFields = component.find("prechatAPI").getPrechatFields();
        var action = component.get("c.getCurrentUser");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = JSON.parse(response.getReturnValue());
                console.log(result, embedded_svc);
                component.set('v.userId', result.userId);
                if(result.userId){
                    component.set('v.Salutation', result.Salutation);
                    component.set('v.FirstName', result.FirstName);
                    component.set('v.LastName', result.LastName);
                    component.set('v.Email', result.Email);
                    component.set('v.Phone', result.Phone);
                    component.set('v.Organization_Name__c', result.Organization_Name__c);
                    //component.set('v.OrganizationType', result.OrganizationType);
                    helper.startChat(component, event, helper);
                }
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    onStartButtonClick: function(component, event, helper) {
        //handling errors

       // if(!component.get('v.FirstName')
       //   || !component.get('v.LastName')
        //   || !component.get('v.Email')
        //|| !component.get('v.Salutation')
        // || !component.get('v.Phone')
        //  || !component.get('v.Organization_Name__c')) return alert('Missing fields.');
        helper.startChat(component, event, helper);
    }
});

Server side controller:
=================
public class Bot_PreChatCmpCnt {
    @auraenabled
    public static String getCurrentUser(){
        Map<String,Object> output = new Map<String,Object>();
        User u = [Select Username, FirstName, LastName, Email, contactId From User Where Id = :UserInfo.getUserId()];
        system.debug('******user*******'+u);
        if(u.contactId != NULL)
        {
        contact c = [Select Id, Salutation, FirstName, LastName, Email, Phone, Contact_Type__c, Organization_Name__c From Contact Where Id =:u.ContactId];
        system.debug('******Contact*******'+c);
        if(c.Id != null){
            output.put('userId', u.UserName);
            system.debug('******user*******'+u.UserName);
            output.put('FirstName', c.FirstName);
            output.put('LastName', c.LastName);
            output.put('Email', c.Email);
            output.put('Salutation', c.Salutation);
            output.put('Phone', c.Phone);
            output.put('Organization_Name__c', c.Organization_Name__c);
            //output.put('OrganizationType', c.Contact_Type__c);
           system.debug('******user*******'+c);
        }
            
            else{
            output.put('userId', '');
            }
        }
        return JSON.serialize(output);
    }
        
}

Handler 
=========
({
      
    startChat: function(component, event, helper){
        debugger
        var fields = [
            {
               label: 'Salutation',
               name: 'Salutation',
               value: component.get('v.Salutation')
            } ,
            {
                label: 'FirstName',
                name: 'FirstName',
                value: component.get('v.firstName')
            } ,
            {
                label: 'LastName',
                name: 'LastName',
                value: component.get('v.LastName')
            }  ,
            {
                label: 'Email',
                name: 'Email',
                value: component.get('v.Email')
            },{
                label: 'Username',
                name: 'Username__c',
                value: component.get('v.userId'),
            },
            {
                label: 'Phone',
                name: 'Phone',
                value: component.get('v.Phone')
            } ,
            {
                label: 'Organization Name',
                name: 'Organization_Name__c',
                value: component.get('v.Organization_Name__c')
            } 
            
        ];
       // try{
        if(component.find("prechatAPI").validateFields(fields).valid) {
            component.find("prechatAPI").startChat(fields);
        }
       else {
            console.warn("Prechat fields did not pass validation!");
        }
       // }
        //catch(e){
        //    console.log(e);
       // }
    }
});