Display the booking.note if not empty

Author: AdamGrzybkowski

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/compose/BookingNoteSection.kt

@@ -22,6 +22,7 @@ import com.woocommerce.android.ui.compose.theme.WooThemeWithBackground
 
 @Composable
 fun BookingNoteSection(
+    note: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
@@ -36,13 +37,30 @@ fun BookingNoteSection(
                 modifier = Modifier
                     .fillMaxWidth()
                     .clickable { onClick() }
-                    .padding(horizontal = 16.dp, vertical = 12.dp)
+                    .padding(horizontal = 16.dp)
             ) {
-                BookingDetailsLabel(label = R.string.booking_note_label_add_note, modifier = Modifier.weight(1f))
+                if (note.isEmpty()) {
+                    BookingDetailsLabel(
+                        label = R.string.booking_note_label_add_note,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(vertical = 12.dp)
+                    )
+                } else {
+                    Text(
+                        text = note,
+                        style = MaterialTheme.typography.bodyLarge,
+                        color = MaterialTheme.colorScheme.onSurface,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(vertical = 16.dp)
+                    )
+                }
                 Icon(
                     painter = painterResource(id = R.drawable.ic_arrow_right),
                     contentDescription = null,
-                    tint = MaterialTheme.colorScheme.surfaceVariant
+                    tint = MaterialTheme.colorScheme.surfaceVariant,
+                    modifier = Modifier.padding(start = 8.dp)
                 )
             }
             HorizontalDivider(thickness = 0.5.dp)
@@ -61,6 +79,22 @@ fun BookingNoteSection(
 private fun BookingNoteSectionPreview() {
     WooThemeWithBackground {
         BookingNoteSection(
+            note = "",
+            onClick = {},
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@LightDarkThemePreviews
+@Composable
+private fun BookingNoteSectionWithNotePreview() {
+    WooThemeWithBackground {
+        BookingNoteSection(
+            note = "The customer prefers eco-friendly products and shorter length cuts. Please ensure the stylist " +
+                "recommends sustainable options and is prepared for a trim focusing on shorter lengths. " +
+                "If there are any special requests or allergies, please confirm with the customer " +
+                "prior to the appointment.",
             onClick = {},
             modifier = Modifier.fillMaxWidth()
         )

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsScreen.kt

@@ -157,6 +157,7 @@ private fun BookingDetailsContent(
         )
     }
     BookingNoteSection(
+        note = booking.note,
         onClick = {},
         modifier = Modifier.fillMaxWidth()
     )
@@ -256,7 +257,8 @@ private fun BookingDetailsPreview() {
                         tax = "$4.50",
                         discount = "-",
                         total = "$59.50"
-                    )
+                    ),
+                    note = ""
                 ),
             ),
             onBack = {},

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewModel.kt

@@ -214,7 +214,8 @@ class BookingDetailsViewModel @Inject constructor(
             cancelStatus = cancelStatus
         ),
         bookingCustomerDetails = booking.order.customerInfo.toCustomerDetailsModel(),
-        bookingPaymentDetails = booking.order.paymentInfo?.toPaymentDetailsModel(booking.currency)
+        bookingPaymentDetails = booking.order.paymentInfo?.toPaymentDetailsModel(booking.currency),
+        note = booking.note
     )
 
     private fun buildStaffMemberStatus(

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/bookings/details/BookingDetailsViewState.kt

@@ -25,6 +25,7 @@ data class BookingUiState(
     val bookingsAppointmentDetails: BookingAppointmentDetailsModel,
     val bookingCustomerDetails: BookingCustomerDetailsModel,
     val bookingPaymentDetails: BookingPaymentDetailsModel?,
+    val note: String,
 )
 
 sealed interface BookingDetailsLoadingState {