-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
separate funnel correlation into sub-components
- Loading branch information
1 parent
aff29f2
commit 90df0a0
Showing
4 changed files
with
144 additions
and
125 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
91 changes: 91 additions & 0 deletions
91
frontend/src/scenes/insights/views/Funnels/FunnelCorrelationFeedbackForm.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,91 @@ | ||
| import { useRef } from 'react' | ||
| import { useActions, useValues } from 'kea' | ||
|
|
||
| import { insightLogic } from 'scenes/insights/insightLogic' | ||
| import { funnelLogic } from 'scenes/funnels/funnelLogic' | ||
|
|
||
| import { LemonButton, LemonTextArea } from '@posthog/lemon-ui' | ||
| import { IconClose } from 'lib/lemon-ui/icons' | ||
| import { CommentOutlined } from '@ant-design/icons' | ||
|
|
||
| export const FunnelCorrelationFeedbackForm = (): JSX.Element | null => { | ||
| const { insightProps } = useValues(insightLogic) | ||
| const { correlationFeedbackHidden, correlationDetailedFeedbackVisible, correlationFeedbackRating } = useValues( | ||
| funnelLogic(insightProps) | ||
| ) | ||
| const { | ||
| sendCorrelationAnalysisFeedback, | ||
| hideCorrelationAnalysisFeedback, | ||
| setCorrelationFeedbackRating, | ||
| setCorrelationDetailedFeedback, | ||
| } = useActions(funnelLogic(insightProps)) | ||
|
|
||
| const detailedFeedbackRef = useRef<HTMLTextAreaElement>(null) | ||
|
|
||
| if (correlationFeedbackHidden) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <div className="border rounded p-4 space-y-2 mt-4"> | ||
| <div className="flex items-center justify-between"> | ||
| <h4 className="text-muted-alt"> | ||
| <CommentOutlined style={{ marginRight: 4 }} /> | ||
| Was this correlation analysis report useful? | ||
| </h4> | ||
| <div className="flex items-center gap-2"> | ||
| {!!correlationFeedbackRating && <i className="text-success mr-2">Thanks for your feedback!</i>} | ||
| {( | ||
| [ | ||
| [5, '😍'], | ||
| [4, '😀'], | ||
| [3, '😴'], | ||
| [2, '😔'], | ||
| [1, '👎'], | ||
| ] as const | ||
| ).map((content, index) => ( | ||
| <LemonButton | ||
| key={index} | ||
| active={correlationFeedbackRating === content[0]} | ||
| onClick={() => { | ||
| if (correlationFeedbackRating === content[0]) { | ||
| setCorrelationFeedbackRating(0) | ||
| } else { | ||
| setCorrelationFeedbackRating(content[0]) | ||
| setTimeout(() => detailedFeedbackRef.current?.focus(), 100) | ||
| } | ||
| }} | ||
| > | ||
| {content[1]} | ||
| </LemonButton> | ||
| ))} | ||
| <LemonButton icon={<IconClose />} onClick={hideCorrelationAnalysisFeedback} status="stealth" /> | ||
| </div> | ||
| </div> | ||
| {correlationDetailedFeedbackVisible ? ( | ||
| <> | ||
| <form onSubmit={sendCorrelationAnalysisFeedback} className="space-y-2"> | ||
| <LemonTextArea | ||
| onBlur={(e) => setCorrelationDetailedFeedback(e.target.value)} | ||
| placeholder="Optional. Help us by sharing details around your experience..." | ||
| ref={detailedFeedbackRef} | ||
| onPressCmdEnter={() => { | ||
| detailedFeedbackRef.current?.blur() | ||
| sendCorrelationAnalysisFeedback() | ||
| }} | ||
| /> | ||
| <div className="flex justify-end"> | ||
| <LemonButton | ||
| data-attr="correlation-analysis-share-feedback" | ||
| type="primary" | ||
| htmlType="submit" | ||
| > | ||
| Share feedback | ||
| </LemonButton> | ||
| </div> | ||
| </form> | ||
| </> | ||
| ) : null} | ||
| </div> | ||
| ) | ||
| } |
38 changes: 38 additions & 0 deletions
38
frontend/src/scenes/insights/views/Funnels/FunnelCorrelationSkewWarning.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,38 @@ | ||
| import { useActions, useValues } from 'kea' | ||
| import { Card } from 'antd' | ||
|
|
||
| import { insightLogic } from 'scenes/insights/insightLogic' | ||
| import { funnelLogic } from 'scenes/funnels/funnelLogic' | ||
|
|
||
| import { IconFeedbackWarning } from 'lib/lemon-ui/icons' | ||
| import { CloseOutlined } from '@ant-design/icons' | ||
|
|
||
| export const FunnelCorrelationSkewWarning = (): JSX.Element | null => { | ||
| const { insightProps } = useValues(insightLogic) | ||
| const { isSkewed } = useValues(funnelLogic(insightProps)) | ||
| const { hideSkewWarning } = useActions(funnelLogic(insightProps)) | ||
|
|
||
| if (!isSkewed) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Card className="skew-warning"> | ||
| <h4> | ||
| <IconFeedbackWarning style={{ fontSize: 24, marginRight: 4, color: 'var(--warning)' }} /> Adjust your | ||
| funnel definition to improve correlation analysis | ||
| <CloseOutlined className="close-button" onClick={hideSkewWarning} /> | ||
| </h4> | ||
| <div> | ||
| <b>Tips for adjusting your funnel:</b> | ||
| <ol> | ||
| <li> | ||
| Adjust your first funnel step to be more specific. For example, choose a page or an event that | ||
| occurs less frequently. | ||
| </li> | ||
| <li>Choose an event that happens more frequently for subsequent funnels steps.</li> | ||
| </ol> | ||
| </div> | ||
| </Card> | ||
| ) | ||
| } |