NEOS-1579: add free trial timer to header #2871

evisdrenova · 2024-10-28T05:12:43Z

This feature adds a free trial countdown to the top nav menu to give users an idea of how many days they have left in their trial.

linear · 2024-10-28T05:12:46Z

NEOS-1579 add time trial countdown to UI

vercel · 2024-10-28T05:12:48Z

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
neosync-docs	⬜️ Ignored (Inspect)	Visit Preview		Oct 30, 2024 0:00am

github-actions · 2024-10-28T05:13:06Z

The latest Buf updates on your PR. Results from workflow Buf / buf (pull_request).

Build	Format	Lint	Breaking	Updated (UTC)
`✅ passed`	`✅ passed`	`✅ passed`	`✅ passed`	Oct 30, 2024, 12:00 AM

codecov · 2024-10-28T05:19:06Z

Codecov Report

Attention: Patch coverage is 64.70588% with 6 lines in your changes missing coverage. Please review.

Project coverage is 39.04%. Comparing base (e1465e4) to head (184ac53).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
...ices/mgmt/v1alpha1/user-account-service/billing.go	64.70%	4 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2871      +/-   ##
==========================================
+ Coverage   29.58%   39.04%   +9.45%     
==========================================
  Files         303      303              
  Lines       35407    35434      +27     
==========================================
+ Hits        10476    13836    +3360     
+ Misses      23765    19924    -3841     
- Partials     1166     1674     +508

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

nickzelei

This is pretty cool, left some comments regarding the handling of the logic.

nickzelei · 2024-10-29T00:07:57Z

backend/protos/mgmt/v1alpha1/user_account.proto

