@rh-support/troubleshoot 2.6.82 → 2.6.83

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkBnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA6WnD"}
+{"version":3,"file":"RequestEscalationModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAqBnD,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,qBA4zBnD"}

package/lib/esm/components/CaseEditView/ActiveCustomerEscalation/RequestEscalationModal.js

@@ -8,9 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { escalations, publicApi } from '@cee-eng/hydrajs';
-import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, ModalBody, ModalFooter, ModalHeader, Popover, TextArea, TextInput, Title, ValidatedOptions, } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { AlertMessage, AlertType, LoadingIndicator, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
+import { Button, Form, FormGroup, FormHelperText, Grid, GridItem, HelperText, HelperTextItem, Modal, ModalBody, ModalHeader, ModalVariant, Radio, TextArea, TextInput, TimePicker, Title, ValidatedOptions, Wizard, WizardStep, } from '@patternfly/react-core';
+import { AlertMessage, AlertType, PhoneInput, SingleSelectDropdown, ToastNotification, useFetch, } from '@rh-support/components';
 import { useGlobalStateContext } from '@rh-support/react-context';
 import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
@@ -19,12 +18,13 @@ import { useCaseDispatch } from '../../../context/CaseContext';
 import { useCaseDetailsPageDispatchContext, useCaseDetailsPageStateContext, } from '../../../context/CaseDetailsPageContext';
 import { useCaseDiscussionTabDispatchContext, useCaseDiscussionTabStateContext, } from '../../../context/CaseDiscussionTabContext';
 import { CustomerGEOs } from '../../../enums/customerGEOs';
-import { ESCALATION_SUBJECT_LENGTH_LIMIT } from '../../../reducers/CaseConstNTypes';
+import { ESCALATION_SUBJECT_LENGTH_LIMIT, TIMEZONE_OPTIONS, } from '../../../reducers/CaseConstNTypes';
 import { fetchCaseEscalations } from '../../../reducers/CaseDetailsPageReducer';
 import { updateDiscussionStateComments } from '../../../reducers/CaseDiscussionTabReducer';
 import { checkForCaseStatusToggleOnAttachOrComment, fetchCaseDetails } from '../../../reducers/CaseReducer';
 const customerGEOKeys = Object.keys(CustomerGEOs);
 export function RequestEscalationModal(props) {
+    var _a;
     const { globalMetadataState: { loggedInUser, loggedInUserRights }, } = useGlobalStateContext();
     const { t } = useTranslation();
     const [categories, setCategories] = useState([]);
@@ -35,12 +35,55 @@ export function RequestEscalationModal(props) {
         geo: '',
         businessImpactDescription: '',
         rmeCategory: '',
+        contactName: '',
+        contactTitle: '',
+        contactPreference: '',
+        countryCode: '',
+        phoneNumber: '',
+        timezone: '',
+        preferredTimeFrom: '',
+        preferredTimeTo: '',
     };
     const [formState, setFormState] = useState(initialState);
     const [hasLargeSubject, setHasLargeSubject] = useState(false);
     const [submitButtonIsClicked, setSubmitSaveButtonIsClicked] = useState(false);
+    // Function to check if "to" time is after "from" time
+    const isValidTimeRange = (fromTime, toTime) => {
+        if (!fromTime || !toTime)
+            return true; // Don't validate if either is empty
+        // Convert time strings to comparable numbers (HH:MM -> HHMM)
+        const fromMinutes = fromTime.split(':').map(Number);
+        const toMinutes = toTime.split(':').map(Number);
+        if (fromMinutes.length !== 2 || toMinutes.length !== 2)
+            return true;
+        const fromTotal = fromMinutes[0] * 60 + fromMinutes[1];
+        const toTotal = toMinutes[0] * 60 + toMinutes[1];
+        return toTotal > fromTotal;
+    };
     // checks if all the fields have values.
-    const hasRequiredInfo = () => Object.keys(formState).reduce((accumulator, currentValue) => { var _a; return !accumulator ? accumulator : formState[currentValue].length > 0 && ((_a = formState[currentValue]) === null || _a === void 0 ? void 0 : _a.trim()); }, true);
+    const hasRequiredInfo = () => {
+        const requiredFields = [
+            'subject',
+            'description',
+            'expectations',
+            'geo',
+            'businessImpactDescription',
+            'rmeCategory',
+            'contactName',
+            'contactTitle',
+            'contactPreference',
+        ];
+        if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
+            requiredFields.push('phoneNumber', 'timezone', 'preferredTimeFrom', 'preferredTimeTo');
+        }
+        const hasAllFields = requiredFields.every((field) => formState[field] && formState[field].toString().trim().length > 0);
+        if ((formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') &&
+            formState.preferredTimeFrom &&
+            formState.preferredTimeTo) {
+            return hasAllFields && isValidTimeRange(formState.preferredTimeFrom, formState.preferredTimeTo);
+        }
+        return hasAllFields;
+    };
     const setFormStateValue = (key, value) => setFormState((pre) => (Object.assign(Object.assign({}, pre), { [key]: value })));
     const createEscalationFetch = useFetch(escalations.createIceEscalation, { propgateErrors: true });
     const { request: postCommentRequest, isFetching: isPostingComment } = useFetch(publicApi.kase.postComment, {
@@ -90,14 +133,72 @@ export function RequestEscalationModal(props) {
         if (!hasRequiredInfo() || hasLargeSubject)
             return;
         try {
-            const res = yield createEscalationFetch.request(Object.assign(Object.assign({}, formState), { recordType: 'Active Customer Escalation', escalationSource: 'RME Escalation', status: 'New', accountNumber: loggedInUserRights.data.getAccountNumber(), caseNumber: props.caseNumber, requestor: `${loggedInUser.data.firstName} ${loggedInUser.data.lastName}`, requestorEmail: loggedInUser.data.email, requestorPhone: loggedInUser.data.phone, alreadyEscalated: false, severity: props.severity ? props.severity.charAt(0) : '3' }));
-            const fullComment = t('### Request Management Escalation:\n\n**Subject**\n{{subject}}\n\n**Category**\n{{rmeCategory}}\n\n**Description**\n{{description}}\n\n**Expectations**\n{{expectations}}\n\n**Business Impact**\n{{businessImpactDescription}}', {
+            let contactDetailsString = '\n\n--- Contact Details ---';
+            contactDetailsString += `\nName: ${formState.contactName}`;
+            contactDetailsString += `\nTitle: ${formState.contactTitle}`;
+            const contactPrefMap = {
+                'call-me': 'Call me',
+                'call-if-necessary': 'Call only if necessary',
+                'do-not-call': 'Do not call',
+            };
+            contactDetailsString += `\nContact Preference: ${formState.contactPreference
+                ? contactPrefMap[formState.contactPreference] || formState.contactPreference
+                : ''}`;
+            if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
+                contactDetailsString += `\nPhone Number: ${formState.phoneNumber}`;
+                contactDetailsString += `\nTimezone: ${formState.timezone}`;
+                contactDetailsString += `\nPreferred Time to Call: ${formState.preferredTimeFrom} to ${formState.preferredTimeTo}`;
+            }
+            const enhancedDescription = formState.description + contactDetailsString;
+            // Use contact phone if provided, otherwise use logged in user's phone
+            const requestorPhone = (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') &&
+                formState.phoneNumber
+                ? formState.phoneNumber
+                : loggedInUser.data.phone;
+            const res = yield createEscalationFetch.request({
+                subject: formState.subject,
+                description: enhancedDescription,
+                expectations: formState.expectations,
+                geo: formState.geo,
+                businessImpactDescription: formState.businessImpactDescription,
+                rmeCategory: formState.rmeCategory,
+                recordType: 'Active Customer Escalation',
+                escalationSource: 'RME Escalation',
+                status: 'New',
+                accountNumber: loggedInUserRights.data.getAccountNumber(),
+                caseNumber: props.caseNumber,
+                requestor: formState.contactName || `${loggedInUser.data.firstName} ${loggedInUser.data.lastName}`,
+                requestorEmail: loggedInUser.data.email,
+                requestorPhone: requestorPhone,
+                alreadyEscalated: false,
+                severity: props.severity ? props.severity.charAt(0) : '3',
+            });
+            const formattedContactPreference = formState.contactPreference
+                ? contactPrefMap[formState.contactPreference] || formState.contactPreference
+                : '';
+            // Format time to 12-hour format
+            const formatTime = (time24) => {
+                if (!time24)
+                    return '';
+                const [hours, minutes] = time24.split(':');
+                const hour = parseInt(hours);
+                const ampm = hour >= 12 ? 'pm' : 'am';
+                const hour12 = hour % 12 || 12;
+                return `${hour12}:${minutes}${ampm}`;
+            };
+            const fullComment = t('### Request Management Escalation:\n\n**Subject**\n{{subject}}\n\n**Category**\n{{rmeCategory}}\n\n**Description**\n{{description}}\n\n**Expectations**\n{{expectations}}\n\n**Business Impact**\n{{businessImpactDescription}}\n\n**Contact Preference**\n{{contactPreference}}{{phoneDetails}}\n\n', {
                 category: formState.rmeCategory,
                 subject: formState.subject,
                 description: formState.description,
                 expectations: formState.expectations,
                 businessImpactDescription: formState.businessImpactDescription,
                 rmeCategory: formState.rmeCategory,
+                contactName: formState.contactName || 'Not provided',
+                contactTitle: formState.contactTitle || 'Not provided',
+                contactPreference: formattedContactPreference || 'Not provided',
+                phoneDetails: formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary'
+                    ? `\n\n**Case owner's phone number**\n${formState.phoneNumber}\nNote: Phone number will be stored in case comments for escalation only – not used for marketing.\n\n**Timezone**\n${formState.timezone}\n\n**Best time to connect regarding escalation**\nFrom ${formatTime(formState.preferredTimeFrom || '')} to ${formatTime(formState.preferredTimeTo || '')}`
+                    : '',
             });
             try {
                 yield submitEscalationComment(res.name, fullComment);
@@ -105,6 +206,11 @@ export function RequestEscalationModal(props) {
             catch (e) {
                 // silently fails, escalation is created but adding comment fails
             }
+            // Reset form state before closing
+            setFormState(initialState);
+            setSubmitSaveButtonIsClicked(false);
+            setHasLargeSubject(false);
+            setCreationError(false);
             props.onClose();
         }
         catch (error) {
@@ -112,11 +218,6 @@ export function RequestEscalationModal(props) {
             setCreationError(true);
         }
     });
-    const header = (React.createElement(Title, { className: "pf-v6-u-mb-0", id: "custom-header-label", headingLevel: "h1" },
-        React.createElement(Trans, null, "Request an escalation"),
-        React.createElement(Popover, { showClose: false, position: 'top', hasAutoWidth: true, bodyContent: () => (React.createElement("a", { href: "/support/escalation", target: "_blank", "aria-label": t('Learn more about escalation cases.') },
-                React.createElement(Trans, null, "Learn more about escalation cases."))) },
-            React.createElement(InfoCircleIcon, { className: "pf-v6-u-ml-sm" }))));
     // load rme categories as soon as user opens the modal
     useEffect(() => {
         if (!props.show || categories.length !== 0)
@@ -124,7 +225,7 @@ export function RequestEscalationModal(props) {
         const fetchCategories = () => __awaiter(this, void 0, void 0, function* () {
             try {
                 const categories = yield getRmeCategories();
-                setCategories((categories === null || categories === void 0 ? void 0 : categories.items) || []);
+                setCategories(((categories === null || categories === void 0 ? void 0 : categories.items) || []));
             }
             catch (e) {
                 console.log(e);
@@ -155,46 +256,195 @@ export function RequestEscalationModal(props) {
         value: formState.geo,
         label: findSelectedGeoLabel() || t('Select a location'),
     };
-    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal", isOpen: props.show, onClose: onCancel, "aria-label": t('Request an escalation') },
-        React.createElement(ModalHeader, null, header),
-        React.createElement(ModalBody, null,
-            React.createElement("p", { className: "pf-v6-u-mb-md" },
-                React.createElement(Trans, { i18nKey: "i18RequestEscalationDescription" }, "Submit an escalation if an issue has become more severe or you feel the case needs a higher priority. A support manager will review your escalation request.")),
-            React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-v6-u-mb-md", "aria-label": t('Could not create case escalation') }),
-            React.createElement(Form, { "aria-label": t('form'), className: "request-escalation-form" },
-                React.createElement(Grid, { hasGutter: true, md: 12 },
+    // Create custom footer function for wizard
+    const CustomFooter = (activeStep, goToNextStep, goToPrevStep) => {
+        const isLastStep = activeStep.id === 'contact-details';
+        const isFirstStep = activeStep.id === 'escalation-details';
+        const isLoading = isPostingComment || isUpdatingCase || createEscalationFetch.isFetching;
+        // Validate current step
+        const isCurrentStepValid = () => {
+            if (activeStep.id === 'escalation-details') {
+                return (!isEmpty(formState.rmeCategory) &&
+                    !isEmpty(formState.geo) &&
+                    !isEmpty(formState.subject) &&
+                    !hasLargeSubject &&
+                    !isEmpty(formState.description) &&
+                    !isEmpty(formState.expectations) &&
+                    !isEmpty(formState.businessImpactDescription));
+            }
+            else if (activeStep.id === 'contact-details') {
+                const baseValidation = !isEmpty(formState.contactName) &&
+                    !isEmpty(formState.contactTitle) &&
+                    !isEmpty(formState.contactPreference);
+                // Additional validation if call options are selected
+                if (formState.contactPreference === 'call-me' || formState.contactPreference === 'call-if-necessary') {
+                    return (baseValidation &&
+                        !isEmpty(formState.phoneNumber) &&
+                        !isEmpty(formState.preferredTimeFrom) &&
+                        !isEmpty(formState.preferredTimeTo));
+                }
+                return baseValidation;
+            }
+            return false;
+        };
+        const handleNext = () => {
+            setSubmitSaveButtonIsClicked(true);
+            if (isCurrentStepValid()) {
+                setSubmitSaveButtonIsClicked(false); // Reset validation state when moving to next step
+                goToNextStep({});
+            }
+        };
+        const handleSubmit = () => {
+            setSubmitSaveButtonIsClicked(true);
+            if (isCurrentStepValid()) {
+                onSubmit();
+            }
+        };
+        return (React.createElement("div", { className: "pf-v6-c-wizard__footer" },
+            !isFirstStep && (React.createElement(Button, { variant: "secondary", onClick: () => {
+                    setSubmitSaveButtonIsClicked(false);
+                    goToPrevStep({});
+                }, isDisabled: isLoading, "data-tracking-id": "request-rme-back" }, t('Back'))),
+            React.createElement(Button, { variant: "primary", onClick: isLastStep ? handleSubmit : handleNext, isDisabled: isLoading || (submitButtonIsClicked && !isCurrentStepValid()), "data-tracking-id": isLastStep ? 'request-rme-submit' : 'request-rme-next' }, isLastStep ? t('Submit') : t('Next')),
+            React.createElement(Button, { variant: "link", onClick: onCancel, isDisabled: isLoading, "data-tracking-id": "request-rme-cancel" }, t('Cancel'))));
+    };
+    const escalationDetailsStep = (React.createElement(WizardStep, { id: "escalation-details", name: t('Escalation details') },
+        React.createElement("div", { className: "wizard-step-content" },
+            React.createElement(Title, { headingLevel: "h2", size: "2xl", className: "pf-v6-u-mb-lg" }, t('Escalation details')),
+            React.createElement(Form, { "aria-label": t('Escalation details form'), className: "request-escalation-form" },
+                React.createElement(Grid, { hasGutter: true },
                     React.createElement(GridItem, { span: 6 },
                         React.createElement(FormGroup, { isRequired: true, label: t('Category'), fieldId: "escalation-category" },
                             React.createElement(SingleSelectDropdown, { id: "customer-category-select", ariaLabel: t('Category'), selected: selectedCategory, options: categoryOptions, isDisabled: false, isLoading: isCategoriesFetching, isInvalid: submitButtonIsClicked && isEmpty(formState.rmeCategory), placeholder: t('Select an option that best fits'), onSelect: (option) => setCategoryState(option), isScrollable: true }))),
                     React.createElement(GridItem, { span: 6 },
                         React.createElement(FormGroup, { isRequired: true, label: t('My region'), fieldId: "escalation-region" },
                             React.createElement(SingleSelectDropdown, { ariaLabel: t('My region'), id: "customer-geo-select", selected: selectedGeo, options: geoOptions, isInvalid: submitButtonIsClicked && isEmpty(formState.geo), placeholder: t('Select a location'), onSelect: (option) => setGeoState(option) }))),
-                    React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
-                        submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
-                            React.createElement(HelperText, null,
-                                React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Subject cannot be more than {{limit}} characters', {
-                                    limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
-                                }))))),
-                        React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
-                                ? ValidatedOptions.error
-                                : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') })),
-                    React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
-                        React.createElement(TextArea, { value: formState.description, onChange: (e, value) => setFormStateValue('description', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.description)
-                                ? ValidatedOptions.error
-                                : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" })),
-                    React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
-                        React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.expectations)
-                                ? ValidatedOptions.error
-                                : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" })),
-                    React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
-                        React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('businessImpactDescription', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
-                                ? ValidatedOptions.error
-                                : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))),
-        React.createElement(ModalFooter, null,
-            React.createElement(Button, { key: "submit", variant: "primary", onClick: onSubmit, "data-tracking-id": "request-rme-submit", isDisabled: submitButtonIsClicked &&
-                    (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching || !hasRequiredInfo()), "aria-label": t('Submit') },
-                (isPostingComment || isUpdatingCase || createEscalationFetch.isFetching) && (React.createElement(LoadingIndicator, { key: "loading", isInline: true })),
-                ' ',
-                t('Submit')),
-            React.createElement(Button, { key: "cancel", variant: "link", onClick: onCancel, "data-tracking-id": "request-rme-cancel", isDisabled: createEscalationFetch.isFetching || isPostingComment || isUpdatingCase, "aria-label": t('Cancel') }, t('Cancel')))));
+                    React.createElement(GridItem, { span: 12 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Subject'), fieldId: "escalation-subject" },
+                            submitButtonIsClicked && hasLargeSubject && (React.createElement(FormHelperText, null,
+                                React.createElement(HelperText, null,
+                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Subject cannot be more than {{limit}} characters', {
+                                        limit: ESCALATION_SUBJECT_LENGTH_LIMIT,
+                                    }))))),
+                            React.createElement(TextInput, { isRequired: true, validated: (submitButtonIsClicked && isEmpty(formState.subject)) || hasLargeSubject
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, type: "text", placeholder: t('Enter a subject for your request'), id: "subject-input", name: "subject-input", value: formState.subject, onChange: (_event, subject) => onSubjectChange(subject), "aria-label": t('Subject') }))),
+                    React.createElement(GridItem, { span: 12 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Description'), fieldId: "escalation-description" },
+                            React.createElement(TextArea, { value: formState.description, onChange: (e, value) => setFormStateValue('description', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.description)
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, "aria-label": t('Description'), id: "description-textarea", placeholder: t('Provide a detailed comment for us to best assist you'), resizeOrientation: "vertical" }))),
+                    React.createElement(GridItem, { span: 12 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Expectations'), fieldId: "escalation-expectations" },
+                            React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('expectations', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.expectations)
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, placeholder: t('What do you expect to happen with this escalation?'), id: "expectations-input", value: formState.expectations, "aria-label": t('Expectations'), resizeOrientation: "vertical" }))),
+                    React.createElement(GridItem, { span: 12 },
+                        React.createElement(FormGroup, { isRequired: true, label: t('Business impact'), fieldId: "escalation-business-impact" },
+                            React.createElement(TextArea, { onChange: (e, value) => setFormStateValue('businessImpactDescription', value), isRequired: true, validated: submitButtonIsClicked && isEmpty(formState.businessImpactDescription)
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, placeholder: t('Does your business impact change with this escalation? Please describe how it changed.'), id: "business-impact-input", value: formState.businessImpactDescription, "aria-label": t('Business impact'), resizeOrientation: "vertical" }))))))));
+    const contactDetailsStep = (React.createElement(WizardStep, { id: "contact-details", name: t('Contact details') },
+        React.createElement("div", { className: "wizard-step-content" },
+            React.createElement(Title, { headingLevel: "h2", size: "2xl", className: "pf-v6-u-mb-lg" }, t('Contact details')),
+            React.createElement(Form, { "aria-label": t('Contact details form'), className: "request-escalation-form" },
+                React.createElement(Grid, { hasGutter: true },
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                t('Name'),
+                                " "), isRequired: true, fieldId: "contact-name" },
+                            React.createElement(TextInput, { type: "text", validated: submitButtonIsClicked && isEmpty(formState.contactName)
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, placeholder: t('Enter your name'), id: "contact-name", value: formState.contactName || '', onChange: (_e, value) => setFormState(Object.assign(Object.assign({}, formState), { contactName: value })), "aria-label": t('Contact name') }),
+                            submitButtonIsClicked && isEmpty(formState.contactName) && (React.createElement(FormHelperText, null,
+                                React.createElement(HelperText, null,
+                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Name is required'))))))),
+                    React.createElement(GridItem, { span: 6 },
+                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                t('Title'),
+                                " "), isRequired: true, fieldId: "contact-title" },
+                            React.createElement(TextInput, { type: "text", validated: submitButtonIsClicked && isEmpty(formState.contactTitle)
+                                    ? ValidatedOptions.error
+                                    : ValidatedOptions.default, placeholder: t('Enter your title (e.g. System Admin, DevOps, Project Man..)'), id: "contact-title", value: formState.contactTitle || '', onChange: (_e, value) => setFormState(Object.assign(Object.assign({}, formState), { contactTitle: value })), "aria-label": t('Contact title') }),
+                            submitButtonIsClicked && isEmpty(formState.contactTitle) && (React.createElement(FormHelperText, null,
+                                React.createElement(HelperText, null,
+                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Title is required'))))))),
+                    React.createElement(GridItem, { span: 12 },
+                        React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                t('Contact preference'),
+                                " "), isRequired: true, fieldId: "contact-preference", role: "radiogroup" },
+                            React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-flex-direction-row contact-preference-group" },
+                                React.createElement(Radio, { id: "call-me", name: "contact-preference", label: t('Call me'), isChecked: formState.contactPreference === 'call-me', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'call-me' })), className: "pf-v6-u-mr-lg" }),
+                                React.createElement(Radio, { id: "call-if-necessary", name: "contact-preference", label: t('Call only if necessary'), isChecked: formState.contactPreference === 'call-if-necessary', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'call-if-necessary' })), className: "pf-v6-u-mr-lg" }),
+                                React.createElement(Radio, { id: "do-not-call", name: "contact-preference", label: t('Do not call'), isChecked: formState.contactPreference === 'do-not-call', onChange: () => setFormState(Object.assign(Object.assign({}, formState), { contactPreference: 'do-not-call', phoneNumber: '', timezone: '', preferredTimeFrom: '', preferredTimeTo: '' })) })),
+                            submitButtonIsClicked && !formState.contactPreference && (React.createElement(FormHelperText, null,
+                                React.createElement(HelperText, null,
+                                    React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Contact preference is required'))))))),
+                    (formState.contactPreference === 'call-me' ||
+                        formState.contactPreference === 'call-if-necessary') && (React.createElement(React.Fragment, null,
+                        React.createElement(GridItem, { span: 12 },
+                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                    t("Case owner's phone number"),
+                                    " "), isRequired: true, fieldId: "phone-number" },
+                                React.createElement(PhoneInput, { phoneValue: formState.phoneNumber || '', countryCode: ((_a = formState.countryCode) === null || _a === void 0 ? void 0 : _a.replace('+', '')) || '', onPhoneValueChange: (phone) => setFormState(Object.assign(Object.assign({}, formState), { phoneNumber: phone })), onCountryCodeChange: (code) => setFormState(Object.assign(Object.assign({}, formState), { countryCode: code })), validations: submitButtonIsClicked && isEmpty(formState.phoneNumber)
+                                        ? 'error'
+                                        : 'default', isDisabled: false }),
+                                React.createElement(FormHelperText, null,
+                                    React.createElement(HelperText, null,
+                                        React.createElement(HelperTextItem, { variant: "default" }, t('Note: A current phone/mobile number with the country code helps us support you better. Phone number will be stored in case comments for escalation only – not used for marketing.')))),
+                                submitButtonIsClicked && isEmpty(formState.phoneNumber) && (React.createElement(FormHelperText, null,
+                                    React.createElement(HelperText, null,
+                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Phone number is required'))))))),
+                        React.createElement(GridItem, { span: 12 },
+                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                    t('Timezone'),
+                                    " "), isRequired: true, fieldId: "timezone" },
+                                React.createElement("div", { className: "timezone" },
+                                    React.createElement(SingleSelectDropdown, { selected: TIMEZONE_OPTIONS.find((opt) => opt.value === formState.timezone) || {
+                                            value: '',
+                                            label: 'Select timezone',
+                                        }, options: TIMEZONE_OPTIONS, onSelect: (option) => setFormState(Object.assign(Object.assign({}, formState), { timezone: option.value })), placeholder: t('Select timezone') })),
+                                submitButtonIsClicked && isEmpty(formState.timezone) && (React.createElement(FormHelperText, null,
+                                    React.createElement(HelperText, null,
+                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Timezone is required'))))))),
+                        React.createElement(GridItem, { span: 12 },
+                            React.createElement(FormGroup, { label: React.createElement(React.Fragment, null,
+                                    t('Best time to connect regarding escalation'),
+                                    " "), isRequired: true, fieldId: "preferred-time" },
+                                React.createElement("div", { className: "pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-flex-nowrap time-fields-container" },
+                                    React.createElement("span", { className: "time-label pf-v6-u-mr-sm" }, t('from')),
+                                    React.createElement(TimePicker, { time: formState.preferredTimeFrom || '', onChange: (_event, time) => setFormState(Object.assign(Object.assign({}, formState), { preferredTimeFrom: time })), placeholder: "HH:MM", id: "preferred-time-from", "aria-label": t('Preferred time from'), className: "time-input", is24Hour: true, width: "150px", menuAppendTo: "parent", inputProps: {
+                                            validated: submitButtonIsClicked && isEmpty(formState.preferredTimeFrom)
+                                                ? ValidatedOptions.error
+                                                : ValidatedOptions.default,
+                                        } }),
+                                    React.createElement("span", { className: "time-label pf-v6-u-mx-md" }, t('to')),
+                                    React.createElement(TimePicker, { time: formState.preferredTimeTo || '', onChange: (_event, time) => setFormState(Object.assign(Object.assign({}, formState), { preferredTimeTo: time })), placeholder: "HH:MM", id: "preferred-time-to", "aria-label": t('Preferred time to'), className: "time-input", is24Hour: true, width: "150px", menuAppendTo: "parent", inputProps: {
+                                            validated: submitButtonIsClicked &&
+                                                (isEmpty(formState.preferredTimeTo) ||
+                                                    !isValidTimeRange(formState.preferredTimeFrom || '', formState.preferredTimeTo || ''))
+                                                ? ValidatedOptions.error
+                                                : ValidatedOptions.default,
+                                        } })),
+                                submitButtonIsClicked &&
+                                    (isEmpty(formState.preferredTimeFrom) ||
+                                        isEmpty(formState.preferredTimeTo)) && (React.createElement(FormHelperText, null,
+                                    React.createElement(HelperText, null,
+                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('Preferred time is required'))))),
+                                submitButtonIsClicked &&
+                                    formState.preferredTimeFrom &&
+                                    formState.preferredTimeTo &&
+                                    !isValidTimeRange(formState.preferredTimeFrom, formState.preferredTimeTo) && (React.createElement(FormHelperText, null,
+                                    React.createElement(HelperText, null,
+                                        React.createElement(HelperTextItem, { variant: ValidatedOptions.error }, t('End time must be after start time'))))))))))))));
+    return (React.createElement(Modal, { id: "request-mgmt-escalation-modal", className: "request-escalation-modal pf-m-width-auto", isOpen: props.show, onClose: onCancel, "aria-label": t('Request an escalation'), variant: ModalVariant.large },
+        React.createElement("div", { className: "modal-wizard-header" },
+            React.createElement(ModalHeader, { title: t('Request an escalation') }),
+            React.createElement("a", { href: "/support/escalation", target: "_blank", rel: "noopener noreferrer", className: "pf-v6-u-font-size-sm pf-v6-u-color-200" },
+                React.createElement(Trans, null, "Learn more about escalation cases."))),
+        React.createElement(ModalBody, null,
+            creationError && (React.createElement(AlertMessage, { variant: AlertType.DANGER, title: t('Could not create case escalation'), show: creationError, onClose: onErrorClose, isInline: true, className: "pf-v6-u-mb-md", "aria-label": t('Could not create case escalation') })),
+            React.createElement(Wizard, { navAriaLabel: t('Escalation request steps'), footer: CustomFooter },
+                escalationDetailsStep,
+                contactDetailsStep))));
 }

package/lib/esm/reducers/CaseConstNTypes.d.ts

@@ -5,6 +5,8 @@ import { IEntitlement } from '@cee-eng/hydrajs/@types/api/public/entitlements';
 import { IAccount } from '@cee-eng/hydrajs/@types/models/account';
 import { ICaseNotificationAddresses } from '@cee-eng/hydrajs/@types/models/case';
 import { IContact } from '@cee-eng/hydrajs/@types/models/contact';
+import { ICaseEscalation } from '@cee-eng/hydrajs/@types/models/escalation';
+import { ISingleSelectDropdownOption } from '@rh-support/components';
 import { IAction, IAPIError, IApiResponseDetails } from '@rh-support/types/shared';
 import { Dispatch } from 'react';
 import { ICVEWorkflowRecommendation } from '../models/caseCreationWorkflows';
@@ -244,4 +246,15 @@ export declare const ORG_ADMIN_SEND_NOTIFCATION_KBASE_LINK = "https://access.red
 export declare const NON_ORG_ADMIN_SEND_NOTIFCATION_KBASE_LINK = "https://access.redhat.com/articles/5967831";
 export declare const excludedCaseTypesforARH: string[];
 export declare const appSourceId_ARH = "PCM-001";
+export interface IEscalationFormState extends Partial<ICaseEscalation> {
+    contactName?: string;
+    contactTitle?: string;
+    contactPreference?: string;
+    countryCode?: string;
+    phoneNumber?: string;
+    timezone?: string;
+    preferredTimeFrom?: string;
+    preferredTimeTo?: string;
+}
+export declare const TIMEZONE_OPTIONS: ISingleSelectDropdownOption[];
 //# sourceMappingURL=CaseConstNTypes.d.ts.map

package/lib/esm/reducers/CaseConstNTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseConstNTypes.d.ts","sourceRoot":"","sources":["../../../src/reducers/CaseConstNTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACjH,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,QAAQ,EAAE,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEnF,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,0BAA0B,QAAQ,CAAC;AAEhD,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,eAAO,MAAM,gCAAgC,QAAQ,CAAC;AAEtD,eAAO,MAAM,mCAAmC,MAAM,CAAC;AACvD,eAAO,MAAM,+BAA+B,MAAM,CAAC;AACnD,eAAO,MAAM,wBAAwB,QAAQ,CAAC;AAC9C,eAAO,MAAM,iCAAiC,QAAQ,CAAC;AACvD,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,uBAAuB,QAAQ,CAAC;AAC7C,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,qCAAqC,OAAO,CAAC;AAC1D,eAAO,MAAM,qCAAqC,OAAO,CAAC;AAC1D,eAAO,MAAM,iCAAiC,QAAQ,CAAC;AACvD,eAAO,MAAM,kCAAkC,QAAQ,CAAC;AACxD,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AACzC,eAAO,MAAM,yBAAyB,QAAQ,CAAC;AAC/C,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAC/C,eAAO,MAAM,sCAAsC,MAAM,CAAC;AAC1D,eAAO,MAAM,kDAAkD,MAAM,CAAC;AACtE,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAI9C,eAAO,MAAM,wBAAwB,QAAQ,CAAC;AAC9C,eAAO,MAAM,uCAAuC,OAAO,CAAC;AAC5D,eAAO,MAAM,8BAA8B,OAAO,CAAC;AACnD,eAAO,MAAM,qCAAqC,OAAO,CAAC;AAC1D,eAAO,MAAM,kCAAkC,MAAM,CAAC;AAEtD,eAAO,MAAM,4BAA4B,2DAA2D,CAAC;AAGrG,oBAAY,kBAAkB;IAC1B,KAAK,wEAAwE;IAC7E,oBAAoB,+CAA+C;IACnE,WAAW,4DAA4D;IACvE,kBAAkB,2FAA2F;IAC7G,SAAS,iCAAiC;CAC7C;AAED,eAAO,MAAM,eAAe,iEAAiE,CAAC;AAC9F,eAAO,MAAM,eAAe,iEAAiE,CAAC;AAC9F,eAAO,MAAM,eAAe,iEAAiE,CAAC;AAC9F,eAAO,MAAM,qBAAqB,kEAAkE,CAAC;AAErG,0BAAkB,qBAAqB;IACnC,YAAY,gBAAgB;IAC5B,QAAQ,aAAa;IACrB,OAAO,YAAY;CACtB;AACD,0BAAkB,sBAAsB;IACpC,KAAK,eAAe;IACpB,KAAK,aAAa;IAClB,KAAK,eAAe;IACpB,KAAK,YAAY;CACpB;AAGD,eAAO,MAAM,mBAAmB;;;;;;;;CAQ/B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;CAK/B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;CAStC,CAAC;AAEF,eAAO,MAAM,4BAA4B,yEAAyE,CAAC;AAEnH,oBAAY,oBAAoB;IAC5B,iBAAiB,sBAAsB;IACvC,gBAAgB,qBAAqB;IACrC,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,+BAA+B,oCAAoC;IACnE,cAAc,mBAAmB;IACjC,oBAAoB,yBAAyB;IAC7C,sBAAsB,2BAA2B;IACjD,uBAAuB,4BAA4B;IACnD,uBAAuB,4BAA4B;IACnD,mBAAmB,wBAAwB;IAC3C,wBAAwB,6BAA6B;IACrD,eAAe,oBAAoB;IACnC,oBAAoB,yBAAyB;IAC7C,sBAAsB,2BAA2B;IACjD,wBAAwB,6BAA6B;IACrD,yBAAyB,8BAA8B;IACvD,iBAAiB,sBAAsB;IACvC,wBAAwB,6BAA6B;IACrD,mBAAmB,wBAAwB;IAC3C,kBAAkB,uBAAuB;IACzC,8BAA8B,mCAAmC;IACjE,kBAAkB,uBAAuB;IACzC,6BAA6B,kCAAkC;IAC/D,kCAAkC,uCAAuC;IACzE,gCAAgC,qCAAqC;IACrE,sBAAsB,2BAA2B;IACjD,yBAAyB,8BAA8B;IACvD,cAAc,mBAAmB;IACjC,eAAe,oBAAoB;IACnC,iBAAiB,sBAAsB;IACvC,0BAA0B,+BAA+B;IACzD,wBAAwB,6BAA6B;IACrD,yCAAyC,8CAA8C;IACvF,8CAA8C,mDAAmD;IACjG,cAAc,mBAAmB;IACjC,kBAAkB,uBAAuB;CAC5C;AAED,eAAO,MAAM,gBAAgB,EAAE,UAqG9B,CAAC;AAEF,MAAM,WAAW,UAAU;IACvB,iBAAiB,EAAE,mBAAmB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IAC9D,WAAW,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACnC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,aAAa,EAAE,CAAC;IAC/B,4BAA4B,EAAE,QAAQ,EAAE,CAAC;IACzC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,wBAAwB,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/C,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxC,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,yBAAyB,EAAE,OAAO,CAAC;IACnC,uBAAuB,EAAE,OAAO,CAAC;IACjC,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,WAAW,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,wBAAwB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,sBAAsB,EAAE,mBAAmB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/D,aAAa,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC7C,gBAAgB,EAAE,mBAAmB,CAAC,UAAU,EAAE,CAAC,CAAC;IACpD,sBAAsB,EAAE,mBAAmB,CAAC,UAAU,EAAE,CAAC,CAAC;IAC1D,gBAAgB,EAAE,mBAAmB,CAAC,OAAO,CAAC,0BAA0B,EAAE,CAAC,CAAC,CAAC;IAC7E,kBAAkB,EAAE,mBAAmB,CAAC,YAAY,EAAE,CAAC,CAAC;IACxD,sBAAsB,EAAE,OAAO,CAAC;IAChC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,SAAS,CAAC;IAC5B,0BAA0B,EAAE,OAAO,CAAC;IACpC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,oCAAoC,EAAE,OAAO,CAAC;IAC9C,sCAAsC,EAAE,OAAO,CAAC;IAChD,eAAe,EAAE,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sCAAsC,CAAC,EAAE,OAAO,CAAC;IACjD,kDAAkD,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mCAAmC,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;IAChF,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,0BAA0B,EAAE,CAAC;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,sBAAuB,SAAQ,UAAU;CAAG;AAC7D,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,oBAAoB,EAAE,sBAAsB,CAAC,CAAC;AACpF,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEhE,eAAO,MAAM,qCAAqC,+CAA+C,CAAC;AAClG,eAAO,MAAM,yCAAyC,+CAA+C,CAAC;AAEtG,eAAO,MAAM,uBAAuB,UAAqD,CAAC;AAC1F,eAAO,MAAM,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CaseConstNTypes.d.ts","sourceRoot":"","sources":["../../../src/reducers/CaseConstNTypes.ts"],"names":[],"mappings":"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"}

package/lib/esm/reducers/CaseConstNTypes.js

@@ -236,3 +236,15 @@ export const ORG_ADMIN_SEND_NOTIFCATION_KBASE_LINK = 'https://access.redhat.com/
 export const NON_ORG_ADMIN_SEND_NOTIFCATION_KBASE_LINK = 'https://access.redhat.com/articles/5967831';
 export const excludedCaseTypesforARH = ['Feature / Enhancement Request', 'Certification']; //Feature / Enhancement Request casetype is alias for Idea on PCM UI
 export const appSourceId_ARH = 'PCM-001';
+export const TIMEZONE_OPTIONS = [
+    { value: 'UTC-08:00', label: 'UTC-08:00 (Pacific Standard Time)' },
+    { value: 'UTC-07:00', label: 'UTC-07:00 (Mountain Standard Time)' },
+    { value: 'UTC-06:00', label: 'UTC-06:00 (Central Standard Time)' },
+    { value: 'UTC-05:00', label: 'UTC-05:00 (Eastern Standard Time)' },
+    { value: 'UTC+00:00', label: 'UTC+00:00 (Greenwich Mean Time)' },
+    { value: 'UTC+01:00', label: 'UTC+01:00 (Central European Time)' },
+    { value: 'UTC+05:30', label: 'UTC+05:30 (India Standard Time)' },
+    { value: 'UTC+08:00', label: 'UTC+08:00 (China, HK, Singapore Standard Time)' },
+    { value: 'UTC+09:00', label: 'UTC+09:00 (Japan Standard Time)' },
+    { value: 'UTC+10:00', label: 'UTC+10:00 (Australian Eastern Standard Time)' },
+];

package/lib/esm/scss/_pf-overrides.scss

@@ -406,37 +406,213 @@ div#cep-details-modal.pf-v6-c-modal-box__body {
 }
 
 // To override font weight in Request Escalation Form - PCM-11644
+// Target the modal box with the specific width-auto class
+.pf-v6-c-modal-box.pf-m-width-auto {
+    max-width: 70vw !important;
+    min-width: 900px !important;
+    width: 70vw !important;
+
+    @media (max-width: 992px) {
+        min-width: auto !important;
+        max-width: 95vw !important;
+        width: 95vw !important;
+    }
+
+    // Override the global 50% max-width rule for large screens
+    @media (min-width: 1320px) {
+        width: 70vw !important;
+        max-width: 70vw !important;
+    }
+}
+
 div#request-mgmt-escalation-modal.request-escalation-modal {
-    div.pf-v6-c-modal-box__body {
-        form.pf-v6-c-form.request-escalation-form {
-            .pf-m-textarea textarea {
-                resize: none !important;
+    .modal-wizard-header {
+        background-color: #f0f0f0;
+        padding: 1.5rem;
+        margin-top: -1px;
+        font-size: 0.875rem;
+        border-bottom: 1px solid #d2d2d2;
+
+        a {
+            font-size: 14px;
+        }
+
+        .pf-v6-c-modal-box__header {
+            padding: 0 !important;
+            margin-bottom: 8px;
+        }
+
+        .pf-v6-c-modal-box__title {
+            padding: 0 !important;
+            font-size: 28px;
+            font-weight: 500;
+        }
+    }
+
+    .pf-v6-c-modal-box__body {
+        padding: 0 !important;
+
+        & > div:first-child {
+            // margin-bottom: 1.5rem;
+
+            p {
+                color: var(--pf-v6-global--Color--200);
+                margin-bottom: 0.5rem;
             }
 
-            div.pf-v6-l-grid.pf-m-all-12-col-on-md.pf-m-gutter {
-                div.pf-v6-l-grid__item.pf-m-6-col {
-                    div.pf-v6-c-form__group {
-                        div.pf-v6-c-form__group-label {
-                            label.pf-v6-c-form__label {
-                                span.pf-v6-c-form__label-text {
-                                    font-weight: 600 !important;
-                                }
-                            }
-                        }
-                    }
-                }
-                div.pf-v6-c-form__group {
-                    div.pf-v6-c-form__group-label {
-                        label.pf-v6-c-form__label {
-                            span.pf-v6-c-form__label-text {
-                                font-weight: 600 !important;
-                            }
-                        }
-                    }
-                }
+            a {
+                color: var(--pf-v6-global--link--Color);
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    // Wizard specific styles
+    .pf-v6-c-wizard {
+        height: 600px !important;
+        border: 1px solid var(--pf-v6-global--BorderColor--100) !important;
+        border-radius: 3px;
+        overflow: hidden;
+        background: white;
+        display: flex;
+
+        .pf-v6-c-wizard__header {
+            display: none;
+        }
+
+        .pf-v6-c-wizard__main {
+            overflow-y: auto;
+        }
+
+        .pf-v6-c-wizard__body {
+            padding: 2rem;
+            flex: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+
+        .pf-v6-c-wizard__footer {
+            padding: var(--global-spacer-lg, 24px);
+            background-color: var(--pf-v6-global--BackgroundColor--100);
+            border-top: 1px solid var(--pf-v6-global--BorderColor--100);
+            display: flex;
+            gap: 0.5rem;
+            justify-content: flex-start;
+            flex-shrink: 0;
+            border-top: 1px solid #d2d2d2;
+
+            button:last-child {
+                margin-left: 48px;
+            }
+        }
+    }
+
+    .wizard-step-content {
+        h2 {
+            font-size: var(--global-font-size-lg, 18px);
+            font-weight: 500;
+            margin-bottom: 1.5rem;
+        }
+    }
+
+    form.pf-v6-c-form.request-escalation-form {
+        .pf-m-textarea textarea {
+            resize: vertical !important;
+            min-height: 80px;
+        }
+
+        #description-textarea {
+            min-height: 100px;
+        }
+
+        .pf-v6-c-form__group {
+            margin-bottom: 0.5rem !important;
+        }
+
+        .pf-v6-u-flex-nowrap {
+            white-space: nowrap;
+        }
+
+        .pf-v6-c-form__label-text {
+            font-weight: 600 !important;
+        }
+    }
+    .pf-v6-c-radio__input {
+        margin: 0 !important;
+    }
+
+    .contact-preference-group {
+        gap: 24px !important;
+
+        .pf-v6-c-radio {
+            margin-bottom: 0 !important;
+
+            .pf-v6-c-radio__label {
+                font-weight: normal !important;
+                margin-left: 8px !important;
             }
         }
     }
+
+    .request-escalation-form {
+        .pf-v6-l-grid {
+            --pf-v6-l-grid--m-gutter--GridGap: 0.5rem !important;
+        }
+    }
+
+    .phone-number-input {
+        width: 100% !important;
+
+        .phone-number-select {
+            min-width: 110px !important;
+
+            button {
+                min-width: 110px !important;
+            }
+        }
+
+        .pf-v6-c-input-group__item:first-child {
+            margin-right: 8px !important;
+        }
+    }
+
+    .timezone {
+        width: 154px !important;
+        max-width: 154px !important;
+    }
+
+    // Time fields container styling
+    .time-fields-container {
+        display: flex !important;
+        align-items: center !important;
+        gap: 12px !important;
+
+        .time-label {
+            font-size: 14px !important;
+            color: var(--pf-v6-global--Color--100) !important;
+            flex-shrink: 0 !important;
+            margin: 0 !important;
+        }
+
+        // Style the PatternFly TimePicker
+        .time-input {
+            .pf-v6-c-text-input {
+                width: 150px !important;
+            }
+
+            // Force dropdown to open downward
+            .pf-v6-c-menu {
+                top: 100% !important;
+                bottom: auto !important;
+                transform: none !important;
+            }
+        }
+    }
+
+    // Additional phone number field overrides
+    #phone-number {
+        width: 100% !important;
+    }
 }
 
 // To override font weight on reopen case modal - PCM-11644

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rh-support/troubleshoot",
-    "version": "2.6.82",
+    "version": "2.6.83",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org"
@@ -133,5 +133,5 @@
         "defaults and supports es6-module",
         "maintained node versions"
     ],
-    "gitHead": "bfa49b79bd75877903d8f4ac09f322718b2401fd"
+    "gitHead": "79e5da0bd031bf218194ac7d7b802e0444cce575"
 }