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

feat(surveys): Optional survey questions #826

Merged
merged 5 commits into from
Oct 10, 2023
Merged

feat(surveys): Optional survey questions #826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e2d7941
questions can be optional
liyiy Oct 5, 2023
b15d0f1
Merge branch 'master' into optional-survey-questions
liyiy Oct 5, 2023
0ddd53a
better handling of disabled attribute and skipped responses
liyiy Oct 5, 2023
4a9ebd2
comments addressed
liyiy Oct 6, 2023
968ea38
Merge branch 'master' into optional-survey-questions
liyiy Oct 6, 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
77 changes: 43 additions & 34 deletions src/extensions/surveys.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,7 @@ export const createOpenTextOrLinkPopup = (
const surveyQuestionType = question.type
const surveyDescription = question.description
const questionText = question.question
const isOptional = !!question.optional
const form = `
<div class="survey-${survey.id}-box">
<div class="cancel-btn-wrapper">
Expand All @@ -358,9 +359,9 @@ export const createOpenTextOrLinkPopup = (
</div>
<div class="bottom-section">
<div class="buttons">
<button class="form-submit auto-text-color" type="submit" ${
surveyQuestionType === 'open' ? 'disabled' : null
}>${survey.appearance?.submitButtonText || 'Submit'}</button>
<button class="form-submit auto-text-color" type="submit">${
survey.appearance?.submitButtonText || 'Submit'
}</button>
</div>
<a href="https://posthog.com" target="_blank" rel="noopener" class="footer-branding auto-text-color">Survey by ${posthogLogo}</a>
</div>
Expand Down Expand Up @@ -401,13 +402,17 @@ export const createOpenTextOrLinkPopup = (
}
})
}

formElement.addEventListener('input', (e: any) => {
if (formElement.querySelector('.form-submit')) {
const submitButton = formElement.querySelector('.form-submit') as HTMLButtonElement
submitButton.disabled = !e.target.value
if (!isOptional) {
if (surveyQuestionType === 'open') {
;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = true
}
})
formElement.addEventListener('input', (e: any) => {
if (formElement.querySelector('.form-submit')) {
const submitButton = formElement.querySelector('.form-submit') as HTMLButtonElement
submitButton.disabled = !e.target.value
}
})
}

return formElement
}
Expand Down Expand Up @@ -459,6 +464,7 @@ export const addCancelListeners = (
export const createRatingsPopup = (posthog: PostHog, survey: Survey, question: RatingSurveyQuestion) => {
const scale = question.scale
const displayType = question.display
const isOptional = !!question.optional
const ratingOptionsElement = document.createElement('div')
if (displayType === 'number') {
ratingOptionsElement.className = 'rating-options-buttons'
Expand Down Expand Up @@ -504,9 +510,9 @@ export const createRatingsPopup = (posthog: PostHog, survey: Survey, question: R
}
<div class="bottom-section">
<div class="buttons">
<button class="form-submit auto-text-color" type="submit" disabled>${
survey.appearance?.submitButtonText || 'Submit'
}</button>
<button class="form-submit auto-text-color" type="submit" ${isOptional ? '' : 'disabled'}>${
survey.appearance?.submitButtonText || 'Submit'
}</button>
</div>
<a href="https://posthog.com" target="_blank" rel="noopener" class="footer-branding auto-text-color">Survey by ${posthogLogo}</a>
</div>
Expand Down Expand Up @@ -541,7 +547,6 @@ export const createRatingsPopup = (posthog: PostHog, survey: Survey, question: R
innerHTML: ratingsForm,
})
}

formElement.getElementsByClassName('rating-options')[0].insertAdjacentElement('afterbegin', ratingOptionsElement)
for (const x of Array(question.scale).keys()) {
const ratingEl = formElement.getElementsByClassName(`rating_${x + 1}`)[0]
Expand All @@ -566,6 +571,8 @@ export const createMultipleChoicePopup = (posthog: PostHog, survey: Survey, ques
const surveyDescription = question.description
const surveyQuestionChoices = question.choices
const singleOrMultiSelect = question.type
const isOptional = !!question.optional

const form = `
<div class="survey-${survey.id}-box">
<div class="cancel-btn-wrapper">
Expand All @@ -585,9 +592,9 @@ export const createMultipleChoicePopup = (posthog: PostHog, survey: Survey, ques
</div>
<div class="bottom-section">
<div class="buttons">
<button class="form-submit auto-text-color" type="submit" disabled>${
liyiy marked this conversation as resolved.
Show resolved Hide resolved
survey.appearance?.submitButtonText || 'Submit'
}</button>
<button class="form-submit auto-text-color" type="submit" ${isOptional ? '' : 'disabled'}>${
survey.appearance?.submitButtonText || 'Submit'
}</button>
</div>
<a href="https://posthog.com" target="_blank" rel="noopener" class="footer-branding auto-text-color">Survey by ${posthogLogo}</a>
</div>
Expand Down Expand Up @@ -628,19 +635,19 @@ export const createMultipleChoicePopup = (posthog: PostHog, survey: Survey, ques
innerHTML: form,
})
}
formElement.addEventListener('change', () => {
const selectedChoices =
singleOrMultiSelect === 'single_choice'
? formElement.querySelectorAll('input[type=radio]:checked')
: formElement.querySelectorAll('input[type=checkbox]:checked')
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // TODO: Fix this, error because it doesn't recognize node list as an array
if ((selectedChoices.length ?? 0) > 0) {
;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = false
} else {
;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = true
}
})
if (!isOptional) {
formElement.addEventListener('change', () => {
const selectedChoices: NodeListOf<HTMLInputElement> =
singleOrMultiSelect === 'single_choice'
? formElement.querySelectorAll('input[type=radio]:checked')
: formElement.querySelectorAll('input[type=checkbox]:checked')
if ((selectedChoices.length ?? 0) > 0) {
;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = false
} else {
;(formElement.querySelector('.form-submit') as HTMLButtonElement).disabled = true
}
})
}

