[Shipping labels] Add bottom sheet UI with shipment details (static d…

…ata) (#14052)

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -1525,6 +1525,10 @@ extension UIImage {
         UIImage(imageLiteralResourceName: "email-outline-icon")
     }
 
+    static var shippingIcon: UIImage {
+        UIImage(imageLiteralResourceName: "icon-shipping")
+    }
+
     static var shippingOutlineIcon: UIImage {
         UIImage(imageLiteralResourceName: "shipping-outline-icon")
     }
@@ -1545,6 +1549,10 @@ extension UIImage {
         UIImage(imageLiteralResourceName: "premium-themes-icon")
     }
 
+    static var productIcon: UIImage {
+        UIImage(imageLiteralResourceName: "icon-product")
+    }
+
     static var siteSecurityIcon: UIImage {
         UIImage(imageLiteralResourceName: "site-security-icon")
     }

WooCommerce/Classes/View Modifiers/View+RoundedBorder.swift

@@ -11,7 +11,7 @@ struct RoundedBorder: ViewModifier {
         content
             .overlay {
                 RoundedRectangle(cornerRadius: cornerRadius)
-                    .stroke(style: StrokeStyle(lineWidth: lineWidth, dash: [dashed ? Layout.dashLength : 1]))
+                    .stroke(style: StrokeStyle(lineWidth: lineWidth, dash: dashed ? [Layout.dashLength] : []))
                     .foregroundStyle(lineColor)
             }
     }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsView.swift

@@ -22,6 +22,19 @@ struct WooShippingCreateLabelsView: View {
 
     @Environment(\.dismiss) private var dismiss
 
+    /// Whether the shipment details bottom sheet is expanded.
+    @State private var isShipmentDetailsExpanded = false
+
+    // TODO: 14044 - Track the paper size selection in the view model
+    // TODO: 13558 - Set the default selection from the account settings
+    @State private var selectedPaperSize: String = "Label (4\"x6\")"
+
+    // TODO: 14044 - Replace this static list with real data from the store
+    private let paperSizes: [String] = [
+        "Letter (8.5\"x11\")",
+        "Label (4\"x6\")"
+    ]
+
     var body: some View {
         NavigationStack {
             ScrollView {
@@ -32,8 +45,131 @@ struct WooShippingCreateLabelsView: View {
 
                     WooShippingPackageAndRatePlaceholder()
                 }
+                .padding()
+            }
+            .safeAreaInset(edge: .bottom) {
+                ExpandableBottomSheet(onChangeOfExpansion: { isExpanded in
+                    isShipmentDetailsExpanded = isExpanded
+                }) {
+                    if isShipmentDetailsExpanded {
+                        VStack(spacing: Layout.bottomSheetSpacing) {
+                            Toggle(Localization.BottomSheet.markComplete, isOn: .constant(false)) // TODO: 14044 - Handle this toggle setting
+                                .font(.subheadline)
+
+                            Menu {
+                                ForEach(paperSizes, id: \.self) { paperSize in
+                                    Button {
+                                        selectedPaperSize = paperSize
+                                    } label: {
+                                        HStack {
+                                            Text(paperSize)
+                                            if selectedPaperSize == paperSize {
+                                                Image(uiImage: .checkmarkStyledImage)
+                                            }
+                                        }
+                                    }
+                                }
+                            } label: {
+                                HStack {
+                                    Text(selectedPaperSize)
+                                        .bodyStyle()
+                                        .frame(maxWidth: .infinity, alignment: .leading)
+                                    Image(systemName: "chevron.up.chevron.down")
+                                        .bold()
+                                }
+                                .padding(insets: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16))
+                            }
+                            .roundedBorder(cornerRadius: Layout.cornerRadius, lineColor: Color(.separator), lineWidth: 1)
+                            .accessibilityLabel(Localization.BottomSheet.paperSize)
+
+                            Button {
+                                // TODO: 13556 - Trigger purchase action
+                            } label: {
+                                Text(Localization.BottomSheet.purchase)
+                            }
+                            .buttonStyle(PrimaryButtonStyle())
+                            .disabled(true) // TODO: 14044 - Enable button when shipping label is ready to purchase
+                        }
+                        .padding(.horizontal, Layout.bottomSheetPadding)
+                    } else {
+                        Text(Localization.BottomSheet.shipmentDetails)
+                            .foregroundStyle(Color(.primary))
+                            .bold()
+                    }
+                } expandableContent: {
+                    VStack(alignment: .leading, spacing: Layout.bottomSheetSpacing) {
+                        Text(Localization.BottomSheet.orderDetails)
+                            .footnoteStyle()
+
+                        Grid(alignment: .leading, verticalSpacing: .zero) {
+                            GridRow(alignment: .top) {
+                                Text(Localization.BottomSheet.shipFrom)
+                                Text("417 MONTGOMERY ST, SAN FRANCISCO") // TODO: 14044 - Show real "ship from" address (store address)
+                                    .lineLimit(1)
+                                    .truncationMode(.tail)
+                            }
+                            .padding()
+                            Divider()
+                            GridRow(alignment: .top) {
+                                Text(Localization.BottomSheet.shipTo)
+                                VStack(alignment: .leading) {
+                                    Text("1 Infinite Loop") // TODO: 14044 - Show real "ship to" address (customer address)
+                                        .bold()
+                                    Text("Cupertino, CA 95014")
+                                    Text("USA")
+                                }
+                            }
+                            .padding()
+                        }
+                        .font(.subheadline)
+                        .roundedBorder(cornerRadius: Layout.cornerRadius, lineColor: Color(.separator), lineWidth: 0.5)
+                        Group {
+                            AdaptiveStack {
+                                Image(uiImage: .productIcon)
+                                    .frame(width: Layout.iconSize)
+                                Text(viewModel.items.itemsCountLabel)
+                                    .bold()
+                                Spacer()
+                                Text("$148.50") // TODO: 14044 - Show real item total
+                            }
+                            AdaptiveStack {
+                                Image(uiImage: .shippingIcon)
+                                    .frame(width: Layout.iconSize)
+                                Text("Flat rate shipping") // TODO: 14044 - Show real shipping name
+                                    .bold()
+                                Spacer()
+                                Text("$25.00") // TODO: 14044 - Show real shipping amount
+                            }
+                        }
+
+                        Divider()
+                            .padding(.trailing, -16)
+                        Text(Localization.BottomSheet.shipmentCosts)
+                            .footnoteStyle()
+                        Group {
+                            AdaptiveStack {
+                                Text(Localization.BottomSheet.subtotal)
+                                Spacer()
+                                Text("$0.00") // TODO: 13555 - Show real subtotal value
+                                    .if(true) { subtotal in // TODO: 14044 - Only show placeholder if subtotal is not available
+                                        subtotal.redacted(reason: .placeholder)
+                                    }
+                            }
+                            AdaptiveStack {
+                                Text(Localization.BottomSheet.total)
+                                    .bold()
+                                Spacer()
+                                Text("$0.00") // TODO: 13555 - Show real total value
+                                    .if(true) { total in // TODO: 14044 - Only show placeholder if total is not available
+                                        total.redacted(reason: .placeholder)
+                                    }
+                            }
+                        }
+                    }
+                    .padding(.bottom, Layout.bottomSheetPadding)
+                    .padding(.horizontal, Layout.bottomSheetPadding)
+                }
             }
-            .padding()
             .navigationTitle(Localization.title)
             .navigationBarTitleDisplayMode(.inline)
             .toolbar {
@@ -50,6 +186,11 @@ struct WooShippingCreateLabelsView: View {
 private extension WooShippingCreateLabelsView {
     enum Layout {
         static let verticalSpacing: CGFloat = 8
+        static let cornerRadius: CGFloat = 8
+        static let iconSize: CGFloat = 32
+        static let chevronSize: CGFloat = 30
+        static let bottomSheetSpacing: CGFloat = 16
+        static let bottomSheetPadding: CGFloat = 16
     }
 
     enum Localization {
@@ -59,5 +200,41 @@ private extension WooShippingCreateLabelsView {
         static let cancel = NSLocalizedString("wooShipping.createLabel.cancelButton",
                                               value: "Cancel",
                                               comment: "Title of the button to dismiss the shipping label creation screen")
+
+        enum BottomSheet {
+            static let shipmentDetails = NSLocalizedString("wooShipping.createLabels.bottomSheet.title",
+                                                           value: "Shipment details",
+                                                           comment: "Label on the bottom sheet that can be expanded to show shipment details"
+                                                           + "on the shipping label creation screen")
+            static let orderDetails = NSLocalizedString("wooShipping.createLabels.bottomSheet.orderDetails",
+                                                        value: "Order details",
+                                                        comment: "Header for order details section on the shipping label creation screen")
+                .localizedUppercase
+            static let shipFrom = NSLocalizedString("wooShipping.createLabels.bottomSheet.shipFrom",
+                                                    value: "Ship from",
+                                                    comment: "Label for address where the shipment is shipped from on the shipping label creation screen")
+            static let shipTo = NSLocalizedString("wooShipping.createLabels.bottomSheet.shipTo",
+                                                    value: "Ship to",
+                                                    comment: "Label for address where the shipment is shipped to on the shipping label creation screen")
+            static let shipmentCosts = NSLocalizedString("wooShipping.createLabels.bottomSheet.shipmentCosts",
+                                                        value: "Shipment costs",
+                                                        comment: "Header for shipment costs section on the shipping label creation screen")
+                .localizedUppercase
+            static let subtotal = NSLocalizedString("wooShipping.createLabels.bottomSheet.subtotal",
+                                                        value: "Subtotal",
+                                                        comment: "Label for row showing the subtotal for shipment costs on the shipping label creation screen")
+            static let total = NSLocalizedString("wooShipping.createLabels.bottomSheet.total",
+                                                        value: "Total",
+                                                        comment: "Label for row showing the total for shipment costs on the shipping label creation screen")
+            static let markComplete = NSLocalizedString("wooShipping.createLabels.bottomSheet.markComplete",
+                                                        value: "Mark this order complete and notify the customer",
+                                                        comment: "Label for the toggle to mark the order as complete on the shipping label creation screen")
+            static let paperSize = NSLocalizedString("wooShipping.createLabels.bottomSheet.paperSize",
+                                                     value: "Choose label paper size",
+                                                     comment: "Label for the menu to select a paper size on the shipping label creation screen")
+            static let purchase = NSLocalizedString("wooShipping.createLabels.bottomSheet.purchase",
+                                                    value: "Purchase Label",
+                                                    comment: "Label for button to purchase the shipping label on the shipping label creation screen")
+        }
     }
 }

WooCommerce/Resources/Images.xcassets/icon-product.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "􀈭.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

WooCommerce/Resources/Images.xcassets/icon-shipping.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "􁁾.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}