\r\n {(title || description) && (\r\n
\r\n {title && (\r\n \r\n )}\r\n {description && (\r\n \r\n )}\r\n {showGlobalError && (\r\n \r\n )}\r\n
\r\n )}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {\r\n setStepThreeEnabled(true);\r\n }}\r\n configuration={configuration}\r\n data={data as IRequestAQuoteData}\r\n />\r\n \r\n
\r\n {informationForm && (\r\n \r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default RequestAQuoteForm;\r\n","import React, { useState } from 'react';\r\nimport {\r\n FormStatusOptions,\r\n IRequestAQuote,\r\n} from '../../Modal/RequestAQuoteModal/RequestAQuoteModal';\r\nimport { Confirmation } from 'components/RequestAQuote/Confirmation/Confirmation';\r\nimport RequestAQuoteForm from '../RequestAQuoteForm/RequestAQuoteForm';\r\n\r\nconst RequestAQuoteContainer = ({\r\n configuration,\r\n data,\r\n isInModal,\r\n title,\r\n description,\r\n scrollContainerId,\r\n shoppingTool,\r\n confirmationPageLoadConfig,\r\n setFormData,\r\n hideChangeDealer,\r\n}: IRequestAQuote) => {\r\n // Data\r\n const { pageContent } = data || {};\r\n const { labels, ctas } = pageContent || {};\r\n // States\r\n const [formStatus, setFormStatus] = useState(FormStatusOptions.initial);\r\n\r\n if (formStatus === 'success') {\r\n return (\r\n \r\n {(title || description) && (\r\n
\r\n \r\n {[\r\n ...Array(\r\n matchesMediumBreakpoint ? 1 : matchesMobileMidBreakpoint ? 2 : 3\r\n ),\r\n ].map((value: undefined, index: number) => (\r\n \r\n ))}\r\n
\r\n )}\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {!isFormDisabled && }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {!matchesMediumBreakpoint && ( //mobile view\r\n \r\n {[...Array(6)].map((value: undefined, index: number) => {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n )}\r\n {matchesMediumBreakpoint && ( //desktop view\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n {[...Array(3)].map((value: undefined, index: number) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default RequestAQuoteSkeleton;\r\n","import { theme } from 'theme/App.theme';\r\nimport makeStyles from '@mui/styles/makeStyles';\r\nimport { appPalette } from 'theme/App.palette';\r\n\r\nconst colors = appPalette.colors;\r\n\r\nexport const useStyles = makeStyles({\r\n root: {\r\n 'align-items': 'center',\r\n display: 'flex',\r\n 'flex-direction': 'row',\r\n marginBottom: '0.9375rem',\r\n position: 'relative',\r\n width: '100%',\r\n [theme.breakpoints.up('viewportMedium')]: {\r\n 'margin-bottom': 0,\r\n },\r\n },\r\n stepNumber: {\r\n color: colors.black,\r\n display: 'block',\r\n 'min-width': '1rem',\r\n transition: 'color .5s ease',\r\n marginRight: '0.5rem',\r\n },\r\n stepTitle: {\r\n 'border-bottom': `0.0625rem solid ${colors.light_grey_1}`,\r\n color: colors.black,\r\n display: 'block',\r\n flex: 1,\r\n margin: '0',\r\n textAlign: 'unset',\r\n letterSpacing: '0',\r\n 'transition-duration': '.5s',\r\n 'transition-property': 'border, color',\r\n 'transition-timing-function': 'ease',\r\n },\r\n stepDisabled: {\r\n color: colors.light_grey_2,\r\n },\r\n stepTitlePartial: {\r\n [theme.breakpoints.up('viewportMedium')]: {\r\n flex: 'none',\r\n 'max-width': '26.875rem',\r\n width: '46.1%',\r\n },\r\n },\r\n stepCaption: {\r\n color: colors.acura_red,\r\n left: 0,\r\n position: 'absolute',\r\n top: '2.8125rem',\r\n transform: 'translateY(-50%)',\r\n\r\n [theme.breakpoints.up('viewportMobileMid')]: {\r\n left: 'auto',\r\n right: 0,\r\n top: '0.9375rem',\r\n },\r\n [theme.breakpoints.up('viewportLarge')]: {\r\n top: '50%',\r\n },\r\n },\r\n stepContent: {\r\n [theme.breakpoints.up('viewportMedium')]: {\r\n 'padding-left': '1.625rem',\r\n },\r\n },\r\n});\r\n","import React from 'react';\r\nimport { useStyles } from './Step.styles';\r\nimport { Grid, useTheme } from '@mui/material';\r\nimport TextRender from 'components/Global/TextRender/TextRender';\r\n\r\nexport interface IStep {\r\n stepNumber?: number;\r\n isEnabled: boolean;\r\n sectionName: string;\r\n caption?: string;\r\n isPartial?: boolean;\r\n children?: JSX.Element;\r\n}\r\nexport function Step({\r\n isEnabled,\r\n stepNumber,\r\n isPartial,\r\n sectionName,\r\n children,\r\n caption,\r\n}: IStep): JSX.Element {\r\n const classes = useStyles();\r\n const theme = useTheme();\r\n const isHondaTheme = theme.themeName === 'honda';\r\n const stepDisabledClass = classes.stepDisabled;\r\n const stepTitlePartialClass = classes.stepTitlePartial;\r\n return (\r\n