flowstudio
Version:
Enterprise Flow Designer
53 lines • 6.28 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, Card, Flex, Select, Separator, Text, TextArea, TextField } from "@radix-ui/themes";
import { useState } from "react";
import { IoIosCog } from "react-icons/io";
import Sheet from "../sheet";
import * as Collapsible from '@radix-ui/react-collapsible';
import { FaCopy, FaPlus } from "react-icons/fa";
import { FaChevronDown } from "react-icons/fa6";
import * as Yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as Form from "@radix-ui/react-form";
import { Globe } from "lucide-react";
// import { toast } from "sonner";
export default function AppSettings() {
const [open, setOpen] = useState(false);
const formSchema = Yup.object().shape({
title: Yup.string().required('required'),
whitelists: Yup.string().required('required'),
source_types: Yup.string().required('required')
});
const { register, handleSubmit: handleFormSubmit, reset, formState: { errors, isSubmitting }, } = useForm({
resolver: yupResolver(formSchema),
});
const handleSubmit = async (data) => {
try {
const post_data = JSON.stringify({
text: data.text,
content_type: "text",
role: "user",
});
const response = await fetch(`/api/...`, {
method: "POST", headers: {
"Content-Type": "application/json",
}, body: post_data
});
if (response.ok) {
// toast.success("Question posted successfully");
reset();
// refetchQuestions();
}
else {
// toast.error("Failed to post question");
}
}
catch (e) {
console.log(e);
}
};
return (_jsxs(Box, { position: 'relative', children: [_jsx(Button, { "aria-label": 'Settings', variant: 'outline', onClick: () => { setOpen(true); }, size: '1', children: _jsx(IoIosCog, {}) }), _jsx(Sheet, { title: 'Configuration', open: open, setOpen: setOpen, maxWidth: '450px', children: _jsxs(Flex, { direction: 'column', gap: '2', height: '100%', width: '100%', children: [_jsx(Flex, { justify: 'end', children: _jsxs(Button, { variant: 'soft', size: '1', children: [_jsx(FaPlus, {}), " Provider"] }) }), _jsx(Card, { size: '1', style: { '--card-border-radius': '5px' }, children: _jsx(Collapsible.Root, { defaultOpen: false, children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(Collapsible.Trigger, { children: _jsxs(Flex, { justify: 'between', align: 'center', children: [_jsx(Text, { weight: 'bold', children: "Provider 1" }), _jsx(FaChevronDown, {})] }) }), _jsx(Collapsible.Content, { children: _jsx(Form.Root, { onSubmit: handleFormSubmit(handleSubmit), noValidate: true, children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(Separator, { size: '4' }), _jsxs(Flex, { justify: 'between', align: 'center', children: [_jsx(Text, { color: "gray", children: "Type" }), _jsxs(Select.Root, { size: '1', children: [_jsx(Select.Trigger, { placeholder: 'Select Type' }), _jsxs(Select.Content, { position: 'popper', children: [_jsx(Select.Item, { value: 'ussd', children: "USSD" }), _jsx(Select.Item, { value: 'chat_bot', children: "Chat Bot" }), _jsx(Select.Item, { value: 'payment', children: "Payment" }), _jsx(Select.Item, { value: 'sms', children: "SMS" }), _jsx(Select.Item, { value: 'email', children: "Email" })] })] })] }), _jsx(Separator, { size: '4' }), _jsxs(Flex, { justify: 'between', align: 'center', children: [_jsx(Text, { color: "gray", children: "Provider" }), _jsxs(Select.Root, { size: '1', children: [_jsx(Select.Trigger, { placeholder: 'Select Provider' }), _jsxs(Select.Content, { position: 'popper', children: [_jsx(Select.Item, { value: 'africas_talking', children: "Africas Talking" }), _jsx(Select.Item, { value: 'itc_ghana', children: "ITC Ghana" }), _jsx(Select.Item, { value: 'wigal_ghana', children: "Wigal Ghana" }), _jsx(Select.Item, { value: 'hubtel_ghana', children: "Hubtel Ghana" }), _jsx(Select.Item, { value: 'twilio', children: "Twilio" })] })] })] }), _jsx(Separator, { size: '4' }), _jsxs(Flex, { justify: 'between', align: 'center', children: [_jsx(Text, { color: "gray", children: "Service Code" }), _jsx(TextField.Root, { placeholder: '800*008', size: '1' })] }), _jsx(Separator, { size: '4' }), _jsx(Flex, { direction: 'column', children: _jsx(Text, { color: "gray", children: _jsxs(Flex, { justify: 'between', children: [_jsxs(Flex, { gap: '2', children: [_jsx(Globe, {}), " https://flowstudio-api.vercel.app/engine/1234-5678-9012-3456"] }), " ", _jsxs(Button, { size: '1', variant: 'soft', children: [_jsx(FaCopy, {}), " Copy"] })] }) }) }), _jsx(Separator, { size: '4' }), _jsx(Flex, { justify: 'end', children: _jsx(Button, { highContrast: true, children: "Save" }) })] }) }) })] }) }) }), _jsx(Separator, { size: '4' }), _jsx(Card, { size: '1', style: { '--card-border-radius': '5px' }, children: _jsx(Collapsible.Root, { defaultOpen: false, children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(Collapsible.Trigger, { children: _jsxs(Flex, { justify: 'between', align: 'center', children: [_jsx(Text, { weight: 'bold', children: "Functions" }), _jsx(FaChevronDown, {})] }) }), _jsx(Collapsible.Content, { children: _jsxs(Flex, { direction: 'column', gap: '5', children: [_jsx(Separator, { size: '4' }), _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(TextField.Root, { type: 'text', placeholder: 'Enter Function Name', size: '2', children: _jsx(TextField.Slot, { side: 'right', children: _jsxs(Select.Root, { size: '1', defaultValue: "js", children: [_jsx(Select.Trigger, { placeholder: 'Lang' }), _jsxs(Select.Content, { position: 'popper', children: [_jsx(Select.Item, { value: 'js', children: "Js" }), _jsx(Select.Item, { value: 'py', children: "Py" })] })] }) }) }), _jsx(TextArea, { rows: 5, placeholder: 'Enter Code Here' })] }), _jsx(Flex, { justify: 'end', children: _jsx(Button, { highContrast: true, children: "Save" }) }), _jsx(Separator, { size: '4' })] }) })] }) }) })] }) })] }));
}
//# sourceMappingURL=index.js.map