Tnb-flipkart-npm-typescript NPM

tnb-flipkart-npm-typescript

Trial room plugin by Tryndbuy. Supports Android & iOS integration.

Installation

Install:
- Using npm: npm install tnb-flipkart-npm-typescript
- Using Yarn: yarn add tnb-flipkart-npm-typescript
Add peer dependencies: Include below peer dependencies in your project.
- yarn add @react-native-community/async-storage
- yarn add @react-native-community/picker

Import it in your JS:

import VTRScreen from 'tnb-flipkart-npm-typescript';

How it works

         <VTRScreen
            uuid= {`${Math.random()}`}
            deviceid= {`${Math.random()}`}
            sessionid= {`${Math.random()}`}
            styleid= {'10782776'}
            gender= {'F'}
            available_sizes={['S', 'M']}
            closePopup={()=> this.closeVTR()}
            addToBagDisabled= {false}
            addToBag={(obj: any)=> this.addToBag(obj)}
            addToWishList={(obj: any)=> this.addToWishList(obj)}
            goToBag={()=> this.goToBag()}
            available_in_bag={false}
            logEvent={(uuid: any, eventName: any, eventData: any) => this.logEvent(uuid, eventName, eventData)}
            />

Parameters

Below are the list of different parameters to be sent while implementing Scene component:

Key	Data type	Default value?	Description
`uuid`	`string`	Required.	Unique id of user.
`sessionid`	`string`	Optional	Session id to be stored for logs.
`deviceid`	`string`	Optional	Device unique identifier to be stored for logs.
`styleid`	`string`	Required.	Style id of the apparel.
`gender`	`string`	`'M'/'F'`	Send `'M'` for male and `'F'` for female.
`available_sizes`	`array of strings`	Required.	List of available sizes for the selected style.
`closePopup`	`method`	obj = `{tightFit: 'S', recommendedFit: 'M', looseFit: 'L'}`\ (parameters passed)	Implement callback when user click on close button in VTR. Button is placed on top left of VTR landing page. This will exit VTR and send a callback `'closePopup'` to implement any funcitonality on client side. It also sends the recommended sizes as object.
`addToBagDisabled`	`boolean`	`false`	If `'false'` add to bag option will not be available in VTR side.
`addToBag`	`method`	obj = `{ skuid: this.state.skuid, recommendedSizes: {tightFit: 'S', recommendedFit: 'M', looseFit: 'L'}, selectedItem: 'M'}`\ (parameters passed)	This callback method will be called when user click on add to bag on VTR page. This callback enables to add to bag functionality on client side.
`addToWishList`	`method`	obj = `{ skuid: this.state.skuid, selectedItem: 'M'}`\ (parameters passed)	This callback method will be called when user click on add to wishlist on VTR page. This callback enables to add to wishlist functionality on client side.
`goToBag`	`method`		This callback method will be called when user click on go to bag on VTR page. This callback enables to go to bag functionality on client side.
`available_in_bag`	`boolean`	Optional.	To show/hide add to bag functionality in VTR
`logEvent`	`method`	`uuid` = unique identifier of users `eventName` = Name of event to be logged\ `eventData` = JSON obj for the data to be captured for logs.	This callback method can be implemented to capture the logs for events happening on VTR side. Tryndbuy has already implemented logging functionality on VTR where data is captured and store in VTR database for the specified events. `logEvent` is additional callback method implemented for clients to capture and log the events on their side.

Implementation Samples

        closeVTR = () => {
            // console.log('closeVTR')
        }
        
        addToBag =(obj) =>{
            // console.log('addToBag: ', obj)
        }

        addToWishList =(obj) =>{
            // console.log('addToWishList: ', obj)
        }

        goToBag =() =>{
            // console.log('goToBag')
        }

         logEvent = (uuid, eventName, eventData) => {
            // console.log('Log event: ', `${uuid} : ${eventName} : ${eventData}`)
        }