Skip to content

Commit 6797248

Browse files
aabidsofi19aabidsofi19
authored
Merge pull request #531 from captain-Akshay/dynamicFeedback
Dynamic feedback
2 parents 1fb6018 + c46f7a8 commit 6797248

File tree

4 files changed

+238
-102
lines changed

4 files changed

+238
-102
lines changed

‎README.md

+12
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,18 @@ format-fix:
5252
npm run format:write
5353
```
5454

55+
To test the sistent component locally, you can run
56+
57+
```
58+
build:
59+
npm run build
60+
```
61+
62+
```
63+
attach sistent to your project:
64+
npm install [path to sistent repo ]
65+
```
66+
5567
> [!NOTE]
5668
> Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability.
5769

‎src/custom/CustomTooltip/customTooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import { CHARCOAL, WHITE } from '../../theme';
44

55
type CustomTooltipProps = {
6-
title: string | React.ReactNode;
6+
title: string | React.ReactNode | JSX.Element;
77
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
88
children: React.ReactNode;
99
} & Omit<TooltipProps, 'title' | 'onClick'>;

‎src/custom/Feedback/FeedbackButton.tsx

+103-92
Original file line numberDiff line numberDiff line change
@@ -100,12 +100,20 @@ interface FeedbackComponentProps {
100100
onSubmit: (data: { label: string; message: string }) => void;
101101
containerStyles?: CSSProperties;
102102
feedbackOptionStyles?: CSSProperties;
103+
renderPosition:
104+
| 'bottom-center'
105+
| 'bottom-right'
106+
| 'bottom-left'
107+
| 'right-top'
108+
| 'right-middle'
109+
| 'right-bottom';
103110
}
104111

105112
const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
106113
onSubmit,
107114
containerStyles,
108-
feedbackOptionStyles
115+
feedbackOptionStyles,
116+
renderPosition
109117
}) => {
110118
const [isOpen, setIsOpen] = useState<boolean>(false);
111119
const [submitted, setSubmitted] = useState<boolean>(false);
@@ -139,98 +147,101 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
139147
};
140148

141149
return (
142-
<Container isOpen={isOpen} style={containerStyles}>
143-
{submitted ? (
144-
<FeedbackMessage isOpen={isOpen}>
145-
<SuccessIcon width={'32'} height={'32'} />
146-
We got your concern. Thank you!
147-
</FeedbackMessage>
148-
) : (
149-
<>
150-
<FeedbackButton onClick={handleFeedback}>Feedback</FeedbackButton>
151-
152-
<ModalCard
153-
onClose={() => {}}
154-
open={true}
155-
closeComponent={
156-
<CloseButton onClick={() => setIsOpen(false)}>
157-
<CloseIcon width={'30'} height={'30'} fill={CULTURED} />
158-
</CloseButton>
159-
}
160-
actions={
161-
<div
162-
style={{
163-
display: 'flex',
164-
alignItems: 'center'
165-
}}
166-
>
167-
<ActionWrapper>
168-
<StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
169-
<Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
170-
We may email you for more information or updates
171-
</Typography>
172-
</ActionWrapper>
173-
<FeedbackSubmitButton
174-
type="submit"
175-
disabled={!(messageValue && isChecked)}
176-
isOpen={!(messageValue && isChecked)}
177-
onClick={handleSubmit}
150+
<>
151+
<FeedbackButton onClick={handleFeedback} renderPosition={renderPosition}>
152+
Feedback
153+
</FeedbackButton>
154+
<Container isOpen={isOpen} style={containerStyles} renderPosition={renderPosition}>
155+
{submitted ? (
156+
<FeedbackMessage isOpen={isOpen}>
157+
<SuccessIcon width={'32'} height={'32'} />
158+
We got your concern. Thank you!
159+
</FeedbackMessage>
160+
) : (
161+
<>
162+
<ModalCard
163+
onClose={() => {}}
164+
open={true}
165+
closeComponent={
166+
<CloseButton onClick={() => setIsOpen(false)}>
167+
<CloseIcon width={'30'} height={'30'} fill={CULTURED} />
168+
</CloseButton>
169+
}
170+
actions={
171+
<div
172+
style={{
173+
display: 'flex',
174+
alignItems: 'center'
175+
}}
178176
>
179-
Send
180-
</FeedbackSubmitButton>
181-
</div>
182-
}
183-
leftHeaderIcon={<FeedbackIcon />}
184-
title="Feedback"
185-
helpArea={
186-
<CustomTooltip placement="top" title={tooltipContent} arrow>
187-
<HelperWrapper>
188-
<QuestionIcon width={'30'} height={'30'} />
189-
</HelperWrapper>
190-
</CustomTooltip>
191-
}
192-
helpText={'Help'}
193-
content={
194-
<FeedbackForm>
195-
<FeedbackOptions>
196-
{feedbackData?.map((item) => (
197-
<FeedbackOptionButton
198-
key={item.label}
199-
style={feedbackOptionStyles}
200-
type="button"
201-
onClick={() => {
202-
setCategory(item);
203-
}}
204-
isOpen={category?.label === item.label}
205-
>
206-
<FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
207-
<Typography>{item.label}</Typography>
208-
</FeedbackOptionButton>
209-
))}
210-
</FeedbackOptions>
211-
{category?.isTextInput ? (
212-
<FeedbackTextArea>
213-
<StyledTextArea
214-
value={messageValue || ''}
215-
onChange={(e) => {
216-
setMessageValue(e.target.value);
217-
}}
218-
ref={feedbackTextRef}
219-
required
220-
placeholder={category.placeholder}
221-
rows={5}
222-
cols={30}
223-
/>
224-
</FeedbackTextArea>
225-
) : (
226-
<InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
227-
)}
228-
</FeedbackForm>
229-
}
230-
></ModalCard>
231-
</>
232-
)}
233-
</Container>
177+
<ActionWrapper>
178+
<StyledCheckbox checked={isChecked} onChange={handleCheckboxChange} />
179+
<Typography style={{ color: 'white', fontSize: '12px', height: '15px' }}>
180+
We may email you for more information or updates
181+
</Typography>
182+
</ActionWrapper>
183+
<FeedbackSubmitButton
184+
type="submit"
185+
disabled={!(messageValue && isChecked)}
186+
isOpen={!(messageValue && isChecked)}
187+
onClick={handleSubmit}
188+
>
189+
Send
190+
</FeedbackSubmitButton>
191+
</div>
192+
}
193+
leftHeaderIcon={<FeedbackIcon />}
194+
title="Feedback"
195+
helpArea={
196+
<CustomTooltip placement="top" title={tooltipContent} arrow>
197+
<HelperWrapper>
198+
<QuestionIcon width={'30'} height={'30'} />
199+
</HelperWrapper>
200+
</CustomTooltip>
201+
}
202+
helpText={'Help'}
203+
content={
204+
<FeedbackForm>
205+
<FeedbackOptions>
206+
{feedbackData?.map((item) => (
207+
<FeedbackOptionButton
208+
key={item.label}
209+
style={feedbackOptionStyles}
210+
type="button"
211+
onClick={() => {
212+
setCategory(item);
213+
}}
214+
isOpen={category?.label === item.label}
215+
>
216+
<FeedbackMiniIcon>{item.icon}</FeedbackMiniIcon>
217+
<Typography>{item.label}</Typography>
218+
</FeedbackOptionButton>
219+
))}
220+
</FeedbackOptions>
221+
{category?.isTextInput ? (
222+
<FeedbackTextArea>
223+
<StyledTextArea
224+
value={messageValue || ''}
225+
onChange={(e) => {
226+
setMessageValue(e.target.value);
227+
}}
228+
ref={feedbackTextRef}
229+
required
230+
placeholder={category.placeholder}
231+
rows={5}
232+
cols={30}
233+
/>
234+
</FeedbackTextArea>
235+
) : (
236+
<InnerComponentWrapper>{category?.innerComponent}</InnerComponentWrapper>
237+
)}
238+
</FeedbackForm>
239+
}
240+
></ModalCard>
241+
</>
242+
)}
243+
</Container>
244+
</>
234245
);
235246
};
236247

0 commit comments

Comments
 (0)