[Bookings] Booking details part 7

[RafaelKayumov]

Part of: WOOMOB-1236

Description

• Implements UTC timezone dates formatting for booking details screen following the approach in bookings list.
• Implements the customer phone actions sheet / popover
  • Presents popover from customer phone row in iPad
  • Presents bottom action sheet for customer phone on iPhone
  • Copy and call actions
  • "Phone number copied" confirmation toast for copy action
  • "Could not place a call to this number." error toast if the call is impossible (for example on simulators)

Testing steps

• Test on both iPhone and iPad
• Use a CIAB site with existing bookings
• Find a booking with a customer that has a phone number specified (or create one)
• Open booking details
• Scroll down to customer phone row
• Tap on the row (make sure it's tappable in whole area)
• Make sure a popover or action sheet is presented containing phone number as a title and copy + call as actions
• Select the "Copy" action. Make sure the copy confirmation toast is presented upon copying.
• Select the "Call" action. Make sure the failure toast is presented on iOS Simulator.
• Consider testing on a device to make sure that the phone call is happening.

Screenshots

iPhone	iPad

---

• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce iOS Prototype by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce iOS Prototype
	Build Number	pr16234-9a8dfa5
	Version	23.4
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	9a8dfa5
	Installation URL	3kmlm6delci0o

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

[adborbas]

The code looks good and works as described 👍. I have three things to note.

1. sendToPasteboard appends a new line at the end of the strings. This results in an orphan \n when pasting the phone number to Messages. See the attachment below.

2. Nit: On iPad, the confirmation dialog is pinned to the center of the row rather than where you tapped. This results in the dialog seemingly popping out of nowhere

3. I know this is how it looks in the design, but there is no option to send an email to the email address; just copying is supported. I'm wondering if this is something we should be supporting 🤔

[adborbas]

Could you please elaborate on why utcTimeZone is used for formatting?

[RafaelKayumov]

I followed the Huong's suggestion here: #16214 (review)

There is discussion thread about timezone usage for bookings: p1759398245019489-slack-C09FHQNQERG where it's confirmed that we should use the UTC timezone

[RafaelKayumov]

@adborbas Thx for the review.

sendToPasteboard appends a new line at the end of the strings. This results in an orphan \n when pasting the phone number to Messages. See the attachment below.

Trailing line removed in 9a8dfa5

Nit: On iPad, the confirmation dialog is pinned to the center of the row rather than where you tapped. This results in the dialog seemingly popping out of nowhere

This is how it's done elsewhere (for example in "Order details" screen). For now I would stick to existing approach unless there is a clear input from design. I'm also looking into making the detail section narrow in the same way we have it for Order Details. I guess this will make the popup appearance more understandable.

I know this is how it looks in the design, but there is no option to send an email to the email address; just copying is supported. I'm wondering if this is something we should be supporting 🤔

Same here - I'd just follow the design for MVP purposes. We can re-iterate and follow the same approach that we have in Order Details to present action sheet for email instead of just copying.