@databiosphere/findable-ui 0.0.0

package/lib/components/Support/components/SupportRequest/components/Dropzone/dropzone.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DropzoneProps as ReactDropzoneProps } from "react-dropzone";
+export interface DropzoneProps extends ReactDropzoneProps {
+    activeStyle?: React.CSSProperties;
+}
+export declare const Dropzone: ({ activeStyle, children, disabled, ...props }: DropzoneProps) => JSX.Element;
+export default Dropzone;

package/lib/components/Support/components/SupportRequest/components/Dropzone/dropzone.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropzone = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const react_dropzone_1 = require("react-dropzone");
+const Dropzone = (_a) => {
+    var { activeStyle = {}, children, disabled = false } = _a, props = __rest(_a, ["activeStyle", "children", "disabled"]);
+    const state = (0, react_dropzone_1.useDropzone)(Object.assign({ disabled, 
+        // Disable native files selection dialog - we'll handle this manually
+        noClick: true, 
+        // Disable space/enter to open native files selection dialog
+        noKeyboard: true }, props));
+    const { getInputProps, getRootProps } = state;
+    return (react_1.default.createElement(material_1.Box, Object.assign({ component: "div" }, getRootProps(), { sx: state.isDragActive ? activeStyle : {} }),
+        react_1.default.createElement("input", Object.assign({}, getInputProps())),
+        children ? children(state) : null));
+};
+exports.Dropzone = Dropzone;
+exports.default = exports.Dropzone;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.d.ts

