@woocommerce/customer-effort-score

    1.1.0 • Public • Published

    Customer Effort Score

    WooCommerce utility to measuring user satisfaction.

    Installation

    Install the module

    npm install @woocommerce/customer-effort-score --save

    This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

    Usage

    CustomerEffortScore component

    CustomerEffortScore is a React component that can be used to implement your own effort score survey, providing your own logging infrastructure.

    This creates a wrapper component around CustomerEffortScore which simply logs responses to the console:

    import CustomerEffortScore from '@woocommerce/customer-effort-score';
    
    export function CustomerEffortScoreConsole( { label } ) {
        const onNoticeShown = () => console.log( 'onNoticeShown' );
        const onModalShown = () => console.log( 'onModalShown' );
        const onNoticeDismissed = () => console.log( 'onNoticeDismissed' );
        const recordScore = ( score, comments ) => console.log( { score, comments } );
    
        return (
            <CustomerEffortScore
    			recordScoreCallback={ recordScore }
    			label={ label }
    			onNoticeShownCallback={ onNoticeShown }
    			onNoticeDismissedCallback={ onNoticeDismissed }
    			onModalShownCallback={ onModalShown }
    			icon={
    				<span
    					style={ { height: 21, width: 21 } }
    					role="img"
    					aria-label="Pencil icon"
    				>
    					✏️
    				</span>
    			}
            />
        );
    };

    Use this wrapper component in your code like this:

    const MyComponent = function() {
        const [ ceses, setCeses ] = useState( [] );
    	
        const addCES = () => {
    		setCeses( 
    			ceses.concat( 
    				<CustomerEffortScoreConsole
    					label={ `survey ${ceses.length + 1}` }
    					key={ ceses.length + 1 }
    				/> 
    			) 
    		);
    	};
    
        return (
            <>
                { ceses }
                <button onClick={ addCES }>Show new survey</button>
            </>
        );
    };

    Install

    npm i @woocommerce/customer-effort-score

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    GPL-3.0-or-later

    Unpacked Size

    788 kB

    Total Files

    19

    Last publish

    Collaborators

    • octaedro
    • adrianduffell
    • joshuatf
    • mattsherman
    • claudiosanches
    • psealock
    • mikejolley
    • albertjuhe
    • nerrad
    • jeffstieler
    • rrennick
    • obliviousharmony
    • dygerati
    • louwie17
    • becdetat
    • ilyasfoo
    • moon.kyong