From 05474bf7e2f063085f7b62d3a85c232282b73118 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Wed, 8 Nov 2023 12:13:36 -0500
Subject: [PATCH 1/3] whitelabel for multiple questions

---
 src/extensions/surveys.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/extensions/surveys.ts b/src/extensions/surveys.ts
index 05957c6ef..8b0ca94d0 100644
--- a/src/extensions/surveys.ts
+++ b/src/extensions/surveys.ts
@@ -704,9 +704,10 @@ export const callSurveys = (posthog: PostHog, forceReload: boolean = false) => {
                     if (surveyPopup) {
                         addCancelListeners(posthog, surveyPopup, survey.id, survey.name)
                         if (survey.appearance?.whiteLabel) {
-                            ;(
-                                surveyPopup.getElementsByClassName('footer-branding')[0] as HTMLAnchorElement
-                            ).style.display = 'none'
+                            const allBrandingElements = surveyPopup.getElementsByClassName('footer-branding')
+                            for (const brandingElement of allBrandingElements) {
+                                ;(brandingElement as HTMLAnchorElement).style.display = 'none'
+                            }
                         }
                         shadow.appendChild(surveyPopup)
                     }

From 48ed3071cff51c0867746e1cc78c4dba3fa9afd2 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Wed, 8 Nov 2023 13:58:58 -0500
Subject: [PATCH 2/3] fix multiple radio input grouping bug

---
 src/extensions/surveys.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/surveys.ts b/src/extensions/surveys.ts
index 8b0ca94d0..8eaac4a3d 100644
--- a/src/extensions/surveys.ts
+++ b/src/extensions/surveys.ts
@@ -605,7 +605,7 @@ export const createMultipleChoicePopup = (
         ${surveyQuestionChoices
             .map((option, idx) => {
                 const inputType = singleOrMultiSelect === 'single_choice' ? 'radio' : 'checkbox'
-                const singleOrMultiSelectString = `<div class="choice-option"><input type=${inputType} id=surveyQuestion${questionIndex}MultipleChoice${idx} name="choice" value="${option}">
+                const singleOrMultiSelectString = `<div class="choice-option"><input type=${inputType} id=surveyQuestion${questionIndex}MultipleChoice${idx} name="question${questionIndex}" value="${option}">
             <label class="auto-text-color" for=surveyQuestion${questionIndex}MultipleChoice${idx}>${option}</label><span class="choice-check auto-text-color">${checkSVG}</span></div>`
                 return singleOrMultiSelectString
             })

From 30a49dc86f38b5fba1a89609fccd629b58b467d5 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Wed, 8 Nov 2023 15:42:42 -0500
Subject: [PATCH 3/3] add test and fix auto text color for thank you box

---
 src/__tests__/extensions/surveys.js | 35 +++++++++++++++++++++++++++++
 src/extensions/surveys.ts           | 16 ++++++-------
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/__tests__/extensions/surveys.js b/src/__tests__/extensions/surveys.js
index 414f0060b..1052fb58b 100644
--- a/src/__tests__/extensions/surveys.js
+++ b/src/__tests__/extensions/surveys.js
@@ -191,4 +191,39 @@ describe('survey display logic', () => {
         })
         expect(uniqueIds.size).toBe(allSelectOptions.length)
     })
+
+    test('single choice question type radio input elements are grouped correctly by question index', () => {
+        mockSurveys = [
+            {
+                id: 'testSurvey2',
+                name: 'Test survey 2',
+                appearance: null,
+                questions: [
+                    {
+                        question: 'Which types of content would you like to see more of?',
+                        description: 'This is a question description',
+                        type: 'single_choice',
+                        choices: ['Tutorials', 'Product Updates', 'Events', 'Other'],
+                    },
+                    {
+                        question: 'Which features do you use the most?',
+                        description: 'This is a question description',
+                        type: 'single_choice',
+                        choices: ['Surveys', 'Feature flags', 'Analytics'],
+                    },
+                ],
+            },
+        ]
+        const multipleQuestionSurveyForm = createMultipleQuestionSurvey(mockPostHog, mockSurveys[0])
+        const firstQuestionRadioInputs = multipleQuestionSurveyForm
+            .querySelectorAll('.tab.question-0')[0]
+            .querySelectorAll('input[type=radio]')
+        const mappedInputNames1 = [...firstQuestionRadioInputs].map((input) => input.name)
+        expect(mappedInputNames1.every((name) => name === 'question0')).toBe(true)
+        const secondQuestionRadioInputs = multipleQuestionSurveyForm
+            .querySelectorAll('.tab.question-1')[0]
+            .querySelectorAll('input[type=radio]')
+        const mappedInputNames2 = [...secondQuestionRadioInputs].map((input) => input.name)
+        expect(mappedInputNames2.every((name) => name === 'question1')).toBe(true)
+    })
 })
diff --git a/src/extensions/surveys.ts b/src/extensions/surveys.ts
index 8eaac4a3d..3f6d32922 100644
--- a/src/extensions/surveys.ts
+++ b/src/extensions/surveys.ts
@@ -287,16 +287,14 @@ const style = (id: string, appearance: SurveyAppearance | null) => {
               width: 100%;
               ${positions[appearance?.position || 'right'] || 'right: 30px;'}
           }
-          .thank-you-message {
-              color: ${appearance?.textColor || 'black'};
-          }
           .thank-you-message-body {
               margin-top: 6px;
               font-size: 14px;
-              color: ${appearance?.descriptionTextColor || '#4b4b52'};
+              background: ${appearance?.backgroundColor || '#eeeded'};
           }
           .thank-you-message-header {
               margin: 10px 0px 0px;
+              background: ${appearance?.backgroundColor || '#eeeded'};
           }
           .thank-you-message-container .form-submit {
               margin-top: 20px;
@@ -429,8 +427,10 @@ export const createThankYouMessage = (survey: Survey) => {
         <div class="cancel-btn-wrapper">
             <button class="form-cancel" type="cancel">${cancelSVG}</button>
         </div>
-        <h3 class="thank-you-message-header">${survey.appearance?.thankYouMessageHeader || 'Thank you!'}</h3>
-        <div class="thank-you-message-body">${survey.appearance?.thankYouMessageDescription || ''}</div>
+        <h3 class="thank-you-message-header auto-text-color">${
+            survey.appearance?.thankYouMessageHeader || 'Thank you!'
+        }</h3>
+        <div class="thank-you-message-body auto-text-color">${survey.appearance?.thankYouMessageDescription || ''}</div>
         <button class="form-submit auto-text-color"><span>Close</span><span class="thank-you-message-countdown"></span></button>
         ${
             survey.appearance?.whiteLabel
@@ -605,8 +605,8 @@ export const createMultipleChoicePopup = (
         ${surveyQuestionChoices
             .map((option, idx) => {
                 const inputType = singleOrMultiSelect === 'single_choice' ? 'radio' : 'checkbox'
-                const singleOrMultiSelectString = `<div class="choice-option"><input type=${inputType} id=surveyQuestion${questionIndex}MultipleChoice${idx} name="question${questionIndex}" value="${option}">
-            <label class="auto-text-color" for=surveyQuestion${questionIndex}MultipleChoice${idx}>${option}</label><span class="choice-check auto-text-color">${checkSVG}</span></div>`
+                const singleOrMultiSelectString = `<div class="choice-option"><input type=${inputType} id=surveyQuestion${questionIndex}Choice${idx} name="question${questionIndex}" value="${option}">
+            <label class="auto-text-color" for=surveyQuestion${questionIndex}Choice${idx}>${option}</label><span class="choice-check auto-text-color">${checkSVG}</span></div>`
                 return singleOrMultiSelectString
             })
             .join(' ')}