@@ -0,0 +1,40 @@
+import { FormOption, FormState } from "./entities";
+export declare const CONSTRAINTS: {
+    attachmentToken: {
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+    description: {
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+    email: {
+        email: boolean;
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+    name: {
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+    subject: {
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+    type: {
+        presence: {
+            allowEmpty: boolean;
+        };
+    };
+};
+export declare const DEFAULT_FORM_STATE: FormState;
+export declare const DRAGGING_STYLE: {
+    cursor: string;
+};
+export declare const MAX_ATTACHMENT_SIZE: number;
+export declare const OPTIONS: FormOption[];

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/constants.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OPTIONS = exports.MAX_ATTACHMENT_SIZE = exports.DRAGGING_STYLE = exports.DEFAULT_FORM_STATE = exports.CONSTRAINTS = void 0;
+const entities_1 = require("./entities");
+// Validation constraints
+exports.CONSTRAINTS = {
+    [entities_1.FORM_CONTROL_NAME.ATTACHMENT_TOKEN]: { presence: { allowEmpty: true } },
+    [entities_1.FORM_CONTROL_NAME.DESCRIPTION]: { presence: { allowEmpty: false } },
+    [entities_1.FORM_CONTROL_NAME.EMAIL]: { email: true, presence: { allowEmpty: false } },
+    [entities_1.FORM_CONTROL_NAME.NAME]: { presence: { allowEmpty: false } },
+    [entities_1.FORM_CONTROL_NAME.SUBJECT]: { presence: { allowEmpty: false } },
+    [entities_1.FORM_CONTROL_NAME.TYPE]: { presence: { allowEmpty: false } },
+};
+// Default form state.
+exports.DEFAULT_FORM_STATE = {
+    attachmentName: "",
+    attachmentRejected: false,
+    attachmentRejections: [],
+    attachmentToken: "",
+    attachmentUploading: false,
+    [entities_1.FORM_CONTROL_NAME.DESCRIPTION]: "",
+    [entities_1.FORM_CONTROL_NAME.EMAIL]: "",
+    [entities_1.FORM_CONTROL_NAME.NAME]: "",
+    [entities_1.FORM_CONTROL_NAME.SUBJECT]: "",
+    [entities_1.FORM_CONTROL_NAME.TYPE]: "",
+    submitError: false,
+    submitted: false,
+    submitting: false,
+    touched: {},
+};
+// Active drag styles.
+exports.DRAGGING_STYLE = {
+    cursor: "copy",
+};
+// Max file attachment
+exports.MAX_ATTACHMENT_SIZE = 20 * 1024 * 1024;
+// Set up "Message topic" select options, selected value and styles.
+exports.OPTIONS = [
+    { label: "Question", value: "question" },
+    { label: "Bug", value: "bug" },
+    { label: "Feature Request", value: "feature_request" },
+];

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/entities.d.ts

@@ -0,0 +1,54 @@
+import { FileRejection } from "react-dropzone";
+export declare enum REQUEST_FIELD_ID {
+    DESCRIPTION = "DESCRIPTION",
+    EMAIL = "EMAIL",
+    SUBJECT = "SUBJECT",
+    TICKET_FORM_ID = "TICKET_FORM_ID",
+    TYPE = "TYPE"
+}
+export declare enum FORM_CONTROL_LABEL {
+    ATTACHMENT_TOKEN = "Attachment (optional)",
+    DESCRIPTION = "How can we help you?",
+    EMAIL = "Your email address",
+    NAME = "Your Name",
+    SUBJECT = "Subject",
+    TYPE = "Message topic"
+}
+export declare enum FORM_CONTROL_NAME {
+    ATTACHMENT_TOKEN = "attachmentToken",
+    DESCRIPTION = "description",
+    EMAIL = "email",
+    NAME = "name",
+    SUBJECT = "subject",
+    TYPE = "type"
+}
+export declare type FormControlValue = Record<FORM_CONTROL_NAME, string>;
+export interface FormState extends FormControlValue {
+    attachmentName: string;
+    attachmentRejected: boolean;
+    attachmentRejections: FileRejection["errors"];
+    attachmentUploading: boolean;
+    submitError: boolean;
+    submitted: boolean;
+    submitting: boolean;
+    touched: Touched;
+}
+export interface FormOption {
+    disabled?: boolean;
+    label: string;
+    value: string;
+}
+export declare type Touched = {
+    [key in FORM_CONTROL_NAME]?: boolean;
+};
+export interface UploadAttachment {
+    file_name: string;
+}
+export interface UploadResponse {
+    attachment: UploadAttachment;
+    token: string;
+}
+export declare type RequestValue = FormControlValue;
+export declare type ValidateResponse = {
+    [key in FORM_CONTROL_NAME]: string[];
+};

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/entities.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FORM_CONTROL_NAME = exports.FORM_CONTROL_LABEL = exports.REQUEST_FIELD_ID = void 0;
+var REQUEST_FIELD_ID;
+(function (REQUEST_FIELD_ID) {
+    REQUEST_FIELD_ID["DESCRIPTION"] = "DESCRIPTION";
+    REQUEST_FIELD_ID["EMAIL"] = "EMAIL";
+    REQUEST_FIELD_ID["SUBJECT"] = "SUBJECT";
+    REQUEST_FIELD_ID["TICKET_FORM_ID"] = "TICKET_FORM_ID";
+    REQUEST_FIELD_ID["TYPE"] = "TYPE";
+})(REQUEST_FIELD_ID = exports.REQUEST_FIELD_ID || (exports.REQUEST_FIELD_ID = {}));
+var FORM_CONTROL_LABEL;
+(function (FORM_CONTROL_LABEL) {
+    FORM_CONTROL_LABEL["ATTACHMENT_TOKEN"] = "Attachment (optional)";
+    FORM_CONTROL_LABEL["DESCRIPTION"] = "How can we help you?";
+    FORM_CONTROL_LABEL["EMAIL"] = "Your email address";
+    FORM_CONTROL_LABEL["NAME"] = "Your Name";
+    FORM_CONTROL_LABEL["SUBJECT"] = "Subject";
+    FORM_CONTROL_LABEL["TYPE"] = "Message topic";
+})(FORM_CONTROL_LABEL = exports.FORM_CONTROL_LABEL || (exports.FORM_CONTROL_LABEL = {}));
+var FORM_CONTROL_NAME;
+(function (FORM_CONTROL_NAME) {
+    FORM_CONTROL_NAME["ATTACHMENT_TOKEN"] = "attachmentToken";
+    FORM_CONTROL_NAME["DESCRIPTION"] = "description";
+    FORM_CONTROL_NAME["EMAIL"] = "email";
+    FORM_CONTROL_NAME["NAME"] = "name";
+    FORM_CONTROL_NAME["SUBJECT"] = "subject";
+    FORM_CONTROL_NAME["TYPE"] = "type";
+})(FORM_CONTROL_NAME = exports.FORM_CONTROL_NAME || (exports.FORM_CONTROL_NAME = {}));

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/utils.d.ts

@@ -0,0 +1,23 @@
+import { RequestValue, REQUEST_FIELD_ID, UploadResponse } from "./entities";
+/**
+ * Create support request.
+ * @param url - Request URL.
+ * @param requestValue - Request values.
+ * @param FIELD_ID - Request field IDs.
+ * @returns support request response.
+ */
+export declare function createSupportRequest(url: string, requestValue: RequestValue, FIELD_ID: Record<REQUEST_FIELD_ID, number>): Promise<Response>;
+/**
+ * Returns support request options.
+ * @param requestValue - Request values.
+ * @param FIELD_ID - Request field IDs.
+ * @returns request options.
+ */
+export declare function getSupportRequestOptions(requestValue: RequestValue, FIELD_ID: Record<REQUEST_FIELD_ID, number>): RequestInit;
+/**
+ * Upload file to add as attachment to request.
+ * @param url - Upload URL.
+ * @param file - File.
+ * @returns upload response.
+ */
+export declare function uploadAttachment<T extends File>(url: string, file: T): Promise<UploadResponse>;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/common/utils.js

@@ -0,0 +1,95 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadAttachment = exports.getSupportRequestOptions = exports.createSupportRequest = void 0;
+/**
+ * Create support request.
+ * @param url - Request URL.
+ * @param requestValue - Request values.
+ * @param FIELD_ID - Request field IDs.
+ * @returns support request response.
+ */
+function createSupportRequest(url, requestValue, FIELD_ID) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield fetchWithErrorRejection(url, getSupportRequestOptions(requestValue, FIELD_ID));
+    });
+}
+exports.createSupportRequest = createSupportRequest;
+/**
+ * Returns support request options.
+ * @param requestValue - Request values.
+ * @param FIELD_ID - Request field IDs.
+ * @returns request options.
+ */
+function getSupportRequestOptions(requestValue, FIELD_ID) {
+    const { attachmentToken, description, email, name, subject, type } = requestValue;
+    const requestedFromUrl = window.location.href;
+    return {
+        body: JSON.stringify({
+            request: {
+                comment: {
+                    body: `${description}\n\n------------------\nSubmitted from: ${requestedFromUrl}`,
+                    uploads: [attachmentToken],
+                },
+                custom_fields: [
+                    { id: FIELD_ID.EMAIL, value: email },
+                    { id: FIELD_ID.DESCRIPTION, value: description },
+                    { id: FIELD_ID.SUBJECT, value: subject },
+                    { id: FIELD_ID.TYPE, value: type },
+                ],
+                requester: {
+                    email,
+                    name,
+                },
+                subject,
+                ticket_form_id: FIELD_ID.TICKET_FORM_ID,
+            },
+        }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+    };
+}
+exports.getSupportRequestOptions = getSupportRequestOptions;
+/**
+ * Upload file to add as attachment to request.
+ * @param url - Upload URL.
+ * @param file - File.
+ * @returns upload response.
+ */
+function uploadAttachment(url, file) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetchWithErrorRejection(`${url}?filename=${file.name}`, {
+            body: file,
+            headers: {
+                "Content-Type": "application/binary",
+            },
+            method: "POST",
+        });
+        const json = yield res.json();
+        return json.upload;
+    });
+}
+exports.uploadAttachment = uploadAttachment;
+/**
+ * Execute fetch, throwing error on non-200 response.
+ * @param input - Request URL.
+ * @param options - Request options.
+ * @returns response.
+ */
+function fetchWithErrorRejection(input, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const res = yield fetch(input, options);
+        if (res.ok) {
+            return res;
+        }
+        throw res;
+    });
+}

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from "react";
+import { SupportRequest } from "../../supportRequest";
+export interface SupportRequestFormProps {
+    setFormSubmitted: Dispatch<SetStateAction<boolean>>;
+    supportRequest: SupportRequest;
+}
+export declare const SupportRequestForm: ({ setFormSubmitted, supportRequest, }: SupportRequestFormProps) => JSX.Element;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.js

