woocommerce/packages/js/customer-effort-score
Sam Seay 1834621d1a
Update the @woocommerce/eslint-plugin and fix bugs (#36988)
2023-03-02 11:36:38 +13:00
..
changelog Update the @woocommerce/eslint-plugin and fix bugs (#36988) 2023-03-02 11:36:38 +13:00
src Update the @woocommerce/eslint-plugin and fix bugs (#36988) 2023-03-02 11:36:38 +13:00
typings Moved WCA Packages 2022-03-18 14:25:26 -07:00
.eslintrc.js Add .eslintrc config to each packages 2022-03-29 16:08:07 +08:00
.gitignore Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
.npmrc Moved WCA Packages 2022-03-18 14:25:26 -07:00
CHANGELOG.md Prepare Packages for Release (#33776) 2022-07-08 14:04:49 +12:00
PREVIOUS_CHANGELOG.md Update JS packages changelogs (#33412) 2022-06-16 10:06:31 +12:00
README.md Make secondQuestion and title params optional in CES Prompt (#36270) 2023-01-11 18:53:36 +07:00
babel.config.js Update/unify jest@27 across all packages (#34322) 2022-09-06 09:29:45 -05:00
composer.json Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
composer.lock Update changelogger to 3.3.0 to support PR number capturing with merge (#36266) 2023-01-05 14:42:51 +05:30
jest.config.json Prefixed Private JS Packages (#33218) 2022-05-31 15:42:00 -07:00
package.json Consolidate eslint versions (#36700) 2023-02-02 23:25:04 +13:00
tsconfig-cjs.json Added EOF Newlines 2022-05-10 13:35:31 -07:00
tsconfig.json Fix customer effort types and add timeout to thank you message 2022-05-13 10:29:21 -03:00
webpack.config.js Prefixed Private JS Packages (#33218) 2022-05-31 15:42:00 -07:00

README.md

Customer Effort Score

WooCommerce utility to measuring user satisfaction.

Installation

Install the module

pnpm 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, score2, comments ) => console.log( { score, score2, comments } );

    return (
        <CustomerEffortScore
			recordScoreCallback={ recordScore }
			title="My title" 
            firstQuestion="My first question"
            secondQuestion="My optional second question"
			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
					title={ `survey ${ceses.length + 1}` }
                    firstQuestion="My first question"
					key={ ceses.length + 1 }
				/> 
			) 
		);
	};

    return (
        <>
            { ceses }
            <button onClick={ addCES }>Show new survey</button>
        </>
    );
};