Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Shipping Labels - Customs Form] UI 2 #14769

Merged
merged 22 commits into from
Jan 7, 2025
Merged

[Shipping Labels - Customs Form] UI 2 #14769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
035df4e
Implement UI for shipping custom items
toupper Dec 24, 2024
271e145
Add bottom button
toupper Dec 26, 2024
76d1170
Add dummy values to the view model
toupper Dec 26, 2024
a3a04bb
Add title to the view model
toupper Dec 26, 2024
99b4f6b
Encapsulate values in enums
toupper Dec 26, 2024
9dca5cd
Update vertical spacing
toupper Dec 26, 2024
1808f80
Add more constants and add TODOs
toupper Dec 27, 2024
0f39599
Merge branch 'trunk' into issue/13784-shipping-labels-customs-form-2
toupper Dec 27, 2024
aa19c81
Remove empty line
toupper Dec 27, 2024
2dbc801
Break long line into smaller ones
toupper Dec 27, 2024
5d523fe
Merge branch 'issue/13784-shipping-labels-customs-form-2' of https://…
toupper Dec 27, 2024
78df820
Adjust layout
toupper Dec 31, 2024
bee9058
Make test style regular
toupper Dec 31, 2024
111bf7b
Adjust layout
toupper Dec 31, 2024
71cd530
Convert image to button as it should be
toupper Dec 31, 2024
6915c9c
Add right value with spaces
toupper Dec 31, 2024
f1f3cc6
Fix typo and spaces
toupper Dec 31, 2024
4ae10d7
Align HStack properly
toupper Dec 31, 2024
2456a91
Add environment weight unit
toupper Dec 31, 2024
1215505
Render the right border color of the product card
toupper Dec 31, 2024
00c7eb6
Move url to trusted url enum
toupper Dec 31, 2024
5d9a810
Merge branch 'trunk' into issue/13784-shipping-labels-customs-form-2
toupper Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions WooCommerce/Classes/System/WooConstants.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ extension WooConstants {

case customFieldsProductLearnMore = "https://woocommerce.com/document/custom-product-fields/"
case customFieldsOrderLearnMore = "https://woocommerce.com/document/managing-orders/view-edit-or-add-an-order/#custom-fields"
case hsTariffURL = "https://woocommerce.com/document/woocommerce-shipping-and-tax/woocommerce-shipping/#section-29"

/// Returns the URL version of the receiver
///
Expand Down
2 changes: 1 addition & 1 deletion .../Create Shipping Label Form/Customs/ItemDetails/ShippingLabelCustomsFormItemDetails.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ private extension ShippingLabelCustomsFormItemDetails {
enum Constants {
static let horizontalSpacing: CGFloat = 16
static let verticalSpacing: CGFloat = 8
static let hsTariffURL: URL? = .init(string: "https://woocommerce.com/document/woocommerce-shipping-and-tax/woocommerce-shipping/#section-29")
static let hsTariffURL = WooConstants.URLs.hsTariffURL.asURL()
}

enum Localization {
Expand Down
152 changes: 100 additions & 52 deletions ...abels/WooShipping Create Shipping Labels/WooShipping Customs/WooShippingCustomsForm.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import SwiftUI
import WooFoundation
import Yosemite

struct WooShippingCustomsForm: View {
@Environment(\.presentationMode) var presentationMode
Expand Down Expand Up @@ -58,72 +59,108 @@ struct WooShippingCustomsForm: View {

var body: some View {
NavigationView {
GeometryReader { geometry in
ScrollViewReader { proxy in
ScrollView {
VStack(alignment: .leading, spacing: Constants.defaultVerticalSpacing) {
HStack {
Text(Localization.contentType)
.font(.subheadline)
Spacer()
}
GeometryReader { geometry in
VStack {
ScrollViewReader { proxy in
ScrollView {
VStack(alignment: .leading, spacing: Constants.defaultVerticalSpacing) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing an issue with too much vertical spacing between the labels and their corresponding dropdown menu or text field in this VStack, compared to the designs:

Design Actual
Screenshot 2024-12-30 at 16 23 46 Screenshot 2024-12-30 at 16 23 35

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's true, I fixed it in 78df820

HStack {
Text(Localization.contentType)
.font(.subheadline)
Spacer()
}

contentTypeSelectionView
contentTypeSelectionView
.padding(.bottom, Constants.defaultVerticalSpacing)

HStack {
Text(Localization.restrictionType)
.font(.subheadline)
Spacer()
}
HStack {
Text(Localization.restrictionType)
.font(.subheadline)
Spacer()
}

restrictionTypeSelectionView
restrictionTypeSelectionView
.padding(.bottom, Constants.defaultVerticalSpacing)

HStack {
Text(Localization.internationalTransactionNumber)
.font(.subheadline)
Spacer()
}
HStack {
Text(Localization.internationalTransactionNumber)
.font(.subheadline)
Spacer()
}

TextField("", text: $viewModel.internationalTransactionNumber)
.padding(Constants.borderPadding)
.roundedBorder(cornerRadius: Constants.borderCornerRadius, lineColor: Color(.separator), lineWidth: Constants.borderWidth)
TextField("", text: $viewModel.internationalTransactionNumber)
.padding(Constants.borderPadding)
.roundedBorder(cornerRadius: Constants.borderCornerRadius, lineColor: Color(.separator), lineWidth: Constants.borderWidth)

Button {
isShowingITNInfoWebView = true
} label: {
HStack(alignment: .top, spacing: Constants.intoButtonHorizontalSpacing) {
Image(systemName: "info.circle")
Text(Localization.infoText)
Button {
isShowingITNInfoWebView = true
} label: {
HStack(alignment: .top, spacing: Constants.intoButtonHorizontalSpacing) {
Image(systemName: "info.circle")
Text(Localization.infoText)
}
.foregroundColor(Color(.wooCommercePurple(.shade60)))
.footnoteStyle()
.padding(.bottom, Constants.bottomButtonPadding)
}
.foregroundColor(Color(.wooCommercePurple(.shade60)))
.footnoteStyle()
}

Toggle(isOn: $viewModel.returnToSenderIfNotDelivered) {
Text(Localization.returnToSenderMessage)
.font(.subheadline)
Toggle(isOn: $viewModel.returnToSenderIfNotDelivered) {
Text(Localization.returnToSenderMessage)
.font(.subheadline)
}
.tint(Color.accentColor)
.padding(.bottom, Constants.returnToSenderRowBottomPadding)

Text(Localization.productDetailsTitle)
.tertiaryTitleStyle()
.padding(.bottom, Constants.defaultVerticalSpacing)

// Dummy data
WooShippingCustomsItem(viewModel: WooShippingCustomsItemViewModel(
title: "Little Nap Brazil 250g",
description: "Coffee Beans",
hsTariffNumber: "HS 14-1",
valuePerUnit: "$20.00",
weightPerUnit: "0.3kg",
originCountry: Country(code: "US", name: "United States", states: []),
allCountries: [])
)
}
.tint(Color.accentColor)
}
.padding()
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button(action: {
presentationMode.wrappedValue.dismiss()
}, label: {
Text(Localization.cancel)
})
.padding()
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button(action: {
presentationMode.wrappedValue.dismiss()
}, label: {
Text(Localization.cancel)
})
}
}
.navigationTitle(Localization.customs)
.navigationBarTitleDisplayMode(.inline)

Spacer()
}
.navigationTitle(Localization.customs)
.navigationBarTitleDisplayMode(.inline)
.navigationViewStyle(.stack)
.safariSheet(isPresented: $isShowingITNInfoWebView, url: viewModel.itnInfoURL)
}

Spacer()

Spacer()
Divider()

Button {
// TODO: Save values
presentationMode.wrappedValue.dismiss()
} label: {
Text(viewModel.informationIsMissing ? Localization.addMissingInformationButtonTitle : Localization.saveCustomsDetailsButtonTitle)
}
.navigationViewStyle(.stack)
.safariSheet(isPresented: $isShowingITNInfoWebView, url: viewModel.itnInfoURL)
.buttonStyle(PrimaryButtonStyle())
.disabled(viewModel.informationIsMissing)
.padding(Constants.bottomButtonPadding)
}
}

}
}
}
Expand Down Expand Up @@ -151,16 +188,27 @@ extension WooShippingCustomsForm {
static let returnToSenderMessage = NSLocalizedString("wooShipping.customs.returnToSenderMessage",
value: "Return to sender if package is not able to be delivered",
comment: "Info label for a toggle to return the package to a sender if necessary toggle")
static let addMissingInformationButtonTitle = NSLocalizedString("wooShipping.customs.addMissingInformationButtonTitle",
value: "Add Missing Information",
comment: "Customs button title when it's disabled and there's still info to add")
static let saveCustomsDetailsButtonTitle = NSLocalizedString("wooShipping.customs.saveCustomsDetails",
value: "Save Customs Details",
comment: "Customs button title when it's enabled and there's no info to add")
static let productDetailsTitle = NSLocalizedString("wooShipping.customs.productDetails",
value: "Product Details",
comment: "Product Details Section title")
}

}

extension WooShippingCustomsForm {
enum Constants {
static let defaultVerticalSpacing: CGFloat = 16.0
static let defaultVerticalSpacing: CGFloat = 8.0
static let borderCornerRadius: CGFloat = 8
static let borderWidth: CGFloat = 1
static let borderPadding: CGFloat = 16
static let intoButtonHorizontalSpacing: CGFloat = 8
static let bottomButtonPadding: CGFloat = 16.0
static let returnToSenderRowBottomPadding: CGFloat = 32.0
}
}
4 changes: 4 additions & 0 deletions ...Shipping Create Shipping Labels/WooShipping Customs/WooShippingCustomsFormViewModel.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ final class WooShippingCustomsFormViewModel: ObservableObject {
@Published var internationalTransactionNumber: String
@Published var returnToSenderIfNotDelivered: Bool

var informationIsMissing: Bool {
false
}

let contentType: WooShippingContentType = .merchandise
let restrictionType: WooShippingRestrictionType = .none

Expand Down
Loading
Loading