chore(dashboard): free trial card #6612
Conversation
| @@ -23,16 +23,19 @@ | |||
| "@clerk/clerk-react": "^5.2.5", | |||
| "@hookform/resolvers": "^2.9.1", | |||
| "@novu/react": "^2.3.0", | |||
| "@novu/shared": "^2.1.0", | |||
| "@novu/shared": "workspace:*", | |||
There was a problem hiding this comment.
shared package we would like to take from the workspace
| @@ -0,0 +1,46 @@ | |||
| export const LogoCircle = (props: React.ComponentPropsWithoutRef<'svg'>) => { | |||
There was a problem hiding this comment.
novu logo circle - the svg was compressed
| light: | ||
| 'bg-destructive/10 hover:bg-background hover:border hover:border-destructive text-destructive focus-visible:ring-destructive/10 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:bg-background focus-visible:border focus-visible:border-destructive', |
There was a problem hiding this comment.
the light variant of the button
| const percentage = (value ?? 100) / (max ?? 100); | ||
| const translateX = (percentage - 1) * 100; |
There was a problem hiding this comment.
calculations of the translateX for the progress based on value and max
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground', | ||
| light: 'border border-stroke/20 bg-background shadow-xs', |
There was a problem hiding this comment.
The tooltip implemented only a light version with the LG size, not sure if I have to invest time in all variants?
| <LogoCircle className={`h-3 w-3 ${transition} group-hover:h-4 group-hover:w-4`} /> | ||
| </div> | ||
| <span className="text-foreground text-sm">{pluralizedDays} left on trial</span> | ||
| <TooltipProvider> |
There was a problem hiding this comment.
Does this provider need to be always defined like that? weird
| if (isLoading || !trial.isActive || hasPaymentMethod) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
@ChmaraX, is this logic correct?
There was a problem hiding this comment.
You can remove the hasPaymentMethod - currently its there to support the legacy billing, but when we release new billing (which will next week) we don't use hasPaymentMethod as a check for trial anymore.
FYI: in new billing, you are able to only buy right away, so there is no state where you would be in trial and have payment method saved
| import { get } from './api.client'; | ||
|
|
||
| export async function getBillingSubscription() { | ||
| const { data } = await get<{ data: GetSubscriptionDto }>('/billing/subscription'); |
There was a problem hiding this comment.
Note for a separate PR, we need to add a global error handler for all the data fetching.
There was a problem hiding this comment.
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground', | ||
| light: 'border border-stroke/20 bg-background shadow-xs', |
apps/dashboard/src/components/side-navigation/side-navigation.tsx
Outdated
Show resolved
Hide resolved
| } | ||
| ); | ||
|
|
||
| const daysLeft = useMemo(() => { |
There was a problem hiding this comment.
Nit-picky, we can add this to the API.
There was a problem hiding this comment.
yep, but that will require changes in three apps: api, web, dashboard
There was a problem hiding this comment.
We can add only one new field for the Dashboard.
novu
@novu/client
@novu/framework
@novu/headless
@novu/nest
@novu/node
@novu/js
@novu/notification-center
@novu/providers
@novu/react
@novu/shared
@novu/stateless
commit: |
✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
What changed? Why was the change needed?
The Free Trial Card component that is shown at the bottom of the side navigation.
Screenshots
Screen.Recording.2024-10-03.at.23.46.09.mov
Screen.Recording.2024-10-03.at.23.51.45.mov