woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx

33 lines
891 B
TypeScript
Raw Normal View History

[Feature] Express Checkout Improvements (#50791) * Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00:00
/**
* External dependencies
*/
import { getValidBlockAttributes } from '@woocommerce/base-utils';
/**
* Internal dependencies
*/
import Block from './block';
[Feature] Express Checkout Improvements (#50791) * Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00:00
import { ExpressPaymentContext } from '../../../cart-checkout-shared/payment-methods/express-payment/express-payment-context';
import metadata from './block.json';
import { ExpressCheckoutAttributes } from '../../../cart-checkout-shared/types';
const FrontendBlock = ( attributes: ExpressCheckoutAttributes ) => {
const validAttributes = getValidBlockAttributes(
metadata.attributes,
attributes
);
const { showButtonStyles, buttonHeight, buttonBorderRadius, className } =
validAttributes;
return (
<ExpressPaymentContext.Provider
value={ { showButtonStyles, buttonHeight, buttonBorderRadius } }
>
<Block className={ className } />
</ExpressPaymentContext.Provider>
);
};
[Feature] Express Checkout Improvements (#50791) * Add new buttonAttributes API to style express checkout buttons coherently (#47899) * Expose buttonAttributes to the express payment methods * Add size and label attributes to the express checkout area * Remove defaultHeight * default button Label * Remove the button label attribute * Remove px from height * Change large button height to 55px * Load express checkout block with attributes * Add toggle and borderRadius controls and remove getting border radius from the theme * Remove extra border radius text * Only pass buttonAttributes if toggled on * Move express payment block attribute logic into a Provider * Tidy up editor grid and parse attributes into context on frontend * Add px to border-radius input * Express payment methods not selectable * Add a test * lint fixes * default button height is 48 not 4 * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Update docs * Add tests for express payment methods * Center images within the express payment area in the editor * Apply the buttonAttributes to the li container in the editor regardless of showButtonStyles * Fix style issue * fix linting * fix lint again * Update manifest * Update docs manifest * Resize images in editor * lint fix --------- Co-authored-by: github-actions <github-actions@github.com> * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Synchronise the express payment settings between the Cart & Checkout blocks (#50688) * Add express payment methods to sidebar * Only add extra props for express payment methods * Update docs * Make title, description and gatewayId types optional * Update docs * Fix types again and editor side * Add changefile(s) from automation for the following project(s): woocommerce-blocks * handle situation when no methods are active * Update manifest * Add express payment methods to inspector controls for express checkout block (#50983) * Remove forced styles on the editor * Remove the darkMode setting from the buttonAttributes API (#51109) * Remove darkMode from the buttonAttributes API * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Accept supports declarations for express payment style controls + merchant ux improvements in the editor (#51296) * Fix images in editor displaying weird * Fix long express payment names breaking layout * Default to uniform styles off * Use heightControl for border radius and fix height for cart buttons * Move formatting title and description to the config validation * Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce * Fix linting * Fix failing test * Add back the 48px height for images in editor * Fix linting again * Update docs * Update docs manifest * Update docs to fix linting * Add comment to test to better explain why we are expecting a console warning * make strings translatable * Sync cart & checkout directly without option * Remove current styles * Change the beta label * Replace < and > with symbol references in docs * Update docs manifest * Increase padding of beta label * fix linter issues * change to using looger helper * fix CSS --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-09-18 19:49:27 +00:00
export default FrontendBlock;