@botonic/react
Version:
Build Chatbots using React
49 lines • 1.74 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useContext, useState } from 'react';
import styled from 'styled-components';
import { COLORS } from '../constants';
import { WebchatContext } from '../webchat/context';
const Container = styled.div `
display: flex;
font-family: inherit;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
`;
const TransferredContainer = styled.div `
text-align: center;
white-space: normal;
`;
const EndedContainer = styled.div `
text-align: center;
white-space: normal;
`;
const StyledButton = styled.button `
max-width: 60%;
padding: 12px 24px;
background-color: ${COLORS.SOLID_WHITE};
border: none;
border-radius: 4px;
margin-top: 8px;
cursor: pointer;
`;
export const Handoff = props => {
const { resolveCase } = useContext(WebchatContext);
const [state, setState] = useState({ showContinue: true });
const continueClick = () => {
setState({ showContinue: false });
resolveCase();
};
const bgColor = state.showContinue
? COLORS.FRINGY_FLOWER_GREEN
: COLORS.TASMAN_GRAY;
const fontColor = state.showContinue
? COLORS.APPLE_GREEN
: COLORS.CACTUS_GREEN;
return (_jsxs(Container, Object.assign({ style: {
color: fontColor,
backgroundColor: bgColor,
} }, { children: [state.showContinue ? (_jsx(TransferredContainer, { children: "Conversation transferred to a human agent..." })) : (_jsx(EndedContainer, { children: "Human handoff ended" })), state.showContinue && (_jsx(StyledButton, Object.assign({ onClick: continueClick }, { children: "Continue" })))] })));
};
//# sourceMappingURL=handoff.js.map