woocommerce/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx

81 lines
2.1 KiB
TypeScript
Raw Normal View History

WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
/**
* External dependencies
*/
import classnames from 'classnames';
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { Main } from '@woocommerce/base-components/sidebar-layout';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import type { TemplateArray } from '@wordpress/blocks';
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
/**
* Internal dependencies
*/
import { useCheckoutBlockControlsContext } from '../../context';
Move Checkout block attributes into metadata (`block.json`) (https://github.com/woocommerce/woocommerce-blocks/pull/5594) * Add block title to AbstractBlock class * Add block title to Checkout block * Include all block.json files in tsconfig * Add get_block_title method to Checkout.php * Remove redundant block_title field * Add block.json and remove static attributes from attributes.ts * Register block using attributes from block.json * Add metadata_path to AbstractBlock * Add function to AssetsApi to get the metadata path from the plugin root * Register the block using metadata if it's set in the block's class * Remove get_block_title method * Only add supports and attributes to the block when not registering with metadata * Change get_block_metadata to get_block_metadata_path * Change indentation to tabs in block.json * Update comment to clarify why attributes and supports are set later * Check if path to metadata is not empty instead of set and not empty * Move checkout block out of cart-checkout directory * Update get_block_metadata_path function to find block.json automatically * Remove metadata path from AbstractBlock * Check if there's a metadata file and register blocks with metadata if so * Move deprecated attributes out of metadata and into attributes.ts * Re-add deprecated attributes to checkout index * Move order notes test * Move test for checkout phone number in edito * Fix indentation in checkout/block.json * Move checkout terms tests * Try forcing storefront theme in e2e tests * Revert "Try forcing storefront theme in e2e tests" This reverts commit 5b0fd47a2c39aadb0141a4ed28cbc0e6baa89625. * Try capturing screenshot on test failures * Try uploading error in try catch * Try uploading artefacts on error * Test uploading artefacts * Screenshot just before looking for edit post layout * Revert "Screenshot just before looking for edit post layout" This reverts commit 61dff027789ce13a0d84e7b6f11e431637c5a450. * Revert "Test uploading artefacts" This reverts commit adf5cc55bcdb677f889bf5a62803b4150d98e665. * Revert "Try uploading artefacts on error" This reverts commit 7441a832a113a95fef89cc1b8db6dc79271be516. * Revert "Try uploading error in try catch" This reverts commit ca412ce505d56286b164f588a201a451f6bceeb6. * Revert "Try capturing screenshot on test failures" This reverts commit 0de6e97df19b116091a7bb3b8652713867d2d80f. Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2022-01-28 16:37:06 +00:00
import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import './style.scss';
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
export const Edit = ( {
clientId,
attributes,
}: {
clientId: string;
attributes: {
className?: string;
};
} ): JSX.Element => {
const blockProps = useBlockProps( {
className: classnames(
'wc-block-checkout__main',
attributes?.className
),
} );
const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_FIELDS );
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
const {
addressFieldControls: Controls,
} = useCheckoutBlockControlsContext();
const defaultTemplate = ( [
[ 'woocommerce/checkout-express-payment-block', {}, [] ],
[ 'woocommerce/checkout-contact-information-block', {}, [] ],
[ 'woocommerce/checkout-shipping-address-block', {}, [] ],
[ 'woocommerce/checkout-billing-address-block', {}, [] ],
[ 'woocommerce/checkout-shipping-methods-block', {}, [] ],
[ 'woocommerce/checkout-payment-block', {}, [] ],
[ 'woocommerce/checkout-order-note-block', {}, [] ],
[ 'woocommerce/checkout-terms-block', {}, [] ],
[ 'woocommerce/checkout-actions-block', {}, [] ],
].filter( Boolean ) as unknown ) as TemplateArray;
useForcedLayout( {
clientId,
registeredBlocks: allowedBlocks,
defaultTemplate,
} );
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
return (
<Main { ...blockProps }>
<Controls />
<form className="wc-block-components-form wc-block-checkout__form">
<InnerBlocks
allowedBlocks={ allowedBlocks }
templateLock={ false }
template={ defaultTemplate }
renderAppender={ InnerBlocks.ButtonBlockAppender }
/>
</form>
WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) * Duplicate checkout block * Contact information block * form step block * shipping address block * Setup atomic blocks * Container structure * More formal steps rather than generic form step * Add billing and shipping forms * add checkout actions block * add order note block * Add order summary * add payment block * Add inspector controls for address fields * frontend WIP * move attributes * wrap shipping with form step * PhoneNumber to typescript * Remove column block * form steps * move payment logic to frontend * Express block * inline payment block * Add shipping method block * Render inner blocks (not standalone blocks) and add classes to Atomic Block list on php side * lazy again * Add more wrappers from old frontend file * add layout * Checkout wrappers were missing * Enqueue payment methods for new block * Add missing classnames * Move shipping as billing state to context provider * express payments rendering * try/block-registry * Remove atomic components (unused) * Fix attribute persistance due to template locking * Fix shipping display when not needed * Set correct parent blocks for inner blocks * pass data to blocks * demo/newsletter * Skeleton styling * only apply styles to loading state for now * shipping method block frontend * rename express block * lock template * fix ts warning for __webpack_public_path__ * Refactor to avoid duplicating atomic block logic * remove changes in save method * Add zones and shipping methods to the sidebar for the shipping inner block Closes woocommerce/woocommerce-blocks#4320 * Fix script handles * Fix method display when there are none * Add shipping phone * Add phone to api and sync with billing correctly * Clear hidden fields on load * fix requirePhoneField property * Enable shipping and billing phone fields * readonly field support * Handle context attributes * Fix createInterpolateElement usage * add totalswrapper * Implement Terms and Conditions block for Checkout i2 (https://github.com/woocommerce/woocommerce-blocks/pull/4436) * Setup atomic blocks * frontend WIP * Express block * try/block-registry * Set correct parent blocks for inner blocks * Skeleton styling * Refactor to avoid duplicating atomic block logic * add block locking * add terms and conditions block * hardcore settings image * lock blocks from being deleted * hide original checkout block * mark blocks as side effectful * move variations to block register function * prevent core checkout blocks from needlessly showing in the inserter * enable checkout i1 * fix broken rebase * move save back * Localise default text Co-authored-by: Mike Jolley <mike.jolley@me.com> * Add add-hoc Block locking from WooCommerce Blocks side. (https://github.com/woocommerce/woocommerce-blocks/pull/4454) * add locking * use subscribe instead * fix condition * add locking to blocks * check if the item is not a text field * Tidy up hacks CSS class handling * Fix error if node is undefined * Hide menu when move is disabled * update package lock * Add todo and fix issue where selector returns null * split todos * move todo * edit comment Co-authored-by: Mike Jolley <mike.jolley@me.com> * Un-disable the billing checkbox in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/4457) * Add missing Slot fill provider on frontend Fixes woocommerce/woocommerce-blocks#4441 by adding the slot fill provider to the checkout-i2 block. * Use column style appender * Add padding/styles to actions * Add/update icon library * Multiline checkbox alignment * Icons and copy changes for i2 blocks * Add terms by default * Add notice if text is missing links (https://github.com/woocommerce/woocommerce-blocks/pull/4466) * Swap variations for toggle * Add payment settings to inspector * Update package lock * Add inline docs to block registry * Add inner block areas below each form step. This does not include the form step contents, just adds inner blocks after existing content. Moving content within the inner block area is a separate discussion. This closes woocommerce/woocommerce-blocks#4306 * Sample block registration + docs * Add tests for registerCheckoutBlock * Fix lazy component detection in tests * Add basic transform between i1 and i2 * remove template lock todo * Update scroll to top hoc * Move shared settings to new context providers Closes woocommerce/woocommerce-blocks#4472 * Remove readonly field support (unused) * Remove context code * Experimental * remove invalid typedef * FIx scrolling on validation due to misplaced context provider * Update assets/js/base/context/providers/cart-checkout/checkout-state/index.tsx Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Update comment to remove reference to phone * Update packages/checkout/blocks-registry/README.md Co-authored-by: Darren Ethier <darren@roughsmootheng.in> * Rename ScrollToTopComponent * Add explicit list of expectedType in TypeScript definition * Add todo to remove custom shipping phone handling * Remove dangerouslySetInnerHTML in External Link Card Component * Add ExternalLinkCard to storybook * update todo wording * Refactor withScrollToTop to remove useCallback and use typescript * Support children on CheckboxControl, with added Typescript * Spread getRegisteredBlocks return value Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2021-07-22 11:03:00 +00:00
</Main>
);
};
export const Save = (): JSX.Element => {
return (
<div { ...useBlockProps.save() }>
<InnerBlocks.Content />
</div>
);
};