"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const antd_1 = require("antd");
const icon_1 = require("@cocalc/frontend/components/icon");
const react_1 = require("react");
const A_1 = __importDefault(require("components/misc/A"));
const loading_1 = __importDefault(require("components/share/loading"));
const recent_files_1 = __importDefault(require("./recent-files"));
const router_1 = require("next/router");
const misc_1 = require("@cocalc/util/misc");
const post_1 = __importDefault(require("lib/api/post"));
const browser_info_1 = __importDefault(require("./browser-info"));
const customize_1 = require("lib/customize");
const util_1 = require("./util");
const tickets_1 = require("./tickets");
const site_name_1 = __importDefault(require("components/share/site-name"));
const config_1 = require("lib/config");
function VSpace({ children }) {
    return ((0, jsx_runtime_1.jsx)(antd_1.Space, { direction: "vertical", style: { width: "100%", fontSize: "12pt" }, children: children }));
}
function stringToType(s) {
    if (s == "problem" || s == "question" || s == "task")
        return s;
    return "problem"; // default;
}
function Create() {
    const { contactEmail, zendesk, account } = (0, customize_1.useCustomize)();
    const router = (0, router_1.useRouter)();
    // The URL the user was viewing when they requested support.
    // This could easily be blank, but if it is set it can be useful.
    const { url } = router.query;
    const [files, setFiles] = (0, react_1.useState)([]);
    const [type, setType] = (0, react_1.useState)(stringToType(router.query.type));
    const [email, setEmail] = (0, react_1.useState)(account?.email_address ?? "");
    const [body, setBody] = (0, react_1.useState)(router.query.body ? `${router.query.body}` : "");
    const [subject, setSubject] = (0, react_1.useState)(router.query.subject ? `${router.query.subject}` : "");
    const [submitError, setSubmitError] = (0, react_1.useState)("");
    const [submitting, setSubmitting] = (0, react_1.useState)(false);
    const [success, setSuccess] = (0, react_1.useState)("");
    const submittable = (0, react_1.useRef)(false);
    submittable.current = !!(!submitting &&
        !submitError &&
        !success &&
        (0, misc_1.is_valid_email_address)(email) &&
        subject &&
        body);
    if (!zendesk) {
        return (0, jsx_runtime_1.jsx)(util_1.NoZendesk, {});
    }
    async function createSupportTicket() {
        const info = (0, browser_info_1.default)();
        const options = { type, files, email, body, url, subject, info };
        setSubmitError("");
        let result;
        try {
            setSubmitting(true);
            result = await (0, post_1.default)("/support/create-ticket", { options });
        }
        catch (err) {
            setSubmitError(err.message);
            return;
        }
        finally {
            setSubmitting(false);
        }
        setSuccess((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Please save this URL: ", (0, jsx_runtime_1.jsx)(A_1.default, { href: result.url, children: result.url })] }), (0, jsx_runtime_1.jsxs)("p", { children: ["You can also see the", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "/support/tickets", children: "status of your support tickets" }), "."] })] }));
    }
    return ((0, jsx_runtime_1.jsx)(antd_1.Layout.Content, { style: {
            backgroundColor: "white",
        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                maxWidth: config_1.MAX_WIDTH,
                margin: "15px auto",
                padding: "15px",
                backgroundColor: "white",
                color: "#555",
            }, children: [" ", (0, jsx_runtime_1.jsx)("h1", { style: { textAlign: "center", fontSize: "24pt" }, children: router.query.title ?? "Create a New Support Ticket" }), router.query.hideExtra != "true" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("p", { style: { fontSize: "12pt" }, children: ["Create a new support ticket below or", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "/support/tickets", children: "check the status of your support tickets" }), ".", " ", contactEmail && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["You can also email us directly at", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: `mailto:${contactEmail}`, children: contactEmail }), "."] }))] }), (0, jsx_runtime_1.jsx)(FAQ, {}), (0, jsx_runtime_1.jsx)("h1", { children: "Create Your Ticket" }), (0, jsx_runtime_1.jsx)(Instructions, {}), (0, jsx_runtime_1.jsx)(antd_1.Divider, { children: "Support Ticket" })] })), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)(VSpace, { children: [(0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(Status, { done: (0, misc_1.is_valid_email_address)(email) }), " Your Email Address"] }), (0, jsx_runtime_1.jsx)(antd_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "envelope", style: { color: "rgba(0,0,0,.25)" } }), defaultValue: email, placeholder: "Email address...", style: { maxWidth: "500px" }, onChange: (e) => setEmail(e.target.value) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(Status, { done: subject }), " Subject"] }), (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "Summarize what this is about...", onChange: (e) => setSubject(e.target.value), defaultValue: subject }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("b", { children: ["Is this a ", (0, jsx_runtime_1.jsx)("i", { children: "Problem" }), ", ", (0, jsx_runtime_1.jsx)("i", { children: "Question" }), ", or", " ", (0, jsx_runtime_1.jsx)("i", { children: "Software Install Task" }), "?"] }), (0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { name: "radiogroup", defaultValue: type, onChange: (e) => setType(e.target.value), children: (0, jsx_runtime_1.jsxs)(VSpace, { children: [(0, jsx_runtime_1.jsxs)(antd_1.Radio, { value: "problem", children: [(0, jsx_runtime_1.jsx)(tickets_1.Type, { type: "problem" }), " Something is not working the way I think it should work."] }), (0, jsx_runtime_1.jsxs)(antd_1.Radio, { value: "question", children: [(0, jsx_runtime_1.jsx)(tickets_1.Type, { type: "question" }), " I have a question about billing, functionality, teaching, something not working, etc."] }), (0, jsx_runtime_1.jsxs)(antd_1.Radio, { value: "task", children: [(0, jsx_runtime_1.jsx)(tickets_1.Type, { type: "task" }), " Is it possible for you to install some software that I need in order to use ", (0, jsx_runtime_1.jsx)(site_name_1.default, {}), "?"] })] }) }), (0, jsx_runtime_1.jsx)("br", {}), router.query.hideExtra != "true" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Files, { onChange: setFiles }), (0, jsx_runtime_1.jsx)("br", {})] })), (0, jsx_runtime_1.jsxs)("b", { children: [(0, jsx_runtime_1.jsx)(Status, { done: body && body.length > 10 }), " Description"] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                        marginLeft: "30px",
                                        borderLeft: "1px solid lightgrey",
                                        paddingLeft: "15px",
                                    }, children: [type == "problem" && (0, jsx_runtime_1.jsx)(Problem, { onChange: setBody }), type == "question" && ((0, jsx_runtime_1.jsx)(Question, { onChange: setBody, defaultValue: body })), type == "task" && (0, jsx_runtime_1.jsx)(Task, { onChange: setBody })] })] }), (0, jsx_runtime_1.jsxs)("p", { style: { marginTop: "30px" }, children: ["After submitting this, you'll receive a link, which you should save until you receive a confirmation email. You can also", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "/support/tickets", children: "check the status of your tickets here" }), "."] }), (0, jsx_runtime_1.jsxs)("div", { style: { textAlign: "center", marginTop: "30px" }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Button, { shape: "round", size: "large", disabled: !submittable.current, type: "primary", onClick: createSupportTicket, children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "paper-plane" }), " ", submitting
                                            ? "Submitting..."
                                            : success
                                                ? "Thank you for creating a ticket"
                                                : submitError
                                                    ? "Close the error box to try again"
                                                    : !(0, misc_1.is_valid_email_address)(email)
                                                        ? "Enter Valid Email Address above"
                                                        : !subject
                                                            ? "Enter Subject above"
                                                            : !body
                                                                ? "Describe your issue above"
                                                                : "Create Support Ticket"] }), submitting && (0, jsx_runtime_1.jsx)(loading_1.default, { style: { fontSize: "32pt" } }), submitError && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "error", message: "Error creating support ticket", description: submitError, closable: true, showIcon: true, onClose: () => setSubmitError(""), style: { margin: "15px auto", maxWidth: "500px" } }), (0, jsx_runtime_1.jsx)("br", {}), contactEmail && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["If you continue to have problems, email us directly at", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: `mailto:${contactEmail}`, children: contactEmail }), "."] }))] })), success && ((0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "success", message: "Successfully created support ticket", description: success, onClose: () => {
                                        // simplest way to reset all the information in the form.
                                        router.reload();
                                    }, closable: true, showIcon: true, style: { margin: "15px auto", maxWidth: "500px" } }))] })] })] }) }));
}
exports.default = Create;
function Files({ onChange }) {
    return ((0, jsx_runtime_1.jsxs)(VSpace, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Relevant Files" }), "Select any relevant projects and files below. This will make it much easier for us to quickly understand your problem.", (0, jsx_runtime_1.jsx)(recent_files_1.default, { interval: "1 day", onChange: onChange })] }));
}
function Problem({ onChange }) {
    const answers = (0, react_1.useRef)(["", "", ""]);
    function update(i, value) {
        answers.current[i] = value;
        onChange?.(answers.current.join("\n\n\n").trim());
    }
    return ((0, jsx_runtime_1.jsxs)(VSpace, { children: [(0, jsx_runtime_1.jsx)("b", { children: "What did you do exactly?" }), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { rows: 3, placeholder: "Describe what you did...", onChange: (e) => update(0, e.target.value
                    ? "\n\nWHAT DID YOU DO EXACTLY?\n\n" + e.target.value
                    : "") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "What happened?" }), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { rows: 3, placeholder: "Tell us what happened...", onChange: (e) => update(1, e.target.value ? "\n\nWHAT HAPPENED?\n\n" + e.target.value : "") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "How did this differ from what you expected?" }), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { rows: 3, placeholder: "Explain how this differs from what you expected...", onChange: (e) => update(2, e.target.value
                    ? "\n\nHOW DID THIS DIFFER FROM WHAT YOU EXPECTED?\n\n" +
                        e.target.value
                    : "") })] }));
}
function Question({ defaultValue, onChange }) {
    return ((0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { rows: 8, defaultValue: defaultValue, placeholder: "Your question...", onChange: (e) => onChange(e.target.value) }));
}
function Task({ onChange }) {
    const answers = (0, react_1.useRef)(["", "", ""]);
    function update(i, value) {
        answers.current[i] = value;
        onChange?.(answers.current.join("\n\n\n").trim());
    }
    return ((0, jsx_runtime_1.jsxs)("div", { children: ["Each ", (0, jsx_runtime_1.jsx)(site_name_1.default, {}), " project is a Docker image running Ubuntu Linux on 64-bit x86 hardware, so it is possible for us to install most standard Linux software, and we have already installed", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "/software", children: "a huge amount" }), ". If there is something you need that is missing, let us know below.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "What software do you need?" }), " In particular, if this is a Python library, explain which of the", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "software/python", children: "many Python environments" }), " you need it installed into and why you can't just", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://doc.cocalc.com/howto/install-python-lib.html", children: "install it yourself" }), ".", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { style: { marginTop: "10px" }, rows: 4, placeholder: "Describe what software you need installed...", onChange: (e) => update(0, e.target.value
                    ? "\n\nWHAT SOFTWARE DO YOU NEED?\n\n" + e.target.value
                    : "") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "How do you plan to use this software?" }), " For example, does it need to be installed across ", (0, jsx_runtime_1.jsx)(site_name_1.default, {}), " for a course you are teaching that starts in 3 weeks?", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { style: { marginTop: "10px" }, rows: 3, placeholder: "Explain how you will use the software ...", onChange: (e) => update(1, e.target.value
                    ? "\n\nHOW DO YOU PLAN TO USE THIS SOFTWARE?\n\n" + e.target.value
                    : "") }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("b", { children: "How can we test that the software is properly installed?" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { style: { marginTop: "10px" }, rows: 3, placeholder: "Explain how we can test the software...", onChange: (e) => update(2, e.target.value
                    ? "\n\nHOW CAN WE TEST THAT THE SOFTWARE IS PROPERLY INSTALLED?\n\n" +
                        e.target.value
                    : "") })] }));
}
function Instructions() {
    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("p", { children: ["If the above links don't help you solve your problem, please create a support ticket below. Support is currently available in", " ", (0, jsx_runtime_1.jsx)("b", { children: "English and German" }), " only."] }) }));
}
function FAQ() {
    return ((0, jsx_runtime_1.jsxs)("div", { children: [" ", (0, jsx_runtime_1.jsx)("h2", { children: "Helpful Links" }), (0, jsx_runtime_1.jsx)(antd_1.Alert, { message: "", style: { margin: "20px 30px" }, type: "warning", description: (0, jsx_runtime_1.jsxs)("ul", { style: { marginBottom: 0, fontSize: "11pt" }, children: [(0, jsx_runtime_1.jsxs)("li", { children: ["I just want to", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://github.com/sagemathinc/cocalc/discussions", children: "search other questions or start a discussion about CoCalc..." })] }), (0, jsx_runtime_1.jsxs)("li", { children: [" ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://doc.cocalc.com/howto/missing-project.html", children: "My file or project is gone..." }), " "] }), (0, jsx_runtime_1.jsxs)("li", { children: [" ", "My Jupyter notebook or SageMath worksheet is", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://doc.cocalc.com/howto/slow-worksheet.html", children: "slow" }), " ", "or", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://doc.cocalc.com/howto/jupyter-kernel-terminated.html", children: "crashing..." })] }), (0, jsx_runtime_1.jsxs)("li", { children: [" ", "I have", " ", (0, jsx_runtime_1.jsx)(A_1.default, { href: "https://doc.cocalc.com/howto/sage-question.html", children: "questions about SageMath..." })] })] }) })] }));
}
function Status({ done }) {
    return ((0, jsx_runtime_1.jsx)(icon_1.Icon, { style: {
            color: done ? "green" : "red",
            fontWeight: "bold",
            fontSize: "12pt",
        }, name: done ? "check" : "arrow-right" }));
}
//# sourceMappingURL=create.js.map