From 39abd816fd0fca99c94e09313c8342eb3c3b239a Mon Sep 17 00:00:00 2001 From: yulia-dnistrian Date: Fri, 15 Nov 2019 17:30:00 +0200 Subject: [PATCH] RS-604 display debugMessages on product details page (#486) * display debugMessages on product details page * add getErrorMessages function * Added checking cart.is.not.empty error * Small fixes in quick order * displaying multiple messages * Add the key to map functions --- app/src/containers/CheckoutPage.tsx | 17 ----- app/src/containers/OrderReviewPage.tsx | 17 ----- app/src/utils/Cortex.ts | 50 +++++++++---- app/src/utils/MessageContext.tsx | 24 +++++- components/package-lock.json | 2 +- components/package.json | 2 +- components/src/BulkOrder/bulkorder.main.tsx | 10 --- .../src/MessageContainer/messagecontainer.tsx | 74 ++++++++++++------- .../productdisplayitem.main.tsx | 39 +++++----- .../PurchaseDetails/purchasedetails.main.tsx | 2 +- components/src/QuickOrder/quickorder.main.tsx | 2 +- .../src/QuickOrderForm/quickorderform.tsx | 2 + components/src/Reorder/reorder.main.tsx | 2 +- components/src/utils/Cortex.js | 50 +++++++++---- 14 files changed, 168 insertions(+), 125 deletions(-) diff --git a/app/src/containers/CheckoutPage.tsx b/app/src/containers/CheckoutPage.tsx index 7fe5f47bc..7b90c0cc8 100644 --- a/app/src/containers/CheckoutPage.tsx +++ b/app/src/containers/CheckoutPage.tsx @@ -29,7 +29,6 @@ import { import { login } from '../utils/AuthService'; import { cortexFetch } from '../utils/Cortex'; import Config from '../ep.config.json'; -import { ErrorInlet } from '../utils/MessageContext'; import './CheckoutPage.less'; @@ -173,22 +172,6 @@ class CheckoutPage extends React.Component 0) { - let debugMessages = ''; - for (let i = 0; i < messages.length; i++) { - debugMessages = debugMessages.concat(`${messages[i]['debug-message']} \n `); - } - messageData.debugMessages = debugMessages; - messageData.type = messages[0].type; - messageData.id = messages[0].id; - } - ErrorInlet(messageData); }) .catch((error) => { // eslint-disable-next-line no-console diff --git a/app/src/containers/OrderReviewPage.tsx b/app/src/containers/OrderReviewPage.tsx index 5daa52b07..22be0c333 100644 --- a/app/src/containers/OrderReviewPage.tsx +++ b/app/src/containers/OrderReviewPage.tsx @@ -31,7 +31,6 @@ import { } from '../utils/Analytics'; import { cortexFetch } from '../utils/Cortex'; import Config from '../ep.config.json'; -import { ErrorInlet } from '../utils/MessageContext'; import './OrderReviewPage.less'; @@ -108,22 +107,6 @@ class OrderReviewPage extends React.Component { // eslint-disable-next-line no-console diff --git a/app/src/utils/Cortex.ts b/app/src/utils/Cortex.ts index 099741b85..e358993fc 100644 --- a/app/src/utils/Cortex.ts +++ b/app/src/utils/Cortex.ts @@ -63,22 +63,42 @@ export function cortexFetch(input, init): any { return timeout((Config).cortexApi.reqTimeout || 30000, fetch(`${Config.cortexApi.path}${input}${queryFormat}`, requestInit) .then((res) => { res.clone().json().then((json) => { - if (json.messages) { - const messageData = { - debugMessages: '', - type: '', - id: '', - }; - let debugMessages = ''; - for (let i = 0; i < json.messages.length; i++) { - debugMessages = debugMessages.concat(`${json.messages[i]['debug-message']} \n `); - } - if (debugMessages) { - messageData.debugMessages = debugMessages; - messageData.type = json.messages[0].type; - messageData.id = json.messages[0].id; - ErrorInlet(messageData); + function getErrorMessages(data) { + let messages = []; + if (data.messages && data.messages.length) { + const messageData = { + debugMessages: '', + type: '', + id: '', + }; + let debugMessages = ''; + for (let i = 0; i < data.messages.length; i++) { + debugMessages = debugMessages.concat(`${data.messages[i]['debug-message']} \n `); + } + if (debugMessages) { + messageData.debugMessages = debugMessages; + messageData.type = data.messages[0].type; + messageData.id = data.messages[0].id; + if (messageData.id !== 'cart.is.not.empty') { + messages.push(messageData); + } + } } + const dataKeys = Object.keys(data).filter(key => key[0] === '_'); + dataKeys.forEach((key) => { + if (Array.isArray(data[key])) { + data[key].forEach((el) => { + const res1 = getErrorMessages(el); + messages = messages.concat(res1); + }); + } + }); + return messages; + } + + const errorMessages = getErrorMessages(json); + if (errorMessages.length > 0) { + ErrorInlet(errorMessages[0]); } }).catch((error) => { // eslint-disable-next-line no-console diff --git a/app/src/utils/MessageContext.tsx b/app/src/utils/MessageContext.tsx index fc44d3725..7db922f7e 100644 --- a/app/src/utils/MessageContext.tsx +++ b/app/src/utils/MessageContext.tsx @@ -24,10 +24,22 @@ import React, { const ErrorContext:any = React.createContext(''); let setE:any = () => {}; +let removeE:any = () => {}; function ErrorDisplayBoundary({ children }) { - const [error, setError] = useState(null); - setE = setError; + const [error, setError]:any = useState([]); const ctx:any = useMemo(() => ({ error, setError }), [error]); + // eslint-disable-next-line consistent-return + setE = (e) => { + if (e && error && error.find(el => el.debugMessages === e.debugMessages)) { + return []; + } + return setError([...error, e]); + }; + removeE = (index) => { + const arrayMsg = [...error]; + arrayMsg.splice(index, 1); + return setError(arrayMsg); + }; return ({children}); } @@ -35,6 +47,12 @@ function ErrorInlet(error) { setE(error); return null; } + +function ErrorRemove(index) { + removeE(index); + return null; +} + export { - ErrorContext, ErrorDisplayBoundary, ErrorInlet, + ErrorContext, ErrorDisplayBoundary, ErrorInlet, ErrorRemove, }; diff --git a/components/package-lock.json b/components/package-lock.json index 74f9aef55..405a26605 100644 --- a/components/package-lock.json +++ b/components/package-lock.json @@ -1,6 +1,6 @@ { "name": "@elasticpath/store-components", - "version": "1.1.35", + "version": "1.1.36", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/components/package.json b/components/package.json index 410ef0ca8..4f7e1a92b 100644 --- a/components/package.json +++ b/components/package.json @@ -1,6 +1,6 @@ { "name": "@elasticpath/store-components", - "version": "1.1.35", + "version": "1.1.36", "main": "build/cjs/index", "main:src": "src/index", "types": "src/index", diff --git a/components/src/BulkOrder/bulkorder.main.tsx b/components/src/BulkOrder/bulkorder.main.tsx index b8d163e7c..e771dde38 100644 --- a/components/src/BulkOrder/bulkorder.main.tsx +++ b/components/src/BulkOrder/bulkorder.main.tsx @@ -28,7 +28,6 @@ import { cortexFetch } from '../utils/Cortex'; import { getConfig, IEpConfig } from '../utils/ConfigProvider'; import './bulkorder.main.less'; -import { ErrorInlet } from '../../../app/src/utils/MessageContext'; let Config: IEpConfig | any = {}; let intl = { get: (str, ...args: any[]) => str }; @@ -131,19 +130,10 @@ export class BulkOrder extends React.Component { } if (res.status >= 400) { let debugMessages = ''; - const messageData = { - debugMessages: '', - type: '', - id: '', - }; res.json().then((json) => { for (let i = 0; i < json.messages.length; i++) { debugMessages = debugMessages.concat(`\n${json.messages[i]['debug-message']} \n `); } - messageData.debugMessages = debugMessages; - messageData.type = json.messages[0].type; - messageData.id = json.messages[0].id; - ErrorInlet(messageData); }).then(() => { if (isQuickOrder) { this.setState({ diff --git a/components/src/MessageContainer/messagecontainer.tsx b/components/src/MessageContainer/messagecontainer.tsx index ad6b93a43..c713ea5a1 100644 --- a/components/src/MessageContainer/messagecontainer.tsx +++ b/components/src/MessageContainer/messagecontainer.tsx @@ -24,7 +24,7 @@ import { ReactComponent as CloseIcon } from '../../../app/src/images/icons/close import { ReactComponent as ErrorIcon } from '../../../app/src/images/icons/error-icon.svg'; import { ReactComponent as WarningIcon } from '../../../app/src/images/icons/warning-icon.svg'; import { ReactComponent as InfoIcon } from '../../../app/src/images/icons/info-icon.svg'; -import { ErrorInlet } from '../../../app/src/utils/MessageContext'; +import { ErrorRemove } from '../../../app/src/utils/MessageContext'; import './messagecontainer.less'; @@ -32,36 +32,60 @@ interface MessageContainerProps { message: any } -class MessageContainer extends React.Component { - static handleCloseErrorMsg() { - ErrorInlet({}); +interface MessageContainerState { + messages: any, +} + +class MessageContainer extends React.Component { + constructor(props) { + super(props); + this.state = { + messages: [], + }; + this.handleCloseMessageContainer = this.handleCloseMessageContainer.bind(this); + } + + componentWillReceiveProps(nextProps) { + this.setState({ messages: nextProps.message }); + } + + handleCloseMessageContainer(index) { + const { messages } = this.state; + const arrayMsg = [...messages]; + arrayMsg.splice(index, 1); + this.setState({ messages: arrayMsg }); + ErrorRemove(index); } render() { - const { message } = this.props; - if (message && message.debugMessages) { - let messageType = ''; - if (message.type === 'error' && message.id.includes('field')) { - messageType = 'warning-message'; - } else if (message.type === 'error') { - messageType = 'danger-message'; - } else if (message.type === 'needinfo') { - messageType = 'info-message'; - } + const { messages } = this.state; + if (messages.length > 0) { return (
-
- - - -

- {message.debugMessages} -

- -
+ {messages.map((el, index) => { + let messageType = ''; + if (el.type === 'error' && el.id.includes('field')) { + messageType = 'warning-message'; + } else if (el.type === 'error') { + messageType = 'danger-message'; + } else if (el.type === 'needinfo') { + messageType = 'info-message'; + } + return ( +
+ + + +

+ {el.debugMessages} +

+ +
+ ); + })}
); diff --git a/components/src/ProductDisplayItem/productdisplayitem.main.tsx b/components/src/ProductDisplayItem/productdisplayitem.main.tsx index a97aafe6f..207f100c8 100644 --- a/components/src/ProductDisplayItem/productdisplayitem.main.tsx +++ b/components/src/ProductDisplayItem/productdisplayitem.main.tsx @@ -182,27 +182,30 @@ class ProductDisplayItemMain extends React.Component { - itemLookup(nextProps.productId) - .then((res) => { - if (Config.arKit.enable) { - this.urlExists(Config.arKit.skuArImagesUrl.replace('%sku%', res._code[0].code), (exists) => { + const { productId } = this.props; + if (nextProps.productId !== productId) { + login().then(() => { + itemLookup(nextProps.productId) + .then((res) => { + if (Config.arKit.enable) { + this.urlExists(Config.arKit.skuArImagesUrl.replace('%sku%', res._code[0].code), (exists) => { + this.setState({ + productData: res, + arFileExists: exists, + }); + }); + } else { this.setState({ productData: res, - arFileExists: exists, }); - }); - } else { - this.setState({ - productData: res, - }); - } - }) - .catch((error) => { - // eslint-disable-next-line no-console - console.error(error.message); - }); - }); + } + }) + .catch((error) => { + // eslint-disable-next-line no-console + console.error(error.message); + }); + }); + } } fetchMultiCartData() { diff --git a/components/src/PurchaseDetails/purchasedetails.main.tsx b/components/src/PurchaseDetails/purchasedetails.main.tsx index 684c837df..f3bbc5c8d 100644 --- a/components/src/PurchaseDetails/purchasedetails.main.tsx +++ b/components/src/PurchaseDetails/purchasedetails.main.tsx @@ -116,7 +116,7 @@ const PurchaseDetailsMain: React.FunctionComponent = ( {intl.get('payment-method')} {postedPayments[0]._element.map(postedpayment => ( - + ))} ); diff --git a/components/src/QuickOrder/quickorder.main.tsx b/components/src/QuickOrder/quickorder.main.tsx index 0d4420a9e..4eaf742a2 100644 --- a/components/src/QuickOrder/quickorder.main.tsx +++ b/components/src/QuickOrder/quickorder.main.tsx @@ -171,7 +171,7 @@ class QuickOrderMain extends React.Component { this.handleQuantityChange(); }} hideRemoveButton diff --git a/components/src/QuickOrderForm/quickorderform.tsx b/components/src/QuickOrderForm/quickorderform.tsx index d670e642c..dd860cb78 100644 --- a/components/src/QuickOrderForm/quickorderform.tsx +++ b/components/src/QuickOrderForm/quickorderform.tsx @@ -127,6 +127,8 @@ class QuickOrderForm extends React.Component { {productsData._lineitems[0]._element.map((item) => { const { quantity, _code } = item._item[0]; return ( -
+
{ res.clone().json().then((json) => { - if (json.messages) { - const messageData = { - debugMessages: '', - type: '', - id: '', - }; - let debugMessages = ''; - for (let i = 0; i < json.messages.length; i++) { - debugMessages = debugMessages.concat(`${json.messages[i]['debug-message']} \n `); - } - if (debugMessages) { - messageData.debugMessages = debugMessages; - messageData.type = json.messages[0].type; - messageData.id = json.messages[0].id; - ErrorInlet(messageData); + function getErrorMessages(data) { + let messages = []; + if (data.messages && data.messages.length) { + const messageData = { + debugMessages: '', + type: '', + id: '', + }; + let debugMessages = ''; + for (let i = 0; i < data.messages.length; i++) { + debugMessages = debugMessages.concat(`${data.messages[i]['debug-message']} \n `); + } + if (debugMessages) { + messageData.debugMessages = debugMessages; + messageData.type = data.messages[0].type; + messageData.id = data.messages[0].id; + if (messageData.id !== 'cart.is.not.empty') { + messages.push(messageData); + } + } } + const dataKeys = Object.keys(data).filter(key => key[0] === '_'); + dataKeys.forEach((key) => { + if (Array.isArray(data[key])) { + data[key].forEach((el) => { + const res1 = getErrorMessages(el); + messages = messages.concat(res1); + }); + } + }); + return messages; + } + + const errorMessages = getErrorMessages(json); + if (errorMessages.length > 0) { + ErrorInlet(errorMessages[0]); } }).catch((error) => { // eslint-disable-next-line no-console