-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into use-eventsource-for-queries
- Loading branch information
Showing
119 changed files
with
4,978 additions
and
2,277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+106 KB
...d/__snapshots__/scenes-app-experiments--experiment-with-three-metrics--dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+109 KB
.../__snapshots__/scenes-app-experiments--experiment-with-three-metrics--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-19.9 KB
(82%)
frontend/__snapshots__/scenes-app-experiments--experiments-list--dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-19.3 KB
(83%)
frontend/__snapshots__/scenes-app-experiments--experiments-list--light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
frontend/src/lib/components/InternalSurvey/InternalMultipleChoiceSurvey.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /** | ||
| * @fileoverview A component that displays an interactive survey within a session recording. It handles survey display, user responses, and submission | ||
| */ | ||
| import { LemonButton, LemonCheckbox, LemonTextArea } from '@posthog/lemon-ui' | ||
| import { useActions, useValues } from 'kea' | ||
|
|
||
| import { SurveyQuestion, SurveyQuestionType } from '~/types' | ||
|
|
||
| import { internalMultipleChoiceSurveyLogic } from './internalMultipleChoiceSurveyLogic' | ||
|
|
||
| interface InternalSurveyProps { | ||
| surveyId: string | ||
| } | ||
|
|
||
| export function InternalMultipleChoiceSurvey({ surveyId }: InternalSurveyProps): JSX.Element { | ||
| const logic = internalMultipleChoiceSurveyLogic({ surveyId }) | ||
| const { survey, surveyResponse, showThankYouMessage, thankYouMessage, openChoice } = useValues(logic) | ||
| const { handleChoiceChange, handleSurveyResponse, setOpenChoice } = useActions(logic) | ||
|
|
||
| if (!survey) { | ||
| return <></> | ||
| } | ||
|
|
||
| return ( | ||
| <div className="Popover Popover--padded Popover--appear-done Popover--enter-done my-4"> | ||
| <div className="Popover__box p-4"> | ||
| {survey.questions.map((question: SurveyQuestion) => ( | ||
| <div key={question.question} className="text-sm"> | ||
| {showThankYouMessage && thankYouMessage} | ||
| {!showThankYouMessage && ( | ||
| <> | ||
| <strong>{question.question}</strong> | ||
| {question.type === SurveyQuestionType.MultipleChoice && ( | ||
| <ul className="list-inside list-none mt-2"> | ||
| {question.choices.map((choice, index) => { | ||
| // Add an open choice text area if the last choice is an open choice | ||
| if (index === question.choices.length - 1 && question.hasOpenChoice) { | ||
| return ( | ||
| <div className="mt-2" key={choice}> | ||
| {choice} | ||
| <LemonTextArea | ||
| placeholder="Please share any additional comments or feedback" | ||
| onChange={setOpenChoice} | ||
| value={openChoice ?? ''} | ||
| className="my-2" | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <li key={choice}> | ||
| <LemonCheckbox | ||
| onChange={(checked) => handleChoiceChange(choice, checked)} | ||
| label={choice} | ||
| className="font-normal" | ||
| /> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| )} | ||
| <LemonButton | ||
| type="primary" | ||
| disabledReason={ | ||
| surveyResponse.length === 0 && openChoice === null | ||
| ? 'Please select at least one option' | ||
| : false | ||
| } | ||
| onClick={handleSurveyResponse} | ||
| > | ||
| {question.buttonText ?? 'Submit'} | ||
| </LemonButton> | ||
| </> | ||
| )} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
95 changes: 95 additions & 0 deletions
95
frontend/src/lib/components/InternalSurvey/internalMultipleChoiceSurveyLogic.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { actions, afterMount, kea, key, listeners, path, props, reducers } from 'kea' | ||
| import posthog from 'posthog-js' | ||
|
|
||
| import { Survey } from '~/types' | ||
|
|
||
| import type { internalMultipleChoiceSurveyLogicType } from './internalMultipleChoiceSurveyLogicType' | ||
|
|
||
| export interface InternalSurveyLogicProps { | ||
| surveyId: string | ||
| } | ||
|
|
||
| export const internalMultipleChoiceSurveyLogic = kea<internalMultipleChoiceSurveyLogicType>([ | ||
| path(['lib', 'components', 'InternalSurvey', 'internalMultipleChoiceSurveyLogicType']), | ||
| props({} as InternalSurveyLogicProps), | ||
| key((props) => props.surveyId), | ||
| actions({ | ||
| getSurveys: () => ({}), | ||
| setSurvey: (survey: Survey) => ({ survey }), | ||
| handleSurveys: (surveys: Survey[]) => ({ surveys }), | ||
| handleSurveyResponse: () => ({}), | ||
| handleChoiceChange: (choice: string, isAdded: boolean) => ({ choice, isAdded }), | ||
| setShowThankYouMessage: (showThankYouMessage: boolean) => ({ showThankYouMessage }), | ||
| setThankYouMessage: (thankYouMessage: string) => ({ thankYouMessage }), | ||
| setOpenChoice: (openChoice: string) => ({ openChoice }), | ||
| }), | ||
| reducers({ | ||
| survey: [ | ||
| null as Survey | null, | ||
| { | ||
| setSurvey: (_, { survey }) => survey, | ||
| }, | ||
| ], | ||
| thankYouMessage: [ | ||
| 'Thank you for your feedback!', | ||
| { | ||
| setThankYouMessage: (_, { thankYouMessage }) => thankYouMessage, | ||
| }, | ||
| ], | ||
| showThankYouMessage: [ | ||
| false as boolean, | ||
| { | ||
| setShowThankYouMessage: (_, { showThankYouMessage }) => showThankYouMessage, | ||
| }, | ||
| ], | ||
| openChoice: [ | ||
| null as string | null, | ||
| { | ||
| setOpenChoice: (_, { openChoice }) => openChoice, | ||
| }, | ||
| ], | ||
| surveyResponse: [ | ||
| [] as string[], | ||
| { | ||
| handleChoiceChange: (state, { choice, isAdded }) => | ||
| isAdded ? [...state, choice] : state.filter((c: string) => c !== choice), | ||
| }, | ||
| ], | ||
| }), | ||
| listeners(({ actions, values, props }) => ({ | ||
| /** When surveyId is set, get the list of surveys for the user */ | ||
| setSurveyId: () => {}, | ||
| /** Callback for the surveys response. Filter it to the surveyId and set the survey */ | ||
| handleSurveys: ({ surveys }) => { | ||
| const survey = surveys.find((s: Survey) => s.id === props.surveyId) | ||
| if (survey) { | ||
| posthog.capture('survey shown', { | ||
| $survey_id: props.surveyId, | ||
| }) | ||
| actions.setSurvey(survey) | ||
|
|
||
| if (survey.appearance?.thankYouMessageHeader) { | ||
| actions.setThankYouMessage(survey.appearance?.thankYouMessageHeader) | ||
| } | ||
| } | ||
| }, | ||
| /** When the survey response is sent, capture the response and show the thank you message */ | ||
| handleSurveyResponse: () => { | ||
| const payload = { | ||
| $survey_id: props.surveyId, | ||
| $survey_response: values.surveyResponse, | ||
| } | ||
| if (values.openChoice) { | ||
| payload.$survey_response.push(values.openChoice) | ||
| } | ||
| posthog.capture('survey sent', payload) | ||
|
|
||
| actions.setShowThankYouMessage(true) | ||
| setTimeout(() => actions.setSurvey(null as unknown as Survey), 5000) | ||
| }, | ||
| })), | ||
| afterMount(({ actions }) => { | ||
| /** When the logic is mounted, set the surveyId from the props */ | ||
| posthog.getSurveys((surveys) => actions.handleSurveys(surveys as unknown as Survey[])) | ||
| }), | ||
| ]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.