@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
113 lines (112 loc) • 5.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Card, Flex, Icon, Overflow, Radio, RadioGroup, Text } from '@servicetitan/anvil2';
import IconAtlasLogo from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
import { core } from '@servicetitan/anvil2/token';
export const SingleRecommendationCard = ({ recommendationId, message, options, actions, onSubmit, submitted = false, selected })=>{
const [localSelectedValue, setLocalSelectedValue] = useState('');
const handleRadioChange = (value)=>{
setLocalSelectedValue(value);
};
const handleSubmit = (id)=>{
onSubmit({
sourceMessageId: recommendationId,
optionIds: localSelectedValue ? [
localSelectedValue
] : [],
actionId: id
});
};
return /*#__PURE__*/ _jsxs(Flex, {
direction: "column",
children: [
/*#__PURE__*/ _jsxs(Flex, {
children: [
/*#__PURE__*/ _jsx("span", {
className: "m-inline-end-2",
style: {
color: core.semantic.ForegroundColorPrimary.value
},
children: /*#__PURE__*/ _jsx(Icon, {
svg: IconAtlasLogo,
size: "large"
})
}),
/*#__PURE__*/ _jsx(Text, {
inline: true,
children: /*#__PURE__*/ _jsx("b", {
children: "Atlas"
})
})
]
}),
/*#__PURE__*/ _jsx(Text, {
size: "medium",
children: message
}),
/*#__PURE__*/ _jsx(Card, {
children: /*#__PURE__*/ _jsxs(Flex, {
direction: "column",
gap: 2,
children: [
/*#__PURE__*/ _jsx(RadioGroup, {
children: options === null || options === void 0 ? void 0 : options.map((option)=>{
var _option_id;
return /*#__PURE__*/ _jsx(Radio, {
disabled: submitted,
name: "action",
value: option.id,
checked: !submitted ? localSelectedValue === option.id : selected === null || selected === void 0 ? void 0 : selected.includes((_option_id = option.id) !== null && _option_id !== void 0 ? _option_id : ''),
onChange: ()=>handleRadioChange(option.id),
label: /*#__PURE__*/ _jsxs(Flex, {
direction: "column",
gap: "0",
grow: 1,
children: [
/*#__PURE__*/ _jsx(Text, {
children: /*#__PURE__*/ _jsx("b", {
children: option.label
})
}),
/*#__PURE__*/ _jsx(Overflow.Text, {
rows: 2,
expandable: true,
expandText: "Show more...",
collapseText: "Show less...",
children: option.description && /*#__PURE__*/ _jsx(Text, {
subdued: true,
size: "small",
children: option.description
})
})
]
})
}, option.id);
})
}),
/*#__PURE__*/ _jsx(Flex, {
justifyContent: "center",
gap: 2,
children: actions === null || actions === void 0 ? void 0 : actions.map((action)=>{
var _action_type;
var _action_type_toLowerCase;
return /*#__PURE__*/ _jsx(Button, {
size: "medium",
appearance: (_action_type_toLowerCase = (_action_type = action.type) === null || _action_type === void 0 ? void 0 : _action_type.toLowerCase()) !== null && _action_type_toLowerCase !== void 0 ? _action_type_toLowerCase : 'primary',
style: {
width: '100%'
},
className: "m-inline-start-auto",
onClick: ()=>handleSubmit(action.id),
disabled: submitted || !localSelectedValue,
children: action.name
}, action.id);
})
})
]
})
})
]
});
};
//# sourceMappingURL=single-recommendation-card.js.map