From 553c986aa863cf15d4951fb9097757efcc2b3a20 Mon Sep 17 00:00:00 2001 From: Tuan Dang Date: Tue, 4 Jul 2023 16:01:20 +0700 Subject: [PATCH 1/3] Update free trial indicator in usage and billing page --- backend/src/ee/services/EELicenseService.ts | 4 ++ backend/src/helpers/organization.ts | 1 + frontend/src/hooks/api/subscriptions/types.ts | 2 + .../AppLayout/components/NavBar/NavBar.tsx | 60 +++++++++++++++---- .../BillingCloudTab/PreviewSection.tsx | 7 +-- 5 files changed, 59 insertions(+), 15 deletions(-) diff --git a/backend/src/ee/services/EELicenseService.ts b/backend/src/ee/services/EELicenseService.ts index 9e3416583..b4bb97753 100644 --- a/backend/src/ee/services/EELicenseService.ts +++ b/backend/src/ee/services/EELicenseService.ts @@ -30,6 +30,8 @@ interface FeatureSet { customRateLimits: boolean; customAlerts: boolean; auditLogs: boolean; + status: 'incomplete' | 'incomplete_expired' | 'trialing' | 'active' | 'past_due' | 'canceled' | 'unpaid' | null; + trial_end: number | null; } /** @@ -60,6 +62,8 @@ class EELicenseService { customRateLimits: true, customAlerts: true, auditLogs: false, + status: null, + trial_end: null } public localFeatureSet: NodeCache; diff --git a/backend/src/helpers/organization.ts b/backend/src/helpers/organization.ts index 2e9189e11..3748f18fe 100644 --- a/backend/src/helpers/organization.ts +++ b/backend/src/helpers/organization.ts @@ -45,6 +45,7 @@ export const createOrganization = async ({ name, customerId }).save(); + } else { organization = await new Organization({ name, diff --git a/frontend/src/hooks/api/subscriptions/types.ts b/frontend/src/hooks/api/subscriptions/types.ts index af1b315d1..ce3725d54 100644 --- a/frontend/src/hooks/api/subscriptions/types.ts +++ b/frontend/src/hooks/api/subscriptions/types.ts @@ -13,4 +13,6 @@ export type SubscriptionPlan = { workspaceLimit: number; workspacesUsed: number; environmentLimit: number; + status: 'incomplete' | 'incomplete_expired' | 'trialing' | 'active' | 'past_due' | 'canceled' | 'unpaid' | null; + trial_end: number | null; }; diff --git a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx index c1d134eae..946bda408 100644 --- a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx +++ b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx @@ -64,7 +64,7 @@ export interface IUser { export const Navbar = () => { const router = useRouter(); const { subscription } = useSubscription(); - + const { currentOrg, orgs } = useOrganization(); const { user } = useUser(); @@ -95,17 +95,47 @@ export const Navbar = () => { } }; + function formatPlanSlug(slug: string) { + return slug + .replace(/(\b[a-z])/g, match => match.toUpperCase()) + .replace(/-/g, " "); + } + + const calculateRemainingDays = (date: number) => { + const now = new Date(); + const endDate = new Date(date * 1000); + + const differenceInTime = endDate.getTime() - now.getTime(); + const differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24)); + + return differenceInDays; + } + + const formatDate = (date: number) => { + const endDate = new Date(date * 1000); + const day: number = endDate.getDate(); + const month: number = endDate.getMonth() + 1; + const year: number = endDate.getFullYear(); + + const formattedDate: string = `${day}/${month}/${year}`; + const remainingDays: number = calculateRemainingDays(date); + + return { + formattedDate, + remainingDays + }; + } + return ( -
-
-
-
- logo -
- - Infisical - +
+ +
+ {subscription && subscription.status === "trialing" && subscription.trial_end && ( +
+

+ {`You are currently trialing the ${formatPlanSlug(subscription.slug)} plan until ${formatDate(subscription.trial_end).formattedDate} when you'll be downgraded to the Starter plan - You still have ${formatDate(subscription.trial_end).remainingDays} day(s) left.`} +

+
+ )}
); }; diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx index 9d7bd0374..418f20b81 100644 --- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx +++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx @@ -4,7 +4,6 @@ import { useCreateCustomerPortalSession, useGetOrgPlanBillingInfo} from "@app/hooks/api"; import { usePopUp } from "@app/hooks/usePopUp"; - import { ManagePlansModal } from "./ManagePlansModal"; export const PreviewSection = () => { @@ -62,8 +61,8 @@ export const PreviewSection = () => {

Current plan

-

- {formatPlanSlug(subscription.slug)} +

+ {`${formatPlanSlug(subscription.slug)} ${subscription.status === "trialing" ? "(Trial)" : ""}`}