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

refactor: plus page to allow gifting another user #4108

Open
wants to merge 43 commits into
base: MI-746-gifting-plus
Choose a base branch
from

Conversation

sshanzel
Copy link
Member

@sshanzel sshanzel commented Jan 24, 2025

Changes

  • Plus page to allow gifting.
  • Extracted some components for reusability.
  • Introduced a Plus page context to avoid props drilling.

Events

Did you introduce any new tracking events?

Experiment

Did you introduce any new experiments?

Manual Testing

Caution

Please make sure existing components are not breaking/affected by this PR

MI-753

Preview domain

https://mi-753.preview.app.daily.dev

Copy link

vercel bot commented Jan 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
daily-webapp ✅ Ready (Inspect) Visit Preview Jan 24, 2025 1:50pm
1 Skipped Deployment
Name Status Preview Updated (UTC)
storybook ⬜️ Ignored (Inspect) Jan 24, 2025 1:50pm

@sshanzel sshanzel changed the title Mi 753 refactor: plus page to allow gifting another user Jan 24, 2025
@@ -38,7 +38,7 @@ export interface PaymentContextData {
paddle?: Paddle | undefined;
productOptions?: ProductOption[];
earlyAdopterPlanId?: string | null;
oneTimePayment?: ProductOption;
giftOneYear?: ProductOption;
Copy link
Member Author

Choose a reason for hiding this comment

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

Renamed for accuracy.

Comment on lines -75 to -109
{productOptions.map((option) => {
const { label, value, price, currencyCode, extraLabel } = option;
const checked = selectedOption === value;
const isEarlyAccess = value === earlyAdopterPlanId;
return (
<RadioItem
key={label}
name={label}
id={`${label}-${value}`}
value={value}
checked={checked}
onChange={() => {
onChange(value);
logSubscriptionEvent({
event_name: LogEvent.SelectBillingCycle,
target_id: label.toLowerCase(),
});
}}
className={{
content: classNames(
'min-h-12 rounded-10 !p-2',
checked
? '-m-px border border-border-subtlest-primary bg-surface-float'
: undefined,
),
}}
>
<div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
<Typography
tag={TypographyTag.Span}
type={TypographyType.Callout}
color={TypographyColor.Primary}
>
{option.label}
</Typography>
Copy link
Member Author

Choose a reason for hiding this comment

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

Looks to be a very big diff, but basically moved this to its own component file.

@@ -0,0 +1,101 @@
import type { ReactElement } from 'react';
Copy link
Member Author

Choose a reason for hiding this comment

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

Same RadioItem from the original Plus page. Just copy-pasted.

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.

1 participant