Skip to content

Commit 65c4dbb

Browse files
dgarcia360dgarcia360
committed
feat: submit on click
1 parent 50edf53 commit 65c4dbb

File tree

3 files changed

+98
-33
lines changed

3 files changed

+98
-33
lines changed

‎docs/customization/layout.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,9 @@ The table below lists all the available properties you can set:
3434
| `privacy-policy-text` | **Type**: `boolean`<br />**Default value**: `I have read and expressly consent to the terms of the <a href='https://pushfeedback.com/privacy'>Privacy Policy</a>.`<br /><br />Privacy policy text. |
3535
| `rating` | **Type**: `number`<br />**Default value**: None <br /><br /> Rating selected by default. **Available values:** 1...5. In `thumbs` mode, `0` means thumbs down and `1` thumbs up.|
3636
| `hide-ratings` | **Type**: `boolean`<br />**Default value**: `false` <br /><br /> Wether to hide the ratings input. |
37-
| `rating-mode` | **Type**: `string`<br />**Default value**: `thumbs` <br /><br /> **Available values:** `thumbs`, `stars`<br /><br />Type of rating system.|
38-
| `sessionId` | **Type**: `string`<br />**Default value**: Autogenerated <br /><br /> Identifies the current user session. By default, this value is autogenerated if not provided. You can override it to specify a custom session ID, which can be useful for tracking or linking specific sessions across different analytics tools. |
37+
| `rating-mode` | **Type**: `string`<br />**Default value**: `thumbs` <br /><br /> **Available values:** `thumbs`, `stars`<br /><br />Type of rating system.|
38+
| `sessionId` | **Type**: `string`<br />**Default value**: Autogenerated <br /><br /> Identifies the current user session. By default, this value is autogenerated if not provided. You can override it to specify a custom session ID, which can be useful for tracking or linking specific sessions across different analytics tools. |
39+
| `submit` | **Type**: `boolean`<br />**Default**: `false`<br /><br />If set to `true`, submits feedback automatically without opening the modal, using the provided `rating` value. If not set, the default rating of `0` (negative feedback) is sent. |
3940

4041
## Examples
4142

‎docs/customization/text.mdx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,12 @@ The table below lists all the available properties you can override:
3434
| `modal-title` | **Type**: `string`<br />**Default value**: `Share your feedback`<br />Title of the feedback modal.<br /><br /> |
3535
| `modal-title-error` | **Type**: `string`<br />**Default value**: `Oops!`<br />Title displayed when there's an error submitting feedback.<br /><br />|
3636
| `modal-title-success` | **Type**: `string`<br />**Default value**: `Thanks for your feedback!`<br />Title displayed upon successful feedback submission.<br /><br />|
37-
| `screenshot-button-text` | **Type**: `string`<br />**Default value**: `Take a Screenshot`<br />Tooltip text for the screenshot button.<br /><br /> |
38-
| `screenshot-topbar-text` | **Type**: `string`<br />**Default value**: `SELECT AN ELEMENT ON THE PAGE`<br />Instructional text when taking a screenshot.<br /><br />|
39-
| `send-button-text` | **Type**: `string`<br />**Default value**: `Send`<br />Text for the button that submits feedback.<br /><br /> |
40-
| `rating-placeholder` | **Type**: `string`<br />**Default value**: `Was this page helpful?`<br />Heading for the feedback rating feature (thumbs).<br /><br />|
41-
| `rating-stars-placeholder` | **Type**: `string`<br />**Default value**: `How would you rate this page`<br />Heading for the feedback rating feature (stars).<br /><br />|
37+
| `screenshot-button-text` | **Type**: `string`<br />**Default value**: `Take a Screenshot`<br />Tooltip text for the screenshot button.<br /><br /> |
38+
| `screenshot-topbar-text` | **Type**: `string`<br />**Default value**: `SELECT AN ELEMENT ON THE PAGE`<br />Instructional text when taking a screenshot.<br /><br />|
39+
| `send-button-text` | **Type**: `string`<br />**Default value**: `Send`<br />Text for the button that submits feedback.<br /><br /> |
40+
| `rating-placeholder` | **Type**: `string`<br />**Default value**: `Was this page helpful?`<br />Heading for the feedback rating feature (thumbs).<br /><br />|
41+
| `rating-stars-placeholder` | **Type**: `string`<br />**Default value**: `How would you rate this page`<br />Heading for the feedback rating feature (stars).<br /><br />|
42+
| `footer-text` | **Type**: `string`<br />**Default**: `""`<br /><br />Optional footer text displayed after "Powered by Pushfeedback.com". |
4243

4344
## Example
4445

‎src/theme/DocItem/Footer/index.js‎

Lines changed: 89 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,105 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import Footer from '@theme-original/DocItem/Footer';
33

4+
function FeedbackWidget() {
5+
const [selected, setSelected] = useState(null); // Track the selected button
46

7+
const buttonThumbsUp = (
8+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
9+
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
10+
</svg>
11+
);
12+
13+
const buttonThumbsDown = (
14+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
15+
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
16+
</svg>
17+
);
518

6-
function FeedbackWidget() {
7-
const buttonThumbsUp = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>;
8-
const buttonThumbsDown = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>;
9-
// Replace with your <PROJECT_ID>
1019
const projectId = 'wlkz1eomrs';
1120

12-
return(
13-
<div className="feedback-widget margin-top--md margin-bottom--md">
14-
<div className="margin-bottom--sm">
15-
<b>Was this helpful?</b>
16-
</div>
17-
<span className="feedback-widget-positive">
18-
<feedback-button project={projectId} rating="1" custom-font="True" button-style="default" modal-position="center" success-message="Your input helps us improve every day.">
19-
<button className="button button--outline button--primary button--sm" title="Yes">
20-
{buttonThumbsUp}
21-
</button>
22-
</feedback-button>
23-
</span>
24-
<span className="feedback-widget-negative margin-left--sm">
25-
<feedback-button project={projectId} rating="0" custom-font="True" button-style="default" modal-position="center" success-message="Your input helps us improve every day.">
26-
<button className="button button--outline button--primary button--sm" title="No">
27-
{buttonThumbsDown}
28-
</button>
29-
</feedback-button>
30-
</span>
21+
const handleButtonClick = (rating) => {
22+
setSelected(rating);
23+
};
24+
25+
return (
26+
<div className="feedback-widget margin-top--md margin-bottom--md">
27+
<div className="margin-bottom--sm">
28+
<b>Was this helpful?</b>
3129
</div>
30+
<span className="feedback-widget-positive">
31+
<feedback-button
32+
project={projectId}
33+
rating="1"
34+
custom-font="True"
35+
button-style="default"
36+
modal-position="center"
37+
success-message="Your input helps us improve every day."
38+
submit="true"
39+
>
40+
<button
41+
className={`feedback-button ${selected === '1' ? 'selected' : ''}`}
42+
title="Yes"
43+
onClick={() => handleButtonClick('1')}
44+
>
45+
{buttonThumbsUp}
46+
</button>
47+
</feedback-button>
48+
</span>
49+
<span className="feedback-widget-negative margin-left--sm">
50+
<feedback-button
51+
project={projectId}
52+
rating="0"
53+
custom-font="True"
54+
button-style="default"
55+
modal-position="center"
56+
success-message="Your input helps us improve every day."
57+
submit="true"
58+
>
59+
<button
60+
className={`feedback-button ${selected === '0' ? 'selected' : ''}`}
61+
title="No"
62+
onClick={() => handleButtonClick('0')}
63+
>
64+
{buttonThumbsDown}
65+
</button>
66+
</feedback-button>
67+
</span>
68+
69+
{/* Style Block for Button Hover */}
70+
<style>
71+
{`
72+
.feedback-widget button {
73+
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
74+
border: 2px solid var(--feedback-primary-color);
75+
color: var(--feedback-primary-color);
76+
background-color: transparent;
77+
border-radius: 8px;
78+
padding: 8px 16px;
79+
cursor: pointer;
80+
}
81+
82+
.feedback-widget button.selected {
83+
background-color: var(--feedback-primary-color);
84+
color: white;
85+
border-color: var(--feedback-primary-color);
86+
}
87+
88+
.feedback-widget button:hover {
89+
background-color: var(--feedback-primary-color);
90+
color: white;
91+
border-color: var(--feedback-primary-color);
92+
}
93+
`}
94+
</style>
95+
</div>
3296
);
3397
}
3498

3599
export default function FooterWrapper(props) {
36100
return (
37101
<>
38-
39-
<FeedbackWidget/>
102+
<FeedbackWidget />
40103
<Footer {...props} />
41104
</>
42105
);

0 commit comments

Comments
 (0)