\r\n {label && \r\n \r\n {children}\r\n \r\n
\r\n \r\n)\r\n\r\nCheckoutSection.propTypes = {\r\n label: PropTypes.string,\r\n classname: PropTypes.string,\r\n hidden: PropTypes.bool,\r\n hideBodyBorder: PropTypes.bool\r\n}\r\n\r\nexport default CheckoutSection","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nclass RadioInput extends React.Component {\r\n\r\n componentDidMount() {\r\n require('./RadioInput.css');\r\n }\r\n\r\n render() {\r\n\r\n return (\r\n \r\n
);\r\n\r\n\r\nOptionListItemRadio.propTypes = {\r\n isSelected: PropTypes.bool.isRequired,\r\n onClick: PropTypes.func.isRequired,\r\n label: PropTypes.string.isRequired\r\n}\r\n\r\nexport default OptionListItemRadio","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nlet id = 0;\r\n\r\nclass TextFormEntry extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n const inputIsRequired = (typeof props.isRequired === 'function') ? props.isRequired(props.name) : props.isRequired;\r\n this.state = {\r\n isOpen: !!props.value || inputIsRequired, \r\n id: id++\r\n };\r\n }\r\n\r\n render() {\r\n const p = this.props;\r\n\r\n // what type of input are we and how are we identified?\r\n const isNumberInput = p.type === 'number';\r\n const inputId = `${this.constructor.name}-${id}-${p.name}`;\r\n\r\n const inputIsRequired = (typeof p.isRequired === 'function')\r\n ? p.isRequired(p.name)\r\n : p.isRequired;\r\n const inputIsInvalid = (typeof p.isInvalid === 'function')\r\n ? p.isInvalid(p.name, p.value)\r\n : p.isInvalid;\r\n\r\n // Compute some reasonable defaults\r\n const autocomplete = p.autocomplete || p.name;\r\n const placeholder = p.placeholder || p.label;\r\n const value = p.value || (isNumberInput ? 0 : \"\");\r\n \r\n if (this.state.isOpen) {\r\n let input;\r\n if (isNumberInput) {\r\n input = inputIsRequired\r\n ? ( { e.preventDefault(); onClick(id); }}>\r\n onClick(id)} />\r\n \r\n {value &&
\r\n {!!!hidden && children}\r\n {value}
}\r\n \r\n {input}\r\n
\r\n );\r\n } else {\r\n return (\r\n \r\n \r\n
\r\n )\r\n }\r\n }\r\n}\r\n\r\nTextFormEntry.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n label: PropTypes.string.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n type: PropTypes.oneOf(['url', 'tel', 'email', 'search', 'number', 'range', 'datetime-local', 'date', 'time', 'week', 'month', 'color', 'text']),\r\n autocomplete: PropTypes.string,\r\n pattern: PropTypes.string,\r\n placeholder: PropTypes.string\r\n}\r\n\r\nTextFormEntry.defaultProps = {\r\n type: 'text',\r\n isInvalid: false,\r\n isRequired: false,\r\n pattern: '.*'\r\n}\r\n\r\nexport default TextFormEntry;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst StateInput = ({ states, value, onChange, isRequired }) => {\r\n const name = \"state\";\r\n\r\n // Check in case the current value that was passed is actually a state Name rather than a Code (i.e. \"Virginia\" instead of \"VA\").\r\n // If so, use the corresponding code instead.\r\n if (value && typeof value === 'string' && !states.find(s => s && s.Code && s.Code.toLowerCase() === value.toLowerCase())) {\r\n const matchedByName = states.find(s => s && s.Name && s.Name.toLowerCase() === value.toLowerCase());\r\n if (matchedByName) {\r\n value = matchedByName.Code;\r\n }\r\n }\r\n\r\n if (states && states.length > 0) {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nNumberInputSelect.propTypes = {\r\n componentClassName: PropTypes.string,\r\n maxDropdownQuantity: PropTypes.number.isRequired,\r\n onChange: PropTypes.func.isRequired,\r\n quantity: PropTypes.number.isRequired\r\n}\r\n\r\nexport default NumberInputSelect","\r\nexport const formatMoney = currencyCode => amount =>\r\n !Number.isNaN(amount) && amount !== null && amount.toLocaleString('en-US', { style: 'currency', currency: currencyCode })\r\n\r\n","\r\n/* SHIPPING_METHOD */\r\nexport const SELECT_SHIPPING_OPTION = 'SELECT_SHIPPING_METHOD_ACTION'\r\nexport const SELECT_SHIPPING_OPTION_ASYNC = 'SELECT_SHIPPING_OPTION_ASYNC_ACTION'\r\nexport const NOTIFY_REFRESHING_SHIPPING_OPTIONS = 'NOTIFY_REFRESHING_SHIPPING_METHODS_ACTION'\r\nexport const NEW_SHIPPING_OPTIONS = 'NEW_SHIPPING_METHODS_ACTION'\r\n/* PAYMENT_METHOD */\r\nexport const SELECT_PAYMENT_OPTION = 'SELECT_PAYMENT_OPTION_ACTION'\r\nexport const BRAINTREEE_PAYMENT_DATA_UPDATE = 'BRAINTREEE_PAYMENT_DATA_UPDATE_ACTION'\r\nexport const PURCHASE_ORDER_PAYMENT_DATA_UPDATE = 'PURCHASE_ORDER_PAYMENT_DATA_UPDATE_ACTION'\r\nexport const UPDATING_EBIZ_CHARGE_WEB_FORM_URL_ASYNC = 'UPDATING_EBIZ_CHARGE_WEB_FORM_URL_ASYNC_ACTION'\r\nexport const UPDATE_EBIZ_CHARGE_WEB_FORM_URL = 'UPDATE_EBIZ_CHARGE_WEB_FORM_URL'\r\nexport const EBIZ_CHARGE_WEB_FORM_URL_ERROR = 'EBIZ_CHARGE_WEB_FORM_URL_ERROR'\r\n/* COMPLETE CHECKOUT */\r\nexport const COMPLETE_CHECKOUT = 'COMPLETE_CHECKOUT_ACTION'\r\nexport const BACK = 'BACK_ACTION'\r\nexport const PLACE_ORDER_ASYNC = 'PLACE_ORDER_ASYNC_ACTION'\r\n/* ERROR */\r\nexport const NOTIFY_ERROR = 'NOTIFY_ERROR_ACTION'\r\nexport const NOTIFY_COMPLETE_CHECKOUT_ERROR = 'NOTIFY_COMPLETE_CHECKOUT_ERROR_ACTION'\r\nexport const LOG_ERROR = 'LOG_ERROR_ACTION'\r\n/* WARNING */\r\nexport const NOTIFY_WARNING = 'NOTIFY_WARNING_ACTION'\r\n/* UI */\r\nexport const USE_BILLING_FOR_SHIPPING_TOGGLE = 'USE_BILLING_FOR_SHIPPING_TOGGLE_ACTION'\r\nexport const DISMISS_MESSAGE = 'DISMISS_MESSAGE_ACTION'\r\nexport const DISMISS_ALL_MESSAGES = 'DISMISS_ALL_MESSAGES_ACTION'\r\n/* CART */\r\nexport const UPDATE_ITEM_QUANTITY = 'UPDATE_ITEM_QUANTITY'\r\nexport const DELETE_ITEM = 'DELETE_ITEM'\r\nexport const UPDATING_ITEM_QUANTITY_ASYNC = 'UPDATING_ITEM_QUANTITY_ASYNC'\r\nexport const DELETING_ITEM_ASYNC = 'DELETING_ITEM_ASYNC'\r\nexport const GET_REQUIRED_PARTNER_IDS_ASYNC = 'GET_REQUIRED_PARTNER_IDS_ASYNC'\r\nexport const GETTING_REQUIRED_PARTNER_IDS_ASYNC = 'GETTING_REQUIRED_PARTNER_IDS_ASYNC'\r\n\r\n/* ADDRESS */\r\nexport const ADD_SHIPPING_ADDRESS = 'ADD_SHIPPING_ADDRESS_ACTION'\r\nexport const ADD_BILLING_ADDRESS = 'ADD_BILLING_ADDRESS_ACTION'\r\nexport const REMOVE_SHIPPING_ADDRESS = 'REMOVE_SHIPPING_ADDRESS_ACTION'\r\nexport const REMOVE_BILLING_ADDRESS = 'REMOVE_BILLING_ADDRESS_ACTION'\r\nexport const UPDATE_ADDRESS = 'UPDATE_ADDRESS_ACTION'\r\nexport const SELECT_BILLING_ADDRESS = 'SELECT_BILLING_ADDRESS_ACTION'\r\nexport const SELECT_SHIPPING_ADDRESS = 'SELECT_SHIPPING_ADDRESS_ACTION'\r\nexport const SELECT_SHIPPING_ADDRESS_ASYNC = 'SELECT_SHIPPING_ADDRESS_ASYNC_ACTION'\r\nexport const SAVE_ADDRESS_ASYNC = 'SAVE_ADDRESS_ASYNC_ACTION'\r\nexport const DELETE_ADDRESS_ASYNC = 'DELETE_ADDRESS_ASYNC_ACTION'\r\nexport const SELECT_SHIPPING_AND_BILLING_ADDRESS = 'SELECT_BILLING_AND_SHIPPING_ADDRESS_ACTION'\r\n\r\n/* SUMMARY */\r\nexport const CHECKOUT_SUMMARY_RECEIVED = 'CHECKOUT_SUMMARY_RECEIVED_ACTION'\r\nexport const NOTIFY_REFRESHING_CHECKOUT_SUMMARY = 'NOTIFY_REFRESHING_CHECKOUT_SUMMARY_ACTION'\r\nexport const NEW_CHECKOUT_SUMMARY = 'NEW_CHECKOUT_SUMMARY_ACTION'\r\n\r\n/* COUPONS */\r\nexport const ADD_COUPON = 'ADD_COUPON_ACTION'\r\nexport const ADD_COUPON_ASYNC = 'ADD_COUPON_ASYNC_ACTION'\r\nexport const REMOVE_COUPON = 'REMOVE_COUPON'\r\nexport const REMOVE_COUPON_ASYNC = 'REMOVE_COUPON_ACTION'\r\nexport const UPDATING_COUPONS = 'UPDATING_COUPONS'\r\nexport const UPDATING_COUPONS_ASYNC = 'UPDATING_COUPONS_ASYNC'\r\n\r\n/* NAVIGATION */\r\nexport const TO_PAYMENT = 'TO_PAYMENT_ACTION'\r\nexport const TO_SHIPPING = 'TO_SHIPPING_ACTION'\r\n\r\n/* TERMS AND CONDITIONS */\r\nexport const CHECK_TERMS_CONDITIONS = 'CHECK_TERMS_CONDITIONS_ACTION'\r\nexport const UNCHECK_TERMS_CONDITIONS = 'UNCHECK_TERMS_CONDITIONS_ACTION'\r\n","import { \r\n NOTIFY_ERROR, \r\n NOTIFY_COMPLETE_CHECKOUT_ERROR, \r\n LOG_ERROR, DISMISS_MESSAGE, \r\n DISMISS_ALL_MESSAGES,\r\n NOTIFY_WARNING \r\n} from '../../GlobalStateContainer'\r\n\r\n/* ERROR */\r\nlet messageId = 0;\r\n\r\nexport function notifyError(message, diagnosticMessage) {\r\n diagnosticMessage && console.error(diagnosticMessage) && console.trace && console.trace();\r\n return { type: NOTIFY_ERROR, message, messageId: messageId++ }\r\n}\r\n\r\nexport function notifyWarning(message, diagnosticMessage) {\r\n diagnosticMessage && console.log(diagnosticMessage)\r\n return { type: NOTIFY_WARNING, message, messageId: messageId++ }\r\n}\r\n\r\nexport function notifyCompleteCheckoutError(message, diagnosticMessage) {\r\n diagnosticMessage && console.error(diagnosticMessage) && console.trace && console.trace();\r\n return { type: NOTIFY_COMPLETE_CHECKOUT_ERROR, message, messageId: messageId++ }\r\n}\r\n\r\nexport function logError(diagnosticMessage) {\r\n diagnosticMessage && console.error(diagnosticMessage) && console.trace && console.trace();\r\n return { type: LOG_ERROR, diagnosticMessage }\r\n}\r\n\r\nexport function dismissMessage(messageId) {\r\n return { type: DISMISS_MESSAGE, messageId }\r\n}\r\n\r\nexport function dismissAllMessages() {\r\n return { type: DISMISS_ALL_MESSAGES }\r\n}","import React from 'react'\r\nimport { Transition } from 'react-transition-group'\r\n\r\nconst duration = 200;\r\n\r\nconst defaultStyle = {\r\n transition: `opacity ${duration}ms ease-in-out`,\r\n opacity: 0\r\n}\r\n\r\nconst transitionStyles = {\r\n entering: { opacity: 0 },\r\n entered: { opacity: 1 }\r\n};\r\n\r\n// BBS DDD 2017-11-28 VS reports an error between the \"Transition\" \r\n// element name and the \"in\" attribute in the openting tag b/ c \"in\"\r\n// is an ES6 reserved word, but it appears to \"just work\" despite the error\r\nexport const Fade = ({ inProp, children, disableAnimation }) => (\r\n (disableAnimation)\r\n ? ({children}
)\r\n : (\r\n {children}\r\n
\r\n )}\r\n {line}
))}\r\n \r\n\r\n {children}\r\n
\r\n )\r\n }\r\n}\r\n\r\nMessagesList.propTypes = {\r\n messages: PropTypes.arrayOf(PropTypes.shape({\r\n Id: PropTypes.number.isRequired,\r\n text: PropTypes.string.isRequired,\r\n type: PropTypes.string.isRequired\r\n }))\r\n}\r\n\r\nexport default MessagesList\r\n","export const UNKNOWN_USER_ALERT = \"UNKNOWN_USER_ALERT_TYPE\"\r\nexport const ERROR_USER_ALERT = \"ERROR_USER_ALERT_TYPE\"\r\nexport const WARNING_USER_ALERT = \"INFO_USER_ALERT_TYPE\"","// eslint-disable-next-line\r\nimport React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport { dismissMessage, dismissAllMessages } from './messagesListActionCreators'\r\n\r\nimport MessagesList from './MessagesList'\r\n\r\nconst mapStateToProps = state => ({\r\n messages: state.ui.messages\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n onDismiss: (id) => dispatch(dismissMessage(id)),\r\n onDismissAll: () => dispatch(dismissAllMessages())\r\n})\r\n\r\nconst MessagesListContainer = connect(mapStateToProps, mapDispatchToProps)(MessagesList)\r\n\r\nexport default MessagesListContainer","import merge from 'lodash/merge'\r\nimport { notifyError } from \"../Features/UserMessaging\";\r\nimport { makeCatalystFetchPostInit } from \"../../util/fetchUtility\";\r\n\r\nconst validateArguments = (\r\n {\r\n notify,\r\n extract,\r\n onSuccess,\r\n onError,\r\n init\r\n }, endpoint) => {\r\n // Check that we have what we expect\r\n if (typeof endpoint !== 'string') {\r\n throw new Error( \"argument 'endpoint' must be of type string or a function that results in a string when passed the state: \" + endpoint);\r\n }\r\n if (typeof onSuccess !== 'function') {\r\n throw new Error( \"argument 'onSuccess' must be of type function if it is defined\");\r\n }\r\n if (typeof onError !== 'function') {\r\n throw new Error( \"argument 'onError' must be of type function if it is defined\");\r\n }\r\n if (typeof notify !== 'function') {\r\n throw new Error( \"argument 'notify' must be of type function if it is defined\");\r\n }\r\n if (typeof extract !== 'function') {\r\n throw new Error( \"argument 'extract' must be defined and be of type function\");\r\n }\r\n if (init && typeof init !== 'object') {\r\n throw new Error(\"expected init to be an object\");\r\n }\r\n}\r\n\r\n\r\n/*---------------------------------------------------------\r\n *\r\n * function: fetchJson(spec)\r\n *\r\n *---------------------------------------------------------\r\n *\r\n * For example, in action.js:\r\n *\r\n * var myAsyncDataFetchSpec = {\r\n * // Get the endpoint path from state (or simply specify a string for endpoint)\r\n * endpoint: (state) => state.myEndpointPath,\r\n *\r\n *\t\t // The fetch should post and include cookies, and\r\n * // include our headers (not necessarily custom)\r\n * init: { method: 'POST', credentials: 'same-origin', headers: { \"X-Custom-Header\": \"ServerHelpMe\"} }\r\n\r\n * // Tell everyone we started my action\r\n * notify: data => ( { type: FETCH_MY_DATA, data } ),\r\n *\r\n * // Get the data from the response\r\n * extract: r => r.json(),\r\n *\r\n *\t\t // When we get the data, send it to those concerned\r\n * onSuccess: (json, data) => ({ type: MY_JSON_DATA_RECEIVED, json, data.Id }),\r\n *\r\n *\t\t // If we fail, tell someone\r\n * onError: (msg, data) => {\r\n * \t\t\t\t console.log(msg);\r\n *\t \t\t console.log(data);\r\n *\t\t \t `We were trying my action for data with id '${data.Id}', but '${msg}' happened`;\r\n *\t\t\t\t },\r\n * };\r\n * export const fetchMyData = fetchJson(myAsyncDataFetchSpec);\r\n *\r\n *\r\n * A factory for creating async action creators for the redux-thunk\r\n * library.\r\n * https://redux.js.org/docs/advanced/AsyncActions.html\r\n * https://github.com/gaearon/redux-thunk\r\n * With redux-thunk, when store.dispatch() is called with a function\r\n * parameter (instead of calling store.dispatch() with an\r\n * action parameter, as usual), the function is called with\r\n * the parameters store.dispatch() and store.getState(). So, we can\r\n * dispatch additional actions and inspect the current state.\r\n *\r\n * We also use the fetch api\r\n * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch\r\n *\r\n * To create an async action creator, pass a object specifying:\r\n * * the actions to take when\r\n * 1) the async flow begins,\r\n * 2) the async flow succeeds\r\n * 3) the async flow fails.\r\n * * How to extract the data from the response body\r\n * (see using_fetch above from MDN)\r\n * * How to initalize the fetch request, beyond the content type of json\r\n * (see using_fetch above)\r\n *\r\n * A spec object is:\r\n * {\r\n * init, // an object to deep merge with the init\r\n * \t\t\t\t\t\t // object for a fetch call headers:\r\n * \t\t\t\t\t\t // { \"Content-Type\", \"application/json \"}, body }\r\n * \t\t\t\t\t\t // where body is the data transformed with\r\n * \t\t\t\t\t\t // JSON.stringify(data) if data is truthy.\r\n * \t\t\t\t\t\t // If data is falsy, then body is omitted\r\n * \t\t\t\t\t\t // from the init object passed to fetch\r\n *\r\n * endpoint, // either 1) a string specifying the location\r\n * \t\t\t\t\t\t // of the fetch call to make or 2) a funciton\r\n * \t\t\t\t\t\t // that returns a string specifying the location\r\n * \t\t\t\t\t\t // of the fetch call to make when passed the\r\n * \t\t\t\t\t\t // result of store.getState().\r\n *\r\n * notify, // The action creator to call when starting\r\n * \t\t\t\t\t // an async action. We pass the data to be\r\n * \t\t\t\t\t\t // sent in the request as a parameter.\r\n * \t\t\t\t\t\t // Generally a notification action that the\r\n * \t\t\t\t\t\t // sync request has started.\r\n *\r\n * extract, // The function to call on the response which\r\n * \t\t\t\t\t\t // extracts the data. Usually something like\r\n * // r => r.json()\r\n * // or one of: arrayBuffer, blob, json, text,\r\n * // or formData. See\r\n * // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Body\r\n *\r\n * onSuccess, // The \"action creator\" to call when the\r\n *\t\t\t\t\t\t // response is successfully parsed. Both the\r\n *\t\t\t\t\t\t // successfully parsed response and the\r\n *\t\t\t\t\t\t // original data that was sent in the request\r\n *\t\t\t\t\t // are passed as parameters. Here, you might\r\n * // validate your data and generate an error\r\n * // action if validation fails, or an update-ish\r\n * // action if validation succeeds\r\n *\r\n * onError, // The \"action creator\" to call when the\r\n *\t\t\t\t\t // response cannot be retrieved. Passed\r\n * // a diagnostic (not appropriate to show\r\n *\t\t\t\t\t // to end users, but shouldn't contain\r\n * // sensitive information).\r\n * }\r\n *\r\n * The result of passing spec to fetchJson is a function that\r\n * dispatches an action when passed the request data. The action will\r\n * trigger the dispatch of other actions before and after it executes\r\n * an asynchronous call to the endpoint.\r\n *\r\n *\r\n * Doing a GET\r\n * -----------\r\n *\r\n * Omitting the data and doing a simple http GET to an endpoint:\r\n * If data is omitted from the call to the async function, then no\r\n * body is passed. The default fetch http action is \"GET\". (note that\r\n * the default fetch behavior is to NOT send cookies, so you won't be\r\n * authorized).\r\n *\r\n * Getting data should be as easy as:\r\n *\r\n * var page = getPageNumber()\r\n * var getMyData = {\r\n * init: {},\r\n * endpoint: \"https://example.com/api/serviceName\" + (page ? \"?p=\" + page : \"\"),\r\n * notify: { type: FETCH_MY_DATA, page },\r\n * extract: r => r.json(),\r\n * onSuccess: json => {type: UPDATE_MY_DATA_TYPE, json, page},\r\n * onError: msg => notifyError(\"sorry, but something didn't go right on page \" + page, msg)\r\n * }\r\n *\r\n * Then, in the reducer listening to the action UPDATE_MY_DATA update the\r\n * redux state based on the json received. See redux examples in more\r\n * authoritative locations for smart ways to update your state after\r\n * a call to an api.\r\n *\r\n * There are probably better ways of doing this\r\n * https://stackoverflow.com/questions/34930735/pros-cons-of-using-redux-saga-with-es6-generators-vs-redux-thunk-with-es2017-asy?rq=1\r\n * https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in-redux?rq=1\r\n *\r\n */\r\nexport const fetchJson = spec => data => (dispatch, getState) => {\r\n const {\r\n notify = ()=>{},\r\n extract,\r\n onError = (diagnosticMessage, data, dispatch) => notifyError(\"An error occurred\", diagnosticMessage, dispatch),\r\n onSuccess = ()=>{},\r\n init\r\n } = spec;\r\n let {\r\n endpoint,\r\n } = spec;\r\n\r\n if (typeof endpoint === 'function') {\r\n // Get the endpoint if we want to compute it\r\n endpoint = endpoint(getState());\r\n }\r\n\r\n validateArguments(spec, endpoint);\r\n\r\n // Notify async action starting\r\n dispatch(notify(data));\r\n\r\n\r\n // Configure the fetch\r\n let fetchInit = (typeof data !== 'undefined')\r\n ? merge(makeCatalystFetchPostInit(data), init)\r\n : Object.assign({}, init);\r\n\r\n // Make the call\r\n return fetch(endpoint, fetchInit)\r\n .then( // Get the response if we have one\r\n response => {\r\n if (!response.ok) {\r\n dispatch(onError(`Got server error when calling '${endpoint}': (${response.status}): ${response.statusText}`, data, dispatch));\r\n return null;\r\n } else {\r\n return extract(response);\r\n }\r\n },\r\n // handle errors that don't have a status code\r\n error => dispatch(onError(`Got network error when calling '${endpoint}': ${error}`, data, dispatch))\r\n )\r\n .then( // Do something with whatever was extracted from the response\r\n responseExtracted => {\r\n console.log(responseExtracted);\r\n try {\r\n dispatch(onSuccess(responseExtracted, data, getState));\r\n } catch (e) {\r\n // const message = `Error executing success callback for extracted response: ${responseExtracted} for data sent: ${data}\\n ${e}`;\r\n dispatch(onError(`Error executing success callback for extracted response: ${responseExtracted} for data sent: ${data}\\n ${e}`, null, dispatch));\r\n }\r\n },\r\n // notify of other errors\r\n error => dispatch(onError(`Error getting response: ${error}`, data, dispatch))\r\n );\r\n}\r\n","import findIndex from 'lodash/findIndex'\r\nimport includes from 'lodash/includes'\r\n\r\n// BBS DDD 2017-11-20 Assumes all list elements that \r\n// are composite will have an \"Id\" element\r\n\r\n// If we change something, then return a new list, not the list we \r\n// got as an argument. If we change nothing, then return the list\r\n// we got as an argument.\r\n\r\n// Adds to list at front\r\nexport const addToList = (list, newElement) => {\r\n if (newElement.hasOwnProperty(\"Id\"))\r\n return [newElement].concat(list.filter(elt => elt.Id !== newElement.Id));\r\n return [newElement].concat(list.filter(elt => elt !== newElement));\r\n}\r\n\r\n// Returns new list if element exists, or same list\r\nexport const removeFromList = (list, elementToRemove) => {\r\n return list.filter(elt => elt !== elementToRemove);\r\n}\r\n\r\nexport const removeFromListById = (list, id) => {\r\n return list.filter(elt => elt.Id !== id);\r\n}\r\n\r\n// Returns new list if element exists, or same list\r\nexport const replaceInList = (list, valueToReplace, newValue) => {\r\n if (!includes(list, valueToReplace))\r\n return list;\r\n return list.map(elt => elt === valueToReplace ? newValue : elt);\r\n}\r\n\r\n// Returns new list if element exists, or same list\r\nexport const replaceInListById = (list, elementToUpdateId, newElement) => {\r\n if (findIndex(list, elt => elt.Id === elementToUpdateId) < 0)\r\n return list;\r\n return list.map(elt => elt.Id === elementToUpdateId ? newElement : elt);\r\n }","import {\r\n UPDATE_ITEM_QUANTITY,\r\n DELETE_ITEM,\r\n GET_REQUIRED_PARTNER_IDS_ASYNC\r\n} from '../../GlobalStateContainer'\r\n\r\n\r\nimport { removeFromListById } from '../../../util/listUtility'\r\n\r\nexport const CartItems = (state = [], action) => {\r\n switch (action.type) {\r\n case UPDATE_ITEM_QUANTITY:\r\n return state.map(item =>\r\n (item.Id === action.itemId)\r\n ? Object.assign({}, item, { Quantity: action.newQuantity })\r\n : item);\r\n case DELETE_ITEM:\r\n return removeFromListById(state, action.itemId);\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport const RequiredPartnerIds = (state = '', action) => {\r\n switch (action.type) {\r\n case GET_REQUIRED_PARTNER_IDS_ASYNC:\r\n return action.requiredPartnerIds;\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { NEW_CHECKOUT_SUMMARY, NOTIFY_REFRESHING_CHECKOUT_SUMMARY } from \"../../GlobalStateContainer\";\r\n\r\nconst emptySummary = { Total: 0, SubTotal: 0, Discount:0, ShippingTotal: null, Currency: 'USD', TotalRemaining: 0, DiscountTotal: 0}\r\n\r\nexport const Summary = function (state = emptySummary, action) {\r\n switch (action.type) {\r\n case NEW_CHECKOUT_SUMMARY:\r\n return action.summary;\r\n default: \r\n return state;\r\n }\r\n}\r\n\r\nexport const isRefreshingSummary = function (state = true, action) {\r\n switch (action.type) {\r\n case NOTIFY_REFRESHING_CHECKOUT_SUMMARY:\r\n return true;\r\n case NEW_CHECKOUT_SUMMARY:\r\n return false;\r\n default:\r\n return state;\r\n }\r\n}\r\n","import {\r\n NOTIFY_ERROR,\r\n DISMISS_MESSAGE,\r\n DISMISS_ALL_MESSAGES,\r\n NOTIFY_COMPLETE_CHECKOUT_ERROR,\r\n NOTIFY_WARNING\r\n} from '../../GlobalStateContainer'\r\n\r\nimport {\r\n ERROR_USER_ALERT,\r\n UNKNOWN_USER_ALERT,\r\n WARNING_USER_ALERT\r\n} from './userAlertTypes'\r\n\r\nimport {\r\n addToList,\r\n replaceInListById\r\n} from '../../../util/listUtility'\r\n\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst mapActionTypeToUserAlertType = (actionType) => {\r\n switch (actionType) {\r\n case NOTIFY_WARNING:\r\n return WARNING_USER_ALERT;\r\n case NOTIFY_ERROR:\r\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\r\n return ERROR_USER_ALERT;\r\n default:\r\n return UNKNOWN_USER_ALERT;\r\n }\r\n}\r\n\r\nexport function messages(state = [], action) {\r\n switch (action.type) {\r\n case NOTIFY_WARNING:\r\n case NOTIFY_ERROR:\r\n return addToList(\r\n state,\r\n {\r\n type: mapActionTypeToUserAlertType(action.type),\r\n text: action.message,\r\n Id: action.messageId\r\n });\r\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\r\n return addToList(\r\n state,\r\n {\r\n type: mapActionTypeToUserAlertType(action.type),\r\n text: typeof(action.message) !== \"undefined\" && action.message !== null && action.message !== \"\"\r\n ? action.message\r\n : translateResourceString(\"/Checkout/UserMessaging/CompleteCheckoutError\"),\r\n Id: action.messageId\r\n });\r\n case DISMISS_MESSAGE:\r\n return replaceInListById(\r\n state,\r\n action.messageId,\r\n Object.assign({}, state.filter(m => m.Id === action.messageId)[0], { dismissed: true }))\r\n case DISMISS_ALL_MESSAGES:\r\n return [];\r\n default:\r\n return state;\r\n }\r\n}\r\n","import { combineReducers } from 'redux'\r\n\r\nimport {\r\n Addresses,\r\n BillingAddresses,\r\n ShippingAddresses,\r\n SelectedBillingAddressId,\r\n SelectedShippingAddressId,\r\n useShippingForBilling\r\n} from '../Features/Address/addressReducers'\r\n\r\nimport {\r\n PhoneNumber,\r\n PhoneText,\r\n completeCheckoutButtonText,\r\n onPaymentScreen\r\n } from './uiReducers'\r\n\r\nimport {\r\n CartItems,\r\n RequiredPartnerIds \r\n} from '../Features/Cart/cartReducers'\r\n\r\nimport {\r\n PaymentOptions,\r\n SelectedPaymentOptionId,\r\n PaymentRecord,\r\n FetchingEBizChargePaymentWebFormUrl,\r\n EBizChargePaymentWebFormUrl,\r\n EBizChargePaymentWebFormError\r\n} from '../Features/PaymentMethod/paymentMethodReducers'\r\n\r\nimport {\r\n Summary,\r\n isRefreshingSummary\r\n} from '../Features/Summary/summaryReducers'\r\n\r\nimport { isPlaceOrderPending } from '../Features/PlaceOrder/placeOrderReducers'\r\n\r\nimport {\r\n ShippingOptions,\r\n SelectedShippingOptionId,\r\n isRefreshingShippingOptions\r\n} from '../Features/ShippingMethod/shippingMethodReducers'\r\n\r\nimport {\r\n Coupons\r\n} from '../Features/Coupon/couponReducers'\r\n\r\nimport { termsAndConditions } from '../Features/TermsAndConditions/termsAndCondtionsReducers'\r\n\r\nimport { messages } from '../Features/UserMessaging/userMessagingReducers'\r\n\r\nconst entities = combineReducers({\r\n // Address\r\n Addresses,\r\n BillingAddresses,\r\n SelectedBillingAddressId,\r\n ShippingAddresses,\r\n SelectedShippingAddressId,\r\n\r\n // Cart\r\n CartItems,\r\n RequiredPartnerIds,\r\n\r\n // Payment\r\n PaymentOptions,\r\n SelectedPaymentOptionId,\r\n PaymentRecord,\r\n EBizChargePaymentWebFormUrl,\r\n FetchingEBizChargePaymentWebFormUrl,\r\n EBizChargePaymentWebFormError,\r\n\r\n // Shipping\r\n ShippingOptions,\r\n SelectedShippingOptionId,\r\n isRefreshingShippingOptions,\r\n\r\n //Summary\r\n Summary,\r\n isRefreshingSummary,\r\n\r\n // Coupon\r\n Coupons\r\n});\r\n\r\nconst ui = combineReducers({\r\n // Address\r\n useShippingForBilling,\r\n\r\n // UserMessaging\r\n messages,\r\n\r\n // PlaceOrder\r\n isPlaceOrderPending,\r\n\r\n termsAndConditions,\r\n\r\n PhoneNumber,\r\n PhoneText,\r\n completeCheckoutButtonText,\r\n onPaymentScreen,\r\n});\r\n\r\nfunction constants(state = {}, action) {\r\n return state; // they're constants. duh.\r\n}\r\n\r\nexport const checkoutApp = combineReducers({\r\n ui,\r\n entities,\r\n constants\r\n})\r\n","\r\nimport {\r\n ADD_SHIPPING_ADDRESS,\r\n ADD_BILLING_ADDRESS,\r\n REMOVE_SHIPPING_ADDRESS,\r\n REMOVE_BILLING_ADDRESS,\r\n SELECT_BILLING_ADDRESS,\r\n SELECT_SHIPPING_ADDRESS,\r\n UPDATE_ADDRESS,\r\n SELECT_SHIPPING_AND_BILLING_ADDRESS,\r\n USE_BILLING_FOR_SHIPPING_TOGGLE\r\n} from '../../GlobalStateContainer'\r\n\r\nimport {\r\n addToList,\r\n removeFromList,\r\n removeFromListById,\r\n replaceInList,\r\n replaceInListById\r\n} from '../../../util/listUtility'\r\n\r\nexport function Addresses(state = [], action) {\r\n switch (action.type) {\r\n case ADD_BILLING_ADDRESS:\r\n return addToList(state, action.address);\r\n case ADD_SHIPPING_ADDRESS:\r\n return addToList(state, action.address);\r\n case REMOVE_BILLING_ADDRESS:\r\n return removeFromListById(state, action.addressId);\r\n case REMOVE_SHIPPING_ADDRESS:\r\n return removeFromListById(state, action.addressId);\r\n case UPDATE_ADDRESS:\r\n return replaceInListById(state, action.addressId, action.address);\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport function BillingAddresses(state = [], action) {\r\n switch (action.type) {\r\n case ADD_BILLING_ADDRESS:\r\n return addToList(state, action.address.Id);\r\n case REMOVE_BILLING_ADDRESS:\r\n return removeFromList(state, action.addressId);\r\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\r\n return addToList(state, action.addressId)\r\n case UPDATE_ADDRESS:\r\n return replaceInList(state, action.addressId, action.address.Id);\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport function ShippingAddresses(state = [], action) {\r\n switch (action.type) {\r\n case ADD_SHIPPING_ADDRESS:\r\n return addToList(state, action.address.Id);\r\n case REMOVE_SHIPPING_ADDRESS:\r\n return removeFromList(state, action.addressId);\r\n case UPDATE_ADDRESS:\r\n return (state.includes(action.addressId) && action.addressId !== action.address.ID)\r\n ? replaceInList(state, action.addressId, action.address.Id)\r\n : state;\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport function SelectedBillingAddressId(state = '', action) {\r\n switch (action.type) {\r\n case REMOVE_BILLING_ADDRESS:\r\n return state === action.addressId ? '' : state;\r\n case SELECT_BILLING_ADDRESS:\r\n return action.addressId;\r\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\r\n return action.addressId;\r\n case UPDATE_ADDRESS:\r\n return state === action.addressId ? action.address.Id : state;\r\n default: \r\n return state;\r\n }\r\n}\r\n\r\nexport function SelectedShippingAddressId(state = '', action) {\r\n switch (action.type) {\r\n case REMOVE_SHIPPING_ADDRESS:\r\n return state === action.addressId ? '' : state;\r\n case SELECT_SHIPPING_ADDRESS:\r\n return action.addressId;\r\n case SELECT_SHIPPING_AND_BILLING_ADDRESS:\r\n return action.addressId;\r\n case UPDATE_ADDRESS:\r\n return state === action.addressId ? action.address.Id : state;\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport function useShippingForBilling(state = true, action) {\r\n switch (action.type) {\r\n case USE_BILLING_FOR_SHIPPING_TOGGLE:\r\n return !state;\r\n default:\r\n return state;\r\n }\r\n}\r\n","import {\r\n BRAINTREEE_PAYMENT_DATA_UPDATE,\r\n PURCHASE_ORDER_PAYMENT_DATA_UPDATE,\r\n SELECT_PAYMENT_OPTION,\r\n NOTIFY_COMPLETE_CHECKOUT_ERROR,\r\n UPDATE_EBIZ_CHARGE_WEB_FORM_URL,\r\n EBIZ_CHARGE_WEB_FORM_URL_ERROR,\r\n BACK,\r\n UPDATING_EBIZ_CHARGE_WEB_FORM_URL_ASYNC, \r\n SELECT_SHIPPING_OPTION\r\n} from '../../GlobalStateContainer'\r\n\r\nexport const PaymentOptions = function (state = [], action) {\r\n return state;\r\n}\r\n\r\nexport const SelectedPaymentOptionId = function(state = '', action) {\r\n switch (action.type) {\r\n case SELECT_PAYMENT_OPTION:\r\n return action.paymentMethodId || '';\r\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\r\n return '';\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport const PaymentRecord = function (state = {}, action) {\r\n switch (action.type) {\r\n case BRAINTREEE_PAYMENT_DATA_UPDATE:\r\n return Object.assign({}, state,\r\n {\r\n BraintreePaymentNonce: action.payload && action.payload.nonce,\r\n BraintreePaymentPayload: action.payload\r\n });\r\n case PURCHASE_ORDER_PAYMENT_DATA_UPDATE:\r\n return Object.assign({}, state, { POValue: action.number });\r\n case NOTIFY_COMPLETE_CHECKOUT_ERROR:\r\n return Object.assign({}, state, { POValue: null, BraintreePaymentNonce: null, BraintreePaymentPayload: null, EbizChargePaymentStatus: null });\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nexport const FetchingEBizChargePaymentWebFormUrl = function (state = false, action) {\r\n switch (action.type) {\r\n case UPDATING_EBIZ_CHARGE_WEB_FORM_URL_ASYNC:\r\n return true;\r\n case UPDATE_EBIZ_CHARGE_WEB_FORM_URL:\r\n return false;\r\n case EBIZ_CHARGE_WEB_FORM_URL_ERROR:\r\n return false;\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\n/// \r\n \r\n {c.Discount && {c.Discount}}\r\n { this.removeCoupon(c.Code) }}>\r\n
\r\n );\r\n });\r\n\r\n return (\r\n \r\n
\r\n :\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n this.setState({ newCouponCode: e.target.value })}\r\n onKeyPress={(e) => { this.onKeyPress(e) }}\r\n placeholder={translateResourceString(\"/Checkout/Coupons/PartnerId\")}\r\n />\r\n { this.addCoupon() }}>\r\n {translateResourceString(\"/Checkout/Coupons/Save\")}\r\n
\r\n\r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n \r\n this.setState({ newCouponCode: e.target.value })}\r\n onKeyPress={(e) => { this.onKeyPress(e) }}\r\n placeholder={translateResourceString(\"/Checkout/Coupons/PartnerId\")}\r\n />\r\n { this.addCoupon() }}>\r\n {translateResourceString(\"/Checkout/Coupons/Save\")}\r\n
\r\n {!!appliedCoupons.length && (\r\n \r\n {appliedCoupons}\r\n
\r\n )}\r\n \r\n
\r\n );});\r\n return (\r\n {title.title}
\r\n \r\n {title.format}\r\n \r\n
\r\n \r\n \r\n this.toggleModal(false)}\r\n centered={true}\r\n contentClassName=\"list-modal\"\r\n role=\"document\" >\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nTitlesIncludedInLicense.propTypes = {\r\n lineItemId: PropTypes.isRequired\r\n}\r\n\r\nexport default TitlesIncludedInLicense;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { NumberInputSelect } from '../../components';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport TitlesIncludedInLicense from './TitlesIncludedInLicense';\r\n\r\nconst maxDropdownQuantity = 10;\r\n\r\nclass CartItem extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.onQuantityChange = this.onQuantityChange.bind(this);\r\n }\r\n\r\n onQuantityChange(qty) {\r\n if (qty > 0) {\r\n this.props.onQuantityChange(this.props.item.Id, Number(qty));\r\n } else {\r\n this.props.onDelete(this.props.item.Id, this.props.item.Quantity);\r\n }\r\n }\r\n\r\n render() {\r\n const item = this.props.item;\r\n //Use restricted quantity text value if it exists. This will show Unlimited if it is used.\r\n const matchedRestrictedQuantity = item.RestrictedQuantities.find(rq => Number(rq.Value) === item.Quantity);\r\n const quantity = matchedRestrictedQuantity ? matchedRestrictedQuantity.Text : item.Quantity;\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {translateResourceString(\"/Checkout/Cart/TitlesIncludedInLicense/ModalHeader\")}
\r\n\r\n {translateResourceString(\"/Checkout/Cart/TitlesIncludedInLicense/ModalDescription\")}\r\n
\r\n \r\n
\r\n {translateResourceString(\"/Checkout/Cart/TitlesIncludedInLicense/TitleLabel\")}
\r\n {translateResourceString(\"/Checkout/Cart/TitlesIncludedInLicense/FormatLabel\")}
\r\n {titles}\r\n \r\n \r\n 
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nCartItem.propTypes = {\r\n item: PropTypes.shape({\r\n Name: PropTypes.string.isRequired,\r\n ImageUrl: PropTypes.string.isRequired,\r\n SKU: PropTypes.string.isRequired,\r\n Quantity: PropTypes.number.isRequired,\r\n RestrictedQuantities: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Text: PropTypes.string,\r\n Value: PropTypes.string,\r\n })\r\n ),\r\n }).isRequired,\r\n onDelete: PropTypes.func,\r\n onQuantityChange: PropTypes.func.isRequired,\r\n readOnly: PropTypes.bool\r\n}\r\n\r\nexport default CartItem;\r\n","import {\r\n fetchJson,\r\n UPDATE_ITEM_QUANTITY,\r\n DELETE_ITEM,\r\n UPDATING_ITEM_QUANTITY_ASYNC,\r\n DELETING_ITEM_ASYNC,\r\n GET_REQUIRED_PARTNER_IDS_ASYNC,\r\n GETTING_REQUIRED_PARTNER_IDS_ASYNC\r\n} from '../../GlobalStateContainer'\r\n\r\nimport { notifyError } from '../UserMessaging'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\n/* CART */\r\nexport function updateItemQuantity(itemId, newQuantity) {\r\n return { type: UPDATE_ITEM_QUANTITY, itemId, newQuantity }\r\n}\r\n\r\nexport function deleteItem(itemId) {\r\n return { type: DELETE_ITEM, itemId }\r\n}\r\n\r\nexport function updateRequiredPartnerIds(requiredPartnerIds) {\r\n return { type: GET_REQUIRED_PARTNER_IDS_ASYNC, requiredPartnerIds }\r\n}\r\n\r\n\r\nconst onUpdateQuantitySuccess = ({ error, message }, { id, qty }, getState) => {\r\n if (!error) {\r\n return updateItemQuantity(id, qty);\r\n } else {\r\n return notifyError(translateResourceString(\"/Checkout/Cart/Errors/UpdateQuantityFailed\"), message);\r\n }\r\n}\r\n\r\nconst notifyUpdatingItem = function ({ id, qty }) {\r\n return { type: UPDATING_ITEM_QUANTITY_ASYNC, id, qty };\r\n}\r\nconst updateItemQuantityAsyncSpec = {\r\n endpoint: (state) => state.constants.navigation.updateItemQuantityEndpoint,\r\n init: { method: 'POST', credentials: 'same-origin' },\r\n notify: notifyUpdatingItem,\r\n extract: (response) => response.json(),\r\n onSuccess: onUpdateQuantitySuccess,\r\n onError: (diagMsg) => notifyError(translateResourceString(\"/Checkout/Cart/Errors/UpdateQuantityFailed\"), diagMsg)\r\n}\r\n\r\nexport const updateItemQuantityAsync = fetchJson(updateItemQuantityAsyncSpec)\r\n\r\n\r\nconst ondeleteSuccess = ({ error, message }, { id }, getState) => {\r\n if (!error) {\r\n return deleteItem(id);\r\n } else {\r\n return notifyError(translateResourceString(\"/Checkout/Cart/Errors/DeleteItemFailed\"), message);\r\n }\r\n}\r\n\r\nconst deleteItemAsyncSpec = {\r\n endpoint: (state) => state.constants.navigation.deleteItemEndpoint,\r\n init: { method: 'POST', credentials: 'same-origin' },\r\n notify: ({ id }) => ({ type: DELETING_ITEM_ASYNC, id }),\r\n extract: (response) => response.json(),\r\n onSuccess: ondeleteSuccess,\r\n onError: (diagMsg) => notifyError(translateResourceString(\"/Checkout/Cart/Errors/DeleteItemFailed\"), diagMsg)\r\n}\r\n\r\nexport const deleteItemAsync = fetchJson(deleteItemAsyncSpec)\r\n\r\nconst onUpdateRequiredPartnerIdsAsyncSuccess = ({ error, message, numberOfRequiredPartnerIds }) => {\r\n if (!error) {\r\n return updateRequiredPartnerIds(numberOfRequiredPartnerIds);\r\n } else {\r\n return notifyError(translateResourceString(\"/Checkout/Cart/Errors/GettingNumberOfRequiredPartnerIds\"), message);\r\n }\r\n}\r\n\r\nconst updateRequiredPartnerIdsAsyncSpec = {\r\n endpoint: (state) => state.constants.navigation.requiredPartnerIdsEndpoint,\r\n init: { method: 'POST', credentials: 'same-origin' },\r\n notify: () => { return { type: GETTING_REQUIRED_PARTNER_IDS_ASYNC } },\r\n extract: (response) => response.json(),\r\n onSuccess: onUpdateRequiredPartnerIdsAsyncSuccess,\r\n onError: (diagMsg) => notifyError(translateResourceString(\"/Checkout/Cart/Errors/GettingNumberOfRequiredPartnerIds\"), diagMsg)\r\n}\r\n\r\nexport const updateRequiredPartnerIdsAsync = fetchJson(updateRequiredPartnerIdsAsyncSpec)\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport CartItem from './CartItem'\r\nimport { CheckoutSection } from '../../components'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport { deleteItemAsync, updateItemQuantityAsync, updateItemQuantity, updateRequiredPartnerIdsAsync } from './cartActionCreators'\r\n\r\nconst CartList = ({ items, isEditable, onQuantityChange, onDelete, titlesIncludedInLicenseUrl }) => {\r\n const cartItems = items.map((item) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n {this.props.isEditable &&\r\n \r\n
\r\n {item.Name}
\r\n\r\n \r\n {item.Price}\r\n
\r\n \r\n {item.SKU}\r\n
\r\n {item.LicenceDuration &&\r\n \r\n {item.LicenseDuration}\r\n
\r\n }\r\n {item.Language &&\r\n \r\n {item.Language}\r\n
\r\n }\r\n {!item.IsStopWorkshop &&\r\n \r\n
\r\n }\r\n {item.TitlesIncluded &&\r\n {item.QtyMessage} {quantity}
\r\n {/* Use this if quantity is editeble\r\n {this.props.isEditable &&\r\n \r\n \r\n
\r\n }\r\n {translateResourceString(\"/Checkout/Address/NoAddressProvided\")}
);\r\n }\r\n const min = props.compact;\r\n const nameEmph = props.compact ? ' strong' : '';\r\n const addr = props.address;\r\n const cityStateZip = addr.State ? `${addr.City}, ${addr.State} ${addr.PostalCode}` : `${addr.City}, ${addr.PostalCode}`;\r\n const s = props.compact ? spanStyleCompact : spanStyle;\r\n const si = Object.assign({}, s, { marginLeft: 0 });\r\n const sj = Object.assign({}, si, { });\r\n const a = props.compact ? addressStyleCompact : addressStyle;\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nAddressDisplay.propTypes = {\r\n address: AddressShape.propTypes\r\n}","// eslint-disable-next-line\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { RadioInput } from '../../components'\r\n\r\nimport AddressDisplay from './AddressDisplay'\r\n\r\nimport { AddressShape } from './propTypes'\r\n\r\nconst r = {\r\n paddingTop: 10,\r\n paddingLeft: 15,\r\n paddingRight: 15,\r\n paddingBottom: 0\r\n}\r\n\r\nlet ActiveAddressInAddressSelectorList = (\r\n {\r\n address,\r\n isSelected,\r\n onSelected,\r\n onRadioSelected,\r\n onBeginEdit,\r\n onDelete,\r\n selectAddressMessage\r\n }) => (\r\n \r\n {addr.Name}\r\n {addr.AddressLine1}\r\n \r\n {addr.AddressLine2}\r\n \r\n
\r\n \r\n {cityStateZip }\r\n {addr.CountryName}\r\n \r\n {addr.Phone}\r\n \r\n
\r\n \r\n onRadioSelected(address.Id)} />\r\n
\r\n \r\n e.preventDefault() || onSelected(address.Id)}\r\n >\r\n {selectAddressMessage}\r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n)\r\n\r\nActiveAddressInAddressSelectorList.propTypes = {\r\n address: PropTypes.shape(AddressShape).isRequired,\r\n isSelected: PropTypes.bool.isRequired,\r\n onSelected: PropTypes.func.isRequired,\r\n onRadioSelected: PropTypes.func.isRequired,\r\n onBeginEdit: PropTypes.func.isRequired,\r\n onDelete: PropTypes.func.isRequired,\r\n selectAddressMessage: PropTypes.string.isRequired\r\n}\r\n\r\nexport default ActiveAddressInAddressSelectorList","// eslint-disable-next-line\r\nimport React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\nimport ActiveAddressInAddressSelectorList from './ActiveAddressInAddressSelectorList'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport { AddressShape } from './propTypes'\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n ...ownProps\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch, ownProps) => {\r\n\r\n const confirmDelete = () => {\r\n if (typeof window.confirm !== 'undefined')\r\n return window.confirm(translateResourceString(\"/Checkout/Address/DeletionConfirmationMessage\"));\r\n else\r\n return false;\r\n }\r\n\r\n return {\r\n onSelected: id => {\r\n ownProps.onSelected(id);\r\n dispatch(ownProps.selectAddressActionCreator(id));\r\n },\r\n onRadioSelected: id => {\r\n dispatch(ownProps.selectAddressActionCreator(id));\r\n ownProps.onRadioSelected(id);\r\n },\r\n onDelete: id => {\r\n if (confirmDelete()) {\r\n ownProps.onDeleted(id);\r\n dispatch(ownProps.deleteAddressActionCreator({ addressId: id }));\r\n }\r\n }\r\n };\r\n}\r\n\r\nconst AddressSelectorListActiveAddressContainer = connect(mapStateToProps, mapDispatchToProps)(ActiveAddressInAddressSelectorList)\r\n\r\nAddressSelectorListActiveAddressContainer.propTypes = {\r\n address: PropTypes.shape(AddressShape).isRequired,\r\n selectAddressActionCreator: PropTypes.func.isRequired,\r\n deleteAddressActionCreator: PropTypes.func.isRequired,\r\n onBeginEdit: PropTypes.func.isRequired,\r\n selectAddressMessage: PropTypes.string.isRequired,\r\n isSelected: PropTypes.bool.isRequired,\r\n onDeleted: PropTypes.func.isRequired,\r\n onSelected: PropTypes.func.isRequired,\r\n onRadioSelected: PropTypes.func.isRequired\r\n}\r\n\r\nexport default AddressSelectorListActiveAddressContainer","import PropTypes from 'prop-types';\r\nimport React from 'react';\r\nimport { connect } from 'react-redux'\r\n\r\nimport { AddressShape, AddressActionCreatorsShape as AddressActionCreators } from './propTypes'\r\n\r\nimport AddressDisplay from './AddressDisplay';\r\nimport { RadioInput } from '../../components';\r\nimport ActiveAddressInAddressSelectorListContainer from './ActiveAddressInAddressSelectorListContainer'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport {\r\n hiddenAnchorStyle,\r\n pretendAnchorStyle\r\n} from '../../components'\r\n\r\nclass AddressSelectorList extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n activeAddressId: ''\r\n };\r\n\r\n this.onDeleted = this.onDeleted.bind(this);\r\n this.onSelected = this.onSelected.bind(this);\r\n this.onItemClick = this.onItemClick.bind(this);\r\n this.onRadioSelected = this.onRadioSelected.bind(this);\r\n }\r\n\r\n beginEdit(Id) {\r\n if (this.state.activeAddressId !== '') {\r\n // Only set active if we had an active before\r\n this.setState({ activeAddressId: Id });\r\n }\r\n this.props.onBeginEdit(Id);\r\n }\r\n\r\n onRadioSelected(id) {\r\n this.setState({ activeAddressId: id });\r\n this.props.onAddressSelected(id);\r\n }\r\n\r\n onSelected(id) {\r\n this.props.onAddressSelected(id);\r\n this.props.onDoneSelecting(id);\r\n this.setState({ activeAddressId: '' });\r\n }\r\n\r\n onDeleted(id) {\r\n this.setState({ activeAddressId: '' });\r\n }\r\n\r\n onItemClick(id) {\r\n this.setState({ activeAddressId: id });\r\n }\r\n\r\n render() {\r\n const listComponent = this;\r\n const props = this.props;\r\n const listItems = this.props.addresses.map((address) => {\r\n const isSelected = props.selectedAddressId === address.Id;\r\n const focused = listComponent.state.activeAddressId === address.Id;\r\n return (\r\n \r\n {\r\n e.preventDefault();\r\n listComponent.beginEdit(address.Id);\r\n }}>\r\n
\r\n } \r\n \r\n );\r\n });\r\n\r\n return (\r\n \r\n {listItems}\r\n {props.allowAdding && this.beginEdit()}>{translateResourceString(\"/Checkout/Address/AddNewButton\")}}\r\n
\r\n )\r\n }\r\n}\r\n\r\nAddressSelectorList.propTypes = {\r\n addressActionCreators: PropTypes.shape(AddressActionCreators).isRequired,\r\n addresses: PropTypes.arrayOf(AddressShape.propTypes).isRequired,\r\n allowAdding: PropTypes.bool.isRequired,\r\n onAddressSelected: PropTypes.func.isRequired,\r\n onDoneSelecting: PropTypes.func.isRequired,\r\n selectAddressMessage: PropTypes.string.isRequired,\r\n selectedAddressId: PropTypes.string\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch, ownProps) => ({\r\n onAddressSelected: (id, address) => dispatch(ownProps.addressActionCreators.select(id, address))\r\n})\r\n\r\nconst AddressSelectorListContainer = connect(\r\n null,\r\n mapDispatchToProps\r\n)(AddressSelectorList)\r\n\r\nexport default AddressSelectorListContainer;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { TextFormEntry, StateInput } from '../../components'\r\n\r\nimport { AddressShape } from './propTypes'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\n\r\nconst requiredFields = [\"name\", \"line1\", \"country\", \"city\", \"state\", \"postalCode\"];\r\n\r\nexport class AddressEditor extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n const newAddress = {\r\n AddressLine1: \"\",\r\n AddressLine2: \"\",\r\n AddressType: props.addressType,\r\n City: \"\",\r\n CountryCode: \"USA\",\r\n CountryName: \"\",\r\n Id: \"\",\r\n Name: \"\",\r\n Phone: \"\",\r\n PostalCode: \"\",\r\n State: \"\"\r\n };\r\n this.state = {\r\n address: props.address || Object.assign({}, newAddress),\r\n submitAttempted: false,\r\n countriesStatesMap: props.countriesStatesMap,\r\n invalidFields: {},\r\n originalId: props.address && props.address.Id,\r\n validationRun: false\r\n };\r\n \r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleCountryChange = this.handleCountryChange.bind(this);\r\n this.onSubmit = this.onSubmit.bind(this);\r\n this.validateField = this.validateField.bind(this);\r\n this.isInvalid = this.isInvalid.bind(this);\r\n this.isRequired = this.isRequired.bind(this);\r\n }\r\n\r\n isRequired(name) {\r\n return requiredFields.indexOf(name) > -1;\r\n }\r\n\r\n validateField(invalidFields, fieldName, value) {\r\n if (this.isInvalid(value, fieldName)) {\r\n invalidFields[fieldName] = true;\r\n } else {\r\n invalidFields[fieldName] = false;\r\n }\r\n }\r\n\r\n handleChange(event) {\r\n const address = Object.assign({}, this.state.address);\r\n const value = event.target.value;\r\n const name = event.target.name;\r\n switch (name) {\r\n case \"name\":\r\n address.Name = value;\r\n break;\r\n case \"line1\":\r\n address.AddressLine1 = value;\r\n break;\r\n case \"line2\":\r\n address.AddressLine2 = value;\r\n break;\r\n case \"city\":\r\n address.City = value;\r\n break;\r\n case \"state\":\r\n address.State = value;\r\n break;\r\n case \"postalCode\":\r\n address.PostalCode = value;\r\n break;\r\n case \"phone\":\r\n address.Phone = value;\r\n break;\r\n default:\r\n if (typeof console.warn !== 'undefined')\r\n console.warn(`Unknown value change with name '${name}' and value '${value}'`);\r\n }\r\n const invalidFields = Object.assign({}, this.state.invalidFields);\r\n this.validateField(invalidFields, name, value);\r\n this.setState({ address: address, invalidFields: invalidFields });\r\n }\r\n\r\n handleCountryChange(event) {\r\n const countryWithCode = this.props.countries.filter((c) => c.Code === event.target.value);\r\n if (countryWithCode.length > 0) {\r\n this.setState({\r\n address: Object.assign({},\r\n this.state.address,\r\n {\r\n CountryCode: event.target.value,\r\n CountryName: countryWithCode[0].Code\r\n })\r\n });\r\n }\r\n event.preventDefault();\r\n }\r\n\r\n onSubmit(event) {\r\n event.preventDefault();\r\n if (!event.target.checkValidity()) {\r\n return;\r\n }\r\n const keys = this.state.invalidFields ? Object.keys(this.state.invalidFields) : [];\r\n const invalidFieldNames = keys.filter((key) => this.state.invalidFields[key]);\r\n let errorMessage = \"\";\r\n if (invalidFieldNames.length > 0) {\r\n errorMessage = `Please fix the following fields: ${invalidFieldNames.join(\", \") + \".\"}`;\r\n this.setState({ errorMessage: errorMessage });\r\n } else {\r\n this.props.onEditOk(this.state.address);\r\n }\r\n }\r\n \r\n isInvalid(value, inputName) {\r\n if ((!value || value.length < 1) && this.isRequired(inputName)) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n \r\n render() {\r\n const selectedAddress = this.state.address;\r\n const countryOptions = this.props.countries.map((country) =>\r\n \r\n );\r\n return (\r\n \r\n\r\n );\r\n }\r\n}\r\n\r\nAddressEditor.propTypes = {\r\n addressType: PropTypes.number.isRequired,\r\n address: AddressShape.propTypes,\r\n countriesStatesMap: PropTypes.object.isRequired,\r\n countries: PropTypes.array.isRequired,\r\n onEditCancel: PropTypes.func.isRequired,\r\n onEditOk: PropTypes.func.isRequired\r\n}\r\n\r\nexport default AddressEditor","// eslint-disable-next-line\r\nimport React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from \"react-redux\"\r\nimport find from 'lodash/find'\r\n\r\nimport { saveAddress } from \"./addressActionCreators\"\r\nimport { AddressActionCreatorsShape as AddressActionCreators } from \"./propTypes\"\r\nimport AddressEditor from './AddressEditor'\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n return {\r\n countriesStatesMap: state.constants.countriesStatesMap,\r\n countries: state.constants.countries,\r\n address: find(state.entities.Addresses, \r\n address => address.Id === ownProps.addressId),\r\n ...ownProps\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch, ownProps) => {\r\n return {\r\n onEditOk: address => {\r\n let addressAction;\r\n let newId = 0;\r\n if (typeof (address.Id) !== 'undefined' && address.Id) {\r\n addressAction = ownProps.addressActionCreators.update(address.Id, address);\r\n ownProps.onAddressUpdated(address.Id);\r\n } else {\r\n addressAction = ownProps.addressActionCreators.add(address);\r\n newId = addressAction.address && addressAction.address.Id;\r\n ownProps.onAddressCreated(address.Id);\r\n }\r\n dispatch(addressAction);\r\n newId && dispatch(ownProps.addressActionCreators.select(newId));\r\n dispatch(saveAddress(Object.assign({}, { Id: newId }, address)));\r\n },\r\n onEditCancel: ownProps.onEditCancel\r\n }\r\n}\r\n\r\nconst AddressEditorContainer = connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(AddressEditor);\r\n\r\nAddressEditorContainer.propTypes = {\r\n addressId: PropTypes.string,\r\n addressActionCreators: AddressActionCreators.propTypes.isRequired,\r\n onAddressCreated: PropTypes.func.isRequired,\r\n onAddressUpdated: PropTypes.func.isRequired\r\n}\r\n\r\nexport default AddressEditorContainer;","import React from 'react'\r\nimport PropTypes from 'prop-types';\r\nimport find from 'lodash/find'\r\n\r\nimport { CheckoutSection, hiddenAnchorStyle } from '../../components'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport { Fade } from '../../componentAnimations'\r\n\r\nimport AddressSelectorList from './AddressSelectorList'\r\nimport AddressDisplay from './AddressDisplay'\r\nimport AddressEditorContainer from './AddressEditorContainer'\r\n\r\nimport { AddressShape, AddressActionCreatorsShape as AddressActionCreators } from './propTypes'\r\n\r\nclass CheckoutAddressComponent extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n listCollapsed: props.selectedAddressId ? true : false,\r\n editId: ''\r\n };\r\n this.onClickCollapse = this.onClickCollapse.bind(this);\r\n this.onDoneSelecting = this.onDoneSelecting.bind(this);\r\n this.onBeginEdit = this.onBeginEdit.bind(this);\r\n this.onEndEdit = this.onEndEdit.bind(this);\r\n this.onEditCancel = this.onEditCancel.bind(this);\r\n }\r\n\r\n onClickCollapse(e) {\r\n e.preventDefault();\r\n this.setState({ listCollapsed: !this.state.listCollapsed });\r\n }\r\n\r\n onDoneSelecting() {\r\n this.setState({ listCollapsed: true });\r\n }\r\n\r\n onBeginEdit(Id) {\r\n this.setState({ editOpen: true, editId: Id, listCollapsed: true });\r\n }\r\n\r\n onEndEdit(Id) {\r\n this.setState({ editOpen: false });\r\n this.props.onEndEdit(Id);\r\n }\r\n\r\n onEditCancel() {\r\n this.setState({ editOpen: false, listCollapsed: false })\r\n }\r\n\r\n render() {\r\n const selectedAddress = find(this.props.addresses, address => address && address.Id === this.props.selectedAddressId);\r\n\r\n let editAddressButtonText = translateResourceString(\"/Checkout/Address/DoneButton\");\r\n if (this.state.listCollapsed) {\r\n editAddressButtonText = this.props.allowAdding ? translateResourceString(\"/Checkout/Address/AddEditAddressesButton\")\r\n : translateResourceString(\"/Checkout/Address/EditAddressButton\");\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n {this.props.allowBillingEqualsShipping && this.props.onUseForAnotherClicked &&\r\n \r\n this.onClickCollapse(e)}>\r\n {editAddressButtonText}\r\n \r\n \r\n
\r\n }\r\n \r\n
\r\n }\r\n {this.props.allowEdit &&\r\n \r\n
\r\n \r\n \r\n \r\n {this.props.useForAnotherMessage}\r\n \r\n \r\n
\r\n \r\n
\r\n {this.props.onPaymentScreen && this.props.usingPo &&\r\n this.onClick(e)}\r\n >\r\n {this.props.buttonText}\r\n {this.props.isPlaceOrderPending &&\r\n }\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nCheckoutComplete.propTypes = {\r\n onCompleteCheckout: PropTypes.func.isRequired,\r\n buttonText: PropTypes.string.isRequired,\r\n continueButtonText: PropTypes.string.isRequired,\r\n placeOrderDetails: PropTypes.object.isRequired,\r\n additionalClassname: PropTypes.string,\r\n isPlaceOrderPending: PropTypes.bool,\r\n backButtonText: PropTypes.string,\r\n onBack: PropTypes.func,\r\n onContinueClick: PropTypes.func,\r\n usingPo: PropTypes.bool,\r\n}\r\n\r\n\r\n\r\nexport default CheckoutComplete\r\n","import { translateResourceString } from '../../../util/translationUtility';\r\n\r\n// BBS DDD 2017-12-01 This archaic validation could probably be\r\n// replaced. see mapTopLevelPPropsToInitialStore.js for suggestion of valdatejs.org or such\r\nexport const validate = (orderDetails, validators) => {\r\n return validators\r\n .map(validator =>{\r\n const key = validator.key;\r\n\r\n if (!!!key) {\r\n return `${translateResourceString(\"/Checkout/PlaceOrder/Errors/UnknownOrderDetail\")}: '${key}'`;\r\n }\r\n\r\n const value = orderDetails[key];\r\n return validator.validate(value, orderDetails);\r\n })\r\n .filter(x => !!x);\r\n }","import { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst partnerIdValidator = {\r\n key: \"PartnerIds\",\r\n validate: (value, orderDetails) => {\r\n return (orderDetails.IsPartnerIdRequired && (!value || value.length < orderDetails.RequiredPartnerIds)) && translateResourceString(\"/Checkout/PlaceOrder/Errors/PartnerIdIsRequired\");\r\n }\r\n }\r\n\r\n const termsAndConditionsValidator = {\r\n key: \"TermsAndConditions\",\r\n validate: (value, orderDetails) => {\r\n return (orderDetails.IsTermsAndConditionsRequired && !value) && translateResourceString(\"/Checkout/PlaceOrder/Errors/TermsAndConditions\");\r\n }\r\n }\r\n\r\nconst selectedShippingAddressValidator = {\r\n key: \"SelectedShippingAddress\",\r\n validate: (value, orderDetails) => { \r\n return ((orderDetails.IsShippingRequired || orderDetails.billingEqualsShipping) && (!value || !value.Id)) && translateResourceString(\"/Checkout/PlaceOrder/Errors/ShippingAddressNotSelected\");\r\n }\r\n}\r\nconst selectedStopworkShopValidator = {\r\n key: \"SelectedProduct\",\r\n validate: (value, orderDetails) => {\r\n if (value === false) {\r\n return; // or return null if you prefer\r\n }\r\n return ((orderDetails.IsStopWorkshop)) && translateResourceString(\"/Checkout/PlaceOrder/Errors/IsStopWorkShop\");\r\n }\r\n}\r\n\r\n const internationalShippingAddressValidator = {\r\n key: \"SelectedShippingAddress\",\r\n validate: (value, orderDetails) => {\r\n return (orderDetails.IsShippingRequired && (value && value.Id && (value.CountryCode !== 'USA' && value.CountryCode !== 'CAN'))) && translateResourceString(\"/Checkout/PlaceOrder/Errors/InternationalShippingAddressSelected\");\r\n }\r\n }\r\n \r\n const selectedBillingAddressValidator = {\r\n key: \"SelectedBillingAddress\",\r\n validate: (value, orderDetails) => {\r\n return SelectedBillingAddressCanBeSubmitted(value, orderDetails[\"BillingEqualsShipping\"]);\r\n }\r\n }\r\n \r\n const selectedShippingOptionValidator = {\r\n key: \"SelectedShippingOption\",\r\n validate: (value, orderDetails) => {\r\n if (value === true) {\r\n return; // or return null if you prefer\r\n }\r\n return (orderDetails.IsShippingRequired && (!value || !value.Id)) && translateResourceString(\"/Checkout/PlaceOrder/Errors/ShippingOptionNotSelected\");\r\n }\r\n }\r\n \r\n const selectedPaymentValidator = {\r\n key: \"SelectedPayment\",\r\n validate: (value, orderDetails) => {\r\n return paymentIsInvalid(orderDetails.constants, value);\r\n }\r\n }\r\n \r\n const totalValidator = {\r\n key: \"Total\",\r\n validate: (value) => {\r\n return (typeof value !== 'number') || value < 0 && translateResourceString(\"/Checkout/PlaceOrder/Errors/Total\"); \r\n }\r\n }\r\n\r\nconst addressIsMissingIdOrRequiredData = function (address) {\r\n return (\r\n !address\r\n || !address.Id // True if address.Id is falsy\r\n || !( // True if any fields are falsy\r\n !!address.Name &&\r\n !!address.AddressLine1 &&\r\n !!address.City &&\r\n !!address.CountryCode &&\r\n !!address.PostalCode))\r\n };\r\n \r\nconst SelectedBillingAddressCanBeSubmitted = (address, billingEqualsShipping) => {\r\n return (\r\n (!billingEqualsShipping && addressIsMissingIdOrRequiredData(address))\r\n && translateResourceString(\"/Checkout/PlaceOrder/Errors/InvalidBillingAddress\")\r\n )\r\n }\r\n \r\nconst paymentIsInvalid = (constants, { Id, POValue, BraintreePaymentNonce }) => {\r\n if (!Id) {\r\n return translateResourceString(\"/Checkout/PlaceOrder/Errors/NoPaymentSelect\");\r\n } else if (Id === constants.braintreeSettings.braintreePaymentId && !BraintreePaymentNonce) {\r\n return translateResourceString(\"/Checkout/PlaceOrder/Errors/PaymentInvalid\");\r\n }\r\n return false;\r\n }\r\n\r\n export const orderCanContinueValidators = [\r\n selectedShippingAddressValidator,\r\n internationalShippingAddressValidator,\r\n selectedBillingAddressValidator,\r\n selectedShippingOptionValidator,\r\n\r\n \r\n totalValidator,\r\n partnerIdValidator,\r\n termsAndConditionsValidator,\r\n selectedStopworkShopValidator,\r\n ];\r\n\r\n export const orderCanBeSubmittedValidators = [\r\n selectedShippingAddressValidator,\r\n internationalShippingAddressValidator,\r\n selectedBillingAddressValidator,\r\n selectedShippingOptionValidator,\r\n selectedPaymentValidator,\r\n totalValidator,\r\n partnerIdValidator,\r\n termsAndConditionsValidator,\r\n selectedStopworkShopValidator,\r\n\r\n];\r\n","// eslint-disable-next-line\r\nimport React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport { notifyError, dismissAllMessages } from '../UserMessaging'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport { completeCheckoutAsync } from './placeOrderActionCreators'\r\nimport { mapStateToPlaceOrderDetails } from './mapStateToPlaceOrderDetails'\r\nimport CheckoutComplete from './CheckoutComplete'\r\n\r\nimport { validate } from '../Validation/OrderDetailsValidation'\r\nimport { orderCanBeSubmittedValidators } from '../Validation/OrderValidators';\r\n\r\nconst mapCheckoutCompleteStateToProps = (state, ownProps) => {\r\n var placeOrderDetails = mapStateToPlaceOrderDetails(state);\r\n placeOrderDetails.constants = state.constants; // Hack on the constants object so we can see what constant values are when we validate\r\n return {\r\n buttonText: translateResourceString(\"/Checkout/Continue/PlaceOrder\"),\r\n backButtonText: translateResourceString(\"/Checkout/Continue/Back\"),\r\n continueButtonText: translateResourceString(\"/Checkout/Continue/ContinueToPayment\"),\r\n placeOrderDetails: placeOrderDetails,\r\n isPlaceOrderPending: state.ui.isPlaceOrderPending,\r\n onPaymentScreen: state.ui.onPaymentScreen,\r\n usingPo: state.entities.SelectedPaymentOptionId === state.constants.purchaseOrderPaymentId,\r\n ...ownProps\r\n }\r\n}\r\n\r\nconst orderDetailsCanBeSubmitted = (orderDetails) => validate(orderDetails, orderCanBeSubmittedValidators);\r\n\r\nconst mapCheckoutCompleteDispatchToProps = (dispatch) => {\r\n return {\r\n onCompleteCheckout: (placeOrderDetails) => {\r\n dispatch(dismissAllMessages());\r\n const errors = orderDetailsCanBeSubmitted(placeOrderDetails);\r\n if (errors.length === 0) {\r\n delete placeOrderDetails.constants; // Remove the property we stuck on to share state above in mapCheckoutCompleteStateToProps\r\n dispatch(completeCheckoutAsync(placeOrderDetails));\r\n } else {\r\n const intro = translateResourceString(\"/Checkout/PlaceOrder/Errors/Intro\") + \": \";\r\n const message = errors.reduce((acc, cur) => acc + '\\n' + cur, intro);\r\n dispatch(notifyError(message));\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst CheckoutCompleteContainer = connect(mapCheckoutCompleteStateToProps, mapCheckoutCompleteDispatchToProps)(CheckoutComplete)\r\n\r\nexport default CheckoutCompleteContainer\r\n","import React from 'react'\r\nimport { CheckoutSection, formatMoney } from '../../components'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport styles from './checkout.module.css';\r\n\r\nconst spinnerSpan = ;\r\n\r\nconst CheckoutSummary = (\r\n {\r\n summary: {\r\n ShippingMethod,\r\n ShippingTotal,\r\n SubTotal,\r\n Total,\r\n Currency,\r\n TaxTotal,\r\n DiscountTotal\r\n },\r\n isRefreshing\r\n }) => {\r\n const formatCurrency = formatMoney(Currency);\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {formatCurrency(SubTotal)}\r\n
\r\n {ShippingTotal != null &&\r\n \r\n \r\n {ShippingTotal === 0 ? \"Free\" : formatCurrency(ShippingTotal || 0)}\r\n
\r\n }\r\n {TaxTotal != null &&\r\n \r\n \r\n {formatCurrency(TaxTotal)}\r\n
}\r\n {DiscountTotal != null && DiscountTotal > 0 &&\r\n \r\n \r\n {formatCurrency(-DiscountTotal)}\r\n
}\r\n \r\n \r\n {formatCurrency(Total)}\r\n
\r\n {translateResourceString(\"/Checkout/ShippingMethod/NoShippingMethodsAvailable\")}
}\r\n\r\n {shippingOptions.map(sm => (\r\n \r\n
\r\n \r\n {sm.Description}\r\n
\r\n \r\n ))}\r\n \r\n {translateResourceString(\"/Checkout/PaymentInformation/Braintree/AlreadyAuthorizedStartOver\")} \r\n \r\n
);\r\n } else {\r\n content = (\r\n \r\n \r\n {this.state.btInitializing &&\r\n this.props.onPurchaseOrderChange(e)}\r\n value={this.props.poNumber}\r\n />\r\n this.onClickSuccess(e)}\r\n onKeyPress={e => e.key === \"Enter\" && this.onClickSuccess()}\r\n style={{ marginRight: 20 }}\r\n tabIndex={0}\r\n >\r\n {translateResourceString(\"/Checkout/PaymentInformation/Braintree/UseMethodButton\")}\r\n \r\n this.onPaymentCancel(e)}\r\n tabIndex={0}\r\n >\r\n {translateResourceString(\"/Checkout/PaymentInformation/Braintree/CancelButton\")}\r\n \r\n
\r\n )\r\n }\r\n return (\r\n \r\n }\r\n \r\n
\r\n {content}\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapBraintreePaymentStateToProps = (state, ownProps) => {\r\n const settings = state.constants.braintreeSettings;\r\n const entities = state.entities;\r\n const addresses = entities.Addresses;\r\n const summary = entities.Summary;\r\n\r\n return {\r\n settings,\r\n amount: summary.TotalRemaining,\r\n billingAddress: addresses.filter(a => a.Id === entities.SelectedBillingAddressId)[0],\r\n braintreeClientTokenEndpoint: state.constants.navigation.braintreeClientTokenEndpoint,\r\n braintreePaymentId: settings.braintreePaymentId,\r\n placeOrderDetails: mapStateToPlaceOrderDetails(state),\r\n BraintreePaymentNonce: state.entities.PaymentRecord.BraintreePaymentNonce,\r\n ...ownProps\r\n }\r\n};\r\n\r\nconst mapBraintreePaymentDispatchToProps = (dispatch, ownProps) => {\r\n return {\r\n onBraintreeLoadTimeout: () => dispatch(notifyError(translateResourceString(\"/Checkout/PaymentInformation/Braintree/FailedToLoad\"),\r\n `Braintree form load timed out after ${braintreeLoadTimeoutDuration}ms`)),\r\n onClientTokenFailed: (canRetry, serverMessage) => {\r\n const retryMessage = (canRetry) ? translateResourceString(\"/Checkout/PaymentInformation/Braintree/ErrorSecondPartReload\") : translateResourceString(\"/Checkout/PaymentInformation/Braintree/ErrorSecondPartContactService\");\r\n const text = `${translateResourceString(\"/Checkout/PaymentInformation/Braintree/ErrorFirstPart\")} ${retryMessage}`;\r\n dispatch(notifyError(text, `message from server: \"${serverMessage}\"`));\r\n },\r\n onCreateDropinError: (text, diagnosticText) => dispatch(notifyError(text, diagnosticText)),\r\n logDevError: (text) => dispatch(logError(text)),\r\n onSuccesfulRequest: (payload, braintreePaymentId) => {\r\n ownProps.onPaymentIsValid();\r\n dispatch(selectPaymentOption(braintreePaymentId, \"Braintree\"));\r\n dispatch(updateBraintreePaymentData(payload));\r\n },\r\n onSuccessNoDropin: (text, diagnosticText) => dispatch(notifyError(text, diagnosticText)),\r\n onStartOver: () => ownProps.onPaymentCancel(),\r\n onPurchaseOrderChange: (e) => (e && e.target && dispatch(updatePurchaseOrderNumber(e.target.value)))\r\n };\r\n};\r\n\r\nconst BraintreePaymentComponentWrapper = connect(mapBraintreePaymentStateToProps, mapBraintreePaymentDispatchToProps)(BraintreePaymentComponent)\r\n\r\nexport default BraintreePaymentComponentWrapper","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport { updatePurchaseOrderNumber } from './paymentMethodActionCreators'\r\n\r\nimport { Fade } from '../../componentAnimations'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst PurchaseOrderComponent = ({\r\n poNumber,\r\n selected,\r\n onChange,\r\n placeholder = translateResourceString(\"/Checkout/PaymentInformation/Purchase/PONumberPlaceholder\"),\r\n onPaymentIsValid\r\n}) => (\r\n \r\n (e.key === \"Enter\" && onPaymentIsValid(e)) || onChange(e)}\r\n value={poNumber}\r\n />\r\n
\r\n \r\n
\r\n \r\n )\r\n } else {\r\n return (\r\n
\r\n \r\n \r\n {translateResourceString(\"/Checkout/PaymentInformation/CancelButton\")}\r\n
\r\n }\r\n \r\n \r\n {translateResourceString(\"/Checkout/PaymentInformation/SecurePayment\")}\r\n
\r\n\r\n {\r\n this.props.selectedPaymentOptionId &&\r\n No payment method available
\r\n }\r\n\r\n \r\n {items}\r\n
\r\n {this.props.selectedPaymentOptionId &&\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nCheckoutNavigation.propTypes = {\r\n onPaymentScreen: PropTypes.bool,\r\n onShippingScreen: PropTypes.bool,\r\n cartLink: PropTypes.string\r\n}\r\n\r\nconst mapCheckoutNavigationStateToProps = (state) => {\r\n return {\r\n onPaymentScreen: state.ui.onPaymentScreen,\r\n onShippingScreen: !!!state.ui.onPaymentScreen,\r\n cartLink: state.constants.navigation.shoppingCartUrl,\r\n };\r\n}\r\n\r\nconst mapCheckoutNavigationDispatchToProps = (dispatch) => {\r\n return {\r\n onToPayment: () => {\r\n dispatch(dismissAllMessages());\r\n dispatch(toPayment());\r\n },\r\n onToShipping: () => {\r\n dispatch(dismissAllMessages());\r\n dispatch(toShipping());\r\n }\r\n }\r\n}\r\n\r\nconst CheckoutNavigationContainer = connect(mapCheckoutNavigationStateToProps, mapCheckoutNavigationDispatchToProps)(CheckoutNavigation);\r\n\r\nexport default CheckoutNavigationContainer","import {\r\n TO_PAYMENT,\r\n TO_SHIPPING\r\n } from '../../GlobalStateContainer'\r\n \r\n\r\n export function toPayment() {\r\n return {type: TO_PAYMENT}\r\n }\r\n \r\n export function toShipping() {\r\n return {type: TO_SHIPPING}\r\n }\r\n\r\n export function continueCheckout() {\r\n return {type: TO_PAYMENT}\r\n }","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\n\r\nclass CheckoutContinue extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.onContinueClick = this.onContinueClick.bind(this);\r\n }\r\n\r\n onContinueClick() {\r\n this.props.onContinueClick(this.props.placeOrderDetails);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {!!!this.props.onPaymentScreen &&\r\n this.onContinueClick(e)}\r\n >\r\n {this.props.continueButtonText}\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nCheckoutContinue.propTypes = {\r\n continueButtonText: PropTypes.string.isRequired,\r\n placeOrderDetails: PropTypes.object.isRequired,\r\n additionalClassname: PropTypes.string,\r\n onContinueClick: PropTypes.func,\r\n onPaymentScreen: PropTypes.bool,\r\n}\r\n\r\nexport default CheckoutContinue;\r\n","import { connect } from 'react-redux'\r\n\r\nimport { notifyError, dismissAllMessages, notifyWarning } from '../UserMessaging'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport { continueCheckout } from './navigationActionCreators';\r\nimport { mapStateToContinueOrderDetails } from './mapStateToContinueOrderDetails'\r\n\r\nimport { validate } from '../Validation/OrderDetailsValidation'\r\nimport { orderCanContinueValidators } from '../Validation/OrderValidators';\r\nimport { formatMoney } from '../../components'\r\nimport CheckoutContinue from './CheckoutContinue'\r\n\r\nimport {\r\n selectPaymentOption\r\n} from '../PaymentMethod/paymentMethodActionCreators'\r\n\r\nconst mapCheckoutContinueStateToProps = (state, ownProps) => {\r\n var placeOrderDetails = mapStateToContinueOrderDetails(state);\r\n placeOrderDetails.constants = state.constants; // Hack on the constants object so we can see what constant values are when we validate\r\n \r\n return {\r\n continueButtonText: translateResourceString(\"/Checkout/Continue/ContinueToPayment\"),\r\n placeOrderDetails: placeOrderDetails,\r\n onPaymentScreen: state.ui.onPaymentScreen,\r\n ...ownProps\r\n }\r\n }\r\n \r\n const orderDetailsCanContinue = (orderDetails) => validate(orderDetails, orderCanContinueValidators);\r\n \r\nconst allowPurchaseOrder = (subTotal, minimumCartValueForPO) => {\r\n return subTotal >= minimumCartValueForPO;\r\n};\r\nconst blockPurhcaseOrderforStopworkshop = (IsStopWorkshop) => {\r\n return IsStopWorkshop;\r\n};\r\n\r\n\r\n\r\n const mapCheckoutContinueDispatchToProps = (dispatch) => {\r\n return {\r\n onContinueClick: (placeOrderDetails) => {\r\n dispatch(dismissAllMessages());\r\n const errors = orderDetailsCanContinue(placeOrderDetails);\r\n if(errors.length === 0) {\r\n dispatch(continueCheckout());\r\n const isPurchaseOrderAllowed = allowPurchaseOrder(placeOrderDetails.SubTotal, placeOrderDetails.constants.minimumCartValueForPO);\r\n if (!isPurchaseOrderAllowed) {\r\n const formatCurrency = formatMoney(placeOrderDetails.Currency);\r\n dispatch(notifyWarning(translateResourceString(\"/Checkout/PaymentInformation/MinimumCartValueForPOMessage\").replace(\"{0}\", formatCurrency(placeOrderDetails.constants.minimumCartValueForPO))));\r\n }\r\n const isStopworkpoblock = blockPurhcaseOrderforStopworkshop(placeOrderDetails.IsStopWorkshop);\r\n if (isStopworkpoblock) {\r\n dispatch(notifyWarning(translateResourceString(\"/Checkout/PaymentInformation/StopWorksupportMessage\").replace(\"{0}\")));\r\n }\r\n\r\n const filteredPaymentOptions = placeOrderDetails.PaymentOptions && placeOrderDetails.PaymentOptions.filter(po => po.Name !== \"Purchase Order\" || (isPurchaseOrderAllowed && !isStopworkpoblock));\r\n if (filteredPaymentOptions && filteredPaymentOptions.length === 1) {\r\n const paymentOption = filteredPaymentOptions[0];\r\n dispatch(selectPaymentOption(paymentOption.Id, paymentOption.Name));\r\n }\r\n\r\n } else {\r\n const intro = translateResourceString(\"/Checkout/Continue/Errors/Intro\") + \": \";\r\n const message = errors.reduce((acc, cur) => acc + '\\n' + cur, intro);\r\n dispatch(notifyError(message));\r\n }\r\n }\r\n }\r\n }\r\n \r\n const CheckoutContinueContainer = connect(mapCheckoutContinueStateToProps, mapCheckoutContinueDispatchToProps)(CheckoutContinue);\r\n \r\n export default CheckoutContinueContainer\r\n","import find from 'lodash/find'\r\n\r\nexport const mapStateToContinueOrderDetails = (state) => {\r\n const entities = state.entities;\r\n const shippingAddress = find(entities.Addresses, a => a.Id === entities.SelectedShippingAddressId);\r\n const billingAddress = (state.ui.useShippingForBilling)\r\n ? shippingAddress\r\n : find(entities.Addresses,\r\n address =>\r\n address.Id === entities.SelectedBillingAddressId\r\n && entities.BillingAddresses.includes(address.Id));\r\n const shippingOption = entities.ShippingOptions.filter(so => so.Id === entities.SelectedShippingOptionId)[0];\r\n return {\r\n SelectedShippingAddress: shippingAddress,\r\n SelectedBillingAddress: billingAddress,\r\n SelectedShippingOption: state.entities.CartItems.some(item => item.IsPhysical && item.IsStopWorkshop) ? state.entities.CartItems.some(item => item.IsPhysical && item.IsStopWorkshop) : shippingOption,\r\n Coupons: state.entities.Coupons,\r\n BillingEqualsShipping: state.ui.useShippingForBilling,\r\n Total: state.entities.Summary.Total,\r\n SubTotal: state.entities.Summary.SubTotal,\r\n PartnerIds: state.entities.Coupons.length > 0 ? state.entities.Coupons.filter(c => c.IsPartnerIdDiscount && c.Description).map(c => c.Description) : null,\r\n TermsAndConditions: state.ui.termsAndConditions, \r\n IsPartnerIdRequired: state.entities.CartItems.some(item => item.RequiresPartnerId),\r\n IsShippingRequired: state.entities.CartItems.some(item => item.IsPhysical ),\r\n IsTermsAndConditionsRequired: state.entities.CartItems.some(item => item.IsLicense) || state.entities.CartItems.some(item => item.IsStopWorkshop),\r\n PaymentOptions: state.entities.PaymentOptions,\r\n Currency: state.entities.Summary.Currency,\r\n RequiredPartnerIds: state.entities.RequiredPartnerIds,\r\n SelectedProduct: state.entities.CartItems.length > 1 && state.entities.CartItems.some(item => item.IsStopWorkshop),\r\n IsStopWorkshop: state.entities.CartItems.some(item => item.IsStopWorkshop)\r\n \r\n };\r\n}\r\n\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nimport { checkTermsAndConditions, unCheckTermsAndConditions } from './termsAndCondtionsActionCreators';\r\n\r\n\r\nclass CheckoutTermsAndCondtions extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.toggleTermsAndCondtions = this.toggleTermsAndCondtions.bind(this);\r\n }\r\n\r\n toggleTermsAndCondtions() {\r\n if (this.props.termsAndConditions) this.props.unCheckTermsAndConditions();\r\n else this.props.checkTermsAndConditions();\r\n }\r\n\r\n render() {\r\n const termsUrl = this.props.IsStopWorkshop\r\n ? \"https://www.consultdss.com/490e69/globalassets/assets/documents/terms-and-conditions-virtual-workshop.pdf\" \r\n : \"https://www.consultdss.com/4aa943/globalassets/assets/documents/dssplus-streaming-user-agreement-2024.pdf\";\r\n return (\r\n \r\n \r\n \r\n I accept the \r\n Terms & Conditions\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nCheckoutTermsAndCondtions.propTypes = {\r\n termsAndConditions: PropTypes.bool,\r\n hidden: PropTypes.bool\r\n}\r\n\r\nconst mapCheckoutTermsAndCondtionsStateToProps = (state) => {\r\n return {\r\n termsAndConditions: state.ui.termsAndConditions,\r\n // eslint-disable-next-line no-mixed-operators\r\n hidden: state.ui.onPaymentScreen || !!!(state.entities.CartItems && state.entities.CartItems.some(item => item.IsLicense) || state.entities.CartItems.some(item => item.IsStopWorkshop)),\r\n IsStopWorkshop: state.entities.CartItems.some(item => item.IsStopWorkshop)\r\n };\r\n}\r\n\r\nconst mapCheckoutTermsAndCondtionsDispatchToProps = (dispatch) => {\r\n return {\r\n checkTermsAndConditions: () => {\r\n dispatch(checkTermsAndConditions());\r\n },\r\n unCheckTermsAndConditions: () => {\r\n dispatch(unCheckTermsAndConditions());\r\n }\r\n }\r\n}\r\n\r\nconst CheckoutTermsAndCondtionsContainer = connect(mapCheckoutTermsAndCondtionsStateToProps, mapCheckoutTermsAndCondtionsDispatchToProps)(CheckoutTermsAndCondtions);\r\n\r\nexport default CheckoutTermsAndCondtionsContainer\r\n","import {\r\n CHECK_TERMS_CONDITIONS,\r\n UNCHECK_TERMS_CONDITIONS\r\n } from '../../GlobalStateContainer'\r\n \r\n\r\n export function checkTermsAndConditions() {\r\n return {type: CHECK_TERMS_CONDITIONS}\r\n }\r\n \r\n export function unCheckTermsAndConditions() {\r\n return {type: UNCHECK_TERMS_CONDITIONS}\r\n }","import React from 'react'\r\n\r\nfunction CheckoutPromoGiftCard(props) {\r\n console.error(\"NOT IMPLEMENTED: CheckoutGiftCard\");\r\n return ();\r\n}\r\n\r\nexport default CheckoutPromoGiftCard","import React from 'react'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst CheckoutPageHeader = () => (\r\n \r\n \r\n {translateResourceString(\"/Checkout/PageHeader\")}\r\n
\r\n)\r\n\r\nexport default CheckoutPageHeader","import React, { Component } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport $ from 'jquery'\r\nimport { translateResourceString } from '../../util/translationUtility';\r\n\r\nimport { CheckoutCouponContainer } from './Coupon'\r\nimport { CheckoutExpandedCouponContainer } from './Coupon'\r\nimport { CartListContainer } from './Cart'\r\nimport { CheckoutShippingAddress } from './Address'\r\nimport { CheckoutSummaryContainer } from './Summary'\r\nimport { MessagesList } from './UserMessaging'\r\nimport { CheckoutShipment } from './ShippingMethod'\r\nimport { CheckoutPayment } from './PaymentMethod'\r\nimport { CheckoutBillingAddress } from './Address'\r\nimport { CheckoutNavigation, CheckoutContinue } from './Navigation';\r\nimport { CheckoutTermsAndCondtions } from './TermsAndConditions';\r\nimport CheckoutPromoGiftCard from './CheckoutPromoGiftCard'\r\nimport CheckoutPageHeader from '../components/Layout/CheckoutPageHeader';\r\n\r\nclass Components extends Component {\r\n\r\n componentDidMount() {\r\n\r\n // BBS DDD This should be refactored and moved into component animations, or\r\n // a renderProp component\r\n // https://reactjs.org/docs/render-props.html\r\n\r\n let docWidth = 0, docTop = 0;\r\n if (typeof document !== 'undefined' && document.documentElement) {\r\n\r\n docWidth = document.documentElement.clientWidth;\r\n docTop = document.documentElement.getBoundingClientRect().top\r\n } else {\r\n if (typeof window.innerWidth !== 'undefined' && window.innerWidth)\r\n docWidth = window.innerWidth;\r\n }\r\n const minPortWidthPx = 767;\r\n if (docWidth > minPortWidthPx) {\r\n // BBS DDD 2018-02-19 I broke down and used jquery. Yuck.\r\n const affixedElt = document.getElementById('right-summary');\r\n const conteainerElt = document.getElementById('right-summary-container');\r\n affixedElt.setAttribute(\"data-spy\", \"affix\");\r\n const containerClientRect = conteainerElt ? conteainerElt.getBoundingClientRect() : { top: 0, height: 0 };\r\n affixedElt.setAttribute(\"data-offset-top\", containerClientRect.top - docTop);\r\n affixedElt.setAttribute(\"data-offset-bottom\", containerClientRect.top + containerClientRect.height - affixedElt.getBoundingClientRect().height);\r\n let affixedWidth = affixedElt.getBoundingClientRect().width;\r\n affixedElt.style.width = affixedWidth;\r\n $('#right-summary').on('affix.bs.affix', (e) => { e.target.setAttribute('style', `top: 0px; width: ${affixedWidth}px`); });\r\n $('#right-summary').on('affix-top.bs.affix', (e) => { e.target.setAttribute('style', ` width: ${affixedWidth}px`); });\r\n\r\n if (typeof window !== 'undefined' && typeof window.addEventListener !== 'undefined') {\r\n window.addEventListener('resize', (e) => {\r\n // BBS DDD 2018-02-19 This code attempts to resize the width of the affixed\r\n // element when the window resizes, but nothing happens\r\n const hasAffix = affixedElt.classList.contains('affix');\r\n if (hasAffix) {\r\n affixedElt.classList.remove('affix');\r\n affixedElt.classList.add('affix-top');\r\n }\r\n affixedWidth = affixedElt.getBoundingClientRect().width;\r\n if (hasAffix) {\r\n affixedElt.classList.remove('affix-top');\r\n affixedElt.classList.add('affix');\r\n }\r\n })\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n if (this.props.checkoutIsEmpty) {\r\n return (\r\n\r\n
\r\n )\r\n }\r\n return (\r\n \r\n
\r\n {translateResourceString(\"/Checkout/EmptyCartMessage\")}
\r\n \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n checkoutIsEmpty: state.entities.CartItems.length < 1\r\n});\r\n\r\nexport default connect(mapStateToProps)(Components)","import PropTypes from 'prop-types'\r\n\r\nexport const shapeWithIdOfString = PropTypes.shape({Id: PropTypes.string.isRequired});\r\nexport const shapeWithIdOfAny = PropTypes.shape({Id: PropTypes.any.isRequired});\r\nexport const arrayOfShapesWithIdOfString = PropTypes.arrayOf(shapeWithIdOfString);\r\nexport const arrayOfShapesWithIdOfAny = PropTypes.arrayOf(shapeWithIdOfAny);\r\n","// BBS DDD 2020-06-02 TODO: replace lodash usage here. With vanilla js or other lib?\r\nimport uniqBy from 'lodash/uniqBy'\r\nimport find from 'lodash/find'\r\n\r\nimport { BraintreePaymentComponent, PurchaseOrderComponent, EBizChargePaymentComponent } from '../Features/PaymentMethod'\r\nimport { translateResourceString, addResourceStrings } from '../../util/translationUtility';\r\n\r\n// https://lodash.com/docs/4.17.10#uniqBy\r\nconst isAllUniqueValues = (list, iteratee = x => x) => {\r\n const len = list.length;\r\n const uniqLength = uniqBy(list, iteratee).length;\r\n return len === uniqLength;\r\n}\r\n\r\n\r\n//const addressesAreInvalid = (addresses) => {\r\n// if (!isAllUniqueValues(addresses.map(address => address.Id))) {\r\n// console.error('not all Ids unique for ShippingAddresses and BillingAddresses');\r\n// return true;\r\n// }\r\n//}\r\n\r\nconst paymentOptionsAreInvalid = (paymentOptions) => {\r\n if (!isAllUniqueValues(paymentOptions, po => po.Id)) {\r\n console.error('not all Ids unique for PaymentOptions');\r\n return true;\r\n }\r\n}\r\n\r\nconst cartItemsAreInvalid = (cartItems) => {\r\n if (!isAllUniqueValues(cartItems, ci => ci.Id)) {\r\n console.error('not all Ids unique for CartItems');\r\n return true;\r\n }\r\n}\r\n\r\n// Perhaps https://validatejs.org/ would be useful here\r\nconst initialDataIsInvalid = (initialData) => {\r\n if (paymentOptionsAreInvalid(initialData.PaymentOptions)) {\r\n return true;\r\n }\r\n if (cartItemsAreInvalid(initialData.CartItems)) {\r\n return true;\r\n }\r\n}\r\n\r\nconst mapTopLevelPropsToInitialStoreState = props => {\r\n // validate\r\n if (initialDataIsInvalid(props.initialData)) {\r\n return {};\r\n }\r\n\r\n addResourceStrings(props.localizationItems);\r\n\r\n // Add controls to payment if they have one\r\n const paymentOptions = props.initialData.PaymentOptions.map(po => {\r\n if (po.Id === props.BraintreeClientSettings.BraintreePaymentOptionId) {\r\n po.paymentOptionComponent = BraintreePaymentComponent;\r\n } else if (po.Id === props.purchaseOrderPaymentId) {\r\n po.paymentOptionComponent = PurchaseOrderComponent;\r\n } else if (po.Id === props.eBizChargePaymentMethodId) {\r\n po.paymentOptionComponent = EBizChargePaymentComponent;\r\n }\r\n return po;\r\n });\r\n\r\n const allowBillingEqualsShipping = props.initialData.AllowBillingEqualsShipping;\r\n const selectedShippingAddressId = props.initialData.SelectedShippingAddressId;\r\n const selectedBillingAddressId = (allowBillingEqualsShipping && selectedShippingAddressId)\r\n ? (selectedShippingAddressId)\r\n : (props.initialData.BillingAddresses[0] && props.initialData.BillingAddresses[0].Id);\r\n return {\r\n // BBS DDD 2017-11-19 The state of the ui. Make all ui updates here.\r\n ui: {\r\n PhoneNumber: props.initialData.PhoneNumber,\r\n PhoneText: props.initialData.PhoneText,\r\n useShippingForBilling: allowBillingEqualsShipping &&\r\n selectedBillingAddressId === selectedShippingAddressId,\r\n messages: [],\r\n completeCheckoutButtonText: \"Place Order\",\r\n isPlaceOrderPending: false,\r\n onPaymentScreen: false,\r\n termsAndConditions: true\r\n },\r\n // BBS DDD 2017-11-19 The state of the checkout. Make all business\r\n // updates here\r\n entities: {\r\n Addresses: props.initialData.BillingAddresses.concat(props.initialData.ShippingAddresses),\r\n BillingAddresses: props.initialData.BillingAddresses.map(addr => addr.Id),\r\n SelectedBillingAddressId: selectedBillingAddressId,\r\n ShippingAddresses: props.initialData.ShippingAddresses.map(addr => addr.Id),\r\n SelectedShippingAddressId: props.initialData.SelectedShippingAddressId,\r\n CartItems: props.initialData.CartItems,\r\n Coupons: props.initialData.CouponViewModels,\r\n PaymentOptions: paymentOptions,\r\n SelectedPaymentOptionId: '',\r\n ShippingOptions: props.initialData.ShippingOptions,\r\n isRefreshingShippingOptions: false,\r\n SelectedShippingOptionId: props.initialData.SelectedShippingMethodId,\r\n Summary: {\r\n Total: 0,\r\n SubTotal: 0,\r\n ShippingTotal: null,\r\n Currency: 'USD',\r\n TotalRemaining: 0,\r\n DiscountTotal: 0\r\n },\r\n isRefreshingSummary: true,\r\n PaymentRecord: {},\r\n EBizChargePaymentWebFormUrl: null,\r\n FetchingEBizChargePaymentWebFormUrl: false,\r\n EBizChargePaymentWebFormError: false,\r\n RequiredPartnerIds: props.initialData.RequiredPartnerIds\r\n },\r\n // BBS DDD 2017-11-19 Data definitions and other things\r\n constants: {\r\n // Locations of server resources\r\n navigation: {\r\n MyAccountLink: '',\r\n checkoutUrl: props.checkoutUrl,\r\n ReceiptUrl: props.initialData.ReceiptUrl,\r\n addCouponEndpoint: props.addCouponEndpoint,\r\n removeCouponEndpoint: props.removeCouponEndpoint,\r\n couponsEndpoint: props.couponsEndpoint,\r\n addAddressEndpoint: props.addAddressEndpoint,\r\n deleteAddressEndpoint: props.deleteAddressEndpoint,\r\n cartSummaryEndpoint: props.cartSummaryEndpoint,\r\n braintreeClientTokenEndpoint: props.braintreeClientTokenEndpoint,\r\n placeOrderEndpoint: props.placeOrderEndpoint,\r\n orderConfirmationUrl: props.orderConfirmationUrl,\r\n updateItemQuantityEndpoint: props.updateQuantityEndpoint,\r\n deleteItemEndpoint: props.deleteItemEndpoint,\r\n refreshShippingOptionsEndpoint: props.refreshShippingOptionsEndpoint,\r\n setShippingMethodEndpoint: props.setShippingMethodEndpoint,\r\n eBizChargeWebFormUrlEndpoint: props.eBizChargeWebFormUrlEndpoint,\r\n shoppingCartUrl: props.shoppingCartUrl,\r\n setShippingAddressEndpoint: props.setShippingAddressEndpoint,\r\n setBillingAndShippingAddressEndpoint: props.setBillingAndShippingAddressEndpoint,\r\n titlesIncludedInLicenseEndpoint: props.titlesIncludedInLicenseEndpoint,\r\n requiredPartnerIdsEndpoint: props.requiredPartnerIdsEndpoint,\r\n },\r\n ShippingAddressType: props.ShippingAddressType,\r\n BillingAddressType: props.BillingAddressType,\r\n allowAddingBillingAddresses: props.allowAddingBillingAddresses,\r\n allowAddingShippingAddresses: props.allowAddingShippingAddresses,\r\n countriesStatesMap: props.countriesStatesMap,\r\n countries: props.countries,\r\n braintreeSettings: {\r\n usePaypal: props.BraintreeClientSettings.BraintreePaypalEnabled,\r\n usePaypalCredit: props.BraintreeClientSettings.BraintreePaypalCreditEnabled,\r\n braintreePaypalFlow: props.BraintreeClientSettings.BraintreePaypalFlow,\r\n braintreePaymentId: props.BraintreeClientSettings.BraintreePaymentOptionId,\r\n },\r\n allowBillingEqualsShipping: props.initialData.allowBillingEqualsShipping,\r\n purchaseOrderPaymentId: props.purchaseOrderPaymentId,\r\n allowEditingBillingAddresses: props.allowEditingBillingAddresses,\r\n allowEditingShippingAddresses: props.allowEditingShippingAddresses,\r\n allowCoupons: true,\r\n eBizChargePaymentMethodId: props.eBizChargePaymentMethodId,\r\n allowedOrigin: props.allowedOrigin,\r\n billingAddressTooltip: props.billingAddressTooltip,\r\n partnerIdTooltip: props.partnerIdTooltip,\r\n minimumCartValueForPO: props.minimumCartValueForPO,\r\n }\r\n }\r\n}\r\n\r\n\r\nexport default mapTopLevelPropsToInitialStoreState\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { createStore, applyMiddleware } from 'redux'\r\nimport { Provider } from 'react-redux'\r\nimport thunkMiddleware from 'redux-thunk'\r\nimport { createLogger } from 'redux-logger'\r\nimport { composeWithDevTools } from 'redux-devtools-extension'\r\n\r\nimport { checkoutApp } from './GlobalStateContainer'\r\nimport CheckoutComponents from './Features/CheckoutComponents'\r\nimport { countriesStatesMap } from './Features/Address/propTypes'\r\nimport {\r\n arrayOfShapesWithIdOfString,\r\n arrayOfShapesWithIdOfAny \r\n} from '../util/propTypeShapes'\r\n\r\nimport mapTopLevelPropsToInitialStoreState from './GlobalStateContainer/mapTopLevelPropsToInitialStore'\r\n\r\n// props should contain all data we want to initialize the app with\r\nclass Checkout extends React.Component{\r\n constructor(props) {\r\n super(props);\r\n \r\n let initialStoreState = mapTopLevelPropsToInitialStoreState(props);\r\n\r\n // Create store\r\n this.store = createStore(\r\n checkoutApp,\r\n initialStoreState,\r\n // Initialize cr\r\n composeWithDevTools(\r\n applyMiddleware(\r\n // Setup library to help with async actions\r\n thunkMiddleware,\r\n // Setup console action logger middleware\r\n createLogger()\r\n )));\r\n\r\n }\r\n\r\n // Make Store available to components, and instantiate checkout components\r\n render() {\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n {ImageUrl &&\r\n
\r\n \r\n );\r\n}\r\n\r\n\r\nArticle.propType = {\r\n Link: PropTypes.string,\r\n Title: PropTypes.string,\r\n Description: PropTypes.string,\r\n ImageUrl: PropTypes.string,\r\n onClick: PropTypes.func\r\n};\r\n\r\nexport default Article;\r\n","import React from 'react';\r\nimport {Button} from 'reactstrap';\r\nimport PropTypes from 'prop-types';\r\nimport { translateResourceString } from '../../util/translationUtility';\r\n\r\nconst MoreButton = ({onClick}) => \r\n\r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {CategoryDisplayName}
\r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nFacet.propTypes = {\r\n name: PropTypes.string.isRequired,\r\n displayName: PropTypes.string.isRequired,\r\n values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n })).isRequired,\r\n onAttributeChange: PropTypes.func,\r\n expanded: PropTypes.bool,\r\n onToggleFacetExpanded: PropTypes.func,\r\n updateOnToggle: PropTypes.bool,\r\n showMore: PropTypes.bool,\r\n onToggleShowMore: PropTypes.func,\r\n};\r\n\r\nexport default Facet;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Facet from './Facet';\r\n\r\nconst Facets = ({\r\n attributes,\r\n onAttributeChange,\r\n onClearAttributes,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n updateOnToggle,\r\n showMoreFacets,\r\n onToggleShowMoreFacet\r\n}) => \r\n disableToggle ? false : onToggleFacetExpanded(name)}>\r\n \r\n {displayName}\r\n \r\n {symbol}\r\n
\r\n \r\n\r\n {values.slice(0, sizeToShow).map((value, k) => {\r\n const key = `${name}-${k}`;\r\n const checkedCss = value.Checked ? 'bold' : 'normal';\r\n return (\r\n
\r\n\r\n \r\n {\r\n // value.Checked = !value.Checked;\r\n onAttributeChange(name, value.Name);\r\n }}\r\n />\r\n \r\n
\r\n )\r\n })\r\n }\r\n {showShowMore && onToggleShowMore(name)}>{translateResourceString(\"/SearchApp/Attributes/ShowMore\")}}\r\n \r\n {\r\n attributes.map((attribute, i) => {\r\n const expanded = expandedFacets.indexOf(attribute.Name) > -1;\r\n const showMore = showMoreFacets.indexOf(attribute.Name) > -1;\r\n return (\r\n
\r\n }\r\n \r\n
\r\n );\r\n })\r\n }\r\n \r\n
\r\n\r\n return (\r\n \r\n {selectedAttributes.length > 0\r\n ?\r\n \r\n \r\n :\r\n
\r\n );\r\n }\r\n};\r\n\r\nPaginationContainer.propTypes = {\r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentSortByChange: PropTypes.func,\r\n onCurrentPageIndexChange: PropTypes.func,\r\n selectedCategory: PropTypes.shape({\r\n DisplayName: PropTypes.string,\r\n }),\r\n onSelectCategory: PropTypes.func\r\n};\r\n\r\nexport default PaginationContainer;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport WithClickTracking from '../../components/WithClickTracking';\r\nimport Article from './Article';\r\nimport MoreButton from '../../components/MoreButton';\r\nimport DropdownOption from '../../components/DropdownOption';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport Facets from '../Facets/Facets';\r\nimport PaginationContainer from \"../Pagination/PaginationContainer\";\r\n\r\nclass ArticleSearchResultsContainer extends React.Component {\r\n render() {\r\n const { articles,\r\n paginationViewModel,\r\n onCurrentItemsPerPageChange,\r\n //onCurrentPageIndexChange,\r\n onResultClick,\r\n searchString,\r\n onToggleFacetExpanded,\r\n onToggleShowMoreFacet,\r\n showMoreFacets,\r\n attributes,\r\n onAttributeChange,\r\n expandedArticleFacets,\r\n onCurrentSortByChange} = this.props;\r\n const perMoreAmount = 9;\r\n const nextRequest = Math.min(paginationViewModel.CurrentItemsOnPage + perMoreAmount, paginationViewModel.ResultsTotal);\r\n const showMore = paginationViewModel.ResultsTotal > paginationViewModel.CurrentItemsOnPage;\r\n let article_sort_options = [\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/Recency/Display\"), 'Recency', translateResourceString(\"/SearchApp/SortOptions/Recency/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameAZ/Display\"), 'NameAZ', translateResourceString(\"/SearchApp/SortOptions/NameAZ/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameZA/Display\"), 'NameZA', translateResourceString(\"/SearchApp/SortOptions/NameZA/FullDisplay\")),\r\n ]\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {sortBy}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n \r\n {sortBy}\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nconst ArticleWithClickTracking = WithClickTracking(Article);\r\n\r\nArticleSearchResultsContainer.propType = {\r\n articles: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Title: PropTypes.string,\r\n Link: PropTypes.string,\r\n Description: PropTypes.string,\r\n ImageUrl: PropTypes.string\r\n })\r\n ),\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n paginationViewModel: PropTypes.shape({\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsOnPage: PropTypes.number,\r\n CurrentSortBy: PropTypes.string\r\n }),\r\n onPerPageChange: PropTypes.func,\r\n onToggleShowMoreFacet: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n onPageChange: PropTypes.func\r\n};\r\n\r\nexport default ArticleSearchResultsContainer;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport ArticleSearchResultsContainer from './ArticleSearchResultsContainer';\r\nimport {translateResourceString} from \"../../../util/translationUtility\";\r\n\r\nconst ArticleSearchResults = ({ articles,\r\n paginationViewModel,\r\n onCurrentItemsPerPageChange,\r\n onCurrentPageIndexChange,\r\n onResultClick,\r\n searchString,\r\n attributes,\r\n onAttributeChange,\r\n expandedArticleFacets,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n onToggleFacetExpanded,\r\n onCurrentSortByChange }\r\n) => {\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {showMore &&\r\n \r\n }\r\n \r\n {articles.map((article, i) => {\r\n return (\r\n
\r\n \r\n {articles.length > 0 &&\r\n
\r\n );\r\n};\r\n\r\nArticleSearchResults.propType = {\r\n articles: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Title: PropTypes.string,\r\n Link: PropTypes.string,\r\n Description: PropTypes.string\r\n })\r\n ),\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n paginationViewModel: PropTypes.shape({\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsOnPage: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentPageIndexChange: PropTypes.func,\r\n onAttributeChange: PropTypes.func,\r\n onResultClick: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func\r\n};\r\n\r\nexport default ArticleSearchResults;\r\n","import React from 'react';\r\nimport Dropdown from './Dropdown';\r\nimport DropdownOption from './DropdownOption';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst PRODUCTS_PER_PAGE_OPTIONS = [\r\n new DropdownOption(12,12),\r\n new DropdownOption(24,24),\r\n new DropdownOption(48,48),\r\n new DropdownOption(96,96)\r\n];\r\n\r\nconst PerPageDropdown = ({CurrentItemsPerPage, onCurrentItemsPerPageChange}) => {\r\n \r\n const found = PRODUCTS_PER_PAGE_OPTIONS.find(option => {\r\n return option.value === CurrentItemsPerPage;\r\n });\r\n\r\n const selectedPerPage = found ? found : PRODUCTS_PER_PAGE_OPTIONS[0];\r\n \r\n return (\r\n \r\n
\r\n );\r\n }\r\n};\r\n\r\nPaginationContainer.propTypes = {\r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentSortByChange: PropTypes.func,\r\n onCurrentPageIndexChange: PropTypes.func\r\n};\r\n\r\nexport default PaginationContainer;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nclass ProductTile extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n const {\r\n name,\r\n url,\r\n priceViewModel,\r\n image,\r\n onClick,\r\n description,\r\n formats,\r\n languages\r\n } = this.props;\r\n\r\n const imageUrl = image?.Url;\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {imageUrl &&\r\n
\r\n );\r\n }\r\n}\r\n\r\n\r\nProductTile.propTypes = {\r\n name: PropTypes.string,\r\n url: PropTypes.string,\r\n priceViewModel: PropTypes.shape({\r\n RegularPrice: PropTypes.number,\r\n SalePrice: PropTypes.number,\r\n IsSalePrice: PropTypes.bool\r\n }),\r\n image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n description: PropTypes.string,\r\n formats: PropTypes.string,\r\n languages: PropTypes.string\r\n};\r\n\r\nexport default ProductTile;\r\n","import React from 'react';\r\nimport ProductTile from './ProductTile';\r\nimport PropTypes from 'prop-types';\r\nimport WithClickTracking from '../../components/WithClickTracking';\r\n\r\nconst ProductTileWithClickTracking = WithClickTracking(ProductTile);\r\n\r\nconst ProductTileContainer = ({ products, onResultClick }) =>\r\n \r\n
\r\n }\r\n \r\n
\r\n {name}
\r\n \r\n \r\n\r\n {formats &&\r\n
\r\n {translateResourceString(\"/SearchApp/ProductTile/Format\")} {formats}
\r\n }\r\n {languages &&\r\n {translateResourceString(\"/SearchApp/ProductTile/Language\")} {languages}
\r\n }\r\n \r\n {products.map((product, i) => {\r\n return (\r\n
;\r\n\r\nProductTileContainer.propTypes = {\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string,\r\n Formats: PropTypes.arrayOf(PropTypes.string),\r\n Languages: PropTypes.arrayOf(PropTypes.string)\r\n }))\r\n};\r\n\r\nexport default ProductTileContainer;","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nclass MobileSelectedFacets extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n componentDidMount() {\r\n }\r\n\r\n render() {\r\n const { attributes, onAttributeChange, onClearAttributes } = this.props;\r\n\r\n const selectedAttributeValueArrays = attributes.map(function (attribute) {\r\n return attribute.Values.filter(\r\n value => value.Checked).map(value => {\r\n return {\r\n attributeName: attribute.Name,\r\n attributeValueName: value.Name\r\n };\r\n });\r\n });\r\n\r\n const mergedAttributeValueArrays = [].concat.apply([], selectedAttributeValueArrays);\r\n const showMobileSelectedFacets = mergedAttributeValueArrays.length > 0;\r\n\r\n return (\r\n \r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n {showMobileSelectedFacets &&\r\n \r\n \r\n : \r\n \r\n );\r\n};\r\n\r\nWishlistsTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n IsActive: PropTypes.bool,\r\n ToggleEditListModal: PropTypes.func\r\n};\r\n\r\nexport default WishlistsTab;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst NewListModalLink = ({\r\n ToggleNewListModal\r\n}) => {\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nNewListModalLink.propType = {\r\n ToggleNewListModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default NewListModalLink;\r\n","import React from 'react'\r\nimport { TabList } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport WishlistsTab from './WishlistsTab'\r\nimport NewListModalLink from './Features/NewList/NewListModalLink';\r\n\r\nconst WishlistsTabList = ({\r\n Lists = [],\r\n ToggleNewListModal,\r\n ToggleEditListModal,\r\n ActiveTabIndex\r\n}) => {\r\n return (\r\n ToggleNewListModal(false)} centered={true} contentClassName=\"list-modal new-list-modal form-gray p-0\" role=\"document\">\r\n ToggleNewListModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">\r\n Create a List\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nNewListModal.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string\r\n })\r\n ).isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n IsOpen: PropTypes.bool.isRequired,\r\n ToggleNewListModal: PropTypes.func.isRequired,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default NewListModal;\r\n","import React from 'react'\r\nimport { Tab } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst ModalTab = ({ \r\n Name, \r\n IsActive \r\n}) => {\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nModalTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n IsActive: PropTypes.bool\r\n};\r\n\r\nexport default ModalTab;","import React from 'react'\r\nimport { TabList } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport ModalTab from './ModalTab'\r\nimport NewListInput from '../../Components/NewListInput'\r\nimport { translateResourceString } from '../../../util/translationUtility'\r\n\r\nconst ModalTabList = ({\r\n Lists = [],\r\n UpdateLists,\r\n ActiveTabIndex,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n \r\n \r\n );\r\n};\r\n\r\nModalTabList.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ActiveTabIndex: PropTypes.number.isRequired,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default ModalTabList;\r\n","import React from 'react'\r\nimport { TabPanel } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport ProductItem from '../../Components/ProductItem'\r\n\r\nconst ModalTabPanels = ({\r\n Lists = []\r\n}) => {\r\n return (\r\n ToggleListsModal(false)}\r\n centered={true}\r\n className=\"modal-lg\"\r\n contentClassName=\"list-modal\"\r\n role=\"document\">\r\n ToggleListsModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">{translateResourceString(\"/Wishlists/ViewAndAddModal/Header\")} \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nModalTab.tabsRole = 'Tab';\r\nModalTabList.tabsRole = 'TabList';\r\nModalTabPanels.tabsRole = 'TabPanel';\r\n\r\nListsModal.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ListsModalIsOpen: PropTypes.bool.isRequired,\r\n ToggleListsModal: PropTypes.func.isRequired,\r\n ActiveTabIndex: PropTypes.number,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default ListsModal;","import React, { useState, useRef } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport axios from 'axios';\r\nimport { translateResourceString } from \"../../../util/translationUtility\";\r\nimport { defaultAxiosCatalystPostConfig, makeAxiosCatalystPostData } from \"../../../util/axiosUtility\";\r\n\r\nconst EditListModal = ({\r\n Lists,\r\n ListName,\r\n UpdateLists,\r\n EditListModalIsOpen,\r\n ToggleEditListModal,\r\n CreateListEndpoint,\r\n RenameListEndpoint,\r\n DeleteListEndpoint,\r\n AddItemEndpoint\r\n}) => {\r\n const newListName = useRef(null)\r\n const [copyListNumber, increaseCopyListNumber] = useState(1)\r\n\r\n const copyName = \" - Copy\"\r\n\r\n const updateAndClose = (list = null) => {\r\n if (list)\r\n UpdateLists(list)\r\n\r\n ToggleEditListModal({\r\n EditListModalIsOpen: false\r\n })\r\n }\r\n\r\n const deleteList = (listName) => {\r\n if (window.confirm('Are you sure you wish to delete this list?')) {\r\n let newList = Lists.filter(x => x.Name !== listName)\r\n updateAndClose(newList)\r\n }\r\n }\r\n\r\n const saveList = (newListName) => {\r\n if (newListName.length !== 0) {\r\n let index = Lists.findIndex(x => x.Name === ListName)\r\n let newList = [...Lists.slice(0, index), { Name: newListName, Items: Lists[index].Items }, ...Lists.slice(index + 1, Lists.length)]\r\n updateAndClose(newList)\r\n }\r\n }\r\n\r\n const Save = (endpoint, oldListName, newListName) => {\r\n axios.post(endpoint, makeAxiosCatalystPostData({\r\n oldListName: oldListName,\r\n newListName: newListName\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n saveList(newListName)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('There is the list with the same name')\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Please check list name')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const Delete = (endpoint, listName) => {\r\n axios.post(endpoint, makeAxiosCatalystPostData({\r\n listName: listName\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n deleteList(listName)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const Copy = (endpoint, listName) => {\r\n\r\n let name = listName + copyName\r\n if (Lists.some(list => list.Name === name)) {\r\n name += ' ' + copyListNumber\r\n increaseCopyListNumber(copyListNumber + 1)\r\n }\r\n let newItems = JSON.parse(JSON.stringify(Lists.filter(list => list.Name === listName)[0].Items))\r\n\r\n axios.post(endpoint, makeAxiosCatalystPostData({\r\n listName: name\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n let skus = {}\r\n newItems.forEach(product => skus[product.SKU] = product.Quantity)\r\n\r\n axios.post(AddItemEndpoint, makeAxiosCatalystPostData({\r\n listName: name,\r\n skus: skus\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n let newList = [{ Name: name, Items: newItems }, ...Lists]\r\n updateAndClose(newList)\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Please check list name')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n case 'Conflict':\r\n case 409:\r\n alert('There is the list with the same name')\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Please check list name')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n return (\r\n updateAndClose()} centered={true} contentClassName=\"edit-modal\" role=\"document\">\r\n updateAndClose()} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">\r\n {translateResourceString(\"/Wishlists/EditModal/Header\")}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nEditListModal.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string\r\n })\r\n ).isRequired,\r\n ListName: PropTypes.string.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n EditListModalIsOpen: PropTypes.bool.isRequired,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n CreateListEndpoint: PropTypes.string.isRequired,\r\n RenameListEndpoint: PropTypes.string.isRequired,\r\n DeleteListEndpoint: PropTypes.string.isRequired,\r\n AddItemEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default EditListModal;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst CopyModalTab = ({ \r\n Name,\r\n CopyProduct\r\n }) => {\r\n return (\r\n CopyProduct(Name)}>\r\n \r\n );\r\n};\r\n\r\nCopyModalTab.propType = {\r\n Name: PropTypes.string.isRequired,\r\n CopyProduct: PropTypes.func\r\n};\r\n\r\nexport default CopyModalTab;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport CopyModalTab from './CopyModalTab'\r\nimport NewListInput from '../../Components/NewListInput'\r\nimport ProductItem from '../../Components/ProductItem'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport axios from 'axios';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\nimport { defaultAxiosCatalystPostConfig, makeAxiosCatalystPostData } from \"../../../util/axiosUtility\";\r\n\r\nconst CopyModal = ({\r\n Lists = [],\r\n UpdateLists,\r\n CopyModalIsOpen,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n ToggleNotification,\r\n CopyItemNotificationText,\r\n MoveItemNotificationText,\r\n AddItemEndpoint,\r\n RemoveItemEndpoint,\r\n CreateListEndpoint\r\n}) => {\r\n\r\n let product = null\r\n const originalListIndex = Lists.findIndex(x => x.Name === ProductCommand.ListId)\r\n if (originalListIndex !== -1) product = Lists[originalListIndex].Items.find(x => x.Id === ProductCommand.ProductId)\r\n\r\n const copyProduct = (targetListName) => {\r\n axios.post(AddItemEndpoint, makeAxiosCatalystPostData({\r\n listName: targetListName,\r\n skus: { [product.SKU]: product.Quantity }\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n const index = Lists.findIndex(x => x.Name === targetListName)\r\n let newItems = []\r\n\r\n if (Lists[index].Items.some(x => x.SKU === product.SKU)) {\r\n let productIndex = Lists[index].Items.findIndex(x => x.SKU === product.SKU)\r\n let existingProduct = Lists[index].Items[productIndex]\r\n existingProduct.Quantity += product.Quantity\r\n newItems = Lists[index].Items;\r\n } else {\r\n // Create a copy of the product so changes don't affect each other.\r\n newItems = [JSON.parse(JSON.stringify(product)), ...Lists[index].Items];\r\n }\r\n\r\n const newList = [\r\n ...Lists.slice(0, index),\r\n {\r\n Name: targetListName,\r\n Items: newItems\r\n },\r\n ...Lists.slice(index + 1, Lists.length)\r\n ]\r\n\r\n closeModal(newList, ProductCommand.RemoveAfter, targetListName)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const addProduct = (targetListName) => {\r\n axios.post(AddItemEndpoint, makeAxiosCatalystPostData({\r\n listName: targetListName,\r\n skus: { [product.SKU]: product.Quantity }\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n const newList = [{\r\n Name: targetListName,\r\n Items: [product]\r\n }, ...Lists]\r\n closeModal(newList, ProductCommand.RemoveAfter, targetListName)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const closeModal = (newList, removeAfter, targetListName) => {\r\n if (removeAfter) {\r\n removeProduct(newList, ProductCommand.ListId)\r\n } else {\r\n UpdateLists(newList)\r\n ToggleCopyModal(false)\r\n }\r\n\r\n ToggleNotification({\r\n IsOpen: true,\r\n Message: removeAfter ? MoveItemNotificationText : CopyItemNotificationText,\r\n TargetListName: targetListName\r\n })\r\n }\r\n\r\n const removeProduct = (newList, listName) => {\r\n axios.post(RemoveItemEndpoint, makeAxiosCatalystPostData({\r\n listName: listName,\r\n sku: product.SKU\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n const listIndex = newList.findIndex(x => x.Name === ProductCommand.ListId)\r\n const list = [\r\n ...newList.slice(0, listIndex),\r\n {\r\n Name: ProductCommand.ListId,\r\n Items: newList[listIndex].Items.filter(x => x.SKU !== product.SKU)\r\n },\r\n ...newList.slice(listIndex + 1, newList.length)\r\n ]\r\n UpdateLists(list)\r\n ToggleCopyModal(false)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n return (\r\n ToggleCopyModal(false)}\r\n centered={true}\r\n className=\"modal-lg\"\r\n contentClassName=\"list-modal\"\r\n role=\"document\">\r\n ToggleCopyModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">Select a List \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nCopyModal.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n CopyModalIsOpen: PropTypes.bool.isRequired,\r\n ToggleCopyModal: PropTypes.func.isRequired,\r\n ProductCommand: PropTypes.shape({\r\n ListId: PropTypes.string.isRequired,\r\n ProductId: PropTypes.number.isRequired,\r\n RemoveAfter: PropTypes.bool.isRequired\r\n }).isRequired,\r\n ToggleNotification: PropTypes.func.isRequired,\r\n CopyItemNotificationText: PropTypes.string.isRequired,\r\n MoveItemNotificationText: PropTypes.string.isRequired,\r\n AddItemEndpoint: PropTypes.string.isRequired,\r\n RemoveItemEndpoint: PropTypes.string.isRequired,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default CopyModal;\r\n","import React, { useRef } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'\r\nimport { translateResourceString } from '../../../util/translationUtility'\r\n\r\nconst PrintModal = ({\r\n PrintModalIsOpen,\r\n TogglePrintModal,\r\n HidePrices\r\n}) => {\r\n\r\n const printSetting = useRef(null)\r\n const showPriceValue = \"ShowPrice\"\r\n const hidePriceValue = \"HidePrice\"\r\n\r\n const printAndClose = () => {\r\n if (printSetting.current.value === hidePriceValue) {\r\n HidePrices(true)\r\n setTimeout(() => {\r\n window.print()\r\n HidePrices(false)\r\n }, 10)\r\n } else {\r\n window.print()\r\n }\r\n\r\n TogglePrintModal(false)\r\n }\r\n\r\n return (\r\n TogglePrintModal(false)} centered={true} wrapClassName=\"test\" contentClassName=\"edit-modal\" role=\"document\">\r\n TogglePrintModal(false)} wrapTag=\"div\" tag=\"span\" className=\"headline headline-sm\">\r\n {translateResourceString(\"/Wishlists/PrintModal/Header\")}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nPrintModal.propType = {\r\n PrintModalIsOpen: PropTypes.bool.isRequired,\r\n TogglePrintModal: PropTypes.func.isRequired,\r\n HidePrices: PropTypes.func.isRequired\r\n};\r\n\r\nexport default PrintModal;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Alert } from 'reactstrap'\r\n\r\nconst Notification = ({\r\n ToggleNotification,\r\n IsOpen,\r\n ListName,\r\n Text\r\n}) => {\r\n const message = `${Text} ${ListName} wishlist.`\r\n\r\n return (\r\n ToggleNotification({ IsOpen: false })}>\r\n \r\n );\r\n};\r\n\r\nNotification.propType = {\r\n ToggleNotification: PropTypes.func.isRequired,\r\n IsHidden: PropTypes.bool.isRequired,\r\n ListName: PropTypes.string.isRequired,\r\n Text: PropTypes.string.isRequired\r\n};\r\n\r\nexport default Notification;","import React, { Fragment, useState } from 'react'\r\nimport { Tabs } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport WishlistsTabList from './WishlistsTabList'\r\nimport WishlistsTabPanels from './WishlistsTabPanels'\r\nimport WishlistsTab from './WishlistsTab'\r\nimport NewListModal from './Features/NewList/NewListModal'\r\nimport ListsModal from './Features/ListsModal/ListsModal'\r\nimport EditListModal from './Features/EditList/EditListModal'\r\nimport CopyModal from './Features/CopyModal/CopyModal'\r\nimport PrintModal from './Features/PrintModal/PrintModal'\r\nimport Notification from './Components/Notification'\r\nimport { addResourceStrings, translateResourceString } from '../util/translationUtility'\r\n\r\nconst WishlistsApp = ({\r\n Wishlists,\r\n AddToCartEndpoint,\r\n AddListToCartEndpoint,\r\n UpdateProductEndpoint,\r\n AddItemEndpoint,\r\n RemoveItemEndpoint,\r\n CreateListEndpoint,\r\n RenameListEndpoint,\r\n DeleteListEndpoint,\r\n LocalizationItems\r\n}) => {\r\n const [Lists, updateLists] = useState(Wishlists)\r\n const [NewListModalIsOpen, toggleNewListModal] = useState(false)\r\n const [ListsModalIsOpen, toggleListsModal] = useState(false)\r\n const [CopyModalIsOpen, toggleCopyModal] = useState(false)\r\n const [PrintModalIsOpen, togglePrintModal] = useState(false)\r\n const [PricesAreHidden, hidePrices] = useState(false)\r\n const [{ EditListModalIsOpen, ListName }, toggleEditListModal] = useState({ EditListModalIsOpen: false, ListName: \"\" })\r\n const [ActiveTabIndex, selectActiveTab] = useState(0)\r\n const [{ ListId, ProductId, RemoveAfter }, ProductCommand] = useState({ ListId: 0, ProductId: 0, RemoveAfter: false })\r\n const [{ IsOpen, Message, TargetListName }, toggleNotification] = useState({ IsOpen: false, Message: \"\", TargetListName: \"\" })\r\n \r\n addResourceStrings(LocalizationItems);\r\n\r\n return (\r\n \r\n selectActiveTab(index)}>\r\n {WishlistsTabList({\r\n Lists: Lists,\r\n ToggleNewListModal: toggleNewListModal,\r\n ToggleEditListModal: toggleEditListModal,\r\n ActiveTabIndex: ActiveTabIndex\r\n })}\r\n {WishlistsTabPanels({\r\n Lists: Lists,\r\n ToggleEditListModal: toggleEditListModal,\r\n ToggleListsModal: toggleListsModal,\r\n UpdateLists: updateLists,\r\n ToggleCopyModal: toggleCopyModal,\r\n ProductCommand: ProductCommand,\r\n TogglePrintModal: togglePrintModal,\r\n PricesAreHidden: PricesAreHidden,\r\n AddToCartEndpoint: AddToCartEndpoint,\r\n AddListToCartEndpoint: AddListToCartEndpoint,\r\n UpdateProductEndpoint: UpdateProductEndpoint,\r\n RemoveItemEndpoint: RemoveItemEndpoint\r\n })}\r\n \r\n\r\n \r\n );\r\n};\r\n\r\nWishlistsTab.tabsRole = 'Tab';\r\nWishlistsTabList.tabsRole = 'TabList';\r\nWishlistsTabPanels.tabsRole = 'TabPanel';\r\n\r\nWishlistsApp.propType = {\r\n Wishlists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n SKU: PropTypes.string,\r\n Name: PropTypes.string,\r\n ImageUrl: PropTypes.string,\r\n Link: PropTypes.string,\r\n StockAvailability: PropTypes.string,\r\n Price: PropTypes.string,\r\n ListPrice: PropTypes.string,\r\n Quantity: PropTypes.number,\r\n TotalPrice: PropTypes.string,\r\n Id: PropTypes.number\r\n })\r\n )\r\n })\r\n ).isRequired,\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n AddListToCartEndpoint: PropTypes.string.isRequired,\r\n UpdateProductEndpoint: PropTypes.string.isRequired,\r\n AddItemEndpoint: PropTypes.string.isRequired,\r\n RemoveItemEndpoint: PropTypes.string.isRequired,\r\n CreateListEndpoint: PropTypes.string.isRequired,\r\n RenameListEndpoint: PropTypes.string.isRequired,\r\n DeleteListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default WishlistsApp;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass QuickOrderEntry extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n onSelectSuggestedItem(sku) {\r\n this.props.onSkuSet(sku);\r\n }\r\n\r\n render() {\r\n const {\r\n translationUtility\r\n } = this.props;\r\n\r\n let quantityValue = this.props.quantity === -1 ? \"\" : this.props.quantity;\r\n\r\n let isSkuValidated = !!this.props.selectedSku && this.props.selectedSku === this.props.query;\r\n let showAutocomplete = this.props.hasFocus\r\n && this.props.searchCompleted\r\n && !!this.props.autocompleteItems\r\n && this.props.autocompleteItems.length > 0\r\n && !isSkuValidated;\r\n\r\n let itemLabel = translationUtility.translateResourceString(\"/QuickOrder/ItemNumberLabel\");\r\n if (!!this.props.query) {\r\n if (!this.props.searchCompleted || showAutocomplete)\r\n itemLabel = translationUtility.translateResourceString(\"/QuickOrder/Searching\");\r\n else if (isSkuValidated)\r\n itemLabel = this.props.itemName;\r\n else\r\n itemLabel = translationUtility.translateResourceString(\"/QuickOrder/ItemNotFound\");\r\n }\r\n\r\n let searchedQueryLength = this.props.searchedQuery.length;\r\n\r\n return (\r\n \r\n {(state) => (\r\n )\r\n );","import React from 'react'\r\nimport { findDOMNode } from 'react-dom'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ERROR_USER_ALERT, UNKNOWN_USER_ALERT, INFO_USER_ALERT } from './userAlertTypes'\r\n\r\nimport { Fade } from '../componentAnimations'\r\n\r\nconst hasNewMessage = (oldMessages, newMessages) => {\r\n return !newMessages.every((cur) => oldMessages.some(msg => msg.id === cur.id))\r\n}\r\n\r\n// BBS DDD from https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling?noredirect=1&lq=1\r\n// answer by bravedick\r\nconst isScrolledIntoView = (el) => {\r\n if (typeof window === 'undefined' || window.innerWidth === 'undefined')\r\n return false;\r\n var elemTop = el.getBoundingClientRect().top;\r\n var elemBottom = el.getBoundingClientRect().bottom;\r\n\r\n // Only completely visible elements return true:\r\n var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);\r\n // Partially visible elements return true:\r\n // isVisible = elemTop < window.innerHeight && elemBottom >= 0;\r\n return isVisible;\r\n}\r\n\r\nclass MessagesList extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = { visibleMessages: 0 }\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (hasNewMessage(this.props.messages, nextProps.messages)) {\r\n this.setState({ scrollToLast: true })\r\n }\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (this.state.scrollToLast) {\r\n const highestMessageId = this.props.messages.reduce((max, cur) => cur.id > max ? cur.id : max, 0)\r\n const messageWithHighestId = findDOMNode(this.refs[highestMessageId.toString(10)])\r\n isScrolledIntoView(messageWithHighestId) || messageWithHighestId.scrollIntoView({behavior: \"smooth\"})\r\n this.setState({scrollToLast: false})\r\n }\r\n }\r\n\r\n render() {\r\n const children = this.props.messages.map(message => {\r\n if (message.dismissed)\r\n return \"\";\r\n return (\r\n \r\n \r\n e.preventDefault() || this.props.onDismiss(message.Id)}>\r\n ×\r\n \r\n {message.text.split('\\n').map((line, i) =>\r\n (
\r\n \r\n )\r\n }).filter(x => x);\r\n\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nMobileSelectedFacets.propTypes = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })).isRequired,\r\n onAttributeChange: PropTypes.func.isRequired,\r\n};\r\n\r\nexport default MobileSelectedFacets;","import React from 'react';\r\nimport Facets from '../Facets/Facets';\r\nimport PaginationContainer from './PaginationContainer';\r\nimport ProductTileContainer from './ProductTileContainer';\r\nimport PropTypes from 'prop-types';\r\nimport MoreButton from '../../components/MoreButton';\r\nimport MobileSelectedFacets from '../Facets/MobileSelectedFacets';\r\nimport DropdownOption from '../../components/DropdownOption';\r\nimport { translateResourceString } from '../../../util/translationUtility';\r\n\r\nconst ProductSearchResultsContainer = ({ attributes,\r\n onAttributeChange,\r\n onClearAttributes,\r\n paginationViewModel,\r\n onCurrentItemsPerPageChange,\r\n onCurrentSortByChange,\r\n products,\r\n recommendedProducts,\r\n onResultClick,\r\n onShowMobileFacetsChange,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n categoryName,\r\n categoryImageUrl,\r\n categoryImageAltText,\r\n categoryDescription,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n promotionalArea\r\n}) => {\r\n //const showClearAttributes = attributes.filter(\r\n // attribute => attribute.Values.filter(\r\n // value => value.Checked).length > 0).length > 0;\r\n const nextRequest = Math.min(paginationViewModel.CurrentItemsOnPage + paginationViewModel.PerMoreAmount, paginationViewModel.ResultsTotal);\r\n const showMore = paginationViewModel.ResultsTotal > paginationViewModel.CurrentItemsOnPage;\r\n var recommendationsHeading = \"Trending in Category\";\r\n const categoryDescriptionHtml = {\r\n __html: categoryDescription\r\n };\r\n const promotionalAreaHtml = {\r\n __html: promotionalArea\r\n };\r\n const firstProductNumber = paginationViewModel.CurrentPageIndex * paginationViewModel.CurrentItemsPerPage + 1;\r\n const lastProductNumber = firstProductNumber + paginationViewModel.CurrentItemsOnPage - 1;\r\n const productSortOptions = [\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/Featured/Display\"), 'FeaturedProducts', translateResourceString(\"/SearchApp/SortOptions/Featured/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameAZ/Display\"), 'NameAZ', translateResourceString(\"/SearchApp/SortOptions/NameAZ/FullDisplay\")),\r\n new DropdownOption(translateResourceString(\"/SearchApp/SortOptions/NameZA/Display\"), 'NameZA', translateResourceString(\"/SearchApp/SortOptions/NameZA/FullDisplay\"))\r\n ];\r\n return (\r\n {translateResourceString(\"/SearchApp/Pagination/FilterByLabel\")}
\r\n {\r\n \r\n mergedAttributeValueArrays.map((attribute, i) => {\r\n return (\r\n \r\n
\r\n );\r\n })\r\n }\r\n {attribute.attributeName}: {attribute.attributeValueName}
onAttributeChange(attribute.attributeName, attribute.attributeValueName)}>\r\n \r\n
\r\n }\r\n \r\n {categoryName && categoryName.length > 0 &&\r\n
\r\n );\r\n};\r\n\r\nProductSearchResultsContainer.propType = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func,\r\n onClearAttributes: PropTypes.func,\r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number,\r\n PerMoreAmount: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func,\r\n onCurrentSortByChange: PropTypes.func,\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string,\r\n Formats: PropTypes.arrayOf(PropTypes.string),\r\n Languages: PropTypes.arrayOf(PropTypes.string)\r\n })),\r\n recommendedProducts: PropTypes.arrayOf(PropTypes.shape({\r\n RecommendationId: PropTypes.number,\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n onShowMobileFacetsChange: PropTypes.func.isRequired,\r\n expandedFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n promotionalArea: PropTypes.string\r\n};\r\n\r\nexport default ProductSearchResultsContainer;\r\n","import React from 'react';\r\n\r\nconst ProductSearchResultsNonFound = () =>\r\n\r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n {categoryName}
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {recommendedProducts && recommendedProducts.length > 0 &&\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n \r\n
\r\n {recommendationsHeading}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {showMore &&\r\n \r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n onCurrentItemsPerPageChange(nextRequest)}\r\n />\r\n
\r\n \r\n No Products Found\r\n
;\r\n\r\nProductSearchResultsNonFound.propType = {};\r\n\r\nexport default ProductSearchResultsNonFound;\r\n\r\n","import React from 'react';\r\nimport ProductSearchResultsContainer from './ProductSearchResultsContainer';\r\nimport ProductSearchResultsNonFound from './ProductSearchResultsNonFound';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst ProductSearchResults = ({\r\n attributes, \r\n onAttributeChange, \r\n onClearAttributes, \r\n paginationViewModel,\r\n onCurrentItemsPerPageChange, \r\n onCurrentSortByChange, \r\n onCurrentPageIndexChange, \r\n products,\r\n recommendedProducts,\r\n onResultClick,\r\n onShowMobileFacetsChange,\r\n expandedFacets,\r\n onToggleFacetExpanded,\r\n categoryName,\r\n categoryImageUrl,\r\n categoryImageAltText,\r\n categoryDescription,\r\n showMoreFacets,\r\n onToggleShowMoreFacet,\r\n promotionalArea\r\n}) => {\r\n return (\r\n \r\n {products.length > 0 ? \r\n
\r\n );\r\n};\r\n\r\nProductSearchResults.propType = {\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func, \r\n onClearAttributes: PropTypes.func, \r\n paginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number,\r\n PerMoreAmount: PropTypes.number\r\n }),\r\n onCurrentItemsPerPageChange: PropTypes.func, \r\n onCurrentSortByChange: PropTypes.func, \r\n onCurrentPageIndexChange: PropTypes.func, \r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string,\r\n Formats: PropTypes.arrayOf(PropTypes.string),\r\n Languages: PropTypes.arrayOf(PropTypes.string)\r\n })),\r\n recommendedProducts: PropTypes.arrayOf(PropTypes.shape({\r\n RecommendationId: PropTypes.number,\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string\r\n })),\r\n expandedFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n promotionalArea: PropTypes.string\r\n};\r\n\r\nexport default ProductSearchResults;","import React from 'react';\r\nconst Loading = ({children}) =>\r\n \r\n {/*
;\r\n\r\nexport default Loading;","import React from 'react';\r\nimport Loading from './Loading';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst WithLoading = function(Component) {\r\n let withLoading = function({ isLoading, ...rest }) {\r\n return (\r\n isLoading\r\n ? \r\n \r\n
*/}\r\n {children}\r\n \r\n
\r\n );\r\n};\r\n\r\nconst ArticleSearchResultsWithLoading = WithLoading(ArticleSearchResults);\r\nconst ProductSearchResultsWithLoading = WithLoading(ProductSearchResults);\r\n\r\nCombinedSearchResults.propType = {\r\n articles: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Title: PropTypes.string,\r\n Link: PropTypes.string,\r\n Description: PropTypes.string\r\n })\r\n ),\r\n articlePaginationViewModel: PropTypes.shape({\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsOnPage: PropTypes.number\r\n }),\r\n onArticleCurrentItemsPerPageChange: PropTypes.func,\r\n onArticleCurrentPageIndexChange: PropTypes.func,\r\n onResultClick: PropTypes.func,\r\n attributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n productAttributes: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n DisplayName: PropTypes.string,\r\n Values: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Checked: PropTypes.bool,\r\n Count: PropTypes.number\r\n }))\r\n })),\r\n onAttributeChange: PropTypes.func,\r\n onClearAttributes: PropTypes.func,\r\n onProductCurrentItemsPerPageChange: PropTypes.func,\r\n onProductCurrentSortByChange: PropTypes.func,\r\n onProductCurrentPageIndexChange: PropTypes.func,\r\n productPaginationViewModel: PropTypes.shape({\r\n ResultsTotal: PropTypes.number,\r\n CurrentItemsPerPage: PropTypes.number,\r\n CurrentPageIndex: PropTypes.number,\r\n CurrentSortBy: PropTypes.string,\r\n CurrentItemsOnPage: PropTypes.number\r\n }),\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n Image: PropTypes.shape({\r\n Url: PropTypes.string,\r\n Alt: PropTypes.string\r\n }),\r\n Description: PropTypes.string,\r\n Formats: PropTypes.string,\r\n Languages: PropTypes.string\r\n })),\r\n view: PropTypes.string,\r\n onChangeView: PropTypes.func,\r\n onShowMobileFacetsChange: PropTypes.func.isRequired,\r\n expandedArticleFacets: PropTypes.arrayOf(PropTypes.string),\r\n expandedProductFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleFacetExpanded: PropTypes.func,\r\n onToggleProductFacetExpanded: PropTypes.func,\r\n showMoreFacets: PropTypes.arrayOf(PropTypes.string),\r\n onToggleShowMoreFacet: PropTypes.func,\r\n disableProducts: PropTypes.bool\r\n};\r\n\r\nexport default CombinedSearchResults;\r\n","export const ARTICLES = 'articles';\r\nexport const PRODUCTS = 'products';\r\n","export function buildAttributesQueryString(attributes) {\r\n let attributeString = attributes.map(x => `${x.name};${x.value}`).reduce((prev, current) => prev + '|' + current, '');\r\n return attributeString;\r\n}\r\n\r\nexport function buildQueryString(searchString, attributes, productAttributes, articlePaginationViewModel, productPaginationViewModel, view) {\r\n let queryParams = {};\r\n if (searchString)\r\n queryParams.searchString = searchString;\r\n const productAttributesQueryString = productAttributes && productAttributes.length > 0 ? buildAttributesQueryString(productAttributes) : null;\r\n const articleAttributesQueryString = attributes && attributes.length > 0 ? buildAttributesQueryString(attributes) : null; \r\n if (productAttributesQueryString && productAttributesQueryString.length > 0)\r\n queryParams.c = productAttributesQueryString;\r\n if (articleAttributesQueryString && articleAttributesQueryString.length > 0)\r\n queryParams.ac = articleAttributesQueryString; \r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentPageIndex)\r\n queryParams.articlePageIndex = articlePaginationViewModel.CurrentPageIndex;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentItemsPerPage)\r\n queryParams.articlePageSize = articlePaginationViewModel.CurrentItemsPerPage;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentSortBy)\r\n queryParams.sa = articlePaginationViewModel.CurrentSortBy;\r\n if (productPaginationViewModel && productPaginationViewModel.CurrentSortBy)\r\n queryParams.sp = productPaginationViewModel.CurrentSortBy;\r\n if (articlePaginationViewModel && articlePaginationViewModel.CurrentItemsPerPage)\r\n queryParams.aq = productPaginationViewModel.CurrentItemsPerPage;\r\n if (productPaginationViewModel && productPaginationViewModel.CurrentItemsPerPage)\r\n queryParams.pq = productPaginationViewModel.CurrentItemsPerPage;\r\n if (view)\r\n queryParams.view = view;\r\n return serialize(queryParams);\r\n}\r\n\r\nexport function serialize(obj) {\r\n return '?' + Object.keys(obj).reduce(function (a, k) { a.push(k + '=' + encodeURIComponent(obj[k])); return a; }, []).join('&');\r\n}\r\n","export function buildSelectedAttributesFromModel(attributes) {\r\n const selectedAttributes = [];\r\n\r\n attributes.forEach(attribute => {\r\n if (attribute.Values) {\r\n const attributeValues = attribute.Values.filter(\r\n value => value.Checked && value.Checked === true);\r\n\r\n attributeValues.forEach(attributeValue => {\r\n selectedAttributes.push({\r\n name: attribute.Name,\r\n value: attributeValue.Name\r\n });\r\n });\r\n }\r\n });\r\n\r\n return selectedAttributes;\r\n}\r\n\r\nexport function buildFacetNamesFromModel(attributes) {\r\n if (!attributes) {\r\n return [];\r\n }\r\n\r\n return attributes.filter(attribute => attribute.Name)\r\n .map(attribute => attribute.Name);\r\n}\r\n\r\nexport function buildStateFromModel({\r\n SearchString,\r\n FindClickTracking,\r\n Articles,\r\n View,\r\n Products\r\n}) {\r\n const state = {\r\n searchString: SearchString ? SearchString : SearchString,\r\n selectedAttributes: Articles && Articles.CategoryFacets && Articles.CategoryFacets && Articles.CategoryFacets.Attributes ? buildSelectedAttributesFromModel(Articles.CategoryFacets.Attributes) : [],\r\n attributes: Articles && Articles.CategoryFacets && Articles.CategoryFacets && Articles.CategoryFacets.Attributes ? Articles.CategoryFacets.Attributes : [],\r\n productAttributes: Products && Products.ProductFilters && Products.ProductFilters.Attributes ? Products.ProductFilters.Attributes : [],\r\n selectedProductAttributes: Products && Products.ProductFilters && Products.ProductFilters.Attributes ? buildSelectedAttributesFromModel(Products.ProductFilters.Attributes) : [],\r\n products: Products && Products.ProductItems ? Products.ProductItems : [],\r\n productPaginationViewModel: Products && Products.PaginationViewModel ? Products.PaginationViewModel : null,\r\n articlePaginationViewModel: Articles && Articles.PaginationViewModel ? Articles.PaginationViewModel : null,\r\n isLoading: false,\r\n view: View,\r\n articles: Articles && Articles.ArticleItemViewModels ? Articles.ArticleItemViewModels : [],\r\n findClickTrackingViewModel: FindClickTracking,\r\n showMobileFacets: false,\r\n expandedFacets: Articles && Articles.CategoryFacets && Articles.CategoryFacets.Attributes \r\n ? buildFacetNamesFromModel(Articles.CategoryFacets.Attributes) : [],\r\n expandedProductFacets: Products && Products.ProductFilters && Products.ProductFilters.Attributes \r\n ? buildFacetNamesFromModel(Products.ProductFilters.Attributes) : [],\r\n showMoreFacets: []\r\n };\r\n\r\n return state;\r\n}\r\n\r\nfunction getRecommendedProducts(recommendations) {\r\n return recommendations.slice(0, 3).map(({ RecommendationId, TileViewModel }) => {\r\n return {\r\n RecommendationId,\r\n Name: TileViewModel.Name,\r\n Url: TileViewModel.Url,\r\n Image: TileViewModel.Image,\r\n Description: TileViewModel.Description\r\n };\r\n });\r\n}\r\n","import React from 'react';\r\n\r\nconst ArticleSearchResultsNonFound = () =>\r\n\r\n \r\n \r\n \r\n {!disableProducts &&\r\n \r\n \r\n }\r\n \r\n
\r\n \r\n\r\n \r\n onChangeView(ARTICLES)}\r\n href=\"#\"\r\n >\r\n {translateResourceString(\"/SearchApp/Content\")}\r\n \r\n \r\n {!disableProducts &&\r\n \r\n onChangeView(PRODUCTS)}\r\n href=\"#\"\r\n >\r\n {translateResourceString(\"/SearchApp/Products\")}\r\n \r\n \r\n }\r\n
\r\n\r\n \r\n No Articles Found\r\n
;\r\n\r\nArticleSearchResultsNonFound.propType = {};\r\n\r\nexport default ArticleSearchResultsNonFound;","const windowZaius = \"zaius\" in window ? window.zaius : null;\r\n\r\nconst zaiusUtility = {\r\n event(event_type, args_object) {\r\n if (!windowZaius) {\r\n return;\r\n }\r\n windowZaius.event(event_type, args_object);\r\n }\r\n}\r\n\r\nexport default zaiusUtility;\r\n","import React from 'react';\r\nimport CombinedSearchResults from './Features/Combined/CombinedSearchResults';\r\nimport createHistory from 'history/createBrowserHistory';\r\nimport fetch from 'cross-fetch';\r\nimport {\r\n ARTICLES,\r\n PRODUCTS\r\n} from './constants/index.js';\r\nimport {\r\n buildAttributesQueryString,\r\n buildQueryString,\r\n serialize\r\n} from './Infrastructure/urlBuilder.js';\r\nimport {\r\n buildStateFromModel,\r\n buildSelectedAttributesFromModel,\r\n buildFacetNamesFromModel\r\n} from './Infrastructure/modelBuilder.js';\r\nimport { trackClick } from './Infrastructure/find.js';\r\nimport ProductSearchResults from './Features/Products/ProductSearchResults';\r\nimport WithLoading from './components/WithLoading';\r\nimport { addResourceStrings, translateResourceString } from '../util/translationUtility'\r\nimport ArticleSearchResults from './Features/Articles/ArticleSearchResults';\r\nimport ArticleSearchResultsNonFound from \"./Features/Articles/ArticleSearchResultsNonFound\";\r\nimport zaiusUtility from '../util/zaiusUtility';\r\n\r\nclass SearchApp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = buildStateFromModel(props);\r\n\r\n this.onProductAttributeChange = this.onProductAttributeChange.bind(this);\r\n this.onClearAttributes = this.onClearAttributes.bind(this);\r\n this.onClearProductAttributes = this.onClearProductAttributes.bind(this);\r\n this.onArticleAttributeChange = this.onArticleAttributeChange.bind(this);\r\n this.onArticleCurrentItemsPerPageChange = this.onArticleCurrentItemsPerPageChange.bind(this);\r\n this.onArticleCurrentPageIndexChange = this.onArticleCurrentPageIndexChange.bind(this);\r\n this.onProductCurrentItemsPerPageChange = this.onProductCurrentItemsPerPageChange.bind(this);\r\n this.onProductCurrentSortByChange = this.onProductCurrentSortByChange.bind(this);\r\n this.onChangeView = this.onChangeView.bind(this);\r\n this.onArticleCurrentSortByChange = this.onArticleCurrentSortByChange.bind(this);\r\n this.onResultClick = this.onResultClick.bind(this);\r\n this.onShowMobileFacetsChange = this.onShowMobileFacetsChange.bind(this);\r\n this.onShowMobileFacetsToggle = this.onShowMobileFacetsToggle.bind(this);\r\n this.onToggleFacetExpanded = this.onToggleFacetExpanded.bind(this);\r\n this.onToggleProductFacetExpanded = this.onToggleProductFacetExpanded.bind(this);\r\n this.hasSearchString = this.hasSearchString.bind(this);\r\n this.isCategory = this.isCategory.bind(this);\r\n this.apiEndpoint = props.ApiEndpoint;\r\n this.clickTrackingApiEndpoint = props.ClickTrackingApiEndpoint;\r\n this.trackId = props.TrackId;\r\n this.twoLetterLanguageCode = props.TwoLetterLanguageCode;\r\n this.siteDefinitionId = props.SiteDefinitionId;\r\n this.onToggleShowMoreFacet = this.onToggleShowMoreFacet.bind(this);\r\n this.disableProducts = props.Products && props.Products.ProductItems && props.Products.ProductItems.length === 0;\r\n\r\n // Category - not in state\r\n this.categoryName = props.Name;\r\n this.contentLinkId = props.ContentLinkId;\r\n this.categoryImageUrl = props.ImageUrl;\r\n this.categoryImageAltText = props.ImageAltText;\r\n this.categoryDescription = props.Description;\r\n\r\n addResourceStrings(props.LocalizationItems);\r\n\r\n }\r\n\r\n componentDidMount() {\r\n require('./SearchApp.css');\r\n this.history = createHistory();\r\n this.history.listen((location, action) => {\r\n if (location.state && location.state.view) {\r\n this.setState({ view: location.state.view });\r\n }\r\n this.fetchProductsUsingUrl(location.search);\r\n });\r\n zaiusUtility.event(\"navigation\", {\r\n action: \"search\",\r\n search_term: this.state.searchString\r\n });\r\n }\r\n\r\n updateState(searchResults) {\r\n if(searchResults.Products){\r\n this.setState({\r\n isLoading: false,\r\n productAttributes: searchResults.Products && searchResults.Products.ProductFilters && searchResults.Products.ProductFilters.Attributes ? searchResults.Products.ProductFilters.Attributes : [],\r\n products: searchResults.Products.ProductItems ? searchResults.Products.ProductItems : [],\r\n productPaginationViewModel: searchResults.Products && searchResults.Products.PaginationViewModel ? searchResults.Products.PaginationViewModel : null,\r\n selectedProductAttributes: searchResults.Products && searchResults.Products.ProductFilters && searchResults.Products.ProductFilters.Attributes ? buildSelectedAttributesFromModel(searchResults.Products.ProductFilters.Attributes) : [],\r\n });\r\n }\r\n if(searchResults.Articles){\r\n this.setState({\r\n attributes: searchResults.Articles.CategoryFacets && searchResults.Articles.CategoryFacets.Attributes ? searchResults.Articles.CategoryFacets.Attributes : [],\r\n articlePaginationViewModel: searchResults.Articles && searchResults.Articles.PaginationViewModel ? searchResults.Articles.PaginationViewModel : null,\r\n selectedAttributes: searchResults.Articles.CategoryFacets && searchResults.Articles.CategoryFacets && searchResults.Articles.CategoryFacets.Attributes ? buildSelectedAttributesFromModel(searchResults.Articles.CategoryFacets.Attributes) : [],\r\n isLoading: false,\r\n articles: searchResults.Articles && searchResults.Articles.ArticleItemViewModels ? searchResults.Articles.ArticleItemViewModels : [],\r\n });\r\n }\r\n\r\n }\r\n\r\n updateUrl({ searchString, selectedAttributes, selectedProductAttributes, articlePaginationViewModel, view, productPaginationViewModel }) {\r\n const queryString = buildQueryString(searchString, selectedAttributes, selectedProductAttributes, articlePaginationViewModel, productPaginationViewModel, view );\r\n // Going to let history listener take care of it\r\n this.history.push({\r\n search: queryString,\r\n state: {\r\n view: view\r\n }\r\n });\r\n }\r\n\r\n fetchProductsUsingUrl(queryString) {\r\n if(this.contentLinkId)\r\n {\r\n if(queryString && queryString.indexOf(\"?\") > -1)\r\n {\r\n queryString = `${queryString}&contentLinkId=${this.contentLinkId}`;\r\n }\r\n else\r\n {\r\n queryString = `?contentLinkId=${this.contentLinkId}`;\r\n }\r\n }\r\n this.setState({ isLoading: true });\r\n const url = `${this.apiEndpoint}${queryString}`;\r\n fetch(url)\r\n .then(response => response.json())\r\n .then(result => this.updateState(result));\r\n }\r\n\r\n onProductAttributeChange(name, value) {\r\n let found = false;\r\n let selectedAttributes = this.state.selectedProductAttributes;\r\n selectedAttributes.forEach((selectedAttribute, i) => {\r\n if (selectedAttribute.name === name && selectedAttribute.value === value) {\r\n found = true;\r\n\r\n // Remove it\r\n selectedAttributes.splice(i, 1);\r\n }\r\n });\r\n\r\n if (!found) {\r\n // Add it\r\n selectedAttributes.push({\r\n name: name,\r\n value: value\r\n });\r\n }\r\n\r\n const changes = {\r\n ...this.state,\r\n selectedProductAttributes: selectedAttributes\r\n };\r\n\r\n const newOptions = { ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onProductCurrentSortByChange(requestedSortBy) {\r\n let productPaginationViewModel = this.state.productPaginationViewModel;\r\n productPaginationViewModel.CurrentSortBy = requestedSortBy;\r\n const newOptions = { ...this.state, productPaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n onArticleAttributeChange(name, value) {\r\n let found = false;\r\n const selectedAttributes = this.state.selectedAttributes;\r\n selectedAttributes.forEach((selectedAttribute, i) => {\r\n if (selectedAttribute.name === name && selectedAttribute.value === value) {\r\n found = true;\r\n\r\n // Remove it\r\n selectedAttributes.splice(i, 1);\r\n }\r\n });\r\n\r\n if (!found) {\r\n // Add it\r\n selectedAttributes.push({\r\n name: name,\r\n value: value\r\n });\r\n }\r\n\r\n const newOptions = {\r\n ...this.state,\r\n selectedAttributes: selectedAttributes\r\n };\r\n\r\n this.updateUrl(newOptions);\r\n zaiusUtility.event(\"navigation\", {\r\n action: \"filter\"\r\n });\r\n }\r\n onArticleCurrentSortByChange(requestedSortBy) {\r\n const articlePaginationViewModel = this.state.articlePaginationViewModel;\r\n articlePaginationViewModel.CurrentSortBy = requestedSortBy;\r\n this.updateUrl({\r\n ...this.state,\r\n articlePaginationViewModel\r\n });\r\n zaiusUtility.event(\"navigation\", {\r\n action: \"sort\"\r\n });\r\n }\r\n\r\n onClearAttributes() {\r\n const changes = { selectedAttributes: [] };\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onClearProductAttributes() {\r\n const changes = { selectedProductAttributes: [] };\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onProductCurrentItemsPerPageChange(requestedItemsPerPage) {\r\n // Need to possibly update the page request too\r\n const { productPaginationViewModel } = this.state;\r\n const firstProductNumberOnNewPage = productPaginationViewModel.CurrentPageIndex * requestedItemsPerPage + 1;\r\n const requestedPageIndex = firstProductNumberOnNewPage > productPaginationViewModel.ResultsTotal\r\n ? Math.floor(productPaginationViewModel.ResultsTotal / requestedItemsPerPage)\r\n : productPaginationViewModel.CurrentPageIndex;\r\n productPaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n productPaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n const newOptions = { ...this.state, productPaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onProductCurrentPageIndexChange(requestedPageIndex) {\r\n const { productPaginationViewModel } = this.state;\r\n productPaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n const newOptions = { ...this.state, productPaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleCurrentItemsPerPageChange(requestedItemsPerPage) {\r\n // Need to possibly update the page request too\r\n const { articlePaginationViewModel } = this.state;\r\n const firstArticleNumberOnNewPage = articlePaginationViewModel.CurrentPageIndex * requestedItemsPerPage + 1;\r\n const requestedPageIndex = firstArticleNumberOnNewPage > articlePaginationViewModel.ResultsTotal\r\n ? Math.floor(articlePaginationViewModel.ResultsTotal / requestedItemsPerPage)\r\n : articlePaginationViewModel.CurrentPageIndex;\r\n articlePaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n articlePaginationViewModel.CurrentItemsPerPage = requestedItemsPerPage;\r\n const newOptions = { ...this.state, articlePaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n onArticleCurrentPageIndexChange(requestedPageIndex) {\r\n const { articlePaginationViewModel } = this.state;\r\n articlePaginationViewModel.CurrentPageIndex = requestedPageIndex;\r\n const newOptions = { ...this.state, articlePaginationViewModel };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n /**\r\n * Updates current view (Products vs Articles)\r\n * @param {string} view Current View Name.\r\n * @returns {void}\r\n */\r\n onChangeView(view) {\r\n const changes = { view: view };\r\n const newOptions = { ...this.state, ...changes };\r\n this.updateUrl(newOptions);\r\n }\r\n\r\n /**\r\n * Tracking for Find\r\n * @param {string} hitId HitId for Find result.\r\n * @returns {void}\r\n */\r\n onResultClick(hitId) {\r\n // Call tracking api\r\n if (typeof this.state.findClickTrackingViewModel !== \"undefined\") {\r\n const { TrackId, TwoLetterLanguageCode, SiteDefinitionId, ClickTrackingApiEndpoint, SearchTerm } = this.state.findClickTrackingViewModel;\r\n trackClick(ClickTrackingApiEndpoint, hitId, TrackId, TwoLetterLanguageCode, SiteDefinitionId, SearchTerm);\r\n }\r\n }\r\n\r\n onShowMobileFacetsChange(showMobileFacets) {\r\n this.setState({ showMobileFacets });\r\n }\r\n\r\n onShowMobileFacetsToggle() {\r\n const { showMobileFacets } = this.state;\r\n this.setState({ showMobileFacets: !showMobileFacets });\r\n }\r\n\r\n onToggleFacetExpanded(facetName) {\r\n const { expandedFacets } = this.state;\r\n const index = expandedFacets.indexOf(facetName);\r\n if (index > -1) {\r\n expandedFacets.splice(index, 1);\r\n } else {\r\n expandedFacets.push(facetName);\r\n }\r\n this.setState({ expandedFacets });\r\n }\r\n\r\n onToggleProductFacetExpanded(facetName) {\r\n const { expandedProductFacets } = this.state;\r\n const index = expandedProductFacets.indexOf(facetName);\r\n if (index > -1) {\r\n expandedProductFacets.splice(index, 1);\r\n } else {\r\n expandedProductFacets.push(facetName);\r\n }\r\n this.setState({ expandedProductFacets });\r\n }\r\n\r\n onToggleShowMoreFacet(facetName) {\r\n const { showMoreFacets } = this.state;\r\n const index = showMoreFacets.indexOf(facetName);\r\n if (index > -1) {\r\n showMoreFacets.splice(index, 1);\r\n } else {\r\n showMoreFacets.push(facetName);\r\n }\r\n this.setState({ showMoreFacets });\r\n }\r\n\r\n hasSearchString() {\r\n const { searchString } = this.state;\r\n return searchString && searchString.length > 0;\r\n }\r\n\r\n isCategory() {\r\n return this.categoryName && this.categoryName.length > 0;\r\n }\r\n\r\n render() {\r\n const {\r\n searchString,\r\n attributes,\r\n productAttributes,\r\n isLoading,\r\n articles,\r\n articlePaginationViewModel,\r\n products,\r\n productPaginationViewModel,\r\n suggestions,\r\n showMobileFacets,\r\n expandedFacets,\r\n expandedProductFacets,\r\n showMoreFacets,\r\n categories,\r\n selectedCategory,\r\n openCategories,\r\n view\r\n } = this.state;\r\n\r\n return (\r\n \r\n {/*
\r\n );\r\n }\r\n}\r\n\r\nconst ProductSearchResultsWithLoading = WithLoading(ProductSearchResults);\r\nconst ArticleSearchResultsWithLoading = WithLoading(ArticleSearchResults);\r\n\r\nexport default SearchApp;\r\n","import fetch from 'cross-fetch';\r\nimport {serialize} from './urlBuilder.js';\r\n\r\n/**\r\n * \r\n * @param {string} clickTrackingApiEndpoint Url for API Call.\r\n * @param {string} hitId HitId for Find Result.\r\n * @param {string} trackId TrackId for Find Search.\r\n * @param {string} twoLetterLanguageCode Two letter language code IE 'en' for Find search.\r\n * @param {string} siteDefinitionId GUID for site where search took place.\r\n * @param {string} searchTerm Term used in search.\r\n * @returns {void}\r\n */\r\nexport function trackClick(clickTrackingApiEndpoint, hitId, trackId, twoLetterLanguageCode, siteDefinitionId, searchTerm) {\r\n const queryParameters = {\r\n trackId: trackId,\r\n twoLetterLanguageCode: twoLetterLanguageCode,\r\n siteDefinitionId: siteDefinitionId,\r\n searchTerm: searchTerm,\r\n hitId: hitId\r\n };\r\n const queryString = serialize(queryParameters);\r\n const url = `${clickTrackingApiEndpoint}${queryString}`;\r\n fetch(url);\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst EditListModalLink = ({\r\n AdditionalClasses = \"\",\r\n Color = \"\",\r\n Size = \"\",\r\n ToggleEditListModal,\r\n Name\r\n}) => {\r\n\r\n return (\r\n\r\n \r\n );\r\n};\r\n\r\nEditListModalLink.propType = {\r\n AdditionalClasses: PropTypes.string,\r\n Color: PropTypes.string,\r\n Size: PropTypes.string,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n Name: PropTypes.string.isRequired\r\n};\r\n\r\nexport default EditListModalLink;\r\n","import React from 'react'\r\nimport { Tab } from 'react-tabs'\r\nimport PropTypes from 'prop-types'\r\nimport EditListModalLink from './Features/EditList/EditListModalLink'\r\n\r\nconst WishlistsTab = ({ \r\n Name, \r\n IsActive, \r\n ToggleEditListModal \r\n}) => {\r\n return (\r\n \r\n {showMobileFacets &&\r\n this.onShowMobileFacetsChange(false)}\r\n />\r\n }\r\n
*/}\r\n \r\n {(!articles || articles.length <= 0) && (!products && products.length <= 0) && this.hasSearchString() &&\r\n
\r\n \r\n
\r\n }\r\n {suggestions && suggestions.length > 0 &&\r\n \r\n {translateResourceString(\"/SearchApp/Pagination/Article/NoResultsLabel\", searchString)}\r\n
\r\n\r\n
\r\n }\r\n {this.isCategory() ?\r\n \r\n
\r\n \r\n
\r\n \r\n Did you mean {suggestions.map((suggestion, i) => {\r\n return (\r\n \r\n {suggestion.Text}\r\n {i + 1 < suggestions.length ? \", \" : \"\"}\r\n \r\n );\r\n })}\r\n
\r\n{Name}
\r\n\r\n \r\n {\r\n Lists.map((list, i) =>\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nWishlistsTabList.propType = {\r\n Lists: PropTypes.array.isRequired,\r\n ToggleNewListModal: PropTypes.func.isRequired,\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n ActiveTabIndex: PropTypes.number.isRequired\r\n};\r\n\r\nexport default WishlistsTabList;\r\n","import React, { useRef } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\nimport { translateResourceString } from '../util/translationUtility'\r\n\r\nconst WishlistProduct = ({\r\n Id,\r\n Name,\r\n ImageUrl,\r\n SKU,\r\n Link,\r\n Price,\r\n ListPrice,\r\n Quantity,\r\n ListIndex,\r\n RemoveProduct,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n ListId,\r\n PricesAreHidden,\r\n UpdateQty,\r\n AddToCart,\r\n TotalPrice,\r\n isUpdating\r\n}) => {\r\n\r\n const qty = useRef(Quantity)\r\n\r\n const prepareCopyData = (e, removeAfter = false) => {\r\n e.preventDefault()\r\n ProductCommand({\r\n ListId: ListId,\r\n ProductId: Id,\r\n RemoveAfter: removeAfter\r\n })\r\n ToggleCopyModal(true)\r\n }\r\n\r\n const onQuantityChange = () => {\r\n if (parseInt(qty.current.value) === 0) {\r\n RemoveProduct(SKU, ListIndex)\r\n qty.current.value = 1\r\n } else {\r\n UpdateQty(SKU, ListId, qty.current.value)\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nWishlistProduct.propType = {\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n Id: PropTypes.number,\r\n ImageUrl: PropTypes.string,\r\n Link: PropTypes.string,\r\n ListId: PropTypes.string.isRequired,\r\n ListIndex: PropTypes.number,\r\n ListPrice: PropTypes.string,\r\n Name: PropTypes.string,\r\n Price: PropTypes.string,\r\n PricesAreHidden: PropTypes.bool.isRequired,\r\n ProductCommand: PropTypes.shape({\r\n ListId: PropTypes.string.isRequired,\r\n ProductId: PropTypes.number.isRequired,\r\n RemoveAfter: PropTypes.bool.isRequired\r\n }).isRequired,\r\n Quantity: PropTypes.number,\r\n RemoveProduct: PropTypes.func,\r\n SKU: PropTypes.string,\r\n ToggleCopyModal: PropTypes.func\r\n};\r\n\r\nexport default WishlistProduct;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst ListsModalLink = ({\r\n AdditionalClasses = \"\",\r\n Color = \"\",\r\n Size = \"\",\r\n LinkText,\r\n ToggleListsModal\r\n}) => {\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nListsModalLink.propType = {\r\n AdditionalClasses: PropTypes.string,\r\n Color: PropTypes.string,\r\n Size: PropTypes.string,\r\n LinkText: PropTypes.string.isRequired,\r\n ToggleListsModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default ListsModalLink;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button } from 'reactstrap'\r\n\r\nconst PrintModalLink = ({\r\n TogglePrintModal\r\n}) => {\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nPrintModalLink.propType = {\r\n TogglePrintModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default PrintModalLink;","const miniCart = window && window.MiniCart || {}\r\nconst client = {\r\n refresh() {\r\n return miniCart.refresh && miniCart.refresh();\r\n },\r\n show() {\r\n miniCart.show && miniCart.show();\r\n },\r\n hide() {\r\n miniCart.hide && miniCart.hide();\r\n },\r\n refreshAndShow() {\r\n miniCart.refreshAndShow && miniCart.refreshAndShow();\r\n }\r\n}\r\n\r\nexport default client;","import React, { useState, useEffect } from 'react'\r\nimport { TabPanel } from 'react-tabs'\r\nimport { Button } from 'reactstrap'\r\nimport axios from 'axios';\r\nimport PropTypes from 'prop-types'\r\nimport WishlistProduct from './WishlistProduct'\r\nimport ListsModalLink from './Features/ListsModal/ListsModalLink'\r\nimport PrintModalLink from './Features/PrintModal/PrintModalLink'\r\nimport EditListModalLink from './Features/EditList/EditListModalLink'\r\nimport miniCartClient from '../util/miniCartClient'\r\nimport { translateResourceString } from '../util/translationUtility';\r\nimport { defaultAxiosCatalystPostConfig, makeAxiosCatalystPostData } from \"../util/axiosUtility\";\r\n\r\nconst WishlistsTabPanels = ({\r\n Lists = [],\r\n ToggleEditListModal,\r\n ToggleListsModal,\r\n UpdateLists,\r\n ToggleCopyModal,\r\n ProductCommand,\r\n TogglePrintModal,\r\n PricesAreHidden = false,\r\n AddToCartEndpoint,\r\n AddListToCartEndpoint,\r\n UpdateProductEndpoint,\r\n RemoveItemEndpoint\r\n}) => {\r\n const [itemsUpdating, setItemsUpdating] = useState([]);\r\n const [quantityUpdateRequests, setQuantityUpdateRequests] = useState([]);\r\n\r\n useEffect(() => {\r\n handleUpdateQtyRequest();\r\n });\r\n\r\n const removeProduct = (sku, listIndex) => {\r\n if (Lists[listIndex].Items && Lists[listIndex].Items.length > 0) {\r\n if (window.confirm('Are you sure you wish to delete this product?')) {\r\n Remove(RemoveItemEndpoint, sku, listIndex)\r\n }\r\n }\r\n }\r\n\r\n const updateProducts = (sku, listIndex) => {\r\n let newItems = Lists[listIndex].Items.filter(product => product.SKU !== sku)\r\n let newList = [...Lists.slice(0, listIndex), { Name: Lists[listIndex].Name, Items: newItems }, ...Lists.slice(listIndex + 1, Lists.length)]\r\n UpdateLists(newList)\r\n }\r\n\r\n const Remove = (endpoint, sku, listIndex) => {\r\n axios.post(endpoint, makeAxiosCatalystPostData({\r\n listName: Lists[listIndex].Name,\r\n sku: sku\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n updateProducts(sku, listIndex)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n });\r\n }\r\n\r\n const AddToCart = (sku, quantity) => {\r\n axios.post(AddToCartEndpoint, makeAxiosCatalystPostData({\r\n code: sku,\r\n quantity: quantity\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n //console.log(response.data);\r\n if (response.status === 200) {\r\n if (response.data && response.data.hasError) {\r\n const message = response.data[\"errorMessage\"];\r\n if (message)\r\n alert(message)\r\n else\r\n alert('Unable to add product to cart')\r\n } else {\r\n miniCartClient.refreshAndShow();\r\n }\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n })\r\n }\r\n\r\n const setItemUpdating = (itemSku, isUpdating) => {\r\n if (isUpdating && !itemsUpdating.includes(itemSku)) {\r\n setItemsUpdating([...itemsUpdating, itemSku]);\r\n }\r\n if (!isUpdating && itemsUpdating.includes(itemSku)) {\r\n setItemsUpdating(itemsUpdating.filter(x => { return x !== itemSku; }));\r\n }\r\n }\r\n\r\n const UpdateQty = (sku, listName, quantity) => {\r\n setItemUpdating(sku, true);\r\n setQuantityUpdateRequests([...quantityUpdateRequests, { sku, listName, quantity: parseInt(quantity) }]);\r\n }\r\n\r\n const handleUpdateQtyRequest = async () => {\r\n if (quantityUpdateRequests.length > 0) {\r\n let request = quantityUpdateRequests.shift();\r\n\r\n let response = await axios.post(UpdateProductEndpoint, makeAxiosCatalystPostData({\r\n listName: request.listName,\r\n sku: request.sku,\r\n newQuantity: request.quantity\r\n }),defaultAxiosCatalystPostConfig);\r\n\r\n handleUpdateQtyResponse(response, request.sku, request.listName, request.quantity);\r\n }\r\n }\r\n\r\n const handleUpdateQtyResponse = (response, sku, listName, quantity) => {\r\n switch (response.data) {\r\n case 'OK':\r\n case 200:\r\n updateProductQty(listName, sku, quantity)\r\n break\r\n case 'BadRequest':\r\n case 400:\r\n alert('Invalid parameters')\r\n break\r\n case 'InternalServerError':\r\n case 500:\r\n alert('Something went wrong')\r\n break\r\n default:\r\n console.error('Unhandled Response.')\r\n break\r\n }\r\n\r\n setItemUpdating(sku, false);\r\n }\r\n\r\n const updateProductQty = (listName, sku, quantity) => {\r\n let listIndex = Lists.findIndex(x => x.Name === listName)\r\n let productIndex = Lists[listIndex].Items.findIndex(x => x.SKU === sku)\r\n let product = Lists[listIndex].Items[productIndex]\r\n product.Quantity = quantity\r\n const replace = Number(product.Price.replace(/[^0-9.]/g, ''));\r\n if (!isNaN(replace)) {\r\n product.TotalPrice = (replace * quantity).toLocaleString('en-us', { style: 'currency', currency: 'USD' })\r\n } else {\r\n product.TotalPrice = \"Nan\";\r\n }\r\n\r\n let newItems = [\r\n ...Lists[listIndex].Items.slice(0, productIndex),\r\n product,\r\n ...Lists[listIndex].Items.slice(productIndex + 1, Lists[listIndex].Items.length)\r\n ]\r\n\r\n let newList = [\r\n ...Lists.slice(0, listIndex),\r\n {\r\n Name: Lists[listIndex].Name,\r\n Items: newItems\r\n },\r\n ...Lists.slice(listIndex + 1, Lists.length)\r\n ]\r\n\r\n UpdateLists(newList)\r\n }\r\n\r\n const addListToCart = (listName) => {\r\n axios.post(AddListToCartEndpoint, makeAxiosCatalystPostData({\r\n listName: listName\r\n }), defaultAxiosCatalystPostConfig)\r\n .then(function (response) {\r\n //console.log(response.data);\r\n if (response.status === 200) {\r\n if (response.data && response.data.hasError) {\r\n const message = response.data[\"errorMessages\"];\r\n if (message)\r\n alert(message)\r\n else\r\n alert('Unable to add list to cart')\r\n } else {\r\n miniCartClient.refreshAndShow();\r\n }\r\n }\r\n })\r\n .catch(function (error) {\r\n console.log(error)\r\n })\r\n }\r\n\r\n return (\r\n \r\n \r\n 
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {Name}
\r\n \r\n\r\n {SKU}\r\n
\r\n \r\n {translateResourceString(\"/Wishlists/Items/QuantityLabel\")}:\r\n { onQuantityChange(); }}\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n {ListPrice && \r\n
\r\n \r\n \r\n \r\n {translateResourceString(\"/Wishlists/ViewAndAddListsButton\")}: {ListPrice}\r\n \r\n \r\n
}\r\n \r\n {translateResourceString(\"/Wishlists/Items/UnitPriceLabel\")}: {Price}\r\n \r\n {translateResourceString(\"/Wishlists/Items/TotalPriceLabel\")}: {TotalPrice}
\r\n \r\n\r\n \r\n \r\n
\r\n - \r\n \r\n \r\n
\r\n {\r\n Lists.map((list, i) =>\r\n \r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nWishlistsTabPanels.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.array\r\n })\r\n ),\r\n ToggleEditListModal: PropTypes.func.isRequired,\r\n ToggleListsModal: PropTypes.func.isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ToggleCopyModal: PropTypes.func.isRequired,\r\n ProductCommand: PropTypes.shape({\r\n ListId: PropTypes.string.isRequired,\r\n ProductId: PropTypes.number.isRequired,\r\n RemoveAfter: PropTypes.bool.isRequired\r\n }).isRequired,\r\n TogglePrintModal: PropTypes.func.isRequired,\r\n PricesAreHidden: PropTypes.bool,\r\n AddToCartEndpoint: PropTypes.string.isRequired,\r\n AddListToCartEndpoint: PropTypes.string.isRequired,\r\n UpdateProductEndpoint: PropTypes.string.isRequired,\r\n RemoveItemEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default WishlistsTabPanels;\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport NewListInput from '../../Components/NewListInput';\r\n\r\nconst NewListModal = ({\r\n Lists,\r\n UpdateLists,\r\n IsOpen,\r\n ToggleNewListModal,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n \r\n
\r\n {list.Name}
\r\n\r\n
\r\n - \r\n
- \r\n {\r\n list.Items.map((item, j) =>\r\n
{Name}
\r\n- \r\n {\r\n Lists.map((list, i) =>\r\n
\r\n
\r\n {translateResourceString(\"/Wishlists/ViewAndAddModal/CreateListLabel\")}
\r\n\r\n {\r\n Lists.map((list, i) =>\r\n \r\n {\r\n list.Items.map((item, j) =>\r\n \r\n )\r\n }\r\n
\r\n );\r\n};\r\n\r\nModalTabPanels.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string,\r\n Items: PropTypes.array\r\n })\r\n ).isRequired\r\n};\r\n\r\nexport default ModalTabPanels;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Tabs } from 'react-tabs'\r\nimport ModalTab from './ModalTab'\r\nimport ModalTabList from './ModalTabList'\r\nimport ModalTabPanels from './ModalTabPanels'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport { translateResourceString } from '../../../util/translationUtility'\r\n\r\nconst ListsModal = ({\r\n Lists = [],\r\n UpdateLists,\r\n ListsModalIsOpen,\r\n ToggleListsModal,\r\n ActiveTabIndex = 0,\r\n SelectActiveTab = null,\r\n CreateListEndpoint\r\n}) => {\r\n return (\r\n \r\n
\r\n \r\n { SelectActiveTab(index); ToggleListsModal(false); }}>\r\n {ModalTabPanels({ Lists: Lists })}\r\n {ModalTabList({ \r\n Lists: Lists, \r\n UpdateLists: UpdateLists,\r\n ActiveTabIndex: ActiveTabIndex,\r\n SelectActiveTab: SelectActiveTab,\r\n CreateListEndpoint: CreateListEndpoint\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {Name}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n - \r\n {\r\n Lists.map((list, i) =>\r\n
\r\n
\r\n {translateResourceString('/Wishlists/ViewAndAddModal/CreateListLabel')}
\r\n{message}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nQuickOrderEntry.propTypes = {\r\n deleteRow: PropTypes.func,\r\n onQueryChange: PropTypes.func,\r\n onSkuSet: PropTypes.func,\r\n onQuantityChange: PropTypes.func,\r\n onQuantityBlur: PropTypes.func,\r\n onRef: PropTypes.func,\r\n onFocusChanged: PropTypes.func,\r\n query: PropTypes.string,\r\n selectedSku: PropTypes.string,\r\n quantity: PropTypes.number,\r\n minQuantity: PropTypes.number,\r\n maxQuantity: PropTypes.number,\r\n Name: PropTypes.string,\r\n isSearching: PropTypes.bool,\r\n translationUtility: PropTypes.object,\r\n autocompleteItems: PropTypes.arrayOf(PropTypes.object),\r\n hideCloseButton: PropTypes.bool,\r\n};\r\n\r\nexport default QuickOrderEntry;","import React from 'react'\r\nimport { Transition } from 'react-transition-group'\r\n\r\nconst duration = 200;\r\n\r\nconst defaultStyle = {\r\n transition: `opacity ${duration}ms ease-in-out`,\r\n opacity: 0\r\n}\r\n\r\nconst transitionStyles = {\r\n entering: { opacity: 0 },\r\n entered: { opacity: 1 }\r\n};\r\n\r\n// BBS DDD 2017-11-28 VS reports an error between the \"Transition\" \r\n// element name and the \"in\" attribute in the openting tag b/ c \"in\"\r\n// is an ES6 reserved word, but it appears to \"just work\" despite the error\r\nexport const Fade = ({ inProp, children, disableAnimation }) => (\r\n (disableAnimation)\r\n ? (\r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n this.props.onFocusChanged(true)}\r\n onBlur={(e) => this.props.onFocusChanged(false)}\r\n value={this.props.query}\r\n onChange={(e) => this.props.onQueryChange(e.target.value)}\r\n />\r\n
\r\n \r\n
\r\n - \r\n {this.props.autocompleteItems.map((item, index) => {\r\n return
- this.onSelectSuggestedItem(item.Sku)} >\r\n
\r\n {this.props.searchedQuery}\r\n {item.MatchedField === \"name\"\r\n ? (item.VariationName.length > searchedQueryLength ? item.VariationName.substring(searchedQueryLength) : \"\")\r\n : (item.Sku.length > searchedQueryLength ? item.Sku.substring(searchedQueryLength) : \"\")\r\n }\r\n
\r\n })}\r\n
\r\n { this.props.onQuantityChange(e.target.value); }}\r\n onBlur={(e) => { this.props.onQuantityBlur(e.target.value); }} />\r\n
\r\n \r\n {!this.props.hideCloseButton &&\r\n \r\n }\r\n
\r\n \r\n
\r\n \r\n {itemLabel}\r\n
\r\n \r\n {translationUtility.translateResourceString(\"/QuickOrder/QuantityLabel\")}\r\n
\r\n {children}
)\r\n : (\r\n {children}\r\n
\r\n )}\r\n {line}
))}\r\n\r\n {children}\r\n
\r\n )\r\n }\r\n}\r\n\r\nMessagesList.propTypes = {\r\n messages: PropTypes.arrayOf(PropTypes.shape({\r\n id: PropTypes.number.isRequired,\r\n text: PropTypes.string.isRequired,\r\n type: PropTypes.string.isRequired\r\n })),\r\n onDismiss: PropTypes.func\r\n}\r\n\r\nexport default MessagesList\r\n","export const UNKNOWN_USER_ALERT = \"UNKNOWN_USER_ALERT_TYPE\";\r\nexport const ERROR_USER_ALERT = \"ERROR_USER_ALERT_TYPE\";\r\nexport const INFO_USER_ALERT = \"INFO_USER_ALERT_TYPE\";","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport fetch from 'cross-fetch';\r\n\r\nimport QuickOrderEntry from \"./Features/QuickOrderEntry\";\r\n\r\nimport { createGuid } from '../util/guidUtility';\r\nimport { TranslationUtility } from '../util/translationUtility';\r\n\r\nimport { MessagesList, ERROR_USER_ALERT, INFO_USER_ALERT } from '../SharedComponents/UserMessaging/';\r\nimport { makeCatalystFetchPostInit } from \"../util/fetchUtility\";\r\n\r\nlet messageId = 0;\r\n\r\nconst createUserMessage = ({ text, type }) => ({ id: messageId++, text, type });\r\n\r\nclass QuickOrderApp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.translationUtility = new TranslationUtility(props.LocalizationItems);\r\n\r\n this.state = {\r\n entries: [\r\n this.createEntry()\r\n ],\r\n isAddingToCart: false,\r\n userMessages: []\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n require('./QuickOrderApp.css');\r\n }\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n const entries = this.state.entries;\r\n for (let i = 0; i < entries.length; i++) {\r\n if (entries[i].hasFocus && entries[i].query !== prevState.entries[i].query) {\r\n this.handleQueryChanged(i);\r\n }\r\n }\r\n }\r\n\r\n createEntry() {\r\n return {\r\n key: createGuid(),\r\n query: \"\",\r\n searchedQuery: \"\",\r\n selectedSku: \"\",\r\n quantity: -1,\r\n itemName: \"\",\r\n itemMinQty: 1,\r\n itemMaxQty: 999999,\r\n searchCompleted: false,\r\n isValid: false,\r\n isEmpty: true,\r\n hasFocus: false,\r\n autocompleteItems: []\r\n };\r\n }\r\n\r\n onFocusChanged(index, hasFocus) {\r\n this.setState(prevState => {\r\n const entries = prevState.entries;\r\n entries[index].hasFocus = hasFocus;\r\n return { entries };\r\n });\r\n let entry = this.state.entries[index];\r\n if (!hasFocus && entry.autocompleteItems.length === 1 && entry.autocompleteItems[0].Sku === entry.query) {\r\n this.onEntrySkuSet(index, entry.query);\r\n }\r\n }\r\n\r\n deleteRow = (index) => {\r\n const rows = [...this.state.entries];\r\n\r\n if (rows.length === (index + 1)) {\r\n return;\r\n }\r\n\r\n rows.splice(index, 1);\r\n this.setState({ entries: rows });\r\n }\r\n\r\n onEntryQueryChange = (index, query) => {\r\n if (this.state.entries[index].ignoreChange) return;\r\n\r\n let entries = JSON.parse(JSON.stringify(this.state.entries));\r\n entries[index].isEmpty = query === \"\";\r\n entries[index].query = query;\r\n entries[index].searchCompleted = false;\r\n if (!!entries[index].selectedSku && entries[index].selectedSku !== query) {\r\n entries[index].selectedSku = \"\";\r\n entries[index].isValid = false;\r\n }\r\n\r\n this.setState({ entries });\r\n }\r\n\r\n handleQueryChanged = (index) => {\r\n clearTimeout(this.timer);\r\n this.timer = setTimeout(() => {\r\n this.getAutocompleteItems(index);\r\n }, 500);\r\n }\r\n\r\n onEntrySkuSet = (index, sku) => {\r\n var item = this.state.entries[index].autocompleteItems.find((e) => { return e.Sku === sku; });\r\n var updatedEntries = JSON.parse(JSON.stringify(this.state.entries));\r\n\r\n if (!!item) {\r\n updatedEntries[index].query = item.Sku;\r\n updatedEntries[index].selectedSku = item.Sku;\r\n updatedEntries[index].itemName = item.VariationName;\r\n updatedEntries[index].quantity = item.MinQty || 0;\r\n updatedEntries[index].itemMinQty = item.MinQty;\r\n updatedEntries[index].itemMaxQty = item.MaxQty;\r\n updatedEntries[index].autocompleteItems = [];\r\n updatedEntries[index].isValid = true;\r\n\r\n if (!!updatedEntries[updatedEntries.length - 1].selectedSku) {\r\n updatedEntries.push(this.createEntry());\r\n }\r\n } else {\r\n updatedEntries[index].selectedSku = \"\";\r\n updatedEntries[index].itemName = \"\";\r\n updatedEntries[index].quantity = 0;\r\n updatedEntries[index].isValid = false;\r\n }\r\n\r\n this.setState({ entries: updatedEntries })\r\n }\r\n\r\n addRow = () => {\r\n this.setState((prevState) => {\r\n return { entries: [...prevState.entries, this.createEntry()] }\r\n });\r\n }\r\n\r\n onQuantityChange = (index, qty) => {\r\n this.setState((prevState) => {\r\n var entriesCopy = [...prevState.entries];\r\n var currentEntry = entriesCopy[index];\r\n\r\n var quantity = Number(qty) || -1;\r\n\r\n currentEntry.quantity = quantity;\r\n return { entries: entriesCopy };\r\n });\r\n }\r\n\r\n onQuantityBlur = (index, qty) => {\r\n this.setState((prevState) => {\r\n var entriesCopy = [...prevState.entries];\r\n var currentEntry = entriesCopy[index];\r\n\r\n var quantity = Number(qty) || -1;\r\n\r\n if (quantity < currentEntry.itemMinQty) {\r\n quantity = currentEntry.itemMinQty;\r\n } else if (quantity > currentEntry.itemMaxQty) {\r\n quantity = currentEntry.itemMaxQty;\r\n }\r\n\r\n currentEntry.quantity = quantity;\r\n return { entries: entriesCopy };\r\n });\r\n }\r\n\r\n onAddItemsToCart = () => {\r\n this.setState({ isAddingToCart: true });\r\n\r\n var addToCartPromises = [];\r\n var entriesCopy = [...this.state.entries];\r\n var entriesAdded = 0;\r\n\r\n for (let i = 0; i < this.state.entries.length - 1; i++) {// There should always be one extra entry\r\n addToCartPromises.push(this.addItemToCart(this.state.entries[i].selectedSku, this.state.entries[i].quantity));\r\n entriesCopy.splice(i - entriesAdded, 1);\r\n entriesAdded++;\r\n }\r\n\r\n //this.state.entries.forEach((entry, i) => {\r\n // addToCartPromises.push(this.addItemToCart(entry.selectedSku, entry.quantity));\r\n // entriesCopy.splice(i - entriesAdded, 1);\r\n // entriesAdded++;\r\n //});\r\n\r\n var messages = [];\r\n Promise\r\n .all(addToCartPromises)\r\n .then((values) => {\r\n values.forEach(value => {\r\n messages.push(value);\r\n });\r\n })\r\n .finally(() => {\r\n this.setState({\r\n entries: entriesCopy,\r\n isAddingToCart: false,\r\n userMessages: messages\r\n });\r\n this.updateMiniCart();\r\n });\r\n }\r\n\r\n addItemToCart = (code, quantity) => {\r\n const submitMethod = 'POST';\r\n return new Promise((resolve) => {\r\n fetch(this.props.AddToCartEndpoint, makeCatalystFetchPostInit({ code: code, quantity: quantity }))\r\n .then((response) => {\r\n if (response.ok) {\r\n resolve(createUserMessage({\r\n text: this.translationUtility.translateResourceString(\"/QuickOrder/ItemWithSkuAddedFormatted\", code),\r\n type: INFO_USER_ALERT\r\n }));\r\n } else {\r\n if (typeof console !== 'undefined' && console.log) {\r\n console.error(`Error sending ${submitMethod} to ${this.props.AddToCartEndpoint}: (${response.statusCode}) ${response.statusText}`);\r\n }\r\n var errorMessage = response.statusText;\r\n resolve(createUserMessage({\r\n text: this.translationUtility.translateResourceString(\"/QuickOrder/ErrorFormatted\", code, errorMessage, errorMessage && errorMessage[errorMessage.length] === '.' || '.')``,\r\n type: ERROR_USER_ALERT\r\n }));\r\n }\r\n });\r\n });\r\n }\r\n\r\n // Updates mini cart - could be moved to another file if we need to call it elsewhere\r\n updateMiniCart = () => {\r\n if (window && window.MiniCart && window.MiniCart.refresh) {\r\n window.MiniCart.refresh();\r\n }\r\n }\r\n\r\n onDismissMessage = (id) => {\r\n this.setState({\r\n userMessages: (this.state.userMessages\r\n ? this.state.userMessages.filter((message) => message.Id !== id)\r\n : [])\r\n });\r\n }\r\n\r\n renderLoginMessage = () => {\r\n const {\r\n LoginPageLink,\r\n RegistrationPageLink\r\n } = this.props;\r\n\r\n\r\n return (\r\n \r\n {this.translationUtility.translateResourceString('/QuickOrder/LoginLinkText')} {this.translationUtility.translateResourceString('/QuickOrder/TextAfterLoginLink')} {this.translationUtility.translateResourceString('/QuickOrder/RegisterLinkText')} {this.translationUtility.translateResourceString('/QuickOrder/TextAfterRegisterLink')}\r\n \r\n );\r\n\r\n }\r\n\r\n getAutocompleteItems = (index) => {\r\n fetch(this.props.AutocompleteEndpoint + '?query=' + this.state.entries[index].query)\r\n .then(response => response.json())\r\n .then(data => {\r\n let entries = JSON.parse(JSON.stringify(this.state.entries));\r\n entries[index].searchCompleted = true;\r\n entries[index].searchedQuery = entries[index].query\r\n entries[index].autocompleteItems = data;\r\n this.setState({ entries });\r\n });\r\n }\r\n\r\n render() {\r\n const {\r\n entries\r\n } = this.state;\r\n const isSubmitting = this.state.isAddingToCart;\r\n const addToCartLabel = isSubmitting ? this.translationUtility.translateResourceString(\"/QuickOrder/AddingItemsButton\") : this.translationUtility.translateResourceString(\"/QuickOrder/AddToCartButton\");\r\n const entriesLength = entries.length;\r\n const invalidEntries = !entries || entries.length === 0 || entries.filter(ent => !ent.isValid && !ent.isEmpty).length > 0 || entries.filter(ent => ent.isValid).length === 0;\r\n if (!this.props.UserIsAuthorized) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n {this.renderLoginMessage()}\r\n
\r\n \r\n {entries.map((entry, index) =>\r\n this.deleteRow(index)}\r\n onQueryChange={(value) => this.onEntryQueryChange(index, value)}\r\n onSkuSet={(value) => this.onEntrySkuSet(index, value)}\r\n onQuantityChange={(value) => this.onQuantityChange(index, value)}\r\n onQuantityBlur={(value) => this.onQuantityBlur(index, value)}\r\n onFocusChanged={(hasFocus) => this.onFocusChanged(index, hasFocus)}\r\n //onRef={ref => (entry.getVariationCode = ref.getVariationCode)}\r\n hideCloseButton={index === (entriesLength - 1)}\r\n translationUtility={this.translationUtility}\r\n autocompleteItems={entry.autocompleteItems}\r\n {...entry}\r\n />\r\n )}\r\n\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nQuickOrderApp.propTypes = {\r\n ApiEndPoint: PropTypes.string,\r\n AddToCartEndpoint: PropTypes.string,\r\n UserIsAuthorized: PropTypes.bool,\r\n LoginPageLink: PropTypes.string,\r\n RegistrationPageLink: PropTypes.string,\r\n LocalizationItems: PropTypes.array,\r\n BulkUploadUrl: PropTypes.string\r\n};\r\n\r\nexport default QuickOrderApp;","import quickOrderApp from './QuickOrderApp'\r\nexport default quickOrderApp","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\n\r\nconst TypeaheadEntry = ({ href, name, selected, imageUrl }) => {\r\n const typeaheadEntryClass = classNames(\r\n 'typeahead-result-wrapper',\r\n { 'selected': selected },\r\n );\r\n return \r\n}\r\n\r\nTypeaheadEntry.propTypes = {\r\n href: PropTypes.string.isRequired,\r\n name: PropTypes.string.isRequired,\r\n selected: PropTypes.bool,\r\n imageUrl: PropTypes.string\r\n};\r\n\r\nexport default TypeaheadEntry;","export function buildSearchTermUrl({ searchSubmitLink, searchTerm }) {\r\n return `${searchSubmitLink}?searchString=${encodeURIComponent(searchTerm)}`;\r\n}","import React from 'react';\r\nimport TypeaheadEntry from './TypeaheadEntry';\r\nimport { buildSearchTermUrl } from './urlBuilder.js';\r\nimport PropTypes from 'prop-types';\r\n\r\nconst TypeaheadResults = ({\r\n searchTerms,\r\n categories,\r\n products,\r\n articles,\r\n currentSearchTerm,\r\n searchSubmitLink,\r\n selected,\r\n translationUtility\r\n}) => {\r\n return (\r\n \r\n
\r\n\r\n \r\n \r\n {addToCartLabel}\r\n \r\n \r\n {this.translationUtility.translateResourceString('/QuickOrder/BulkUploadButton')}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {searchTerms.length > 0 &&\r\n \r\n {searchTerms.map((searchTerm, key) => {\r\n const href = buildSearchTermUrl({ searchSubmitLink, searchTerm });\r\n return (\r\n
\r\n }\r\n {/* Not currently displaying categories */}\r\n {/* {categories.length > 0 &&\r\n {translationUtility.translateResourceString(\"/Typeahead/Index/SearchTermResultseading\")}
\r\n {categories.map((category, key) => {\r\n return (\r\n\r\n \r\n {translationUtility.translateResourceString(\"/Typeahead/Index/SeeAllResultsLink\")} \r\n \r\n
\r\n }\r\n \r\n )\r\n}\r\n\r\nTypeaheadResults.propTypes = {\r\n searchTerms: PropTypes.arrayOf(PropTypes.string),\r\n categories: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string\r\n })),\r\n products: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string,\r\n ImageUrl: PropTypes.string\r\n })),\r\n articles: PropTypes.arrayOf(PropTypes.shape({\r\n Name: PropTypes.string,\r\n Url: PropTypes.string\r\n })),\r\n currentSearchTerm: PropTypes.string,\r\n searchSubmitLink: PropTypes.string,\r\n selected: PropTypes.any\r\n};\r\n\r\nexport default TypeaheadResults;\r\n","export function closeKeyboardOnScroll(e) {\r\n document.activeElement.blur();\r\n scrollUp();\r\n document.addEventListener(\"touchend\", scrollUp);\r\n}\r\nexport function scrollUp() {\r\n //window.ontouchmove = \"preventDefault\"; // mobile\r\n window.scrollTo(0, 0);\r\n document.removeEventListener(\"touchend\", scrollUp);\r\n\r\n}","import fetch from 'cross-fetch';\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport TypeaheadResults from './TypeaheadResults';\r\nimport { buildSearchTermUrl } from './urlBuilder.js';\r\nimport { TranslationUtility } from '../util/translationUtility';\r\nimport { closeKeyboardOnScroll } from './closeKeyboardOnScroll';\r\nimport $ from 'jquery';\r\nimport { scrollUp } from './closeKeyboardOnScroll';\r\nimport {Nav} from \"reactstrap\";\r\n\r\nconst MIN_LENGTH = 0;\r\n\r\nconst TYPE_INTERVAL_IN_MS = 300;\r\n\r\nclass TypeaheadApp extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n results: [],\r\n searchTerm: '',\r\n searchKey: null,\r\n showSuggestions: false,\r\n showMobileSearch: false,\r\n requests: [],\r\n };\r\n\r\n this.onSearchChange = this.onSearchChange.bind(this);\r\n this.needsToSearch = this.needsToSearch.bind(this);\r\n this.fetchResults = this.fetchResults.bind(this);\r\n this.onFocus = this.onFocus.bind(this);\r\n this.onFocusMobile = this.onFocusMobile.bind(this);\r\n this.setWrapperRef = this.setWrapperRef.bind(this);\r\n this.handleClickOutside = this.handleClickOutside.bind(this);\r\n this.fetchIntervalId = null;\r\n this.onMobileSearchClick = this.onMobileSearchClick.bind(this);\r\n this.onDesktopSearchClick = this.onDesktopSearchClick.bind(this);\r\n this.onCancelMobileSearchClick = this.onCancelMobileSearchClick.bind(this);\r\n this.hideDocumentOverflow = this.hideDocumentOverflow.bind(this);\r\n this.onKeyPress = this.onKeyPress.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n componentWillUnmount() {\r\n document.removeEventListener('mousedown', this.handleClickOutside);\r\n }\r\n\r\n setWrapperRef(node) {\r\n this.wrapperRef = node;\r\n }\r\n\r\n handleClickOutside(event) {\r\n if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {\r\n this.setState({ showSuggestions: false });\r\n document.removeEventListener(\"scroll\", closeKeyboardOnScroll);\r\n }\r\n }\r\n\r\n setResults(searchTerm, result) {\r\n this.setState(prevState => {\r\n const {\r\n results,\r\n } = prevState;\r\n\r\n results[searchTerm] = {\r\n searchTerms: (\r\n result &&\r\n result.SearchTerms\r\n ) || [],\r\n articles: (\r\n result &&\r\n result.Articles\r\n ) || [],\r\n categories: (\r\n result &&\r\n result.Categories\r\n ) || [],\r\n products: (\r\n result &&\r\n result.Products\r\n ) || []\r\n };\r\n\r\n return ({\r\n results\r\n });\r\n })\r\n }\r\n\r\n fetchResults(searchTerm) {\r\n const { ApiEndPoint } = this.props;\r\n fetch(buildSearchTermUrl({ searchSubmitLink: ApiEndPoint, searchTerm }))\r\n .then(response => response.json())\r\n .then(result => this.setResults(searchTerm, result));\r\n }\r\n\r\n needsToSearch(searchKey) {\r\n return searchKey && searchKey.length > MIN_LENGTH && (!this.state.results || !this.state.results[searchKey]);\r\n }\r\n\r\n onKeyPress(event) {\r\n if (event.key === 'Enter') {\r\n event.target.form.submit();\r\n }\r\n }\r\n \r\n onSearchChange(event) { \r\n let searchKey = event.target.value;\r\n\r\n // Remove <, >, and = characters from searchKey and searchTerm\r\n searchKey = searchKey.replace(/[<>==]/g, '');\r\n\r\n const searchTerm = searchKey; // Updated to use sanitized searchKey\r\n this.setState(prevState => {\r\n let { requests } = prevState;\r\n if (searchKey.trim() === \"\") {\r\n requests = [];\r\n } else {\r\n requests.push(searchTerm);\r\n }\r\n return ({ searchKey, searchTerm, requests });\r\n });\r\n\r\n if (this.needsToSearch(searchKey)) {\r\n // console.log(`needs to search for ${searchKey}`);\r\n clearTimeout(this.fetchIntervalId);\r\n this.fetchIntervalId = setTimeout(() => this.fetchResults(searchKey), TYPE_INTERVAL_IN_MS);\r\n }\r\n }\r\n\r\n flattenResults() {\r\n const {\r\n results,\r\n searchKey\r\n } = this.state;\r\n\r\n if (!results || !searchKey || searchKey.length === 0 || !results[searchKey]) {\r\n return [];\r\n }\r\n\r\n const currentResults = results[searchKey];\r\n return [\r\n ...currentResults.searchTerms,\r\n ...currentResults.categories,\r\n ...currentResults.products,\r\n ...currentResults.articles\r\n ];\r\n }\r\n\r\n onFocus() {\r\n this.setState({ showSuggestions: true });\r\n }\r\n\r\n onFocusMobile() {\r\n this.setState({ showSuggestions: true });\r\n }\r\n\r\n hideDocumentOverflow(hide) {\r\n //prevents body scroll when search is open so that scrolling is only possible within search\r\n document.body.style.overflow = hide ? \"hidden\" : \"\"\r\n }\r\n onDesktopSearchClick() {\r\n this.setState({ showDesktopSearch: !this.state.showDesktopSearch });\r\n }\r\n\r\n onMobileSearchClick() {\r\n this.setState({ showMobileSearch: true });\r\n this.hideDocumentOverflow(true);\r\n }\r\n\r\n onCancelMobileSearchClick() {\r\n this.setState({ showMobileSearch: false, searchTerm: '', results: []});\r\n this.hideDocumentOverflow(false);\r\n }\r\n\r\n render() {\r\n const {\r\n SearchSubmitLink,\r\n LocalizationItems\r\n } = this.props;\r\n const translationUtility = new TranslationUtility(LocalizationItems);\r\n const {\r\n results,\r\n searchTerm,\r\n selected,\r\n searchKey,\r\n showSuggestions,\r\n showMobileSearch,\r\n showDesktopSearch,\r\n requests\r\n } = this.state;\r\n\r\n let searchResultsToShow = null;\r\n if (searchTerm.trim() !== \"\") {\r\n searchResultsToShow = results[searchKey]; // Check for results\r\n\r\n // if there are none, let's look at most recent requests\r\n if (!searchResultsToShow) {\r\n for (var i = requests.length - 1; i >= 0; i--) {\r\n const resultsKey = requests[i];\r\n if (results[resultsKey]) {\r\n searchResultsToShow = results[resultsKey];\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n const searchTerms = (\r\n searchResultsToShow &&\r\n searchResultsToShow.searchTerms\r\n ) || [];\r\n\r\n const articles = (\r\n searchResultsToShow &&\r\n searchResultsToShow.articles\r\n ) || [];\r\n\r\n const categories = (\r\n searchResultsToShow &&\r\n searchResultsToShow.categories\r\n ) || [];\r\n\r\n const products = (\r\n searchResultsToShow &&\r\n searchResultsToShow.products\r\n ) || [];\r\n\r\n const anyResults = (\r\n searchTerms.length > 0 ||\r\n articles.length > 0 ||\r\n categories.length > 0 ||\r\n products.length > 0\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {anyResults && showSuggestions &&\r\n \r\n {anyResults &&\r\n \r\n \r\n \r\n }\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n {anyResults &&\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Product;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Product from './Product';\r\nimport { hiddenAnchorStyle } from \"../checkout/components\";\r\nimport { makeCatalystFetchPostInit } from \"../util/fetchUtility\";\r\n\r\nclass Order extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n productsToShowCount: props.startOpen ?\r\n Math.min(4, props.LineItemCount)\r\n : 0,\r\n products: [],\r\n reordering: false,\r\n fetchedAll: false,\r\n fetching: false\r\n };\r\n\r\n this.fetchProducts = this.fetchProducts.bind(this)\r\n this.handleViewAllItemsInOrder = this.handleViewAllItemsInOrder.bind(this)\r\n this.handleReorder = this.handleReorder.bind(this);\r\n this.handleReorderError = this.handleReorderError.bind(this);\r\n this.handleReorderSuccess = this.handleReorderSuccess.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n const {\r\n productsToShowCount,\r\n products\r\n } = this.state;\r\n if(productsToShowCount > 0 && products.length === 0) {\r\n if(productsToShowCount >= this.props.LineItemCount) {\r\n this.setState({\r\n fetchedAll: true\r\n });\r\n }\r\n this.fetchProducts(productsToShowCount);\r\n }\r\n }\r\n\r\n fetchProducts(productToFetchCount) {\r\n const {\r\n ProductsApiEndpoint,\r\n OrderNumber\r\n } = this.props;\r\n this.setState({\r\n fetching: true\r\n });\r\n fetch(`${ProductsApiEndpoint}?orderNumber=${OrderNumber}&skip=0&take=${productToFetchCount}`)\r\n .then(response => response.json())\r\n .then(json => this.setState({\r\n products: json,\r\n fetching: false\r\n }));\r\n }\r\n\r\n handleViewAllItemsInOrder() {\r\n if(!this.state.fetchedAll) {\r\n this.fetchProducts(this.props.LineItemCount);\r\n }\r\n\r\n this.setState({\r\n productsToShowCount: this.props.LineItemCount,\r\n fetchedAll: true\r\n });\r\n }\r\n\r\n handleReorder() {\r\n const {\r\n ReorderCartEndpoint,\r\n OrderNumber\r\n } = this.props;\r\n\r\n this.setState({\r\n reordering: true\r\n });\r\n\r\n fetch(ReorderCartEndpoint, makeCatalystFetchPostInit({orderNumber: OrderNumber }))\r\n .then(response => {\r\n this.setState({reOrdering: false});\r\n return response.json();\r\n })\r\n .then(json => {\r\n if(json && json.hasError === false) {\r\n this.handleReorderSuccess();\r\n } else {\r\n if(json && json.message) {\r\n console.log(json.message);\r\n }\r\n this.handleReorderError();\r\n }\r\n })\r\n .catch(\r\n error => {\r\n console.log(error);\r\n this.handleReorderError();\r\n }\r\n )\r\n }\r\n\r\n handleReorderError() {\r\n this.setState({\r\n error: true,\r\n reordering: false\r\n });\r\n }\r\n\r\n handleReorderSuccess() {\r\n this.setState({\r\n error: false,\r\n reordering: false\r\n });\r\n\r\n if(window.MiniCart && window.MiniCart.refreshAndShow) {\r\n window.MiniCart.refreshAndShow();\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n OrderNumber,\r\n LineItemCount,\r\n OrderDate,\r\n Total,\r\n AddToCartEndpoint,\r\n translationUtility\r\n } = this.props;\r\n const {\r\n products,\r\n productsToShowCount,\r\n reordering,\r\n fetching\r\n } = this.state;\r\n return (\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nOrder.propTypes = {\r\n OrderNumber: PropTypes.string,\r\n LineItemCount: PropTypes.number,\r\n OrderDate: PropTypes.string,\r\n Total: PropTypes.string,\r\n ProductsApiEndpoint: PropTypes.string,\r\n AddToCartEndpoint: PropTypes.string\r\n};\r\n\r\nexport default Order;\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Order from './Order';\r\nimport { translateResourceString, TranslationUtility } from '../util/translationUtility';\r\n\r\n\r\nclass Reorder extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n orderCount: props.OrderCount,\r\n orders: []\r\n };\r\n this.translationUtility = new TranslationUtility(props.LocalizationItems);\r\n }\r\n\r\n componentDidMount() {\r\n require('./reorderApp.css');\r\n fetch(`${this.props.OrdersApiEndpoint}?skip=0&take=20`)\r\n .then(response => response.json())\r\n .then(json => this.setState({\r\n orders: json\r\n }));\r\n }\r\n\r\n render() {\r\n const { orders } = this.state;\r\n if (orders.length === 0) {\r\n return (\r\n \r\n
\r\n {translationUtility.translateResourceString('/Reorder/OrderNumber')}: {OrderNumber}
\r\n {OrderDate}
\r\n \r\n {productsToShowCount > 0\r\n ?
\r\n \r\n
\r\n : {translationUtility.translateResourceString(\"/Reorder/ViewAllItemsInOrderButton\")}\r\n }\r\n \r\n
\r\n \r\n {translationUtility.translateResourceString(\"/Reorder/Showing\")} {products.length} {translationUtility.translateResourceString(\"/Reorder/Of\")} {LineItemCount} {translationUtility.translateResourceString(\"/Reorder/Items\")} {productsToShowCount < LineItemCount ? : \"\"}\r\n \r\n
\r\n \r\n {products.map((product, i) =>
\r\n {productsToShowCount > 0 && productsToShowCount === LineItemCount && products.length !== LineItemCount && !fetching &&\r\n \r\n
\r\n }\r\n \r\n {translationUtility.translateResourceString(\"/Reorder/UnableToLoadAllItems\")}\r\n
\r\n \r\n
\r\n {translationUtility.translateResourceString(\"/Reorder/TotalLabel\")}: {Total}
\r\n \r\n \r\n {this.translationUtility.translateResourceString(\"/Reorder/NoOrders\")}\r\n
\r\n\r\n )\r\n }\r\n return (\r\n \r\n {orders.map((order, i) =>\r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nReorder.propTypes = {\r\n OrdersApiEndpoint: PropTypes.string,\r\n ProductsApiEndpoint: PropTypes.string,\r\n AddToCartEndpoint: PropTypes.string,\r\n OrderCount: PropTypes.number\r\n};\r\n\r\nexport default Reorder;\r\n","import reorder from './ReorderApp'\r\nexport default reorder","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst ModalLink = ({\r\n ClassName,\r\n LinkText,\r\n SrText,\r\n ToggleModal\r\n}) => {\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nModalLink.propType = {\r\n ClassName: PropTypes.string,\r\n LinkText: PropTypes.string.isRequired,\r\n ToggleModal: PropTypes.func.isRequired\r\n};\r\n\r\nexport default ModalLink;","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst ModalTab = ({ \r\n Name,\r\n AddProduct\r\n }) => {\r\n return (\r\n {Name}
\r\n\r\n
\r\n \r\n\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n - \r\n {\r\n Lists.map((list, i) =>\r\n
\r\n
\r\n {translateResourceString('/Wishlists/ViewAndAddModal/CreateListLabel')}
\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nNewListInput.propType = {\r\n Lists: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n Name: PropTypes.string\r\n })\r\n ).isRequired,\r\n UpdateLists: PropTypes.func.isRequired,\r\n ToggleNewListModal: PropTypes.func,\r\n SelectActiveTab: PropTypes.func,\r\n CreateListEndpoint: PropTypes.string.isRequired\r\n};\r\n\r\nexport default NewListInput;","// BBS DDD from https://stackoverflow.com/questions/7905929/how-to-test-valid-uuid-guid\r\nconst guidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;\r\n\r\nexport const isValidGuid = (s) => guidRegex.test(s);\r\n\r\n// https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript\r\nexport const createGuid = () => {\r\n try {\r\n if (typeof crypto === \"undefined\") {\r\n crypto = window.msCrypto || window.crypto;\r\n }\r\n return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => \r\n (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));\r\n } catch(error) {\r\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\r\n var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);\r\n return v.toString(16);\r\n });\r\n }\r\n};","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst ProductItem = ({ \r\n Name, \r\n ImageUrl,\r\n Link \r\n}) => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nProductItem.propType = {\r\n Name: PropTypes.string,\r\n ImageUrl: PropTypes.string,\r\n Link: PropTypes.string\r\n};\r\n\r\nexport default ProductItem;","/** Create a URLSearchParams from a FormData object. Not suitable for Blob\r\n * @throws if data is Blob\r\n * */\r\nconst formDataToBody = (formData) => {\r\n if (formData instanceof FormData) {\r\n for (var value of formData.values()) {\r\n if (value instanceof Blob) {\r\n // to do this we should implement a multipart-form-data content-type\r\n // see https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data\r\n // see https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects\r\n throw new Error(\"cannot yet use Blobs in catalystFormDataBuilder\")\r\n }\r\n }\r\n }\r\n return new URLSearchParams(formData);\r\n};\r\n\r\nlet addArrayElement = (formData, prefix, datum, i) => {\r\n addData(formData, `${prefix}[${i}]`, datum)\r\n}\r\n\r\nlet addArray = (formData, prefix, data) => {\r\n let i = 0\r\n data.forEach(datum => addArrayElement(formData, prefix, datum, i++))\r\n}\r\n\r\nlet addObject = (formData, prefix, data) => {\r\n var keys = Object.getOwnPropertyNames(data);\r\n if (prefix !== \"\") {\r\n prefix += \".\"\r\n }\r\n for (const key of keys) {\r\n addData(formData, prefix + key, data[key])\r\n }\r\n}\r\n\r\nlet addData = (formData, prefix, data) => {\r\n if (data === null) return;\r\n if (Array.isArray(data)) {\r\n addArray(formData, prefix, data)\r\n } else if (typeof data === 'object') {\r\n addObject(formData, prefix, data);\r\n } else {\r\n formData.append(prefix, data);\r\n }\r\n}\r\n\r\n/** Build form data that will have keys that can be bound to a model using asp.net core form data model-binder */\r\nconst makeFormData = data => {\r\n const prefix = \"\";\r\n const formData = new FormData();\r\n if (typeof 'data' != 'undefined' && data !== null) {\r\n addData(formData, prefix, data);\r\n }\r\n return formData;\r\n}\r\n\r\nexport {formDataToBody, makeFormData}\r\n","import { Checkbox } from \"@episerver/ui-framework\";\r\nimport React from \"react\";\r\nimport { Controller } from \"react-hook-form\";\r\nimport { FieldProp } from \"../model/FieldProp\";\r\n\r\nconst CheckBoxBooleanField: React.FC\r\n \r\n
\r\n {Name}
\r\n \r\n\r\n {\r\n const result = checkValue(v);\r\n if (result) {\r\n return result;\r\n } else {\r\n return true;\r\n }\r\n },\r\n },\r\n }}\r\n render={({ field: { value, onChange } }) => (\r\n
\r\n );\r\n};\r\n\r\nexport default DateField;\r\n","import React, { useEffect } from \"react\";\r\nimport { Controller } from \"react-hook-form\";\r\nimport { FieldProp } from \"../model/FieldProp\";\r\nimport { DateTimeModel } from \"../../../businessFoundation/Primitives/DateTimeManage/DateTimeModel\";\r\nimport { TextField } from \"@episerver/ui-framework\";\r\n\r\nconst DateTimeField: React.FC\r\n
}\r\n \r\n {errors.extendedProperties ? errors.extendedProperties[index]?.value?.message ?? \"\" : \"\"}\r\n
\r\n- \r\n
\r\n {!inTab && (\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n dispatch(\r\n onOpenDialog({\r\n form: {\r\n open: true,\r\n title: \"Add an address\",\r\n address: {\r\n ...initialAddressFormState.form.address,\r\n [inView === InView.Organization ? \"organizationId\" : \"contactId\"]: viewId,\r\n primaryKeyId: \"00000000-0000-0000-0000-000000000000\",\r\n isNew: true,\r\n idx: addresses.length\r\n },\r\n extendedPropertyErrors: [],\r\n },\r\n })\r\n )\r\n }\r\n >\r\n Create\r\n \r\n \r\n \r\n \r\n \r\n {columns.map((column, index) => {\r\n return (\r\n {column.title} \r\n );\r\n })}\r\n \r\n \r\n \r\n {addresses.map((row: Address, index: number) => {\r\n if (\r\n index < startRow ||\r\n index >= startRow + rowsPerPage ||\r\n row.primaryKeyId == \"00000000-0000-0000-0000-000000000000\"\r\n ) {\r\n return \r\n \r\n dispatch(onChangeAddressPage(startRow))}\r\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeAddressRowPerPage(rowsPerPage))}\r\n />\r\n \r\n {!inTab && (\r\n \r\n
\r\n
\r\n \r\n )}\r\n\r\n {/* Delete dialog */}\r\n {\r\n if (e.detail.action === \"confirm\") onDelete();\r\n else onCancel();\r\n }}\r\n >\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddressList;\r\n","import React, { Fragment, useEffect } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport {\r\n DataTable,\r\n DataTableBody,\r\n DataTableCell,\r\n DataTableCheckboxCell,\r\n DataTableColumnHeaderCell,\r\n DataTableContent,\r\n DataTableHeaderCheckboxCell,\r\n DataTableHeaderRow,\r\n DataTableOverflowMenuCell,\r\n DataTablePagination,\r\n DataTableRow,\r\n DataTableToolbar,\r\n Dialog,\r\n GridCell,\r\n GridRow,\r\n List,\r\n ListItem,\r\n TextButton,\r\n TextField,\r\n Typography,\r\n} from \"@episerver/ui-framework\";\r\nimport { ContactNote } from \"../model/ContactNote\";\r\nimport {\r\n selectedContactNotesSelector,\r\n contactNoteSelector,\r\n paginationSelector,\r\n onChangeContactNotePage,\r\n onChangeContactNoteRowPerPage,\r\n dialogStatusSelector,\r\n onChangeDialogStatus,\r\n confirmDialogStatusSelector,\r\n onChangeConfirmDialogStatus,\r\n selectAllContactNotes,\r\n deselectAllContactNotes,\r\n selectContactNote,\r\n deselectContactNote,\r\n} from \"../reducers/contactNoteManagerReducer\";\r\nimport {\r\n contactSelector,\r\n onAddOrUpdateContactNote,\r\n onDeleteContactNote,\r\n} from \"../../ContactManager/reducers/contactDetailReducer\";\r\nimport { Controller, useForm } from \"react-hook-form\";\r\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\r\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\r\nimport { fetchContactNoteById } from \"../reducers/asyncThunks\";\r\n\r\nconst ContactNoteManager = () => {\r\n const dispatch = useAppDispatch();\r\n const contact = useAppSelector(contactSelector);\r\n const selectedContactNotes = useAppSelector(selectedContactNotesSelector);\r\n const contactNote = useAppSelector(contactNoteSelector);\r\n const dialogStatus = useAppSelector(dialogStatusSelector);\r\n const confirmDialogStatus = useAppSelector(confirmDialogStatusSelector);\r\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useAppSelector(paginationSelector);\r\n\r\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = [\r\n { selector: \"noteTitle\", title: \"Title\", sortable: false },\r\n { selector: \"noteContent\", title: \"Note Text\", sortable: false },\r\n { selector: \"contactId\", title: \"Originated By\", sortable: false },\r\n { selector: \"created\", title: \"Created\", sortable: true },\r\n { selector: \"\", title: \"\", sortable: false },\r\n ];\r\n\r\n const {\r\n control,\r\n watch,\r\n setValue,\r\n setError,\r\n clearErrors,\r\n trigger,\r\n reset,\r\n formState: { errors, isValid, isDirty },\r\n } = useFormManage Addresses
\r\n\r\n
\r\n
\r\n
\r\n history.goBack()}>Back \r\n
\r\n {confirmDialog.message}
\r\n- \r\n
\r\n
\r\n \r\n {\r\n setIsOpen(true);\r\n }}>\r\n {\"Select parent organization\"}\r\n \r\n {\r\n clearParent();\r\n }}>\r\n {\"Clear parent\"}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {columns.map((column) => {\r\n if (column.sortable)\r\n return (\r\n \r\n onSort(column.selector, direction)\r\n }\r\n sortDirection={\r\n defaultSearchParams.sortField !== column.selector ? SortDirection.Ascending :\r\n defaultSearchParams.sortType === ServerSortType.Asc\r\n ? SortDirection.Ascending\r\n : SortDirection.Descending\r\n }\r\n >\r\n {column.title}\r\n \r\n );\r\n return (\r\n \r\n {column.title}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {organizations.map((row: Organization) => {\r\n return renderRow(row);\r\n })}\r\n \r\n \r\n {\r\n const params = defaultSearchParams;\r\n params.startIndex = startRow === 0 ? 0 : startRow;\r\n searchOrganizations(params).then((data) => {\r\n setDefaultSearchParams(params);\r\n setOrganizations(data.organizations);\r\n setTotalCount(data.totalRecords);\r\n });\r\n }}\r\n onChangeRowsPerPage={(rowsPerPage: number) => {\r\n const params = defaultSearchParams;\r\n params.startIndex = 0;\r\n params.recordsToRetrieve = rowsPerPage;\r\n searchOrganizations(params).then((data) => {\r\n setDefaultSearchParams(params);\r\n setOrganizations(data.organizations);\r\n setTotalCount(data.totalRecords);\r\n });\r\n }}\r\n />\r\n \r\n {errorOpen && \r\n \r\n {error ?? ''}\r\n \r\n }\r\n timeout={-1}\r\n dismissesOnAction\r\n onClose={() => { setErrorOpen(false); }}\r\n action={[\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n onSearch={(value: string) => {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n value={keyword}\r\n />\r\n \r\n \r\n \r\n \r\n {contacts.length > 0 && (\r\n onToggleAllSelected(e.target.checked)}\r\n />\r\n )}\r\n \r\n \r\n {columns.map((column) => {\r\n if (column.sortable)\r\n return (\r\n \r\n onSort(column.selector, direction)\r\n }\r\n sortDirection={\r\n sortedColumn === column.selector\r\n ? sortDirection\r\n : SortDirection.Unsorted\r\n }\r\n >\r\n {column.title}\r\n \r\n );\r\n return (\r\n \r\n {column.title}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {contacts.map((row: Contact) => {\r\n return renderRow(row);\r\n })}\r\n \r\n \r\n onChangePage(startRow)}\r\n onChangeRowsPerPage={(rowsPerPage) => onChangeRowsPerPage(rowsPerPage)}\r\n />\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddAssignmentsToUser;\r\n","import React, {useEffect} from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n DataTable,\r\n DataTableBody,\r\n DataTableCell,\r\n DataTableColumnHeaderCell,\r\n DataTableContent,\r\n DataTableHeaderRow,\r\n DataTablePagination,\r\n DataTableRow,\r\n DataTableToolbar,\r\n TextButton,\r\n} from \"@episerver/ui-framework\";\r\nimport {\r\n userAccountAssignmentsPaginationSelector,\r\n onChangeContactPage,\r\n onChangeContactRowPerPage,\r\n} from \"../reducers/userAccountAssignmentsReducer\";\r\nimport { Contact, ContactType } from \"../../ContactManager/model/contact\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { onChangeDialog } from \"../reducers/addAssignmentsToUserReducer\";\r\nimport { userAccountAssignmentsSelector } from \"../reducers/userAccountAssignmentsReducer\";\r\nimport { fetchUserAccountAssignments } from \"../reducers/asyncThunks\";\r\n\r\ninterface UserAccountAssignmentsProps {\r\n contactId: string;\r\n type: ContactType;\r\n}\r\n\r\nconst UserAccountAssignments = (props: UserAccountAssignmentsProps) => {\r\n const dispatch = useAppDispatch();\r\n const history = useHistory();\r\n const Assignments = useSelector(userAccountAssignmentsSelector);\r\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useSelector(\r\n userAccountAssignmentsPaginationSelector\r\n );\r\n\r\n useEffect(() => {\r\n dispatch(fetchUserAccountAssignments(props.contactId));\r\n }, []);\r\n\r\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = props.type !== ContactType.Account ? [\r\n { selector: \"FullName\", title: \"Full Name\", sortable: true },\r\n { selector: \"ContactCode\", title: \"Contact Code\", sortable: true },\r\n { selector: \"LastOrderDate\", title: \"Last Order Date\", sortable: true },\r\n { selector: \"CustomerGroup\", title: \"Customer Group\", sortable: true },\r\n ] : [\r\n { selector: \"FullName\", title: \"Full Name\", sortable: true },\r\n { selector: \"Email\", title: \"Email\", sortable: true },\r\n { selector: \"LastOrderDate\", title: \"Last Order Date\", sortable: true },\r\n { selector: \"CustomerGroup\", title: \"Customer Group\", sortable: true },\r\n ];\r\n\r\n const renderRow = (rowData: Contact): React.ReactElement => {\r\n return (\r\n \r\n {\r\n console.log(Assignments)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {columns.map((column) => {\r\n return (\r\n \r\n {column.title}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {Assignments.map((row: Contact, index: number) => {\r\n if (index < startRow || index >= startRow + rowsPerPage) {\r\n return \r\n \r\n dispatch(onChangeContactPage(startRow))}\r\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeContactRowPerPage(rowsPerPage))}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default UserAccountAssignments;\r\n","import {\r\n GridRow,\r\n GridCell,\r\n TextButton,\r\n Breadcrumb,\r\n List,\r\n ListItem,\r\n TabBar,\r\n Tab,\r\n Typography,\r\n TextField,\r\n ExposedDropdownMenu,\r\n OverflowMenu,\r\n Dialog,\r\n RadioButtonGroup,\r\n RadioButton,\r\n Checkbox\r\n} from \"@episerver/ui-framework\";\r\nimport React, { Fragment, useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { useHistory, useParams } from \"react-router-dom\";\r\nimport AddressList from \"../../AddressManager/components/AddressList\";\r\nimport { Address, InView } from \"../../AddressManager/model/address\";\r\nimport {\r\n initialAddressFormState,\r\n onOpenDialog as onOpenAddressDialog,\r\n} from \"../../AddressManager/reducers/addressFormReducer\";\r\nimport { fetchEnumsByType } from \"../../EnumManager/reducers/asyncThunks\";\r\nimport {\r\n enumFormTitle,\r\n initialEnumFormState,\r\n onOpenDialog as onOpenEnumDialog,\r\n} from \"../../EnumManager/reducers/enumFormReducer\";\r\nimport { enumType } from \"../../EnumManager/reducers/enumManagerReducer\";\r\nimport { Organization } from \"../../OrganizationManager/model/organization\";\r\nimport { Contact, ContactTab, EnumData, KeyValueOption, ContactType, ContactsType, UserExtendedProps, AccountExtendedProps} from \"../model/contact\";\r\nimport {\r\n fetchAddressesByContactId,\r\n fetchContactById,\r\n fetchCurrencies,\r\n fetchLanguages,\r\n fetchOrganizations,\r\n updateContact,\r\n fetchUserByContactId,\r\n createCustomerAccount\r\n} from \"../reducers/asyncThunks\";\r\nimport {\r\n changeTitle,\r\n setParentId,\r\n contactSelector,\r\n contactTitle,\r\n currenciesSelector,\r\n customerGroupsSelector,\r\n languagesSelector,\r\n organizationsSelector,\r\n breadcrumbItemsSelector,\r\n updateBreadcrumb,\r\n titleSelector,\r\n activeTabSelector,\r\n changeActiveTab,\r\n reset as resetData,\r\n onChangeProperty,\r\n onAddAcountDialog,\r\n customerAccountSelector,\r\n onChangeAccount,\r\n errorSelector,\r\n setCustomerGroupId\r\n} from \"../reducers/contactDetailReducer\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport ContactNoteManager from \"../../ContactNoteManager/components/ContactNoteManager\";\r\nimport { useState } from \"react\";\r\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\r\nimport { Controller, useForm } from \"react-hook-form\";\r\nimport { unwrapResult } from \"@reduxjs/toolkit\";\r\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\r\nimport { Snackbar, SnackbarAction } from \"@rmwc/snackbar\";\r\nimport AddParentOrganization from \"./AddParentOrganization\";\r\nimport AddAssignmentsToUser from \"./AddAssignmentsToUser\";\r\nimport UserAccountAssignments from \"./UserAccountAssignments\";\r\n\r\nexport const limitString = (val: string, num: number) => {\r\n if (val && val.length > num) {\r\n return val.substring(0, num) + \"...\";\r\n } else {\r\n return val;\r\n }\r\n};\r\n\r\ninterface ContactDetailProps {\r\n type: ContactType;\r\n}\r\n\r\nconst ContactDetail = (props: ContactDetailProps) => {\r\n const dispatch = useAppDispatch();\r\n const history = useHistory();\r\n const { contactId } = useParams<{ contactId: string }>();\r\n const title = useSelector(titleSelector);\r\n const initialContact = useSelector(contactSelector);\r\n const languages = useSelector(languagesSelector);\r\n const customerGroups = useSelector(customerGroupsSelector);\r\n const currencies = useSelector(currenciesSelector);\r\n const organizations = useSelector(organizationsSelector);\r\n const breadcrumbItems = useSelector(breadcrumbItemsSelector);\r\n const activeTab = useSelector(activeTabSelector);\r\n const customerAccount = useSelector(customerAccountSelector);\r\n const [invalidUsername, setInvalidUsername] = useState(false);\r\n const [invalidUsernameMessage, setInvalidUsernameMessage] = useState(\"\");\r\n const [invalidEmail, setInvalidEmail] = useState(false);\r\n const [invalidPassword, setInvalidPassword] = useState(false);\r\n const [errorMessage, setErrorMessage] = useState(\"\");\r\n const [errorOpen, setErrorOpen] = useState(false);\r\n const error = useSelector(errorSelector);\r\n let type = props.type;\r\n\r\n if (type === ContactType.Contact && initialContact.customerGroup !== null) {\r\n switch(initialContact.customerGroup) {\r\n case \"User\": \r\n case \"AccountAdmin\":\r\n type = ContactType.User;\r\n break;\r\n case \"Account\":\r\n type = ContactType.Account;\r\n break;\r\n default: break;\r\n }\r\n }\r\n\r\n const allowedExtendedPropsNames = type === ContactType.Account ? AccountExtendedProps : UserExtendedProps;\r\n\r\n const {\r\n control,\r\n handleSubmit,\r\n watch,\r\n setValue,\r\n setError,\r\n clearErrors,\r\n trigger,\r\n reset,\r\n formState: { errors },\r\n } = useForm\r\n \r\n dispatch(\r\n onChangeDialog({\r\n open: true,\r\n })\r\n )\r\n }\r\n >\r\n Update\r\n \r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n ({\r\n label: limitString(customerGroup.name, 40),\r\n value: customerGroup.id.toString(),\r\n }))}\r\n value={\r\n values.customerGroupId !== null &&\r\n customerGroups.filter((x) => x.id.toString() == values.customerGroupId).length >\r\n 0\r\n ? values.customerGroupId.toString()\r\n : \"0\"\r\n }\r\n onValueChange={(val: string) => {\r\n setValue(\"customerGroupId\", val);\r\n }}\r\n />\r\n
\r\n \r\n \r\n (\r\n
}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n onChangeAccountField(e);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n onChangeAccountField(e);\r\n }}\r\n />\r\n
\r\n \r\n \r\n {\r\n onChangeRadioButton(e);\r\n }}\r\n >\r\n Yes\r\n \r\n {\r\n onChangeRadioButton(e);\r\n }}\r\n >\r\n No\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {
\r\n {renderDetails()}\r\n
}\r\n {contactId && activeTab === ContactTab.Addresses && renderAddresses()}\r\n {contactId && activeTab === ContactTab.ContactNote && renderContactNotes()}\r\n {contactId && activeTab === ContactTab.AccountAssignments && renderUserAccountAssignments()}\r\n \r\n
\r\n history.push(`/${ContactsType[type]}`)}>Cancel \r\n handleSubmit(onSubmit)()}>\r\n Save\r\n \r\n
\r\n {errorOpen && \r\n - \r\n
\r\n {ContactsType[props.type]} \r\n \r\n \r\n \r\n {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n onSearch={(value: string) => {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n onSelectAll(e)} />\r\n \r\n {Object.keys(columns).map((column) => {\r\n if (columns[column].sortable) {\r\n return (\r\n columns[column].visible && (\r\n \r\n onSort(columns[column].selector, direction)\r\n }\r\n sortDirection={\r\n sortedColumn === columns[column].selector\r\n ? sortDirection\r\n : SortDirection.Unsorted\r\n }\r\n >\r\n {columns[column].name}\r\n \r\n )\r\n );\r\n } else {\r\n return (\r\n columns[column].visible && (\r\n \r\n {columns[column].name}\r\n \r\n )\r\n );\r\n }\r\n })}\r\n {\r\n const changedColumn = Object.keys(columns).find(\r\n (column) => columns[column].name === columnName\r\n );\r\n if (changedColumn) {\r\n setColumns({\r\n ...columns,\r\n [changedColumn]: { ...columns[changedColumn], visible: checked },\r\n });\r\n }\r\n }}\r\n />\r\n \r\n \r\n \r\n <>\r\n {contacts.length == 0 && (\r\n \r\n \r\n No Contacts found. \r\n \r\n \r\n )}\r\n {contacts.map((row: Contact) => renderRow(row))}\r\n \r\n \r\n \r\n \r\n {\r\n if (e.detail.action === \"confirm\") onDelete();\r\n else onCancel();\r\n }}\r\n >\r\n \r\n {confirmDialog.message} \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ContactList;\r\n","import { Dialog, TextField } from \"@episerver/ui-framework\";\r\nimport { useFormik } from \"formik\";\r\nimport * as Yup from \"yup\";\r\nimport React from \"react\";\r\nimport { useEffect } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport { useParams } from \"react-router-dom\";\r\nimport { fetchEnumsByType, updateEnum } from \"../reducers/asyncThunks\";\r\nimport {\r\n formSelector,\r\n initialEnumFormState,\r\n onChangeName,\r\n onChangeType,\r\n onOpenDialog,\r\n} from \"../reducers/enumFormReducer\";\r\nimport { EnumData } from \"../model/Enum\";\r\n\r\nconst EnumForm = () => {\r\n const dispatch = useAppDispatch();\r\n const { type } = useParams<{ type: string }>();\r\n const { open, title, enumData } = useAppSelector(formSelector);\r\n\r\n useEffect(() => {\r\n if (type) {\r\n dispatch(onChangeType(type));\r\n }\r\n }, [type]);\r\n\r\n const { values, isValid, errors, handleSubmit, setFieldValue, validateForm } = useFormik({\r\n enableReinitialize: true,\r\n initialValues: enumData,\r\n validationSchema: Yup.object({\r\n name: Yup.string().trim().required(\"*Required\"),\r\n }),\r\n onSubmit: async (enumData: EnumData) => {\r\n dispatch(onOpenDialog(initialEnumFormState));\r\n await dispatch(updateEnum(enumData));\r\n dispatch(fetchEnumsByType(enumData.type));\r\n },\r\n });\r\n\r\n const onChangeTextField = (e: any) => {\r\n e.persist();\r\n let { name, value } = e.target;\r\n setFieldValue(name, value);\r\n dispatch(onChangeName(value));\r\n };\r\n\r\n useEffect(() => {\r\n validateForm();\r\n }, [values]);\r\n\r\n return (\r\n \r\n Create \r\n {selectedContacts.length > 0 && (\r\n onConfirmDialog(selectedContacts)}>\r\n Delete Selected ({selectedContacts.length})\r\n \r\n )}\r\n
\r\n \r\n
- \r\n
\r\n
\r\n
\r\n
\r\n \r\n history.push({\r\n pathname: from === \"\" ? window.history.state.from : from,\r\n state: { from: history.location.pathname, detail: detail ?? window.history.state.detail },\r\n })\r\n }\r\n >\r\n Back\r\n \r\n
\r\n {confirmDialog.message}
\r\n- \r\n
\r\n Organizations \r\n \r\n \r\n \r\n {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n onSearch={(value: string) => {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n onToggleAllSelected(e.target.checked)}\r\n />\r\n \r\n {Object.keys(columns).map((column) => {\r\n if (columns[column].sortable)\r\n return (\r\n columns[column].visible && (\r\n \r\n onSort(columns[column].selector, direction)\r\n }\r\n sortDirection={\r\n sortedColumn === columns[column].selector\r\n ? sortDirection\r\n : SortDirection.Unsorted\r\n }\r\n >\r\n {columns[column].name}\r\n \r\n )\r\n );\r\n return (\r\n columns[column].visible && (\r\n \r\n {columns[column].name}\r\n \r\n )\r\n );\r\n })}\r\n \r\n {\r\n const changedColumn = Object.keys(columns).find(\r\n (column) => columns[column].name === columnName\r\n );\r\n if (changedColumn) {\r\n setColumns({\r\n ...columns,\r\n [changedColumn]: { ...columns[changedColumn], visible: checked },\r\n });\r\n }\r\n }}\r\n />\r\n \r\n \r\n <>\r\n {organizations.length == 0 && (\r\n \r\n \r\n No Organizations found. \r\n \r\n \r\n )}\r\n {organizations.map(renderRow)}\r\n \r\n \r\n \r\n \r\n {\r\n if (e.detail.action === \"confirm\") onConfirm(confirmDialog.data.mode);\r\n else onCancel();\r\n }}\r\n >\r\n \r\n \r\n onChangeDeleteMode(DeleteMode.Detach)}\r\n >\r\n Delete Organizations Only\r\n \r\n onChangeDeleteMode(DeleteMode.Delete)}\r\n >\r\n Delete Organizations, Child Organizations and Contacts.\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OrganizationList;\r\n","import React, { Fragment, useCallback, useEffect, useRef } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport {\r\n DataTable,\r\n DataTableBody,\r\n DataTableCell,\r\n DataTableCheckboxCell,\r\n DataTableColumnHeaderCell,\r\n DataTableContent,\r\n DataTableHeaderCheckboxCell,\r\n DataTableHeaderRow,\r\n DataTablePagination,\r\n DataTableRow,\r\n DataTableToolbar,\r\n Dialog,\r\n Search,\r\n SortDirection,\r\n} from \"@episerver/ui-framework\";\r\nimport {\r\n addContactsTitleSelector,\r\n contactListPaginationSelector,\r\n deselectAllContacts,\r\n deselectContact,\r\n isOpenDialogSelector,\r\n keywordSelector,\r\n onChangeDialog,\r\n selectAllContacts,\r\n selectContact,\r\n selectedContactsSelector,\r\n sort,\r\n sortSelector,\r\n changeKeyword,\r\n contactsSelector,\r\n} from \"../reducers/addContactsToOrganizationReducer\";\r\nimport { Contact, ContactsType, ServerSortType } from \"../../ContactManager/model/contact\";\r\nimport { fetchContacts, searchContacts } from \"../../ContactManager/reducers/asyncThunks\";\r\nimport { debounce } from \"lodash-es\";\r\nimport { onAddOrUpdateContact, organizationSelector } from \"../reducers/organizationDetailReducer\";\r\n\r\ninterface AddContactsToOrganizationProps {\r\n organizationId: string;\r\n}\r\n\r\nconst AddContactsToOrganization = (props: AddContactsToOrganizationProps) => {\r\n const dispatch = useAppDispatch();\r\n const contacts = useAppSelector(contactsSelector);\r\n const organization = useAppSelector(organizationSelector);\r\n const { sortDirection, sortedColumn } = useAppSelector(sortSelector);\r\n const sortDirectionRef = useRef\r\n history.push(\"/Organizations/Edit\")}>\r\n Create\r\n \r\n {selectedOrganizations.length > 0 && (\r\n onDeleteSelected()}>\r\n Delete Selected ({selectedOrganizations.length})\r\n \r\n )}\r\n
\r\n \r\n Selected organizations can have related contacts and child organizations. What do you want to\r\n delete?\r\n
\r\n\r\n \r\n \r\n {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n onSearch={(value: string) => {\r\n handleSearch(value, rowsPerPage);\r\n }}\r\n value={keyword}\r\n />\r\n \r\n \r\n \r\n \r\n {contacts.length > 0 && (\r\n onToggleAllSelected(e.target.checked)}\r\n />\r\n )}\r\n \r\n \r\n {columns.map((column) => {\r\n if (column.sortable)\r\n return (\r\n \r\n onSort(column.selector, direction)\r\n }\r\n sortDirection={\r\n sortedColumn === column.selector\r\n ? sortDirection\r\n : SortDirection.Unsorted\r\n }\r\n >\r\n {column.title}\r\n \r\n );\r\n return (\r\n \r\n {column.title}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {contacts.map((row: Contact) => {\r\n return renderRow(row);\r\n })}\r\n \r\n \r\n onChangePage(startRow)}\r\n onChangeRowsPerPage={(rowsPerPage) => onChangeRowsPerPage(rowsPerPage)}\r\n />\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddContactsToOrganization;\r\n","import React, {useEffect} from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport {\r\n DataTable,\r\n DataTableBody,\r\n DataTableCell,\r\n DataTableColumnHeaderCell,\r\n DataTableContent,\r\n DataTableHeaderRow,\r\n DataTablePagination,\r\n DataTableRow,\r\n DataTableToolbar,\r\n TextButton,\r\n} from \"@episerver/ui-framework\";\r\nimport {\r\n contactsInOrganizationPaginationSelector,\r\n onChangeContactPage,\r\n onChangeContactRowPerPage,\r\n} from \"../reducers/contactListInOrganizationReducer\";\r\nimport { Contact, ContactsType, ContactType } from \"../../ContactManager/model/contact\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { onChangeDialog } from \"../reducers/addContactsToOrganizationReducer\";\r\nimport { organizationSelector } from \"../reducers/organizationDetailReducer\";\r\nimport { fetchContactsInOrganization } from \"../reducers/asyncThunks\";\r\n\r\ninterface ContactListInOrganizationProps {\r\n organizationId: string;\r\n}\r\n\r\nconst ContactListInOrganization = (props: ContactListInOrganizationProps) => {\r\n const dispatch = useAppDispatch();\r\n const history = useHistory();\r\n const organization = useSelector(organizationSelector);\r\n const { rowsPerPage, startRow, rowsPerPageOptions, totalRowCount } = useSelector(\r\n contactsInOrganizationPaginationSelector\r\n );\r\n\r\n useEffect(() => {\r\n dispatch(fetchContactsInOrganization(props.organizationId));\r\n }, []);\r\n\r\n const columns: Array<{ selector: string; title: string; sortable: boolean }> = [\r\n { selector: \"FullName\", title: \"Full Name\", sortable: true },\r\n { selector: \"Email\", title: \"Email\", sortable: true },\r\n { selector: \"LastOrderDate\", title: \"Last Order Date\", sortable: true },\r\n { selector: \"CustomerGroup\", title: \"Customer Group\", sortable: true },\r\n ];\r\n\r\n const renderRow = (rowData: Contact): React.ReactElement => {\r\n let pathContactType = ContactType[rowData.customerGroupId] === ContactType[ContactType.AccountAdmin]\r\n ? ContactsType[ContactsType.Users]\r\n : ContactsType[rowData.customerGroupId];\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {columns.map((column) => {\r\n return (\r\n \r\n {column.title}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n {organization.contacts.map((row: Contact, index: number) => {\r\n if (index < startRow || index >= startRow + rowsPerPage) {\r\n return \r\n \r\n dispatch(onChangeContactPage(startRow))}\r\n onChangeRowsPerPage={(rowsPerPage) => dispatch(onChangeContactRowPerPage(rowsPerPage))}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ContactListInOrganization;\r\n","import {\r\n GridRow,\r\n GridCell,\r\n TextButton,\r\n Breadcrumb,\r\n List,\r\n ListItem,\r\n Tab,\r\n TabBar,\r\n Typography,\r\n TextField,\r\n ExposedDropdownMenu,\r\n OverflowMenu,\r\n} from \"@episerver/ui-framework\";\r\nimport React, { FunctionComponent, Fragment, useEffect } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"../../hooks\";\r\nimport { useHistory, useParams } from \"react-router-dom\";\r\nimport AddressList from \"../../AddressManager/components/AddressList\";\r\nimport { Address, InView } from \"../../AddressManager/model/address\";\r\nimport { EnumData } from \"../../ContactManager/model/contact\";\r\nimport { fetchEnumsByType } from \"../../EnumManager/reducers/asyncThunks\";\r\nimport { enumFormTitle, initialEnumFormState, onOpenDialog } from \"../../EnumManager/reducers/enumFormReducer\";\r\nimport { onChangeTotalCount } from \"../reducers/childOrganizationListReducer\";\r\nimport { enumType } from \"../../EnumManager/reducers/enumManagerReducer\";\r\nimport { Organization, OrganizationTab } from \"../model/organization\";\r\nimport { fetchOrganizationById, updateOrganization } from \"../reducers/asyncThunks\";\r\nimport {\r\n changeTitle,\r\n setParentId,\r\n organizationCustomerGroupsSelector,\r\n titleSelector,\r\n organizationSelector,\r\n businessCategoriesSelector,\r\n organizationTypesSelector,\r\n organizationTitle,\r\n breadcrumbItemsSelector,\r\n updateBreadcrumb,\r\n activeTabSelector,\r\n changeActiveTab,\r\n updateOrganizationId,\r\n onChangeProperty,\r\n errorSelector,\r\n onAddOrUpdateChildren,\r\n reset as resetData,\r\n} from \"../reducers/organizationDetailReducer\";\r\nimport AddChildOrganizations from \"./AddChildOrganizations\";\r\nimport AddContactsToOrganization from \"./AddContactsToOrganization\";\r\nimport AddParentOrganization from \"./AddParentOrganization\";\r\nimport ChildOrganizationList from \"./ChildOrganizationList\";\r\nimport ContactListInOrganization from \"./ContactListInOrganization\";\r\nimport { useState } from \"react\";\r\nimport { unwrapResult } from \"@reduxjs/toolkit\";\r\nimport { Snackbar, SnackbarAction } from \"@rmwc/snackbar\";\r\nimport { errorSelector as addChildErrorSeletor, clearAddChildError } from \"../reducers/addChildOrganizationsReducer\";\r\nimport { Controller, useForm } from \"react-hook-form\";\r\nimport ExtendedProperty from \"../../ExtendedProperty/ExtendedProperty\";\r\nimport { Property } from \"../../../businessFoundation/MetaClassData/MetaClassDataList/MetaClassDataModel\";\r\n\r\nexport const limitString = (val: string, num: number) => {\r\n if (val && val.length > num) {\r\n return val.substring(0, num) + \"...\";\r\n } else {\r\n return val;\r\n }\r\n};\r\n\r\nconst OrganizationDetail: React.FC = () => {\r\n const dispatch = useAppDispatch();\r\n const history = useHistory();\r\n const { organizationId } = useParams<{ organizationId: string }>();\r\n const title = useAppSelector(titleSelector);\r\n const initialOrganization = useAppSelector(organizationSelector);\r\n const organizationTypes = useAppSelector(organizationTypesSelector);\r\n const organizationCustomerGroups = useAppSelector(organizationCustomerGroupsSelector);\r\n const businessCategories = useAppSelector(businessCategoriesSelector);\r\n const breadcrumbItems = useAppSelector(breadcrumbItemsSelector);\r\n const activeTab = useAppSelector(activeTabSelector);\r\n const [errorOpen, setErrorOpen] = useState(false);\r\n const error = useAppSelector(errorSelector);\r\n const addChildError = useAppSelector(addChildErrorSeletor);\r\n\r\n const {\r\n control,\r\n handleSubmit,\r\n watch,\r\n setValue,\r\n setError,\r\n clearErrors,\r\n trigger,\r\n reset,\r\n formState: { errors }, \r\n } = useForm\r\n \r\n dispatch(\r\n onChangeDialog({\r\n open: true,\r\n })\r\n )\r\n }\r\n >\r\n Add\r\n \r\n
\r\n \r\n (\r\n
\r\n \r\n (\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n {
\r\n {renderDetails()}\r\n
}\r\n {organizationId && activeTab === OrganizationTab.Contacts && renderContacts()}\r\n \r\n
\r\n history.push(\"/Organizations\")}>Cancel \r\n handleSubmit(onSubmit)()}>\r\n Save\r\n \r\n
\r\n {errorOpen && \r\n
\r\n \r\n
\r\n = 0}\r\n onChange={(e: any) => {\r\n onChangeCheckbox(e);\r\n }}\r\n >\r\n Public\r\n \r\n = 0}\r\n value={AddressType.Shipping}\r\n onChange={(e: any) => {\r\n onChangeCheckbox(e);\r\n }}\r\n >\r\n Shipping\r\n \r\n = 0}\r\n value={AddressType.Billing}\r\n onChange={(e: any) => {\r\n onChangeCheckbox(e);\r\n }}\r\n >\r\n Billing\r\n \r\n
\r\n \r\n {errors.addressType?.message}\r\n
\r\n \r\n )}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n return CustomersApp;\r\n} \r\n\r\n\r\nexport const Contacts = getCustomersApp(CustomersType.Contacts);\r\nexport const Organizations = getCustomersApp(CustomersType.Organizations);\r\nexport const Users = getCustomersApp(CustomersType.Users);\r\nexport const Accounts = getCustomersApp(CustomersType.Accounts);\r\n"],"sourceRoot":""}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n