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

Jump to bottom

[Woo POS] [Variable Products] Add variation to POSItem enum with variation card UI #14782

Merged
merged 2 commits into from
Jan 3, 2025
Merged

[Woo POS] [Variable Products] Add variation to POSItem enum with variation card UI #14782

merged 2 commits into from
Jan 3, 2025

Conversation

jaclync
Copy link
Contributor

@jaclync jaclync commented Jan 2, 2025 •
edited by staskus
Loading

Closes: #14701

Description

This pull request introduces a new POS item type to support variations in POS. The key changes include the addition of a new VariationCardView SwiftUI view that displays UI for a new POSVariation struct. The variation view will be shown in a future PR.

Product Variations

  • WooCommerce/Classes/POS/Presentation/ItemListView.swift: Added a new case for handling product variations in the ItemListView with a corresponding button and temporary print statement. The action will be replaced with posModel.addToCart(variation) in a future PR.
  • WooCommerce/Classes/POS/Presentation/VariationCardView.swift: Introduced a new VariationCardView component to display product variations. This view includes an image, name, and price of the variation.
  • Yosemite/Yosemite/PointOfSale/POSVariation.swift: Added a new POSVariation struct to represent product variations with properties for id, name, formattedPrice, and an optional productImageSource.

Enum Update

  • Yosemite/Yosemite/PointOfSale/PointOfSaleItemServiceProtocol.swift: Updated the POSItem enum to include a new case for variation, along with the corresponding id property implementation.

Steps to reproduce

Please test the new variation UI in SwiftUI previews, with different orientations, color schemes, and font sizes.

Testing information

I tested that POS functionality is not affected, no variations should be shown in the item selector.

Screenshots

Light/dark modes:

Screenshot 2025-01-02 at 2 38 34 PM

Different font sizes:

🗒️ The text font size doesn't seem to scale with dynamic type, probably because it's using a custom font.

Screenshot 2025-01-02 at 2 38 01 PM
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

@jaclync jaclync added the type: task An internally driven task. label Jan 2, 2025
@jaclync jaclync added this to the 21.4 milestone Jan 2, 2025
@wpmobilebot
Copy link
Collaborator

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 Numberpr14782-a972ca2
Version21.3
Bundle IDcom.automattic.alpha.woocommerce
Commita972ca2
App Center BuildWooCommerce - Prototype Builds #12324
 Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@jaclync jaclync marked this pull request as ready for review January 2, 2025 07:23
@jaclync jaclync requested a review from staskus January 2, 2025 07:26
staskus
staskus approved these changes Jan 2, 2025
View reviewed changes
Copy link
Collaborator

@staskus staskus left a comment

Choose a reason for hiding this comment

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

Thanks, looks good 👍

The text font size doesn't seem to scale with dynamic type, probably because it's using a custom font.

Yes... I see that it doesn't work in the previews. Although it's likely due to the custom fonts I would still have expected the previews to adapt.

WooCommerce/Classes/POS/Presentation/VariationCardView.swift
let variation = POSVariation(id: .init(),
name: "500ml, double shot",
formattedPrice: "$5.00",
productImageSource: "https://pd.w.org/2024/12/986762d0d4d4cf17.82435881-scaled.jpeg")
Copy link
Collaborator

Choose a reason for hiding this comment

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

Images with URLs are not loading for me in the preview, do you set anything specific in the preview to make it work?

We could consider development assets for previews.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

At first, the image didn't load, but then it loaded (as in the screenshot) in Xcode 16.2.

Good idea to try the development assets for previews, I added an issue to the backlog #14785.

@jaclync jaclync mentioned this pull request Jan 3, 2025
Open
@jaclync jaclync merged commit fabc6e0 into trunk Jan 3, 2025
17 of 19 checks passed
@jaclync jaclync deleted the feat/14701-variation-item-ui branch January 3, 2025 01:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@staskus staskus staskus approved these changes

Assignees
No one assigned
Labels
type: task An internally driven task.
Projects
None yet
Milestone
21.4
Development

Successfully merging this pull request may close these issues.

[Woo POS] [Variable Products] Add Variations to the POSItem enum, and make UI
3 participants
@jaclync @wpmobilebot @staskus