feat: gift user modal #4091
feat: gift user modal #4091
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
| <Typography | ||
| bold | ||
| className="rounded-10 bg-action-upvote-float px-2 py-1" | ||
| type={TypographyType.Caption1} | ||
| color={TypographyColor.StatusSuccess} | ||
| > | ||
| 2 months free | ||
| </Typography> |
There was a problem hiding this comment.
This should come from the data from Paddle no?
There was a problem hiding this comment.
Right. Although the one-time payment details will be adjusted from a different task, I will now make this label be coming from the object by paddle so it won't be forgotten.
Do you know which property this will be contained from Paddle?
There was a problem hiding this comment.
@sshanzel You can find a reference in PlusCard and PlusInfo components (look for "extraLabel"), maybe we could create an utility component for handling this kind of labels (not mandatory) 👀
There was a problem hiding this comment.
Yeah, I think that would be amazing. Let me check if I can easily do that here.
|
Am I able to search for myself? I think that I should not be able to pick me 👀 |
The search mutation was from mentioning a user, and from that mutation, yes, it will filter out the typing user. |
| }); | ||
| const isVisible = !!users?.length && !!query?.length; | ||
| const onKeyDown = (e: React.KeyboardEvent) => { | ||
| const movement = ['ArrowUp', 'ArrowDown', 'Enter']; |
There was a problem hiding this comment.
We could use KeyboardCommand and ArrowKey enums wdyt?
There was a problem hiding this comment.
Oh, right. Forgot they existed. Let me update it!
There was a problem hiding this comment.
Totally forgot about this 🤦
There was a problem hiding this comment.
@ilasw should be available now 🚀
| }; | ||
|
|
||
| interface GiftPlusModalProps extends ModalProps { | ||
| preSelected?: UserShortProfile; |
There was a problem hiding this comment.
no need to capitalize the S
| export function GiftPlusModal(props: ModalProps): ReactElement { | ||
| return ( | ||
| <PaymentContextProvider> | ||
| <GiftPlusModalComponent {...props} />{' '} |
There was a problem hiding this comment.
The space probably not necessary here ? 🤔
There was a problem hiding this comment.
Yep. I think it was linting that did this. I'll remove. Thank you!
| export function GiftPlusModalComponent({ | ||
| preSelected, | ||
| ...props | ||
| }: GiftPlusModalProps): ReactElement { |
There was a problem hiding this comment.
Maybe we could to separate select from general component for:
- keep general modal clean
- reuse select with it's logic in plus page
What do you think?
There was a problem hiding this comment.
Definitely! I think on the Plus page task, we can tackle extracting this so that it would be easier to see who needs what in terms of the places that would render them. Wdyt?
| return ( | ||
| <Modal | ||
| {...props} | ||
| isOpen |
There was a problem hiding this comment.
is this prop needed?
There was a problem hiding this comment.
Ah, should be not since it is always going to be true. Let me clean it up.
| {discountPlan.extraLabel} | ||
| </Typography> | ||
| <PlusPlanExtraLabel | ||
| color={PlusLabelColor.Help} |
There was a problem hiding this comment.
I guess ideally it would come from paddle but it's ok for now.
Changes
Preview:
Note that I just opened it automatically on load just to try.
Screen.Recording.2025-01-22.at.6.02.08.PM.mov
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
Preview domain
https://mi-751.preview.app.daily.dev