return formElement
}
Expand Down Expand Up @@ -742,8 +749,7 @@ export const createMultipleQuestionSurvey = (posthog: PostHog, survey: Survey) =
e.preventDefault()
const multipleQuestionResponses: Record<string, string | number | string[] | null> = {}
const allTabs = (e.target as HTMLDivElement).getElementsByClassName('tab')
let idx = 0
for (const tab of allTabs) {
for (const [index, tab] of [...allTabs].entries()) {
const classes = tab.classList
const questionType = classes[2]
let response
Expand All @@ -764,14 +770,17 @@ export const createMultipleQuestionSurvey = (posthog: PostHog, survey: Survey) =
].map((choice) => choice.value)
response = selectedChoices
}
const isQuestionOptional = survey.questions[index].optional
if (isQuestionOptional && response === undefined) {
response = null
liyiy marked this conversation as resolved.
Show resolved Hide resolved
}
liyiy marked this conversation as resolved.
Show resolved Hide resolved
if (response !== undefined) {
if (idx === 0) {
if (index === 0) {
multipleQuestionResponses['$survey_response'] = response
} else {
multipleQuestionResponses[`$survey_response_${idx}`] = response
multipleQuestionResponses[`$survey_response_${index}`] = response
}
}
idx++
}
posthog.capture('survey sent', {
$survey_name: survey.name,
Expand Down
2 changes: 1 addition & 1 deletion src/posthog-surveys-types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export type SurveyQuestion = BasicSurveyQuestion | LinkSurveyQuestion | RatingSu
interface SurveyQuestionBase {
question: string
description?: string | null
required?: boolean
optional?: boolean
}

export interface BasicSurveyQuestion extends SurveyQuestionBase {
Expand Down
Loading