Commit 2a6aa115034 for woocommerce
commit 2a6aa1150346996e33365b92f0b6813cf6f713d6
Author: Jill Q. <jill.quek@automattic.com>
Date: Mon May 11 13:37:11 2026 +0800
Order notes meta box: clarify visibility, modernize bubble styling (#64476)
The "Note to customer" action emails the customer immediately, but
nothing in the UI signals that consequence until after the click.
Easy to misuse — internal-only notes get sent to customers when
typed in haste.
UI changes (form):
- Visible "Visibility" label above the type dropdown (was
screen-reader-only)
- Dynamic button label: "Add private note" / "Send note to customer →"
- Full-width primary button — non-standard for classic wp-admin, but
appropriate weight for an irreversible side effect
- "Preview or edit email template ↗" helper link, only shown for public
notes (opens in a new tab)
- Dropdown option re-labeled "Note to customer" → "Public note to
customer"
- Removed the help-tooltip next to the "Add note" label — its content
is now carried by the visible Visibility label, dynamic CTA, and
email template helper link
UI changes (notes):
- Customer notes get a "Sent to customer ✉" header inside the bubble
- Bubble restyle: subtle gray bg, thin border, no chat tail
- Meta line in 11px muted gray (AA contrast)
- Bug fix: empty state now reappears after deleting the last note
Confirmation copy:
- Customer-note delete confirmation now warns the email cannot be
recalled
- Private-note confirmation unchanged
Other:
- Tokenize \$gray-100 / \$gray-200 in legacy _variables.scss
(overlaps benignly with #64280)
- Sync drifted markup between page-load template and AJAX prepend
handler — they remain two copies; full deduplication is a follow-up
- Update e2e spec to match new button labels
diff --git a/plugins/woocommerce/changelog/64999-sprinkle-order-notes-visibility b/plugins/woocommerce/changelog/64999-sprinkle-order-notes-visibility
new file mode 100644
index 00000000000..2ce182365c4
--- /dev/null
+++ b/plugins/woocommerce/changelog/64999-sprinkle-order-notes-visibility
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Order notes meta box: clarify note visibility (visibility label, dynamic CTA, customer-note header, email template link, customer-note delete confirmation) and modernize bubble styling for WP admin alignment.
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 725f8bccf01..eaec8e598b2 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -31,6 +31,11 @@ $gray-700: #757575 !default; // Placeh
// Border radius tokens — mirrors WP Design System naming.
$radius-s: 2px !default; // Small radius: inputs, buttons, selects.
+// Grayscale tokens — mirror @wordpress/base-styles/_colors.scss for WP 7.0 alignment.
+// Adjacent work in #64280 adds $gray-700 and $gray-900 — coordinate on merge.
+$gray-100: #f6f7f7 !default; // Subtle backgrounds.
+$gray-200: #dcdcde !default; // Borders, dividers.
+
// export vars as CSS vars
:root {
--woocommerce: #{$woocommerce};
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 6215cf09365..989e4d22c16 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -2873,10 +2873,6 @@ ul.wc_coupon_list_block {
margin: 0;
padding: 0;
- ul.order_notes li {
- padding: 0 10px;
- }
-
button {
margin: 1px;
vertical-align: top;
@@ -3530,13 +3526,18 @@ ul.wc_coupon_list_block {
/* Order notes */
ul.order_notes {
- padding: 2px 0 0;
+ list-style: none;
+ padding: 16px 12px;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
li {
.note_content {
- padding: 10px;
- background: #efefef;
- position: relative;
+ background: #fff;
+ border: 1px solid $gray-200;
+ border-radius: 4px;
p {
margin: 0;
@@ -3545,67 +3546,96 @@ ul.order_notes {
}
}
+ .note_header {
+ margin: 0;
+ padding: 6px 12px;
+ // Mirrors @wordpress/components Notice is-warning variant
+ // (bg #fef8ee, accent #f0b849). Supplementary cue — info is
+ // also in the label text itself.
+ background: #fef8ee;
+ border-bottom: 1px solid $gray-200;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ font-size: 11px;
+ font-weight: 600;
+ }
+
+ .note_body {
+ padding: 8px 12px;
+ }
+
p.meta {
- padding: 10px;
- color: #999;
+ padding: 4px 0 0;
+ color: $subtext;
margin: 0;
font-size: 11px;
.exact-date {
- border-bottom: 1px dotted #999;
+ border-bottom: 0;
+ text-decoration: none;
}
}
a.delete_note {
color: $red;
- }
-
- .note_content::after {
- content: "";
- display: block;
- position: absolute;
- bottom: -10px;
- left: 20px;
- width: 0;
- height: 0;
- border-width: 10px 10px 0 0;
- border-style: solid;
- border-color: #efefef transparent;
+ margin-left: 4px;
}
}
- li.system-note {
- .note_content {
- background: #d7cad2;
- }
-
- .note_content::after {
- border-color: #d7cad2 transparent;
- }
+ li.no-items {
+ color: $subtext;
+ padding: 16px 0;
+ text-align: center;
}
- li.customer-note {
- .note_content {
- background: #a7cedc;
- }
-
- .note_content::after {
- border-color: #a7cedc transparent;
- }
+ li.system-note .note_content {
+ // Auto-generated notes (status changes, webhooks, etc.) are
+ // visually de-emphasised so manual notes scan more easily.
+ background: $gray-100;
}
}
.add_note {
- border-top: 1px solid #ddd;
- padding: 10px 10px 0;
+ border-bottom: 1px solid $gray-200;
+ padding: 16px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
- h4 {
- margin-top: 5px !important;
+ > p {
+ margin: 0;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 4px;
}
#add_order_note {
width: 100%;
- height: 50px;
+ height: 60px;
+ }
+
+ .order_note_visibility {
+ select {
+ width: 100%;
+ max-width: 100%;
+ }
+
+ .add_note_email_settings {
+ margin: 6px 0 0;
+ font-size: 12px;
+ color: $subtext;
+
+ a {
+ color: inherit;
+ }
+ }
+ }
+
+ .add_note_actions button.add_note {
+ width: 100%;
+ text-align: center;
}
}
diff --git a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
index 8e0aec6c76e..8949cac54b8 100644
--- a/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
+++ b/plugins/woocommerce/client/legacy/js/admin/meta-boxes-order.js
@@ -1359,8 +1359,24 @@ jQuery( function ( $ ) {
init: function() {
$( '#woocommerce-order-notes' )
.on( 'click', 'button.add_note', this.add_order_note )
- .on( 'click', 'a.delete_note', this.delete_order_note );
+ .on( 'click', 'a.delete_note', this.delete_order_note )
+ .on( 'change', 'select#order_note_type', this.update_note_type_ui );
+ // Sync the CTA + helper link to reflect the current select state on load.
+ $( 'select#order_note_type' ).trigger( 'change' );
+ },
+
+ update_note_type_ui: function() {
+ var $option = $( this ).find( ':selected' );
+ // Fallback: extension-injected options may lack data-button-label.
+ // Default to the first option's label so the button never shows stale text.
+ var defaultLabel = $( this ).find( 'option:first' ).data( 'button-label' );
+ var label = $option.data( 'button-label' ) || defaultLabel;
+ var isCustomer = 'customer' === $( this ).val();
+ if ( label ) {
+ $( '#woocommerce-order-notes button.add_note' ).text( label );
+ }
+ $( '#woocommerce-order-notes .add_note_email_settings' ).prop( 'hidden', ! isCustomer );
},
add_order_note: function() {
@@ -1400,8 +1416,12 @@ jQuery( function ( $ ) {
},
delete_order_note: function() {
- if ( window.confirm( woocommerce_admin_meta_boxes.i18n_delete_note ) ) {
- var note = $( this ).closest( 'li.note' );
+ var note = $( this ).closest( 'li.note' );
+ var message = note.hasClass( 'customer-note' )
+ ? woocommerce_admin_meta_boxes.i18n_delete_customer_note
+ : woocommerce_admin_meta_boxes.i18n_delete_note;
+
+ if ( window.confirm( message ) ) {
$( note ).block({
message: null,
@@ -1418,7 +1438,25 @@ jQuery( function ( $ ) {
};
$.post( woocommerce_admin_meta_boxes.ajax_url, data, function() {
+ if ( window.wcTracks && window.wcTracks.recordEvent ) {
+ var noteType = note.hasClass( 'customer-note' ) ? 'customer' : 'private';
+ var dateStr = note.find( '.exact-date' ).attr( 'title' );
+ var addedAt = dateStr ? new Date( dateStr.replace( ' ', 'T' ) ) : null;
+ var seconds = ( addedAt && ! isNaN( addedAt.valueOf() ) )
+ ? Math.round( ( Date.now() - addedAt.getTime() ) / 1000 )
+ : null;
+ window.wcTracks.recordEvent( 'order_edit_delete_order_note', {
+ order_id: woocommerce_admin_meta_boxes.post_id,
+ note_type: noteType,
+ status: $( '#order_status' ).val(),
+ seconds_since_added: seconds
+ } );
+ }
$( note ).remove();
+ var $list = $( 'ul.order_notes' );
+ if ( 0 === $list.find( 'li.note' ).length ) {
+ $list.append( $( '<li class="no-items"></li>' ).text( woocommerce_admin_meta_boxes.i18n_no_notes_yet ) );
+ }
});
}
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php b/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
index 19dfe58d97d..61c43de3a3a 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin-assets.php
@@ -702,6 +702,8 @@ if ( ! class_exists( 'WC_Admin_Assets', false ) ) :
'i18n_permission_revoke' => __( 'Are you sure you want to revoke access to this download?', 'woocommerce' ),
'i18n_tax_rate_already_exists' => __( 'You cannot add the same tax rate twice!', 'woocommerce' ),
'i18n_delete_note' => __( 'Are you sure you wish to delete this note? This action cannot be undone.', 'woocommerce' ),
+ 'i18n_delete_customer_note' => __( 'Are you sure you wish to delete this note? This action cannot be undone. Caution: This only removes the note from your records — it does not recall the email already sent to the customer.', 'woocommerce' ),
+ 'i18n_no_notes_yet' => __( 'There are no notes yet.', 'woocommerce' ),
'i18n_apply_coupon' => __( 'Enter a coupon code to apply. Discounts are applied to line totals, before taxes.', 'woocommerce' ),
'i18n_add_fee' => __( 'Enter a fixed amount or percentage to apply as a fee.', 'woocommerce' ),
'i18n_attribute_name_placeholder' => __( 'New attribute', 'woocommerce' ),
diff --git a/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-order-notes.php b/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-order-notes.php
index b10ffbeffd7..e4ba9f52e00 100644
--- a/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-order-notes.php
+++ b/plugins/woocommerce/includes/admin/meta-boxes/class-wc-meta-box-order-notes.php
@@ -33,19 +33,40 @@ class WC_Meta_Box_Order_Notes {
} else {
$notes = array();
}
+
+ $private_button_label = __( 'Add private note', 'woocommerce' );
+ $customer_button_label = __( 'Send note to customer →', 'woocommerce' );
+ $email_settings_url = admin_url( 'admin.php?page=wc-settings&tab=email§ion=wc_email_customer_note' );
?>
<div class="add_note">
<p>
- <label for="add_order_note"><?php esc_html_e( 'Add note', 'woocommerce' ); ?> <?php echo wc_help_tip( __( 'Add a note for your reference, or add a customer note (the user will be notified).', 'woocommerce' ) ); ?></label>
- <textarea type="text" name="order_note" id="add_order_note" class="input-text" cols="20" rows="5"></textarea>
+ <label for="add_order_note"><?php esc_html_e( 'Add note', 'woocommerce' ); ?></label>
+ <textarea name="order_note" id="add_order_note" class="input-text" cols="20" rows="5"></textarea>
</p>
- <p>
- <label for="order_note_type" class="screen-reader-text"><?php esc_html_e( 'Note type', 'woocommerce' ); ?></label>
+ <div class="order_note_visibility">
+ <label for="order_note_type"><?php esc_html_e( 'Visibility', 'woocommerce' ); ?></label>
<select name="order_note_type" id="order_note_type">
- <option value=""><?php esc_html_e( 'Private note', 'woocommerce' ); ?></option>
- <option value="customer"><?php esc_html_e( 'Note to customer', 'woocommerce' ); ?></option>
+ <option value="" data-button-label="<?php echo esc_attr( $private_button_label ); ?>"><?php esc_html_e( 'Private note', 'woocommerce' ); ?></option>
+ <option value="customer" data-button-label="<?php echo esc_attr( $customer_button_label ); ?>"><?php esc_html_e( 'Public note to customer', 'woocommerce' ); ?></option>
</select>
- <button type="button" class="add_note button"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>
+ <p class="add_note_email_settings" hidden>
+ <?php
+ $email_template_link = sprintf(
+ '<a href="%1$s" target="_blank" rel="noopener noreferrer">%2$s <span aria-hidden="true">↗</span><span class="screen-reader-text">%3$s</span></a>',
+ esc_url( $email_settings_url ),
+ esc_html__( 'email template', 'woocommerce' ),
+ esc_html__( '(opens in a new tab)', 'woocommerce' )
+ );
+ printf(
+ /* translators: %s: link to the customer note email template settings */
+ esc_html__( 'Preview or edit %s', 'woocommerce' ),
+ $email_template_link // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped above.
+ );
+ ?>
+ </p>
+ </div>
+ <p class="add_note_actions">
+ <button type="button" class="add_note button"><?php echo esc_html( $private_button_label ); ?></button>
</p>
</div>
<?php
diff --git a/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-notes.php b/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-notes.php
index 913d9d08223..0da5d1d4cf4 100644
--- a/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-notes.php
+++ b/plugins/woocommerce/includes/admin/meta-boxes/views/html-order-notes.php
@@ -19,27 +19,40 @@ defined( 'ABSPATH' ) || exit;
?>
<li rel="<?php echo absint( $note->id ); ?>" class="<?php echo esc_attr( implode( ' ', $css_class ) ); ?>">
<div class="note_content">
- <?php
- $content = wp_kses_post( $note->content );
- $content = wc_wptexturize_order_note( $content );
- // phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- the content goes through wp_kses_post above.
- echo wpautop( $content );
- ?>
+ <?php if ( $note->customer_note ) : ?>
+ <div class="note_header"><?php esc_html_e( 'Sent to customer', 'woocommerce' ); ?></div>
+ <?php endif; ?>
+ <div class="note_body">
+ <?php
+ $content = wp_kses_post( $note->content );
+ $content = wc_wptexturize_order_note( $content );
+ // phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- the content goes through wp_kses_post above.
+ echo wpautop( $content );
+ ?>
+ </div>
</div>
<p class="meta">
<abbr class="exact-date" title="<?php echo esc_attr( $note->date_created->date( 'Y-m-d H:i:s' ) ); ?>">
<?php
- /* translators: %1$s: note date %2$s: note time */
+ /* translators: %1$s: order note date, %2$s: order note time */
echo esc_html( sprintf( __( '%1$s at %2$s', 'woocommerce' ), $note->date_created->date_i18n( wc_date_format() ), $note->date_created->date_i18n( wc_time_format() ) ) );
?>
</abbr>
<?php
if ( 'system' !== $note->added_by ) :
- /* translators: %s: note author */
+ /* translators: %s: order note author */
echo esc_html( sprintf( ' ' . __( 'by %s', 'woocommerce' ), $note->added_by ) );
endif;
?>
- <a href="#" class="delete_note" role="button"><?php esc_html_e( 'Delete note', 'woocommerce' ); ?></a>
+ <?php
+ $note_date_label = $note->date_created->date_i18n( wc_date_format() );
+ $delete_aria_label = 'system' === $note->added_by
+ /* translators: %s: order note date */
+ ? sprintf( __( 'Delete system note from %s', 'woocommerce' ), $note_date_label )
+ /* translators: %1$s: order note author, %2$s: order note date */
+ : sprintf( __( 'Delete note from %1$s on %2$s', 'woocommerce' ), $note->added_by, $note_date_label );
+ ?>
+ <a href="#" class="delete_note" role="button" aria-label="<?php echo esc_attr( $delete_aria_label ); ?>"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</p>
</li>
<?php
diff --git a/plugins/woocommerce/includes/class-wc-ajax.php b/plugins/woocommerce/includes/class-wc-ajax.php
index fe87de8f76d..4e202e177ce 100644
--- a/plugins/woocommerce/includes/class-wc-ajax.php
+++ b/plugins/woocommerce/includes/class-wc-ajax.php
@@ -1736,31 +1736,48 @@ class WC_AJAX {
$comment_id = $order->add_order_note( $note, $is_customer_note, true );
$note = wc_get_order_note( $comment_id );
+ if ( ! $note ) {
+ wp_die();
+ }
+
$note_classes = array( 'note' );
$note_classes[] = $is_customer_note ? 'customer-note' : '';
$note_classes = apply_filters( 'woocommerce_order_note_class', array_filter( $note_classes ), $note );
?>
<li rel="<?php echo absint( $note->id ); ?>" class="<?php echo esc_attr( implode( ' ', $note_classes ) ); ?>">
<div class="note_content">
- <?php
- $content = wc_wptexturize_order_note( $note->content );
- echo wp_kses_post( wpautop( make_clickable( $content ) ) );
- ?>
+ <?php if ( $is_customer_note ) : ?>
+ <div class="note_header"><?php esc_html_e( 'Sent to customer', 'woocommerce' ); ?></div>
+ <?php endif; ?>
+ <div class="note_body">
+ <?php
+ $content = wc_wptexturize_order_note( $note->content );
+ echo wp_kses_post( wpautop( make_clickable( $content ) ) );
+ ?>
+ </div>
</div>
<p class="meta">
- <abbr class="exact-date" title="<?php echo esc_attr( $note->date_created->date( 'y-m-d h:i:s' ) ); ?>">
+ <abbr class="exact-date" title="<?php echo esc_attr( $note->date_created->date( 'Y-m-d H:i:s' ) ); ?>">
<?php
- /* translators: $1: Date created, $2 Time created */
- printf( esc_html__( 'added on %1$s at %2$s', 'woocommerce' ), esc_html( $note->date_created->date_i18n( wc_date_format() ) ), esc_html( $note->date_created->date_i18n( wc_time_format() ) ) );
+ /* translators: %1$s: order note date, %2$s: order note time */
+ printf( esc_html__( '%1$s at %2$s', 'woocommerce' ), esc_html( $note->date_created->date_i18n( wc_date_format() ) ), esc_html( $note->date_created->date_i18n( wc_time_format() ) ) );
?>
</abbr>
<?php
if ( 'system' !== $note->added_by ) :
- /* translators: %s: note author */
+ /* translators: %s: order note author */
printf( ' ' . esc_html__( 'by %s', 'woocommerce' ), esc_html( $note->added_by ) );
endif;
?>
- <a href="#" class="delete_note" role="button"><?php esc_html_e( 'Delete note', 'woocommerce' ); ?></a>
+ <?php
+ $note_date_label = $note->date_created->date_i18n( wc_date_format() );
+ $delete_aria_label = 'system' === $note->added_by
+ /* translators: %s: order note date */
+ ? sprintf( __( 'Delete system note from %s', 'woocommerce' ), $note_date_label )
+ /* translators: %1$s: order note author, %2$s: order note date */
+ : sprintf( __( 'Delete note from %1$s on %2$s', 'woocommerce' ), $note->added_by, $note_date_label );
+ ?>
+ <a href="#" class="delete_note" role="button" aria-label="<?php echo esc_attr( $delete_aria_label ); ?>"><?php esc_html_e( 'Delete', 'woocommerce' ); ?></a>
</p>
</li>
<?php
diff --git a/plugins/woocommerce/phpstan-baseline.neon b/plugins/woocommerce/phpstan-baseline.neon
index 70754430db2..5704d657d5f 100644
--- a/plugins/woocommerce/phpstan-baseline.neon
+++ b/plugins/woocommerce/phpstan-baseline.neon
@@ -8574,36 +8574,12 @@ parameters:
count: 2
path: includes/class-wc-ajax.php
- -
- message: '#^Cannot access property \$added_by on stdClass\|null\.$#'
- identifier: property.nonObject
- count: 2
- path: includes/class-wc-ajax.php
-
-
message: '#^Cannot access property \$children on WP_Error\|WP_Term\|null\.$#'
identifier: property.nonObject
count: 4
path: includes/class-wc-ajax.php
- -
- message: '#^Cannot access property \$content on stdClass\|null\.$#'
- identifier: property.nonObject
- count: 1
- path: includes/class-wc-ajax.php
-
- -
- message: '#^Cannot access property \$date_created on stdClass\|null\.$#'
- identifier: property.nonObject
- count: 3
- path: includes/class-wc-ajax.php
-
- -
- message: '#^Cannot access property \$id on stdClass\|null\.$#'
- identifier: property.nonObject
- count: 1
- path: includes/class-wc-ajax.php
-
-
message: '#^Cannot access property \$name on WP_Term\|false\.$#'
identifier: property.nonObject
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/order/order-edit.spec.ts b/plugins/woocommerce/tests/e2e-pw/tests/order/order-edit.spec.ts
index f4755596555..78bada4620f 100644
--- a/plugins/woocommerce/tests/e2e-pw/tests/order/order-edit.spec.ts
+++ b/plugins/woocommerce/tests/e2e-pw/tests/order/order-edit.spec.ts
@@ -209,7 +209,7 @@ test.describe( 'Edit order', { tag: [ tags.SERVICES, tags.HPOS ] }, () => {
.fill(
'This order is a test order. It is only a test. This note is a private note.'
);
- await page.getByRole( 'button', { name: 'Add', exact: true } ).click();
+ await page.getByRole( 'button', { name: 'Add private note' } ).click();
// verify the note saved
await expect(
@@ -238,8 +238,12 @@ test.describe( 'Edit order', { tag: [ tags.SERVICES, tags.HPOS ] }, () => {
.fill(
'This order is a test order. It is only a test. This note is a note to the customer.'
);
- await page.getByLabel( 'Note type' ).selectOption( 'Note to customer' );
- await page.getByRole( 'button', { name: 'Add', exact: true } ).click();
+ await page
+ .getByLabel( 'Visibility' )
+ .selectOption( 'Public note to customer' );
+ await page
+ .getByRole( 'button', { name: 'Send note to customer' } )
+ .click();
// verify the note saved
await expect(
@@ -257,7 +261,7 @@ test.describe( 'Edit order', { tag: [ tags.SERVICES, tags.HPOS ] }, () => {
// verify the note is gone
await expect(
page.getByText(
- 'This order is a test order. It is only a test. This note is a private note.'
+ 'This order is a test order. It is only a test. This note is a note to the customer.'
)
).toBeHidden();
} );