feat(onboarding): frontend for onboarding users

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -3,13 +3,15 @@
 
 import { useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   text?: string | string[];
   frequency?: number;
+  className?: string;
 };
 
-export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
+export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
   const [pos, setPos] = useState(0);
   const isTextArray = Array.isArray(text);
   useEffect(() => {
@@ -23,7 +25,12 @@ export const ContentLoader = ({ text, frequency = 2000 }: Props) => {
   }, []);
 
   return (
-    <div className="container mx-auto flex relative flex-col h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8">
+    <div
+      className={twMerge(
+        "container mx-auto flex relative flex-col h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark] space-y-8",
+        className
+      )}
+    >
       <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
       {text && isTextArray && (
         <AnimatePresence exitBeforeEnter>

frontend/src/components/v2/Switch/Switch.tsx

@@ -3,7 +3,7 @@ import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { twMerge } from "tailwind-merge";
 
 export type SwitchProps = Omit<SwitchPrimitive.SwitchProps, "checked" | "disabled" | "required"> & {
-  children: ReactNode;
+  children?: ReactNode;
   id: string;
   isChecked?: boolean;
   isRequired?: boolean;

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

@@ -1,7 +1,5 @@
 import { useOrganization, useSubscription } from "@app/context";
-import {
-    useGetOrgTrialUrl
-} from "@app/hooks/api";
+import { useGetOrgTrialUrl } from "@app/hooks/api";
 
 import { Button } from "../Button";
 import { Modal, ModalContent } from "../Modal";
@@ -16,38 +14,36 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { mutateAsync, isLoading } = useGetOrgTrialUrl();
-  const link = (subscription && subscription.slug !== null) 
-    ? `/org/${currentOrg?._id}/billing` 
-    : "https://infisical.com/scheduledemo";
-  
+  const link =
+    subscription && subscription.slug !== null
+      ? `/org/${currentOrg?._id}/billing`
+      : "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"
-      >
+      <ModalContent title="Unleash Infisical's Full Power">
         <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.
@@ -59,10 +55,10 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
             onClick={handleUpgradeBtnClick}
             className="mr-4"
           >
-            {(subscription && !subscription.has_used_trial) ? "Start Pro Free Trial" : "Upgrade Plan"}
+            {subscription && !subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
           </Button>
-          <Button 
-            colorSchema="secondary" 
+          <Button
+            colorSchema="secondary"
             variant="plain"
             onClick={() => onOpenChange && onOpenChange(false)}
           >
@@ -71,5 +67,5 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
         </div>
       </ModalContent>
     </Modal>
-  )
-}
+  );
+};