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.

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

[Woo POS] UI - Cart: Product rows #12749

Merged
merged 7 commits into from
May 20, 2024
Merged

Conversation

iamgabrielma
Copy link
Contributor

@iamgabrielma iamgabrielma commented May 16, 2024

Closes #12724
Closes #12706

Description

This PR updates the design for the product rows within the cart view, so they're closer to the initial wireframe. I've used the figma values of 120 for height, 56 for circled buttons (+, x, .. ), and 20/32 for padding.

Ref: TfaZ4LUkEwEGrxfnEFzvJj-fi-6_1657

Simulator Screen Recording - iPad Pro (12 9-inch) (6th generation) - 2024-05-16 at 10 16 34

Testing instructions

  • In POS mode, observe the changes on:
    • The Cart title aligned and using .title
    • The product rows
    • The default-styled "Pay now" button is now a styled-"Checkout" button

Adding and removing products from the cart should behave normally.

@iamgabrielma iamgabrielma added type: task An internally driven task. feature: POS labels May 16, 2024
@iamgabrielma iamgabrielma added this to the 18.8 milestone May 16, 2024
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented May 16, 2024

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

App NameWooCommerce iOS WooCommerce iOS
Build Numberpr12749-ca571fa
Version18.6
Bundle IDcom.automattic.alpha.woocommerce
Commitca571fa
App Center BuildWooCommerce - Prototype Builds #9096
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

Comment on lines 34 to 45
@ViewBuilder
private func checkoutButton() -> some View {
Button("Checkout") {
viewModel.submitCart()
}
.padding(.all, 20)
.frame(maxWidth: .infinity, idealHeight: 120)
.font(.title)
.foregroundColor(Color.primaryBackground)
.background(Color.white)
.cornerRadius(10)
}
Copy link
Contributor

Choose a reason for hiding this comment

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

I suppose @ViewBuilder is not needed. Since there are not if statements etc.

It might be a personal preference, but I prefer having private vars for creating view components like this, so private var checkoutButton: some View instead of a `function.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I suppose ViewBuilder is not needed.

You're right! Removed on 8f221c4

It might be a personal preference, but I prefer having private vars for creating view components like this, so private var checkoutButton: some View instead of a `function.

Sounds good to me! Updated on: 84e7f7f

@@ -20,6 +20,12 @@ extension Color {
return Color(red: 142.0 / 255.0, green: 208.0 / 255.0, blue: 240.0 / 255.0)
}

/// Tertiary POS background color
Copy link
Contributor

Choose a reason for hiding this comment

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

Update the comment ;) I suppose it was a copy paste :D

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oops 😂 Fixed: 84e7f7f

@iamgabrielma
Copy link
Contributor Author

No need to review it for now @bozidarsevo , I'll wait until the framework has been removed to merge back trunk into this branch and fix any conflict that emerges. Most likely tomorrow 🙇

# Conflicts:
#	WooCommerce/Classes/POS/Presentation/ProductCardView.swift
@iamgabrielma
Copy link
Contributor Author

This is ready @bozidarsevo , the merge conflict was very straightforward and the only change was on renaming POSPlusButtonStyle(), so there are no changes from the items from previous review.

It currently targets 18.8, but feel free to update the milestone and merge it into 18.7 if you see this before the code freeze, otherwise we'll merge it next week! 👍

@bozidarsevo
Copy link
Contributor

Not related to this change but PointOfSaleDashboardViewModel keeps getting recreated since PointOfSaleEntryPointView is recreated. You can change it that PointOfSaleEntryPointView` is initialized with the model that is a StateObject or something like that

Simulator Screen Recording - iPad Pro (11-inch) (4th generation) - 2024-05-20 at 10 11 56

@iamgabrielma
Copy link
Contributor Author

Thanks for the review!

Not related to this change but PointOfSaleDashboardViewModel keeps getting recreated since PointOfSaleEntryPointView is recreated. You can change it that PointOfSaleEntryPointView` is initialized with the model that is a StateObject or something like that

Yeah, we saw some problems last week with the views that seem related to this. I'll ping you in the thread, reference: p1715934814114829-slack-C025A8VV728

@iamgabrielma iamgabrielma merged commit 018b3cc into trunk May 20, 2024
22 checks passed
@iamgabrielma iamgabrielma deleted the task/pos-cart-product-rows branch May 20, 2024 09:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: POS type: task An internally driven task.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Woo POS] UI: Dashboard CartProduct rows [Woo POS] UI: Product cards and product rows
3 participants