{title}
}\n\n {content &&{content}
}\n\n \n \n {actionConfig.ok.label}\n \n\n \n {actionConfig.cancel.label}\n \n
\n \n )\n }\n}\n\nConfirmationDialog.propTypes = {\n /**\n * Title of the Dialog component\n */\n title: PropTypes.string.isRequired,\n /**\n * if available, renders any content inside the Dialog component\n */\n content: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.element,\n PropTypes.node,\n ]),\n /**\n * Close handler whenever modal is closing\n */\n onCloseHandler: PropTypes.func,\n /**\n * When esc key is pressed will invoke this handler\n */\n onEscapeKeyDownHandler: PropTypes.func,\n /**\n * Invoke this handler when `Ok` is clicked from the CTAs\n */\n confirmOkHandler: PropTypes.func,\n /**\n * Invoke this handler when `Cancel` is clicked from the CTAs\n */\n confirmCancelHandler: PropTypes.func,\n actionConfig: PropTypes.object,\n}\n\nConfirmationDialog.defaultProps = {\n title: '',\n content: null,\n actionConfig: {\n ok: {\n label: 'Yes',\n },\n cancel: {\n label: 'No',\n },\n },\n}\n","import React, { Component, PureComponent, Fragment } from 'react'\n\nconst Icon = (IconComponent, CustomProps = {}) => {\n return class extends Component {\n static defaultProps = {\n stroke: 'none',\n addToDimension: true,\n id: '',\n className: '',\n }\n render() {\n const { width, height, ...rest } = this.props\n const { viewBox: cViewBox, ...customRest } = CustomProps\n let viewBox = `0 0 ${width} ${height}`\n\n if (rest.viewBox && rest.viewBox !== '') {\n viewBox = rest.viewBox\n } else if (cViewBox && cViewBox !== '') {\n viewBox = cViewBox\n }\n\n if (!rest.color) {\n rest.color = CustomProps.color\n }\n return (\n \n {error}\n {this._renderElement()}\n
\n\n {confirm && (\n \n {icon} \n
\n )\n }\n\n _clickHandler = () => {\n // Click handler for item, use link and linkParams from props\n }\n}\n\nexport default Feature\n","import React from 'react'\nimport classnames from 'classnames'\n\nimport { Icons } from 'spd-hd/components/common'\n\nconst ResponseCard = ({\n isFullscreen,\n isOverlay,\n isSuccess,\n title,\n description,\n cta,\n ...props\n}) => {\n const _responseCard = classnames('app-responsecard', {\n 'app-fullscreen': isFullscreen,\n 'app-overlay': isOverlay,\n })\n\n return (\n {title &&
\n {title}
}\n \n {isSuccess ? \n
\n )\n}\n\nResponseCard.defaultProps = {\n isFullscreen: true,\n isOverlay: true,\n isSuccess: true,\n title: '',\n description: '',\n cta: Back to Help Centre ,\n}\n\nexport default ResponseCard\n","import React, { PureComponent } from 'react'\nimport { connect } from 'react-redux'\nimport { withRouter } from 'react-router'\nimport { Link } from 'react-scroll'\n\nimport { jira_actions } from 'spd-hd/actions'\nimport { Icons } from 'spd-hd/components/common'\n\nclass Item extends PureComponent {\n state = {\n active: this.props.active || false,\n }\n\n componentDidMount() {\n const { link, active, data, dispatch } = this.props\n if (!link && active) {\n dispatch(\n jira_actions.GET_CONTENT({\n id: data.id,\n }),\n )\n }\n }\n\n render() {\n const { active } = this.state\n const { data, link, withHandler, id } = this.props\n return (\n {title}
\n{description}
\n {cta}\n\n
\n )\n }\n\n if (jira.contents && jira.contents[data.id]) {\n return (\n \n \n
\n )\n }\n }\n\n _itemClickHandler = e => {\n const {\n dispatch,\n jira,\n data,\n history,\n link,\n withHandler,\n handler,\n } = this.props\n if (withHandler) {\n handler(data)\n } else {\n if (link) {\n // If item has link do a history push\n let linkTo = `/article?id=${data.id}`\n if (typeof link === 'string') {\n if (link !== '') {\n linkTo = link\n }\n } else if (typeof link === 'function') {\n linkTo = link(data)\n }\n history.push(linkTo)\n } else {\n // If item doesnt have link do an accordion behavior\n this.setState(prevState => ({\n ...prevState,\n active: !prevState.active,\n }))\n if (!jira.contents[data.id]) {\n dispatch(\n jira_actions.GET_CONTENT({\n id: data.id,\n }),\n )\n }\n }\n }\n }\n}\n\nItem.defaultProps = {\n link: null,\n withHandler: false,\n handler: () => {},\n}\n\nconst mapStateToProps = state => ({\n jira: state.jira,\n})\n\nexport default connect(mapStateToProps)(withRouter(Item))\n","import React, { PureComponent } from 'react'\nimport { Icons } from 'spd-hd/components/common'\n\nclass Empty extends PureComponent {\n render() {\n const { image, title, fullscreen, children } = this.props\n return (\n {title}
\n{children}
\n \n \n \n
\n )\n }\n}\n\nLoading.defaultProps = {\n page: false,\n}\n\nexport default Loading\n","import React, { PureComponent } from 'react'\n\nclass Search extends PureComponent {\n state = {\n search: {\n query: '',\n },\n }\n\n _onSearchChange = e => {\n const { onSearchHandler } = this.props\n const { value } = e.target\n this.setState(\n prevState => ({\n ...prevState,\n search: {\n query: value,\n },\n }),\n () => {\n onSearchHandler(this.state.search.query)\n },\n )\n }\n\n render() {\n const { search: searchState } = this.state\n return (\n \n
\n \n
\n )\n }\n}\n\nFormField.defaultProps = {\n label: '',\n field: '',\n}\n\nexport default FormField\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst FormGroup = ({\n groupTitle,\n groupField,\n groupHeaderContent,\n children,\n className,\n}) => {\n return (\n {`${label}`}
\n {children}
\n \n
\n {groupTitle}
\n {groupField && (\n {groupField}
\n )}\n {groupHeaderContent && (\n {groupHeaderContent}
\n )}\n \n {error}\n
\n ) : null\n}\n\nexport default FormErrorBlock\n","import React, { PureComponent } from 'react'\nimport { Button, Icons } from 'spd-hd/components/common'\nimport FormErrorBlock from './FormErrorBlock'\n\nclass FormInput extends PureComponent {\n static getDerivedStateFromProps(props, state) {\n if (props.value !== state.value) {\n return {\n value: props.value,\n }\n }\n return null\n }\n\n state = {\n value: this.props.value,\n error: null,\n }\n\n componentDidMount() {\n const { capsOnBlur } = this.props\n if (capsOnBlur) {\n this._capsAllVals()\n }\n }\n\n render() {\n const {\n id,\n label,\n error,\n value,\n name,\n maxLength,\n handleChange,\n handleBlur,\n isInline,\n ctaHandler,\n ctaLabel,\n note,\n loading,\n capsOnBlur,\n setFieldValue,\n onlyNumber,\n showError,\n capsOnChange,\n ...props\n } = this.props\n const { value: stateValue } = this.state\n return (\n {label}
\n )}\n \n {note && {note}}\n \n \n )}\n
\n \n )\n }\n\n _changeHandler = e => {\n const {\n handleChange,\n setFieldValue,\n id,\n onlyNumber,\n capsOnChange,\n } = this.props\n if (setFieldValue) {\n let value = e.target.value\n if (onlyNumber) {\n value = value.replace(/[a-zA-Z]/g, '')\n }\n if (capsOnChange) {\n if (typeof value === 'string') {\n value = value.toUpperCase()\n }\n }\n setFieldValue(id, value)\n if (handleChange) {\n handleChange(e)\n }\n } else {\n if (handleChange) {\n handleChange(e)\n }\n }\n }\n\n _blurHandler = e => {\n const { handleBlur, capsOnBlur, error } = this.props\n if (capsOnBlur) {\n this._capsAllVals()\n }\n if (handleBlur) {\n handleBlur(e)\n }\n if (error) {\n this.setState(prevState => ({\n ...prevState,\n error,\n }))\n } else {\n this.setState(prevState => ({\n ...prevState,\n error: null,\n }))\n }\n }\n\n _capsAllVals = () => {\n const { id, value, setFieldValue } = this.props\n if (setFieldValue) {\n const val = value.toUpperCase()\n setFieldValue(id, val)\n }\n }\n}\n\nFormInput.defaultProps = {\n isInline: true,\n}\n\nexport default FormInput\n","import React, { useState, useEffect, useRef } from 'react'\nimport FormErrorBlock from './FormErrorBlock'\nimport classNames from 'classnames'\n\nconst FormSelectOption = (props) => {\n const selectRef = useRef(null)\n const [state, setState] = useState({\n error: null,\n focus: true,\n innerText: null,\n })\n\n useEffect(() => {\n setState(prevState => ({\n ...prevState,\n innerText: selectRef.current.options[selectRef.current.selectedIndex].text,\n }))\n }, [props.value])\n\n const blurHandler = e => {\n if (props.handleBlur) {\n props.handleBlur(e)\n }\n if (props.error) {\n setState(prevState => ({\n ...prevState,\n error: props.error,\n }))\n } else {\n setState(prevState => ({\n ...prevState,\n error: null,\n }))\n }\n setState(prevState => ({\n ...prevState,\n focus: false,\n }))\n }\n\n const changeHandler = e => {\n if (props.handleChange) {\n props.handleChange(e, props.value)\n }\n }\n\n const {\n label,\n id,\n name,\n error,\n value,\n handleChange,\n children,\n options,\n textWrap,\n ...otherProps\n } = props\n\n const { innerText } = state\n let val = value\n if (typeof value === 'string') {\n val = val.toLowerCase()\n }\n\n return (\n \n \n {ctaLabel || 'Continue'}\n \n
\n )}\n {loading && (\n {label}
\n \n {textWrap && (\n \n {innerText || 'Select'}\n
\n )}\n {label}
\n \n
\n \n )\n}\n\nFormTextArea.defaultProps = {\n cols: 35,\n rows: 10,\n maxLength: 1000,\n showRemaining: false,\n}\n\nexport default FormTextArea\n","import React, { PureComponent } from 'react'\nimport { Icons, Button } from 'spd-hd/components/common'\nimport { API } from 'spd-hd/services'\nimport FormErrorBlock from './FormErrorBlock'\n\nconst MESSAGE = {\n moreThanLimit: 'Please attach an image with size no more than %d MB.',\n errorMessage: 'There was a problem parsing your file.',\n}\n\nconst MAX_NAME_CHAR = 25\n\nclass Upload {\n static getAll({ transaction_id }) {\n let result = {}\n API.getAttachments({\n transaction_id,\n })\n .then(res => {\n result = {\n ...res,\n success: true,\n }\n })\n .catch(err => {\n result.success = false\n result.err = err\n })\n return result\n }\n\n static remove({ transaction_id, type }) {\n return new Promise((resolve, reject) => {\n let result = {}\n API.deleteAttachment({\n transaction_id,\n type,\n })\n .then(res => {\n result = {\n ...res,\n success: true,\n }\n resolve(result)\n })\n .catch(err => {\n result.success = false\n result.err = err\n resolve(result)\n })\n })\n }\n\n constructor(file, max = 5000000, params = {}) {\n this._reader = new FileReader()\n this._file = file\n this._max = max\n this._params = params\n }\n\n upload() {\n return new Promise((resolve, reject) => {\n let result = {}\n if (this._file.length === 1) {\n API.attachDoc({\n transaction_id: this._params.transaction_id,\n type: this._params.type,\n file: this._file[0],\n })\n .then(res => {\n result = {\n ...res,\n success: true,\n }\n resolve(result)\n })\n .catch(err => {\n result.success = false\n result.err = err\n resolve(result)\n })\n }\n })\n }\n\n process(upload = false) {\n if (!this._file) return\n if (Array.isArray(this._file) && this._file.length === 0) return\n if (Array.isArray(this._file) && this._file.length > 0) {\n return new Promise(async (resolve, reject) => {\n const files = []\n const errors = []\n let file\n let fileIndex\n let uploadRes\n\n this._reader.onload = async () => {\n if (file.size <= this._max) {\n if (upload) {\n uploadRes = await this.upload()\n }\n if (uploadRes && !uploadRes.success) {\n reject({\n err: new Error(\n 'There was an error when uploading. Please try again.',\n ),\n })\n }\n let filePayload\n\n if (upload) {\n filePayload = {\n index: fileIndex,\n name: file.name,\n type: file.type,\n }\n } else {\n filePayload = {\n index: fileIndex,\n name: file.name,\n type: file.type,\n data: this._reader.result,\n }\n }\n\n files.push(filePayload)\n if (uploadRes) {\n resolve(files, {\n ...uploadRes,\n })\n } else {\n resolve(files)\n }\n } else {\n let errMsg = MESSAGE.moreThanLimit.replace(\n /%d/g,\n this._max / 1000000,\n )\n errors.push({\n index: fileIndex,\n name: file.name,\n error: new Error(errMsg),\n })\n if (uploadRes) {\n reject({\n err: errors,\n upload: {\n ...uploadRes,\n },\n })\n } else {\n reject({\n err: errors,\n })\n }\n }\n }\n this._file.forEach((f, fIn) => {\n file = f\n fileIndex = fIn\n this._reader.readAsDataURL(f)\n })\n })\n }\n return new Promise(async (resolve, reject) => {\n let uploadRes\n if (upload) {\n uploadRes = await this.upload()\n }\n this._reader.onload = () => {\n if (this._file.size <= this._max) {\n if (uploadRes) {\n resolve(\n {\n name: this._file.name,\n data: this._reader.result,\n },\n {\n ...uploadRes,\n },\n )\n } else {\n resolve({\n name: this._file.name,\n data: this._reader.result,\n })\n }\n } else {\n let errMsg = MESSAGE.moreThanLimit.replace(/%d/g, this._max / 1000000)\n if (uploadRes) {\n reject({\n err: {\n name: this._file.name,\n error: new Error(errMsg),\n },\n upload: {\n ...uploadRes,\n },\n })\n } else {\n reject({\n name: this._file.name,\n error: new Error(errMsg),\n })\n }\n }\n }\n\n this._reader.onerror = () => {\n this._reader.abort()\n let errMsg = MESSAGE.errorMessage\n reject({\n name: this._file.name,\n error: new Error(errMsg),\n })\n }\n\n this._reader.readAsDataURL(this._file)\n })\n }\n}\n\nclass Photo extends PureComponent {\n state = {\n thumb: null,\n thumbName: '',\n errMsg: '',\n }\n _onChangeHandler = e => {\n e.preventDefault()\n const { setFieldValue, id } = this.props\n const file = e.target.files[0]\n this.uploader = new Upload(file)\n this.uploader\n .process()\n .then(res => {\n this.setState(\n prevState => ({\n ...prevState,\n thumb: res.data,\n thumbName: res.name,\n }),\n () => {\n setFieldValue(id, this.state.thumb)\n },\n )\n })\n .catch(err => {\n this.setState(prevState => ({\n ...prevState,\n errMsg: err,\n }))\n })\n }\n\n render() {\n const { thumb, thumbName } = this.state\n const { id, label } = this.props\n return (\n \n {label !== '' && {label}}\n {thumb && (\n \n 
\n \n )}\n
\n \n )\n }\n}\n\nPhoto.defaultProps = {\n id: '',\n error: [],\n label: '',\n setFieldValue: () => {},\n}\n\nclass Doc extends PureComponent {\n checkedForVal = false\n constructor(props) {\n super(props)\n this.state = {\n files: [],\n errMsg: null,\n }\n // this._checkForValue()\n }\n\n componentDidMount() {\n if (!this.checkedForVal) {\n this._checkForValue()\n }\n }\n\n componentDidUpdate() {\n if (!this.checkedForVal) {\n this._checkForValue()\n }\n }\n\n render() {\n const { files, errMsg, processing, deleting } = this.state\n const {\n id,\n error,\n label,\n max,\n format,\n multiple,\n onlyElem,\n useFilename,\n } = this.props\n return (\n {label}
}\n \n {files.length === 0 && !multiple && (\n
\n \n )\n }\n\n _sendFiles() {\n const { setFieldValue, id, multiple } = this.props\n const { files } = this.state\n let value = files\n if (!multiple) {\n value = files[0]\n }\n setFieldValue(id, value)\n }\n\n _onChangeHandler = e => {\n e.preventDefault()\n const { params, upload, max, multiple } = this.props\n const files = e.target.files\n this.setState(prevState => ({\n ...prevState,\n errMsg: null,\n }))\n if (files && files.length > 0) {\n const _files = [...files]\n let maxCharErrMsg = 'Please rename your filename to 25 characters'\n let maxCharErr = false\n if (multiple) {\n maxCharErrMsg =\n \"Please rename one/more of your files' name to 25 characters\"\n }\n _files.forEach(file => {\n if (file.name) {\n let name = file.name\n .split('.')\n .slice(0, -1)\n .join('.')\n if (name.length > MAX_NAME_CHAR) {\n maxCharErr = true\n }\n }\n })\n if (maxCharErr) {\n this.setState(prevState => ({\n ...prevState,\n errMsg: new Error(maxCharErrMsg),\n }))\n return null\n }\n if (params) {\n this.uploader = new Upload([...files], max, {\n transaction_id: params.transaction_id,\n type: params.type,\n })\n } else {\n this.uploader = new Upload([...files], max)\n }\n this.setState(prevState => ({\n ...prevState,\n processing: true,\n }))\n this.uploader\n .process(upload)\n .then(res => {\n this.setState(\n prevState => ({\n ...prevState,\n errMsg: null,\n processing: false,\n files: res,\n }),\n () => {\n this._sendFiles()\n },\n )\n })\n .catch(res => {\n let errMsg = ''\n if (res.err) {\n errMsg = res.err[0].error\n } else {\n errMsg = res.error\n }\n this.setState(prevState => ({\n ...prevState,\n processing: false,\n errMsg: errMsg,\n }))\n })\n }\n }\n\n _deleteDocHandler = async docIndex => {\n const { params, upload } = this.props\n const { files } = this.state\n if (files[docIndex]) {\n if (upload) {\n this.setState(prevState => ({\n ...prevState,\n deleting: true,\n }))\n const res = await Upload.remove({\n transaction_id: params.transaction_id,\n type: params.type,\n })\n if (res && res.success) {\n this.setState(\n prevState => {\n const _files = [...prevState.files]\n _files.splice(docIndex, 1)\n return {\n ...prevState,\n deleting: false,\n files: [..._files],\n }\n },\n () => {\n this._sendFiles()\n },\n )\n } else {\n this.setState(prevState => ({\n ...prevState,\n deleting: false,\n errMsg: new Error(\n 'There was a problem on deleting the attachment. Please try again.',\n ),\n }))\n }\n } else {\n this.setState(\n prevState => {\n const _files = [...prevState.files]\n _files.splice(docIndex, 1)\n return {\n ...prevState,\n files: [..._files],\n }\n },\n () => {\n this._sendFiles()\n },\n )\n }\n }\n this._file.value = ''\n this.uploader = null\n }\n\n _checkForValue() {\n const { value } = this.props\n if (value && value.length > 0) {\n this.setState(\n prevState => ({\n ...prevState,\n files: value.map((v, i) => {\n let name = ''\n if (typeof v === 'string') {\n name = v\n } else {\n name = v.name\n }\n return {\n name: `${name}`,\n // name: `${id}.${v.split('/').pop()}`,\n // name: v.filename,\n type: v,\n }\n }),\n }),\n () => {\n this.checkedForVal = true\n },\n )\n }\n }\n}\n\nDoc.defaultProps = {\n label: null,\n max: 5000000,\n format: ['.pdf', '.jpg', '.png'],\n error: [],\n id: '',\n multiple: false,\n useFilename: false,\n setFieldValue: () => {},\n value: [],\n}\n\nconst FormWrap = Component => {\n return class extends PureComponent {\n static defaultProps = {\n label: '',\n }\n render() {\n const { label, ...rest } = this.props\n return (\n \n 0}\n ref={el => {\n this._file = el\n }}\n />\n
\n )}\n {files.length > 0 && (\n \n {processing ? (\n
\n \n {`${max ? `Max ${max / 1000000}MB` : ''}${\n format !== '' ? `, file format ${format.join(', ')}` : ''\n }`}\n
\n \n
\n )}\n {errMsg && (\n - \n {files.map((file, i) => {\n return (\n
\n
\n )\n }\n }\n}\n\nexport default {\n Photo: Photo,\n Doc: Doc,\n FormWrap,\n}\n","import React, { PureComponent } from 'react'\nimport { connect } from 'react-redux'\nimport debounce from 'lodash/debounce'\n\nimport { Item, Empty } from 'spd-hd/components'\nimport { SearchField } from 'spd-hd/components/form'\nimport { jira_actions } from 'spd-hd/actions'\nimport Utils from 'spd-hd/utils'\n\nconst SEARCH_DELAY = 500\n\nclass Search extends PureComponent {\n state = {\n query: '',\n }\n componentDidMount() {\n const { search } = this.props.location\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this.processQuery(queries)\n } else {\n this.getSearchTopics()\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { search } = this.props.location\n if (search !== prevProps.location.search) {\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this.processQuery(queries)\n } else {\n this.getSearchTopics()\n }\n }\n }\n\n render() {\n const { jira, location } = this.props\n return (\n {`${label}`}
\n \n
\n \n \n {jira && !jira.list && (\n \n You may refine your search query and try again or visit the{' '}\n Help page for more options\n \n )}\n {jira && jira.list && jira.list.length > 0 && (\n \n
\n )\n }\n\n processQuery(queries, search) {\n if (queries.hasOwnProperty('topic') && queries.topic !== '') {\n if (this.state.query !== queries.topic) {\n this._debouncedGetSearchList(\n {\n value: queries.topic,\n isTopic: true,\n },\n false,\n search,\n )\n }\n } else if (queries.hasOwnProperty('query') && queries.query !== '') {\n if (this.state.query !== queries.query) {\n this._debouncedGetSearchList(\n {\n value: queries.query,\n isTopic: false,\n },\n false,\n search,\n )\n }\n } else if (queries.hasOwnProperty('mobile')) {\n this.getSearchTopics()\n }\n }\n\n getSearchList = ({ value, isTopic }, isTopicList = false, search = '') => {\n const { dispatch, history } = this.props\n if (!isTopicList) {\n this.setState({\n query: value,\n })\n if (!isTopic) {\n dispatch(\n jira_actions.SEARCH({\n query: value,\n history,\n search,\n }),\n )\n } else {\n dispatch(\n jira_actions.SEARCH_BY_LABEL({\n query: value,\n history,\n search,\n }),\n )\n }\n } else {\n this.setState({\n query: '',\n })\n dispatch(jira_actions.GET_SEARCH_TOPICS())\n history.push({\n pathname: '/search',\n search: null,\n })\n }\n }\n _debouncedGetSearchList = debounce(this.getSearchList, SEARCH_DELAY)\n\n getSearchTopics = () => {\n const { dispatch } = this.props\n dispatch(jira_actions.GET_SEARCH_TOPICS())\n }\n\n getListHandler = e => {\n const { dispatch } = this.props\n dispatch(jira_actions.GET_LIST())\n }\n\n _searchHandler = value => {\n if (value !== '') {\n this.processQuery(\n {\n query: value,\n },\n `?query=${value}`,\n )\n } else {\n this._debouncedGetSearchList({ value: '' }, true)\n }\n }\n\n _topicHandler(topic) {\n if (topic) {\n this.processQuery(\n {\n topic,\n },\n `?topic=${topic}`,\n )\n }\n }\n}\n\nconst mapStateToProps = state => {\n return {\n jira: state.jira,\n }\n}\n\nexport default connect(mapStateToProps)(Search)\n","import React, { PureComponent } from 'react'\nimport { connect } from 'react-redux'\nimport { Formik } from 'formik'\nimport { object, string, boolean } from 'yup'\n\nimport { Form as CasperUIForm } from '@casper-ui/components'\nimport { category_constants, halp_constants, defaults } from 'spd-hd/constants'\nimport {\n FormInput,\n FormSelectOption,\n FormTextArea,\n} from 'spd-hd/components/form'\nimport { Button, ResponseCard } from 'spd-hd/components/common'\nimport Utils from 'spd-hd/utils'\nimport { jira_actions } from 'spd-hd/actions'\n\nconst OTHERS_VALUE = 'Others'\nconst TICKET_NUMERIC_LENGTH = 7\nconst TICKET_PREFIX = 'I-'\nconst TICKET_TOTAL_LENGTH = TICKET_NUMERIC_LENGTH + TICKET_PREFIX.length\n\nconst schema = object().shape({\n category: string()\n .required()\n .label('Category'),\n subcategory_required: boolean(),\n subcategory: string()\n .when('subcategory_required', {\n is: true,\n then: string().required(),\n otherwise: string(),\n })\n .label('Sub Category'),\n enquirytype_required: boolean(),\n enquirytype: string()\n .when('enquirytype_required', {\n is: true,\n then: string().required(),\n otherwise: string(),\n })\n .label('Enquiry Type'),\n summary: string()\n .when('category', {\n is: cat => cat === category_constants.ENQUIRIES_ON_UTILITIES_ACCOUNT_CAT,\n then: string(),\n otherwise: string().required(),\n })\n .label('Subject'),\n description: string()\n .required()\n .label('Message'),\n // Extra fields\n 'contact-person': string()\n .when('category', {\n is: cat =>\n cat === category_constants.ENQUIRIES_ON_UTILITIES_ACCOUNT_CAT ||\n cat === category_constants.MYTENGAH_CAT,\n then: string().required(),\n otherwise: string(),\n })\n .label('Contact Person'),\n email: string()\n .when(['category', 'subcategory', 'enquirytype'], {\n is: (cat, subcat, enq) => {\n // not required list for email\n return !(\n (subcat === 'billing & payment' && enq === 'bills & consumption') ||\n (subcat === 'billing & payment' && enq === 'payment plan')\n )\n },\n then: string().required(),\n otherwise: string(),\n })\n .email('Please enter valid email address')\n .label('Email'),\n 'contact-number': string()\n .when(['category', 'subcategory'], {\n is: (cat, subcat) => {\n let is =\n cat === category_constants.ENQUIRIES_ON_UTILITIES_ACCOUNT_CAT ||\n cat === category_constants.MYTENGAH_CAT\n\n let except = subcat === category_constants.MISC_OR_OTHER_SUBCAT\n\n return is && !except\n },\n then: string().required(),\n otherwise: string(),\n })\n .label('Contact Number')\n .max(8)\n .matches(/(3|6|8|9)\\d{7}/, 'Please enter a valid Contact Number'),\n 'utilities-account-no': string()\n .when(['subcategory', 'enquirytype'], {\n is: (subcat, enq) => {\n let valid =\n subcat === 'billing & payment' ||\n subcat === 'online portal' ||\n subcat === 'meter readings & query' ||\n subcat === 'open electricity market' ||\n subcat === 'billing' ||\n (subcat === 'open & close utilities account' &&\n enq === 'close utilities account')\n\n return valid\n },\n then: string().required(),\n otherwise: string(),\n })\n .when('account_number_required', {\n is: true,\n then: string().required(),\n otherwise: string(),\n })\n .label('Utilities Account Number')\n .min(10, 'Utilities Number must be 10 characters')\n .max(10, 'Utilities Number must be 10 characters')\n .matches(/^[0-9]{9}[0-9-]/, 'Please enter valid Utilities No.'),\n 'iam-id': string(),\n serial_no: string(),\n 'ticket-no': string()\n .label('Ticket Number')\n .trim()\n .matches(\n new RegExp(`^(I-)*\\\\d{0,${TICKET_NUMERIC_LENGTH}}$`),\n 'Please enter a valid Ticket Number',\n ),\n})\n\nconst EXTRA_FIELDS = [\n 'utilities-account-no',\n 'iam_id',\n 'serial_no',\n 'contact-number',\n 'contact-person',\n 'email',\n]\n\nconst DEFAULT_ACTION_URL = `${defaults.HALP_API_BASE}${halp_constants.JIRA_FORM_ACT_URL}`\n\nclass Contact extends PureComponent {\n state = {\n defaultData: {\n category: '',\n subcategory: '',\n enquirytype: '',\n summary: '',\n description: '',\n name: '',\n 'contact-person': '',\n email: '',\n 'contact-number': '',\n 'utilities-account-no': '',\n 'iam-id': '',\n serial_no: '',\n attachments: [],\n },\n selectedCategory: null,\n selectedSubCategory: null,\n selectedEnquiryType: null,\n form_action_url: DEFAULT_ACTION_URL,\n form_action_api: false,\n disableCategory: false,\n disableSubCategory: false,\n disableOrderId: false,\n disableSubscriptionId: false,\n messageLength: 1000,\n messageMaxLength: 1000,\n code: null,\n }\n\n componentDidMount() {\n const {\n location: { search },\n } = this.props\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this._processQueries(queries)\n }\n\n this._reset()\n }\n\n componentDidUpdate(prevProps) {\n const {\n location: { search },\n } = this.props\n if (search !== prevProps.location.search) {\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this._processQueries(queries)\n }\n }\n }\n\n render() {\n const {\n jira,\n halp: { categories, mobile_mode },\n } = this.props\n const {\n defaultData,\n selectedCategory,\n selectedSubCategory,\n disableCategory,\n disableSubCategory,\n messageMaxLength,\n } = this.state\n\n let backToHelpUrl = '/#/'\n\n if (mobile_mode) {\n backToHelpUrl = '/#/?mobile=1'\n }\n return (\n - \n {jira.list.map((item, i) => {\n return (\n
\n (this._form = el)}\n validationSchema={schema}\n enableReinitialize={true}\n onSubmit={this._handleSubmit}\n initialValues={{\n ...defaultData,\n subcategory_required: false,\n enquirytype_required: false,\n account_number_required: false,\n 'ticket-no': TICKET_PREFIX,\n }}\n render={({ values, errors, touched, isValid, handleSubmit }) => {\n return (\n
\n )\n }\n >\n {`Submit`}\n \n \n )\n }}\n />\n {jira.send_inquiry_success && (\n \n {extraLabel}\n
\n )}\n \n )\n }\n\n if (id === 'attachments') {\n return (\n \n \n {[...Array(3)].map((_, index) => {\n return (\n \n {index === 0 && (\n {`Upload your supporting documents ${\n optional ? '[Optional]' : ''\n }`} \n )}\n \n )\n })}\n \n
\n )\n }\n }\n\n _handleChangeAttachment = (values, index) => (file, callback) => {\n const attachments = [...values.attachments]\n attachments[index] = file\n this._form.setFieldValue('attachments', attachments)\n callback()\n }\n\n _isSubmitDisabled = (errors, isValid) => {\n const {\n jira: { send_inquiry },\n } = this.props\n\n if (send_inquiry) {\n return true\n }\n\n if (isValid) {\n return false\n }\n\n if (!Utils.isEmpty(errors)) {\n return true\n }\n\n return true\n }\n patchFormValue = (\n values,\n { emailCode },\n selectedSubCategory,\n selectedEnquiryType,\n ) => {\n let patchedValues = { ...values }\n\n // Patching ticket number\n if (\n patchedValues['ticket-no'] &&\n typeof patchedValues['ticket-no'] === 'string'\n ) {\n // double make sure there is 'I- prefix'\n patchedValues['ticket-no'] =\n TICKET_PREFIX + patchedValues['ticket-no'].replace(TICKET_PREFIX, '')\n\n // remove TICKET_PREFIX when user does not input for the optional field.\n patchedValues['ticket-no'] = patchedValues['ticket-no'].replace(\n TICKET_PREFIX,\n '',\n )\n ? values['ticket-no']\n : ''\n }\n\n if (\n emailCode === halp_constants.EMAIL_TO_CODE_DCCBILLING ||\n emailCode === halp_constants.EMAIL_TO_CODE_DCCDEBT\n ) {\n patchedValues['email'] = halp_constants.EMAIL_DO_NOT_REPLY\n }\n\n if (\n selectedSubCategory != null &&\n selectedEnquiryType != null &&\n ((selectedSubCategory.value === 'Billing & Payment' &&\n selectedEnquiryType.value === 'Bills & Consumption') ||\n (selectedSubCategory.value === 'Billing & Payment' &&\n selectedEnquiryType.value === 'Payment Plan'))\n ) {\n patchedValues['email'] = values['email']\n ? values['email']\n : halp_constants.EMAIL_DO_NOT_REPLY\n }\n\n return patchedValues\n }\n\n _handleSubmit = values => {\n const { dispatch } = this.props\n const {\n form_action_url,\n form_action_api,\n selectedCategory,\n selectedSubCategory,\n selectedEnquiryType,\n code,\n } = this.state\n\n // is submission has attachment\n const hasAttachment = values.attachments && values.attachments.length\n\n // is submission via Caspersky\n const isCaspersky =\n selectedCategory.value ===\n category_constants.ENQUIRIES_ON_UTILITIES_ACCOUNT_VALUE ||\n selectedCategory.value === category_constants.MYTENGAH_VALUE\n\n // is submission via API\n const isApiFormFileUpload =\n selectedCategory.value === category_constants.MOBILE_APP_LOGIN_VALUE ||\n selectedCategory.value ===\n category_constants.MOBILE_REPORT_APP_ISSUE_VALUE ||\n selectedCategory.value === category_constants.MOBILE_OTHERS_VALUE\n\n // patching for bussiness logic before submit\n const patchedValues = this.patchFormValue(\n values,\n { emailCode: code },\n selectedSubCategory,\n selectedEnquiryType,\n )\n\n if (isCaspersky) {\n const payload = {\n subject: patchedValues['summary'],\n message: patchedValues['description'],\n contact_person: patchedValues['contact-person'],\n contact_email: patchedValues['email'],\n contact_no: patchedValues['contact-number'],\n account_no: patchedValues['utilities-account-no'],\n ticket_no: patchedValues['ticket-no'],\n iam_id: patchedValues['iam-id'],\n help_category: {\n main_category: patchedValues.category,\n sub_category: patchedValues.subcategory,\n enquiry_type: patchedValues.enquirytype,\n code: code,\n },\n }\n\n const formData = new FormData()\n patchedValues.attachments\n .filter(file => !!file)\n .forEach(file => {\n formData.append('files', file)\n })\n formData.append('help', JSON.stringify(payload))\n\n dispatch(jira_actions.SEND_INQUIRY(formData, form_action_url, false))\n } else if (isApiFormFileUpload && hasAttachment) {\n const formData = new FormData()\n patchedValues.attachments\n .filter(file => !!file)\n .forEach(file => {\n formData.append('attachments', file)\n })\n\n Object.keys(patchedValues)\n .filter(key => key !== 'attachments')\n .map(key => {\n formData.append(key, patchedValues[key])\n })\n formData.append('_next', '')\n dispatch(jira_actions.SEND_INQUIRY(formData, form_action_url, false))\n } else {\n dispatch(\n jira_actions.SEND_INQUIRY(\n {\n ...patchedValues,\n _next: '',\n },\n form_action_url,\n !form_action_api,\n ),\n )\n }\n }\n\n _handleChange = e => {\n const target = e.target\n this._form.setFieldTouched(target.id, true)\n this._form.handleChange(e)\n if (target.id === 'subcategory') {\n this._resetFields(['order-id', 'subscription-id'])\n }\n }\n\n _handleBlur = e => {\n const target = e.target\n this._form.setFieldTouched(target.id, true)\n this._form.handleBlur(e)\n }\n\n _handleCategory = e => {\n const category = e.target.value\n const {\n halp: { categories },\n } = this.props\n const selectedCategory = categories.filter(\n cat => cat.value.toLowerCase() === category,\n )\n const actionUrl = selectedCategory[0].action_url\n const shouldUseAPI =\n selectedCategory[0].action && selectedCategory[0].action === 'api'\n\n this._form.setFieldValue('subcategory', '')\n this._form.setFieldTouched('subcategory', false)\n this._form.setFieldValue('enquirytype', '')\n this._form.setFieldTouched('enquirytype', false)\n\n if (selectedCategory[0]) {\n if (selectedCategory[0].sub_categories) {\n this._form.setFieldValue('subcategory_required', true)\n } else {\n this._form.setFieldValue('subcategory_required', false)\n }\n this.setState(prevState => ({\n ...prevState,\n selectedCategory: selectedCategory[0],\n selectedSubCategory: null,\n selectedEnquiryType: null,\n form_action_url: actionUrl || prevState.form_action_url,\n form_action_api: shouldUseAPI,\n }))\n this._form.setFieldTouched('category', true)\n this._form.setFieldValue('category', category)\n this._resetFields(['order-id', 'subscription-id'])\n }\n }\n\n _handleSubCategory = e => {\n const subcategory = e.target.value\n const { selectedCategory } = this.state\n\n this._form.setFieldValue('enquirytype', '')\n this._form.setFieldTouched('enquirytype', false)\n\n if (selectedCategory.sub_categories) {\n const selectedSubCategory = selectedCategory.sub_categories.filter(\n sub => sub.value.toLowerCase() === subcategory,\n )\n if (selectedSubCategory[0]) {\n if (selectedSubCategory[0].enquiry_type) {\n this._form.setFieldValue('enquirytype_required', true)\n } else {\n this._form.setFieldValue('enquirytype_required', false)\n }\n this.setState(prevState => ({\n ...prevState,\n selectedSubCategory: selectedSubCategory[0],\n selectedEnquiryType: null,\n code: selectedSubCategory[0].code || null,\n }))\n\n if (\n selectedCategory.value ===\n category_constants.ENQUIRIES_ON_UTILITIES_ACCOUNT_VALUE &&\n selectedSubCategory[0].value === OTHERS_VALUE\n ) {\n this._form.setFieldValue('account_number_required', true)\n } else {\n this._form.setFieldValue('account_number_required', false)\n }\n }\n }\n this._form.setFieldTouched('subcategory', true)\n this._form.setFieldValue('subcategory', subcategory)\n }\n\n _handleEnquiryType = e => {\n const enquirytype = e.target.value\n const { selectedSubCategory } = this.state\n\n if (selectedSubCategory.enquiry_type) {\n const selectedEnquiryType = selectedSubCategory.enquiry_type.filter(\n sub => sub.value.toLowerCase() === enquirytype,\n )\n if (selectedEnquiryType[0]) {\n this.setState(prevState => ({\n ...prevState,\n selectedEnquiryType: selectedEnquiryType[0],\n code: selectedEnquiryType[0].code,\n }))\n }\n }\n this._form.setFieldTouched('enquirytype', true)\n this._form.setFieldValue('enquirytype', enquirytype)\n }\n\n _getTopics = () => {\n const { dispatch } = this.props\n dispatch(jira_actions.GET_REQUEST_TYPES())\n }\n\n _processQueries = queries => {\n if (queries['type']) {\n const query_type = queries['type']\n const disabled = {\n disableCategory: false,\n disableSubCategory: false,\n disableOrderId: false,\n disableSubscriptionId: false,\n }\n\n switch (query_type) {\n case 'forgot_email': {\n this._processCategoryAndSubcategory(\n 'Mobile App Login',\n 'Password & Email',\n { disableCategory: true, disableSubCategory: true },\n )\n break\n }\n\n case 'ev': {\n this._processCategoryAndSubcategory('Electric Vehicle', '', {\n disableCategory: true,\n disableSubCategory: false,\n })\n break\n }\n\n case 'homeup:order': {\n this._processCategoryAndSubcategory('HomeUP', 'Ambi Climate', {\n disableCategory: true,\n disableSubCategory: true,\n })\n Utils.changeDocumentTitle('Report Device Issue')\n if (queries['params']) {\n let params = Utils.getParams({\n query: queries['params'],\n param: 'orderId',\n })\n if (params.orderId) {\n this._form.setFieldValue('order-id', params.orderId)\n disabled.disableOrderId = true\n }\n }\n break\n }\n\n case 'homeup:subscription': {\n this._processCategoryAndSubcategory('HomeUP', 'Energy Insight', {\n disableCategory: true,\n disableSubCategory: true,\n })\n Utils.changeDocumentTitle('Report Device Issue')\n if (queries['params']) {\n let params = Utils.getParams({\n query: queries['params'],\n param: 'subscriptionId',\n })\n if (params.subscriptionId) {\n this._form.setFieldValue('subscription-id', params.subscriptionId)\n disabled.disableSubscriptionId = true\n }\n }\n break\n }\n\n case 'link-utilities': {\n this._processCategoryAndSubcategory(\n 'Mobile App Login',\n 'Link Utilities Account',\n { disableCategory: true, disableSubCategory: true },\n )\n if (queries['utilitiesAccountNumber']) {\n this._form.setFieldValue(\n 'utilities-account-no',\n queries['utilitiesAccountNumber'],\n )\n }\n if (queries['iamID']) {\n this._form.setFieldValue('iam-id', queries['iamID'])\n }\n break\n }\n\n case 'bill-utilities': {\n this._processCategoryAndSubcategory(\n 'Enquiries on Utilities Account',\n 'Billing & Payment',\n { disableCategory: true, disableSubCategory: true },\n )\n if (queries['utilitiesAccountNumber']) {\n this._form.setFieldValue(\n 'utilities-account-no',\n queries['utilitiesAccountNumber'],\n )\n }\n if (queries['iamID']) {\n this._form.setFieldValue('iam-id', queries['iamID'])\n }\n break\n }\n\n default:\n break\n }\n }\n }\n\n _processCategoryAndSubcategory = (\n category = '',\n sub_category = '',\n disabled = {},\n ) => {\n const {\n halp: { categories },\n } = this.props\n\n let selectedCategory = categories.filter(\n cat => cat.value.toLowerCase() === category.toLowerCase(),\n )\n let selectedSubCategory = null\n let actionUrl = ''\n let shouldUseAPI = false\n\n if (selectedCategory[0]) {\n actionUrl = selectedCategory[0].action_url\n shouldUseAPI =\n (selectedCategory[0].action && selectedCategory[0].action === 'api') ||\n shouldUseAPI\n this._form.setFieldValue('category', category.toLowerCase())\n\n if (selectedCategory[0].sub_categories) {\n this._form.setFieldValue('subcategory_required', true)\n if (sub_category !== '') {\n selectedSubCategory = selectedCategory[0].sub_categories.filter(\n sub => sub.value.toLowerCase() === sub_category.toLowerCase(),\n )\n if (selectedSubCategory[0]) {\n actionUrl = selectedSubCategory[0].action_url || actionUrl\n shouldUseAPI =\n (selectedSubCategory[0].action &&\n selectedSubCategory[0].action === 'api') ||\n shouldUseAPI\n this._form.setFieldValue('subcategory', sub_category.toLowerCase())\n }\n } else {\n this._form.setFieldValue('subcategory', '')\n }\n } else {\n this._form.setFieldValue('subcategory_required', false)\n this._form.setFieldValue('subcategory', '')\n }\n }\n this.setState(prevState => ({\n ...prevState,\n selectedCategory: selectedCategory[0],\n selectedSubCategory:\n selectedSubCategory && selectedSubCategory.length > 0\n ? selectedSubCategory[0]\n : null,\n selectedEnquiryType: null,\n form_action_url: actionUrl || prevState.form_action_url,\n form_action_api: shouldUseAPI,\n ...disabled,\n }))\n\n // it is okay to do this after updating state\n if (selectedSubCategory && selectedSubCategory[0].enquiry_type) {\n this._form.setFieldValue('enquirytype_required', true)\n } else {\n this._form.setFieldValue('enquirytype_required', false)\n }\n }\n\n _resetFields = (fields = EXTRA_FIELDS) => {\n fields.forEach(field => {\n this._form.setFieldValue(field, '')\n })\n }\n\n _reset = () => {\n const { dispatch } = this.props\n dispatch(jira_actions.RESET())\n }\n}\n\nconst mapStateToProps = state => {\n return {\n jira: state.jira,\n halp: state.halp,\n }\n}\n\nexport default connect(mapStateToProps)(Contact)\n","import React, { PureComponent } from 'react'\nimport { connect } from 'react-redux'\n\nimport { Card, Options, Button } from 'spd-hd/components/common'\nimport { Item, Loading } from 'spd-hd/components/'\nimport { halp_constants } from 'spd-hd/constants'\nimport { jira_actions, halp_actions } from 'spd-hd/actions'\nimport Utils from 'spd-hd/utils'\n\nclass Home extends PureComponent {\n state = {\n maintenance: {},\n }\n inDownTime = false\n componentDidMount() {\n const {\n location: { search },\n } = this.props\n\n this._getLanding()\n this._checkChatSuppAvailability()\n this._checkChatInterval = setInterval(() => {\n this._checkChatSuppAvailability()\n }, halp_constants.INTERVAL)\n\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this._processQueries(queries)\n }\n\n this._checkReportIncidentMaintenance()\n }\n\n componentDidUpdate(prevProps) {\n const {\n location: { search },\n } = this.props\n if (search !== prevProps.location.search) {\n if (search) {\n const queries = Utils.parseQueryParams(search)\n this._processQueries(queries)\n }\n }\n }\n\n componentWillUnmount() {\n clearTimeout(this._checkChatInterval)\n }\n\n render() {\n const { jira, halp } = this.props\n const { maintenance } = this.state\n\n let contactFormUrl = halp_constants.CONTACT_FORM_URL\n let chatSupportUrl = halp_constants.CHAT_SUPPORT_URL\n if (halp.mobile_mode) {\n contactFormUrl += `?mobile=1`\n }\n return (\n \n
\n )\n }\n\n _viewAllHandler = () => {\n const { halp } = this.props\n if (halp.mobile_mode) {\n window.location = `/#/search?mobile=1`\n } else {\n window.location = `/#/search`\n }\n }\n\n _getLanding() {\n const { dispatch } = this.props\n dispatch(jira_actions.GET_LANDING())\n }\n\n _checkChatSuppAvailability() {\n const { dispatch } = this.props\n dispatch(halp_actions.CHECK_CHATSUPP_AVAILABILITY())\n }\n\n _checkReportIncidentMaintenance() {\n const now = new Date()\n const toggle =\n new Date('2022-11-25T18:00:00.000+08:00') <= now &&\n now < new Date('2022-11-26T10:00:00.000+08:00')\n this.setState(prevState => ({\n ...prevState,\n maintenance: {\n ...prevState.chatSupport,\n reportIncident: toggle,\n },\n }))\n }\n\n _processQueries = queries => {\n if (queries['maintenance']) {\n const query_val = queries['maintenance']\n this.setState(prevState => ({\n ...prevState,\n maintenance: {\n chatSupport: query_val > 0,\n reportIncident: query_val > 0,\n },\n }))\n }\n }\n}\n\nconst mapStateToProps = state => {\n return {\n jira: state.jira,\n halp: state.halp,\n }\n}\n\nexport default connect(mapStateToProps)(Home)\n","import React, { PureComponent, Fragment } from 'react'\nimport { connect } from 'react-redux'\n\nimport { jira_actions } from 'spd-hd/actions'\nimport { Item, Empty, Loading } from 'spd-hd/components'\nimport Utils from 'spd-hd/utils'\n\nclass Article extends PureComponent {\n componentDidMount() {\n const {\n location: { search },\n } = this.props\n this.processQuery(search)\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.location.search) {\n const { search } = this.props.location\n if (search !== prevProps.location.search) {\n this.processQuery(search)\n }\n }\n }\n\n render() {\n const { jira } = this.props\n return (\n \n {\n 0\n ? `Popular Questions`\n : null\n }\n >\n {jira.fetching_popular ? (\n \n {`View all Questions`}\n \n \n }\n \n ![\"Chat\"](\"/images/chat.svg\")
,\n link: halp.chatsupp_available\n ? Utils.attachUrlParams(chatSupportUrl, {\n params: halp.infinity.vars,\n preParam: 'att',\n })\n : null,\n disabled: maintenance.chatSupport || !halp.chatsupp_available,\n dontRender: !halp.mobile_mode || this.inDownTime,\n },\n {\n id: 'report-incident',\n title: 'Report Incident',\n description: 'Report Worksite/Outage Matters.',\n icon: ![\"Chat\"](\"/images/alert.svg\")
,\n link: 'https://getup.today/reportincident',\n disabled: maintenance.reportIncident,\n dontRender: !halp.mobile_mode,\n },\n ]}\n />\n \n
\n - \n {jira.popular.map(faq => {\n return (\n
,\n link: halp.chatsupp_available\n ? Utils.attachUrlParams(chatSupportUrl, {\n params: halp.infinity.vars,\n preParam: 'att',\n })\n : null,\n disabled: maintenance.chatSupport || !halp.chatsupp_available,\n dontRender: !halp.mobile_mode || this.inDownTime,\n },\n {\n id: 'report-incident',\n title: 'Report Incident',\n description: 'Report Worksite/Outage Matters.',\n icon: ,\n link: 'https://getup.today/reportincident',\n disabled: maintenance.reportIncident,\n dontRender: !halp.mobile_mode,\n },\n ]}\n />\n - \n {jira.list.map((item, i) => {\n return (\n
\n \n \n
\n