@@ -246,6 +246,8 @@ message IsAccountStatusValidResponse {
  optional uint64 allowed_record_count = 5;
  // The current status of the account. Default is valid.
  AccountStatus account_status = 6;
+  // The timestamp of when the account


Suggested change

// The timestamp of when the account

// The timestamp of when the account was created.

nickzelei · 2024-10-29T00:08:20Z

backend/services/mgmt/v1alpha1/user-account-service/billing.go

+	accountId, err := s.verifyUserInAccount(ctx, req.Msg.GetAccountId())
+	if err != nil {
+		return nil, err
+	}


This isn't really necessary here because the GetAccountStatus handles it.

nickzelei · 2024-10-29T00:11:14Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+
+const TRIAL_DURATION_DAYS = 14;
+
+// TODO: created_at is coming back as blank


Is this still valid?

nickzelei · 2024-10-29T00:12:38Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+// TODO: created_at is coming back as blank
+
+function TrialCountdown(props: TrialCountdownProps) {
+  const { createdDate, isAccountStatusValidResp } = props;


As a heads up, we don't currently store our created at with a timestamp, so it comes back on the server as the date in UTC (which is fine because we handle all of the billing in UTC).
but you'll want to make sure all of the date handling here is done in UTC format.

nickzelei · 2024-10-29T00:12:53Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+  isAccountStatusValidResp: IsAccountStatusValidResponse | undefined;
+}
+
+const TRIAL_DURATION_DAYS = 14;


Ideally we could do most or all of this on the server so we don't have this copied in two places.

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

nickzelei · 2024-10-29T00:20:18Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+  const now = Date.now();
+  const trialEndDate = new Date(
+    createdDate + TRIAL_DURATION_DAYS * 24 * 60 * 60 * 1000
+  );
+  const daysRemaining = Math.max(
+    0,
+    Math.ceil((trialEndDate.getTime() - now) / (1000 * 60 * 60 * 24))
+  );


Would be cleaner to use date-fns to do most of this for you so that it properly handles time changes like daylight savings, etc.

An example of something more functional:

import { differenceInDays, addDays, isAfter } from 'date-fns'; interface TrialStatus { isTrialExpired: boolean; isNearingEnd: boolean; daysRemaining: number; trialEndDate: Date; } export function checkTrialStatus(createdAt: Date): TrialStatus { const TRIAL_DURATION_DAYS = 14; const WARNING_THRESHOLD_DAYS = 3; const currentDate = new Date(); const trialEndDate = addDays(createdAt, TRIAL_DURATION_DAYS); const daysRemaining = differenceInDays(trialEndDate, currentDate); return { isTrialExpired: isAfter(currentDate, trialEndDate), isNearingEnd: daysRemaining <= WARNING_THRESHOLD_DAYS && daysRemaining > 0, daysRemaining: Math.max(0, daysRemaining), trialEndDate }; }

And then to use it:

const trialStatus = checkTrialStatus(createdAt); if (trialStatus.isTrialExpired) { console.log('Trial has expired'); } else if (trialStatus.isNearingEnd) { console.log(`Trial ending soon! ${trialStatus.daysRemaining} days remaining`); } else { console.log(`${trialStatus.daysRemaining} days remaining in trial`); }

I don't think this handles the last day (hours remaining) but you kind of get the point here.

nickzelei

Improvements. Still some logical issues with the handling of isExpired vs isAlmostExpired.
Would also be great to see the date-fns used here instead of manually calculating the difference.

nickzelei · 2024-10-29T22:21:32Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+  const daysRemaining = Math.max(
+    0,
+    Math.ceil((trialEndDate - now) / (1000 * 60 * 60 * 24))
+  );
+
+  const isExpired =
+    isAccountStatusValidResp?.accountStatus ==
+    AccountStatus.ACCOUNT_TRIAL_EXPIRED;
+  const isAlmostExpired = daysRemaining <= 3;


I still think this would be clearer if the date-fns were used here as it's going to handle more edge cases.

const daysRemaining = differenceInDays(trailEndDate, now); const isAlmostExpired = daysRemaining <= 3

nickzelei · 2024-10-29T22:22:03Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+
+interface TrialCountdownProps {
+  trialEndDate: number;
+  isAccountStatusValidResp: IsAccountStatusValidResponse | undefined;


might be worth simplifying these props to just pass in an isExpired and do the calculation outside of this function. make it less smart.

nickzelei · 2024-10-29T22:24:18Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+    AccountStatus.ACCOUNT_TRIAL_EXPIRED;
+  const isAlmostExpired = daysRemaining <= 3;
+
+  if (isExpired)


based on this logic it doesn't look like the isAlmostExpired will ever actually be used.
If isExpired is true, then isAlmostExpired will always be true..

whoops meant to clean that up, that was leftover code

nickzelei

LGTM, minor thing regarding the math.max

nickzelei · 2024-10-29T23:58:22Z

frontend/apps/web/components/site-header/AccountStatusHandler.tsx

+    data?.trialExpiresAt?.toDate() ?? Date.now()
+  ).getTime();
+
+  const daysRemaining = differenceInDays(Math.max(trialEndDate), Date.now());


Suggested change

const daysRemaining = differenceInDays(Math.max(trialEndDate), Date.now());

const daysRemaining = Math.max(0, differenceInDays(trialEndDate, Date.now()));

add free trial timer to header

26ab9a5

evisdrenova added the enhancement New feature or request label Oct 28, 2024

vercel bot deployed to Preview October 28, 2024 05:13 View deployment

evisdrenova added 3 commits October 28, 2024 08:05

clean up

250206b

prettier

fd2cacb

clean up

2620a7f

evisdrenova requested a review from nickzelei October 28, 2024 15:52

nickzelei requested changes Oct 29, 2024

View reviewed changes

refactor and updates

4a0c35a

vercel bot deployed to Preview October 29, 2024 19:37 View deployment

evisdrenova requested a review from nickzelei October 29, 2024 19:42

nickzelei requested changes Oct 29, 2024

View reviewed changes

updates and refactor

9584526

evisdrenova requested a review from nickzelei October 29, 2024 22:37

nickzelei approved these changes Oct 29, 2024

View reviewed changes

updates

184ac53

evisdrenova merged commit 40640d8 into main Oct 30, 2024
19 checks passed

evisdrenova deleted the showFreeTrialRemainingTimeInHeader branch October 30, 2024 04:16

BrewTestBot mentioned this pull request Nov 1, 2024

neosync 0.4.84 Homebrew/homebrew-core#196328

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NEOS-1579: add free trial timer to header #2871

NEOS-1579: add free trial timer to header #2871

evisdrenova commented Oct 28, 2024 •

edited

Loading

linear bot commented Oct 28, 2024

vercel bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading

nickzelei left a comment

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

evisdrenova Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei left a comment

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

nickzelei Oct 29, 2024

evisdrenova Oct 29, 2024

nickzelei left a comment

nickzelei Oct 29, 2024

	// The timestamp of when the account
	// The timestamp of when the account was created.


		const TRIAL_DURATION_DAYS = 14;

		// TODO: created_at is coming back as blank

	const daysRemaining = differenceInDays(Math.max(trialEndDate), Date.now());
	const daysRemaining = Math.max(0, differenceInDays(trialEndDate, Date.now()));

NEOS-1579: add free trial timer to header #2871

NEOS-1579: add free trial timer to header #2871

Conversation

evisdrenova commented Oct 28, 2024 • edited Loading

linear bot commented Oct 28, 2024

vercel bot commented Oct 28, 2024 • edited Loading

github-actions bot commented Oct 28, 2024 • edited Loading

codecov bot commented Oct 28, 2024 • edited Loading

Codecov Report

nickzelei left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickzelei left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickzelei left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

evisdrenova commented Oct 28, 2024 •

edited

Loading

vercel bot commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024 •

edited

Loading

codecov bot commented Oct 28, 2024 •

edited

Loading