Merge pull request #730 from Infisical/main

Catching up the branch

frontend/src/components/login/InitialLoginStep.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -32,7 +32,8 @@ export default function InitialLoginStep({
     const [isLoading, setIsLoading] = useState(false);
     const [loginError, setLoginError] = useState(false);
 
-    const handleLogin = async () => {
+    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
         try {
             if (!email || !password) {
                 return;
@@ -101,7 +102,7 @@ export default function InitialLoginStep({
         setIsLoading(false);
     }
     
-    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
+    return <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
         <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
         {/* <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
             <Button
@@ -146,7 +147,7 @@ export default function InitialLoginStep({
         {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
         <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
             <Button
-                onClick={async () => handleLogin()}
+                type="submit"
                 size="sm"
                 isFullWidth
                 className='h-12'
@@ -183,5 +184,5 @@ export default function InitialLoginStep({
                 <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
             </Link>
         </div>
-    </div>
+    </form>
 }

frontend/src/components/signup/CodeInputStep.tsx

@@ -114,6 +114,7 @@ export default function CodeInputStep({
       <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
         <div className="text-l py-1 text-lg w-full">
           <Button
+            type="submit"
             onClick={incrementStep}
             size="sm"
             isFullWidth

frontend/src/components/signup/EnterEmailStep.tsx

@@ -70,6 +70,7 @@ export default function EnterEmailStep({
         <div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
           <div className="text-l py-1 text-lg w-full">
             <Button
+              type="submit"
               onClick={emailCheck}
               size="sm"
               isFullWidth

frontend/src/components/signup/UserInfoStep.tsx

@@ -248,7 +248,6 @@ export default function UserInfoStep({
             placeholder=""
             onChange={(e) => setAttributionSource(e.target.value)}
             value={attributionSource}
-            isRequired
             className="h-12"
           />
         </div>
@@ -301,6 +300,7 @@ export default function UserInfoStep({
         <div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
           <div className="text-l py-1 text-lg w-full">
             <Button
+              type="submit"
               onClick={signupErrorCheck}
               size="sm"
               isFullWidth

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

@@ -1,9 +1,10 @@
-import Link from "next/link";
-
-import { useSubscription } from "@app/context";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+    useGetOrgTrialUrl
+} from "@app/hooks/api";
 
 import { Button } from "../Button";
-import { Modal, ModalClose, ModalContent } from "../Modal";
+import { Modal, ModalContent } from "../Modal";
 
 type Props = {
   isOpen?: boolean;
@@ -13,32 +14,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>
   )