@hhgtech/hhg-components
Version:
Hello Health Group common components
455 lines (433 loc) • 23.3 kB
JavaScript
'use strict';
var React = require('react');
var index$4 = require('./index-b9594844.js');
var index$1 = require('./index-25f2e7a5.js');
var index = require('./index-b0c1d50a.js');
var index$3 = require('./index-da18c632.js');
var index$2 = require('./index-46f36f8e.js');
var styled = require('@emotion/styled');
var miscTheme = require('./miscTheme.js');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);
const StyledSurveyQuestionCard = styled__default["default"].div `
padding: 1rem;
background: ${miscTheme.theme.colors.neutral100};
.survey-inner-wrapper {
padding: 1.25rem 1rem 1.5rem;
background: ${miscTheme.theme.colors.white};
border-radius: ${miscTheme.theme.borderRadius};
.survey-header {
border-bottom: 1px solid #dbdfe5;
margin-bottom: 12px;
.survey-header-text {
color: ${miscTheme.theme.colors.gray500};
}
}
.survey-contact-submit {
width: 100%;
margin-bottom: 1.5rem;
}
.term-policy-container {
width: 70%;
min-width: 210px;
max-width: 100%;
margin: 0 auto 1.5rem;
text-align: center;
}
.survey-progress-wrapper {
width: calc(100% + 2rem);
height: 4px;
margin-bottom: 1rem;
margin-left: -1rem;
background: #e4e8ec;
.survey-progress {
width: 100%;
height: 100%;
background: #00b16a;
transform: scaleX(0);
transform-origin: left;
transition: transform ease-in-out 0.3s;
}
}
.survey-button-wrapper {
display: flex;
justify-content: flex-end;
button {
justify-content: center;
&[data-has-icon='true'] {
svg {
width: 10px;
height: 10px;
margin-right: 10px;
vertical-align: unset;
}
}
&.survey-next-button {
&[data-has-icon='true'] {
svg {
margin-right: 0;
margin-left: 10px;
}
}
}
}
&[data-center='true'] {
justify-content: center;
button:only-child {
width: 200px;
max-width: 80%;
}
}
.survey-prev-button {
margin-right: 0.5rem;
}
}
}
`;
const StyledSurveyRadio = styled__default["default"].div `
position: relative;
display: flex;
align-items: center;
cursor: pointer;
input {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
border: solid 1px ${miscTheme.theme.colors.gray500};
margin-right: 8px;
border-radius: 100%;
cursor: inherit;
transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
&:hover,
&:active {
border-color: ${miscTheme.theme.colors.primaryBase};
box-shadow: 0 0 2px 2px ${miscTheme.theme.colors.primary600};
}
&:checked {
display: flex;
align-items: center;
justify-content: center;
border-color: ${miscTheme.theme.colors.primaryBase};
&:after {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
//left: 3px;
//position: absolute;
//top: 4px;
background-color: ${miscTheme.theme.colors.primaryBase};
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
}
}
label {
width: calc(100% - 24px);
cursor: inherit;
font-weight: ${miscTheme.theme.sizes.fwRegular};
}
&[data-disabled='true'] {
color: ${miscTheme.theme.colors.gray300};
cursor: not-allowed;
input {
border-color: ${miscTheme.theme.colors.gray300};
&:hover {
border-color: ${miscTheme.theme.colors.gray300};
box-shadow: none;
}
}
}
padding: 16px 20px;
border: 0.5px solid transparent;
background: #fafafa;
border-radius: ${miscTheme.theme.borderRadius};
&[data-checked='true'] {
border: 0.5px solid #2d87f3;
background: #f7f9fc;
}
input {
border: solid 2px #737373;
margin-right: 0;
background: white;
&[type='checkbox'] {
&:checked {
border: 0;
background: ${miscTheme.theme.colors.primaryBase}
url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232D87F3' stroke='%232D87F3' stroke-width='2'/%3E%3Cpath d='M15.5714 8L9.67857 14L7 11.2727' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
no-repeat center center;
&:after {
display: none;
}
}
}
}
&[data-has-image='true'] {
position: relative;
display: block;
padding: 12px;
input {
position: absolute;
top: 20px;
right: 20px;
}
.choice-image-wrapper {
position: relative;
padding-top: 56.25%;
margin-bottom: 0.75rem;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: ${miscTheme.theme.borderRadius};
object-fit: cover;
}
}
}
`;
const StyledSurveyThankyouCard = styled__default["default"].div `
position: relative;
width: 100%;
padding-top: min(400px, 100%);
.survey-thankyou-wrapper-inner {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
.survey-thankyou-icon {
width: 36%;
max-height: 50%;
margin-bottom: 1.5rem;
}
.survey-thankyou-title {
margin-bottom: 1rem;
text-align: center;
}
.survey-thankyou-subtitle {
text-align: center;
> * {
text-align: center;
}
}
}
`;
const StyledSurveyQuestionContent = styled__default["default"].div `
.survey-question-text-wrapper {
margin-bottom: 24px;
.survey-question-title {
margin-bottom: 4px;
}
.survey-question-subtitle,
.survey-question-description {
color: ${miscTheme.theme.colors.gray500};
}
}
.survey-question-image {
width: 100%;
margin-bottom: 12px;
border-radius: ${miscTheme.theme.borderRadius};
}
.survey-question-answer-wrapper {
margin-bottom: 1.5rem;
.survey-question-options-wrapper {
display: grid;
grid-gap: 0.5rem;
grid-template-columns: 1fr;
&[data-has-image='true'] {
grid-gap: 0.8rem;
grid-template-columns: 1fr 1fr;
}
.survey-question-option-item {
label {
color: #262626;
font-size: 16px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
}
}
.survey-contact-input {
margin-bottom: 1rem;
&:first-child {
margin-top: 1rem;
}
label {
font-weight: 700;
}
input {
margin-top: 6px;
}
}
}
`;
const SurveyRadio = ({ size = 'small', label, name, checked, value, className, isDisabled = false, onChange, hasImage, inputType, image, }) => {
return (React__default["default"].createElement(StyledSurveyRadio, { "data-disabled": isDisabled, className: className, "data-size": size, "data-checked": checked, onClick: () => {
onChange(value);
}, "data-has-image": hasImage },
hasImage && (React__default["default"].createElement("div", { className: "choice-image-wrapper" }, image && React__default["default"].createElement("img", { src: image, loading: "lazy" }))),
React__default["default"].createElement("label", { onClick: (e) => {
e.preventDefault();
}, htmlFor: `${name}-${value}` }, label),
React__default["default"].createElement("input", { type: inputType, checked: checked, name: name, id: `${name}-${value}`, value: value, readOnly: true })));
};
const SurveyQuestionContent = ({ question, description, onOptionsChange, onTextOptionsChange, style, className, }) => {
const { type, title, subtitle, image, textOptions: textOptionsProps, options, name, is_multi_select, } = question;
const optionHasImage = !!(options === null || options === void 0 ? void 0 : options.some((o) => o.image));
const [selectedOptions, setSelectedOptions] = React.useState([]);
const [textOptions, setTextOptions] = React.useState(() => (textOptionsProps === null || textOptionsProps === void 0 ? void 0 : textOptionsProps.slice()) || []);
React.useEffect(() => {
onOptionsChange && onOptionsChange(selectedOptions.slice());
}, [!!onOptionsChange, selectedOptions]);
React.useEffect(() => {
onTextOptionsChange && onTextOptionsChange(textOptions);
}, [!!onTextOptionsChange, textOptions]);
return (React__default["default"].createElement(StyledSurveyQuestionContent, { className: className, style: style },
React__default["default"].createElement("div", { className: "survey-question-text-wrapper" },
title && (React__default["default"].createElement(index.Heading, { "data-nosubtitle": !subtitle, className: "survey-question-title", tag: "h4" }, title)),
subtitle && (React__default["default"].createElement(index$1.Text, { className: "survey-question-subtitle", size: "p2" }, subtitle)),
description && (React__default["default"].createElement(index$1.Text, { className: "survey-question-description", size: "p2" }, description))),
image && (React__default["default"].createElement("img", { src: image, className: "survey-question-image", loading: "lazy" })),
React__default["default"].createElement("div", { className: "survey-question-answer-wrapper" },
type === 'radio' && (React__default["default"].createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => {
var _a;
return (React__default["default"].createElement(SurveyRadio, { inputType: "radio", label: option.label, name: name, key: `${name}-${option.value}`, checked: ((_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value) === option.value, value: option.value, onChange: (v) => {
setSelectedOptions([options.find((o) => o.value === v)]);
}, className: "survey-question-option-item", image: option.image, hasImage: optionHasImage }));
}))),
type === 'checkbox' && (React__default["default"].createElement("div", { "data-has-image": optionHasImage, className: "survey-question-options-wrapper" }, options.map((option) => (React__default["default"].createElement(SurveyRadio, { inputType: "checkbox", label: option.label, name: name, key: `${name}-${option.value}`, checked: !!selectedOptions.find((o) => o.value === option.value), value: option.value, onChange: () => {
const foundIndex = selectedOptions.findIndex((o) => o.value === option.value);
if (foundIndex >= 0) {
setSelectedOptions((_old) => {
_old.splice(foundIndex, 1);
return _old.slice();
});
}
else {
if (!is_multi_select) {
setSelectedOptions([option]);
}
else {
setSelectedOptions((_old) => _old.concat(option).slice());
}
}
}, className: "survey-question-option-item survey-option-radio", image: option.image, hasImage: optionHasImage }))))),
type === 'textbox' &&
textOptions.map((option, index) => option.isTextArea ? (React__default["default"].createElement(index$2.TextArea, { key: index, placeholder: option.placeholder, height: '150px', value: option.value, onChange: (t) => setTextOptions((_o) => {
_o[index].value = t;
return _o.slice();
}) })) : (React__default["default"].createElement(index$3.Input, { key: index, value: option.value, name: option.name, size: "md", className: "survey-contact-input", label: option.label, placeholder: option.placeholder, onChange: (v) => {
setTextOptions((_o) => {
_o[index].value = v;
return _o.slice();
});
}, type: option.type }))))));
};
var NodeMultipleOptions;
(function (NodeMultipleOptions) {
NodeMultipleOptions[NodeMultipleOptions["UNLIMITED"] = 0] = "UNLIMITED";
NodeMultipleOptions[NodeMultipleOptions["EXACT_NUMBER"] = 1] = "EXACT_NUMBER";
NodeMultipleOptions[NodeMultipleOptions["RANGE"] = 2] = "RANGE";
})(NodeMultipleOptions || (NodeMultipleOptions = {}));
const SurveyQuestionCard = ({ className, headerText, style, question, termAndPolicyText, prevText, nextText, isContactForm, isDisableNext, isDisablePrev, onPrevClick, onNextClick, isSubmitButton, isButtonCenter, progress, descriptionText, }) => {
var _a, _b, _c;
// const [currentQuestionIndex, setQuestionIndex] = useState(0)
const [answer, setAnswer] = React.useState([]);
const { is_multi_select, multi_select_option, from, to } = question;
// const currentQuestion = questions[currentQuestionIndex]
// const currentAnswer = answers[currentQuestionIndex]
const currentType = question === null || question === void 0 ? void 0 : question.type;
const submitDisabled = (currentType === 'checkbox' &&
((_a = question.options) === null || _a === void 0 ? void 0 : _a.length) &&
(!answer ||
answer.length === 0 ||
(is_multi_select &&
multi_select_option === NodeMultipleOptions.RANGE &&
(answer.length < from || answer.length > to)) ||
(is_multi_select &&
multi_select_option === NodeMultipleOptions.EXACT_NUMBER &&
answer.length !== from))) ||
(currentType === 'radio' &&
((_b = question.options) === null || _b === void 0 ? void 0 : _b.length) &&
(!answer || answer.length === 0)) ||
(currentType === 'textbox' &&
((_c = question.textOptions) === null || _c === void 0 ? void 0 : _c.length) &&
(answer.length < question.textOptions.length ||
answer.some((a) => !a.value)));
const normalizedProgress = typeof progress === 'number'
? progress > 1
? 1
: progress < 0
? 0
: Number(progress.toFixed(2))
: -1;
const formRef = React.useRef(null);
const reportValidity = () => {
if (currentType === 'textbox') {
// report validity for input elements
return formRef.current.reportValidity();
}
return true;
};
return (React__default["default"].createElement(StyledSurveyQuestionCard, { className: className, style: style },
React__default["default"].createElement("div", { className: "survey-inner-wrapper" },
headerText && (React__default["default"].createElement("div", { className: "survey-header" },
React__default["default"].createElement(index$1.Text, { className: "survey-header-text", size: "c2" }, headerText))),
React__default["default"].createElement("form", { ref: formRef, onSubmit: (e) => e.preventDefault() },
React__default["default"].createElement(SurveyQuestionContent, { question: question, description: descriptionText, onOptionsChange: (options) => {
setAnswer(options);
}, onTextOptionsChange: (text) => {
setAnswer(text);
} })),
isContactForm && nextText && (React__default["default"].createElement(index$4.Button, { className: "survey-contact-submit", size: "lg", isDisabled: isDisableNext || submitDisabled, onClick: () => reportValidity() && onNextClick && onNextClick(answer) }, nextText)),
termAndPolicyText && (React__default["default"].createElement("div", { className: "term-policy-container" }, termAndPolicyText)),
typeof progress === 'number' && (React__default["default"].createElement("div", { className: "survey-progress-wrapper" },
React__default["default"].createElement("div", { className: "survey-progress", style: {
transform: `scaleX(${normalizedProgress})`,
} }))),
(prevText || nextText) && (React__default["default"].createElement("div", { "data-center": isButtonCenter, className: "survey-button-wrapper" },
prevText && (React__default["default"].createElement(index$4.Button, { className: "survey-prev-button", size: "lg", color: isDisablePrev ? 'primary' : 'secondary', isDisabled: isDisablePrev, icon: React__default["default"].createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
React__default["default"].createElement("path", { d: "M2.44677 4.99999L5.31252 2.13424C5.62302 1.82374 5.62302 1.31974 5.31252 1.00924C5.00202 0.698742 4.49802 0.698742 4.18752 1.00924L0.727018 4.46974C0.433768 4.76299 0.433768 5.23774 0.727018 5.53024L4.18752 8.99074C4.49802 9.30124 5.00202 9.30124 5.31252 8.99074C5.62302 8.68024 5.62302 8.17624 5.31252 7.86574L2.44677 4.99999Z", fill: isDisablePrev ? '#fff' : '#2D87F3' })), onClick: onPrevClick }, prevText)),
!isContactForm && nextText && (React__default["default"].createElement(index$4.Button, { onClick: () => reportValidity() && onNextClick && onNextClick(answer), className: "survey-next-button", size: "lg", isDisabled: isDisableNext || submitDisabled },
nextText,
' ',
isSubmitButton ? undefined : (React__default["default"].createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none" },
React__default["default"].createElement("path", { d: "M3.80322 5.19994L0.937465 2.33419C0.626965 2.02369 0.626965 1.51969 0.937465 1.20919C1.24796 0.898693 1.75196 0.898693 2.06246 1.20919L5.52297 4.66969C5.81622 4.96294 5.81622 5.43769 5.52297 5.73019L2.06246 9.19069C1.75196 9.50119 1.24796 9.50119 0.937465 9.19069C0.626965 8.88019 0.626965 8.37619 0.937465 8.06569L3.80322 5.19994Z", fill: "#ffffff" }))))))))));
};
const SurveyThankyouCard = ({ thankyou, thankyouSubtitle, className, style, }) => {
return (React__default["default"].createElement(StyledSurveyQuestionCard, { className: className, style: style },
React__default["default"].createElement("div", { className: "survey-inner-wrapper" },
React__default["default"].createElement(StyledSurveyThankyouCard, null,
React__default["default"].createElement("div", { className: "survey-thankyou-wrapper-inner" },
React__default["default"].createElement("svg", {
// width="122"
// height="122"
viewBox: "0 0 122 122", fill: "none", className: "survey-thankyou-icon" },
React__default["default"].createElement("path", { d: "M61.5 122c33.137 0 60-26.863 60-60S94.637 2 61.5 2s-60 26.863-60 60 26.863 60 60 60Z", fill: miscTheme.theme.colors.primary50 }),
React__default["default"].createElement("ellipse", { cx: "61.5", cy: "110.36", rx: "48", ry: "3.36", fill: "#91CAFF" }),
React__default["default"].createElement("path", { d: "M82.905 72.666H101.5L87.597 40H35.403L21.5 72.666h18.595V91H83.08l-.174-18.334Z", fill: "#2C74DF" }),
React__default["default"].createElement("path", { d: "M74.4 15H39.863a5.364 5.364 0 0 0-5.363 5.363v52.214a5.364 5.364 0 0 0 5.363 5.363h43.273a5.364 5.364 0 0 0 5.363-5.363V21a6 6 0 0 0-6-6H74.4Z", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M88.853 80.108H34.147a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074h54.706a4.055 4.055 0 0 1 4.087 4.074v10.65c0 2.27-1.81 4.074-4.087 4.074Z", fill: "#E4E8EC" }),
React__default["default"].createElement("path", { d: "M90.838 85.451H32.162a4.055 4.055 0 0 1-4.087-4.074v-10.65c0-2.27 1.81-4.074 4.087-4.074H90.78a4.055 4.055 0 0 1 4.087 4.074v10.65c.058 2.27-1.81 4.074-4.029 4.074Z", fill: "#fff" }),
React__default["default"].createElement("path", { d: "M103.748 75.492v30.263c0 1.92-1.576 3.492-3.503 3.492H23.003c-1.927 0-3.503-1.572-3.503-3.492V75.492c0-1.92 1.576-3.492 3.503-3.492h19.384c1.926 0 3.503 1.571 3.503 3.492v5.354c0 .35.233.582.584.582h30.3c.351 0 .585-.233.585-.582v-5.354c0-1.92 1.576-3.492 3.503-3.492h19.383c1.927 0 3.503 1.571 3.503 3.492Z", fill: "#45A4FF" }),
React__default["default"].createElement("path", { stroke: "#2C74DF", d: "M51.954 91.377v3.084c0 1.63 1.285 2.91 2.92 2.91h12.844c1.635 0 2.92-1.28 2.92-2.91v-3.084" }),
React__default["default"].createElement("path", { d: "M120.5 38.025c-2-.246-3.25 1.352-2.375 3.195l.25.737c.75 1.844-.375 3.441-2.375 3.195l-.75-.123c-2-.245-3.25 1.352-2.375 3.195l.375.738c.75 1.843-.375 3.44-2.375 3.195l-.75-.123c-1.5-.123-2.625.737-2.625 1.966", stroke: "#FE921D" }),
React__default["default"].createElement("path", { d: "M1.533 62c-.269 1.413 1.142 2.337 2.82 1.848l.672-.218c1.678-.543 3.089.38 2.82 1.848l-.134.544c-.269 1.413 1.141 2.337 2.82 1.848l.671-.218c1.68-.543 3.09.38 2.82 1.848l-.134.543c-.201 1.087.538 1.848 1.612 1.957M118 92a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM82 3.187l1.188 4.348 4.347-1.188L86.347 2 82 3.187Z", stroke: "#00B16A" }),
React__default["default"].createElement("path", { stroke: "#FE921D", d: "M17 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" }),
React__default["default"].createElement("path", { d: "M61.5 26.667c-7.364 0-13.333 5.97-13.333 13.333 0 7.364 5.969 13.333 13.333 13.333S74.833 47.364 74.833 40 68.864 26.667 61.5 26.667Zm7.61 10.276-9.334 9.333a1.33 1.33 0 0 1-1.885 0l-4-4a1.332 1.332 0 1 1 1.885-1.885l3.057 3.057 8.391-8.39a1.332 1.332 0 1 1 1.885 1.885Z", fill: "#00CB8A" })),
thankyou && (React__default["default"].createElement(index.Heading, { className: "survey-thankyou-title", tag: "h3" }, thankyou)),
thankyouSubtitle && (React__default["default"].createElement(index$1.Text, { className: "survey-thankyou-subtitle", size: "p3" }, thankyouSubtitle)))))));
};
exports.SurveyQuestionCard = SurveyQuestionCard;
exports.SurveyThankyouCard = SurveyThankyouCard;