webmotors-cockpit-structure
Advanced tools
Comparing version 1.1.8 to 1.1.9
@@ -1,2 +0,2 @@ | ||
| 'use strict'; | ||
| "use strict"; | ||
@@ -9,12 +9,8 @@ Object.defineProperty(exports, "__esModule", { | ||
| var _react = require('react'); | ||
| var _react = require("react"); | ||
| var _react2 = _interopRequireDefault(_react); | ||
| var _CockpitUtils = require('webmotors-cockpit-structure/CockpitUtils'); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } | ||
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
@@ -32,213 +28,31 @@ | ||
| var _this = _possibleConstructorReturn(this, (CockpitFooter.__proto__ || Object.getPrototypeOf(CockpitFooter)).call(this, props)); | ||
| _this.state = { | ||
| loaded: true, | ||
| note: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] | ||
| }; | ||
| _this.npsContent = (0, _react.createRef)(); | ||
| return _this; | ||
| return _possibleConstructorReturn(this, (CockpitFooter.__proto__ || Object.getPrototypeOf(CockpitFooter)).call(this, props)); | ||
| } | ||
| _createClass(CockpitFooter, [{ | ||
| key: 'componentDidMount', | ||
| value: function componentDidMount() { | ||
| var _this2 = this; | ||
| (0, _CockpitUtils.ajax)((/estoque.webmotors/.test(window.location.host) ? '/api' : this.props.ApiCockpit) + '/Nps', {}, 'GET').then(function (e) { | ||
| var payload = e.payload; | ||
| if (payload.data && payload.data.success && !payload.data.data) { | ||
| _this2.setState({ | ||
| npsHas: true, | ||
| npsOpen: true | ||
| }, function () { | ||
| (0, _CockpitUtils.accordionAnimate)(_this2.state.npsOpen, _this2.npsContent.current); | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'handleNpsOpen', | ||
| value: function handleNpsOpen() { | ||
| var _this3 = this; | ||
| this.setState(function (prevState) { | ||
| return { | ||
| npsOpen: !prevState.npsOpen | ||
| }; | ||
| }, function () { | ||
| (0, _CockpitUtils.accordionAnimate)(_this3.state.npsOpen, _this3.npsContent.current); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'handleNpsClose', | ||
| value: function handleNpsClose() { | ||
| var _this4 = this; | ||
| this.setState({ | ||
| npsOpen: false, | ||
| npsHas: false | ||
| }, function () { | ||
| (0, _CockpitUtils.accordionAnimate)(_this4.state.npsOpen, _this4.npsContent.current); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'handleNpsChange', | ||
| value: function handleNpsChange(e, npsNote) { | ||
| [].concat(_toConsumableArray(document.querySelectorAll('.cockpit-footer__nps-radio'))).forEach(function (item) { | ||
| return item.parentNode.classList.remove('cockpit-footer__nps-note--active'); | ||
| }); | ||
| e.target.parentNode.classList.add('cockpit-footer__nps-note--active'); | ||
| this.setState({ | ||
| npsComments: true, | ||
| npsNote: npsNote | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'handleSubmit', | ||
| value: function handleSubmit(e) { | ||
| var _this5 = this; | ||
| e.preventDefault(); | ||
| var _document$querySelect = document.querySelector('.cockpit-footer__nps-textarea'), | ||
| value = _document$querySelect.value; | ||
| this.npsContent.current.style.height = 'auto'; | ||
| this.setState({ | ||
| loaded: false | ||
| }, function () { | ||
| (0, _CockpitUtils.ajax)((/estoque.webmotors/.test(window.location.host) ? '/api' : _this5.props.ApiCockpit) + '/Nps', { | ||
| nota: _this5.state.npsNote, | ||
| comentario: value | ||
| }).then(function (f) { | ||
| var payload = f.payload; | ||
| if (payload.success) { | ||
| _this5.setState({ | ||
| npmVote: true | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| }, { | ||
| key: 'renderNpsContent', | ||
| value: function renderNpsContent() { | ||
| var _this6 = this; | ||
| var _state = this.state, | ||
| loaded = _state.loaded, | ||
| npsComments = _state.npsComments; | ||
| return loaded ? _react2.default.createElement( | ||
| _react.Fragment, | ||
| null, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__nps-score' }, | ||
| this.state.note.map(function (item) { | ||
| return _react2.default.createElement( | ||
| 'label', | ||
| { key: item, htmlFor: 'nota_' + item, className: 'cockpit-footer__nps-note cockpit-footer__nps-note--active' }, | ||
| _react2.default.createElement('input', { type: 'radio', name: 'nota', id: 'nota_' + item, 'data-type': 'number', className: 'cockpit-footer__nps-radio', onChange: function onChange(e) { | ||
| return _this6.handleNpsChange(e, item); | ||
| } }), | ||
| _react2.default.createElement( | ||
| 'span', | ||
| { className: 'cockpit-footer__nps-square cockpit-footer__nps-square--' + item }, | ||
| item | ||
| ) | ||
| ); | ||
| }) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__nps-comment ' + (npsComments ? 'cockpit-footer__nps-comment--active' : '') }, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { className: 'cockpit-footer__nps-descript' }, | ||
| 'Descreva o que motivou a atribui\xE7\xE3o desta nota (opcional)' | ||
| ), | ||
| _react2.default.createElement('textarea', { name: 'comentario', className: 'cockpit-footer__nps-textarea', maxLength: '512' }), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 't-ac' }, | ||
| _react2.default.createElement( | ||
| 'button', | ||
| { className: 'btn btn--red', type: 'submit' }, | ||
| 'Enviar' | ||
| ) | ||
| ) | ||
| ) | ||
| ) : _react2.default.createElement('div', { className: 'load load--dark' }); | ||
| } | ||
| }, { | ||
| key: 'renderNpsText', | ||
| value: function renderNpsText() { | ||
| return this.state.loaded ? 'Com base na sua experiência com a Webmotors, como você classifica os serviços prestados, em uma escala de 0 a 10?' : 'Estamos enviando sua pesquisa'; | ||
| } | ||
| }, { | ||
| key: 'render', | ||
| key: "render", | ||
| value: function render() { | ||
| var _this7 = this; | ||
| var _state2 = this.state, | ||
| npsHas = _state2.npsHas, | ||
| npsOpen = _state2.npsOpen, | ||
| npmVote = _state2.npmVote; | ||
| return _react2.default.createElement( | ||
| 'footer', | ||
| { className: 'cockpit-footer' }, | ||
| "footer", | ||
| { className: "cockpit-footer" }, | ||
| _react2.default.createElement( | ||
| 'form', | ||
| { onSubmit: function onSubmit(e) { | ||
| return _this7.handleSubmit(e); | ||
| }, className: 'cockpit-footer__nps ' + (npsHas ? 'cockpit-footer__nps--has' : '') + ' ' + (npsOpen ? 'cockpit-footer__nps--open' : '') }, | ||
| _react2.default.createElement('button', { type: 'button', className: 'cockpit-footer__nps-toggle', onClick: function onClick() { | ||
| return _this7.handleNpsOpen(); | ||
| } }), | ||
| "div", | ||
| { className: "cockpit-footer__container" }, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__nps-content ' + (!npsOpen ? 'accordion--hidden' : ''), ref: this.npsContent }, | ||
| _react2.default.createElement( | ||
| 'p', | ||
| { className: 'cockpit-footer__nps-text' }, | ||
| npmVote ? 'Agradecemos a sua resposta' : this.renderNpsText() | ||
| ), | ||
| npmVote ? _react2.default.createElement( | ||
| 'div', | ||
| { className: 't-ac' }, | ||
| _react2.default.createElement( | ||
| 'button', | ||
| { className: 'btn btn--red mb-24', type: 'button', onClick: function onClick() { | ||
| return _this7.handleNpsClose(); | ||
| } }, | ||
| 'Continuar' | ||
| ) | ||
| ) : this.renderNpsContent() | ||
| ) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__container' }, | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__copyright' }, | ||
| '\xA9 1995-' + new Date().getFullYear() + ' Webmotors S.A. Todos direitos reservados.' | ||
| "div", | ||
| { className: "cockpit-footer__copyright" }, | ||
| "\xA9 1995-" + new Date().getFullYear() + " Webmotors S.A. Todos direitos reservados." | ||
| ), | ||
| _react2.default.createElement( | ||
| 'div', | ||
| { className: 'cockpit-footer__sign' }, | ||
| "div", | ||
| { className: "cockpit-footer__sign" }, | ||
| _react2.default.createElement( | ||
| 'span', | ||
| { className: 'svg' }, | ||
| _react2.default.createElement('img', { alt: '', className: 'cockpit-footer__logo-webmotors', src: this.props.UrlCockpit + '/assets/img/brands/webmotors-2.svg?' + Date.now() }) | ||
| "span", | ||
| { className: "svg" }, | ||
| _react2.default.createElement("img", { alt: "", className: "cockpit-footer__logo-webmotors", src: this.props.UrlCockpit + "/assets/img/brands/webmotors-2.svg?" + Date.now() }) | ||
| ), | ||
| _react2.default.createElement( | ||
| 'span', | ||
| { className: 'svg' }, | ||
| _react2.default.createElement('img', { alt: '', className: 'cockpit-footer__logo-santander', src: this.props.UrlCockpit + '/assets/img/brands/santander-financiamento.svg?' + Date.now() }) | ||
| "span", | ||
| { className: "svg" }, | ||
| _react2.default.createElement("img", { alt: "", className: "cockpit-footer__logo-santander", src: this.props.UrlCockpit + "/assets/img/brands/santander-financiamento.svg?" + Date.now() }) | ||
| ) | ||
@@ -245,0 +59,0 @@ ) |
| { | ||
| "name": "webmotors-cockpit-structure", | ||
| "version": "1.1.8", | ||
| "version": "1.1.9", | ||
| "description": "Webmotors Cockpit Structure", | ||
@@ -5,0 +5,0 @@ "dependencies": { |
@@ -1,3 +0,2 @@ | ||
| import React, { Component, Fragment, createRef } from 'react'; | ||
| import { accordionAnimate, ajax } from 'webmotors-cockpit-structure/CockpitUtils'; | ||
| import React, { Component } from 'react'; | ||
@@ -7,134 +6,7 @@ class CockpitFooter extends Component { | ||
| super(props); | ||
| this.state = { | ||
| loaded: true, | ||
| note: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], | ||
| }; | ||
| this.npsContent = createRef(); | ||
| } | ||
| componentDidMount() { | ||
| ajax(`${/estoque.webmotors/.test(window.location.host) ? '/api' : this.props.ApiCockpit}/Nps`, {}, 'GET').then((e) => { | ||
| const { payload } = e; | ||
| if (payload.data && payload.data.success && !payload.data.data) { | ||
| this.setState({ | ||
| npsHas: true, | ||
| npsOpen: true, | ||
| }, () => { | ||
| accordionAnimate(this.state.npsOpen, this.npsContent.current); | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| handleNpsOpen() { | ||
| this.setState(prevState => ({ | ||
| npsOpen: !prevState.npsOpen, | ||
| }), () => { | ||
| accordionAnimate(this.state.npsOpen, this.npsContent.current); | ||
| }); | ||
| } | ||
| handleNpsClose() { | ||
| this.setState({ | ||
| npsOpen: false, | ||
| npsHas: false, | ||
| }, () => { | ||
| accordionAnimate(this.state.npsOpen, this.npsContent.current); | ||
| }); | ||
| } | ||
| handleNpsChange(e, npsNote) { | ||
| [...document.querySelectorAll('.cockpit-footer__nps-radio')].forEach(item => item.parentNode.classList.remove('cockpit-footer__nps-note--active')); | ||
| e.target.parentNode.classList.add('cockpit-footer__nps-note--active'); | ||
| this.setState({ | ||
| npsComments: true, | ||
| npsNote, | ||
| }); | ||
| } | ||
| handleSubmit(e) { | ||
| e.preventDefault(); | ||
| const { value } = document.querySelector('.cockpit-footer__nps-textarea'); | ||
| this.npsContent.current.style.height = 'auto'; | ||
| this.setState({ | ||
| loaded: false, | ||
| }, () => { | ||
| ajax(`${/estoque.webmotors/.test(window.location.host) ? '/api' : this.props.ApiCockpit}/Nps`, { | ||
| nota: this.state.npsNote, | ||
| comentario: value, | ||
| }).then((f) => { | ||
| const { payload } = f; | ||
| if (payload.success) { | ||
| this.setState({ | ||
| npmVote: true, | ||
| }); | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| renderNpsContent() { | ||
| const { loaded, npsComments } = this.state; | ||
| return ( | ||
| loaded | ||
| ? ( | ||
| <Fragment> | ||
| <div className="cockpit-footer__nps-score"> | ||
| { | ||
| this.state.note.map(item => ( | ||
| <label key={item} htmlFor={`nota_${item}`} className="cockpit-footer__nps-note cockpit-footer__nps-note--active"> | ||
| <input type="radio" name="nota" id={`nota_${item}`} data-type="number" className="cockpit-footer__nps-radio" onChange={e => this.handleNpsChange(e, item)} /> | ||
| <span className={`cockpit-footer__nps-square cockpit-footer__nps-square--${item}`}>{item}</span> | ||
| </label> | ||
| )) | ||
| } | ||
| </div> | ||
| <div className={`cockpit-footer__nps-comment ${npsComments ? 'cockpit-footer__nps-comment--active' : ''}`}> | ||
| <p className="cockpit-footer__nps-descript">Descreva o que motivou a atribuição desta nota (opcional)</p> | ||
| <textarea name="comentario" className="cockpit-footer__nps-textarea" maxLength="512" /> | ||
| <div className="t-ac"> | ||
| <button className="btn btn--red" type="submit">Enviar</button> | ||
| </div> | ||
| </div> | ||
| </Fragment> | ||
| ) | ||
| : ( | ||
| <div className="load load--dark" /> | ||
| ) | ||
| ); | ||
| } | ||
| renderNpsText() { | ||
| return ( | ||
| this.state.loaded | ||
| ? 'Com base na sua experiência com a Webmotors, como você classifica os serviços prestados, em uma escala de 0 a 10?' | ||
| : 'Estamos enviando sua pesquisa' | ||
| ); | ||
| } | ||
| render() { | ||
| const { npsHas, npsOpen, npmVote } = this.state; | ||
| return ( | ||
| <footer className="cockpit-footer"> | ||
| <form onSubmit={e => this.handleSubmit(e)} className={`cockpit-footer__nps ${npsHas ? 'cockpit-footer__nps--has' : ''} ${npsOpen ? 'cockpit-footer__nps--open' : ''}`}> | ||
| <button type="button" className="cockpit-footer__nps-toggle" onClick={() => this.handleNpsOpen()} /> | ||
| <div className={`cockpit-footer__nps-content ${!npsOpen ? 'accordion--hidden' : ''}`} ref={this.npsContent}> | ||
| <p className="cockpit-footer__nps-text"> | ||
| { | ||
| npmVote | ||
| ? 'Agradecemos a sua resposta' | ||
| : this.renderNpsText() | ||
| } | ||
| </p> | ||
| { | ||
| npmVote | ||
| ? ( | ||
| <div className="t-ac"> | ||
| <button className="btn btn--red mb-24" type="button" onClick={() => this.handleNpsClose()}>Continuar</button> | ||
| </div> | ||
| ) | ||
| : this.renderNpsContent() | ||
| } | ||
| </div> | ||
| </form> | ||
| <div className="cockpit-footer__container"> | ||
@@ -141,0 +13,0 @@ <div className="cockpit-footer__copyright">{`© 1995-${new Date().getFullYear()} Webmotors S.A. Todos direitos reservados.`}</div> |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-5.8%
227384
- Lines of code
- decreased by-7.96%
3375
No dependency changes