Update free plan logic

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

@@ -22,7 +22,10 @@ import {TFunction} from "i18next";
 
 import guidGenerator from "@app/components/utilities/randomId";
 import { useOrganization, useSubscription,useUser } from "@app/context";
-import { useLogoutUser } from "@app/hooks/api";
+import { 
+  useLogoutUser,
+  useGetOrgTrialUrl
+} from "@app/hooks/api";
 
 const supportOptions = (t: TFunction) => [
   [
@@ -67,6 +70,7 @@ export const Navbar = () => {
   const { subscription } = useSubscription();
 
   const { currentOrg, orgs } = useOrganization();
+  const { mutateAsync, isLoading } = useGetOrgTrialUrl();
   const { user } = useUser();
 
   const logout = useLogoutUser();
@@ -346,12 +350,25 @@ 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">
-            {`Currently trialing the ${formatPlanSlug(subscription.slug)} plan until ${formatDate(subscription.trial_end).formattedDate} - ${formatDate(subscription.trial_end).remainingDays} day(s) left. `}
-            <Link href={`/settings/billing/${localStorage.getItem("projectData.id")}`}>Add a card to avoid being downgraded to the Starter plan afterward &rarr;</Link>
-          </p>
+      {subscription && subscription.slug === "starter" && !subscription.has_used_trial && (
+        <div className="w-full mx-auto border-t border-mineshaft-500 text-center">
+          <button 
+            type="button"
+            onClick={async () => {
+              if (!subscription || !currentOrg) return;
+      
+              // direct user to start pro trial
+              const url = await mutateAsync({
+                orgId: currentOrg._id,
+                success_url: window.location.href
+              });
+              
+              window.location.href = url;
+            }}
+            className="text-center py-4 text-sm mx-auto"
+          >
+              You are currently on the <span className="font-semibold">Starter</span> plan. Unlock the full power of Infisical on the <span className="font-semibold">Pro Free Trial &rarr;</span>
+          </button>
         </div>
       )}
     </div>