Update free plan logic

frontend/src/components/v2/UpgradePlanModal/UpgradePlanModal.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link";
-
 import { useSubscription } from "@app/context";
-
-import { Button } from "../Button";
+import { Button } from "@app/components/v2";
 import { Modal, ModalClose, ModalContent } from "../Modal";
+import { useOrganization } from "@app/context";
+import {
+    useGetOrgTrialUrl
+} from "@app/hooks/api";
 
 type Props = {
   isOpen?: boolean;
@@ -13,32 +15,61 @@ type Props = {
 
 export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => {
   const { subscription } = useSubscription();
+  const { currentOrg } = useOrganization();
+  const { mutateAsync, isLoading } = useGetOrgTrialUrl();
   const link = (subscription && subscription.slug !== null) 
     ? `/settings/billing/${localStorage.getItem("projectData.id") as string}` 
     : "https://infisical.com/scheduledemo";
   
+  const handleUpgradeBtnClick = async () => {
+    try {
+      if (!subscription || !currentOrg) return;
+      
+      if (!subscription.has_used_trial) {
+        // direct user to start pro trial
+        
+        const url = await mutateAsync({
+          orgId: currentOrg._id,
+          success_url: window.location.href
+        });
+        
+        window.location.href = url;
+      } else {
+        // direct user to upgrade their plan
+        window.location.href = link;
+      }
+
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
         title="Unleash Infisical's Full Power"
-        footerContent={[
-          <Link
-            href={link}
-            key="upgrade-plan"
-          >
-            <Button className="mr-4 ml-2 mb-2">Upgrade Plan</Button>
-          </Link>,
-          <ModalClose asChild key="upgrade-plan-cancel">
-            <Button colorSchema="secondary" variant="plain">
-              Cancel
-            </Button>
-          </ModalClose>
-        ]}
       >
         <p className="mb-2 text-bunker-300">{text}</p>
         <p className="text-bunker-300">
           Upgrade and get access to this, as well as to other powerful enhancements.
         </p>
+        <div className="mt-8 flex items-center">
+          <Button
+            isLoading={isLoading}
+            colorSchema="primary"
+            onClick={handleUpgradeBtnClick}
+            className="mr-4"
+          >
+            {(subscription && !subscription.has_used_trial) ? "Start Pro Free Trial" : "Upgrade Plan"}
+          </Button>
+          <Button 
+            colorSchema="secondary" 
+            variant="plain"
+            onClick={() => onOpenChange && onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+        </div>
       </ModalContent>
     </Modal>
   )