[PAY-1587] Mobile USDC Purchase Drawer Skeleton #3793
Conversation
| ? PremiumContentType.COLLECTIBLE_GATED | ||
| : PremiumContentType.SPECIAL_ACCESS | ||
|
|
||
| const headerAttributes: Record< |
There was a problem hiding this comment.
had to explicitly type this in order to get colorString as a keyof ThemeColors type. Open to suggestions!
There was a problem hiding this comment.
💯 This is close to a pattern I regularly follow for mapping an enum or limited set of choices to a set of values/variants of a component.
My only suggestion might be that if you want to make sure this always maps every enum value, don't use a Record, but a mapped type :
// defined outside the component
type HeaderAttributesMapping = { [k in PremiumContentType]: {
message: string
icon: ComponentType<SvgProps>
color: string
colorString: keyof ThemeColors
}}
// Used in the assignment
const headerAttributes: HeaderAttributesMapping = ...Doing it that way requires a value for every key in the PremiumContentType enum. So if we change that enum and don't change this definition, we will get a compiler error. It also has the benefit of the compiler knowing that the value of headerAttributes will be defined, since all of the possible keys in this mapping have corresponding values.
|
|
||
| const { premium_conditions: premiumConditions } = track ?? {} | ||
|
|
||
| if (!track || !isPremiumContentUSDCPurchaseGated(premiumConditions)) |
There was a problem hiding this comment.
Copying over convo from previous PR:
@schottra :
I would normally argue that this component should not even be rendered if the conditions here aren't true (prefer that components receive only valid data). But I would understand if that's a difficult thing to check at the layer where we render this component.
@dharit-tan :
yeah agree. i think the difficulty is since this is a drawer, all we pass to the drawer is a trackId and so in this component we don't know whether it's a USDC-gated track or if the track even exists in the cache. I suppose we could pass in the premiumConditions object to the drawer, but that seems to go against the "select everything at the leaf" mental model. Open to ideas here.
There was a problem hiding this comment.
Ah interesting. I guess I'm hoping we don't launch the drawer at all if we don't have the right data available, even if we eventually only pass the trackId to the drawer.
So, in the case where some of these things conditions are for some reason false, we're going to see an empty drawer? Wonder if we should render some kind of error in this case instead of null...
Either way, probably okay to leave for now.
There was a problem hiding this comment.
i hear you. the 1 place we open the drawer, we do guarantee that we have the correct data, so for now we're good.
packages/mobile/src/components/lineup-tile/LineupTileAccessStatus.tsx line 80.
|
Preview this change https://demo.audius.co/rt-usdc-drawer-2 |
|
@dharit-tan it would be great for text to follow same pattern as icon... maybe can create a new prop for that so it doesn't affect the current color prop? Down to chat about best option with ya |
makes sense! will take a look at this. gonna merge this PR for now and follow up with another one. |
|
Preview this change https://demo.audius.co/rt-usdc-drawer-2 |
[5e99303] Add favorite test and fix aria-label (#3817) Raymond Jacobson [ccc32ce] [C-2908 C-2744] fix desktop follow button (#3816) Dylan Jeffers [c0679c3] [PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats (#3815) Randy Schott [089a9e6] Pin stripe package versions (#3813) Reed [a281267] [C-2774] Update upload inputs (#3806) Dylan Jeffers [f504ef9] [C-2901] Fix menu types (#3811) Dylan Jeffers [cb9a385] [C-2905] Update Text types and props to camelCase (#3810) Kyle Shanks [027b3a5] [PAY-1624] Implement Purchase modal (#3808) Randy Schott [deadb5f] [C-2902] Update the upload forms to use the typography component (#3809) Kyle Shanks [039c951] [C-801] Fix oauth nodes (#3807) Raymond Jacobson [c3765c7] Update typography component to use classnames (#3805) Kyle Shanks [cab0a3e] Switch to Stripe package instead of script (#3798) Reed [a84126f] [C-2890] Add first version of a typography component to web (#3796) Kyle Shanks [4addddc] Fix mobile prem-content drawer unlocking margin (#3804) Reed [233b585] [C-2857] Remove get blocknumber (#3802) Dylan Jeffers [d113bdb] Prepare for 1.5.34 full app release (#3801) Dylan Jeffers [2f09db4] [C-2887] Fix collection button widths (#3800) Dylan Jeffers [8158e10] [PAY-1655] Add ColorValue prop to Text component (#3799) Reed [fe4bc6a] Revert cacheActions.add thunk (#3797) Dylan Jeffers [2370bbe] [PAY-1650] Update play/preview buttons on track details to use HarmonyButton (#3795) Randy Schott [3579dc2] [PAY-1651] Implements Harmony Buttons (#3794) Randy Schott [5af77ec] [C-2886] Improve cache performance (#3792) Dylan Jeffers [6fb78f1] [PAY-1587] Mobile USDC Purchase Drawer Skeleton (#3793) Reed [1277a41] [C-2883] Migrate confirmer to common (#3788) Dylan Jeffers [ce2548e] [plat-1111] add usdc purchase seller and buyer notifications (#3770) sabrina-kiam [bc04f52] Fix mobile LockedStatusBadge padding (#3790) Reed [8943078] [C-2680] Attribution Modal (#3778) Andrew Mendelsohn
Description
Re-trying this PR, had to close previous one due to git snafu: #3791
UI for purchasing USDC-gated tracks.
Dragons
How do we feel about exporting the PremiumContentType enum in models?
Also cc @dylanjeffers wondering if there's a smarter way to do the colors in TrackDetailsTile. Icon takes a string, while Text takes a keyof ThemeColors.
How Has This Been Tested?
Local ios stage
How will this change be monitored?
For features that are critical or could fail silently please describe the monitoring/alerting being added.
Feature Flags
Are all new features properly feature flagged? Describe added feature flags.