Skip to content

Conversation

@jaclync
Copy link
Contributor

@jaclync jaclync commented Nov 15, 2022

Part of #8108

Description

This PR implemented the WPCOM eCommerce plan screen with a CTA to purchase the plan. The integration with IAP will be in a separate PR, since the testing steps are more complicated. There are two things that I'm clarifying with Ann in the design: HyVloP5FipZzyPVenH2euI-fi-2369%3A102723&t=Y9fAyMRWXAyQSWDn-0

  • The money icon - I suggested a more generic icon
  • The price is longer than in the design ($69.99 instead of $70) - I suggested having the price and duration in two separate lines

In the SwiftUI view, there are too many one-off styles (spacing/color) so I only put some shared styles in the Layout enum. If you know of a better way to organize these elements, please feel free to suggest anything.

Testing instructions

You can just check out the UI in SwiftUI preview in Xcode. To test this in the app, this screen requires a WPCOM plan product which would be easier to test once it's integrated with IAP.

Screenshots

dark light
Simulator Screen Shot - iPhone 14 - 2022-11-15 at 14 22 00 Simulator Screen Shot - iPhone 14 - 2022-11-15 at 14 24 15

  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@jaclync jaclync added the type: enhancement A request for an enhancement. label Nov 15, 2022
@jaclync jaclync added this to the 11.3 milestone Nov 15, 2022
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Nov 15, 2022

You can test the changes from this Pull Request by:
  • Clicking here or scanning the QR code below to access App Center
  • Then installing the build number pr8120-2ddae25 on your iPhone

If you need access to App Center, please ask a maintainer to add you.

@selanthiraiyan selanthiraiyan self-assigned this Nov 15, 2022
Copy link
Contributor

@selanthiraiyan selanthiraiyan left a comment

Choose a reason for hiding this comment

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

LGTM 🚢

Comment on lines 115 to 127
// Plan features.
VStack(alignment: .leading, spacing: 16) {
ForEach(viewModel.features, id: \.title) { feature in
HStack(spacing: 12) {
Image(uiImage: feature.icon)
.renderingMode(.template)
.foregroundColor(Color(.wooCommercePurple(.shade90)))
Text(feature.title)
.foregroundColor(Color(.label))
.bodyStyle()
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: What do you think about breaking the body down into smaller views? For example, this part can be a separate featuresListView View.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sure 👍 updated in 2ddae25

@peril-woocommerce
Copy link

Warnings
⚠️ This PR is assigned to a milestone which is closing in less than 2 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS

@jaclync jaclync enabled auto-merge November 16, 2022 01:10
@jaclync jaclync merged commit 4e85fe2 into trunk Nov 16, 2022
@jaclync jaclync deleted the feat/8108-wpcom-plan-ui branch November 16, 2022 01:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: enhancement A request for an enhancement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants