\n )\n\n}\n\nconst mapStateToProps = createStructuredSelector({\n smIcons: selectSmIcons,\n staticSiteText: selectStaticSiteText\n})\nexport default withRouter(connect(mapStateToProps)(Footer));","// here is where we retrieve the state from the quoteReducer\nimport { createSelector } from 'reselect';\n\n// const INITIAL_STATE = {\n// resultsModalWorkflowStarted: false\n// metalChoicesVisible: false,\n// thicknessChoicesVisible: false,\n// quantityChoicesVisible: false\n// }\n\n// Crudely put, the rootState param is the object inside the combineReducers function in rootReducer.js,\n// but it holds the values returned by each reducer \nconst resultsModalState = rootState => rootState.resultsModalState;\n\n// _____________________quantityChoicesVisible_____________________//\nexport const selectQuantityChoicesVisible = createSelector(\n [resultsModalState],\n resultsModalState => resultsModalState.quantityChoicesVisible\n);\n\n\n// _____________________resultsModalWorkflowStarted_____________________//\nexport const selectResultsModalWorkflowStarted = createSelector(\n [resultsModalState],\n resultsModalState => resultsModalState.resultsModalWorkflowStarted\n);\n\n\n\n// _____________________metalChoicesVisible_____________________//\nexport const selectMetalChoicesVisible = createSelector(\n [resultsModalState],\n resultsModalState => resultsModalState.metalChoicesVisible\n);\n\n\n// _____________________thicknessChoicesVisible_____________________//\nexport const selectThicknessChoicesVisible = createSelector(\n [resultsModalState],\n resultsModalState => resultsModalState.thicknessChoicesVisible\n);\n\n\n\n\n\n\n\n\n","import { RESULTS_MODAL_ACTION_TYPES } from './actionTypes';\n\n\nexport function setResultsModalWorkflowStarted(bool) {\n return {\n type: RESULTS_MODAL_ACTION_TYPES.SET_RESULTS_MODAL_WORKFLOW_STARTED,\n payload: bool\n }\n}\n\n\nexport function setMetalChoicesVisible(bool) {\n return {\n type: RESULTS_MODAL_ACTION_TYPES.SET_METAL_CHOICES_VISIBLE,\n payload: bool\n }\n}\n\n\nexport function setThicknessChoicesVisible(bool) {\n return {\n type: RESULTS_MODAL_ACTION_TYPES.SET_THICKNESS_CHOICES_VISIBLE,\n payload: bool\n }\n}\n\n\nexport function setQuantityChoicesVisible(bool) {\n return {\n type: RESULTS_MODAL_ACTION_TYPES.SET_QUANTITY_CHOICES_VISIBLE,\n payload: bool\n }\n}\n\n\nexport function resetResultsModal() {\n return {\n type: RESULTS_MODAL_ACTION_TYPES.RESET_RESULTS_MODAL,\n }\n}\n","import { CUSTOM_QUOTE_MODAL_ACTIONS } from './actionTypes';\nexport function setCustomQuoteModalStarted(bool) {\n return {\n type: CUSTOM_QUOTE_MODAL_ACTIONS.SET_MODAL_STARTED,\n payload: bool\n }\n}\n\nexport function setFormComplete(bool) {\n return {\n type: CUSTOM_QUOTE_MODAL_ACTIONS.SET_FORM_COMPLETE,\n payload: bool\n }\n}\n\n","\nimport React, { useState, useEffect } from 'react'\nimport dxfIcon from '../../../../assets/dxf_icon_grey.png';\nimport pdfIcon from '../../../../assets/pdf_icon_grey.png';\nimport dwgIcon from '../../../../assets/dwg_icon_grey.png';\nimport cdrIcon from '../../../../assets/cdr_icon.png';\nimport aiIcon from '../../../../assets/ai_icon.png';\nimport epsIcon from '../../../../assets/eps_icon.png';\nimport { store } from 'react-notifications-component';\nimport { INPUT_MSG_CONFIG } from '../../../../service/notifications';\nimport { connect } from 'react-redux';\nimport { setUnitsInput, setFileLength, setFileWidth, handleDimsChange, setInputErr } from '../../../../redux/quote-workflow/quoteWorkflowActions';\nimport { createStructuredSelector } from 'reselect'\nimport { selectUnitsInput, selectFileData, selectApiData, selectMetal, selectThickness, selectIsCustomQuote } from '../../../../redux/quote-workflow/quoteWorkflowSelectors';\nimport { selectMetalChoicesVisible, selectQuantityChoicesVisible, selectThicknessChoicesVisible } from '../../../../redux/results-modal/resultsModalSelectors';\nimport { setMetalChoicesVisible, setQuantityChoicesVisible, setThicknessChoicesVisible } from '../../../../redux/results-modal/resultsModalActions';\nimport { withinBounds, getBoundariesMsg } from '../../../../service/helpers';\nimport styles from './OverviewSection.module.scss';\nimport { Input } from 'semantic-ui-react';\n\n// first component in MainPane's hierarchy\n// displays the heading, preview img, file name and icon, unit verification/input\nfunction OverviewSection({ quantityChoicesVisible, unitsInput, setUnitsInput, fileData, thicknessChoicesVisible, handleDimsChange, setInputErr, isCustomQuote,\n setMetalChoicesVisible, metalChoicesVisible, apiData, setFileLength, setFileWidth, setQuantityChoicesVisible, metal, thickness, setThicknessChoicesVisible }) {\n\n const [length, setLength] = useState(fileData.length ? fileData.length : \"\");\n const [width, setWidth] = useState(fileData.width ? fileData.width : \"\");\n\n \n\n useEffect(() => {\n if (length && width && !thicknessChoicesVisible) {\n setMetalChoicesVisible(true);\n } else if (!length || !width) {\n // only metal choices can be seen; once it is chosen, they are no longer visible\n if (metalChoicesVisible) {\n setMetalChoicesVisible(false);\n }\n\n // thickness choices visible will also show qty choices; qty choices are dependent on thickness choice being visible in MAne Pane\n if (thicknessChoicesVisible) {\n setThicknessChoicesVisible(false);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [length, width]);\n\n\n useEffect(() => {\n if (thickness && unitsInput) {\n if (!withinBounds(fileData, metal.table, thickness, unitsInput)) {\n setInputErr(true);\n if (!apiData.error) {\n if (isCustomQuote) {\n\n } else {\n \n }\n INPUT_MSG_CONFIG.message = getBoundariesMsg(metal, thickness, unitsInput);\n store.addNotification(INPUT_MSG_CONFIG); \n }\n } else {\n setInputErr(false);\n }\n } \n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [thickness, fileData, unitsInput]);\n\n\n // get the right icon for the file's name \n const re = new RegExp('^[1-9][0-9]{0,8}$');\n const fileExt = fileData.name.split('.')[1];\n let iconSrc = \"\";\n if (fileExt === 'dxf') {\n iconSrc = dxfIcon;\n } else if (fileExt === 'dwg') {\n iconSrc = dwgIcon;\n } else if (fileExt === 'ai') {\n iconSrc = aiIcon;\n } else if (fileExt === 'cdr') {\n iconSrc = cdrIcon;\n } else if (fileExt === 'eps') {\n iconSrc = epsIcon;\n } else {\n iconSrc = pdfIcon;\n }\n\n // sets metalChoicesVisible to true when radio button is clicked\n // sets unitsInput in quoteWorkflow redux state\n function handleUnitsCheck(event) {\n setUnitsInput(event.target.value);\n }\n\n function handleDimChange(event) {\n const { name, value } = event.target;\n\n // pricing error occurs if user changes dims if they chose a quantity\n setQuantityChoicesVisible(false);\n handleDimsChange(); // resets some state values\n // if user changes dims, don't show prices and qty choices because of pricing error\n if (name === \"width\") {\n if (value === \"\") {\n setFileWidth(value);\n return setWidth(value);\n }\n\n if (re.test(value)) {\n setWidth(value)\n setFileWidth(value);\n }\n } else if (name === \"length\") {\n if (value === \"\") {\n setFileLength(value);\n return setLength(value);\n }\n if (re.test(value)) {\n setLength(value);\n setFileLength(value);\n }\n }\n } \n\n return (\n
\n
\n
\n
Quote
\n
\n \n
\n
\n \n
{fileData.name}
\n
\n\n
\n
Please choose the units for the design:
\n \n
Units:\n \n Millimeters\n \n Centimeters\n
\n\n
\n
Please enter the width and height of the drawing:
\n
\n \n x\n \n
\n
\n
\n
\n
\n {\n thicknessChoicesVisible ? (\n
{metal.name}
\n ) : (null)\n }\n \n
\n )\n}\n\nconst mapStateToProps = createStructuredSelector(\n {\n unitsInput: selectUnitsInput,\n fileData: selectFileData,\n apiData: selectApiData,\n thicknessChoicesVisible: selectThicknessChoicesVisible,\n metalChoicesVisible: selectMetalChoicesVisible,\n metal: selectMetal,\n thickness: selectThickness,\n quantityChoicesVisible: selectQuantityChoicesVisible,\n isCustomQuote: selectIsCustomQuote\n }\n)\n \nfunction mapDispatchToProps(dispatch) {\n return {\n setUnitsInput: (units) => dispatch(setUnitsInput(units)),\n setMetalChoicesVisible: (bool) => dispatch(setMetalChoicesVisible(bool)),\n setFileLength: (height) => dispatch(setFileLength(height)),\n setFileWidth: (width) => dispatch(setFileWidth(width)),\n setQuantityChoicesVisible: (bool) => dispatch(setQuantityChoicesVisible(bool)),\n handleDimsChange: () => dispatch(handleDimsChange()),\n setInputErr: (bool) => dispatch(setInputErr(bool)),\n setThicknessChoicesVisible: (bool) => dispatch(setThicknessChoicesVisible(bool))\n }\n}\nexport default connect(mapStateToProps, mapDispatchToProps)(OverviewSection);","import React, {forwardRef} from 'react'\nimport styles from './Button.module.scss';\n\n// receives styleSize, onClick, and text props\nconst Button = forwardRef((props, ref) => {\n let classStyle = '';\n if (props.styleSize === 'large') {\n classStyle = styles.large;\n } else if (props.styleSize === 'medium') {\n classStyle=styles.medium;\n } else if (props.styleSize === 'small') {\n classStyle=styles.small;\n } else {\n classStyle = props.className;\n }\n\n\n let inlineStyles = {};\n if (props.color && props.style) {\n inlineStyles = { ...props.style };\n inlineStyles.backgroundColor = `${props.color}`;\n } else if (props.color) {\n inlineStyles.backgroundColor = `${props.color}`;\n } else if (props.style) {\n inlineStyles = { ...props.style };\n }\n if (props.disabled === true) {\n inlineStyles['backgroundColor'] = 'lightgrey';\n inlineStyles['cursor'] = 'default';\n }\n\n return (\n <>\n \n \n )\n});\n\nexport default Button;\n","import React from 'react'\nimport { connect } from 'react-redux';\nimport { setMetalType } from '../../../../redux/quote-workflow/quoteWorkflowActions';\nimport { setMetalChoicesVisible, setThicknessChoicesVisible } from '../../../../redux/results-modal/resultsModalActions'\nimport styles from './MetalSelector.module.scss';\n\n// rectangular selection for each metalName type. children refers to what is inbetween html tags\nfunction MetalNameSelector({ metal, setMetalType, setMetalChoicesVisible, children, setThicknessChoicesVisible}) {\n let hexColor = '';\n if (metal.name.toUpperCase() === 'ALUMINUM') {\n hexColor = '#cccccc';\n } else if (metal.name.toUpperCase() === 'BRASS') {\n hexColor = '#f5ce62';\n } else if (metal.name.toUpperCase() === 'STAINLESS STEEL') {\n hexColor = '#adadad';\n } else if (metal.name.toUpperCase() === 'COPPER') {\n hexColor = '#c56a0d';\n } else if (metal.name.toUpperCase() === 'STEEL') {\n hexColor = '#8a8580';\n }\n\n let vettedThumbnailUrl;\n if (metal.thumbnailUrl) {\n vettedThumbnailUrl = metal.thumbnailUrl;\n }\n\n if (vettedThumbnailUrl && vettedThumbnailUrl.includes(' ')) {\n vettedThumbnailUrl = metal.thumbnailUrl.replace(/ /g, '%20');\n }\n const bgStyle = {\n background: vettedThumbnailUrl ? `url(${vettedThumbnailUrl})` : hexColor,\n backgroundSize: 'cover'\n }\n\n // automatically moves user to next display, sets metalName type\n function handleClick() {\n setMetalType(metal);\n setMetalChoicesVisible(false);\n setThicknessChoicesVisible(true);\n }\n\n return (\n
\n
\n
{children}
\n
\n )\n}\n\n\nfunction mapDispatchToProps(dispatch) {\n return {\n setMetalType: (string) => dispatch(setMetalType(string)),\n setMetalChoicesVisible: (bool) => dispatch(setMetalChoicesVisible(bool)),\n setThicknessChoicesVisible: (bool) => dispatch(setThicknessChoicesVisible(bool))\n\n }\n}\n \nexport default connect(null, mapDispatchToProps)(MetalNameSelector);","import React from 'react'\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect';\nimport { selectMetalsState } from '../../../../../redux/app-state/appSelectors';\nimport MetalSelector from '../MetalSelector';\nimport s from './MetalChoices.module.scss';\nimport uuid from 'react-uuid';\nimport { motion } from 'framer-motion';\nimport { WORKFLOW_TRANSITION } from '../../../../../service/clientConstants';\nfunction MetalChoices({ metalsState }) {\n\n const metals = metalsState.filter(metal => metal.table.length > 0).sort((a, b) => a.name.localeCompare(b.name));\n return (\n \n
\n { \n metals.map( metal => {metal.name})\n }\n
\n \n )\n}\n\nconst mapStateToProps = createStructuredSelector(\n {\n metalsState: selectMetalsState\n }\n)\nexport default connect(mapStateToProps)(MetalChoices);","import React from 'react'\nimport { createStructuredSelector } from 'reselect'\nimport { connect } from 'react-redux';\nimport { selectMetal } from '../../../../redux/quote-workflow/quoteWorkflowSelectors';\nimport { setThickness } from '../../../../redux/quote-workflow/quoteWorkflowActions';\nimport { setMetalChoicesVisible, setThicknessChoicesVisible, setQuantityChoicesVisible } from '../../../../redux/results-modal/resultsModalActions'\nimport styles from './ThicknessSelector.module.scss';\n\n// Rectangular component for selecting metal's thickness. dim is the dimension in mm\n// metal is the currently selected metal from rdx store\n// all props except thickness are from RDX; entry is [thickness, speed]\n\nfunction ThicknessSelector({ thickness, dim, metal, setThickness, setQuantityChoicesVisible, imgUrl }) {\n let hexColor = '';\n if (metal.name.toUpperCase().includes('ALUMINUM')) {\n hexColor = '#cccccc';\n } else if (metal.name.toUpperCase().includes('BRASS')) {\n hexColor = '#f5ce62';\n } else if (metal.name.toUpperCase().includes('STAINLESS STEEL')) {\n hexColor = '#adadad';\n } else if (metal.name.toUpperCase().includes('COPPER')) {\n hexColor = '#c56a0d';\n } else if (metal.name.toUpperCase().includes('STEEL')) {\n hexColor = '#8a8580';\n } else if (metal.name.toUpperCase.includes('ZINC')) {\n hexColor = '#7c7d85';\n } else {\n hexColor = '#969696'\n }\n\n // when rectangle is clicked, display the quantity selector area\n function handleClick() {\n setThickness(dim)\n setQuantityChoicesVisible(true);\n }\n return (\n
\n )\n}\n\nconst mapStateToProps = createStructuredSelector(\n {\n quantity: selectQuantity\n }\n);\n\nfunction mapDispatchToProps(dispatch) {\n return {\n setQuantity: (string) => dispatch(setQuantity(string)),\n }\n}\n \nexport default connect(mapStateToProps, mapDispatchToProps)(RadioChoice);","import React, { useRef, useEffect, useState } from 'react'\nimport { setCustomQuantity } from '../../../../redux/quote-workflow/quoteWorkflowActions';\nimport { connect } from 'react-redux';\nimport { createStructuredSelector } from 'reselect'\nimport { selectCustomQuantity, selectMetal, selectQuantity } from '../../../../redux/quote-workflow/quoteWorkflowSelectors';\nimport RadioChoice from './RadioChoice';\nimport styles from './QuantitySetter.module.scss';\n\nconst useMountEffect = scrollFunc => useEffect(scrollFunc, []);\n\n\n// displays radio buttons with a custom input with the first radio button\nfunction QuantitySetter({ setCustomQuantity, customQuantity, metal, quantity }) {\n\n let choices = [];\n const [localCustomQty, setLocalCustomQty] = useState(\"1\")\n if (metal.quantityChoices) {\n choices = Object.keys(metal.quantityChoices);\n }\n const myRef = useRef(null);\n const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or pass it to useEffect to execute scroll\n useMountEffect(executeScroll);\n\n useEffect(() => {\n if (!isNaN(localCustomQty) && localCustomQty !== '') {\n setCustomQuantity(parseInt(localCustomQty));\n }\n }, [localCustomQty])\n\n useEffect(() => {\n if (quantity) {\n setLocalCustomQty('');\n }\n }, [quantity])\n\n\n // customQuantity default value = null\n // customQuantity must be set to null if quantity is set; quantity represents only radio btn vals\n function handleChange(event) {\n const { name, value } = event.target;\n if (name === \"customInput\") {\n if (!customQuantity) { // handles the first radio button click\n setLocalCustomQty(1);\n }\n } else if (name === \"customQty\") {\n if (parseInt(value) > 0 || isNaN(value)) {\n setLocalCustomQty(parseInt(value));\n } else if (value === '') {\n setLocalCustomQty('');\n setCustomQuantity(null);\n }\n }\n }\n\n\n return (\n
\n
Quantity
\n
\n
\n \n
\n
\n \n {/* {customQuantity ? customQuantity : 1}\n
\n
\n
\n
*/}\n
\n
\n {\n choices.map((choice, idx) => )\n }\n
\n )\n}\n\nconst mapStateToProps = createStructuredSelector(\n {\n customQuantity: selectCustomQuantity,\n metal: selectMetal,\n quantity: selectQuantity\n }\n);\n\nfunction mapDispatchToProps(dispatch) {\n return {\n setCustomQuantity: (q) => dispatch(setCustomQuantity(q))\n }\n}\n \nexport default connect(mapStateToProps, mapDispatchToProps)(QuantitySetter);","import React, { useState, useEffect } from 'react'\nimport s from './NormalPrices.module.scss'\nimport { connect } from 'react-redux'\nimport { createStructuredSelector } from 'reselect'\nimport { getPrices } from '../../../../../redux/quote-workflow/quoteWorkflowActions'\nimport { returnSaveRate } from '../../../../../service/saveRate'\nimport { selectBasePrice, selectCurrPrices, \n selectCustomQuantity, \n selectFinalPrice, \n selectMetal, \n selectThickness, \nselectCurrency } from '../../../../../redux/quote-workflow/quoteWorkflowSelectors'\nimport { LBP } from '../../../../../service/clientConstants'\n\n\n// displays prices with their relative savings discount as a percentage statically; dynamically for customQuantity\nfunction NormalPrices({ currPrices, customQuantity, thickness, basePrice, finalPrice, getPrices, metal, currency }) {\n \n const [loading, setLoading] = useState(true);\n const [displayPrice, setDisplayPrice] = useState(\"\");\n let currencySymbol;\n if (currency === LBP) {\n currencySymbol = \"LBP \";\n } else {\n currencySymbol = \"$\";\n }\n\n // get prices\n useEffect(() => {\n if (Object.keys(currPrices).length === 0 || !finalPrice) {\n getPrices();\n }\n }, [])\n\n useEffect(() => {\n if (Object.keys(currPrices).length > 0 || finalPrice) {\n setLoading(false);\n }\n }, [currPrices])\n\n useEffect(() => {\n if (Object.keys(currPrices).length > 0 || finalPrice) {\n getPrices();\n //setLoading(true);\n \n }\n }, [thickness]);\n\n // set display price for first area\n useEffect(() => {\n if (!customQuantity) {\n setDisplayPrice(basePrice);\n } else if (parseFloat(finalPrice) > parseFloat(basePrice)) {\n setDisplayPrice(finalPrice);\n } else if (parseFloat(finalPrice) === parseFloat(basePrice)) {\n setDisplayPrice(finalPrice);\n }\n }, [basePrice, finalPrice, customQuantity])\n\n\n return (\n loading ? (\n null\n ) : (\n
\n )\n}\n\nconst mapStateToProps = createStructuredSelector(\n {\n metal: selectMetal,\n }\n);\n \nexport default connect(mapStateToProps)(CustomQuotePrices);","/* eslint-disable no-eval, no-unused-vars */\nimport React, { useEffect } from 'react'\nimport { createStructuredSelector } from 'reselect'\nimport { connect } from 'react-redux';\nimport { selectApiData, selectInputErr } from '../../../../redux/quote-workflow/quoteWorkflowSelectors';\nimport NormalPrices from './sub-components/NormalPrices'\nimport CustomQuotePrices from './sub-components/CustomQuotePrices'\n\n// thickness is needed to remount and request new prices; changes will remount\nfunction Prices({ apiData, inputErr }) { \n \n return (\n apiData.perimeter > 0 && !inputErr ? (\n \n ) : (\n \n )\n )\n}\n\n \nconst mapStateToProps = createStructuredSelector(\n {\n apiData: selectApiData,\n inputErr: selectInputErr,\n }\n);\n\nexport default connect(mapStateToProps)(Prices);","import React from 'react'\nimport { motion } from 'framer-motion';\nimport { WORKFLOW_TRANSITION } from '../../../../../service/clientConstants';\nimport QuantitySetter from '../QuantitySetter'\nimport Prices from '../Prices'\nimport s from './QuantityChoices.module.scss';\nfunction QuantityChoices() {\n\n return (\n \n
\n \n \n
\n \n )\n}\nexport default QuantityChoices;","import React from 'react'\nimport { createStructuredSelector } from 'reselect'\nimport { connect } from 'react-redux';\nimport { \n selectCustomQuantity, \n selectQuantity, \n selectUnitsInput, \n selectApiData, \n selectCartItem, \n selectHasDimsInput,\n selectInputErr,\n} from '../../../redux/quote-workflow/quoteWorkflowSelectors';\nimport { handleBackToMetals } from '../../../redux/quote-workflow/quoteWorkflowActions';\nimport { addToCart } from '../../../redux/order-state/orderActions';\nimport { selectMetalChoicesVisible, selectThicknessChoicesVisible, selectQuantityChoicesVisible } from '../../../redux/results-modal/resultsModalSelectors';\nimport {\n setMetalChoicesVisible,\n setThicknessChoicesVisible,\n setQuantityChoicesVisible,\n setResultsModalWorkflowStarted\n} from '../../../redux/results-modal/resultsModalActions';\nimport { setCustomQuoteModalStarted } from '../../../redux/custom-quote-modal/customQuoteActions';\nimport OverviewSection from './_items/OverviewSection';\nimport styles from './MainPane.module.scss';\nimport CustomButton from '../../reusable/Button';\nimport { Checkmark } from 'react-checkmark'\nimport { ADD_TO_CART } from '../../../service/notifications';\nimport { store } from 'react-notifications-component';\nimport { withRouter } from 'react-router-dom'; \nimport MetalChoices from './_items/sub-components/MetalChoices'\nimport ThicknessChoices from './_items/sub-components/ThicknessChoices'\nimport QuantityChoices from './_items/sub-components/QuantityChoices'\n/* MainPane displays components of the workflow according to results-modal redux state\n * Components in the _items folder are display components */\nfunction MainPane(props) {\n const { \n handleBackToMetals, metalChoicesVisible, thicknessChoicesVisible, history,\n setMetalChoicesVisible, setThicknessChoicesVisible, setQuantityChoicesVisible, \n quantityChoicesVisible, customQuantity, quantity, apiData, setCustomQuoteModalStarted,\n addToCart, cartItem, setResultsModalWorkflowStarted, hasDimsInput, inputErr,\n location\n } = props;\n \n // handles back CustomButton at bottom of pane\n // User can only go back to metals selection if thickness choices are visible\n function handleBackToMetalsSelection() {\n handleBackToMetals();\n setThicknessChoicesVisible(false);\n setQuantityChoicesVisible(false);\n setMetalChoicesVisible(true);\n }\n \n // handles close CustomButton\n function handleClose() {\n setResultsModalWorkflowStarted(false);\n }\n\n function handleAddToCart() {\n addToCart(cartItem);\n ADD_TO_CART.content = (\n
history.push(\"/\")} alt=\"logo\" />\n 
\n