🧑‍💻 Improve env variables type safety and management (#718)

Closes #679

apps/builder/src/features/publish/components/SharePage.tsx

@@ -13,7 +13,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { Plan } from '@typebot.io/prisma'
-import { isDefined, getViewerUrl, isNotDefined, env } from '@typebot.io/lib'
+import { isDefined, isNotDefined } from '@typebot.io/lib'
 import { isPublicDomainAvailableQuery } from '../queries/isPublicDomainAvailableQuery'
 import { EditableUrl } from './EditableUrl'
 import { integrationsList } from './embeds/EmbedButton'
@@ -25,6 +25,7 @@ import { CustomDomainsDropdown } from '@/features/customDomains/components/Custo
 import { TypebotHeader } from '@/features/editor/components/TypebotHeader'
 import { parseDefaultPublicId } from '../helpers/parseDefaultPublicId'
 import { useI18n } from '@/locales'
+import { env } from '@typebot.io/env'
 
 export const SharePage = () => {
   const t = useI18n()
@@ -97,7 +98,7 @@ export const SharePage = () => {
             </Heading>
             {typebot && (
               <EditableUrl
-                hostname={getViewerUrl() ?? 'https://typebot.io'}
+                hostname={env.NEXT_PUBLIC_VIEWER_URL[0]}
                 pathname={publicId}
                 isValid={checkIfPublicIdIsValid}
                 onPathnameChange={handlePublicIdChange}
@@ -120,7 +121,7 @@ export const SharePage = () => {
               </HStack>
             )}
             {isNotDefined(typebot?.customDomain) &&
-            env('VERCEL_VIEWER_PROJECT_NAME') ? (
+            env.NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME ? (
               <>
                 {isProPlan(workspace) ? (
                   <CustomDomainsDropdown

apps/builder/src/features/publish/components/embeds/modals/FlutterFlowModal.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   Stack,
 } from '@chakra-ui/react'
-import { env, getViewerUrl } from '@typebot.io/lib'
+import { getViewerUrl } from '@typebot.io/lib'
 import { ModalProps } from '../EmbedButton'
 
 export const FlutterFlowModal = ({
@@ -51,16 +51,12 @@ export const FlutterFlowModal = ({
                 <InputGroup size="sm">
                   <Input
                     type={'text'}
-                    defaultValue={`${
-                      env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                    }/${publicId}`}
+                    defaultValue={`${getViewerUrl()}/${publicId}`}
                   />
                   <InputRightElement width="60px">
                     <CopyButton
                       size="sm"
-                      textToCopy={`${
-                        env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                      }/${publicId}`}
+                      textToCopy={`${getViewerUrl()}/${publicId}`}
                     />
                   </InputRightElement>
                 </InputGroup>

apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx

@@ -1,6 +1,6 @@
 import { FlexProps } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
-import { env, getViewerUrl } from '@typebot.io/lib'
+import { getViewerUrl } from '@typebot.io/lib'
 import { CodeEditor } from '@/components/inputs/CodeEditor'
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
@@ -13,9 +13,7 @@ type Props = {
 
 export const IframeSnippet = ({ widthLabel, heightLabel }: Props) => {
   const { typebot } = useTypebot()
-  const src = `${env('VIEWER_INTERNAL_URL') ?? getViewerUrl()}/${
-    typebot?.publicId
-  }`
+  const src = `${getViewerUrl()}/${typebot?.publicId}`
   const code = prettier.format(
     `<iframe src="${src}" style="border: none; width='${widthLabel}'; height='${heightLabel}'"></iframe>`,
     { parser: 'html', plugins: [parserHtml] }

apps/builder/src/features/publish/components/embeds/modals/NotionModal.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   Stack,
 } from '@chakra-ui/react'
-import { env, getViewerUrl } from '@typebot.io/lib'
+import { getViewerUrl } from '@typebot.io/lib'
 import { ModalProps } from '../EmbedButton'
 
 export const NotionModal = ({
@@ -49,16 +49,12 @@ export const NotionModal = ({
                 <InputGroup size="sm">
                   <Input
                     type={'text'}
-                    defaultValue={`${
-                      env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                    }/${publicId}`}
+                    defaultValue={`${getViewerUrl()}/${publicId}`}
                   />
                   <InputRightElement width="60px">
                     <CopyButton
                       size="sm"
-                      textToCopy={`${
-                        env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
-                      }/${publicId}`}
+                      textToCopy={`${getViewerUrl()}/${publicId}`}
                     />
                   </InputRightElement>
                 </InputGroup>

apps/builder/src/features/publish/components/embeds/modals/WordpressModal/instructions/WordpressStandardInstructions.tsx

@@ -12,7 +12,7 @@ import {
 import { useState } from 'react'
 import { StandardSettings } from '../../../settings/StandardSettings'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
-import { env, getViewerUrl } from '@typebot.io/lib'
+import { getViewerUrl } from '@typebot.io/lib'
 
 type Props = {
   publicId: string
@@ -76,9 +76,7 @@ const parseWordpressShortcode = ({
   publicId: string
 }) => {
   return `[typebot typebot="${publicId}"${
-    isCloudProdInstance
-      ? ''
-      : ` host="${env('VIEWER_INTERNAL_URL') ?? getViewerUrl()}"`
+    isCloudProdInstance ? '' : ` host="${getViewerUrl()}"`
   }${width ? ` width="${width}"` : ''}${height ? ` height="${height}"` : ''}]
 `
 }

apps/builder/src/features/publish/components/embeds/snippetParsers/shared.ts

@@ -1,7 +1,7 @@
 import { BotProps } from '@typebot.io/nextjs'
 import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
-import { env, getViewerUrl, isDefined } from '@typebot.io/lib'
+import { getViewerUrl, isDefined } from '@typebot.io/lib'
 import { Typebot } from '@typebot.io/schemas'
 import { isCloudProdInstance } from '@/helpers/isCloudProdInstance'
 import packageJson from '../../../../../../../../packages/embeds/js/package.json'
@@ -58,7 +58,7 @@ export const parseApiHost = (
   customDomain: Typebot['customDomain'] | undefined
 ) => {
   if (customDomain) return new URL(`https://${customDomain}`).origin
-  return env('VIEWER_INTERNAL_URL') ?? getViewerUrl()
+  return getViewerUrl()
 }
 
 export const parseApiHostValue = (