Merge pull request #708 from Infisical/free-trial

Initialize users on Infisical Cloud to Pro (Trial) Tier

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;

backend/src/helpers/organization.ts

@@ -45,6 +45,7 @@ export const createOrganization = async ({
       name,
       customerId
     }).save();
+    
   } else {
     organization = await new Organization({
       name,

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;
 };

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -95,9 +95,40 @@ 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 (
-    <div className="z-[70] flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
-      <div className="m-auto mx-4 flex items-center justify-start">
+    <div className="z-[70] border-b border-mineshaft-500 bg-mineshaft-900 text-white">
+      <div className="flex w-full justify-between px-4">
       <div className="flex flex-row items-center">
         <div className="flex justify-center py-4">
           <Image src="/images/logotransparent.png" height={23} width={57} alt="logo" />
@@ -106,7 +137,6 @@ export const Navbar = () => {
           Infisical
         </a>
       </div>
-      </div>
       <div className="relative z-40 mx-2 flex items-center justify-start">
         <a
           href="https://infisical.com/docs/documentation/getting-started/introduction"
@@ -315,5 +345,13 @@ export const Navbar = () => {
         </Menu>
       </div>
       </div>
+      {subscription && subscription.status === "trialing" && subscription.trial_end && (
+        <div className="w-full mx-auto border-t border-mineshaft-500">
+          <p className="text-center py-4 text-sm">
+            {`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.`}
+          </p>
+        </div>
+      )}
+    </div>
   );
 };

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx

@@ -62,8 +62,8 @@ export const PreviewSection = () => {
                 <div className="flex mb-6 max-w-screen-lg">
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
                         <p className="mb-2 text-gray-400">Current plan</p>
-                        <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
-                            {formatPlanSlug(subscription.slug)}
+                        <p className="text-2xl text-mineshaft-50 font-semibold mb-8"> 
+                            {`${formatPlanSlug(subscription.slug)} ${subscription.status === "trialing" ? "(Trial)" : ""}`}
                         </p>
                         <button 
                             type="button"
@@ -80,7 +80,7 @@ export const PreviewSection = () => {
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
                         <p className="mb-2 text-gray-400">Price</p>
                         <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
-                            {`${formatAmount(data.amount)} / ${data.interval}`}
+                            {subscription.status === "trialing" ? "$0.00 / month" : `${formatAmount(data.amount)} / ${data.interval}`}
                         </p>
                     </div>
                     <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">