📦 Upgrade packages

apps/builder/components/shared/ChangePlanForm/ChangePlanForm.tsx

@@ -1,9 +1,9 @@
 import { Stack, HStack, Text } from '@chakra-ui/react'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useUser } from 'contexts/UserContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Plan } from 'db'
 import { useToast } from '../hooks/useToast'
+import { TextLink } from '../TextLink'
 import { ProPlanContent } from './ProPlanContent'
 import { pay } from './queries/updatePlan'
 import { useCurrentSubscriptionInfo } from './queries/useCurrentSubscriptionInfo'
@@ -89,13 +89,9 @@ export const ChangePlanForm = () => {
       </HStack>
       <Text color="gray.500">
         Need custom limits? Specific features?{' '}
-        <NextChakraLink
-          href={'https://typebot.io/enterprise-lead-form'}
-          isExternal
-          textDecor="underline"
-        >
+        <TextLink href={'https://typebot.io/enterprise-lead-form'} isExternal>
           Let's chat!
-        </NextChakraLink>
+        </TextLink>
       </Text>
     </Stack>
   )

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/GoogleSheetsConnectModal.tsx

@@ -13,9 +13,9 @@ import {
   Flex,
 } from '@chakra-ui/react'
 import { GoogleLogo } from 'assets/logos'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { Info } from 'components/shared/Info'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import Link from 'next/link'
 import React from 'react'
 import { getGoogleSheetsConsentScreenUrl } from 'services/integrations'
 
