Skip to content

feat(payments): Add Upgrade - Purchase Details + Layout#18173

Merged
xlisachan merged 1 commit intomainfrom
FXA-7588
Feb 25, 2025
Merged

feat(payments): Add Upgrade - Purchase Details + Layout#18173
xlisachan merged 1 commit intomainfrom
FXA-7588

Conversation

@xlisachan
Copy link
Copy Markdown
Contributor

@xlisachan xlisachan commented Dec 30, 2024

This pull request

  • Refactors PurchaseDetails component and removes Details component
  • Creates upgrade layout, i.e. app/[locale]/[offeringId]/upgrade/[interval]/[cartId]/layout.tsx and temporary start page
  • Updates SubscriptionTitle and adds it and UpgradePurchaseDetails to upgrade layout

Issue that this pull request solves

Closes: FXA-7588

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

Screenshot 2025-02-18 at 11 01 32 AM

Previous Upgrade page

Screenshot 2025-02-11 at 5 13 54 PM

@xlisachan xlisachan force-pushed the FXA-7588 branch 8 times, most recently from bd90b6e to f24741a Compare January 6, 2025 18:40
@xlisachan xlisachan force-pushed the FXA-7588 branch 22 times, most recently from 66d42cc to f487fae Compare January 10, 2025 17:43
@xlisachan xlisachan force-pushed the FXA-7588 branch 2 times, most recently from 56dc183 to a1ae46d Compare January 21, 2025 17:29
@xlisachan xlisachan force-pushed the FXA-7588 branch 15 times, most recently from f5546e4 to 56c4b76 Compare February 18, 2025 20:19
Copy link
Copy Markdown
Contributor

@StaberindeZA StaberindeZA left a comment

Choose a reason for hiding this comment

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

Still need to test, but wanted to leave some initial feedback comments in the mean time.

const [upcomingInvoice, eligibility] = await Promise.all([
this.invoiceManager.previewUpcoming({
priceId: price.id,
currency,
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.

Isn't currency a required field for SP3? How are none default currency values determined, i.e. EUR etc?

? eligibility.fromOfferingConfigId
: undefined,
fromPrice: 'fromPrice' in eligibility ? eligibility.fromPrice : undefined,
fromPrice: 'fromPrice' in eligibility ? currentPrice : undefined,
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.

nit. why the different names from vs current?

interval: string;
listAmount: number;
}
| undefined;
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.

currentPrice should always be available in an upgrade state, so undefined doesn't seem like a valid type.

Same applies to currentPurchaseDetails

import circledConfirm from '@fxa/shared/assets/images/circled-confirm-clouds.svg';

const getComponentTitle = (cartState: CartState) => {
const getComponentTitle = (cartState: CartState | CartEligibilityStatus) => {
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.

CartState and CartEligibilityStatus should be separate input params

@xlisachan xlisachan force-pushed the FXA-7588 branch 4 times, most recently from 152d736 to bc157b4 Compare February 24, 2025 14:22
Comment on lines +107 to +111
export type UpgradeCartDTO = ResultCart & {
eligibilityStatus: CartEligibilityStatus.UPGRADE;
fromOfferingConfigId: string;
fromPrice: FromPrice;
};
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'd rather us avoid creating fragmented typings around each intermediate state of the cart based on eligibility, and stick to state-based types only.

I worry about situations down the road where we have fragmented types, with each DTO type having slightly differing member properties, and functions that require a specific DTO when you don't have that specific DTO variant.

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.

Thank you for the quick chat. I'm happy to drop this commit, and follow this PR with the implementation we discussed.

@xlisachan xlisachan force-pushed the FXA-7588 branch 2 times, most recently from 7f2c20b to 4990113 Compare February 24, 2025 18:24
upgrade-purchase-details-new-total-label = New total
upgrade-purchase-details-prorated-upgrade = Prorated Upgrade

# $productName (String) - Name of the upgraded product (e.g. Mozilla VPN)
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.

This comment either needs to be a group comment, or repeated for each string. Otherwise this comment will only appear for the first string below (-daily) but none of the others (-weekly etc.).

Also as I look at this again, the context about what (Daily) is referring to might not be clear- could you indicate in a comment what Daily / Weekly/ Monthly / Yearly is referring to?

Copy link
Copy Markdown
Contributor

@StaberindeZA StaberindeZA left a comment

Choose a reason for hiding this comment

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

r+. Thank you for the changes and leading the various discussions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants