fix: multi-lang toggle covering arabic text (backport #7657) (#7660)

Co-authored-by: Johannes <johannes@formbricks.com>

apps/web/lib/i18n/utils.ts

@@ -84,7 +84,9 @@ export const extractLanguageIds = (languages: TLanguage[]): string[] => {
 
 export const getLanguageCode = (surveyLanguages: TSurveyLanguage[], languageCode: string | null) => {
   if (!surveyLanguages?.length || !languageCode) return "default";
-  const language = surveyLanguages.find((surveyLanguage) => surveyLanguage.language.code === languageCode);
+  const language = surveyLanguages.find(
+    (surveyLanguage) => surveyLanguage.language.code.toLowerCase() === languageCode.toLowerCase()
+  );
   return language?.default ? "default" : language?.language.code || "default";
 };
 

apps/web/modules/ee/billing/actions.test.ts

@@ -106,10 +106,7 @@ describe("billing actions", () => {
     });
     expect(mocks.getOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.ensureStripeCustomerForOrganization).toHaveBeenCalledWith("org_1");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith(
-      "org_1",
-      "start-hobby"
-    );
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -128,10 +125,7 @@ describe("billing actions", () => {
     } as any);
 
     expect(mocks.ensureStripeCustomerForOrganization).not.toHaveBeenCalled();
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith(
-      "org_1",
-      "start-hobby"
-    );
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -145,7 +139,7 @@ describe("billing actions", () => {
     expect(mocks.getOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.ensureStripeCustomerForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.createProTrialSubscription).toHaveBeenCalledWith("org_1", "cus_1");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1", "pro-trial");
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });
@@ -165,7 +159,7 @@ describe("billing actions", () => {
 
     expect(mocks.ensureStripeCustomerForOrganization).not.toHaveBeenCalled();
     expect(mocks.createProTrialSubscription).toHaveBeenCalledWith("org_1", "cus_existing");
-    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1", "pro-trial");
+    expect(mocks.reconcileCloudStripeSubscriptionsForOrganization).toHaveBeenCalledWith("org_1");
     expect(mocks.syncOrganizationBillingFromStripe).toHaveBeenCalledWith("org_1");
     expect(result).toEqual({ success: true });
   });

apps/web/modules/ee/billing/actions.ts

@@ -216,7 +216,7 @@ export const startHobbyAction = authenticatedActionClient
       throw new ResourceNotFoundError("OrganizationBilling", parsedInput.organizationId);
     }
 
-    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId, "start-hobby");
+    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId);
     await syncOrganizationBillingFromStripe(parsedInput.organizationId);
     return { success: true };
   });
@@ -248,7 +248,7 @@ export const startProTrialAction = authenticatedActionClient
     }
 
     await createProTrialSubscription(parsedInput.organizationId, customerId);
-    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId, "pro-trial");
+    await reconcileCloudStripeSubscriptionsForOrganization(parsedInput.organizationId);
     await syncOrganizationBillingFromStripe(parsedInput.organizationId);
     return { success: true };
   });

apps/web/modules/ee/billing/api/lib/stripe-webhook.ts

@@ -150,7 +150,7 @@ export const webhookHandler = async (requestBody: string, stripeSignature: strin
       await handleSetupCheckoutCompleted(event.data.object, stripe);
     }
 
-    await reconcileCloudStripeSubscriptionsForOrganization(organizationId, event.id);
+    await reconcileCloudStripeSubscriptionsForOrganization(organizationId);
     await syncOrganizationBillingFromStripe(organizationId, {
       id: event.id,
       created: event.created,

apps/web/modules/ee/billing/lib/organization-billing.test.ts

@@ -1905,7 +1905,7 @@ describe("organization-billing", () => {
         items: [{ price: "price_hobby_monthly", quantity: 1 }],
         metadata: { organizationId: "org_1" },
       },
-      { idempotencyKey: "ensure-hobby-subscription-org_1-bootstrap" }
+      { idempotencyKey: "ensure-hobby-subscription-org_1-0" }
     );
     expect(mocks.prismaOrganizationBillingUpdate).toHaveBeenCalledWith({
       where: { organizationId: "org_1" },
@@ -1974,7 +1974,7 @@ describe("organization-billing", () => {
       ],
     });
 
-    await reconcileCloudStripeSubscriptionsForOrganization("org_1", "evt_123");
+    await reconcileCloudStripeSubscriptionsForOrganization("org_1");
 
     expect(mocks.subscriptionsCancel).toHaveBeenCalledWith("sub_hobby", { prorate: false });
     expect(mocks.subscriptionsCreate).not.toHaveBeenCalled();

apps/web/modules/ee/billing/lib/organization-billing.ts

@@ -458,18 +458,21 @@ const resolvePendingChangeEffectiveAt = (
 const ensureHobbySubscription = async (
   organizationId: string,
   customerId: string,
-  idempotencySuffix: string
+  subscriptionCount: number
 ): Promise<void> => {
   if (!stripeClient) return;
   const hobbyItems = await getCatalogItemsForPlan("hobby", "monthly");
 
+  // Include subscriptionCount so the key is stable across concurrent calls (same
+  // count → same key → Stripe deduplicates) but changes after a cancellation
+  // (count increases → new key → allows legitimate re-creation).
   await stripeClient.subscriptions.create(
     {
       customer: customerId,
       items: hobbyItems,
       metadata: { organizationId },
     },
-    { idempotencyKey: `ensure-hobby-subscription-${organizationId}-${idempotencySuffix}` }
+    { idempotencyKey: `ensure-hobby-subscription-${organizationId}-${subscriptionCount}` }
   );
 };
 
@@ -1264,8 +1267,7 @@ export const findOrganizationIdByStripeCustomerId = async (customerId: string):
 };
 
 export const reconcileCloudStripeSubscriptionsForOrganization = async (
-  organizationId: string,
-  idempotencySuffix = "reconcile"
+  organizationId: string
 ): Promise<void> => {
   const client = stripeClient;
   if (!IS_FORMBRICKS_CLOUD || !client) return;
@@ -1313,11 +1315,26 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
     );
 
     await Promise.all(
-      hobbySubscriptions.map(({ subscription }) =>
-        client.subscriptions.cancel(subscription.id, {
-          prorate: false,
-        })
-      )
+      hobbySubscriptions.map(async ({ subscription }) => {
+        try {
+          await client.subscriptions.cancel(subscription.id, {
+            prorate: false,
+          });
+        } catch (err) {
+          if (
+            err instanceof Stripe.errors.StripeInvalidRequestError &&
+            err.statusCode === 404 &&
+            err.code === "resource_missing"
+          ) {
+            logger.warn(
+              { subscriptionId: subscription.id, organizationId },
+              "Subscription already deleted, skipping cancel"
+            );
+            return;
+          }
+          throw err;
+        }
+      })
     );
     return;
   }
@@ -1327,12 +1344,14 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
     // (e.g. webhook + bootstrap) both seeing 0 and creating duplicate hobbies.
     const freshSubscriptions = await client.subscriptions.list({
       customer: customerId,
-      status: "active",
-      limit: 1,
+      status: "all",
+      limit: 20,
     });
 
-    if (freshSubscriptions.data.length === 0) {
-      await ensureHobbySubscription(organizationId, customerId, idempotencySuffix);
+    const freshActive = freshSubscriptions.data.filter((sub) => ACTIVE_SUBSCRIPTION_STATUSES.has(sub.status));
+
+    if (freshActive.length === 0) {
+      await ensureHobbySubscription(organizationId, customerId, freshSubscriptions.data.length);
     }
   }
 };
@@ -1340,6 +1359,6 @@ export const reconcileCloudStripeSubscriptionsForOrganization = async (
 export const ensureCloudStripeSetupForOrganization = async (organizationId: string): Promise<void> => {
   if (!IS_FORMBRICKS_CLOUD || !stripeClient) return;
   await ensureStripeCustomerForOrganization(organizationId);
-  await reconcileCloudStripeSubscriptionsForOrganization(organizationId, "bootstrap");
+  await reconcileCloudStripeSubscriptionsForOrganization(organizationId);
   await syncOrganizationBillingFromStripe(organizationId);
 };

apps/web/modules/survey/editor/components/multiple-choice-element-form.tsx

@@ -346,8 +346,8 @@ export const MultipleChoiceElementForm = ({
         </div>
 
         <div className="mt-2">
-          <div className="mt-2 flex items-center justify-between space-x-2">
-            <div className="flex gap-2">
+          <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+            <div className="flex flex-wrap gap-2">
               {specialChoices.map((specialChoice) => {
                 if (element.choices.some((c) => c.id === specialChoice.id)) return null;
                 return (

apps/web/modules/survey/editor/components/survey-menu-bar.tsx

@@ -72,6 +72,7 @@ export const SurveyMenuBar = ({
   const [lastAutoSaved, setLastAutoSaved] = useState<Date | null>(null);
   const isSuccessfullySavedRef = useRef(false);
   const isAutoSavingRef = useRef(false);
+  const isSurveyPublishingRef = useRef(false);
 
   // Refs for interval-based auto-save (to access current values without re-creating interval)
   const localSurveyRef = useRef(localSurvey);
@@ -269,8 +270,8 @@ export const SurveyMenuBar = ({
       // Skip if tab is not visible (no computation, no API calls for background tabs)
       if (document.hidden) return;
 
-      // Skip if already saving (manual or auto)
-      if (isAutoSavingRef.current || isSurveySavingRef.current) return;
+      // Skip if already saving, publishing, or auto-saving
+      if (isAutoSavingRef.current || isSurveySavingRef.current || isSurveyPublishingRef.current) return;
 
       // Check for changes using refs (avoids re-creating interval on every change)
       const { updatedAt: localUpdatedAt, ...localSurveyRest } = localSurveyRef.current;
@@ -289,10 +290,19 @@ export const SurveyMenuBar = ({
         } as unknown as TSurveyDraft);
 
         if (updatedSurveyResponse?.data) {
+          const savedData = updatedSurveyResponse.data;
+
+          // If the segment changed on the server (e.g., private segment was deleted when
+          // switching from app to link type), update localSurvey to prevent stale segment
+          // references when publishing
+          if (!isEqual(localSurveyRef.current.segment, savedData.segment)) {
+            setLocalSurvey({ ...localSurveyRef.current, segment: savedData.segment });
+          }
+
           // Update surveyRef (not localSurvey state) to prevent re-renders during auto-save.
           // This keeps the UI stable while still tracking that changes have been saved.
           // The comparison uses refs, so this prevents unnecessary re-saves.
-          surveyRef.current = { ...updatedSurveyResponse.data };
+          surveyRef.current = { ...savedData };
           isSuccessfullySavedRef.current = true;
           setLastAutoSaved(new Date());
         }
@@ -417,11 +427,13 @@ export const SurveyMenuBar = ({
   };
 
   const handleSurveyPublish = async () => {
+    isSurveyPublishingRef.current = true;
     setIsSurveyPublishing(true);
 
     const isSurveyValidatedWithZod = validateSurveyWithZod();
 
     if (!isSurveyValidatedWithZod) {
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
       return;
     }
@@ -429,6 +441,7 @@ export const SurveyMenuBar = ({
     try {
       const isSurveyValidResult = isSurveyValid(localSurvey, selectedLanguageCode, t, responseCount);
       if (!isSurveyValidResult) {
+        isSurveyPublishingRef.current = false;
         setIsSurveyPublishing(false);
         return;
       }
@@ -445,10 +458,12 @@ export const SurveyMenuBar = ({
       if (!publishResult?.data) {
         const errorMessage = getFormattedErrorMessage(publishResult);
         toast.error(errorMessage);
+        isSurveyPublishingRef.current = false;
         setIsSurveyPublishing(false);
         return;
       }
 
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
       // Set flag to prevent beforeunload warning during navigation
       isSuccessfullySavedRef.current = true;
@@ -456,6 +471,7 @@ export const SurveyMenuBar = ({
     } catch (error) {
       console.error(error);
       toast.error(t("environments.surveys.edit.error_publishing_survey"));
+      isSurveyPublishingRef.current = false;
       setIsSurveyPublishing(false);
     }
   };

apps/web/modules/survey/link/components/survey-renderer.tsx

@@ -202,7 +202,7 @@ function getLanguageCode(langParam: string | undefined, survey: TSurvey): string
 
   const selectedLanguage = survey.languages.find((surveyLanguage) => {
     return (
-      surveyLanguage.language.code === langParam.toLowerCase() ||
+      surveyLanguage.language.code.toLowerCase() === langParam.toLowerCase() ||
       surveyLanguage.language.alias?.toLowerCase() === langParam.toLowerCase()
     );
   });

apps/web/modules/survey/multi-language-surveys/components/language-indicator.tsx

@@ -48,7 +48,7 @@ export function LanguageIndicator({
       <button
         aria-expanded={showLanguageDropdown}
         aria-haspopup="true"
-        className="relative z-20 flex max-w-[120px] items-center justify-center rounded-md bg-slate-900 p-1 px-2 text-xs text-white hover:bg-slate-700"
+        className="relative z-20 flex max-w-20 items-center justify-center rounded-md bg-slate-900 p-1 px-2 text-xs text-white hover:bg-slate-700"
         onClick={toggleDropdown}
         tabIndex={-1}
         type="button">

packages/surveys/src/components/general/language-switch.tsx

@@ -59,7 +59,7 @@ export function LanguageSwitch({
     handleI18nLanguage(calculatedLanguageCode);
 
     if (setDir) {
-      const calculateDir = isRTLLanguage(survey, calculatedLanguageCode) ? "rtl" : "auto";
+      const calculateDir = isRTLLanguage(survey, calculatedLanguageCode) ? "rtl" : "ltr";
       setDir?.(calculateDir);
     }
 

packages/surveys/src/components/general/render-survey.tsx

@@ -9,12 +9,13 @@ export function RenderSurvey(props: SurveyContainerProps) {
   const onFinishedTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isRTL = isRTLLanguage(props.survey, props.languageCode);
-  const [dir, setDir] = useState<"ltr" | "rtl" | "auto">(isRTL ? "rtl" : "auto");
+  const [dir, setDir] = useState<"ltr" | "rtl" | "auto">(isRTL ? "rtl" : "ltr");
 
   useEffect(() => {
     const isRTL = isRTLLanguage(props.survey, props.languageCode);
-    setDir(isRTL ? "rtl" : "auto");
-  }, [props.languageCode, props.survey]);
+    setDir(isRTL ? "rtl" : "ltr");
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only recalculate direction when languageCode changes, not on survey auto-save
+  }, [props.languageCode]);
 
   const close = () => {
     if (onFinishedTimeoutRef.current) {

packages/surveys/src/components/i18n/provider.tsx

@@ -1,20 +1,28 @@
 import { ComponentChildren } from "preact";
-import { useEffect } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import { I18nextProvider } from "react-i18next";
 import i18n from "../../lib/i18n.config";
 
 export const I18nProvider = ({ language, children }: { language: string; children?: ComponentChildren }) => {
+  const isFirstRender = useRef(true);
+  const prevLanguage = useRef(language);
+
   // Set language synchronously on initial render so children get the correct translations immediately.
   // This is safe because all translations are pre-loaded (bundled) in i18n.config.ts.
-  if (i18n.language !== language) {
-    i18n.changeLanguage(language);
-  }
-
-  // Handle language prop changes after initial render
-  useEffect(() => {
+  // On subsequent renders, skip this to avoid overriding language changes made by the user via LanguageSwitch.
+  if (isFirstRender.current) {
     if (i18n.language !== language) {
       i18n.changeLanguage(language);
     }
+    isFirstRender.current = false;
+  }
+
+  // Only update language when the prop itself changes, not when i18n was changed internally by user action
+  useEffect(() => {
+    if (prevLanguage.current !== language) {
+      i18n.changeLanguage(language);
+      prevLanguage.current = language;
+    }
   }, [language]);
 
   // work around for react-i18next not supporting preact

packages/surveys/src/lib/i18n.ts

@@ -41,9 +41,16 @@ export const getLocalizedValue = (
  * This ensures translations are always available, even when called from API routes
  */
 export const getTranslations = (languageCode: string): TFunction => {
+  // "default" is a Formbricks-internal language identifier, not a valid i18next locale.
+  // When "default" is passed, use the current i18n language (which was already resolved
+  // to a real locale by the I18nProvider or LanguageSwitch). Calling
+  // i18n.changeLanguage("default") would cause i18next to fall back to "en", resetting
+  // the user's selected language (see issue #7515).
+  const resolvedCode = languageCode === "default" ? i18n.language : languageCode;
+
   // Ensure the language is set (i18n.changeLanguage is synchronous when resources are already loaded)
-  if (i18n.language !== languageCode) {
-    i18n.changeLanguage(languageCode);
+  if (i18n.language !== resolvedCode) {
+    i18n.changeLanguage(resolvedCode);
   }
-  return i18n.getFixedT(languageCode);
+  return i18n.getFixedT(resolvedCode);
 };