@@ -53,7 +53,7 @@ export const GoogleSheetConnectModal = ({
           />
           <Flex>
             <Button
-              as={NextChakraLink}
+              as={Link}
               leftIcon={<GoogleLogo />}
               data-testid="google"
               isLoading={['loading', 'authenticated'].includes(status)}

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/PaymentSettings/StripeConfigModal.tsx

@@ -18,12 +18,11 @@ import { CredentialsType, StripeCredentialsData } from 'models'
 import React, { useState } from 'react'
 import { useWorkspace } from 'contexts/WorkspaceContext'
 import { Input } from 'components/shared/Textbox'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { MoreInfoTooltip } from 'components/shared/MoreInfoTooltip'
-import { ExternalLinkIcon } from 'assets/icons'
 import { createCredentials } from 'services/credentials'
 import { omit } from 'utils'
 import { useToast } from 'components/shared/hooks/useToast'
+import { TextLink } from 'components/shared/TextLink'
 
 type Props = {
   isOpen: boolean
@@ -157,13 +156,9 @@ export const StripeConfigModal = ({
 
             <Text>
               (You can find your keys{' '}
-              <NextChakraLink
-                href="https://dashboard.stripe.com/apikeys"
-                isExternal
-                textDecor="underline"
-              >
-                here <ExternalLinkIcon />
-              </NextChakraLink>
+              <TextLink href="https://dashboard.stripe.com/apikeys" isExternal>
+                here
+              </TextLink>
               )
             </Text>
           </Stack>

apps/builder/components/shared/Graph/Nodes/BlockNode/SettingsPopoverContent/bodies/TypebotLinkSettingsForm/TypebotsDropdown.tsx

@@ -1,8 +1,8 @@
 import { HStack, IconButton, Input } from '@chakra-ui/react'
 import { ExternalLinkIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useToast } from 'components/shared/hooks/useToast'
 import { SearchableDropdown } from 'components/shared/SearchableDropdown'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { useTypebots } from 'services/typebots'
@@ -54,7 +54,7 @@ export const TypebotsDropdown = ({
         <IconButton
           aria-label="Navigate to typebot"
           icon={<ExternalLinkIcon />}
-          as={NextChakraLink}
+          as={Link}
           href={`/typebots/${currentTypebot?.id}/edit?parentId=${query.typebotId}`}
         />
       )}

apps/builder/components/shared/TextLink.tsx

@@ -0,0 +1,37 @@
+import Link, { LinkProps } from 'next/link'
+import React from 'react'
+import { chakra, HStack, TextProps } from '@chakra-ui/react'
+import { ExternalLinkIcon } from 'assets/icons'
+
+type TextLinkProps = LinkProps & TextProps & { isExternal?: boolean }
+
+export const TextLink = ({
+  children,
+  href,
+  shallow,
+  replace,
+  scroll,
+  prefetch,
+  isExternal,
+  ...textProps
+}: TextLinkProps) => (
+  <Link
+    href={href}
+    shallow={shallow}
+    replace={replace}
+    scroll={scroll}
+    prefetch={prefetch}
+    target={isExternal ? '_blank' : undefined}
+  >
+    <chakra.span textDecor="underline" display="inline-block" {...textProps}>
+      {isExternal ? (
+        <HStack spacing={1}>
+          <chakra.span>{children}</chakra.span>
+          <ExternalLinkIcon />
+        </HStack>
+      ) : (
+        children
+      )}
+    </chakra.span>
+  </Link>
+)

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -8,7 +8,6 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { BuoyIcon, ChevronLeftIcon, RedoIcon, UndoIcon } from 'assets/icons'
-import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { RightPanel, useEditor } from 'contexts/EditorContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useRouter } from 'next/router'
@@ -20,6 +19,7 @@ import { CollaborationMenuButton } from './CollaborationMenuButton'
 import { EditableTypebotName } from './EditableTypebotName'
 import { getBubbleActions } from 'typebot-js'
 import { isCloudProdInstance } from 'services/utils'
+import Link from 'next/link'
 
 export const headerHeight = 56
 
@@ -71,7 +71,7 @@ export const TypebotHeader = () => {
         right={{ base: 280, xl: 0 }}
       >
         <Button
-          as={NextChakraLink}
+          as={Link}
           href={`/typebots/${typebot?.id}/edit`}
           colorScheme={router.pathname.includes('/edit') ? 'blue' : 'gray'}
           variant={router.pathname.includes('/edit') ? 'outline' : 'ghost'}
@@ -80,7 +80,7 @@ export const TypebotHeader = () => {
           Flow
         </Button>
         <Button
-          as={NextChakraLink}
+          as={Link}
           href={`/typebots/${typebot?.id}/theme`}
           colorScheme={router.pathname.endsWith('theme') ? 'blue' : 'gray'}
           variant={router.pathname.endsWith('theme') ? 'outline' : 'ghost'}
@@ -89,7 +89,7 @@ export const TypebotHeader = () => {
           Theme
         </Button>
         <Button
-          as={NextChakraLink}
+          as={Link}
           href={`/typebots/${typebot?.id}/settings`}
           colorScheme={router.pathname.endsWith('settings') ? 'blue' : 'gray'}
           variant={router.pathname.endsWith('settings') ? 'outline' : 'ghost'}
@@ -98,7 +98,7 @@ export const TypebotHeader = () => {
           Settings
         </Button>
         <Button
-          as={NextChakraLink}
+          as={Link}
           href={`/typebots/${typebot?.id}/share`}
           colorScheme={router.pathname.endsWith('share') ? 'blue' : 'gray'}
           variant={router.pathname.endsWith('share') ? 'outline' : 'ghost'}
@@ -108,7 +108,7 @@ export const TypebotHeader = () => {
         </Button>
         {typebot?.publishedTypebotId && (
           <Button
-            as={NextChakraLink}
+            as={Link}
             href={`/typebots/${typebot?.id}/results`}
             colorScheme={router.pathname.includes('results') ? 'blue' : 'gray'}
             variant={router.pathname.includes('results') ? 'outline' : 'ghost'}
@@ -127,7 +127,7 @@ export const TypebotHeader = () => {
       >
         <HStack alignItems="center" spacing={3}>
           <IconButton
-            as={NextChakraLink}
+            as={Link}
             aria-label="Navigate back"
             icon={<ChevronLeftIcon fontSize={25} />}
             href={