diff --git a/apps/web/modules/ui/components/preview-survey/index.tsx b/apps/web/modules/ui/components/preview-survey/index.tsx index 5a537e512c..6eb843de84 100644 --- a/apps/web/modules/ui/components/preview-survey/index.tsx +++ b/apps/web/modules/ui/components/preview-survey/index.tsx @@ -259,6 +259,7 @@ export const PreviewSurvey = ({ setBlockId = f; }} onFinished={onFinished} + placement={placement} isSpamProtectionEnabled={isSpamProtectionEnabled} /> @@ -363,6 +364,7 @@ export const PreviewSurvey = ({ }} onFinished={onFinished} isSpamProtectionEnabled={isSpamProtectionEnabled} + placement={placement} /> ) : ( diff --git a/packages/surveys/src/components/general/survey.tsx b/packages/surveys/src/components/general/survey.tsx index b518cc1555..957c75506c 100644 --- a/packages/surveys/src/components/general/survey.tsx +++ b/packages/surveys/src/components/general/survey.tsx @@ -76,6 +76,7 @@ export function Survey({ isSpamProtectionEnabled, dir = "auto", setDir, + placement, }: SurveyContainerProps) { let apiClient: ApiClient | null = null; @@ -916,6 +917,7 @@ export function Survey({ setBlockId={setBlockId} shouldResetBlockId={shouldResetQuestionId} fullSizeCards={fullSizeCards} + placement={placement} /> ); } diff --git a/packages/surveys/src/components/wrappers/stacked-card.tsx b/packages/surveys/src/components/wrappers/stacked-card.tsx index 7ecee484fd..4df02f4ff8 100644 --- a/packages/surveys/src/components/wrappers/stacked-card.tsx +++ b/packages/surveys/src/components/wrappers/stacked-card.tsx @@ -2,6 +2,7 @@ import { MutableRef } from "preact/hooks"; import { useEffect, useMemo, useState } from "preact/hooks"; import { JSX } from "preact/jsx-runtime"; import React from "react"; +import { type TPlacement } from "@formbricks/types/common"; import { TJsEnvironmentStateSurvey } from "@formbricks/types/js"; import { TCardArrangementOptions } from "@formbricks/types/styling"; @@ -17,6 +18,7 @@ interface StackedCardProps { cardWidth: number; hovered: boolean; cardArrangement: TCardArrangementOptions; + placement: TPlacement; } export const StackedCard = ({ @@ -31,17 +33,24 @@ export const StackedCard = ({ cardWidth, hovered, cardArrangement, + placement, }: StackedCardProps) => { const isHidden = offset < 0; const [delayedOffset, setDelayedOffset] = useState(offset); const [contentOpacity, setContentOpacity] = useState(0); const currentCardHeight = offset === 0 ? "auto" : offset < 0 ? "initial" : cardHeight; - const getBottomStyles = () => { + const getTopBottomStyles = () => { if (survey.type !== "link") - return { - bottom: 0, - }; + if (placement === "bottomLeft" || placement === "bottomRight") { + return { + bottom: 0, + }; + } else if (placement === "topLeft" || placement === "topRight") { + return { + top: 0, + }; + } }; const getDummyCardContent = () => { @@ -111,7 +120,7 @@ export const StackedCard = ({ pointerEvents: offset === 0 ? "auto" : "none", ...borderStyles, ...straightCardArrangementStyles, - ...getBottomStyles(), + ...getTopBottomStyles(), }} className="pointer rounded-custom bg-survey-bg absolute inset-x-0 overflow-hidden">
void; shouldResetBlockId?: boolean; fullSizeCards: boolean; + placement?: TPlacement; } export function StackedCardsContainer({ @@ -30,6 +32,7 @@ export function StackedCardsContainer({ setBlockId, shouldResetBlockId = true, fullSizeCards = false, + placement = "bottomRight", }: Readonly) { const [hovered, setHovered] = useState(false); const highlightBorderColor = survey.styling?.overwriteThemeStyling @@ -179,6 +182,7 @@ export function StackedCardsContainer({ cardWidth={cardWidth} hovered={hovered} cardArrangement={cardArrangement} + placement={placement} /> ); }) diff --git a/packages/surveys/src/index.ts b/packages/surveys/src/index.ts index c765b9be0e..3e5bc0741b 100644 --- a/packages/surveys/src/index.ts +++ b/packages/surveys/src/index.ts @@ -36,18 +36,35 @@ export const renderSurvey = (props: SurveyContainerProps) => { throw new Error(`renderSurvey: Element with id ${containerId} not found.`); } - const { placement, darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props; + // if survey type is link, we don't pass the placement, darkOverlay, clickOutside, onClose + if (props.survey.type === "link") { + const { placement, darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props; - render( - h( - I18nProvider, - { language }, - h(RenderSurvey, { - ...surveyInlineProps, - }) - ), - element - ); + render( + h( + I18nProvider, + { language }, + h(RenderSurvey, { + ...surveyInlineProps, + }) + ), + element + ); + } else { + // For non-link surveys, pass placement through so it can be used in StackedCard + const { darkOverlay, onClose, clickOutside, ...surveyInlineProps } = props; + + render( + h( + I18nProvider, + { language }, + h(RenderSurvey, { + ...surveyInlineProps, + }) + ), + element + ); + } } else { const modalContainer = document.createElement("div"); modalContainer.id = "formbricks-modal-container";