86fc8b62e5
* Add pnpm-workspace.yaml * Add missing dependencies & replace file: with workspace:* in package.json * Replace "npm" with "pnpm" * Replace "npx" with "pnpx" * Remove package-lock.json * Add pnpm setup action to github workflows * Update webpack babel exclude path * Upgrade woo e2e and fix e2e test command Update e2e.yml Use pnpm run e2e:docker-up in e2e.yml * Remove unused docker-compose.yaml * Replace lerna with pnpm commands Update publish commands * Exclude _locutus_shared_bc.js in babel.config.js * Add .npmrc to set enable-pre-post-scripts=true by default * Fix storybook babel config Update babel.config.js * Add changelog * Update pnpm-lock.yaml * Replace pnpx with pnpm exec * Update pnpm-lock.yaml * Remove js-tests/package-lock.json * Fix @woocommerce/tracks -> workspace:* * Update pnpm-lock.yaml * Add @woocommerce/experimental to onboarding/package.json * Add "@woocommerce/component" to onboarding/package.json * Update pnpm-lock.yaml * Use || instead of && for "test:watch" Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Fix packages/number "clean" command * Add root: true to .eslintrc.js to enforce it to use the root config file * Exclude packages/**/node_modules from babel transpiling * Fix js-tests build config Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> |
||
---|---|---|
.. | ||
src | ||
typings | ||
.npmrc | ||
CHANGELOG.md | ||
README.md | ||
jest.config.json | ||
package.json | ||
tsconfig-cjs.json | ||
tsconfig.json | ||
webpack.config.js |
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, 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>
</>
);
};