@servicetitan/assist-ui/lib/components/recommendations/multiple-recommendation-card/multiple-recommendation-card.js

ServiceTitan Atlas UI Components

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Card, Checkbox, Flex, Icon, Overflow, Text } from '@servicetitan/anvil2';
import IconAtlasLogo from '@servicetitan/anvil2/assets/icons/st/atlas_logo.svg';
import { core } from '@servicetitan/anvil2/token';
export const MultipleRecommendationCard = ({ recommendationId, message, options, actions, onSubmit, submitted, selected })=>{
    const [localSelectedValues, setLocalSelectedValues] = useState([]);
    const handleCheckboxChange = (value, checked)=>{
        if (checked) {
            setLocalSelectedValues((prev)=>[
                    ...prev,
                    value
                ]);
        } else {
            setLocalSelectedValues((prev)=>prev.filter((v)=>v !== value));
        }
    };
    const handleSubmit = (id)=>{
        onSubmit({
            sourceMessageId: recommendationId,
            optionIds: localSelectedValues,
            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",
                            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",
                    gap: 2,
                    children: [
                        options === null || options === void 0 ? void 0 : options.map((option)=>{
                            var _option_id;
                            return /*#__PURE__*/ _jsx(Checkbox, {
                                disabled: submitted,
                                name: "action",
                                value: option.id,
                                checked: !submitted ? localSelectedValues.includes((_option_id = option.id) !== null && _option_id !== void 0 ? _option_id : '') : selected === null || selected === void 0 ? void 0 : selected.includes(option.id),
                                onChange: (e)=>{
                                    var _e_target;
                                    var _option_id, _e_target_checked;
                                    return handleCheckboxChange((_option_id = option.id) !== null && _option_id !== void 0 ? _option_id : '', (_e_target_checked = e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.checked) !== null && _e_target_checked !== void 0 ? _e_target_checked : false);
                                },
                                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,
                                    children: action.name
                                }, action.id);
                            })
                        })
                    ]
                })
            })
        ]
    });
};

//# sourceMappingURL=multiple-recommendation-card.js.map