From 86263f07228ff8be88862ee673ec348c8bec9f87 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Wed, 14 Aug 2024 12:03:36 +0200
Subject: [PATCH] :technologist: Improve apiOrigin detection

Closes #1696
---
 apps/docs/editor/variables.mdx               | 4 ++--
 apps/viewer/src/components/TypebotPageV3.tsx | 7 ++++++-
 apps/viewer/src/pages/[[...publicId]].tsx    | 3 +++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/docs/editor/variables.mdx b/apps/docs/editor/variables.mdx
index b6346f2e10..e2388427c2 100644
--- a/apps/docs/editor/variables.mdx
+++ b/apps/docs/editor/variables.mdx
@@ -74,8 +74,8 @@ They can be initialized in the URL as [URL parameters](https://www.semrush.com/b
 
 Then the variables will be prefilled as following:
 
-- Email => <test@test.com>
-- First name => John
+- Email => `test@test.com`
+- First name => `John`
 
 Prefilling variables using the embed library is even easier. You need to add an object named `prefilledVariables` that contains a dictionary of your values. For example:
 
diff --git a/apps/viewer/src/components/TypebotPageV3.tsx b/apps/viewer/src/components/TypebotPageV3.tsx
index dc3f98e248..e669490a35 100644
--- a/apps/viewer/src/components/TypebotPageV3.tsx
+++ b/apps/viewer/src/components/TypebotPageV3.tsx
@@ -9,6 +9,7 @@ import { useMemo } from 'react'
 
 export type TypebotV3PageProps = {
   url: string
+  isMatchingViewerUrl?: boolean
   name: string
   publicId: string | null
   font: Font | null
@@ -19,6 +20,7 @@ export type TypebotV3PageProps = {
 
 export const TypebotPageV3 = ({
   font,
+  isMatchingViewerUrl,
   publicId,
   name,
   url,
@@ -41,7 +43,10 @@ export const TypebotPageV3 = ({
     push(asPath.split('?')[0], undefined, { shallow: true })
   }
 
-  const apiOrigin = useMemo(() => new URL(url).origin, [url])
+  const apiOrigin = useMemo(() => {
+    if (isMatchingViewerUrl) return
+    return new URL(url).origin
+  }, [isMatchingViewerUrl, url])
 
   return (
     <div
diff --git a/apps/viewer/src/pages/[[...publicId]].tsx b/apps/viewer/src/pages/[[...publicId]].tsx
index c84cf8282c..70dea6db68 100644
--- a/apps/viewer/src/pages/[[...publicId]].tsx
+++ b/apps/viewer/src/pages/[[...publicId]].tsx
@@ -78,6 +78,7 @@ export const getServerSideProps: GetServerSideProps = async (
       props: {
         publishedTypebot,
         incompatibleBrowser,
+        isMatchingViewerUrl,
         url: `${protocol}://${forwardedHost ?? host}${pathname}`,
       },
     }
@@ -203,6 +204,7 @@ const App = ({
   isIE: boolean
   customHeadCode: string | null
   url: string
+  isMatchingViewerUrl?: boolean
   publishedTypebot:
     | TypebotPageProps['publishedTypebot']
     | Pick<
@@ -238,6 +240,7 @@ const App = ({
   ) : (
     <TypebotPageV3
       url={props.url}
+      isMatchingViewerUrl={props.isMatchingViewerUrl}
       name={publishedTypebot.name}
       publicId={publishedTypebot.publicId}
       isHideQueryParamsEnabled={