Skip to content
This repository has been archived by the owner on Apr 19, 2021. It is now read-only.

[browser extension] resolve uninstall feedback not being forwarded #1011

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[browser extension] resolve uninstall feedback not being forwarded #1011

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 68 additions & 10 deletions src/components/extension-uninstall/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,14 @@ const StyledForm = styled.form`

const Form = () => {
const [state, setState] = useState<{
name?: string
consent?: boolean
email?: string
feedback: string
otherFeedback?: string
messageSent?: boolean
errorMessage?: string

}>({
feedback: ''
})
Expand Down Expand Up @@ -78,9 +83,12 @@ const Form = () => {
e.preventDefault()

const email: Email = {
subject: 'Why did I uninstall the browser extension?',
feedback: state.feedback,
otherFeedback: state.otherFeedback
from: {
email: state.email,
name: state.name
},
subject: 'Why did I uninstall the browser extension?' + ' (from ' + state.email + ')',
message: state.feedback + state.otherFeedback
}

fetch('/.netlify/functions/submit-form', {
Expand All @@ -103,8 +111,20 @@ const Form = () => {
onSubmit={handleSubmit}
>
{
!state.messageSent ? (
state.messageSent ? (
<div className="sucess">
<img src={tick} className="tick" alt="Tick" />
<h3>Thanks for your Feedback</h3>
</div>
) : (
<>

<div style={{ visibility: 'hidden' }}>
<label>
Don’t fill this out if you're human: <input name="bot-field" />
</label>
</div>

<input type="hidden" name="form-name" value="extension-deletion" />
<h3>Why did you uninstall the browser extension?</h3>
<p>Check all that apply:</p>
Expand All @@ -125,15 +145,53 @@ const Form = () => {
<input type="checkbox" onChange={handleChange} name="expected" data-text="Gitpod isn’t what I expected" />
Gitpod isn’t what I expected
</label>

<textarea onChange={handleTextAreaChange} aria-label="Do you have any other feedback?" placeholder="Do you have any other feedback?" name="otherFeedback"></textarea>

<label className="visually-hidden" htmlFor="Name">
{' '}
Name
</label>
<input
autoFocus
name="name"
className="form__input form__input--half"
type="text"
placeholder="Name"
id="Name"
onChange={handleChange}
/>
<label className="visually-hidden" htmlFor="email">
E-Mail
</label>
<input
name="email"
className="form__input form__input--half"
type="email"
placeholder="E-mail"
id="email"
onChange={handleChange}
/>

<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '0px 0px 20px 0px' }}>

<input
name="consent"
id="consent"
type="checkbox"
onChange={handleChange}
style={{ margin: '0px 10px', transform: 'translateY(.5rem)' }}
/>
<label htmlFor="consent">
I consent to having this website store my submitted information so that a support staff can respond to my inquiry.
</label>
</div>

{state.errorMessage ? <p className="error">{state.errorMessage}</p> : null}

<button className="btn" disabled={!state.feedback && !state.otherFeedback}>Send</button>
</div>
</>) : (
<div className="sucess">
<img src={tick} className="tick" alt="Tick" />
<h3>Thanks for your Feedback</h3>
</div>
)
</>)
}
</StyledForm>
)
Expand Down