@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
125 lines • 8.26 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React from 'react';
import { useState } from 'react';
import { useLocale } from '../localization';
import { Text, PrimaryButton, Stack, useTheme, DefaultButton } from '@fluentui/react';
import { SurveyContent } from './SurveyContent';
import { NoticePage } from '../CallComposite/pages/NoticePage';
import { ThankYouForFeedbackPage } from '../CallComposite/pages/ThankYouForFeedbackPage';
import { questionTextStyle, surveyContainerStyle } from './styles/Survey.styles';
/** @private */
export const Survey = (props) => {
const { onSubmitSurvey, onSurveySubmittedCustom, onSurveyClosed, iconName, title, moreDetails, disableStartCallButton, isMobile } = props;
const strings = useLocale().strings.call;
const [ratings, setRatings] = useState(0);
const [issuesSelected, setIssuesSelected] = useState();
const [showSubmitFeedbackButton, setShowSubmitFeedbackButton] = useState(false);
const [improvementSuggestions, setImprovementSuggestions] = useState({});
const [showDefaultAfterSubmitScreen, setShowDefaultAfterSubmitScreen] = useState(false);
const [showDefaultAfterDismissedScreen, setShowDefaultAfterDismissedScreen] = useState(false);
const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
const theme = useTheme();
return React.createElement(React.Fragment, null,
showDefaultAfterSubmitScreen && React.createElement(ThankYouForFeedbackPage, { iconName: iconName }),
showDefaultAfterDismissedScreen && React.createElement(NoticePage, { iconName: iconName, title: title, moreDetails: moreDetails, dataUiId: 'left-call-page', disableStartCallButton: disableStartCallButton }),
!showDefaultAfterSubmitScreen && !showDefaultAfterDismissedScreen && React.createElement(Stack, { verticalAlign: "center", className: surveyContainerStyle(!!isMobile) },
React.createElement(Text, { className: questionTextStyle(theme) }, strings.surveyTitle),
React.createElement(SurveyContent, { setShowSubmitFeedbackButton: (showButton) => {
setShowSubmitFeedbackButton(showButton);
}, setRatings: (rating) => {
setRatings(rating);
}, setIssuesSelected: (issuesSelected) => {
setIssuesSelected(issuesSelected);
}, setImprovementSuggestions: onSurveySubmittedCustom ? (improvementSuggestions) => {
setImprovementSuggestions(improvementSuggestions);
} : undefined }),
React.createElement(Stack, { horizontal: true, horizontalAlign: "end" },
React.createElement(DefaultButton, { style: {
marginTop: '1rem',
marginRight: '0.5rem'
}, onClick: () => {
if (onSurveyClosed) {
onSurveyClosed('skipped');
}
else {
setShowDefaultAfterDismissedScreen(true);
}
} }, strings.surveySkipButtonLabel),
showSubmitFeedbackButton && React.createElement(PrimaryButton, { disabled: submitButtonDisabled, style: {
marginTop: '1rem',
marginLeft: '0.5rem'
}, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
const surveyResults = {
overallRating: {
score: ratings
}
};
if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.overallRating) {
surveyResults.overallRating = {
score: ratings,
issues: issuesSelected.overallRating.issues
};
}
if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.audioRating) {
surveyResults.audioRating = {
score: ratings,
issues: issuesSelected.audioRating.issues
};
}
if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.screenshareRating) {
surveyResults.screenshareRating = {
score: ratings,
issues: issuesSelected.screenshareRating.issues
};
}
if (issuesSelected === null || issuesSelected === void 0 ? void 0 : issuesSelected.videoRating) {
surveyResults.videoRating = {
score: ratings,
issues: issuesSelected.videoRating.issues
};
}
if (onSubmitSurvey) {
// disable submit button while waiting for the survey to submit
setSubmitButtonDisabled(true);
// submitting survey results to calling
onSubmitSurvey(surveyResults).then(res => {
var _a, _b;
// if contoso provided callback to handle their own survey data, send over the submitted survey results
if (onSurveySubmittedCustom) {
onSurveySubmittedCustom((_a = res === null || res === void 0 ? void 0 : res.callId) !== null && _a !== void 0 ? _a : '', (_b = res === null || res === void 0 ? void 0 : res.id) !== null && _b !== void 0 ? _b : '', surveyResults, improvementSuggestions).then(() => setSubmitButtonDisabled(false));
}
else {
// if callback is not provided, enable the submit button after survey is submitted
setSubmitButtonDisabled(false);
}
// redirect to new screen
if (onSurveyClosed) {
// redirect to new screen according to contoso's callback set up
onSurveyClosed('sent');
}
else {
// if call back not provided, redirect to default screen
setShowDefaultAfterSubmitScreen(true);
}
}).catch(e => {
// if there is an error submitting the survey, log the error in the console
console.log('error when submitting survey: ' + e);
// if contoso provided redirect callback, pass contoso the error so they can redirect to a corresponding error screen
if (onSurveyClosed) {
onSurveyClosed('error', e);
}
});
}
}) }, strings.surveyConfirmButtonLabel))));
};
//# sourceMappingURL=Survey.js.map