@@ -0,0 +1,166 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupportRequestForm = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const validate_js_1 = __importDefault(require("validate.js"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const buttonPrimary_1 = require("../../../../../common/Button/components/ButtonPrimary/buttonPrimary");
+const input_1 = require("../../../../../common/Form/components/Input/input");
+const select_1 = require("../../../../../common/Form/components/Select/select");
+const uploadFile_1 = require("../../../../../common/Form/components/UploadFile/uploadFile");
+const paper_styles_1 = require("../../../../../common/Paper/paper.styles");
+const section_styles_1 = require("../../../../../common/Section/section.styles");
+const dropzone_1 = __importDefault(require("../Dropzone/dropzone"));
+const constants_1 = require("./common/constants");
+const entities_1 = require("./common/entities");
+const utils_1 = require("./common/utils");
+const supportRequestForm_styles_1 = require("./supportRequestForm.styles");
+const SupportRequestForm = ({ setFormSubmitted, supportRequest, }) => {
+    const [formState, setFormState] = (0, react_1.useState)(constants_1.DEFAULT_FORM_STATE);
+    const errors = (0, validate_js_1.default)(buildSupportRequest(formState), constants_1.CONSTRAINTS); // Determine error state of form
+    const { FIELD_ID, requestURL, uploadURL } = supportRequest;
+    // Delete attachment.
+    const onAttachmentDeleted = () => {
+        setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentToken: "" })));
+    };
+    // Upload file to add as attachment to request.
+    const onAttachmentDropped = (files) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: false, attachmentRejections: [], attachmentUploading: true })));
+            const response = yield (0, utils_1.uploadAttachment)(uploadURL, files[0]);
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentName: response.attachment.file_name, attachmentToken: response.token, attachmentUploading: false })));
+        }
+        catch (error) {
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: true, attachmentRejections: [], attachmentUploading: false })));
+            console.log(error);
+        }
+    });
+    // Attachment has been rejected (on drop of file).
+    const onAttachmentRejected = (fileRejections) => {
+        // We can assume there is a single error as we are not doing multiple uploads.
+        const rejection = fileRejections[0] || {};
+        setFormState((formState) => (Object.assign(Object.assign({}, formState), { attachmentRejected: true, attachmentRejections: rejection.errors })));
+    };
+    // Indicate input/select field has been touched.
+    const onBlur = (event) => {
+        const target = event.target;
+        setFormState((formState) => (Object.assign(Object.assign({}, formState), { touched: Object.assign(Object.assign({}, formState.touched), { [target.name]: true }) })));
+    };
+    // Bind input value to state.
+    const onInputChange = (event) => {
+        const target = event.target;
+        const value = target.value;
+        const name = target.name;
+        setFormState((formState) => (Object.assign(Object.assign({}, formState), { [name]: value })));
+    };
+    // Updates form state with the selected question type.
+    const onSelectChange = (event) => {
+        setFormState((formState) => (Object.assign(Object.assign({}, formState), { type: event.target.value })));
+    };
+    // Handle submit of support request form.
+    const onSupportRequestSubmitted = () => __awaiter(void 0, void 0, void 0, function* () {
+        const request = buildSupportRequest(formState);
+        try {
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitError: false, submitting: true })));
+            yield (0, utils_1.createSupportRequest)(requestURL, request, FIELD_ID);
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitted: true, submitting: false })));
+            setFormSubmitted(true); // Shows form submitted message.
+            // Execute GTM tracking.
+            // TODO(cc) add GTM tracking.
+        }
+        catch (error) {
+            setFormState((formState) => (Object.assign(Object.assign({}, formState), { submitError: true, submitting: false })));
+            console.log(error);
+        }
+    });
+    return (react_1.default.createElement(dropzone_1.default, { activeStyle: constants_1.DRAGGING_STYLE, disabled: Boolean(formState[entities_1.FORM_CONTROL_NAME.ATTACHMENT_TOKEN]), maxSize: constants_1.MAX_ATTACHMENT_SIZE, multiple: false, onDropAccepted: onAttachmentDropped, onDropRejected: onAttachmentRejected }, ({ isDragActive, open }) => (react_1.default.createElement(paper_styles_1.GridPaper, null,
+        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
+            react_1.default.createElement(section_styles_1.SectionContent, null,
+                react_1.default.createElement(supportRequestForm_styles_1.Title, null, "Contact Us"),
+                react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_400 }, "We\u2019re here to help and answer any questions you might have. We look forward to hearing from you!"))),
+        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
+            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.NAME), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.NAME]), label: entities_1.FORM_CONTROL_LABEL.NAME, name: entities_1.FORM_CONTROL_NAME.NAME, onBlur: onBlur, onChange: onInputChange }),
+            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.EMAIL), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.EMAIL]), label: entities_1.FORM_CONTROL_LABEL.EMAIL, name: entities_1.FORM_CONTROL_NAME.EMAIL, onBlur: onBlur, onChange: onInputChange }),
+            react_1.default.createElement(select_1.Select, { displayEmpty: true, error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.TYPE), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.TYPE]), label: entities_1.FORM_CONTROL_LABEL.TYPE, name: entities_1.FORM_CONTROL_NAME.TYPE, onBlur: onBlur, onChange: onSelectChange, renderValue: renderSelectValue, value: formState[entities_1.FORM_CONTROL_NAME.TYPE], variant: "outlined" }, constants_1.OPTIONS.map(({ label, value }) => (react_1.default.createElement(material_1.MenuItem, { key: value, value: value }, label)))),
+            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.SUBJECT), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.SUBJECT]), label: entities_1.FORM_CONTROL_LABEL.SUBJECT, name: entities_1.FORM_CONTROL_NAME.SUBJECT, onBlur: onBlur, onChange: onInputChange }),
+            react_1.default.createElement(input_1.Input, { error: isFieldError(formState, errors, entities_1.FORM_CONTROL_NAME.DESCRIPTION), isFilled: Boolean(formState[entities_1.FORM_CONTROL_NAME.DESCRIPTION]), label: entities_1.FORM_CONTROL_LABEL.DESCRIPTION, multiline: true, name: entities_1.FORM_CONTROL_NAME.DESCRIPTION, onBlur: onBlur, onChange: onInputChange, placeholder: "Enter a decription", rows: 2 }),
+            react_1.default.createElement(uploadFile_1.UploadFile, Object.assign({ isDragActive: isDragActive, label: entities_1.FORM_CONTROL_LABEL.ATTACHMENT_TOKEN, onAttachmentDeleted: onAttachmentDeleted, open: open }, formState))),
+        react_1.default.createElement(supportRequestForm_styles_1.Section, null,
+            react_1.default.createElement(section_styles_1.SectionActions, null,
+                react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { disabled: Boolean(errors) || formState.submitting, fullWidth: true, onClick: onSupportRequestSubmitted }, "Send")))))));
+};
+exports.SupportRequestForm = SupportRequestForm;
+/**
+ * Build support request model from form values.
+ * @param formState - Form State.
+ * @returns support request.
+ */
+function buildSupportRequest(formState) {
+    const { attachmentToken, description, email, name, subject, type } = formState;
+    return {
+        attachmentToken,
+        description,
+        email,
+        name,
+        subject,
+        type,
+    };
+}
+/**
+ * Returns true if the given field is touched and has an error.
+ * @param formState - Form state.
+ * @param error - Validate.js error object.
+ * @param fieldName - Field name.
+ * @returns true if the given field has an error.
+ */
+function isFieldError(formState, error, fieldName) {
+    const hasError = Boolean(error === null || error === void 0 ? void 0 : error[fieldName]);
+    const isTouched = Boolean(formState.touched[fieldName]);
+    return isTouched && hasError;
+}
+/**
+ * Renders select value.
+ * @param value - Select value.
+ * @returns select value.
+ */
+function renderSelectValue(value) {
+    var _a;
+    const label = (_a = constants_1.OPTIONS.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label;
+    return label || "Choose subject";
+}

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const Section: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Support/components/SupportRequest/components/SupportRequestForm/supportRequestForm.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = exports.Title = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const fonts_1 = require("../../../../../../styles/common/mixins/fonts");
+const section_styles_1 = require("../../../../../common/Section/section.styles");
+exports.Title = styled_1.default.h3 `
+  ${fonts_1.textHeadingSmall};
+  margin: 0;
+`;
+exports.Section = (0, styled_1.default)(section_styles_1.GridPaperSection) `
+  min-width: 0;
+`;

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface SupportRequestSubmittedProps {
+    description?: ReactNode;
+    title?: ReactNode;
+}
+export declare const SupportRequestSubmitted: ({ description, title, }: SupportRequestSubmittedProps) => JSX.Element;

package/lib/components/Support/components/SupportRequest/components/SupportRequestSubmitted/supportRequestSubmitted.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupportRequestSubmitted = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const emailReadIcon_1 = require("../../../../../common/CustomIcon/components/EmailReadIcon/emailReadIcon");
+const iconBadge_1 = require("../../../../../common/IconBadge/iconBadge");
+const section_styles_1 = require("../../../../../common/Section/section.styles");
+const SupportRequestSubmitted = ({ description = "Your request has been submitted.", title = "Thank You!", }) => {
+    return (react_1.default.createElement(section_styles_1.Section, null,
+        react_1.default.createElement(section_styles_1.SectionContent, null,
+            react_1.default.createElement(iconBadge_1.IconBadge, { color: iconBadge_1.ICON_BADGE_COLOR.SUCCESS, Icon: emailReadIcon_1.EmailReadIcon }),
+            react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_HEADING_SMALL }, title),
+            react_1.default.createElement(material_1.Typography, { color: "ink.light", variant: typography_1.TEXT_BODY_400 }, description))));
+};
+exports.SupportRequestSubmitted = SupportRequestSubmitted;

package/lib/components/Support/components/SupportRequest/supportRequest.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { REQUEST_FIELD_ID } from "./components/SupportRequestForm/common/entities";
+export interface SupportRequest {
+    FIELD_ID: Record<REQUEST_FIELD_ID, number>;
+    requestURL: string;
+    uploadURL: string;
+}
+export interface SupportRequestProps {
+    supportRequest: SupportRequest;
+}
+export declare const SupportRequest: ({ supportRequest, }: SupportRequestProps) => JSX.Element;

package/lib/components/Support/components/SupportRequest/supportRequest.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SupportRequest = void 0;
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("./components/Dialog/dialog");
+const supportRequestForm_1 = require("./components/SupportRequestForm/supportRequestForm");
+const supportRequestSubmitted_1 = require("./components/SupportRequestSubmitted/supportRequestSubmitted");
+const SupportRequest = ({ supportRequest, }) => {
+    const [formSubmitted, setFormSubmitted] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(dialog_1.FormDialog, { setFormSubmitted: setFormSubmitted }, formSubmitted ? (react_1.default.createElement(supportRequestSubmitted_1.SupportRequestSubmitted, null)) : (react_1.default.createElement(supportRequestForm_1.SupportRequestForm, { setFormSubmitted: setFormSubmitted, supportRequest: supportRequest }))));
+};
+exports.SupportRequest = SupportRequest;

package/lib/components/Support/components/ViewSupport/viewSupport.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from "react";
+import { ANCHOR_TARGET } from "../../../Links/common/entities";
+/**
+ * View support button component.
+ * Navigates to support URL provided.
+ */
+export interface ViewSupportProps {
+    className?: string;
+    Icon?: ElementType;
+    target?: ANCHOR_TARGET;
+    url: string;
+}
+export declare const ViewSupport: ({ className, Icon, target, url, }: ViewSupportProps) => JSX.Element;

package/lib/components/Support/components/ViewSupport/viewSupport.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewSupport = void 0;
+const react_1 = __importDefault(require("react"));
+const contactSupportIcon_1 = require("../../../common/CustomIcon/components/ContactSupportIcon/contactSupportIcon");
+const entities_1 = require("../../../Links/common/entities");
+const viewSupport_styles_1 = require("./viewSupport.styles");
+const ViewSupport = ({ className, Icon = contactSupportIcon_1.ContactSupportIcon, target = entities_1.ANCHOR_TARGET.BLANK, url, }) => {
+    return (react_1.default.createElement(viewSupport_styles_1.Fab, { className: className, href: url, target: target },
+        react_1.default.createElement(Icon, { fontSize: "inherit" })));
+};
+exports.ViewSupport = ViewSupport;