@equinor/mad-core
Version:
Core library for the Mobile App Delivery team
159 lines (156 loc) • 6.62 kB
JavaScript
import {
UserInfo
} from "./chunk-3WUJAVUO.js";
import {
createIncident
} from "./chunk-NJ5W3O5I.js";
import {
useAccountOrDemoAccount
} from "./chunk-WWF7QKDX.js";
import {
useEnvironment,
useServiceNow
} from "./chunk-GEEFQMRN.js";
// src/components/screens/create-incident/CreateIncidentScreen.tsx
import {
Button,
Cell,
EDSStyleSheet,
Spacer,
TextField,
Typography,
useStyles
} from "@equinor/mad-components";
import * as Device from "expo-device";
import * as Localization from "expo-localization";
import React, { useState } from "react";
import { KeyboardAvoidingView, LayoutAnimation, Platform, ScrollView, View } from "react-native";
var CreateIncidentScreen = () => {
var _a, _b, _c, _d;
const [error, setError] = useState(null);
const [ticketNumber, setTicketNumber] = useState(void 0);
const [ticketTitle, setTicketTitle] = useState(void 0);
const [ticketDescription, setTicketDescription] = useState(void 0);
const [isSending, setIsSending] = useState(false);
const account = useAccountOrDemoAccount();
const serviceNowConfigurationItem = useServiceNow();
const environment = useEnvironment();
const styles = useStyles(createIncidentStyles);
const timeZone = (_b = (_a = Localization.getCalendars()[0]) == null ? void 0 : _a.timeZone) != null ? _b : "Unknown TimeZone";
const locale = (_d = (_c = Localization.getLocales()[0]) == null ? void 0 : _c.languageTag) != null ? _d : "Unknown Locale";
const onSubmit = () => {
setIsSending(true);
const data = {
callerEmail: account == null ? void 0 : account.username,
title: ticketTitle,
description: createDescription()
};
createIncident(data, environment, serviceNowConfigurationItem).then((response) => {
LayoutAnimation.configureNext({
duration: 500,
update: {
type: LayoutAnimation.Types.easeInEaseOut
},
create: {
type: LayoutAnimation.Types.easeInEaseOut,
property: LayoutAnimation.Properties.opacity
}
});
if (response.result.details.number) {
setTicketNumber(response.result.details.number);
} else {
setError(response);
}
setTicketDescription(void 0);
setTicketTitle(void 0);
setIsSending(false);
}).catch(setError).finally(() => setIsSending(false));
};
const createDescription = () => {
let description = "";
description += `User: ${account == null ? void 0 : account.username}
`;
description += `Device Brand: ${Device.brand}
`;
description += `Device: ${Device.deviceName}
`;
description += `Operating System: ${Device.osVersion}
`;
description += `Time Zone: ${timeZone}
`;
description += `Locale: ${locale}
`;
return `${description}
${ticketDescription}`;
};
return /* @__PURE__ */ React.createElement(
KeyboardAvoidingView,
{
behavior: "padding",
keyboardVerticalOffset: 115,
style: styles.container
},
/* @__PURE__ */ React.createElement(ScrollView, { contentInsetAdjustmentBehavior: "automatic" }, /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement(Cell, null, /* @__PURE__ */ React.createElement(View, { style: styles.topTextContainer }, /* @__PURE__ */ React.createElement(Typography, { variant: "h1" }, "Create ticket in ServiceNow"), /* @__PURE__ */ React.createElement(Typography, { group: "paragraph", variant: "body_short" }, "We collect information about your device as part of our feedback process. By submitting, you agree to share the following information:")), /* @__PURE__ */ React.createElement(UserInfo, { infoType: "User", infoValue: account == null ? void 0 : account.username }), Platform.OS !== "web" && /* @__PURE__ */ React.createElement(UserInfo, { infoType: "Device Brand", infoValue: Device.brand }), Platform.OS !== "web" && /* @__PURE__ */ React.createElement(UserInfo, { infoType: "Device", infoValue: Device.deviceName }), /* @__PURE__ */ React.createElement(UserInfo, { infoType: "Operating System", infoValue: Device.osVersion }), /* @__PURE__ */ React.createElement(UserInfo, { infoType: "Time Zone", infoValue: timeZone }), /* @__PURE__ */ React.createElement(UserInfo, { infoType: "Locale", infoValue: locale }), ticketNumber && /* @__PURE__ */ React.createElement(View, { style: [styles.popupBox, styles.popupSuccess] }, /* @__PURE__ */ React.createElement(Typography, null, "Ticket number: "), /* @__PURE__ */ React.createElement(Typography, { selectable: true }, ticketNumber)), error && /* @__PURE__ */ React.createElement(View, { style: [styles.popupBox, styles.popupDanger] }, /* @__PURE__ */ React.createElement(Typography, null, "An error occurred creating your ticket:"), /* @__PURE__ */ React.createElement(Typography, { selectable: true }, error instanceof Error ? error.message : "")), /* @__PURE__ */ React.createElement(View, { style: styles.titleField }, /* @__PURE__ */ React.createElement(
TextField,
{
onChange: setTicketTitle,
value: ticketTitle,
placeholder: "Write a title for the Service Now ticket",
readOnly: isSending
}
)), /* @__PURE__ */ React.createElement(View, { style: styles.titleField }, /* @__PURE__ */ React.createElement(
TextField,
{
multiline: true,
onChange: setTicketDescription,
placeholder: "Write a complete description of your issue. You do not need to provide information about your device.",
value: ticketDescription,
readOnly: isSending
}
)), /* @__PURE__ */ React.createElement(View, { style: styles.buttonContainer }, /* @__PURE__ */ React.createElement(
Button,
{
disabled: !ticketTitle || !ticketDescription || isSending,
onPress: onSubmit,
style: { width: 81 },
title: "Send"
}
))))
);
};
var createIncidentStyles = EDSStyleSheet.create((theme) => ({
container: {
flex: 1
},
topTextContainer: {
paddingBottom: theme.geometry.dimension.cell.minHeight
},
titleField: {
marginVertical: theme.spacing.textField.paddingVertical * 3
},
multiTextField: {
height: theme.geometry.dimension.dialog.minHeight
},
buttonContainer: {
flexDirection: "row",
justifyContent: "flex-end"
},
popupBox: {
padding: 24,
marginTop: 16,
borderWidth: 2,
borderRadius: 4,
flexDirection: "row",
gap: 8,
flexWrap: "wrap"
},
popupDanger: {
borderColor: theme.colors.feedback.danger
},
popupSuccess: {
borderColor: theme.colors.feedback.success
}
}));
export {
CreateIncidentScreen
};