Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(surveys): whitelabel, input radio grouping, and auto text color bugs #881

Merged
merged 3 commits into from
Nov 8, 2023
Merged

fix(surveys): whitelabel, input radio grouping, and auto text color bugs #881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05474bf
whitelabel for multiple questions
liyiy Nov 8, 2023
48ed307
fix multiple radio input grouping bug
liyiy Nov 8, 2023
30a49dc
add test and fix auto text color for thank you box
liyiy Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/__tests__/extensions/surveys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})
23 changes: 12 additions & 11 deletions src/extensions/surveys.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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(' ')}
Expand Down Expand Up @@ -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)
}
Expand Down
Loading