flowstudio
Version:
Enterprise Flow Designer
17 lines • 4.33 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Card, Flex, Select, TextField, Text, Button, Separator, } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { BiCopy } from "react-icons/bi";
import { FaCog, FaSave, FaTimes } from 'react-icons/fa';
import service_providers from '../../service_providers.json';
export default function ServiceProviders({ open, setOpen, projectIdentifier }) {
var _a;
const { data: project, status: projectStatus, refetch: projectRefetch } = useQuery({
queryKey: [`project_${projectIdentifier}`], queryFn: async () => {
const res = await fetch(`/api/projects/${projectIdentifier}`);
return res === null || res === void 0 ? void 0 : res.json();
}, ...{ enabled: !!projectIdentifier }
});
return (_jsx(_Fragment, { children: _jsxs(Flex, { direction: 'column', height: '100%', width: '100%', children: [_jsxs(Flex, { direction: 'column', gap: '1', children: [(_a = project === null || project === void 0 ? void 0 : project.providers) === null || _a === void 0 ? void 0 : _a.map((val, ind) => (_jsxs(Flex, { align: 'center', children: [_jsx(Flex, { flexGrow: '1', children: _jsx(Text, { color: 'gray', size: '1', children: val.name }) }), _jsxs(Flex, { flexShrink: '0', gap: '3', children: [_jsxs(Select.Root, { size: '1', defaultValue: val.type, children: [_jsx(Select.Trigger, { placeholder: "Select Type" }), _jsxs(Select.Content, { position: 'popper', children: [_jsx(Select.Item, { value: 'ussd', children: "USSD" }), _jsx(Select.Item, { value: 'sms', children: "SMS" }), _jsx(Select.Item, { value: 'payment', children: "Payment" })] })] }), _jsxs(Select.Root, { size: '1', defaultValue: val.identifier, children: [_jsx(Select.Trigger, { placeholder: "Select Provider" }), _jsx(Select.Content, { position: 'popper', children: service_providers === null || service_providers === void 0 ? void 0 : service_providers.map((prov_val, prov_ind) => (_jsx(Select.Item, { value: prov_val.identifier, children: prov_val.name }, prov_ind))) })] }), _jsx(Button, { size: '1', "aria-label": 'Setting', variant: 'outline', children: _jsx(FaCog, {}) }), _jsx(Button, { size: '1', "aria-label": 'Remove', color: 'red', variant: 'soft', children: _jsx(FaTimes, {}) })] })] }, ind))), _jsxs(Flex, { align: 'center', children: [_jsx(Flex, { flexGrow: '1', children: _jsx(Text, { color: 'gray', size: '1', children: "New Provider" }) }), _jsxs(Flex, { flexShrink: '0', gap: '3', children: [_jsxs(Select.Root, { size: '1', defaultValue: '', children: [_jsx(Select.Trigger, { placeholder: "Select Type" }), _jsxs(Select.Content, { position: 'popper', children: [_jsx(Select.Item, { value: 'ussd', children: "USSD" }), _jsx(Select.Item, { value: 'sms', children: "SMS" }), _jsx(Select.Item, { value: 'payment', children: "Payment" })] })] }), _jsxs(Select.Root, { size: '1', defaultValue: '', children: [_jsx(Select.Trigger, { placeholder: "Select Provider" }), _jsx(Select.Content, { position: 'popper', children: service_providers === null || service_providers === void 0 ? void 0 : service_providers.map((prov_val, prov_ind) => (_jsx(Select.Item, { value: prov_val.identifier, children: prov_val.name }, prov_ind))) })] }), _jsx(Button, { size: '1', "aria-label": 'Remove', color: 'teal', variant: 'soft', children: _jsx(FaSave, {}) })] })] })] }), _jsx(Separator, { my: '3', size: '4' }), _jsx(Card, { children: _jsx("form", { children: _jsxs(Flex, { direction: 'column', gap: '3', children: [_jsx(Text, { color: 'gray', size: '2', children: "USSD Callback Endpoint" }), _jsx(TextField.Root, { readOnly: true, type: 'url', placeholder: 'URL', autoComplete: 'off', defaultValue: 'https://uxxd.osanim.com/api/123456789/callback?network=mtn&mode=start&msisdn=233241844442&sessionid=1234567&userdata=800*008&username=uxxd&trafficid=1234567&other=g4m&serviceCode=1234', children: _jsx(TextField.Slot, { side: 'right', pr: '1', children: _jsx(Button, { "aria-label": 'copy', size: '1', color: 'teal', variant: 'soft', children: _jsx(BiCopy, {}) }) }) }), _jsx(Text, { color: 'gray', size: '1', children: "This link should be shared with all your Providers (Itt helps them redirect all USSD requests from their end to you.)" })] }) }) })] }) }));
}
//# sourceMappingURL=service_providers.js.map