[Enhancement]: Block-based checkout - Pickup section updates (woocomm…

…erce#47173) * Change “Pickup options” to “Pickup locations” * Always show pickup location and truncate pickup details * Add changefile(s) from automation for the following project(s): woocommerce-blocks * Adjust spacing between pickup details and more link * Hide pickup details of unselected pickup location * Adjust line height of truncated text * Show “Read more/less” instead of “more/less” * Ensure both lines are equally filled with text --------- Co-authored-by: github-actions <[email protected]>
nigeljamesstevenson · May 8, 2024 · e7aff94 · e7aff94
1 parent 3ad9ebf
commit e7aff94
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 16 deletions.
diff --git a/...locks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/attributes.tsx b/...locks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/attributes.tsx
@@ -10,7 +10,7 @@ import formStepAttributes from '../../form-step/attributes';
 
 export default {
 	...formStepAttributes( {
-		defaultTitle: __( 'Pickup options', 'woocommerce' ),
+		defaultTitle: __( 'Pickup locations', 'woocommerce' ),
 		defaultDescription: '',
 	} ),
 	className: {

diff --git a/...ce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.json b/...ce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.json
@@ -2,7 +2,7 @@
 	"name": "woocommerce/checkout-pickup-options-block",
 	"version": "1.0.0",
 	"title": "Pickup Method",
-	"description": "Shows local pickup options.",
+	"description": "Shows local pickup locations.",
 	"category": "woocommerce",
 	"supports": {
 		"align": false,

diff --git a/...rce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx b/...rce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx
@@ -24,6 +24,7 @@ import {
 } from '@woocommerce/base-utils';
 import { ExperimentalOrderLocalPickupPackages } from '@woocommerce/blocks-checkout';
 import { LocalPickupSelect } from '@woocommerce/base-components/cart-checkout/local-pickup-select';
+import ReadMore from '@woocommerce/base-components/read-more';
 
 /**
  * Internal dependencies
@@ -118,8 +119,7 @@ const renderPickupLocation = (
 			? decodeEntities( location )
 			: decodeEntities( option.name ),
 		secondaryLabel,
-		description: decodeEntities( details ),
-		secondaryDescription: address ? (
+		description: address ? (
 			<>
 				<Icon
 					icon={ mapMarker }
@@ -128,6 +128,10 @@ const renderPickupLocation = (
 				{ decodeEntities( address ) }
 			</>
 		) : undefined,
+
+		secondaryDescription: (
+			<ReadMore maxLines={ 2 }>{ decodeEntities( details ) }</ReadMore>
+		),
 	};
 };
 

diff --git a/...ce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss b/...ce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/style.scss
@@ -24,28 +24,41 @@
 				margin-left: auto;
 			}
 		}
-		.wc-block-components-radio-control__description-group {
-			display: none;
-		}
-		.wc-block-components-radio-control__option-checked {
-			.wc-block-components-radio-control__description-group {
-				display: block;
-			}
-		}
 		.wc-block-components-radio-control__label-group {
 			em {
 				text-transform: uppercase;
 				font-style: inherit;
 			}
 		}
+
+		.wc-block-components-radio-control__option-checked {
+			.wc-block-components-radio-control__description-group {
+				.read-more-content {
+					margin-left: em($gap-small * 0.25);
+					position: initial;
+					visibility: visible;
+					z-index: initial;
+					hyphens: auto;
+					word-break: normal;
+				}
+			}
+		}
+
 		.wc-block-components-radio-control__description-group {
-			width: 100%;
+			display: block;
+			width: calc(100% + em($gap-huge / 0.875));
 			box-sizing: border-box;
-			background-color: $universal-background;
 			border-radius: $universal-border-radius;
 			padding: 1px em($gap-small);
+			margin-left: -(em($gap-huge));
 			margin-top: em($gap-smaller);
 			@include font-size(regular);
+
+			.read-more-content {
+				position: absolute;
+				visibility: hidden;
+				z-index: -1;
+			}
 		}
 		.wc-block-components-radio-control__description,
 		.wc-block-components-radio-control__secondary-description {
@@ -54,7 +67,7 @@
 			margin: em($gap-small) 0;
 			display: block;
 		}
-		.wc-block-components-radio-control__secondary-description {
+		.wc-block-components-radio-control__description {
 			color: $gray-700;
 
 			> svg {

diff --git a/plugins/woocommerce-blocks/packages/components/radio-control/style.scss b/plugins/woocommerce-blocks/packages/components/radio-control/style.scss
@@ -150,7 +150,7 @@
 .wc-block-components-radio-control__description,
 .wc-block-components-radio-control__secondary-description {
 	@include font-size(small);
-	line-height: 20px;
+	line-height: 1.55;
 }
 
 // Extra class for specificity.

diff --git a/plugins/woocommerce/changelog/47173-update-46012-pickup-sections b/plugins/woocommerce/changelog/47173-update-46012-pickup-sections
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Always show pickup location address and details and truncate pickup details.