Skip to content

Commit

Permalink
refactor: use slack hook to collect user feedback (#916)
Browse files Browse the repository at this point in the history
  • Loading branch information
@charIeszhao
charIeszhao authored Dec 6, 2024
1 parent aff064e commit bb8d779
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 63 deletions.
4 changes: 2 additions & 2 deletions src/assets/thumbs-down.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Button/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

&.outline {
color: var(--logto-color-text);
border-color: var(--logto-color-text);
border-color: var(--logto-border);
}

&.plain {
Expand Down
105 changes: 51 additions & 54 deletions src/theme/EditMetaRow/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ import Textarea from '@site/src/components/Textarea';

import styles from './styles.module.scss';

const likeWebhookUrl =
'https://hooks.slack.com/triggers/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';
const feedbackWebhookUrl =
'https://hooks.slack.com/triggers/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';

export default function EditMetaRow({ className, editUrl }: Props): JSX.Element {
const [showTextarea, setShowTextarea] = useState(false);
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
Expand All @@ -32,16 +37,15 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
<Button
className={styles.button}
onClick={() => {
window.plausible?.('Docs Helpful');
void fetch(likeWebhookUrl, {
method: 'POST',
body: JSON.stringify({ url: window.location.href }),
});
setShowSuccessMessage(true);
}}
>
<ThumbUpIcon />
{translate({
id: 'theme.common.yes',
message: 'Yes',
description: 'The label for the docs helpful button',
})}
<Translate id="theme.common.yes">Yes</Translate>
</Button>
<Button
className={clsx(styles.button, showTextarea && styles.notHelpful)}
Expand All @@ -50,11 +54,7 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
}}
>
<ThumbDownIcon />
{translate({
id: 'theme.common.no',
message: 'No',
description: 'The label for the docs not helpful button',
})}
<Translate id="theme.common.no">No</Translate>
</Button>
</div>
)}
Expand All @@ -67,6 +67,39 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
})}
</div>
)}
{!showSuccessMessage && showTextarea && (
<>
<Textarea
className={styles.feedbackInput}
placeholder={translate({
id: 'theme.common.feedbackPlaceholder',
message: "We'd love to hear your feedback!",
description: 'The placeholder of the feedback textarea',
})}
value={feedback}
onChange={({ currentTarget }) => {
setFeedback(currentTarget.value);
}}
/>
<Button
className={styles.button}
type="primary"
onClick={() => {
void fetch(feedbackWebhookUrl, {
method: 'POST',
body: JSON.stringify({ url: window.location.href, feedback }),
});
setShowSuccessMessage(true);
}}
>
{translate({
id: 'theme.common.submit',
message: 'Submit',
description: 'The label of the submit button',
})}
</Button>
</>
)}
</div>
{editUrl && (
<div className={styles.editUrlColumn}>
Expand All @@ -75,53 +108,17 @@ export default function EditMetaRow({ className, editUrl }: Props): JSX.Element
Help us improve the docs!
</Translate>
</span>
<div className={styles.buttons}>
<Button className={styles.button} href={editUrl}>
<EditIcon />
{translate({
id: 'theme.common.editThisPage',
message: 'Edit this page',
description: 'The link label to edit the current page',
})}
</Button>
</div>
</div>
)}
</div>
{!showSuccessMessage && showTextarea && (
<>
<Textarea
className={styles.feedbackInput}
placeholder={translate({
id: 'theme.common.feedbackPlaceholder',
message: "We'd love to hear your feedback!",
description: 'The placeholder of the feedback textarea',
})}
value={feedback}
onChange={({ currentTarget }) => {
setFeedback(currentTarget.value);
}}
/>
<div className={styles.buttons}>
<Button
className={styles.button}
type="primary"
onClick={() => {
window.plausible?.('Docs Not Helpful', {
props: { feedback },
});
setShowSuccessMessage(true);
}}
>
<Button className={styles.button} href={editUrl}>
<EditIcon />
{translate({
id: 'theme.common.submit',
message: 'Submit',
description: 'The label of the submit button',
id: 'theme.common.editThisPage',
message: 'Edit this page',
description: 'The link label to edit the current page',
})}
</Button>
</div>
</>
)}
)}
</div>
</div>
);
}
27 changes: 21 additions & 6 deletions src/theme/EditMetaRow/styles.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,26 @@
flex-direction: column;
width: 100%;
gap: 12px;
padding: 32px 0;
border-top: 1px solid var(--logto-line-divider);
}

.label {
white-space: nowrap;
}

.flexRow {
width: 100%;
display: flex;
justify-content: space-between;
gap: 12px;
gap: 24px;
}

.feedback {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}

.buttons {
Expand All @@ -30,16 +37,27 @@
padding: 0 12px;
height: 36px;

svg {
color: var(--logto-color-text-secondary);
}

&.notHelpful {
border: 1px solid var(--logto-container-on-danger);
color: var(--logto-container-on-danger);
background: var(--logto-container-danger-bg);

svg {
color: var(--logto-container-on-danger);
}
}
}

.feedbackInput {
width: 100%;
height: 110px;
min-width: 300px;
max-width: 420px;
margin-top: 8px;
}

.successMessage {
Expand All @@ -56,17 +74,14 @@
flex-direction: column;
gap: 12px;
align-items: flex-end;
min-width: 200px;
}

@media (max-width: 996px) {
@media (max-width: 1172px) {
.flexRow {
flex-direction: column;
}

.buttons {
margin-bottom: 12px;
}

.successMessage {
margin-bottom: 12px;
}
Expand Down

0 comments on commit bb8d779

Please sign in to comment.