Skip to content

[Customer Center] Improves the UI of the current subscription#4072

Merged
JayShortway merged 11 commits into
integration/customer_support_workflowfrom
customer-center/ui-current-subscription
Jul 18, 2024
Merged

[Customer Center] Improves the UI of the current subscription#4072
JayShortway merged 11 commits into
integration/customer_support_workflowfrom
customer-center/ui-current-subscription

Conversation

@JayShortway

@JayShortway JayShortway commented Jul 17, 2024

Copy link
Copy Markdown
Member

Summary

This PR improves the presentation of the current subscription.

  • Adds hierarchy to the various texts.
  • Uses padding to indicate which texts belong together and which do not.
  • Adds some descriptive icons.
  • Adds a short explanation as to which subscription we're showing.
  • Describes the date as the "next billing date" (or date of expiry, if applicable).
  • Wraps it in a card.

This PR can be seen as a proposal. Feel free to add any suggestions!

Before

image

After

image

@JayShortway JayShortway requested a review from a team July 17, 2024 11:27
@JayShortway JayShortway self-assigned this Jul 17, 2024

@tonidero tonidero left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks amazing! Just some comments but nothing major

Comment thread RevenueCatUI/CustomerCenter/Data/SubscriptionInformation.swift Outdated
Text("\(subscriptionInformation.title)")
.font(.headline)
Text("\(subscriptionInformation.explanation)")
.frame(maxWidth: 200, alignment: .leading)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hmm is setting a maxWidth necessary? Not sure if it would be better to set a percentage max width or something like that if it's necessary

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Without this maxWidth, this text would cause the outer card to span the entire width of the (phone) screen, which I think doesn't look great.

I'd be okay setting it to a relative size, but I haven't found an easy way to do so. Some suggest wrapping it all in a GeometryReader, or using a custom Layout. Let me know if you know another way!

I did check maxWidth: 200 on an iPhone SE, and that still looks fine.

Comment thread RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift Outdated
Comment thread RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift
Image(systemName: "coloncurrencysign.arrow.circlepath")
.frame(width: 22)
VStack(alignment: .leading) {
Text("Billing cycle")

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I guess we will need to extract all these strings so they are provided by the backend and used here, but that can come in a separate PR.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

As discussed on Slack, this will be done in a separate PR.

Comment thread RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift
Comment thread RevenueCatUI/CustomerCenter/Views/ManageSubscriptionsView.swift Outdated

@tonidero tonidero left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM!

@JayShortway JayShortway merged commit 5030a3c into integration/customer_support_workflow Jul 18, 2024
@JayShortway JayShortway deleted the customer-center/ui-current-subscription branch July 18, 2024 07:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants