[Orders] Add ShippingLineRowView for order shipping lines

WooCommerce/Classes/ViewRelated/Orders/Order Creation/Shipping/ShippingLineRowView.swift

@@ -0,0 +1,91 @@
+import SwiftUI
+import Foundation
+import WooFoundation
+
+struct ShippingLineRowView: View {
+    /// Scale of the view based on accessibility changes
+    @ScaledMetric private var scale: CGFloat = 1.0
+
+    /// Title for the shipping line
+    let shippingTitle: String
+
+    /// Name of the shipping method for the shipping line
+    let shippingMethod: String
+
+    /// Amount for the shipping line
+    let shippingAmount: String
+
+    /// Whether the row can be edited
+    let editable: Bool
+
+    /// Closure to be invoked when the shipping line is edited
+    let onEditShippingLine: () -> Void = {} // TODO-12581: Support editing shipping lines
+
+    var body: some View {
+        HStack(alignment: .top, spacing: Layout.contentSpacing) {
+            VStack(alignment: .leading) {
+                Text(shippingTitle)
+                    .bodyStyle()
+                    .multilineTextAlignment(.leading)
+                // Avoids the shipping line name to be truncated when it's long enough
+                    .fixedSize(horizontal: false, vertical: true)
+
+                Text(shippingMethod)
+                    .subheadlineStyle()
+            }
+
+            Spacer()
+
+            Text(shippingAmount)
+                .bodyStyle()
+
+            Image(systemName: "pencil")
+                .resizable()
+                .frame(width: Layout.editIconImageSize * scale,
+                       height: Layout.editIconImageSize * scale)
+                .foregroundColor(Color(.wooCommercePurple(.shade60)))
+                .accessibilityAddTraits(.isButton)
+                .accessibilityLabel(Localization.editButtonAccessibilityLabel)
+                .renderedIf(editable)
+        }
+        .padding(Layout.contentPadding)
+        .contentShape(Rectangle())
+        .onTapGesture {
+            onEditShippingLine()
+        }
+        .background(
+            RoundedRectangle(cornerRadius: Layout.cornerRadius)
+                .fill(Color(uiColor: .init(light: UIColor.clear,
+                                           dark: UIColor.systemGray5)))
+        )
+        .overlay {
+            RoundedRectangle(cornerRadius: Layout.cornerRadius)
+                .stroke(Color(uiColor: .separator), lineWidth: Layout.borderLineWidth)
+        }
+    }
+}
+
+extension ShippingLineRowView {
+    enum Layout {
+        static let contentSpacing: CGFloat = 16
+        static let contentPadding: CGFloat = 16
+        static let cornerRadius: CGFloat = 8
+        static let borderLineWidth: CGFloat = 0.5
+        static let editIconImageSize: CGFloat = 24
+    }
+
+    enum Localization {
+        static let editButtonAccessibilityLabel = NSLocalizedString(
+            "shippingLine.edit.button.accessibilityLabel",
+            value: "Edit shipping",
+            comment: "Accessibility title for the edit button on a shipping line row.")
+    }
+}
+
+#Preview("Editable") {
+    ShippingLineRowView(shippingTitle: "Package 1", shippingMethod: "Flat Rate", shippingAmount: "$5.00", editable: true)
+}
+
+#Preview("Not editable") {
+    ShippingLineRowView(shippingTitle: "Package 1", shippingMethod: "Flat Rate", shippingAmount: "$5.00", editable: false)
+}

WooCommerce/WooCommerce.xcodeproj/project.pbxproj

@@ -2018,6 +2018,7 @@
 		CE27257F21925AE8002B22EB /* ValueOneTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE27257D21925AE8002B22EB /* ValueOneTableViewCell.swift */; };
 		CE27258021925AE8002B22EB /* ValueOneTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = CE27257E21925AE8002B22EB /* ValueOneTableViewCell.xib */; };
 		CE29A63029F2DACC003D2A00 /* OrderSubscriptionTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE29A62F29F2DACC003D2A00 /* OrderSubscriptionTableViewCell.swift */; };
