1aeb7486d5
* Ignore payment gateway suggestion ID variation part When searching for the current gateway ID we will ignore the part after :. * Use a connect link when no WCPay account connected This allows us more control over where to direct the user. * Use the individual payment gateway enablement flow for WCPay * Add changelog * Add changelog * Fix lint errors * Prevent recalling installAndActivate when autoinstalling If we have installAndActivate as a dependency, when isRequesting becomes false it will cause a second, needless installAndActivate call and we end up with two snackbar notices about plugins being installed and/or activated. * Replace deprecated Button props * Make the plugins installed&activated notice message more informative * Fix object check * Add changelog * Remove WooPayments task item fill and use standard task item * refact: Separate get suggestion * Provide WCPay task action from PHP * Don't point directly to WCPay pages, use connect links instead * Remove WCPay action URL logic from the main Payments task If WooPayments is supported, the dedicated task will superseed the default payments task. There is no need to have special action URLs. * Lint fixes * Use a WCPay connect link to defer to the client logic * Fix WCPay task link when incentive is available * Lint fixes |
||
|---|---|---|
| .. | ||
| changelog | ||
| src | ||
| typings | ||
| .eslintrc.js | ||
| .npmrc | ||
| CHANGELOG.md | ||
| PREVIOUS_CHANGELOG.md | ||
| README.md | ||
| babel.config.js | ||
| composer.json | ||
| composer.lock | ||
| jest.config.json | ||
| package.json | ||
| tsconfig-cjs.json | ||
| tsconfig.json | ||
| webpack.config.js | ||
README.md
Components
This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.
Installation
Install the module
pnpm install @woocommerce/components --save
Usage
/**
* WooCommerce dependencies
*/
import { Card } from '@woocommerce/components';
export default function MyCard() {
return (
<Card title="Store Performance" description="Key performance metrics">
<p>Your stuff in a Card.</p>
</Card>
);
}
Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.
In non-WordPress projects, link to the build-style/card/style.css file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css.
Usage with tests
If you are using these components in a project that uses Jest for testing, you may get an error that looks like this:
Cannot find module '@woocommerce/settings' from 'node_modules/@woocommerce/experimental/node_modules/@woocommerce/navigation/build/index.js'
To fix this, you will need to mock the @woocommerce/settings because it's an alias that points to the window.wcSettings, which in turn comes from and is maintained by the WC Blocks package, the front-end code for this is located here.
This can be done by adding the following to your Jest config:
module.exports = {
moduleNameMapper: {
'@woocommerce/settings': path.resolve(
__dirname,
'./mock/woocommerce-settings'
),
}
setupFiles: [
path.resolve( __dirname, 'build/setup-globals.js' ),
],
// ...other config
}
Then, you will need to create the following files: