fix(surveys): whitelabel, input radio grouping, and auto text color b…

…ugs (#881)

* whitelabel for multiple questions

* fix multiple radio input grouping bug

* add test and fix auto text color for thank you box

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)
+    })
 })

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="choice" 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(' ')}
@@ -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)
                     }