+		CE29FEED2BFF771F007679C2 /* ShippingLineRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE29FEEC2BFF771F007679C2 /* ShippingLineRowView.swift */; };
 		CE2A9FBF23BFB1BE002BEC1C /* LedgerTableViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE2A9FBD23BFB1BD002BEC1C /* LedgerTableViewCell.swift */; };
 		CE2A9FC023BFB1BE002BEC1C /* LedgerTableViewCell.xib in Resources */ = {isa = PBXBuildFile; fileRef = CE2A9FBE23BFB1BE002BEC1C /* LedgerTableViewCell.xib */; };
 		CE2A9FC623BFFADE002BEC1C /* RefundedProductsViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE2A9FC523BFFADE002BEC1C /* RefundedProductsViewModel.swift */; };
@@ -4801,6 +4802,7 @@
 		CE27257D21925AE8002B22EB /* ValueOneTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ValueOneTableViewCell.swift; sourceTree = "<group>"; };
 		CE27257E21925AE8002B22EB /* ValueOneTableViewCell.xib */ = {isa = PBXFileReference; lastKnownFileType = file.xib; path = ValueOneTableViewCell.xib; sourceTree = "<group>"; };
 		CE29A62F29F2DACC003D2A00 /* OrderSubscriptionTableViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OrderSubscriptionTableViewCell.swift; sourceTree = "<group>"; };
+		CE29FEEC2BFF771F007679C2 /* ShippingLineRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingLineRowView.swift; sourceTree = "<group>"; };
 		CE2A9FBD23BFB1BD002BEC1C /* LedgerTableViewCell.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = LedgerTableViewCell.swift; sourceTree = "<group>"; };
 		CE2A9FBE23BFB1BE002BEC1C /* LedgerTableViewCell.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = LedgerTableViewCell.xib; sourceTree = "<group>"; };
 		CE2A9FC523BFFADE002BEC1C /* RefundedProductsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RefundedProductsViewModel.swift; sourceTree = "<group>"; };
@@ -10539,6 +10541,7 @@
 			children = (
 				20BBD62A2B30608200A903F6 /* AddOrderComponentsSection */,
 				B9F148922AD43E05008FC795 /* CustomAmounts */,
+				CE29FEEB2BFF7706007679C2 /* Shipping */,
 				B935D35A2A9F44A10067B927 /* Taxes */,
 				B958B4D82983E3E00010286B /* DurationRecorder */,
 				B651474327D644DE00C9C4E6 /* CustomerNoteSection */,
@@ -10753,6 +10756,14 @@
 			path = "Subscriptions section";
 			sourceTree = "<group>";
 		};
+		CE29FEEB2BFF7706007679C2 /* Shipping */ = {
+			isa = PBXGroup;
+			children = (
+				CE29FEEC2BFF771F007679C2 /* ShippingLineRowView.swift */,
+			);
+			path = Shipping;
+			sourceTree = "<group>";
+		};
 		CE35F1042343DCAC007B2A6B /* Refunds */ = {
 			isa = PBXGroup;
 			children = (
@@ -14740,6 +14751,7 @@
 				DE2FE597292737630018040A /* JetpackSetupViewModel.swift in Sources */,
 				4572641727F1EB0D004E1F95 /* AddEditCoupon.swift in Sources */,
 				318109E825E5B8D600EE0BE7 /* NumberedListItemTableViewCell.swift in Sources */,
+				CE29FEED2BFF771F007679C2 /* ShippingLineRowView.swift in Sources */,
 				B932847429A8D6E600B01251 /* CardPresentPaymentsOnboardingIPPUsersRefresher.swift in Sources */,
 				AE3AA889290C303B00BE422D /* WebKitViewController.swift in Sources */,
 				4535EE7A281ADD56004212B4 /* CouponCodeInputFormatter.swift in Sources */,