[Shipping Labels] Update the purchase in-progress and failure screens

RELEASE-NOTES.txt

@@ -4,6 +4,7 @@
 23.2
 -----
 - [*] Shipping Labels: Add error message for invalid dimensions errors to custom package creation screen [https://github.com/woocommerce/woocommerce-android/pull/14499]
+- [*] Shipping Labels: Update the UI of shipping label purchase in-progress and failure states [https://github.com/woocommerce/woocommerce-android/pull/14498]
 
 23.1
 -----

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/GetShipments.kt

@@ -69,7 +69,7 @@ class GetShipments @Inject constructor(
         currentOrderLabels: List<ShippingLabelModel>
     ) = shipmentUIModelList.map { shipmentUIModel ->
         val shipmentLabels = currentOrderLabels.filter {
-            it.shipmentId == shipmentUIModel.remoteId
+            it.shipmentId == shipmentUIModel.remoteId && it.status != ShippingLabelStatus.PURCHASE_ERROR
         }.sortedByDescending { it.createdDate?.time }
 
         val purchasedLabel = shipmentLabels.find {

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShipmentDetails.kt

@@ -87,7 +87,7 @@ fun ShipmentDetails(
     onEditOriginAddress: (OriginShippingAddress) -> Unit,
     onOriginAddressSelected: (OriginShippingAddress) -> Unit,
     destinationStatus: AddressStatus,
-    shipmentPurchased: Boolean,
+    readOnly: Boolean,
     onPeekHeightChanged: (Dp) -> Unit
 ) {
     val expandProgress = bottomSheetState.progress(
@@ -200,7 +200,7 @@ fun ShipmentDetails(
                             modifier = Modifier
                                 .weight(1f)
                                 .padding(horizontal = 16.dp),
-                            shipmentPurchased = shipmentPurchased,
+                            readOnly = readOnly,
                             onEditDestinationAddress = onEditDestinationAddress,
                             onEditOriginAddress = onEditOriginAddress,
                             onOriginAddressSelected = onOriginAddressSelected,
@@ -217,7 +217,7 @@ fun ShipmentDetails(
                             modifier = Modifier
                                 .weight(1f)
                                 .padding(horizontal = 16.dp),
-                            shipmentPurchased = shipmentPurchased,
+                            readOnly = readOnly,
                             onEditDestinationAddress = onEditDestinationAddress,
                             onEditOriginAddress = onEditOriginAddress,
                             onOriginAddressSelected = onOriginAddressSelected,
@@ -259,7 +259,7 @@ private fun ShipmentDetailsPortrait(
     onOriginAddressSelected: (OriginShippingAddress) -> Unit,
     destinationStatus: AddressStatus,
     modifier: Modifier = Modifier,
-    shipmentPurchased: Boolean
+    readOnly: Boolean
 ) {
     Column(
         verticalArrangement = Arrangement.spacedBy(16.dp),
@@ -272,14 +272,14 @@ private fun ShipmentDetailsPortrait(
             totalItems = totalItems,
             totalItemsCost = totalItemsCost,
             shippingLines = shippingLines,
-            isReadOnly = shipmentPurchased,
+            isReadOnly = readOnly,
             onEditDestinationAddress = onEditDestinationAddress,
             onEditOriginAddress = onEditOriginAddress,
             onOriginAddressSelected = onOriginAddressSelected,
             destinationStatus = destinationStatus
         )
         Divider()
-        if (!shipmentPurchased) {
+        if (!readOnly) {
             PaymentSection(paymentsSectionUI = paymentsSectionUI)
             Divider()
         }
@@ -300,7 +300,7 @@ private fun ShipmentDetailsLandscape(
     onOriginAddressSelected: (OriginShippingAddress) -> Unit,
     destinationStatus: AddressStatus,
     modifier: Modifier = Modifier,
-    shipmentPurchased: Boolean = false
+    readOnly: Boolean = false
 ) {
     Column(
         modifier
@@ -309,7 +309,7 @@ private fun ShipmentDetailsLandscape(
     ) {
         AddressSectionLandscape(
             shippingAddresses = shippingAddresses,
-            isReadOnly = shipmentPurchased,
+            isReadOnly = readOnly,
             onEditDestinationAddress = onEditDestinationAddress,
             onEditOriginAddress = onEditOriginAddress,
             onOriginAddressSelected = onOriginAddressSelected,
@@ -330,7 +330,7 @@ private fun ShipmentDetailsLandscape(
             )
             VerticalDivider(Modifier.padding(top = 16.dp))
             Column(modifier = Modifier.weight(1f)) {
-                if (!shipmentPurchased) {
+                if (!readOnly) {
                     PaymentSection(
                         paymentsSectionUI = paymentsSectionUI,
                         modifier = Modifier
@@ -679,7 +679,7 @@ fun ShipmentDetailsExpandedPreview() {
                 onEditOriginAddress = {},
                 onOriginAddressSelected = {},
                 destinationStatus = AddressStatus.Verified,
-                shipmentPurchased = false,
+                readOnly = false,
                 onPeekHeightChanged = {}
             )
         }
@@ -713,7 +713,7 @@ private fun ShipmentDetailsCollapsedPreview() {
                 onEditOriginAddress = {},
                 onOriginAddressSelected = {},
                 destinationStatus = AddressStatus.Verified,
-                shipmentPurchased = false,
+                readOnly = false,
                 onPeekHeightChanged = {},
             )
         }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShippableItemsMapper.kt

@@ -12,6 +12,7 @@ import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreat
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShipmentUIModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippableItemModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippableItemModel.Companion.SINGLE_QUANTITY
+import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelStatus
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.WooShippingLabelPaperSize
 import com.woocommerce.android.ui.orders.wooshippinglabels.rates.ui.ShippingRateOption
@@ -61,20 +62,14 @@ fun List<ShippableItemModel>.toUIModel(
         shippableItems = shippableItemsUI,
         formattedTotalWeight = formattedTotalWeight,
         formattedTotalPrice = formattedTotalPrice,
-        purchased = shipmentUIModel.purchased,
         packageSelectionState = packageSelectionState,
         customsState = customsState,
         hazmatState = hazmatCategory?.let { WooShippingLabelCreationViewModel.HazmatState.Declared(it) }
             ?: WooShippingLabelCreationViewModel.HazmatState.NoSelection,
         shippingRatesState = shippingRates,
         shipmentCostUI = shipmentCostUI,
-        purchaseState = shipmentUIModel.purchaseState,
-        status = shipmentUIModel.label?.status ?: ShippingLabelStatus.UNKNOWN,
-        shipmentPrintLabelUI = ShipmentPrintLabelUI(
-            availablePrintSizes = getPaperSizes(shipmentUIModel.label?.originAddress?.country?.code),
-            isRefundAvailable = shipmentUIModel.label?.isRefundAvailable == true,
-            isCustomsFormAvailable = shipmentUIModel.label?.commercialInvoiceUrl.isNotNullOrEmpty()
-        ),
+        isPurchaseAPILoading = shipmentUIModel.isPurchaseAPILoading,
+        labelPurchaseStatus = shipmentUIModel.label?.toPurchaseStatus() ?: LabelPurchaseStatus.Idle
     )
 }
 
@@ -158,7 +153,7 @@ private fun getShipmentCostUI(
     currencyFormatter: (BigDecimal) -> String
 ): ShipmentCostUI? {
     return when {
-        shipmentUIModel.purchased -> {
+        shipmentUIModel.isPurchasedOrInProgress -> {
             requireNotNull(shipmentUIModel.label)
             ShipmentCostUI(
                 serviceName = shipmentUIModel.label.serviceName,
@@ -196,9 +191,26 @@ private fun getShipmentCostUI(
     }
 }
 
-private fun getPaperSizes(countryCode: String?): List<WooShippingLabelPaperSize> =
-    if (countryCode.isNullOrEmpty() || countryCode.uppercase() in listOf("US", "CA", "MX", "DO")) {
-        WooShippingLabelPaperSize.entries.minus(WooShippingLabelPaperSize.A4)
-    } else {
-        WooShippingLabelPaperSize.entries
+private fun ShippingLabelModel.toPurchaseStatus(): LabelPurchaseStatus {
+    fun getPaperSizes(countryCode: String?): List<WooShippingLabelPaperSize> =
+        if (countryCode.isNullOrEmpty() || countryCode.uppercase() in listOf("US", "CA", "MX", "DO")) {
+            WooShippingLabelPaperSize.entries.minus(WooShippingLabelPaperSize.A4)
+        } else {
+            WooShippingLabelPaperSize.entries
+        }
+
+    return when {
+        status == ShippingLabelStatus.PURCHASE_IN_PROGRESS -> LabelPurchaseStatus.PurchaseInProgress
+        status == ShippingLabelStatus.PURCHASED && refund == null -> {
+            LabelPurchaseStatus.Purchased(
+                availablePrintSizes = getPaperSizes(originAddress?.country?.code),
+                isRefundAvailable = isRefundAvailable,
+                isCustomsFormAvailable = commercialInvoiceUrl.isNotNullOrEmpty()
+            )
+        }
+        status == ShippingLabelStatus.PURCHASE_ERROR -> LabelPurchaseStatus.Failed(
+            errorMessage = error
+        )
+        else -> LabelPurchaseStatus.Idle
     }
+}

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShippingLabelSampleData.kt

@@ -9,13 +9,11 @@ import com.woocommerce.android.ui.orders.wooshippinglabels.models.DestinationShi
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.OriginShippingAddress
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.PaymentMethodModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.PaymentMethodOptions
-import com.woocommerce.android.ui.orders.wooshippinglabels.models.PurchaseState
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShipmentUIModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippableItemModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.ShippingLabelStatus
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.WooShippingCarrier
-import com.woocommerce.android.ui.orders.wooshippinglabels.models.WooShippingLabelPaperSize
 import com.woocommerce.android.ui.orders.wooshippinglabels.rates.datasource.WooShippingRateModel
 import com.woocommerce.android.ui.orders.wooshippinglabels.rates.ui.CarrierUI
 import com.woocommerce.android.ui.orders.wooshippinglabels.rates.ui.ShippingRateOptionUI
@@ -201,12 +199,6 @@ object ShippingLabelSampleData {
         )
     }
 
-    fun getShipmentPrintLabelUI() = ShipmentPrintLabelUI(
-        availablePrintSizes = listOf(WooShippingLabelPaperSize.LABEL, WooShippingLabelPaperSize.LETTER),
-        isRefundAvailable = true,
-        isCustomsFormAvailable = true
-    )
-
     @Suppress("LongMethod")
     fun getShippingLabelUIModel(purchased: Boolean = false) = ShipmentUIModel(
         localId = "1",
@@ -239,7 +231,6 @@ object ShippingLabelSampleData {
                 currency = "USD"
             )
         ),
-        purchaseState = PurchaseState.NoStarted,
         label = if (purchased) {
             ShippingLabelModel(
                 labelId = 0L,

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt

@@ -73,16 +73,15 @@ import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreat
 import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.PackageSelectionState.DataAvailable
 import com.woocommerce.android.ui.orders.wooshippinglabels.WooShippingLabelCreationViewModel.PackageSelectionState.NotSelected
 import com.woocommerce.android.ui.orders.wooshippinglabels.address.AddressStatus
-import com.woocommerce.android.ui.orders.wooshippinglabels.components.PrintShippingLabelSection
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShipmentTabData
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShipmentsTabRow
+import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShippingLabelPurchaseStatusSection
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShippingLabelsSnackbar
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShippingLabelsSnackbarData
 import com.woocommerce.android.ui.orders.wooshippinglabels.components.ShippingLabelsSnackbarVisuals
 import com.woocommerce.android.ui.orders.wooshippinglabels.hazmat.HazmatCard
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.DestinationShippingAddress
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.OriginShippingAddress
-import com.woocommerce.android.ui.orders.wooshippinglabels.models.PurchaseState
 import com.woocommerce.android.ui.orders.wooshippinglabels.models.WooShippingLabelPaperSize
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.components.ErrorMessageWithButton
 import com.woocommerce.android.ui.orders.wooshippinglabels.packages.ui.PackageData
@@ -226,8 +225,7 @@ fun WooShippingLabelCreationScreen(
         )
 
         val selectedShipment = shipmentUIList[uiState.selectedIndex]
-        val selectedPurchaseState = selectedShipment.purchaseState
-        if (selectedPurchaseState is PurchaseState.InProgress) {
+        if (selectedShipment.isPurchaseAPILoading) {
             Box(
                 modifier = Modifier
                     .fillMaxSize()
@@ -289,7 +287,7 @@ private fun LabelCreationScreenWithBottomSheet(
 
     var bottomSheetPeekHeight by remember { mutableStateOf(0.dp) }
 
-    val screenTitle = if (shipmentUIList[uiState.selectedIndex].purchased) {
+    val screenTitle = if (shipmentUIList[uiState.selectedIndex].isPurchased) {
         R.string.shipping_label_print_screen_title
     } else {
         R.string.shipping_label_create_title
@@ -317,7 +315,7 @@ private fun LabelCreationScreenWithBottomSheet(
                 onOriginAddressSelected = onOriginAddressSelected,
                 destinationStatus = destinationStatus,
                 noticeBannerUiState = uiState.noticeBannerUiState,
-                shipmentPurchased = selectedShipment.purchased,
+                readOnly = selectedShipment.isReadOnly,
                 onPeekHeightChanged = { bottomSheetPeekHeight = it },
             )
         },
@@ -367,7 +365,7 @@ private fun LabelCreationScreenWithBottomSheet(
                         Row(modifier = Modifier.fillMaxWidth()) {
                             ShipmentsTabRow(
                                 shipmentTabs = shipmentUIList.mapIndexed { index, shipment ->
-                                    ShipmentTabData(shipmentIndex = index + 1, isPurchased = shipment.purchased)
+                                    ShipmentTabData(shipmentIndex = index + 1, isPurchased = shipment.isPurchased)
                                 },
                                 selectedTabIndex = if (pagerState.currentPage < pagerState.pageCount) {
                                     pagerState.currentPage
@@ -465,23 +463,19 @@ private fun CreateShippingCards(
     Column {
         val isExpanded = remember { mutableStateOf(false) }
 
-        if (shipmentUI.purchased && shipmentUI.shipmentPrintLabelUI != null) {
-            PrintShippingLabelSection(
-                status = shipmentUI.status,
-                isCustomsFormAvailable = shipmentUI.shipmentPrintLabelUI.isCustomsFormAvailable,
-                isRefundAvailable = shipmentUI.shipmentPrintLabelUI.isRefundAvailable,
-                availablePaperSizes = shipmentUI.shipmentPrintLabelUI.availablePrintSizes,
-                selectedLabelPaperSizeOption = uiState.paperSizeOption,
-                onLabelPaperSizeOptionSelected = onLabelPaperSizeOptionSelected,
-                onPrintShippingLabelClicked = onPrintShippingLabelClicked,
-                onTrackShipmentClicked = onTrackShipmentClicked,
-                onSchedulePickUpClicked = onSchedulePickUpClicked,
-                onRefundClicked = onRefundClicked,
-                onPrintCustomsClicked = onPrintCustomsClicked,
-                onLearnMoreClicked = onLearnMoreClicked,
-                modifier = Modifier.padding(horizontal = 16.dp)
-            )
-        }
+        ShippingLabelPurchaseStatusSection(
+            labelPurchaseStatus = shipmentUI.labelPurchaseStatus,
+            selectedLabelPaperSizeOption = uiState.paperSizeOption,
+            onLabelPaperSizeOptionSelected = onLabelPaperSizeOptionSelected,
+            onPrintShippingLabelClicked = onPrintShippingLabelClicked,
+            onTrackShipmentClicked = onTrackShipmentClicked,
+            onSchedulePickUpClicked = onSchedulePickUpClicked,
+            onRefundClicked = onRefundClicked,
+            onPrintCustomsClicked = onPrintCustomsClicked,
+            onLearnMoreClicked = onLearnMoreClicked,
+            modifier = Modifier.padding(horizontal = 16.dp)
+        )
+
         ShippingProductsCard(
             shippableItems = shipmentUI,
             modifier = Modifier
@@ -491,13 +485,13 @@ private fun CreateShippingCards(
             onExpand = { isExpanded.value = it }
         )
         HazmatCard(
-            onClick = if (shipmentUI.purchased) null else onHazmatNoticeClick,
+            onClick = if (shipmentUI.isReadOnly) null else onHazmatNoticeClick,
             selectedCategory = shipmentUI.hazmatState.hazmatSelection,
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(start = 4.dp, end = 8.dp)
         )
-        if (!shipmentUI.purchased) {
+        if (!shipmentUI.isReadOnly) {
             CustomsCard(
                 customsState = shipmentUI.customsState,
                 onEditCustomsClick = onEditCustomsClick,
@@ -838,13 +832,12 @@ private fun WooShippingLabelCreationScreenPreview() {
                     shippableItems = generateItems(6),
                     formattedTotalWeight = "8.5kg",
                     formattedTotalPrice = "$92.78",
-                    purchased = false,
                     packageSelectionState = NotSelected,
                     customsState = Unavailable,
                     hazmatState = Declared(ShippingLabelHazmatCategory.CLASS_1),
                     shippingRatesState = ShippingLabelSampleData.getShippingRatesSection(),
                     shipmentCostUI = ShippingLabelSampleData.getShippingRateSummaryUI(),
-                    shipmentPrintLabelUI = ShippingLabelSampleData.getShipmentPrintLabelUI(),
+                    labelPurchaseStatus = LabelPurchaseStatus.Idle,
                 )
             ),
             shouldShowSplitShipmentButton = true,