@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
104 lines (103 loc) • 4.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Button, Card, Flex, Icon, Link, Text } from '@servicetitan/anvil2';
import IconAtlasLogo from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
import { core } from '@servicetitan/anvil2/token';
export const ConfirmationCard = ({ recommendationId, actions, message, onSubmit, description, className, submitted })=>{
const { buttonActions, linkActions } = useMemo(()=>{
const buttons = [];
const links = [];
actions.forEach((action)=>{
var _action_type;
if (((_action_type = action.type) === null || _action_type === void 0 ? void 0 : _action_type.toLowerCase()) === 'link') {
links.push(action);
} else {
buttons.push(action);
}
});
return {
buttonActions: buttons,
linkActions: links
};
}, [
actions
]);
const handleSubmit = (action)=>{
onSubmit({
sourceMessageId: recommendationId,
optionIds: [],
actionId: action.id,
parameters: {
url: action.url
}
});
};
return /*#__PURE__*/ _jsxs(Flex, {
direction: "column",
className: className,
children: [
/*#__PURE__*/ _jsxs(Flex, {
children: [
/*#__PURE__*/ _jsx("span", {
className: "m-inline-end-1",
style: {
color: core.semantic.ForegroundColorPrimary.value
},
children: /*#__PURE__*/ _jsx(Icon, {
svg: IconAtlasLogo,
size: "large",
inherit: true
})
}),
/*#__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",
children: [
description && /*#__PURE__*/ _jsx(Text, {
size: "small",
className: "m-block-end-3",
children: description
}),
/*#__PURE__*/ _jsxs(Flex, {
alignItems: "flex-start",
gap: 1,
children: [
buttonActions.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',
className: "m-inline-start-auto",
onClick: ()=>handleSubmit(action),
disabled: submitted,
children: action.name
}, action.id);
}),
linkActions.map((action)=>/*#__PURE__*/ _jsx(Link, {
quiet: true,
appearance: "primary",
onClick: ()=>handleSubmit(action),
children: action.name
}, action.id))
]
})
]
})
})
]
});
};
//# sourceMappingURL=confirmation-card.js.map