diff --git a/site/cypress/e2e/tests/feedback.cy.js b/site/cypress/e2e/tests/feedback.cy.js deleted file mode 100644 index 90e18c695..000000000 --- a/site/cypress/e2e/tests/feedback.cy.js +++ /dev/null @@ -1,56 +0,0 @@ -context(`Test the 'Was This Helpful' Feedback process`, () => { - before(() => { - cy.visit('/docs/account/'); - }) - - it('Verifies that the feedback buttons are rendered', () => { - cy.get('.question-container').should('be.visible'); - }); - - it('Verifies the Yes, No, and Cancel buttons work properly', () => { - cy.get('.question-container > :nth-child(2)').click(); - cy.get('.question-container').should('not.exist'); - cy.get('[placeholder="How was this page helpful? (Optional)"]').should('be.visible'); - cy.get('.multi-line-input').type('this should be cleared'); - cy.get('.single-line-input').type('clear@this.com'); - cy.get('.destructive-button').click(); - cy.get('.question-container').should('be.visible'); - cy.get('.question-container > :nth-child(3)').click(); - cy.get('[placeholder="What can we improve? (Optional)"]').should('be.visible'); - cy.get('.multi-line-input').should('be.empty'); - cy.get('.single-line-input').should('be.empty'); - }); - - it('Verifies the email validity check works', () => { - cy.get('.single-line-input').type('invalidEmail'); - cy.get('.secondary-button').click(); - cy.get('.input-box-note-invalid').should('contain.text', 'Please enter a valid email address.'); - cy.get('.single-line-input-invalid').type('@email.com'); - cy.get('.input-box-note-invalid').should('not.exist'); - }); - - it('Verifies Feedback submit happy path', () => { - cy.reload(); - cy.get('.question-container > :nth-child(2)').click(); - cy.get('.multi-line-input').type('happy path'); - cy.get('.single-line-input').type('happy@path.com'); - cy.intercept('POST', 'https://eowxoldwz4d7syt.m.pipedream.net', { - statusCode: 204 - }); - cy.get('.secondary-button').click(); - cy.get('.feedback-submitted').should('contain.text', 'Thanks! Your feedback has been submitted. We will contact you at happy@path.com'); - }); - - it('Verifies Feedback submit error path', () => { - cy.visit('/apis/messaging/'); - cy.get('.question-container > :nth-child(2)').click(); - cy.get('.multi-line-input').type('error path'); - cy.get('.single-line-input').type('error@path.com'); - cy.intercept('POST', 'https://eowxoldwz4d7syt.m.pipedream.net', { - statusCode: 400 - }); - cy.get('.secondary-button').click(); - cy.get('.alert-error').should('be.be.visible'); - cy.get('.alert-error > .text').should('contain.text', 'There was an error submitting your feedback, please try again.'); - }) -}) diff --git a/site/docusaurus.config.js b/site/docusaurus.config.js index 77a85107b..541c0f8a4 100644 --- a/site/docusaurus.config.js +++ b/site/docusaurus.config.js @@ -38,7 +38,6 @@ const identitySpec = fs.readFileSync( ); const identityspecLink = ""; const insightsSpec = fs.readFileSync("./specs/insights.yml", "utf-8"); -const pipedream = "https://eowxoldwz4d7syt.m.pipedream.net"; module.exports = { title: "Bandwidth API Docs", @@ -198,8 +197,6 @@ module.exports = { ltsVersions: ltsVersions, - pipedream: pipedream, - // CSS Colors bwBlue: "#079CEE", voicePurple: "#9a59c5", diff --git a/site/src/components/WasThisHelpful.js b/site/src/components/WasThisHelpful.js index 56a6d1a94..d78b28da7 100644 --- a/site/src/components/WasThisHelpful.js +++ b/site/src/components/WasThisHelpful.js @@ -1,165 +1,7 @@ -import React, { useState } from 'react'; -import Alert from './Alert'; -import MultiLineInput from './MultiLineInput'; -import SingleLineInput from './SingleLineInput'; -import InteractiveButton from './InteractiveButton'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; - -export default function WasThisHelpful({pageId}) { - const {siteConfig} = useDocusaurusContext(); - const controller = new AbortController(); - const [isHelpfulSubmitted, setIsHelpfulSubmitted] = useState(false); - const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false); - const [questionOpacity, setQuestionOpacity] = useState(1); - const [feedbackOpacity, setFeedbackOpacity] = useState(1); - const [feedbackQuality, setFeedbackQuality] = useState(''); - const [feedbackPlaceholder, setFeedbackPlaceholder] = useState(''); - const [userFeedback, setUserFeedback] = useState(''); - const [userEmail, setUserEmail] = useState(''); - const [isEmailValid, setIsEmailValid] = useState(true); - const [emailNote, setEmailNote] = useState(''); - const [awaitingResponse, setAwaitingResponse] = useState(false); - const [requestError, setRequestError] = useState(false); - const [requestErrorMessage, setRequestErrorMessage] = useState(''); - const transitionTimeMs = 500; - const pipedreamUrl = siteConfig.customFields.pipedream; - const errorMessageString = 'There was an error submitting your feedback, please try again.'; - - var questionStyle = { - opacity: `${questionOpacity}`, - transition: `${transitionTimeMs}ms` - }; - - var feedbackStyle = { - opacity: `${feedbackOpacity}`, - transition: `${transitionTimeMs}ms` - }; - - const helpfulQuestion = () => { - return( -
-
Was this page helpful?
- submitHelpful('good')} text={'Yes'}/> - submitHelpful('bad')} text={'No'}/> -
- ) - }; - - const feedbackInput = () => { - return( -
- - - -
- - -
- {requestError && } -
- ) - }; - - const feedbackSubmitted = () => { - const thanks = 'Thanks! Your feedback has been submitted.'; - return( -
{userEmail ? `${thanks} We will contact you at ${userEmail}` : thanks}
- ) - }; - - const handleFeedback = (e) => { - setUserFeedback(e.target.value); - }; - - const handleEmail = (e) => { - setUserEmail(e.target.value); - setIsEmailValid(true); - setEmailNote(''); - } - - const submitHelpful = (isHelpful) => { - setFeedbackQuality(isHelpful); - setQuestionOpacity(0); - setFeedbackPlaceholder(isHelpful=='good' ? 'How was this page helpful? (Optional)' : 'What can we improve? (Optional)'); - - setTimeout(() => { - setIsHelpfulSubmitted(true); - setFeedbackOpacity(1); - }, transitionTimeMs) - }; - - const cancelFeedback = () => { - setFeedbackOpacity(0); - - setTimeout(() => { - setIsHelpfulSubmitted(false); - setQuestionOpacity(1); - setIsEmailValid(true); - setEmailNote(''); - setUserFeedback(''); - setUserEmail(''); - }, transitionTimeMs) - }; - - const submitFeedback = async () => { - setRequestError(false); - - const emailRegex = /^\S+@\S+$/; - if(userEmail && !emailRegex.test(userEmail)) { - setIsEmailValid(false); - setEmailNote('Please enter a valid email address.'); - return; - } - - const feedbackBody = { - timestamp: new Date(Date.now()), - pageId: pageId, - feedbackType: feedbackQuality, - feedbackString: userFeedback, - userEmail: userEmail - }; - setAwaitingResponse(true); - - try { - setTimeout(() => controller.abort(), 20000); - const response = await fetch(pipedreamUrl, {method: 'POST', body: JSON.stringify(feedbackBody), signal: controller.signal}); - setAwaitingResponse(false); - switch(response.status) { - case 204: - setFeedbackOpacity(0); - setTimeout(() => { - setIsFeedbackSubmitted(true); - }, transitionTimeMs) - break; - case 400: - setRequestError(true); - setRequestErrorMessage(errorMessageString); - break; - default: - setRequestError(true); - setRequestErrorMessage(errorMessageString); - break; - } - } catch(error) { - setAwaitingResponse(false); - if(error.name == 'AbortError') { - setRequestError(true); - setRequestErrorMessage('Your feedback request has timed out, please wait a few seconds and try again.'); - } else { - setRequestError(true); - setRequestErrorMessage(errorMessageString); - } - } - - }; +import React from 'react'; +export default function WasThisHelpful() { return ( -
-
- {(!isHelpfulSubmitted && !isFeedbackSubmitted) && helpfulQuestion()} - {(isHelpfulSubmitted && !isFeedbackSubmitted) && feedbackInput()} - {(isHelpfulSubmitted && isFeedbackSubmitted) && feedbackSubmitted()} -
-
+
); }