;\n value?: number | string;\n onChange: (setting: string, value: unknown, timezone?: string) => void;\n allowEdit?: boolean;\n readOnly?: boolean;\n className?: string;\n size?: string;\n children?: ReactNode;\n};\n\n/*\n * Component for a numeric setting that can be scheduled by day/hour\n * Presents a text input, and a visual display of the week's adjustments (svg graph).\n * Provides a link to open the Scheduler component in a modal.\n *\n * The text input is for the default value to be (optionally) modified.\n * The scheduled modifications are set in a modal.\n * In some cases, like bidding, the bid value is set in another part of the form,\n * so we use the hideInput property.\n *\n * \"config\" property should be the Scheduler component config:\n * {default:100, max:200, labelInterval:20, lineInterval:10};\n * minimum is presumed zero.\n * optional config for:\n * allowHourParting:false (prevents splitting hour into halves or quarters)\n * showBaseline: false highlighted horizontal value line indicates default value. Default true.\n * valueSuffix: \"%\"\n */\nconst SchedulableSettingInput = (props: SchedulableSettingInputProps) => {\n const [modal, setModal] = useState(false);\n const [hasSchedule, setHasSchedule] = useState(false);\n const [clearPrompt, setClearPrompt] = useState(false);\n const thisDayIndex = new Date().getDay();\n // Note: Daylist is monday first\n const [selectedDay, setSelectedDay] = useState(DayList[thisDayIndex > 0 ? thisDayIndex - 1 : 6]);\n\n const { allowEdit = true, hideInput = false, readOnly = false } = props;\n\n useEffect(() => {\n if (props.schedule) {\n setHasSchedule(Object.keys(props.schedule).length > 0);\n }\n }, [props.schedule]);\n\n const handleClickDay = (day: string | null) => {\n setSelectedDay(day);\n setModal(true);\n };\n\n const clearSchedule = () => {\n props.onChange(props.scheduleSetting, {});\n setClearPrompt(false);\n setHasSchedule(false);\n };\n\n return (\n \n {hideInput !== true && (\n
\n {props.title} \n \n
\n props.onChange(props.setting, e.target.value)}\n render={(ref: any, maskProps: any) =>
\n\n
\n { hasSchedule === true && (\n \n {clearPrompt === true ? (\n <>\n Are you sure?\n \n Yes\n \n setClearPrompt(false)}>\n Cancel\n \n \n ) : (\n <>\n This setting has scheduled adjustments\n {allowEdit && (\n <>\n handleClickDay(null)}>\n \n setClearPrompt(true)}>\n \n \n )}\n\n \n )}\n\n \n )}\n
\n\n
{props.note} }\n \n )}\n\n {/* Show Summary graph and edit icon if we have a schedule, or alert and create button if no schedule */}\n
\n\n {hasSchedule && allowEdit\n && (\n handleClickDay(null)} title=\"Edit Schedule\">\n \n )}\n\n \n { hasSchedule === true ? (\n <>\n {props.summaryNote &&
{props.summaryNote}
}\n
\n \n\n ) : (\n
\n There are no scheduled adjustments for this setting{' '}\n {allowEdit && (\n handleClickDay(null)}>\n \n )}\n\n \n )}\n\n
\n\n
setModal(false)}\n readOnly={readOnly}\n />\n \n\n {(absBidError || modifierError || proxyError)\n && (\n
\n Please correct the errors below before continuing\n \n )}\n\n
\n
Bidding
\n\n
\n\n {allowEditIntg && allowEditOrder ? (\n
\n Bid Ceiling \n handleChangeCeilingDebounced(e.target.value)}\n name=\"bid_ceiling\"\n render={(ref, props) => If set, final adjusted bid may not exceed this dollar amount \n \n ) : allowEditIntg && props.bid_ceiling ? (\n
\n ) : null}\n\n
\n\n
\n
Bidding Schedule
\n
Modify bids by day and hour (of the consumer)
\n
\n \n\n { (props.type !== 'block') ? (\n \n \n Schedule inactive: bidding blocked.\n \n \n\n )}\n \n\n
\n
\n\n
props.onChange('proxy_bidding', config)}\n errors={proxyError}\n />\n\n \n Bid change:\n \n );\n }\n } else if (type === 'absolute') {\n bid = parseFloat(bid);\n\n if (bid === 0) {\n alert = 'Setting the bid to zero will disable bidding. You can also choose Block as a bid type.';\n } else if (bid && parseFloat(previousBid) !== bid && previousType === type) {\n alert = (\n \n Bid change:\n {' '}\n \n );\n }\n }\n //\n return ({alert || defaultMsg} );\n};\n\n// const BidAlert = ({type, bid, previousBid, defaultMsg=''}) => {\n// let alert = '';\n// if(type === 'modifier' && parseInt(bid) === 0){\n// alert = ' Setting the modifier to zero will disable bidding. Instead, choose Block as a bid type.';\n// }else if(type === 'modifier' && parseInt(bid) === 100){\n//\n// alert = ' An modifier of 100% will not modify the bid.';\n// }else if(type === 'absolute'){\n// bid = parseFloat(bid);\n// if(bid === 0){\n// alert = ' Setting the bid to zero will disable bidding. You can also choose Block as a bid type.';\n// } else {\n// alert = Bid change: \n// }\n//\n// }\n// //\n// return({alert || defaultMsg} )\n//\n// };\n\nBidding.propTypes = {\n accountId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n onChangeSchedule: PropTypes.func.isRequired,\n onChange: PropTypes.func.isRequired,\n type: PropTypes.string.isRequired,\n absolute_bid: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n bid_modifier: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n bid_ceiling: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n proxyBidding: PropTypes.object,\n errors: PropTypes.object,\n product: PropTypes.string,\n isActiveTab: PropTypes.bool,\n exclusivity: PropTypes.string,\n allowEdit: PropTypes.bool,\n};\n\nexport default React.memo(Bidding);\n","import React from 'react';\nimport {\n Row, Col,\n} from 'reactstrap';\nimport {CapManager} from \"@thedmsgroup/mastodon-ui-components\";\nimport PropTypes from 'prop-types';\nimport {CapScheduleConfig} from \"../const\";\n\n\nconst CapsFormOptions = {\n intervals: [\"total\",\"monthly\", \"weekly\",\"daily\"],\n max: 99999,\n}\n\nconst BudgetOptions = {\n intervals: [\"total\",\"monthly\", \"weekly\",\"daily\"],\n max: 99999,\n}\n\nconst Budgets = ({\n product,\n budgets,\n caps,\n saleAttemptCaps,\n onChange,\n onChangeSchedule,\n schedule,\n scheduleTimezone,\n scheduleSaleAttemptCaps,\n scheduleSaleAttemptCapsTimezone,\n allowEdit = true,\n\n}) => {\n\n const handleChangeCapSchedule = (sched, tz) => {\n onChangeSchedule('schedule_caps', sched, tz);\n };\n\n\n const handleChangeCaps = (caps) => {\n onChange('caps', caps);\n }\n\n // MRK-9151 TBD\n // const handleChangeSaleAttemptCapSchedule = (sched, tz) => {\n // onChangeSchedule('schedule_sale_attempt_caps', sched, tz);\n // };\n\n // const handleChangeSaleAttemptCaps = (caps) => {\n // onChange('sale_attempt_caps', caps);\n // }\n\n const handleChangeBudget = (caps) => {\n onChange('budgets', caps);\n }\n\n\n return (\n \n
\n Pause the order upon reaching the specified limits. If budget and cap values are both set for a specific timeframe, the order will pause temporarily when one of the\n limits is reached, whichever is reached first.\n
\n\n {product === 'calls' && (\n
Caps will restrict the number of sold calls.
\n )}\n\n {/* Add to above when sale attempt caps are implemented MRK-9151:
Sale Attempt Caps include both billable and unbillable calls.*/}\n\n
\n
\n
\n {(errors.call_concurrency || errors.billable_duration)\n && (\n
\n Please correct the errors below before continuing\n \n )}\n\n
For phone number and SIP configuration, see\n {' '} rulesContext.api.setActiveTab('destinations')}>Destinations
\n {allowEdit ? (\n <>\n
\n \n Call Concurrency \n The maximum number of concurrent calls. Defaults to 1 call. \n\n {errors.call_concurrency} \n\n \n \n
\n
\n \n Billable Duration (seconds) \n Number of seconds before the call becomes billable. Maximum: 300 (5 minutes). \n\n {propAncestors.billable_duration && (\n \n \n The ancestor rule{' '}\n {propAncestors.billable_duration.label} \n {' '}\n has the value\n {propAncestors.billable_duration.value}\n .\n The ancestor value will be used if no value is entered here.\n
\n \n
\n )}\n\n {errors.billable_duration} \n\n \n \n
\n \n ) : (\n
\n
\n
Call Concurrency \n
{concurrency || Default (1) }
\n
\n
\n
Billable Duration (seconds) \n {propAncestors.billable_duration && (\n
\n The ancestor rule{' '}\n {propAncestors.billable_duration.label} \n {' '}has the value {propAncestors.billable_duration.value}.\n
\n )}\n
{billableDuration || Not configured }
\n
\n
\n )}\n\n
\n
\n */\n\nCallSettings.propTypes = {\n concurrency: PropTypes.number,\n billableDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n // concurrencySchedule: PropTypes.object,\n onChange: PropTypes.func,\n errors: PropTypes.object,\n};\n\nexport default React.memo(CallSettings);\n","import React, {\n useState, useEffect, useMemo, useCallback, useRef, Suspense, lazy, useContext,\n} from 'react';\nimport {\n Col, Row, Button, Input, Label, FormText,\n} from 'reactstrap';\nimport PropTypes from 'prop-types';\nimport useLocalStorage from \"../../../../Hooks/useLocalStorage\";\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { useDebouncedCallback } from 'use-debounce';\nimport classnames from 'classnames';\nimport {StandardAlert, HelpPopper, MaskedInputGroup} from \"@thedmsgroup/mastodon-ui-components\"\nimport { LiveFilteringProvider, LiveFilteringContext } from '../../../../Providers/LiveFilteringProvider';\nimport {Filter, TextSearch, ButtonToggleFilter} from \"../../../../Components/Table/Filter\";\nimport usePermission from '../../../../Hooks/usePermission';\nimport RulesContext from '../../../../Providers/RulesContext';\nimport{ singularOrPlural} from \"../../../../utils/string\";\nimport FlexTable from \"../../../../Components/Table/FlexTable\";\nimport StatusToggler from \"../../../../Components/Form/StatusToggler\";\n\nconst MAX_MODIFIER = 5000;\n\nconst ChannelStatusChoices = [\n { value: 'active', label: 'Active' },\n { value: 'archived', label: 'Archived' },\n { value: 'any', label: 'Any' },\n];\n\nconst LazyBulkEditChannelsModal = lazy(() => import(/* webpackChunkName: \"RuleModals\" */ './BulkEditChannelsModal'));\n\n/*\n * Form for setting bid modifiers and bid ceilings on channels.\n */\nconst Channels = ({\n rule,\n channels,\n modifiers = [],\n overrideParentModifiers = false,\n isRootRule = false,\n onChange,\n errors,\n }) => {\n const rulesContext = useContext(RulesContext);\n const allowEdit = usePermission('orders.edit');\n const allowBidCeiling = usePermission('rules_advanced.edit');\n const [allModifiers, setAllModifiers] = useState([]);\n //stored setting dictates if list view is ALL or APPLIED\n const [viewFilter, setViewFilter] = useLocalStorage(\"channel_modifiers_filter_view\", modifiers.length > 0 ? 'applied' : 'all')\n\n const [bulkEditModal, setBulkEditModal] = useState(false);\n\n // Ref: Workaround for problems with getting current state of allModifiers from the change handlers;\n const stateRef = useRef();\n stateRef.current = allModifiers;\n\n const toggleBulkEditModal = () => setBulkEditModal(!bulkEditModal);\n\n const handleChangeView = (isViewApplied) => {\n setViewFilter(isViewApplied ? 'applied' : 'all')\n }\n\n // Compose the rows: Existing channel modifiers + unset modifiers for all other channels\n useEffect(() => {\n if (!allModifiers.length && Array.isArray(channels)) {\n const cm = channels.map((ch) => {\n let row = {\n channel_name: ch.name,\n channel_id: ch.id,\n bid_modifier: '',\n bid_ceiling: '',\n channel_status: ch.status,\n status: 'disabled',\n };\n const mod = modifiers.find((m) => m.channel_id === ch.id) ;\n\n if (mod) {\n row = { ...row, ...mod };\n }\n return row;\n });\n\n setAllModifiers(cm);\n }\n }, [channels]);\n\n const handleModifierChange = useCallback((bid_modifier, channel_id) => {\n\n bid_modifier = isNaN(parseInt(bid_modifier)) ? '' : parseInt(bid_modifier);\n if (bid_modifier && bid_modifier > MAX_MODIFIER) bid_modifier = MAX_MODIFIER;\n const status = bid_modifier !== '' ? 'manual' : 'disabled';\n\n const index = stateRef.current.findIndex((mod) => {\n return mod.channel_id.toString() === channel_id.toString()\n });\n if (index >= 0) {\n const newModifiers = Object.assign([], stateRef.current); //[...allModifiers];\n newModifiers[index] = {...newModifiers[index], bid_modifier, status };\n setAllModifiers(newModifiers);\n updateModifiers(newModifiers);\n\n }\n\n }, [stateRef.current]);\n\n const handleCeilingChange = (bid_ceiling, channel_id) => {\n bid_ceiling = isNaN(parseFloat(bid_ceiling)) ? '' : parseFloat(bid_ceiling);\n const index = stateRef.current.findIndex((mod) => mod.channel_id === channel_id);\n if (index >= 0) {\n const newModifiers = Object.assign([], stateRef.current); //[...allModifiers];\n newModifiers[index] = {...newModifiers[index], bid_ceiling };\n setAllModifiers(newModifiers);\n updateModifiers(newModifiers);\n }\n };\n\n // Update parent with items that have a bid modifier\n const updateModifiers = (newModifiers) => {\n\n let filtered = newModifiers.filter((cm) => cm.status === 'manual' && !isNaN(parseInt(cm.bid_modifier)));\n // Remove channel_name and sort by channel_id\n // or we get a false positive for formIsDirty\n filtered = filtered.map((cm) => {\n const { channel_name, ...rest } = cm;\n return rest;\n });\n doSort(filtered, 'channel_id', true);\n onChange('channel_modifiers', filtered);\n\n };\n\n\n const doSort = (arr, col, asc) => {\n if (asc) {\n arr.sort((a, b) => (a[col] > b[col] ? 1 : -1));\n } else {\n arr.sort((a, b) => (a[col] < b[col] ? 1 : -1));\n }\n };\n\n const handleClear = (channel_id) => {\n const newList = stateRef.current.map((mod) => {\n if (mod.channel_id === channel_id) {\n return {\n ...mod,\n bid_modifier: '',\n bid_ceiling: '',\n status: 'disabled',\n };\n }\n return mod;\n });\n setAllModifiers(newList);\n updateModifiers(newList);\n };\n\n const handlePostBulkUpdate = (newRule) => {\n // Bulk update saves the rule, but only the channel_modifiers.\n // It's possible that the rule has other changes before the update.\n // Here, we are merging the new channel modifiers into the existing (and possibly changed) rule.\n // TODO: this will probably reset the \"isDirty\" flag, removing the message. Can we preserve it?\n rulesContext.api.setSelected({ ...newRule, ...rule, channel_modifiers: newRule.channel_modifiers }, true);\n };\n\n const handleChangeOverride = (e) => onChange('override_parent_channel_modifiers', e.target.checked);\n\n return (\n \n
\n
Channel Bid Modifiers
\n {allowEdit && (\n
\n \n )}\n\n
\n
\n Use a percentage to modify bids by channel. If not set, or zero, the channel will not be used.\n {allowBidCeiling && The bid ceiling is optional. }\n
\n\n\n
\n\n { Object.keys(errors).length > 0 && (\n
\n Please check that all active channels have a modifier value (0 to 5000%) or are blank\n \n )}\n\n {!channels?.length && (\n
\n No channels found for this vertical and product\n \n )}\n\n {/* For all but account rule, allow override choice */}\n {!isRootRule && allModifiers.length > 0 && (\n allowEdit ? (\n
\n
\n
\n
\n \n Override Parent Channel Modifiers\n \n (Override parent modifiers instead of modifying them) \n
\n
\n ) : (\n
\n Override Parent Channel Modifiers: {overrideParentModifiers ? 'Yes' : 'No'} \n
\n )\n )}\n\n {channels?.length > 0 && (\n
\n \n\n \n\n \n
\n\n\n )}\n\n
}>\n
\n \n\n
\n\n
\n\n
\n\n context.updateFilter(\"channel_name\", val)}\n onClear={() => context.resetFilter(\"channel_name\")}\n />\n
\n\n
\n context.resetFilter(\"channel_status\")}\n isMulti={false}\n />\n
\n\n
\n
\n\n
\n {allCount} channels available {filteredCount < allCount && ( ({filteredCount || \"none\"} shown) )},\n {' '}{modifierCount || 'no'} {singularOrPlural(modifierCount, 'modifier', 'modifiers')} applied\n )\n};\n\n\n\nconst BidCell = ({channelId, modifier, onChange, allowEdit}) => {\n\n return (\n \n {allowEdit ? (\n \n {modifier > 0 ? `${modifier}%` : modifier === 0 ? '0' : <>—}\n \n )}\n\n
\n );\n}\n\nconst ChannelCell = ({name, status, modifier}) => {\n return (\n \n {name} \n {status === 'archived' && (\n <>\n Inactive \n \n This channel is no longer active.\n \n \n\n )}\n {modifier === 0 && (\n <>\n Blocked \n \n When the bid modifier is zero, activity on this channel is blocked.\n \n \n\n )}\n
\n )\n}\n\nconst ModifierTable = ({data, onBidChange, onCeilingChange, onClear, allowBidCeiling, allowEdit, highlightApplied}) => {\n\n const getRowClassName = useCallback((row) => {\n if (!highlightApplied) return '';\n const { bid_modifier, bid_ceiling } = row.original;\n return (!isNaN(parseInt(bid_modifier)) || bid_ceiling) ? 'row-applied' : '';\n }, [highlightApplied]);\n\n // hide columns depending on permissions\n const initialTableState = useMemo(() => {\n const state = {\n sortBy: [{ id: 'channel_name', desc: false }],\n hiddenColumns: []\n };\n if (!allowBidCeiling) {\n state.hiddenColumns.push('bid_ceiling')\n }\n if (!allowEdit) {\n state.hiddenColumns.push('clear-btn-col')\n }\n return state;\n }, []);\n\n const columns = useMemo(() => [\n {\n Header: 'Name',\n accessor: 'channel_name',\n defaultCanSort: true,\n minWidth: 200,\n className: 'name-cell',\n Cell: ({row, value}) => {value ? `$${parseFloat(value).toFixed(2)}` : <>—} \n ),\n maxWidth: 120,\n },\n {\n Header: '',\n id: 'clear-btn-col',\n Cell: ({row}) => \n { (row.original.bid_modifier !== '' || row.original.bid_ceiling !== '') && (\n onClear(row.original.channel_id)}\n title=\"Remove channel modifier\"\n >\n clear\n \n )}\n\n
,\n width:100\n }\n ], [])\n\n return (\n \n
Prefill Integrations
\n
Configure integration with external systems such as CRMs
\n\n {definitionsRef.current.length === 0 &&
No integration definitions found for product and vertical }\n\n
\n \n collection.setWillDeleteIndex(i)}\n allowControls={allowEdit}\n />\n \n
\n ) : (\n <>\n {allowEdit ? (\n \n \n ) : (\n No prefill integration is configured. \n )}\n \n )}\n\n \n
\n\n
\n\n {error\n && (\n \n {error}\n \n )}\n\n {/* Since this is not a collection of configurations, it's always \"new\" */}\n {Object.keys(sip).length > 0 || editMode ? (\n \n \n )}\n
\n );\n};\n\nSipConfig.propTypes = {\n error: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n sip: PropTypes.object.isRequired\n};\n\nexport default SipConfig;\n\n","import React, { useContext, useRef, useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Row, Col, FormText, FormGroup, Label, Button, Input, FormFeedback\n} from \"reactstrap\";\nimport {StandardAlert} from \"@thedmsgroup/mastodon-ui-components\"\nimport RulesContext from '../../../../Providers/RulesContext';\nimport DeliveryDestinations from '../../../../Components/Rules/DeliveryDestinations';\nimport Prefill from './Prefill';\nimport SipConfig from './SipConfig';\nimport {TokenTextarea} from \"@thedmsgroup/mastodon-ui-components\";\nimport useApi from \"../../../../Hooks/useApi\";\nimport {HelpPopper} from \"@thedmsgroup/mastodon-ui-components\";\n\n\nconst Destination = ({ allowEdit = true, ...props }) => {\n const rulesContext = useContext(RulesContext);\n const deliveryDefinitionsRef = useRef(rulesContext.api.getIntegrationDefinitionsByType('delivery'));\n const preTransferDefinitionsRef = useRef(rulesContext.api.getIntegrationDefinitionsByType('pre_transfer'));\n const debugApi = useApi('debug', 'template');\n const[redirectUrl, setRedirectUrl] = useState(props.redirectUrl);\n const[redirectUrlTemplate, setRedirectUrlTemplate] = useState(props.redirectUrlTemplate);\n\n const handleDeliveryChange = (destinations) => {\n props.onChange('delivery_destinations', destinations);\n };\n\n const handleCallStartedWebhookChange = (destinations) => {\n props.onChange('call_started_webhooks', destinations);\n };\n\n const handleCallEndedWebhookChange = (destinations) => {\n props.onChange('call_ended_webhooks', destinations);\n };\n\n const handlePreTransferIntegrationsChange = (destinations) => {\n props.onChange('pre_transfer_integrations', destinations);\n };\n\n const handlePrefillChange = (prefill) => {\n props.onChange('prefill', prefill);\n };\n\n const handleSipChange = (sip) => {\n props.onChange('destination_sip', sip);\n };\n\n\n const handleChangeRedirectUrl = useCallback((val) => {\n setRedirectUrl(val);\n props.onChange('redirect_url', val);\n }, []);\n\n\n const handleChangeRedirectUrlTemplate = (val) => {\n setRedirectUrlTemplate(val);\n props.onChange('redirect_url_template', val);\n };\n\n const handleClickDestinationNumberAncestor = () => {\n const targetRule = rulesContext.api.getRule(props.propAncestors.destination_number.id);\n targetRule && rulesContext.api.setSelected(targetRule);\n };\n\n const handleUrlPreview = async(url) => {\n const result = await debugApi.fetch( {\n template:url\n });\n return result ? result.result : \"\";\n }\n\n const { errors } = props;\n\n return (\n \n {(errors.destination_number || errors.delivery_destinations || errors.destination_sip)\n && (\n
\n Please correct the errors below before continuing\n \n )}\n { props.product === 'clicks' && (\n <>\n
\n
Redirect URL
\n {allowEdit ? (\n <>\n
\n \n \n The visitor will be redirected to this URL upon clicking an ad.\n Insert lead data by providing placeholder names surrounded by braces:\n &insured={currently_insured} \n . \n This destination may be overriden by prefill or proxy integration, if set.\n \n \n \n
\n\n
\n \n \n If receiving a redirect URL from a third party integration, use this template to add additional parameters.\n {redirect_url} \n {' '}\n as a placeholder for the provided URL. Or, if only query string parameters are specified,\n they will be appended to the given redirect URL (for example,d\n {' '}\n insured={currently_insured}&sub1={sub_1} \n )\n \n \n \n
\n \n ) : (\n <>\n
\n
Redirect URL \n
{redirectUrl || Not configured }
\n
\n {redirectUrlTemplate && (\n
\n
Redirect URL Template \n
{redirectUrlTemplate}
\n
\n )}\n \n )}\n
\n\n
\n \n\n \n )}\n\n { props.product === 'calls' && (\n
\n
Call Destination
\n
Enter a phone number or configure SIP transfer.
\n\n {/* would like to use a link to ancestor\n Need to call rulesContext.setSelected(rule, tab)\n */}\n\n {props.propAncestors.destination_number && (\n
\n \n The ancestor rule{' '}\n {props.propAncestors.destination_number.label} \n {' '} has the value {props.propAncestors.destination_number.value}. The ancestor value will be used if no value is entered here.\n
\n\n \n
\n )}\n\n
\n \n Phone Number\n \n The phone number should be a 10 digit number prefixed with "+1", with no dashes or spaces.
\n A Twilio template can be appended to the number.
\n \n \n\n {allowEdit ? (\n <>\n {errors.destination_number} \n \n ) : (\n {props.destinationNumber || Not configured }
\n )}\n\n \n \n\n
\n\n
\n \n SIP Transfer
\n Configuring SIP will override the destination phone number \n\n \n\n \n
\n\n
\n )}\n\n { props.product === 'calls' && (\n
\n
\n )}\n\n
\n
\n\n
\n
Impression Pixels
\n {impressionUrls.length === 0 ? (\n
No pixels configured \n ) : (\n impressionUrls.map((url, i) => (\n
{url}
\n ))\n )}\n
\n
Click Pixels
\n {clickUrls.length === 0 ? (\n
No pixels configured \n ) : (\n clickUrls.map((url, i) => (\n
{url}
\n ))\n )}\n
\n {errors.impression_urls}\n \n )}\n \n
Impression Pixels
\n
Enter URLs or tags for tracking impressions.
\n\n {keyedImpUrls.length === 0\n && (\n
\n \n No impression pixels are configured.\n \n Add a pixel \n \n \n \n \n )}\n\n
\n\n {keyedImpUrls.map((px, i) => (\n
removeImpUrl(i)}\n handleChange={(val) => updateImpUrl(i, val)}\n key={px.key}\n />\n ))}\n\n {keyedImpUrls.length > 0 && (\n \n \n Add Another \n \n
\n )}\n \n
\n
Click Pixels
\n
Enter URLs or tags for tracking clicks.
\n\n {keyedClickUrls.length === 0\n && (\n
\n \n No click pixels are configured.\n \n Add a pixel \n \n \n \n \n )}\n\n
\n\n {keyedClickUrls.map((px, i) => (\n
removeClickUrl(i)}\n handleChange={(val) => updateClickUrl(i, val)}\n key={px.key}\n />\n ))}\n\n {clickUrls.length > 0 && (\n \n \n Add Another \n \n
\n )}\n \n
\n {(errors.internal_bid_modifier || errors.qualifying_rate_start || errors.vendor_attributes)\n && (\n
\n Please correct the errors below before continuing\n \n )}\n\n
\n
Sale Rate Tracking
\n
By default, the ratio of sales vs non-sales is included in bidding calculations and affects future win rate. Settings in this section allow you to customize this behavior.
\n\n
\n Disable Sale Rate\n \n\n \n Track Sale Rate specific to this Rule\n \n By default, sale rate is tracked between source and buyer. If you enable this setting, this rule is tracking its own qualifying rate.\n You might do this if there is something special about this rule that significantly affects sale rate, and you want to isolate this behavior from the overall sale rate.
\n\n \n
\n\n \n \n Start Date\n \n Start rate tracking from the specified date. If not set,\n all available historic data will be used.
\n\n\n \n
\n handleChangeQRResetDate(dates[0])}\n />\n\n
\n\n {qualifyingRateStart &&
Clear }\n
Set to Now \n\n
Timezone: {timezoneDisplay} \n\n \n
\n
\n\n
\n
Internal Bid Modifier
\n
Modifies internal bid for sorting purposes. Does not affect the actual bid shown to vendors.
\n\n
\n Set to -1 to enable shadow bidding. \n \n
\n\n
\n
DBA (Doing Business As)
\n
Select the DBA Name you would like to relate with this match.
\n
\n\n \n
\n\n\n
\n
Buyer Name / Group
\n
This setting will be deprecated. Please use DBA above. \n
Attributes bids to specified buyer/group. This is used to de-duplicate bids within a feed - only one bid per buyer name is returned inside a single feed.
\n\n
\n Buyer Name \n \n\n
\n Buyer Group \n \n
\n\n
\n
Vendor Attributes
\n
\n Provide data to the vendor in match responses. Insert placeholder data with token names surrounded\n by braces (in quotes):\n "insured":"{currently_insured}" \n . \n
\n
\n\n \n\n
\n\n
\n
Exclude from Profit Reporting
\n
Do not log revenue to DMS Profit Reporting. This will apply to all descendant rules.
\n\n
\n Exclude from profit reporting\n \n \n\n
\n
Searchable Leads
\n
\n Index leads matched by this rule so they can be searched in near\n real time, instead of waiting for the reporting batch. This will\n apply to all descendant rules.\n {isRootRule\n ? ' Set here, it covers every order and segment on this account.'\n : ' Set it on the account rule to cover the whole account.'}\n
\n\n {/*\n * Only leads matched by an opted-in rule are indexed, and they are\n * held for 30 days. Say so plainly: this turns on retention of lead\n * PII, and whoever ticks it should know that rather than discover it.\n */}\n
\n Leads are retained for 30 days and include personal information.\n Only accounts that opt in can search them.\n
\n\n {!searchableLeads && searchableLeadsEffective && (\n
\n Already enabled by a parent rule. Leads matched here are searchable\n whether or not this box is ticked.\n \n )}\n\n
\n Make matched leads searchable\n \n \n\n {ctx.product === 'calls' && (\n
\n
Call Settings
\n
\n \n Bill Missed Calls \n Inherit parent setting \n Yes \n No \n \n \n\n \n Max Unqualified Calls \n After this many unqualified calls, further matches will be blocked.
\n \n\n \n Unqualified Start Date \n Use this to reset unqualified calls blocking.
\n\n \n
\n handleChangeResetUnqualifiedDate(dates[0])}\n />\n\n\n\n
\n
\n {unqualifiedCallsStart && Clear }\n Set to Now \n
\n
Timezone: {timezoneDisplay} \n \n
\n
\n )}\n\n
\n
Duplicate Settings
\n
\n
\n Duplicate Window (in days) \n The amount of days to check for duplicates (-1 is disabled and 0 is infinite).
\n \n
\n\n
\n\n
\n
\n */\n\nAdvanced.propTypes = {\n internalBidModifier: PropTypes.number,\n trackQualifyingRate: PropTypes.bool,\n ignoreSaleRate: PropTypes.bool,\n qualifyingRateStart: PropTypes.string,\n vendorAttributes: PropTypes.string,\n excludeProfitReporting: PropTypes.bool,\n searchableLeads: PropTypes.bool,\n searchableLeadsEffective: PropTypes.bool,\n isRootRule: PropTypes.bool,\n billMissedCalls: PropTypes.bool,\n duplicateWindow: PropTypes.number,\n maxUnqualifiedCalls: PropTypes.number,\n unqualifiedCallsStart: PropTypes.string,\n dbaId:PropTypes.number,\n tokens: PropTypes.array,\n timezone: PropTypes.string,\n onChange: PropTypes.func,\n errors: PropTypes.object,\n};\n\nexport default React.memo(Advanced);\n","import React from 'react';\nimport {\n Row, Col, FormGroup, Input, Badge,\n} from 'reactstrap';\nimport PropTypes from 'prop-types';\nimport { useDebouncedCallback } from 'use-debounce';\n\n/*\n * For entering a rule tag\n * Note: we used to allow an array of tags per rule (see the Tagger component).\n * Now it's only one tag per rule, but the API still handles it as an array;\n */\nconst Tag = (props) => {\n const handleChangeDebounced = useDebouncedCallback((val) => {\n // must be array due to API requirements\n val = val.trim(val);\n props.onChange(val ? [val] : []);\n }, 400);\n\n const tagValue = props.tags && props.tags.length > 0 ? props.tags[0] : '';\n\n return (\n \n
Rule Tag
\n
\n A tag can be used to create special filters and groupings in reports.\n For example: "Mobile Leads", "Generic Search", or "Premium Search"\n
\n\n {props.allowEdit ? (\n
\n \n handleChangeDebounced(e.target.value)}\n placeholder=\"Enter a word or phrase\"\n maxLength={50}\n />\n \n \n
\n ) : (\n
{tagValue ? {tagValue} : No tags have been configured }
\n )}\n\n
\n\n {accountAds.length === 0 && (\n
\n The account has no ads. This will block all bidding.\n \n )}\n\n\n
\n
Rule Ads {ruleAds.length >=1 && ({ruleAds.length}) }
\n\n\n {ruleAds.length > 0 ? (\n <>\n
These ads{!isRootRule && !overrideParent && , and the ads from parent rules, }\n {' '}will be used for this rule and all child rules, unless overridden.
\n {/* For all but account rule, allow override choice */}\n {!isRootRule && (\n allowEditOrder ? (\n
\n
\n
\n
\n \n Override Parent Ads\n \n Use only the selected ads. Do not use ads defined in parent rules. \n
\n
\n ) : (\n
\n Override Parent Ads: {overrideParent ? 'Yes' : 'No'} \n
\n )\n )}\n\n
\n {accountAds.filter((ad) => ruleAds.includes(ad.id)).map((ad, i) => (\n
\n \n
{ad.name}
\n {allowEditOrder && (\n
handleRemoveAd(ad.id)}>\n \n )}\n\n
\n\n ))}\n
\n \n\n\n\n ) : (\n
\n No ads are selected for this rule. \n \n )}\n\n
\n\n\n {accountAds && allowEditOrder && (\n\n
\n
Account Ads
\n
Select from the ads below to apply an ad to this rule
\n
\n {allowEditOrder && (\n <>\n Select All \n Reset \n \n )}\n\n \n Account Ad Library\n \n
\n\n
\n {accountAds.map((ad, i) => {\n let isSelected = selectedAds.includes(ad.id)\n return (\n\n
\n \n
{ad.name}
\n\n { isSelected ? (\n
\n Selected\n
\n ) : (\n <>\n {allowEditOrder && (\n
handleSelectAd(ad.id)}>\n Select\n \n )}\n \n\n )}\n\n\n
\n )\n })}\n
\n
\n\n )}\n\n
\n \n\n);\n\nAds.propTypes = {\n ruleAds: PropTypes.array.isRequired,\n accountAds: PropTypes.array.isRequired,\n onChangeAds: PropTypes.func.isRequired,\n overrideParent: PropTypes.bool,\n isRootRule: PropTypes.bool,\n accountId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nAds.defaultProps = {\n overrideParent: false,\n isRootRule: false,\n};\n\nexport default Ads;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { Nav } from 'reactstrap';\nimport { FormTabFlat, FormTabMore } from '../../../../Components/Form/FormCommon';\nimport usePermission from \"../../../../Hooks/usePermission\";\n\n/*\n * Navigation for RulesConfig form\n */\n\nconst NavTabs = ({\n activeTab, handleSelectTab, errorTabs, isSectionValid, product, allowAdvanced,\n}) => {\n const allowEditOrder = usePermission('order.edit');\n const moreTabs = useMemo(() => {\n const tabs = product === 'calls' ? [\n { id: 'budget', label: 'Budget/Caps', valid: isSectionValid('datasheets') },\n { id: 'datasheets', label: 'Datasheets', valid: isSectionValid('budget') },\n { id: 'destinations', label: 'Destinations', valid: isSectionValid('destinations') },\n { id: 'tags', label: 'Tag', valid: isSectionValid('tags') },\n { id: 'calls', label: 'Call Settings', valid: isSectionValid('calls') },\n { id: 'activity', label: 'On/Off', valid: isSectionValid('activity') },\n ] : [\n { id: 'budget', label: 'Budget', valid: isSectionValid('budget') },\n { id: 'datasheets', label: 'Datasheets', valid: isSectionValid('budget') },\n { id: 'destinations', label: 'Destinations', valid: isSectionValid('destinations') },\n { id: 'tags', label: 'Tag', valid: isSectionValid('tags') },\n { id: 'activity', label: 'On/Off', valid: isSectionValid('activity') },\n ];\n\n if (product === 'clicks') {\n tabs.push({ id: 'tracking', label: 'Tracking', valid: isSectionValid('tracking') });\n }\n\n if (allowAdvanced) {\n tabs.push({ id: 'advanced', label: 'Advanced', valid: isSectionValid('advanced') });\n }\n\n return tabs;\n }, [product, allowAdvanced]);\n\n return (\n \n \n );\n};\n\nNavTabs.propTypes = {\n activeTab: PropTypes.string,\n handleSelectTab: PropTypes.func,\n isSectionValid: PropTypes.func,\n errorTabs: PropTypes.array,\n product: PropTypes.string,\n allowAdvanced: PropTypes.bool,\n};\n\nNavTabs.defaultProps = {\n activeTab: '1',\n handleSelectTab: () => {},\n isSectionValid: true,\n};\n\nexport default NavTabs;\n","import React, {\n useContext, useState, useEffect, Suspense, lazy,\n} from 'react';\nimport {\n Button,\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n UncontrolledDropdown,\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport CopyWidget from '../../../Components/Rules/CopyWidget';\nimport MoveWidget from '../../../Components/Rules/MoveWidget';\n\nimport RulesContext from '../../../Providers/RulesContext';\nimport usePermission from '../../../Hooks/usePermission';\nimport {StandardAlert} from \"@thedmsgroup/mastodon-ui-components\"\n\nconst LazyBulkEditModal = lazy(() => import(/* webpackChunkName: \"RuleModals\" */ './RulesConfig/BulkEditRulesModal'));\nconst LazyBatchRuleModal = lazy(() => import(/* webpackChunkName: \"RuleModals\" */ '../../../Components/Rules/BatchRuleModal'));\nconst LazySettingCopyModal = lazy(() => import(/* webpackChunkName: \"RuleModals\" */ '../../../Components/Rules/SettingCopyModal'));\nconst LazySettingPasteModal = lazy(() => import(/* webpackChunkName: \"RuleModals\" */ '../../../Components/Rules/SettingPasteModal'));\n\nconst ActionHeader = ({ label, setActionMode }) => (\n \n setActionMode(null)} color=\"transparent\"> \n
{label} \n \n);\n\n/*\n * ACTIONS PANEL\n * Slide-out panel for Rule Manager containing rule actions like copy, add, bulk update, etc\n * Some actions are done within the menu, and others will open a modal or do some other external action\n */\nconst ActionsPanel = (props) => {\n const rulesContext = useContext(RulesContext);\n const [actionMode, setActionMode] = useState(null);\n const [bulkEditModal, setBulkEditModal] = useState(false);\n const [batchRuleModal, setBatchRuleModal] = useState(false);\n const [settingCopyModal, setSettingCopyModal] = useState(false);\n const [settingPasteModal, setSettingPasteModal] = useState(false);\n const allowOrdersEdit = usePermission('orders.edit');\n\n const toggleBulkEditModal = () => setBulkEditModal(!bulkEditModal);\n const toggleSettingCopyModal = () => setSettingCopyModal(!settingCopyModal);\n const toggleSettingPasteModal = () => setSettingPasteModal(!settingPasteModal);\n const toggleBatchRuleModal = () => setBatchRuleModal(!batchRuleModal);\n\n const handleClose = () => {\n setActionMode(null);\n rulesContext.api.toggleActionsPane();\n };\n\n const handleDeleteRule = () => {\n // props.onDeleteRule();\n rulesContext.api.deleteRule(props.rule);\n handleClose();\n };\n\n const handleAddRule = (action) => {\n rulesContext.api.addRule(props.rule, action);\n handleClose();\n };\n\n const toggleDisabled = () => {\n if (props.rule.disabled) {\n rulesContext.api.disableRule(props.rule, false);\n handleClose();\n } else {\n // confirm\n setActionMode('disable');\n }\n };\n\n const handleDisable = () => {\n rulesContext.api.disableRule(props.rule, true);\n handleClose();\n };\n const handleSave = () => {\n props.onSaveRule();\n handleClose();\n };\n\n // close when modal opens\n useEffect(() => {\n if (batchRuleModal || settingCopyModal || settingPasteModal || bulkEditModal) {\n handleClose();\n }\n }, [batchRuleModal, settingCopyModal, settingPasteModal, bulkEditModal]);\n\n if (!props.rule) return (null);\n\n return (\n <>\n {/* Hide RuleActions header when in action mode? */}\n \n\n {/* Show menu if NOT in action mode */}\n {!actionMode && (\n <>\n
\n
Rule Actions \n \n\n
\n\n
\n \n \n \n\n \n handleAddRule('below')} disabled={props.isRootRule}>\n \n handleAddRule('child')}>\n \n \n \n \n \n
\n\n
\n \n
\n\n
\n setActionMode('copy')}\n disabled={props.isRootRule || props.rule.isNew}\n className=\"no-case\"\n >\n
\n\n
\n setActionMode('move')}\n disabled={props.isRootRule || props.rule.isNew}\n className=\"no-case\"\n >\n
\n\n
\n \n\n {props.rule.disabled ? (\n <>\n
\n\n
\n setActionMode('delete')}\n disabled={props.isRootRule || props.rule.isNew}\n className=\"no-case\"\n >\n
\n\n
\n \n
\n\n {allowOrdersEdit === true && (\n
\n \n \n \n\n \n \n \n \n \n \n \n
\n )}\n\n
\n \n )}\n\n {/*\n * Action view (menu goes away, show action form\n */}\n\n {actionMode === 'copy' && (\n
\n
\n\n
\n setActionMode()} />\n
\n
\n )}\n\n {actionMode === 'move' && (\n
\n )}\n\n {actionMode === 'delete' && (\n
\n
\n\n
\n
Are you sure? Any rules that descend from this rule will also be deleted. \n
\n setActionMode(null)} >Cancel \n Delete \n
\n
\n
\n )}\n\n {actionMode === 'disable' && (\n
\n
\n\n
\n
\n Disabling will block the application of this rule and all descendant rules.\n The rules can still be edited.\n \n
\n\n setActionMode(null)} >Cancel \n Disable \n\n
\n
\n
\n )}\n\n
\n\n\n
Confirm lead sales by sending data to a third party. This is also referred to as POST integration.
\n\n {definitionsRef.current.length === 0 &&
No integration configurations found }\n\n
\n collection.setWillDeleteIndex(i)}\n allowControls={allowEdit}\n />\n\n \n ) : (\n <>\n {allowEdit && definitionsRef.current.length > 0 ? (\n \n \n ) : (\n No sale confirmation is configured. \n )}\n \n\n )}\n\n \n
\n\n
\n Billable duration is required for rules with a destination number.\n , (value, testContext) => {\n // if the rule has a #, test that (1) rule has duration set, or (2) ancestor has it set\n if (testContext.parent.destination_number) {\n if (!value && !testContext.options.context.propAncestors.billable_duration) {\n return false;\n }\n }\n return true;\n })\n // .when(`$propAncestors`, (propAncestors, schema) => {\n // console.log('index.js:WHEN propAncestors, schema', propAncestors, schema);\n // //if itself OR ancestors has destination_number, AND no ancestor has billable duration, must require duration\n // return propAncestors.\n // })\n .transform((n) => ((isNaN(n) || n === null) ? null : parseInt(n)))\n .min(1, 'Enter a number greater than zero or leave blank')\n .max(500, 'Maximum billable duration is 500 seconds')\n .nullable(),\n // destination_sip: Yup.object().shape({\n // settings: Yup.object().shape({\n // uri: Yup.string().required('URI is required'),\n // })\n // .nullable(),\n // })\n // .nullable(),\n destination_sip: Yup.mixed().test('destination-sip', 'SIP configuration must have a URI.', (value) => {\n // if set, expect object with 'name' and 'settings'\n const settings = value && typeof value === 'object' ? value.settings : null;\n if (!settings) {\n return true; // empty okay\n } else if (typeof settings === 'object') {\n if (Object.keys(settings).length === 0) {\n return true;\n }\n const uri = settings.uri ? settings.uri.trim() : '';\n if (!uri) {\n return false;\n }\n }\n return true;\n }).nullable(),\n impression_urls: PixelValidation,\n click_urls: PixelValidation,\n prefill: Yup.mixed().validPrefill('Invalid prefill configuration'),\n vendor_attributes: JSONValidation,\n\n});\n\n// Associates a tab to a validated field (mark tab/ goto tab after error)\nconst FormSectionToFieldMap = {\n summary: ['label'],\n targeting: ['match_conditions'],\n bidding: ['bidding.bid_modifier', 'bidding.absolute_bid', 'proxy_bidding'],\n enrichments: ['enrichment_addons'],\n channels: ['channel_modifiers'],\n sale_confirmation: ['sale_confirmation'],\n activity: ['schedule'],\n destinations: ['destination_number', 'delivery_destinations', 'prefill'],\n calls: ['billable_duration', 'call_concurrency'],\n tracking: ['impression_urls', 'click_urls'],\n advanced: ['vendor_attributes', 'internal_bid_modifier', 'qualifying_rate_start', 'bill_missed_calls', 'duplicate_window', 'buyer_name', 'buyer_group'],\n};\n\nconst initializeRule = (rule) => {\n if (rule) {\n\n // Empty budget or caps is array, expecting object\n if (Array.isArray(rule.budgets)) rule.budgets = {};\n if (Array.isArray(rule.caps)) rule.caps = {};\n if (Array.isArray(rule.sale_attempt_caps)) rule.sale_attempt_caps = {};\n\n if (Array.isArray(rule.proxy_bidding)) {\n rule.proxy_bidding = {};\n }\n\n // Extract ids from ads collection\n if (Array.isArray(rule.ads)) {\n rule.ads = rule.ads.map((ad) => (typeof ad === 'object' ? ad.id : ad));\n }\n\n // Bids, zero padding: in db as 4.20, but api provides '4.2'\n if (rule.bidding.absolute_bid) {\n const strBid = rule.bidding.absolute_bid.toString();\n const dotPos = strBid.indexOf('.');\n if (dotPos > 0 && strBid.indexOf('.') === strBid.length - 2) {\n rule.bidding.absolute_bid += '0';\n }\n }\n\n rule.dba_id = rule.dba?.id ?? null;\n\n if (!rule.prefill) rule.prefill = {};\n if (!rule.sale_confirmation) rule.sale_confirmation = {};\n\n rule.channel_modifiers = rule.channel_modifiers.map((cm) => {\n if (cm.bid_ceiling === null) cm.bid_ceiling = '';\n return cm;\n });\n\n if (Array.isArray(rule.destination_sip) || !rule.destination_sip) {\n rule.destination_sip = {};\n } else if (!rule.destination_sip.settings && Object.keys(rule.destination_sip).length > 0) {\n const config = {\n name: 'sip',\n settings: rule.destination_sip,\n };\n\n if (typeof config.settings.headers === 'object' && !Array.isArray(config.settings.headers)) {\n config.settings.headers = Object.entries(rule.destination_sip.headers).map(([key, value]) => {\n return { key, value };\n });\n }\n\n rule.destination_sip = config;\n }\n }\n\n return rule;\n};\n\n/*\n * Component for updating a rule\n *\n * Includes multiple tabs for editing different aspects of the rule,\n * update functions, validation, and a sliding pane for rule actions (copy, bulk update, etc).\n * Keeps state of rule object as forms are changed.\n *\n * Calls the remote API directly for create, update, and delete. For other actions it calls the\n * api provided by the context (RulesManager).\n *\n * Note: active tab is set by property (things outside of this component can update the selected tab)\n */\nconst RulesConfig = (props) => {\n const context = useContext(RulesContext)\n const [propAncestors, setPropAncestors] = useState({})\n const scrollTargetRef = useRef()\n const allowEdit = usePermission('orders.edit')\n initializeRule(props.rule)\n\n // For looking up the state of ancestor rules\n const ancestorFuncMap = {\n disabled: (r) => r.disabled,\n billable_duration: (r) => r.billable_duration,\n destination_number: (r) => r.destination_number,\n schedule_affects_siblings: (r) => r.schedule_affects_siblings,\n }\n\n // Rule state is the form state\n const {\n formApi, formIsDirty, formValues: rule, formErrors, formErrorSections, validationContext,\n } = useFormState(\n props.rule,\n ValidationSchema,\n null,\n FormSectionToFieldMap,\n { attributes: context.attributes, product: props.order.product },\n )\n\n const isNew = rule && rule.hasOwnProperty('isNew')\n\n // TODO: adjust this for scrolling within the modal\n const scrollToTop = () => {\n if (scrollTargetRef.current) {\n scrollTargetRef.current.scrollIntoView({behavior:'smooth'})\n }\n\n }\n\n // Read up the tree to find the immediate ancestors with certain properties.\n // For some things we need to display inherited values, and validate data based on whether the values exist.\n useEffect(() => {\n window.setTimeout(() => {\n const ap = context.api.findPropAncestors(props.rule, ancestorFuncMap);\n setPropAncestors(ap);\n formApi.setValidationContext({ ...validationContext, propAncestors: ap });\n }, 500);\n }, []);\n\n useEffect(() => {\n // Go to errored section if not on it already\n if (formErrorSections.length && !formErrorSections.includes(props.activeTab)) {\n props.onSelectTab(formErrorSections[0]);\n scrollToTop();\n }\n }, [formErrorSections]);\n\n // Send dirty form state to the top because it affects rule tree\n useEffect(() => {\n context.api.setIsDirty(formIsDirty);\n }, [formIsDirty]);\n\n const handlePasteRule = (rule) => {\n if (typeof rule !== 'object') return;\n rule.id = props.rule.id;\n rule.parent_id = props.rule.parent_id;\n rule.priority = props.rule.priority;\n rule.rules = [];\n if (props.rule.isNew) {\n rule.isNew = props.rule.isNew;\n }\n\n if (props.order.product !== 'clicks') {\n rule.ads = [];\n rule.impression_urls = [];\n rule.click_urls = [];\n rule.redirect_url = '';\n rule.prefill = {};\n } else {\n rule.delivery_destinations = [];\n }\n\n if (props.order.product !== 'calls') {\n rule.destination_number = '';\n rule.call_concurrency = null;\n rule.billable_duration = null;\n }\n\n formApi.setValues({ ...rule });\n };\n\n //Some settings can be dayparted: bidding and caps\n const handleChangeSettingSchedule = (setting, value, timezone) => {\n formApi.setValues({\n ...rule,\n [setting]: value,\n [`${setting}_timezone`]: timezone || null,\n });\n };\n\n const handleCancel = () => {\n props.onCancel()\n scrollToTop();\n };\n\n const checkForDeprecatedSettings = () => {\n const errors = [];\n const checks = [\n { path: rule.proxy_bidding?.integration, type: 'proxy_bidding', field: 'proxy_bidding' },\n { path: rule.prefill?.integration, type: 'prefill', field: 'prefill' },\n { path: rule.sale_confirmation?.integration, type: 'sale_confirmation', field: 'sale_confirmation' },\n ];\n\n checks.forEach(({ path, type, field }) => {\n if (path) {\n const defs = context.api.getIntegrationDefinitionsByType(type);\n const deprecated = getDeprecatedSettings(path, defs);\n if (deprecated.length > 0) {\n errors.push({ field, message: `Integration \"${path.name}\" has deprecated settings that must be removed: ${deprecated.join(', ')}` });\n }\n const badChoices = getDeprecatedChoices(path, defs);\n if (badChoices.length > 0) {\n errors.push({ field, message: `Integration \"${path.name}\" has settings with choices that are no longer available: ${badChoices.map(c => c.label).join(', ')}` });\n }\n }\n });\n\n // Array-based integrations\n const arrayChecks = [\n { items: rule.delivery_destinations, type: 'delivery', field: 'delivery_destinations' },\n { items: rule.enrichment_addons, type: 'enrichment', field: 'enrichment_addons' },\n { items: rule.pre_transfer_integrations, type: 'pre_transfer', field: 'delivery_destinations' },\n ];\n\n arrayChecks.forEach(({ items, type, field }) => {\n if (Array.isArray(items)) {\n const defs = context.api.getIntegrationDefinitionsByType(type);\n items.forEach((item) => {\n if (item.integration) {\n const deprecated = getDeprecatedSettings(item.integration, defs);\n if (deprecated.length > 0) {\n errors.push({ field, message: `Integration \"${item.integration.name}\" has deprecated settings that must be removed: ${deprecated.join(', ')}` });\n }\n const badChoices = getDeprecatedChoices(item.integration, defs);\n if (badChoices.length > 0) {\n errors.push({ field, message: `Integration \"${item.integration.name}\" has settings with choices that are no longer available: ${badChoices.map(c => c.label).join(', ')}` });\n }\n }\n });\n }\n });\n\n return errors;\n };\n\n const handleSave = () => {\n const deprecatedErrors = checkForDeprecatedSettings();\n const isValid = formApi.validate();\n\n deprecatedErrors.forEach(({ field, message }) => {\n formApi.setError(field, message);\n });\n\n if (isValid && deprecatedErrors.length === 0) {\n save();\n }\n };\n\n const save = () => {\n scrollToTop();\n // Fully de-ref and prep values for save\n const saveRule = copy(rule);\n delete saveRule.rules;\n saveRule.order_id = props.order.id;\n\n saveRule.label = saveRule.label.trim();\n\n saveRule.ad_ids = saveRule.ads;\n delete saveRule.ads;\n saveRule.dba_id = saveRule.dba_id ?? null;\n delete saveRule.dba;\n saveRule.datasheet_ids = saveRule.datasheets.map((ds) => ds.id);\n delete saveRule.datasheets;\n\n // format number to +18885552222 (masking should give us +1 already)\n // MRK-9038 allow any string due to Twilio syntax\n // if (saveRule.destination_number) {\n // saveRule.destination_number = saveRule.destination_number.replace(/[^\\d\\+]/g, '');\n // }\n\n\n // Empty proxy bidding config, remove keys\n if (!saveRule.proxy_bidding || Object.values(saveRule.proxy_bidding).filter((i) => i).length === 0) saveRule.proxy_bidding = {};\n\n saveRule.schedule_type = saveRule.schedule.length > 0 ? 'inactive' : 'active';\n\n // Zip match condition comes in as array, must be saved as string.\n // If it's still an array (no interaction), stringify it\n if (rule.match_conditions) {\n rule.match_conditions = rule.match_conditions.map((group) => group.map((target) => {\n if ((target.attribute === 'zipcode' || target.attribute === 'sub_1') && Array.isArray(target.value)) {\n target.value = target.value.join(',');\n }\n return target;\n }));\n }\n\n if (rule.vendor_attributes) {\n rule.vendor_attributes = JSON.stringify(rule.vendor_attributes);\n }\n\n // Vendor_attributes of integration config - stringify JSON\n // MST-1264 we are moving this value to a rule-level field\n // but for now we are keeping it in the integrations for BC reasons\n if (saveRule.enrichment_addons) {\n saveRule.enrichment_addons = saveRule.enrichment_addons.map((addOn) => {\n if (addOn.integration && addOn.integration.vendor_attributes) {\n addOn.integration.vendor_attributes = JSON.stringify(addOn.integration.vendor_attributes);\n }\n return addOn;\n });\n }\n\n if (saveRule.proxy_bidding && !Array.isArray(saveRule.proxy_bidding)) {\n if (saveRule.proxy_bidding.integration && saveRule.proxy_bidding.integration.vendor_attributes) {\n saveRule.proxy_bidding.integration.vendor_attributes = JSON.stringify(saveRule.proxy_bidding.integration.vendor_attributes);\n }\n }\n\n if (saveRule.delivery_destinations) {\n saveRule.delivery_destinations = saveRule.delivery_destinations.map((dest) => {\n if (dest.integration && dest.integration.vendor_attributes) {\n dest.integration.vendor_attributes = JSON.stringify(dest.integration.vendor_attributes);\n }\n return dest;\n });\n }\n\n if (saveRule.channel_modifiers) {\n saveRule.channel_modifiers = Object.values(saveRule.channel_modifiers);\n }\n\n if (saveRule.destination_sip?.settings && Object.keys(saveRule.destination_sip.settings).length) {\n // Discard name, label... just the settings\n saveRule.destination_sip = saveRule.destination_sip.settings;\n // Transform array of objects with literal key/value attributes to an object of { key1:value1, key2:value2, etc }\n if (saveRule.destination_sip.headers) {\n const headers = {};\n saveRule.destination_sip.headers.map((header) => {\n headers[header.key] = header.value;\n });\n saveRule.destination_sip.headers = headers;\n }\n } else {\n saveRule.destination_sip = null;\n }\n\n context.api.saveRule(saveRule, isNew);\n };\n\n return (\n <>\n
\n \n\n \n\n Please select a rule to configure
\n )}\n\n { rule && (\n <>\n \n \n This rule is disabled. Bid, attributes, and descendant rules will not be applied.\n {allowEdit && context.api.disableRule(rule, false)}>Enable Rule }\n \n
\n ) }\n\n {/* Rule is not disabled but ancestor is */}\n {propAncestors.disabled && (\n \n \n The ancestor rule "\n {propAncestors.disabled.label}\n " has been disabled. This rule will not be applied.\n \n
\n ) }\n\n \n
\n\n \n \n\n \n\n \n {allowEdit ? (\n <>\n
\n
\n formApi.handleOnChange('match_is_required', e.target.checked)}\n />\n
\n
\n Match is required for bid \n \n If this option is selected, and the rule does not match, the bidding process for this order will stop.\n \n
\n
\n\n
\n
\n formApi.handleOnChange('is_standalone', e.target.checked)}\n />\n
\n
\n Standalone Rule \n \n If this option is selected, the rule does not pass any of its settings along to its sibling rules.\n \n
\n
\n \n ) : (\n <>\n
{rule.match_is_required ? 'Yes' : 'No'} \n
{rule.is_standalone ? 'Yes' : 'No'} \n \n )}\n
formApi.handleOnChange('match_conditions', groups)}\n attributes={context.attributes}\n attributeGroups={context.attributeGroups}\n errors={formErrors.match_conditions}\n className=\"advertiser\"\n allowEdit={allowEdit}\n />\n ) : (\n rule.match_conditions.length > 0 && rule.match_conditions[0].length > 0 ? (\n \n
\n ) : (\n No targets defined. \n )\n )}\n\n \n\n \n formApi.handleOnChange('datasheets', sheets, dirtyForm)}\n errors={formErrors.datasheets}\n allowEdit={allowEdit}\n />\n \n\n \n \n\n \n formApi.handleOnChange('enrichment_addons', sc)}\n errors={formErrors.enrichment_addons || {}}\n loadIntegrations={() => {\n return context.api.getIntegrationDefinitionsByType('enrichment')\n }}\n />\n \n\n \n formApi.handleOnChange('sale_confirmation', sc)}\n errors={formErrors.sale_confirmation || {}}\n />\n \n\n \n formApi.handleOnChange('schedule', s)}\n onChangeScheduleType={(type) => formApi.handleOnChange('schedule_type', type)}\n onChangeScheduleAffectsSiblings={(val) => formApi.handleOnChange('schedule_affects_siblings', val)}\n timezone={props.order.account.timezone}\n propAncestors={propAncestors}\n isRootRule={props.isRoot}\n error={formErrors.schedule}\n />\n \n\n \n \n\n {props.order.product === 'clicks' && (\n \n \n )}\n\n \n \n\n \n \n\n \n formApi.handleOnChange('tags', tags)}\n allowEdit={allowEdit}\n />\n \n\n {props.order.product === 'calls' && (\n \n \n )}\n\n {props.order.product === 'clicks' && (\n \n \n )}\n\n \n {props.allowAdvanced && (\n \n \n
\n\n { (formIsDirty || Object.entries(formErrors).length > 0) && (\n \n Please correct errors before saving. \n : This rule has been modified. Save your changes or cancel. }\n \n )}\n\n \n Cancel\n \n\n \n Save Rule\n \n\n
\n )}\n \n )}\n\n \n \n\n\n );\n};\n\nRulesConfig.propTypes = {\n rule: PropTypes.object,\n attributes: PropTypes.object,\n attributeLookup: PropTypes.object,\n product: PropTypes.string,\n channels: PropTypes.array,\n accountAds: PropTypes.array,\n datasheets: PropTypes.array,\n dbas: PropTypes.array,\n tokens: PropTypes.array,\n timezone: PropTypes.string,\n isDirty: PropTypes.bool,\n isUpdating: PropTypes.bool,\n isRoot: PropTypes.bool,\n activeTab: PropTypes.string,\n onSelectTab: PropTypes.func,\n actionsOpen: PropTypes.bool,\n allowAdvanced: PropTypes.bool,\n};\n\nexport default RulesConfig;\n","import React from 'react';\nimport ContentLoader from 'react-content-loader';\nimport PageSection from '../../../Layout/PageSection';\n\n/*\n * https://github.com/danilowoz/create-content-loader/blob/master/src/Gallery/insertYourLoaderHere/Gmail.js\n */\nconst RuleSkeleton = (props) => (\n \n \n\n = ({\n isOpen,\n close,\n order,\n accountOrders\n}) => {\n const app = useContext(AppContext);\n const navigate = useNavigate();\n const {\n formApi, formValues, formErrors\n }: any = useFormState({\n name:\"\",\n status: \"paused\"\n } as CloneOrderFormValues);\n\n\n const handleSave = () => {\n //@ts-ignore\n const {name, status} = formValues;\n const orderNames = accountOrders.map((o:Order) => o.name.toLowerCase());\n if (!name) {\n formApi.setError(\"name\", \"Name is required\")\n } else if (orderNames.includes(name.toLowerCase())) {\n formApi.setError(\"name\", \"An existing order has this name already\")\n }\n\n createOrder();\n }\n\n const handleCloseModal = () => {\n formApi.clearForm();\n close();\n }\n\n const createOrder = async () => {\n\n app.showLoader('modal', 'Copying Order...');\n\n const params = {\n name: formValues.name,\n status: formValues.status,\n product: order.product,\n vertical_id: order.vertical.id,\n account_id: order.account.id,\n copy_rules_from_id: order.id\n }\n const newOrder = await app.api.endpoints.orders.create(params)\n if (newOrder) {\n notify(`The order has been copied`, 'success');\n navigate(`/accounts/${order.account.id}/order/${newOrder.id}/rules`);\n handleCloseModal();\n } else {\n notify(`Unable to save order: ${app.api.error.name}`, 'error');\n }\n\n app.showLoader(false);\n }\n\n return (\n \n Clone Order \n {order.name}
\n \n \n New Order Name \n\n \n {formErrors.name}\n \n \n\n \n \n\n \n\n \n \n\n \n\n \n \n\n \n Cancel\n \n \n Clone\n \n\n \n \n );\n};\n\nexport default CloneOrderModal;\n","import React, {useState, useMemo, useEffect} from 'react';\nimport {Link, useNavigate} from \"react-router-dom\";\nimport {\n Label,\n Button,\n UncontrolledDropdown,\n DropdownToggle,\n DropdownMenu,\n DropdownItem\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PageSection from '../../../Layout/PageSection';\nimport usePermission from '../../../Hooks/usePermission';\nimport { titleCaseWord } from '../../../utils/string';\nimport StatusToggler from '../../../Components/Form/StatusToggler';\nimport useApi from '../../../Hooks/useApi';\nimport useFavoriteOrder from \"../../../Hooks/useFavoriteOrder\";\nimport {FaveHeart} from \"../../../Components\";\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport OrderLastSold from '../OrderLastSold';\nimport CloneOrderModal from \"./RulesConfig/CloneOrderModal\";\nimport {Order, StatusType} from \"../../../types\";\nimport StatusDot from \"../../../Components/Icons/StatusDot\";\n//@ts-ignore\nimport confirm from \"reactstrap-confirm\"\n\ntype OrderInfoBarProps = {\n order:Order\n}\n\n/*\n * Bar at top of rules manager shows order info and links\n */\nconst OrderInfoBar = ({ order }:OrderInfoBarProps) => {\n const [accountOrders, setAccountOrders] = useState([]);\n const navigate = useNavigate();\n const allowEditOrderStatus = usePermission('order_status.edit');\n const allowViewLeads = usePermission('leads.view');\n const allowViewCalls = usePermission('calls.view');\n const allowViewAuctions = usePermission('auctions.view');\n const allowCloneOrders = usePermission('orders_clone.create');\n const allowChangeLog = usePermission('changes.view');\n const {api} = useApi();\n const {favorites, addOrder, removeOrder} = useFavoriteOrder();\n\n const isFavorite = useMemo(\n () => {\n return favorites ? Boolean(favorites.find((fav:any) => fav.id === order.id)) : false;\n },\n [favorites]\n )\n\n const [isCloneOpen, setCloneOpen] = useState(false);\n\n useEffect(()=>{\n getExistingOrders(order.account.id)\n }, [])\n\n\n const getExistingOrders = async(account_id: any) => {\n // (this won't get archived orders but that's dandy\n if (account_id) {\n //setLoadingOrders(true);\n const orders = await api.endpoints.orders.list({account_id});\n if (orders) {\n setAccountOrders(orders);\n }\n }\n\n }\n\n const toggleClone = () => setCloneOpen(!isCloneOpen);\n\n const gotoOrder = (order:Order) => {\n navigate(`/accounts/${order.account.id}/order/${order.id}/rules`);\n }\n\n const archiveConfirm = async () => await confirm({\n title: 'Archive Order',\n message: 'Archive this item? It will be de-activated and removed from all listings.',\n confirmText: 'Yes, archive it',\n cancelText: \"Cancel archive\",\n })\n\n\n\n const handleStatusChange = async (orderId:number, status:StatusType) => {\n if (order) {\n\n if (status === 'archived') {\n const doArchive = await archiveConfirm()\n if (!doArchive) {\n return false\n }\n }\n\n const result = await api.endpoints.orders.update({\n id: orderId, name: order.name, status,\n });\n\n if (result) {\n notify('Order status updated', 'success');\n } else {\n notify('Unable to update order status', 'error');\n }\n\n return Boolean(result);\n }\n return false;\n };\n\n const handleSetFavorite = async (id:number, setAsFavorite:boolean) => {\n if (setAsFavorite) {\n await addOrder(id);\n } else {\n await removeOrder(id);\n }\n }\n\n\n return (\n \n {order.name} \n\n\n\n
\n\n\n
\n
Account \n
\n {order.account.name}\n {accountOrders.length > 1 && (\n \n Orders \n \n {accountOrders.map((ord, i) =>(\n gotoOrder(ord)} key={i}>\n \n ))}\n \n \n )}\n
\n
\n\n
\n
Vertical \n
{order.vertical.display_name}
\n
\n\n
\n
Product \n
{titleCaseWord(order.product)}
\n
\n\n
\n\n
\n
Last Sold \n
\n {order.last_sold_at ? (\n — }\n
\n
\n\n
\n\n\n\n\n
\n {/*
\n ORDER: {order.name} \n */}\n {/* Links and actions */}\n
\n\n {allowChangeLog && (\n \n \n \n )}\n\n {allowCloneOrders && (\n \n \n \n )}\n\n\n {order.product === 'leads' && allowViewLeads && (\n \n \n \n )}\n\n {order.product === 'calls' && allowViewCalls && (\n \n\n \n \n )}\n\n {allowViewAuctions && (\n <>\n \n \n \n \n \n \n \n\n )}\n
\n
)=>void}) => {\n\n return (\n \n {/*All Categories )*/}\n {DeliveryRejectCategoryChoices.map(\n (c:Record, i:number) => {c.label} \n )}\n\n \n )\n}\n\nexport default RejectionCategorySelect;\n","/*\n * Lists integrations and rejection counts for given rejection category\n */\nimport NumberFormat from \"react-number-format\";\nimport React from \"react\";\n\ntype IntegrationsRejectionsCountsProps = {\n rejectionsByCategory: Record\n category: string;\n className?:string;\n}\n\nconst IntegrationRejectionList = ({rejectionsByCategory, category, className=\"\"}:IntegrationsRejectionsCountsProps) => {\n\n return (\n \n
\n\n
\n {rejectionsByCategory && typeof rejectionsByCategory[category] !== 'undefined' ? (\n <>\n {rejectionsByCategory[category].map((data:any,i:number) => (\n
\n
{data.integration} \n
\n
\n ))}\n \n ) : (\n
None found \n )}\n\n
\n\n
\n
,\n isLoading:boolean,\n className?:string\n aggInterval?:string\n intervalLabel?:string;\n chartMinTime?:string;\n chartMaxTime?:string;\n onZoom?:(start:Date, end:Date) =>void,\n}\n\nconst DeliveryRejectStat = ({\n rejectCategory,\n onChangeRejectCategory,\n data = [],\n className = \"\",\n aggInterval,\n intervalLabel,\n chartMinTime,\n chartMaxTime,\n onZoom,\n\n}: DeliveryRejectStatProps) => {\n\n const [activeTab, setActiveTab] = useState(\"categories\");\n const [selectedRejectCategory, setSelectedRejectCategory] = useState(rejectCategory);\n\n const handleChangeRejectCategory = (e:ChangeEvent) => {\n setSelectedRejectCategory(e.target.value);\n onChangeRejectCategory(e.target.value);\n }\n\n\n return (\n \n\n
\n \n By Category\n \n \n By Integration\n \n\n \n\n
\n \n \n\n
\n
\n
\n {data.rejectionCategoryTotals && data.rejectionCategoryTotals.length > 0\n ? (\n data.rejectionCategoryTotals.map((bkt:any,i:number) => (\n
\n ))) : (\n
None found \n )}\n
\n\n
\n
\n\n\n {data.rejectionsOverTimeByCategory && (\n
\n )}\n\n
\n\n \n\n \n
\n\n {data.rejectionsOverTimeByIntegration && (\n
\n )}\n\n
\n\n \n\n
= {}) => {\n const [lookup, setLookup] = useState>({})\n const [isLoaded, setIsLoaded] = useState(false);\n const apiIntegrations = useApi('integrations', 'list');\n\n useEffect(() => {\n\n const loadIntegrations = async() => {\n const result = await apiIntegrations.fetch({ ...params, limit: 1000 } );\n if (result) {\n setLookup(() => {\n const records = {} as Record;\n result.data.map((intg:any) => {\n records[intg.name] = intg.label;\n })\n return records;\n })\n }\n setIsLoaded(true);\n }\n\n if (!Object.keys(lookup).length) {\n loadIntegrations()\n }\n\n }, [])\n\n const getIntegrationName = (alias:string) => {\n return lookup[alias] ?? alias;\n }\n\n return {lookup, isLoaded, getIntegrationName};\n\n};\n\nexport default useIntegrationNameLookup;\n","import React, {FC, useMemo} from 'react';\nimport {Button} from \"reactstrap\";\nimport FlexTable from \"../../../Components/Table/FlexTable\";\nimport {PercentFormatter, MoneyFormatter} from \"../../../Components/Table/Table\";\nimport {Utils} from \"@thedmsgroup/mastodon-ui-components\";\nimport NumberFormat from \"react-number-format\";\n\ntype RuleCapStat = {\n rule_id: string;\n order_id: string;\n type: string;\n start_date: string;\n budget_cap: string;\n budget_cap_used: string;\n budget_fill_rate: string;\n sale_cap: string | null;\n sale_cap_used: string | null;\n sale_fill_rate: string | null;\n rule_path: string;\n};\n\ntype CapStatsProps = {\n stats: RuleCapStat[],\n onSelectRule: (rule_id: number|string) => void,\n isLoading?: boolean,\n};\n\nexport const CapStats:FC = ({stats, onSelectRule, isLoading}) => {\n const columns = useMemo(() => [\n {\n Header: 'Rule',\n accessor:'rule_path',\n disableSortBy:true,\n Cell:({value, row}:any) => \n
\n )\n}\n\ntype RulePathProps = {\n rulePath: string;\n onSelect: (rule_id: number) => void;\n ruleId: number;\n};\n\nconst RulePathCell: React.FC = ({ rulePath, ruleId, onSelect }) => {\n const segments = rulePath.split(' > ');\n\n return (\n \n {segments.length > 1 ? (\n <>\n {segments.slice(0, -1).join(' > ')}{' > '}\n onSelect(ruleId)}>\n {segments[segments.length - 1]}\n \n \n ) : (\n onSelect(ruleId)}>\n {rulePath}\n \n )}\n
\n );\n};\n","import React, {useState, useEffect, useRef, useContext} from \"react\";\nimport useDateRangeValue from \"@thedmsgroup/mastodon-ui-components/lib/components/DateRangeSelect/useDateRangeValue\";\nimport {\n Button,\n Spinner\n} from \"reactstrap\";\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport {faCommentsDollar, faCompress, faDollarSign, faFileInvoiceDollar} from \"@fortawesome/free-solid-svg-icons\";\nimport usePermission from '../../../Hooks/usePermission';\nimport useApi from '../../../Hooks/useApi';\nimport PageSection from \"../../../Layout/PageSection\";\nimport DeliveryRejectStat from \"../../Deliveries/DeliveryRejectStat\";\nimport {aggregateToMultiDataset} from \"../../../Components/Chart/chart\";\nimport {ReadServiceBucket} from \"../../../types\";\nimport {BlockUI} from 'ns-react-block-ui';\nimport {DateRangeSelect, DefaultDateRangeSelectOptions, StandardAlert, Tile} from \"@thedmsgroup/mastodon-ui-components\";\nimport {HideawayPanel} from \"../../../Layout/HideawayPanel\";\nimport ApplyOrRefreshButton from \"../../../Components/Table/ApplyOrRefreshButton\";\nimport useIntegrationNameLookup from \"../../../Hooks/useIntegrationNameLookup\";\nimport NumberFormat from \"react-number-format\";\nimport {AggSelect} from \"../../../Components/Chart/AggSelect\";\nimport {useChartInterval} from \"../../../Hooks/useChartInterval\";\nimport {CapStats} from \"./CapStats\";\nimport RulesContext from \"../../../Providers/RulesContext\";\nimport {RulesApi} from \"./types\";\nimport useLocalStorage from \"../../../Hooks/useLocalStorage\";\n\n//import {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\n\ntype OrderDashboardProps = {\n orderId:number,\n userTimezone:string,\n onToggle?:(expanded:boolean) => void,\n onSelectRule?:(ruleId:number|string) => void\n}\n\n/*\n * Section of Order/Rules Manager that shows order stats\n */\nconst OrderDashboard = ({ orderId, userTimezone, onToggle }:OrderDashboardProps) => {\n const context = useContext(RulesContext)\n const rulesApi = context.api as RulesApi\n const {fetch: capsApi} = useApi(\"caps\", \"list\")\n\n const allowViewAuctions = usePermission('auctions.view');\n if (!allowViewAuctions) return ;\n const [isLoadingAuctions, setIsLoadingAuctions] = useState(false);\n const [isLoadingCaps, setIsLoadingCaps] = useState(false);\n const [isLoadingDeliveries, setIsLoadingDeliveries] = useState(true);\n const [deliveryData, setDeliveryData] = useState({});\n const [auctionData, setAuctionData] = useState({});\n const [capsData, setCapsData] = useState([]);\n const [capsDataError, setCapsDataError] = useState('');\n const {isLoaded: isIntegrationsLoaded, getIntegrationName} = useIntegrationNameLookup();\n const {valueToISO} = useDateRangeValue();\n const [filters, setFilters] = useState>({\n start: 'now/d',\n end: 'now/d',\n agg_interval: 'auto',\n agg_reject_category:'delivery_timeout',\n agg_timezone: userTimezone\n });\n const [zoomReset, setZoomReset] = useState|undefined>();\n const [chartMinMaxTime, setChartMinMaxTime] = useState({min:\"\", max:\"\"})\n const {intervalToApi, getIntervalLabel} = useChartInterval();\n const [intervalLabel, setIntervalLabel] = useState('')\n const realIntervalRef = useRef('auto');\n const [isScaledInterval, setIsScaledInterval] = useState(false);\n const [isCapsPanelOpen, setIsCapsPanelOpen] = useLocalStorage('order_manager_caps_expanded', false);\n\n const apiDeliveries = useApi('debug', 'deliveriesList');\n const apiAuctions = useApi('debug', 'auctionsList');\n\n\n const MAX_CHART_BUCKETS = 120;\n const NUM_CHART_BUCKETS = 15;\n\n\n //Use query string?\n // const [deliveryFilters, setDeliveryFilters] = useState(() => {\n // return {\n // start: searchParams.delivery_start ?? 'now/d',\n // end: searchParams.delivery_end ?? 'now/d',\n // agg_interval: '1m',\n // tz: \"America/Los_Angeles\"\n // }\n // })\n\n\n useEffect(() => {\n\n if (isIntegrationsLoaded) {\n loadDeliveries();\n loadAuctionData();\n loadCaps()\n }\n }, [filters, isIntegrationsLoaded]);\n\n const paramsToReadService = () => {\n const apiParams = {} as Record;\n\n if (filters.start) {\n apiParams.after = valueToISO('start', filters.start, userTimezone)\n }\n\n if (filters.end) {\n apiParams.before = valueToISO('end', filters.end, userTimezone)\n }\n apiParams.tz = \"America/Los_Angeles\"; //deliveryFilters.delivery_tz\n apiParams.agg_interval = filters.agg_interval ?? 'auto';\n apiParams.agg_buckets = NUM_CHART_BUCKETS;\n if (filters.agg_reject_category) {\n apiParams.agg_reject_category = filters.agg_reject_category;\n }\n return apiParams;\n }\n\n const loadCaps = async () => {\n setIsLoadingCaps(true);\n if (capsDataError) {\n setCapsDataError('');\n }\n const result = await capsApi([orderId])\n\n setIsLoadingCaps(false);\n if (result) {\n setCapsData(result)\n } else {\n setCapsDataError('Unable to get cap statistics');\n }\n\n }\n\n const loadDeliveries = async () => {\n setIsLoadingDeliveries(true);\n const params = paramsToReadService();\n\n // Interval adjustment\n // The interval value in the filters is what the user selects\n // This may be adjusted in order to scale the data to the chart\n // In that case, the adjusted (\"real\") value is sent to the API, but the filter value remains what\n // was selected, and a message about the scaling is shown.\n const {interval, scaledInterval} = intervalToApi(params.agg_interval, filters.start, filters.end, MAX_CHART_BUCKETS)\n params.agg_interval = scaledInterval || interval\n realIntervalRef.current = params.agg_interval;\n\n const result = await apiDeliveries.fetch({\n ...params,\n order_id: orderId,\n page: 1,\n per_page: 1, //don't need list, just aggregation detail (but setting to zero will result in default per_page in read service)\n });\n\n if (result && result.deliveries) {\n const { aggregations } = result.deliveries;\n\n const agg= {} as Record;\n\n if (aggregations.reject_categories) {\n agg.rejectionCategoryTotals = aggregations.reject_categories.buckets;\n }\n\n if (aggregations.deliveries_over_time) {\n\n agg.rejectionsOverTimeByIntegration = aggregateToMultiDataset(\n aggregations.deliveries_over_time.buckets,\n 'key_as_string',\n 'key',\n 'doc_count',\n 'rejected.integrations.buckets',\n getIntegrationName\n );\n }\n\n if (aggregations.delivery_rejects_over_time) {\n agg.rejectionsOverTimeByCategory = aggregateToMultiDataset(\n aggregations.delivery_rejects_over_time.buckets,\n 'key_as_string',\n 'key',\n 'doc_count',\n 'reject_category.buckets'\n );\n }\n\n if (aggregations.integrations_rejected) {\n // buckets by rejection, each with integration counts\n const rejections = {} as Record;\n aggregations.integrations_rejected.buckets.forEach((bkt:ReadServiceBucket) => {\n rejections[bkt.key] = bkt.integrations.buckets.map((b:ReadServiceBucket) => {\n return {integration:getIntegrationName(b.key.toString()), count:b.doc_count}\n });\n\n })\n agg.integrationRejectionTotals = rejections;\n }\n\n //This label is used to show actual requested interval, below the graph\n const label = getIntervalLabel(params.agg_interval);\n setIntervalLabel(label);\n setIsScaledInterval(Boolean(scaledInterval));\n\n setChartMinMaxTime({min:params.after, max:params.before})\n\n setDeliveryData(agg);\n\n } else {\n //@ts-ignore\n //notify(`Unable to load delivery data: ${apiDeliveries.error?.name}`, 'error');\n }\n\n setIsLoadingDeliveries(false);\n };\n\n const loadAuctionData = async () => {\n setIsLoadingAuctions(true);\n\n const params = paramsToReadService();\n delete params.agg_interval; //not charting\n delete params.agg_buckets;\n\n const result = await apiAuctions.fetch({\n ...params,\n order_id: orderId,\n agg_interval: '1h',\n version: 2, //the one with aggregations\n page: 1,\n per_page: 1, //don't need list, just aggregation detail (but setting to zero will result in default per_page in read service)\n aggregations: [\"overall\"],\n });\n\n if (result?.auctions) {\n setChartMinMaxTime({min:params.after, max:params.before})\n setAuctionData(result.auctions.aggregations?.overall);\n } else {\n //@ts-ignore\n // notify(`Unable to load auction data: ${apiDeliveries.error?.name}`, 'error');\n }\n\n setIsLoadingAuctions(false);\n };\n\n const handleSelectRuleCap = (ruleId:number|string) => {\n rulesApi.setActiveTab('budget', {id: ruleId})\n }\n\n const handleChangeRejectCategory = (category:string) => {\n setFilters({...filters, agg_reject_category:category});\n }\n\n const handleChangeInterval = (interval:string) => {\n setFilters({...filters, agg_interval:interval});\n }\n\n const handleChartZoom = (start:Date, end:Date) => {\n\n if (start && end) {\n setZoomReset({start:filters.start,end:filters.end})\n setFilters({...filters, start, end})\n }\n }\n\n const resetChartZoom = () => {\n if (zoomReset) {\n setFilters({...filters, ...zoomReset})\n setZoomReset(undefined)\n\n }\n }\n\n return (\n \n\n }\n horizontal\n horizontalColor=\"info\"\n title=\"Total Auctions\"\n />\n\n }\n title=\"Match Attempts\"\n />\n\n }\n title=\"Bid Attempts\"\n />\n\n }\n title=\"Leads Posted\"\n />\n\n }\n title=\"Sale Count\"\n />\n }\n title=\"Sale Rate\"\n />\n\n }\n title=\"Advertiser Cost\"\n />\n\n
\n )}\n \n\n\n \n \n {isLoadingCaps ? (\n {capsDataError} loadCaps()}>Retry \n )\n :(\n
\n\n\n\n \n
\n
Delivery Rejections
\n
\n {zoomReset &&
Reset Zoom }\n \n\n
\n\n
\n
;\n defaultTimezone?:string;\n onChange:any;\n onRefresh:any;\n //reset:any;\n isLoading: boolean;\n}\n\nconst DeliveryDetailFilters = ({\n filters,\n defaultTimezone=\"\",\n onChange,\n onRefresh,\n isLoading,\n /* reset*/\n }: DeliveryDetailFiltersProps) => {\n const [pendingFilters, setPendingFilters] = useState(filters)\n const [isPendingApply, setIsPendingApply] = useState(false)\n\n\n const handleApply = () => {\n setIsPendingApply(false);\n onChange(pendingFilters)\n }\n\n/* const handleIntervalChange = (e:ChangeEvent) => {\n\n const newFilters = { ...pendingFilters, agg_interval:e.target.value}\n\n setIsPendingApply(true);\n setPendingFilters(newFilters)\n };*/\n\n const handleDateRangeChange = (start:Date, end:Date, isQuickPick=false) => {\n const newFilters = {...pendingFilters, start, end}\n if (isQuickPick) {\n onChange(newFilters)\n setIsPendingApply(false);\n } else {\n setIsPendingApply(true);\n setPendingFilters(newFilters)\n }\n };\n\n const reset = () => {\n setIsPendingApply(false);\n onChange(null);\n };\n\n return (\n \n\n\n
\n
\n\n
\n\n
\n\n
\n \n \n \n\n
\n
\n\n
\n\n
\n\n {ready && linkedData.order && (\n <>\n \n
\n\n {allowViewAuctions && (\n \n\n {/* TODO: selectedRuleAncestors (used in TreeBranch for isAncestorBranch) */}\n
\n\n \n\n {/* ID for routine that checks if form is in viewport */}\n
\n\n\n\n {/* The ref allows the sibling Tree to call activeTab method in RulesConfig */}\n {!ready ? (\n
\n
\n\n
\n \n );\n};\n\nexport default AdvertiserManager;\n","import React, {\n useState, useCallback, useMemo,\n} from 'react';\nimport createNumberMask from 'text-mask-addons/dist/createNumberMask';\nimport MaskedInput from 'react-text-mask';\nimport EnhancedSelect from \"../../../../Components/Form/EnhancedSelect\";\n// import {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport PropTypes from 'prop-types';\nimport { Button, Spinner } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { Link } from 'react-router-dom';\nimport IconCheckbox from '../../../../Components/Form/IconCheckbox';\nimport InputWithIcon from '../../../../Components/Form/InputWithIcon';\nimport {notify, StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport {Modal as RoutingRulesModal} from '../../../Routing/Rules';\nimport {HelpPopper} from '@thedmsgroup/mastodon-ui-components';\nimport useFormState from '../../../../Hooks/useFormState';\nimport useApi from '../../../../Hooks/useApi';\nimport usePermission from '../../../../Hooks/usePermission';\nimport {ChannelSourceRoute} from \"../../../Routing/Rules\";\nimport StatusToggler from \"../../../../Components/Form/StatusToggler\";\nimport {SourceOptionLabel} from \"../../../../Components/Form/Select/SourceOptionLabel\";\nimport EntityId from \"../../../../Components/Table/EntityId\";\n\n// We decided to allow distribution to be nullable\n// import * as Yup from \"yup\";\n// const ChannelSourceValidation = (\n// Yup.addMethod(Yup.mixed, 'validChannelSources', function(message) {\n// return this.test('test-channel-sources', message,\n// function(channelSources) {\n// let valid = true;\n// channelSources.map( (item) => {\n// //console.log('ChannelSourceDetail.js:testing', item, parseInt(item.distribution));\n// if( isNaN(parseInt(item.distribution))){\n// valid = false;\n// }\n// });\n//\n// return valid;\n// })\n// })\n// );\n//\n// const ChannelSourceValidationSchema = Yup.object().shape({\n// sources: Yup.mixed().validChannelSources('Please check that all dates are filled out, and from/to dates are in the right order'),\n// });\n\nconst percentMask = createNumberMask({\n prefix: '',\n allowDecimal: false,\n integerLimit: 3,\n});\n\n\nconst DefaultChannelSource = {\n id:0,\n name:\"\",\n status: \"\",\n eligibility: {\n distribution:\"\",\n fixed_distribution:false,\n status: \"active\"\n }\n\n}\nconst ChannelSourceDetail = ({ channel, sources = [], allSources, onCancel, refreshChannels, allowEdit = true }) => {\n\n // options without current selections\n const [selectedChannelSource, setSelectedChannelSource] = useState(null);\n const [rulesModalOpen, setRulesModalOpen] = useState(false);\n const allowViewRules = usePermission('routing.view');\n const [addIndex, setAddIndex] = useState(sources.length ? null : 0);\n\n const sortDistributionDesc = (items) => items.sort((a, b) => (parseInt(a.distribution) < parseInt(b.distribution) ? 1 : -1));\n\n const {\n formApi, formIsValid, formValues,\n } = useFormState(\n {\n sources: sources.length ? sortDistributionDesc([...sources])\n : [{...DefaultChannelSource}],\n },\n );\n;\n const [loading, setLoading] = useState(false);\n const { api } = useApi();\n\n const sourceOptions = useMemo(() => {\n\n return allSources.reduce((acc, src) => {\n // Filter all source select options by product/vertical of the channel.\n // Filter out those already selected.\n if (\n (src.vertical.id === channel.vertical.id && src.product === channel.product)\n && (!formValues.sources.some(s => s.id === src.id))\n ) {\n acc.push({\n value: src.id,\n label: src.name,\n status: src.status,\n id: src.id,\n name: src.name\n });\n }\n\n return acc;\n }, [])\n },\n [formValues.sources]\n );\n\n const handleChangeDistribution = useCallback((val, index) => {\n const sources = [...formValues.sources];\n\n if (sources[index]) {\n sources[index].eligibility.distribution = val;\n formApi.setValues({ sources });\n }\n }, [formValues]);\n\n const handleChangeFixed = useCallback((fixed, index) => {\n const sources = [...formValues.sources];\n if (sources[index]) {\n sources[index].eligibility.fixed_distribution = fixed;\n\n formApi.setValues({ sources });\n }\n }, [formValues]);\n\n const handleChangeEligibilityStatus = useCallback((status, index) => {\n const sources = [...formValues.sources];\n if (sources[index]) {\n sources[index].eligibility.status = status;\n\n formApi.setValues({ sources });\n }\n }, [formValues]);\n\n const handleChangeSource = useCallback((source, index) => {\n const sources = [...formValues.sources];\n if (sources[index]) {\n sources[index] = source;\n formApi.setValues({ sources });\n }\n }, [formValues]);\n\n const handleSave = () => {\n const isValid = formApi.validate();\n if (isValid) {\n save();\n }\n };\n\n const save = async () => {\n setLoading(true);\n\n const chn = { ...channel };\n const sources = removeEmptySources(formValues.sources);\n\n chn.sources = sources.map((row) =>\n ({\n source_id: row.id,\n channel_id: channel.id,\n ...row.eligibility\n }));\n\n const result = await api.endpoints.channels.update(chn);\n setLoading(false);\n\n if (result) {\n notify('The channel sources were saved', 'success', );\n formApi.setValues({ sources: result.sources });\n setAddIndex(null);\n refreshChannels();\n } else {\n console.log('ChannelSourceDetail.js:error saving channel', api.error.name);\n notify(`Unable to save channel-source: ${api.error.name}`, 'error', { containerId: `channel-source-${channel.id}` });\n }\n };\n\n // close the subrow\n const handleCancel = () => {\n formApi.setValues([...sources])\n setAddIndex(null);\n onCancel();\n };\n\n\n const handleAddNew = () => {\n let newSources = removeEmptySources(formValues.sources);\n newSources.push({...DefaultChannelSource})\n setAddIndex(newSources.length - 1);\n formApi.setValue(\"sources\", newSources);\n }\n\n //We're just removing rows without selected sources instead of bothering with validation\n const removeEmptySources = (arr) => arr.filter(src => src.id)\n\n\n const handleRemove = (index) => {\n let sources = [...formValues.sources];\n sources.splice(index, 1);\n sources = removeEmptySources(sources);\n formApi.setValues({ sources });\n setAddIndex(null);\n\n };\n\n const handleOpenRules = (index) => {\n const source = formValues.sources[index];\n\n if (source) {\n if (source.eligibility.rule_id) {\n setSelectedChannelSource(new ChannelSourceRoute(channel, source));\n setRulesModalOpen(true);\n } else {\n notify('Please save before editing rules', 'info', { containerId: `channel-source-${channel.id}` });\n }\n }\n };\n\n const handleCloseRulesModal = () => {\n setRulesModalOpen(false);\n setSelectedChannelSource(null);\n };\n\n return (\n \n\n\n
Channel Sources
\n\n {formValues.sources.length === 0\n &&
No sources are assigned. }\n\n {formIsValid === false\n && (\n
\n All sources require a value (zero is allowed)\n \n )}\n\n
\n\n\n
\n\n
\n
Source
\n
Source Status{' '}\n \n The source must be active for the channel-source distribution to work.\n \n
\n
Distribution{' '}\n \n Optionally specify a distribution percentage.\n The value may be automatically raised to adjust for low volume\n in other sources. When fixed, the distribution will not change.\n \n
\n
Channel-Source Status
\n {(allowViewRules || allowEdit) &&
{allowViewRules ? 'Rules' : ''}
}\n
\n\n {formValues.sources.map((source, i) => (\n
handleRemove(i)}\n onChangeSource={handleChangeSource}\n onChangeDistribution={(e) => handleChangeDistribution(e.target.value, i)}\n onChangeFixed={(name, value) => handleChangeFixed(value, i)}\n onChangeEligibilityStatus={(status) => handleChangeEligibilityStatus(status, i)}\n openRules={() => handleOpenRules(i)}\n allowEdit={allowEdit}\n allowViewRules={allowViewRules}\n key={`source-${i}`}\n />\n ))}\n\n\n \n\n {allowEdit && (\n
\n \n \n
\n )}\n\n
\n\n
\n {allowEdit ? (\n <>\n \n Cancel\n \n\n \n {loading ? \n \n ) : (\n onCancel()}>\n Close\n \n )}\n
\n\n {selectedChannelSource && (\n
\n )}\n\n
\n\n {isNew ? (\n
\n
\n option}\n formatOptionLabel={SourceOptionLabel}\n />\n
\n
\n ) : (\n
\n \n \n {source.name}\n \n
\n )}\n\n
\n {!isNew &&
\n\n
\n {allowEdit ? (\n <>\n \n \n \n ) : (\n \n {distroValue > 0 ? `${distroValue}%` : 'Open'}\n {fixedValue && ' Fixed'}\n \n )}\n
\n\n\n
\n onChangeEligibilityStatus(status, id)}\n showArchived={false}\n allowEdit={allowEdit}\n />\n {allowEdit && (\n \n Activate or pause a specific channel source. This does not affect\n the status of the channel or source in general.\n \n )}\n
\n\n\n {(allowViewRules || allowEdit) && (\n
\n {allowViewRules && (\n \n \n )}\n {allowEdit && (\n \n \n \n )}\n
\n )}\n\n
\n\n
\n);\n\nexport const SourceDistributionFixedCheckbox = ({ value, onChange, readOnly = false }) => (\n \n \n Fixed\n \n\n
\n);\n\nChannelSourceDetail.propTypes = {\n channel: PropTypes.object,\n sources: PropTypes.array,\n onCancel: PropTypes.func,\n allSources: PropTypes.array,\n refreshChannels: PropTypes.func\n // refresh:PropTypes.func\n};\nexport default ChannelSourceDetail;\n","import React, { useMemo, useCallback } from 'react';\nimport { Link, useSearchParams } from 'react-router-dom';\nimport { Button } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport { titleCaseWord } from '../../../utils/string';\nimport usePermission from '../../../Hooks/usePermission';\nimport ChannelSourceDetail from './Channel/ChannelSourceDetail';\nimport PagedTable from '../../../Components/Table/PagedTable';\nimport TableSubcomponent from '../../../Components/Table/TableSubcomponent';\nimport { RelativeTime } from '@thedmsgroup/mastodon-ui-components';\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport StatusToggler from \"../../../Components/Form/StatusToggler\";\nimport {ColumnSelect} from \"../../../Components/Table/ColumnSelect\";\nimport useLocalStorage from \"../../../Hooks/useLocalStorage\";\nimport {ChangeHistoryButton} from \"../../../Providers/ChangeProvider\";\n\nconst DefaultHiddenColumns = ['modified_at', 'inserted_at'];\n\nconst ActionCell = ({\n channel,\n searchParams,\n onRulesClick,\n onRoutingClick,\n allowEditChannel,\n allowViewRules,\n allowViewAuction,\n}) => (\n \n \n \n {\n onRulesClick(channel);\n }}\n title='Channel routing rules'\n className='action-item inline'\n >\n \n {\n onRoutingClick(channel.id);\n }}\n title='Routing Map'\n className='action-item inline'\n >\n
\n);\n\nconst SourceExpander = ({ sourceCount, isExpanded, allowEdit }) => {\n if (!sourceCount) {\n if (!allowEdit) return — ;\n return (\n \n Add sources\n \n );\n }\n\n return (\n \n {sourceCount} {sourceCount > 1 ? 'Sources' : 'Source'}{' '}\n {isExpanded ? (\n
\n );\n};\n\n// const StatusCell = ({status, channel, allowEdit, onChange }) =>{\n//\n// return allowEdit === true ? (\n// \n// ) : (titleCaseWord(status))\n// }\n//\n// const SourceStatusCell = ({status}) => (\n// \n// );\n\nconst Table = ({\n data,\n loading,\n totalRows,\n pageCount,\n page,\n sort_by,\n sort_dir,\n limit,\n setPage,\n setLimit,\n setSortBy,\n setSortDir,\n openChannelRulesModal,\n openRoutingMapModal,\n refreshChannels,\n allSources=[],\n}) => {\n const [searchParams] = useSearchParams();\n const [hiddenColumns, setHiddenColumns] = useLocalStorage('hidden_columns_channels', DefaultHiddenColumns)\n const allowEdit = usePermission('channels.edit');\n const allowViewRules = usePermission('routing.view');\n const allowViewAuction = usePermission('auctions.view');\n // controlled row expansion overrides default react-table behavior\n // const [expanded, setExpanded] = useState({})\n\n const columns = useMemo(\n () => [\n {\n Header: 'ID',\n id: 'id',\n accessor: 'id',\n defaultCanSort: false,\n Cell: ({value}) => (\n — ;\n return (\n \n
\n );\n },\n style: { cursor: 'pointer' },\n },\n {\n Header: 'Vertical',\n id: 'vertical.id',\n defaultCanSort: true,\n Cell: ({row}) => row.original.vertical.display_name,\n width: 140,\n },\n {\n Header: 'Product',\n accessor: 'product',\n\n Cell: (c) => titleCaseWord(c.value),\n defaultCanSort: true,\n // filter: 'includesSome',\n width: 90,\n },\n {\n Header: 'Account',\n accessor: 'account.name',\n disableSortBy: true,\n width: 150,\n },\n {\n Header: 'Created',\n accessor: 'inserted_at',\n defaultCanSort: true,\n Cell: ({ value }) => \n \n ),\n [allSources]\n );\n\n return (\n <>\n \n
\n \n
\n
\n\n\n
\n
\n\n onChangeFilter('search', val)}\n onClear={clearSearch}\n />\n\n
\n\n
\n\n \n \n\n \n \n
\n \n \n\n\n
\n\n
\n
\n\n
\n\n
\n Create\n \n );\n};\n\n\nconst ChannelList = () => {\n const {\n filters, setFilters, controls, updateQuery,\n } = usePagedTableState(\n DefaultFilters,\n DefaultControls,\n { useQueryString: true, useTableControls: true },\n );\n const [loading, setLoading] = useState(false);\n const [channels, setChannels] = useState([]);\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const [allSources, setAllSources] = useState([]);\n const [channelRulesModalOpen, setChannelRulesModalOpen] = useState(false);\n const [selectedChannel, setSelectedChannel] = useState(null);\n const [selectedChannelSource, setSelectedChannelSource] = useState(null);\n const [routingMapId, setRoutingMapId] = useState(null);\n\n const [searchParams] = useSearchParams();\n const allowView = usePermission('channels.view');\n const allowCreate = usePermission('channels.create');\n const { api } = useApi();\n useChangeTimeline({ entityTypes: ['channel', 'routingrule'], parentFilters: filters });\n\n if (!allowView) return (null)\n\n useEffect(() => {\n if (!loading) {\n load();\n }\n if (!allSources.length) {\n loadSources(); // for picker\n }\n }, [filters, controls.sort_by, controls.sort_dir, controls.page, controls.limit])\n\n const openRoutingMapModal = (channelId) => setRoutingMapId(channelId)\n const closeRoutingMapModal = () => setRoutingMapId(null)\n\n const openChannelRulesModal = (channel) => {\n setSelectedChannel(channel)\n setChannelRulesModalOpen(true)\n };\n\n\n const closeChannelRulesModal = () => {\n setChannelRulesModalOpen(false)\n setSelectedChannel(null)\n setSelectedChannelSource(null)\n }\n\n const openChannelSourceRulesModal = (channelSource) => {\n setSelectedChannelSource(channelSource)\n };\n\n const closeChannelSourceRulesModal = () => {\n setSelectedChannelSource(null)\n\n };\n\n\n const load = async (refresh = false) => {\n if (!refresh) {\n setLoading(true)\n }\n\n updateQuery();\n const {\n page, sort_by, sort_dir, limit,\n } = controls\n\n const params = {...filters}\n if (params.vertical) {\n params.vertical_id = params.vertical\n delete params.vertical\n }\n const result = await api.endpoints.channels.list({\n ...params,\n page,\n sort_by,\n sort_dir,\n limit,\n })\n\n if (result) {\n const { limit, total, data } = result; // row:0, page:1, limit:20, data:[]\n setChannels(data)\n setPageCount(total > limit ? Math.ceil(total / limit) : 1);\n setTotalRows(total)\n } else {\n notify(`Unable to load channels: ${api.error.name}`, 'error')\n }\n\n\n if (!refresh) {\n setLoading(false)\n }\n };\n\n const loadSources = async () => {\n const allSources = await api.endpoints.sources.list({ options: true });\n if (allSources) {\n setAllSources(allSources);\n }\n };\n\n const handleStatusChange = async (channelId, status) => {\n const result = await api.endpoints.channels.update({ id: channelId, status });\n return result;\n };\n\n /* Currently API does not expose status\n handleStatusChange = async(channel, status) => {\n if(channel && this.hasPermission('channels.edit')){\n channel.vertical_id = channel.vertical.id;\n let result = await this.global.api.endpoints.channels.update({\n ...channel, status\n });\n\n if(result) this.load(true);\n return result ? true : false;\n }\n return false;\n }\n */\n\n return (\n\n <>\n \n load(true)} />\n \n\n load(true)}\n allSources={allSources}\n />\n\n (null);\n const { api } = useApi();\n const allowView = usePermission('channels.view');\n const allowEdit = usePermission('channels.edit');\n const allowViewRouting = usePermission('routing.view');\n\n if (!allowView) return null;\n\n useEffect(() => {\n if (!channel) {\n load();\n }\n }, []);\n\n const load = async () => {\n const result = await api.endpoints.channels.show(id);\n\n if (result) {\n setChannel(result);\n } else {\n notify(`Unable to load channel: ${api.error ? api.error.name : ''}`, 'error');\n navigate(\n {\n pathname: '/publishing/channels',\n search: location.state?.search ?? '',\n },\n { replace: false }\n );\n }\n\n setLoading(false);\n };\n\n const crumbs = useMemo(() => {\n if (channel) {\n return [\n { label: 'Publishing' },\n {\n label: 'Channels',\n to: {\n pathname: '/publishing/channels',\n search: location.state?.search ?? '',\n },\n },\n { label: channel.name },\n ];\n }\n return [];\n }, [channel, location.state?.search]);\n\n return (\n <>\n \n {allowViewRouting && channel && (\n \n Routing Rules\n \n )}\n {allowEdit && channel && (\n \n Edit\n \n )}\n \n }\n >\n \n \n
\n ID \n {channel.id}
\n \n
\n Created \n \n
\n \n
\n Modified \n \n
\n \n
\n Name \n {channel.name ?? ''}
\n \n\n \n Description \n {channel.description || None }
\n \n\n \n Account \n {channel.account?.name || None }
\n \n\n \n Product \n {channel.product ? titleCaseWord(channel.product) : None }
\n \n\n \n Vertical \n \n {channel.vertical?.display_name || channel.vertical?.name || None }\n
\n \n\n \n Status \n {channel.status ? titleCaseWord(channel.status) : None }
\n \n\n \n Sources \n \n {channel.sources && channel.sources.length > 0 ? (\n
\n {channel.sources.map((source: any) => (\n {source.name} \n ))}\n \n ) : (\n
No sources assigned \n )}\n
\n \n
\n )}\n \n \n );\n};\n\nexport default ChannelShow;\n","import React, { useState, useEffect, useMemo } from 'react';\nimport { useNavigate, useLocation, useParams, Link } from 'react-router-dom';\nimport { Button } from 'reactstrap';\nimport { notify } from '@thedmsgroup/mastodon-ui-components';\nimport useApi from '../../../Hooks/useApi';\nimport usePermission from '../../../Hooks/usePermission';\nimport DocTitle from '../../../Layout/DocTitle';\nimport Breadcrumbs from '../../../Layout/Breadcrumbs';\nimport PageSection from '../../../Layout/PageSection';\nimport Channel from './Channel';\n\nconst ChannelEdit = () => {\n const { id } = useParams();\n const navigate = useNavigate();\n const location = useLocation();\n const { api } = useApi();\n const [channel, setChannel] = useState(null);\n const allowEdit = usePermission('channels.edit');\n const allowViewRouting = usePermission('routing.view');\n\n useEffect(() => {\n if (allowEdit) {\n load();\n }\n }, [id, allowEdit]);\n\n const load = async () => {\n const result = await api.endpoints.channels.show(id);\n if (result) {\n setChannel(result);\n } else {\n notify(`Unable to load channel: ${api.error?.name || 'Unknown error'}`, 'error');\n handleClose();\n }\n };\n\n const handleClose = () => {\n navigate(\n {\n pathname: '/publishing/channels',\n search: location.state?.search ?? '',\n },\n { replace: false }\n );\n };\n\n const handleSuccess = () => {\n handleClose();\n };\n\n const crumbs = useMemo(() => {\n if (channel) {\n return [\n { label: 'Publishing' },\n {\n label: 'Channels',\n to: {\n pathname: '/publishing/channels',\n search: location.state?.search ?? '',\n },\n },\n { label: channel.name, to: `/publishing/channels/${channel.id}` },\n { label: 'Edit' },\n ];\n }\n return [];\n }, [channel, location.state]);\n\n if (!allowEdit) {\n return null;\n }\n\n return (\n <>\n \n Routing Rules\n \n )\n }\n >\n {}}\n onOpenChannelSourceRules={() => {}}\n isModal={false}\n />\n \n \n );\n};\n\nexport default ChannelEdit;\n","import React from 'react';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport usePermission from '../../../Hooks/usePermission';\nimport DocTitle from '../../../Layout/DocTitle';\nimport Breadcrumbs from '../../../Layout/Breadcrumbs';\nimport PageSection from '../../../Layout/PageSection';\nimport Channel from './Channel';\n\nconst ChannelCreate = () => {\n const navigate = useNavigate();\n const location = useLocation();\n const allowCreate = usePermission('channels.create');\n\n const handleClose = () => {\n navigate(\n {\n pathname: '/publishing/channels',\n search: location.state?.search ?? '',\n },\n { replace: false }\n );\n };\n\n const handleSuccess = () => {\n handleClose();\n };\n\n if (!allowCreate) {\n return null;\n }\n\n return (\n <>\n \n {}}\n onOpenChannelSourceRules={() => {}}\n isModal={false}\n />\n \n \n );\n};\n\nexport default ChannelCreate;\n","import React from \"react\";\nimport {Modal, ModalBody, ModalHeader, } from \"reactstrap\";\n// @ts-ignore\nimport JSONPretty from 'react-json-prettify';\n// @ts-ignore\nimport { idea } from 'react-json-prettify/dist/themes';\n\n\n/*\n * Modal for displaying a json value, prettified\n */\nconst JsonViewModal = ({\n json, title, size=\"md\", isOpen, close\n }:any) => {\n\n return (\n \n {title} \n \n \n \n );\n};\n\nexport default JsonViewModal;\n","import React, { useState } from 'react';\nimport { Button } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport JsonViewModal from \"../JsonViewModal\";\n\n// Cell used in a few tables, has toggling display of seed data JSON\nconst SeedDataCell = ({ seedData }) => {\n const [showData, setShowData] = useState(false);\n const toggleData = () => setShowData(!showData);\n return seedData && !Array.isArray(seedData) ? (\n \n
\n \n
\n
\n
— );\n};\n\nexport default SeedDataCell;\n","import React, { useMemo, useState } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Button } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport {faKey} from \"@fortawesome/free-solid-svg-icons\";\nimport PropTypes from 'prop-types';\nimport NumberFormat from 'react-number-format';\nimport {singularOrPlural, titleCaseWord} from \"@thedmsgroup/mastodon-ui-components/lib/utils/string\";\nimport usePermission from '../../../Hooks/usePermission';\nimport StatusToggler from '../../../Components/Form/StatusToggler';\nimport SeedDataCell from '../../../Components/Table/SeedDataCell';\nimport PagedTable from '../../../Components/Table/PagedTable';\nimport { RelativeTime } from '@thedmsgroup/mastodon-ui-components';\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport useLocalStorage from \"../../../Hooks/useLocalStorage\";\nimport {ColumnSelect} from \"../../../Components/Table/ColumnSelect\";\nimport {ChangeHistoryButton} from \"../../../Providers/ChangeProvider\";\n\nconst DefaultHiddenColumns = ['modified_at', 'inserted_at', 'seed_data'];\n\nconst NameCell = ({ name, description, sourceId, allowEdit, searchParams }) => (\n \n \n {description}\n \n )}\n
\n);\n\nconst ActionCell = ({\n source,\n searchParams,\n onRulesClick,\n onRoutingClick,\n onVendorClick,\n allowEditSource,\n allowViewTokens,\n allowViewRules,\n allowViewAuction,\n}) => (\n \n {allowEditSource && (\n \n {\n onVendorClick(source);\n }}\n >\n {\n onRulesClick(source);\n }}\n >\n \n {\n onRoutingClick(source.id);\n }}\n title='Routing Map'\n className='action-item inline'\n >\n
\n);\n\n\nconst BidCell = ({ vendor_bid, vendor_margin }) => {\n // bid takes precedence over margin\n if (vendor_bid) {\n return (\n {vendor_margin}% ;\n }\n return — ;\n};\n\nconst ChannelsCell = ({ channels, sourceId }) => {\n // channels, actually channel_eligibilities\n const [showData, setShowData] = useState(false);\n return channels?.length > 0 ? (\n \n
{\n setShowData(!showData);\n }}\n >\n {channels.length}{' '}\n {singularOrPlural(channels.length, 'channel', 'channels')}\n \n \n \n {' '}\n - {c.distribution}%\n {c.distribution_fixed && ' (fixed)'}\n \n )}\n
\n ))}\n — \n );\n};\n\nconst TokensCell = ({ tokens }) => {\n const [showData, setShowData] = useState(false);\n const nonArchived = tokens.filter(t => t.status !== 'archived');\n return nonArchived?.length > 0 ? (\n setShowData(!showData)} style={{ cursor: 'pointer' }}>\n
\n {nonArchived.length} {singularOrPlural(nonArchived.length, 'Vendor', 'Vendors')}{' '}\n
\n\n {showData &&\n nonArchived.map((st, i) => (\n
\n
\n ))}\n
— \n );\n};\n\nconst Table = (props) => {\n // default sort by name asc, all sortable except actions\n const allowEditSource = usePermission('sources.edit');\n const allowViewTokens = usePermission('source_tokens.view');\n const allowViewRules = usePermission('routing.view');\n const allowViewAuction = usePermission('auctions.view');\n const [hiddenColumns, setHiddenColumns] = useLocalStorage('hidden_columns_sources', DefaultHiddenColumns)\n\n const columns = useMemo(\n () => [\n {\n Header: 'ID',\n className: 'id-cell',\n id: 'id',\n accessor: 'id',\n defaultCanSort: false,\n Cell: ({value}) => (\n \n
\n \n \n \n },*/\n\n\n {\n Header: 'Post Type',\n accessor: 'post_type',\n defaultCanSort: true,\n width: 90,\n disabledGlobalFilter: true,\n Cell: (c) => {Utils.titleCase(Utils.tokenToWords(c.value ?? ''))} \n },\n {\n Header: <>Traffic TypeTracking data indicating first party or third party traffic ,\n headerClassName: 'nowrap',\n accessor: 'traffic_type',\n defaultCanSort: true,\n width: 90,\n disabledGlobalFilter: true,\n Cell: (c) => {Utils.titleCase(Utils.tokenToWords(c.value ?? ''))} \n },\n\n {\n Header: 'Last Matched',\n accessor: 'last_matched_at',\n maxWidth: 110,\n defaultCanSort: true,\n disableGlobalFilter: true,\n Cell: ({value}) => ,\n },\n {\n Header: 'Last Sold',\n accessor: 'last_sold_at',\n maxWidth: 110,\n defaultCanSort: true,\n disableGlobalFilter: true,\n Cell: ({value}) => ,\n },\n {\n Header: 'Created',\n accessor: 'created_at',\n defaultCanSort: true,\n maxWidth: 110,\n disableGlobalFilter: true,\n Cell: ({value}) => ,\n },\n {\n Header: 'Archived',\n accessor: 'archived_at',\n maxWidth: 110,\n defaultCanSort: true,\n disableGlobalFilter: true,\n Cell: ({value}) => ,\n },\n {\n Header: 'Actions',\n id: 'actions',\n Cell: ({row}) => \n onEdit(sourceToken)}\n >\n
\n )\n }\n\n if (allowEdit) {\n return (\n \n \n
\n )\n }\n\n return (\n \n \n
\n )\n}\n\nconst TokenCell = ({tokenId, label, description, token}) => {\n return (\n <>\n {label || token}
\n\n {description && {description} }\n \n\n \n\n
\n {`...${token.substring(token.length - 8)}`}\n \n \n \n
\n\n
|
\n
\n \n Instructions\n \n \n \n \n \n View publisher instructions (public link)\n \n
\n\n
\n\n\n \n )}\n\n","import React, {useEffect, useState} from \"react\";\nimport {\n DropdownMenu,\n DropdownToggle,\n UncontrolledDropdown\n} from 'reactstrap';\nimport {FilterControls, StackedFilter, TextSearch} from \"../../../Components/Table/Filter\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport { StatusChoices} from \"../../../Components/Table/FilterChoices\";\nimport FilterSummaryTags from \"../../../Components/Table/FilterSummaryTags\";\nimport {useFilters} from \"../../../Hooks/useFilters\";\nimport useApi from \"../../../Hooks/useApi\";\nimport classnames from \"classnames\";\n\n/*\n * Filtering for SourceTokens list\n * This list is displayed stand-alone as well as in modals that open from the\n * sources and vendors list.\n * When in modals, we hide the source or vendor filter depending on which page,\n * because the modal is detail for only one vendor or one source\n */\nexport const Filters = ({\n filters,\n onChange,\n onRefresh,\n loading = false,\n showVendors = true,\n showSources = true,\n }) => {\n const {api} = useApi();\n const [choices, setChoices] = useState({});\n const {onChangeFilter, reset, clearFilter, clearSearch} = useFilters(filters, onChange)\n\n // load choices\n useEffect(() => {\n const getChoices = async () => {\n\n const vendors = await api.endpoints.vendors.list({limit:0});\n const sources = await api.endpoints.sources.list({options:true});\n if (vendors && sources) {\n setChoices({\n vendor: vendors.data.map((item) => ({ value: item.id, label: item.name })),\n source: sources.map((item) => ({ value: item.id, label: item.name })),\n status: StatusChoices,\n traffic_type: [\n { value: 'first_party', label: 'First Party' },\n { value: 'third_party', label: 'Third Party' },\n ],\n });\n }\n };\n\n if (Object.keys(choices).length === 0) getChoices();\n }, []);\n\n\n return (\n <>\n\n\n \n
\n\n
\n
\n
\n onChangeFilter(\"search\", val)}\n onClear={clearSearch}\n autofocus\n />\n
\n\n
\n\n \n \n\n \n {showSources && (\n \n\n \n\n
\n\n
\n\n
\n\n
\n \n {selectedToken?.id > 0 && \n \n }\n {selectedToken ? (selectedToken.id > 0 ? 'Edit Source Token' : 'Create Source Token') : 'Source Tokens for Source'}\n \n {source.name}
\n\n {selectedToken ? (\n \n \n
\n\n\n {allowTokenCreate && (\n \n \n Add Token\n \n
\n )}\n\n \n )}\n\n \n )\n}\n\nexport default Vendors\n\n","import React, { useEffect, useState } from 'react';\nimport { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { TextSearch, StackedFilter } from '../../../Components/Table/Filter';\nimport { StatusChoices, ProductChoices } from '../../../Components/Table/FilterChoices';\nimport FilterSummaryTags from \"../../../Components/Table/FilterSummaryTags\";\nimport useApiBatch from '../../../Hooks/useApiBatch';\nimport RightDateAndControls from '../../../Components/Table/RightDateAndControls';\nimport {useFilters} from \"../../../Hooks/useFilters\";\n\nconst Filters = ({\n filters, onChange, onRefresh, loading = false,\n}) => {\n const batcher = useApiBatch();\n const [choices, setChoices] = useState({});\n const {onChangeFilter, reset, clearFilter, clearSearch} = useFilters(filters, onChange)\n\n // load choices\n useEffect(() => {\n const getChoices = async () => {\n const batches = await batcher.fetch([\n //{ endpoint: 'vendors', action: 'list', params: { limit: 0 } },\n { endpoint: 'verticals', action: 'list' },\n { endpoint: 'channels', action: 'list', params: { options: 1 } },\n ]);\n if (batches && batches.length) {\n const [verticals, channels] = batches;\n setChoices({\n status: StatusChoices,\n product: ProductChoices,\n // vendors: vendors.data.map((item) => ({ value: item.id.toString(), label: item.name })),\n vertical: verticals.map((item) => ({ value: item.id, label: item.display_name })),\n channel: channels.map((item) => ({ value: item.id, label: item.name })),\n\n });\n }\n };\n\n if (Object.keys(choices).length === 0) getChoices();\n }, []);\n\n\n return (\n \n
\n
\n
\n\n
\n onChangeFilter('search', val)}\n onClear={clearSearch}\n delay={500}\n />\n
\n\n {/* Use of inNavbar={true} disables popper and allows application of '.dropDown' animation class to menu */}\n
\n\n \n \n\n \n\n \n
\n\n \n \n\n
\n\n
\n
\n\n
\n\n
\n load()} loading={loading} />\n \n\n \n New Source\n \n ) : (null)}\n >\n\n \n \n Routing Rules\n \n )\n }\n >\n \n {allowViewRouting && (\n \n Routing Rules\n \n )}\n {allowEdit && (\n \n Edit\n \n )}\n \n }\n >\n \n \n
\n ID \n {source.id}
\n \n
\n Created \n \n
\n \n
\n Modified \n \n
\n \n
\n Name \n {source.name ?? ''}
\n \n\n \n Description \n {source.description || None }
\n \n\n \n Product \n {source.product ? titleCaseWord(source.product) : None }
\n \n\n \n Vertical \n \n {source.vertical?.display_name || source.vertical?.name || None }\n
\n \n\n \n Status \n {source.status ? titleCaseWord(source.status) : None }
\n \n\n {source.product === 'calls' && (\n <>\n \n Phone Numbers \n {phoneCount > 0 ? (\n \n {source.phone_numbers.map((phone, i) => (\n \n \n ))}\n \n ) : (\n \n No phone numbers assigned \n
\n )}\n \n\n \n Vendor Billable Duration \n \n {source.vendor_billable_duration\n ? `${source.vendor_billable_duration} seconds`\n : None }\n
\n \n \n )}\n\n \n Seed Data \n \n {source.seed_data && Object.keys(source.seed_data).length > 0 ? (\n None \n )}\n
\n \n \n
\n\n \n \n Required Fields \n \n {source.required_fields && source.required_fields.length > 0 ? (\n
\n {source.required_fields.map((field, i) => (\n \n {field.field}\n {/* Recommended fields live in the same list but are not enforced */}\n {field.recommended && (recommended) }\n \n ))}\n \n ) : (\n
None \n )}\n
\n\n {source.product === 'clicks' && source.click_tags && (\n \n Click Tags \n \n {source.click_tags.length > 0 ? (\n
\n {source.click_tags.map((tag, i) => (\n {tag} \n ))}\n \n ) : (\n
None \n )}\n
\n )}\n \n
\n \n )}\n \n \n );\n};\n\nexport default SourceShow;\n","import React, {useMemo} from 'react';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\n//import {UncontrolledTooltip} from \"reactstrap\";\nimport { IconData } from './constants';\n\n/*\n * Show icons in a table cell describing aspects of an entity's routing rules.\n * Routing rules have a 'summary' field which is an array of strings.\n * It is derived from scanning all rules in a tree.\n * Note, because it is based on all rules, you can get contradictory values,\n * such as both 'include' and 'exclude' if rules have different flow control settings.\n * Here we just show one icon indicating a flow control setting exists.\n *\n * This icon component is NOT for each rule in the full rule tree. See RuleIcons\n */\nconst RoutingRuleIconTableCell = ({ruleId, summary, onOpenRules}) => {\n\n\n const iconData = useMemo(() => {\n\n return summary.map((item) => {\n switch(item) {\n case 'sale_caps':\n case 'match_caps':\n return IconData['sale_match_caps'];\n case 'include':\n case 'exclude':\n return IconData['flow_control'];\n case 'absolute':\n return IconData['payout'];\n case 'modifier':\n return IconData['margin'];\n case 'match_conditions':\n return IconData[item];\n default:\n return null;\n }\n }).filter(i => i)\n }, [])\n\n return (\n \n {iconData.map( (icon,i) => (\n \n
\n\n {/*
\n {icon.title}\n */}\n
\n )\n}\n\nexport default RoutingRuleIconTableCell;\n","import React, {useMemo, useState} from 'react';\nimport { Button } from 'reactstrap';\nimport { useSearchParams, Link } from 'react-router-dom';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport usePermission from '../../../Hooks/usePermission';\nimport PagedTable from '../../../Components/Table/PagedTable';\nimport { DateFormatter } from '../../../Components/Table/Table';\nimport RoutingRuleIconTableCell from \"../../../Components/Rules/RoutingRuleIconTableCell\";\nimport {singularOrPlural} from \"@thedmsgroup/mastodon-ui-components/lib/utils/string\";\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport {faKey} from \"@fortawesome/free-solid-svg-icons\";\nimport {ChangeHistoryButton} from \"../../../Providers/ChangeProvider\";\n\nconst NameCell = ({ name, vendorId, allowEdit, searchParams }) => (\n \n \n \n \n {allowEditVendor && (\n \n \n \n )}\n {allowViewTokens && (\n {\n onSourceTokensClick(vendor);\n }}\n >\n {\n onRulesClick(vendor);\n }}\n >\n \n {\n onRoutingClick(vendor.id);\n }}\n title='Routing Map'\n className='action-item inline'\n >\n
\n )\n\nconst TokensCell = ({ tokens }) => {\n const [showData, setShowData] = useState(false);\n const nonArchived = tokens.filter(t => t.status !== 'archived');\n return nonArchived?.length > 0 ? (\n setShowData(!showData)} style={{ cursor: 'pointer' }}>\n
\n {nonArchived.length} {singularOrPlural(nonArchived.length, 'Source', 'Sources')}{' '}\n
\n\n {showData &&\n nonArchived.map((st, i) => (\n
\n
\n ))}\n
— \n );\n};\n\nconst UeidsCell = ({ vendorId, ueids, searchParams }) => {\n const [showData, setShowData] = useState(false);\n\n return ueids?.length > 0 ? (\n \n
setShowData(!showData)} style={{ cursor: 'pointer' }}>\n {ueids.length} {singularOrPlural(ueids.length, 'UEID', 'UEIDs')}{' '}\n
\n\n {showData &&\n <>\n {ueids.map((id, i) => (\n
\n {id.ueid}\n
\n ))}\n
\n Add UEIDs\n \n \n }\n — \n );\n};\n\nconst VendorsTable = ({\n vendors,\n loading,\n totalRows,\n pageCount,\n page,\n sort_by,\n sort_dir,\n limit,\n setPage,\n setLimit,\n setSortBy,\n setSortDir,\n openRulesModal,\n openSourceTokensModal,\n openRoutingMapModal,\n}) => {\n const [searchParams] = useSearchParams()\n const allowEditVendor = usePermission('vendors.edit');\n const allowViewTokens = usePermission('source_tokens.view');\n const allowViewRules = usePermission('routing.view');\n const allowViewAuction = usePermission('auctions.view');\n\n const initialTableState = useMemo(() => ({\n sortBy: [{ id: 'name', desc: false }],\n }), []);\n\n const columns = useMemo(\n () => [\n {\n Header: 'ID',\n accessor: 'id',\n defaultCanSort: false,\n Cell: ({value}) => (\n openRulesModal(row.original)} /> ,\n },\n {\n Header: 'Tokens',\n disableSortBy: true,\n accessor: 'source_tokens',\n Cell: ({ value }) => \n\n
\n\n
\n\n
\n \n onChangeFilter('search', val)}\n onClear={clearSearch}\n autofocus\n style={{minWidth:\"250px\"}}\n />\n \n {filters.search_type || 'Vendor name'} \n \n { onChangeFilter('search_type','name'); }}>Vendor name \n { onChangeFilter('search_type', 'ueid'); }}>UEID \n \n \n \n\n
\n\n
\n
\n
\n \n {selectedToken?.id > 0 && \n \n }\n {selectedToken ? (selectedToken.id > 0 ? 'Edit Source Token' : 'Create Source Token') : 'Source Tokens for Vendor'}\n \n {vendor.name}
\n\n {selectedToken ? (\n \n \n\n {allowTokenCreate && (\n \n \n Add Token\n \n
\n )}\n\n \n\n )}\n\n \n )\n}\n\nexport default Sources\n\n\n","import React, { useEffect, useState } from 'react';\nimport {\n Button\n} from 'reactstrap';\nimport { Link, useSearchParams } from 'react-router-dom';\nimport PageSection from '../../../Layout/PageSection';\nimport VendorsTable from './Table';\nimport {Modal as RoutingRulesModal} from \"../../Routing/Rules\";\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport DocTitle from '../../../Layout/DocTitle';\nimport useApi from '../../../Hooks/useApi';\nimport usePermission from '../../../Hooks/usePermission';\nimport FilterBar from '../../../Components/Table/FilterBar';\nimport Filters from './Filters';\nimport Sources from \"./Vendor/Sources\";\nimport RoutingMapModal from \"../../Routing/Mapper/Modal\";\nimport usePagedTableState from '../../../Hooks/usePagedTableState'\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\n\nconst DefaultFilters = {\n\n};\n\nconst DefaultControls = {\n limit: 50,\n sort_by: 'name',\n sort_dir: 'asc',\n};\n\n/*\n * Sources List - table\n *\n */\nconst VendorsList = () => {\n const {\n filters, setFilters, controls, updateQuery,\n } = usePagedTableState(\n DefaultFilters,\n DefaultControls,\n { useQueryString: true, useTableControls: true },\n );\n const [searchParams] = useSearchParams()\n const [loading, setLoading] = useState(false);\n const [vendors, setVendors] = useState([]);\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const [rulesModalOpen, setRulesModalOpen] = useState(false);\n const [sourceTokensModalOpen, setSourceTokensModalOpen] = useState(false);\n const [selectedVendor, setSelectedVendor] = useState(null);\n const [routingMapId, setRoutingMapId] = useState(null);\n const apiList = useApi('vendors', 'list');\n const allowView = usePermission('vendors.view');\n const allowCreate = usePermission('vendors.create');\n\n useChangeTimeline({\n entityTypes: ['vendor', 'routingrule', 'sourcetoken'],\n });\n\n if (!allowView) return null;\n\n useEffect(() => {\n if (!loading) {\n load();\n }\n }, [filters, controls.sort_by, controls.sort_dir, controls.page, controls.limit]);\n\n const load = async () => {\n setLoading(true);\n\n updateQuery();\n const {\n page, sort_by, sort_dir, limit,\n } = controls;\n const result = await apiList.fetch({\n ...filters,\n page,\n sort_by,\n sort_dir,\n limit,\n });\n\n if (result) {\n //setVendors(result);\n const { limit, total, data } = result; // row:0, page:1, limit:20, data:[]\n setVendors(data);\n setPageCount(total > limit ? Math.ceil(total / limit) : 1);\n setTotalRows(total);\n } else {\n notify(`Unable to load vendors: ${apiList.error?.name}`, 'error');\n }\n\n setLoading(false);\n };\n\n const openRulesModal = (vendor) => {\n setSelectedVendor(vendor);\n setRulesModalOpen(true);\n };\n\n\n const closeRulesModal = () => setRulesModalOpen(false);\n\n const openSourceTokensModal = (vendor) => {\n setSelectedVendor(vendor);\n setSourceTokensModalOpen(true);\n };\n\n const closeSourcesModal = (refresh) => {\n if (refresh === true) {\n load();\n }\n setSourceTokensModalOpen(false);\n }\n\n const openRoutingMapModal = (vendorId) => setRoutingMapId(vendorId)\n const closeRoutingMapModal = () => setRoutingMapId(null)\n\n return (\n <>\n \n \n\n \n Create\n \n\n ) : (null)}\n >\n\n\n \n \n \n
\n);\n\nconst SourceCell = ({ source }) => (\n \n {source ? (\n \n \n\n ) : (\n available \n )}\n \n);\n\nconst ActionCell = ({ number, allowEdit, onEditClick }) => (\n \n {allowEdit && (\n { onEditClick(number); }}\n title='Settings'\n >\n
\n)\n\nconst Table = (props) => {\n const allowEdit = usePermission('phone_numbers.edit');\n\n const columns = useMemo(\n () => [\n {\n Header: 'Number',\n className: 'number-cell',\n // id:'number', //used to id sort\n accessor: 'phone_number',\n defaultCanSort: true,\n Cell: (c) => \n {value ? (\n — \n )}\n \n ),\n },\n {\n Header: 'UEID',\n accessor: 'ueid',\n defaultCanSort: true,\n minWidth: 120,\n Cell: ({ value }) => (\n {value || — } \n ),\n },\n {\n Header: 'Vertical',\n disableSortBy: true,\n id: 'vertical',\n Cell: ({ row }) => (\n \n {row.original.source\n ? row.original.source.vertical.display_name\n : null}\n \n ),\n maxWidth: 180,\n },\n {\n Header: 'IVR Script',\n sortable: false,\n id: 'script',\n Cell: ({ row }) => (\n \n {row.original.script ? (\n row.original.script.name\n ) : (\n — \n )}\n \n ),\n minWidth: 180,\n },\n {\n Header: 'Seed Data',\n disableSortBy: true,\n accessor: 'seed_data',\n Cell: (c) => — ),\n },\n {\n Header: 'Last Used',\n accessor: 'last_used_at',\n defaultCanSort: true,\n width: 130,\n Cell: ({ value }) => (value ? — ),\n },\n ...(allowEdit ? [{\n maxWidth: 60,\n sortable: false,\n id: 'actions',\n Cell: (c) => (\n props.openModal(c.row.original)}\n />\n ),\n }] : []),\n ],\n [allowEdit]\n );\n\n const initialTableState = useMemo(\n () => ({\n sortBy: [\n {\n id: props.sort_by,\n desc:\n typeof props.sort_dir !== 'undefined'\n ? props.sort_dir === 'desc'\n : true,\n },\n ],\n }),\n []\n );\n\n return (\n \n
\n\n
\n\n
\n\n onChangeFilter('search', val)}\n onClear={clearSearch}\n delay={500}\n />\n\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n {/* Use dropdown? Not yet sure how many filters we will have.\n\n \n\n*/}\n\n
\n\n
\n
\n \n Please correct the errors below before continuing\n \n )}\n\n \n \n
\n\n \n\n \n Cancel\n \n \n Save\n \n\n\n\n \n
\n \n );\n};\n\nPhoneNumber.propTypes = {\n id: PropTypes.number,\n phone_number: PropTypes.string,\n closeModal: PropTypes.func,\n isNew: PropTypes.bool,\n vendor: PropTypes.object,\n ueid: PropTypes.string,\n seed_data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),\n source: PropTypes.object,\n script_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n // script:PropTypes.object,\n};\n\nexport default PhoneNumber;\n","import React, { useEffect, useState } from 'react';\nimport {\n Button, Modal, ModalHeader, ModalBody,\n} from 'reactstrap';\nimport PageSection from '../../../Layout/PageSection';\nimport Table from './Table';\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport FilterBar from '../../../Components/Table/FilterBar';\nimport Filters from './Filters';\nimport DocTitle from '../../../Layout/DocTitle';\nimport usePagedTableState from '../../../Hooks/usePagedTableState';\nimport useApi from '../../../Hooks/useApi';\nimport usePermission from '../../../Hooks/usePermission';\nimport PhoneNumber from './PhoneNumber';\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\n\nconst DefaultFilters = {\n available: '',\n};\n\nconst DefaultControls = {\n limit: 50,\n sort_by: 'inserted_at',\n sort_dir: 'desc',\n};\n\n/*\n * Phone Numbers List - paged table with filters\n *\n */\nconst PhoneNumberList = () => {\n const {\n filters, setFilters, controls, updateQuery,\n } = usePagedTableState(\n DefaultFilters,\n DefaultControls,\n { useQueryString: true, useTableControls: true },\n );\n const [data, setData] = useState([]);\n const [loading, setLoading] = useState(false);\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const [editModalOpen, setEditModalOpen] = useState(false);\n const [selectedNumber, setSelectedNumber] = useState(null);\n const [changeLogKey, setChangeLogKey] = useState(1);\n const apiList = useApi('phoneNumbers', 'list');\n // const apiUpdate = useApi('phoneNumbers', 'update');\n const allowView = usePermission('phone_numbers.view');\n const allowCreate = usePermission('phone_numbers.create');\n useChangeTimeline({ entityTypes: ['phonenumber'], parentFilters: filters });\n\n useEffect(() => {\n if (!loading) {\n load();\n }\n }, [filters, controls.sort_by, controls.sort_dir, controls.page, controls.limit]);\n\n const filterParamsToApi = (filters) => {\n const apiParams = { ...filters };\n\n if (filters.vertical) {\n apiParams.vertical_id = filters.vertical;\n delete apiParams.vertical;\n }\n\n if (filters.available !== undefined && !filters.available) {\n delete apiParams.available;\n }\n\n return apiParams;\n };\n\n const load = async () => {\n // if(!this.isUserAccount) return;\n setLoading(true);\n updateQuery();\n const apiFilters = filterParamsToApi(filters);\n const {\n page, sort_by, sort_dir, limit,\n } = controls;\n const result = await apiList.fetch({\n ...apiFilters,\n page,\n sort_by,\n sort_dir,\n limit,\n });\n\n if (result) {\n const { limit, total, data } = result; // row:0, page:1, limit:20, data:[]\n setData(data);\n setPageCount(total > limit ? Math.ceil(total / limit) : 1);\n setTotalRows(total);\n } else {\n notify(`Unable to load phone numbers: ${apiList.error.name}`, 'error');\n }\n\n setLoading(false);\n };\n\n const closeEditModal = (refresh = false) => {\n setEditModalOpen(false);\n setSelectedNumber(null);\n if (refresh === true) {\n load();\n setChangeLogKey(changeLogKey + 1);\n }\n };\n\n const openEditModal = (number) => {\n if (!number) {\n number = {\n id: 0,\n phone_number: '',\n source: null,\n script: null,\n ueid: null,\n seed_data: {},\n };\n }\n setSelectedNumber(number);\n setEditModalOpen(true);\n };\n\n // const handleStatusChange = async(source, status) => {\n //\n // if(source && allowEdit){\n // let result = await apiUpdate.fetch(\n // { ...source,\n // vendor_id:source.vendor.id,\n // vertical_id:source.vertical.id,\n // status:status\n // }\n // );\n // return result ? true : false;\n // }\n // return false;\n //\n // }\n\n if (!allowView) return (null);\n\n return (\n <>\n \n load()} loading={loading} />\n \n\n openEditModal(null)}\n color=\"primary\"\n size=\"sm\"\n >\n New Number\n \n ) : (null)}\n >\n\n {/* onStatusChange={handleStatusChange} */}\n \n {selectedNumber && (\n <>\n {selectedNumber.id === 0 ? 'Create Phone Number' : 'Phone Number Settings'} \n \n\n \n \n )}\n \n\n \n\n\n\n \n );\n};\n\nexport default PhoneNumberList;\n","import React, {useState, useEffect} from \"react\";\nimport {\n Button,\n} from 'reactstrap';\nimport {useNavigate, useLocation} from 'react-router-dom';\nimport useApi from \"../../../Hooks/useApi\";\nimport usePermission from \"../../../Hooks/usePermission\";\nimport {SourceTokenTable, Filters} from \"../SourceToken\";\nimport usePagedTableState from \"../../../Hooks/usePagedTableState\";\nimport PageSection from \"../../../Layout/PageSection\";\nimport DocTitle from \"../../../Layout/DocTitle\";\nimport FilterBar from \"../../../Components/Table/FilterBar\";\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\n\n\nconst DefaultControls = {\n limit: 15,\n sort_by: 'created_at',\n sort_dir: 'desc',\n};\n\nconst SourceTokenList = () => {\n const navigate = useNavigate();\n const location = useLocation();\n const {api} = useApi();\n const [isLoading, setIsLoading] = useState(true);\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const {\n filters, setFilters, updateQuery, controls\n } = usePagedTableState(\n {},\n DefaultControls,\n { useQueryString: true, useTableControls: true },\n );\n const allowCreate = usePermission('source_tokens.create');\n const allowEdit = usePermission('source_tokens.edit');\n const [tokens, setTokens] = useState([]);\n\n useChangeTimeline({\n entityTypes: ['sourcetoken'],\n parentFilters: filters,\n });\n\n useEffect(() => {\n load();\n }, [filters, controls.sort_by, controls.sort_dir, controls.page, controls.limit])\n\n const load = async() => {\n setIsLoading(true);\n updateQuery();\n const {\n page, sort_by, sort_dir, limit,\n } = controls;\n const result = await api.endpoints.sourceTokens.list({\n ...filters,\n page,\n sort_by,\n sort_dir,\n limit,\n });\n\n\n if (result) {\n const { limit, total, data } = result;\n setTokens(data);\n setPageCount(total > limit ? Math.ceil(total / limit) : 1);\n setTotalRows(total);\n }\n setIsLoading(false);\n }\n\n const onAdd = () => {\n navigate('/publishing/source-tokens/create', {\n state: {search: location.search}\n });\n };\n\n return (\n <>\n \n \n\n \n Add\n : null}\n >\n\n \n \n \n Edit\n \n ) : null}\n >\n \n \n Source \n \n
\n \n\n \n Vendor \n \n
\n \n\n \n Token \n \n {sourceToken.token ? (\n <>\n {sourceToken.token}{' '}\n none \n )}\n
\n \n\n \n Label \n {sourceToken.label || '-'}
\n \n\n \n Description \n {sourceToken.description || '-'}
\n \n\n \n
\n Status \n {Utils.titleCase(sourceToken.status)}
\n \n\n
\n Post Type \n {sourceToken.post_type ? Utils.titleCase(sourceToken.post_type.replace('_', ' ')) : 'Any'}
\n \n
\n {sourceToken.inserted_at && (\n
\n Created \n
\n \n )}\n {sourceToken.modified_at && (\n
\n Modified \n
\n \n )}\n
\n Seed Data \n \n )}\n\n \n
\n )}\n\n \n \n );\n};\n\nexport default SourceTokenShow;\n","import React, { FC, useMemo } from 'react';\nimport { Link, useLocation } from 'react-router-dom';\nimport FlexTable from \"../../../Components/Table/FlexTable\";\nimport { RelativeTime, Stack, RowDivider } from '@thedmsgroup/mastodon-ui-components';\nimport {AnyCell} from \"../../../Components/Table/Table\";\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport {SaleGroupListing, TableProps} from \"../../../types\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport usePermission from \"../../../Hooks/usePermission\";\nimport {Button} from \"reactstrap\";\nimport {ChangeHistoryButton} from \"../../../Providers/ChangeProvider\";\n\ntype SaleGroupListTableProps = TableProps & {\n data:SaleGroupListing[];\n}\n\nexport const SaleGroupTable:FC = ({data, loading}) => {\n const allowEdit = usePermission('sales_groups.edit');\n const location = useLocation();\n\n\n const columns = useMemo(() => [\n {\n Header: 'ID',\n accessor: 'id',\n Cell: ({value}: {value:number}) => <>{value} \n )\n ),\n },\n {\n Header: 'Sources',\n accessor: 'sources',\n Cell:({value}:{value:SaleGroupListing[]}) => \n {allowEdit && \n
\n)\n\nconst SourcesCell = ({sources}:{sources:any[]}) => {\n\n return (\n <>\n {sources.length > 0 ? (\n }>\n {sources.map((s:any, i:number) => (\n \n
\n ))}\n \n ) : (\n }>\n {buyers.map((name:string) => {name}
)}\n \n ) : (\n ([])\n const allowEdit = usePermission('sales_groups.edit');\n useChangeTimeline({ entityTypes: ['salegroup'], parentFilters: {} });\n\n useEffect(() => {\n load();\n }, [])\n\n const load = async() => {\n setLoading(true);\n const result = await api.endpoints.saleGroups.list();\n if (result) {\n setSaleGroups(result as SaleGroupListing[]);\n } else {\n notify(\"Unable to load Sale Group data\", \"error\");\n }\n setLoading(false);\n }\n\n const onAdd = () => {\n navigate(\"create\", { state: { search: location.search } });\n }\n\n return (\n <>\n \n Add\n ) : null}\n >\n (null);\n const {api} = useApi();\n const allowEdit = usePermission('sales_groups.edit');\n\n useEffect(() => {\n load();\n }, []);\n\n const load = async () => {\n const result = await api.endpoints.saleGroups.show(id);\n if (result) {\n setSaleGroup(result);\n } else {\n notify(`Unable to load sale group: ${api.error?.name || 'Unknown error'}`, 'error');\n navigate('/publishing/sale-groups');\n }\n setLoading(false);\n };\n\n return (\n <>\n \n Edit\n \n ) : null}\n >\n \n \n Name \n {saleGroup.name}
\n \n\n \n Sources \n \n {saleGroup.sources?.length > 0 ? (\n saleGroup.sources.map((s: any, i: number) => (\n
\n
\n ))\n ) : (\n
None \n )}\n
\n\n \n Shared Sales Limit \n {saleGroup.shared_sales_limit ?? 0}
\n \n\n \n Timeframe (days) \n {saleGroup.timeframe ?? 0}
\n \n\n \n Exempt Buyers \n \n {saleGroup.exempt_buyers?.length > 0 ? (\n saleGroup.exempt_buyers.map((name: string) => (\n
{name}
\n ))\n ) : (\n
None \n )}\n
\n\n {saleGroup.created_at && (\n \n Created \n
\n \n )}\n\n {saleGroup.updated_at && (\n \n Updated \n
\n \n )}\n\n \n
\n )}\n\n \n \n );\n};\n","import React, {useEffect, useState, useMemo} from 'react';\nimport {useLocation, useNavigate, useParams} from \"react-router-dom\";\nimport useFormState from \"../../../Hooks/useFormState\";\nimport useApi from \"../../../Hooks/useApi\";\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\nimport {Row, Col, Button, Input, FormGroup, Label, FormFeedback, FormText, Spinner} from 'reactstrap';\nimport CreatableSelect from 'react-select/creatable';\nimport {notify, StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport PageSection from \"../../../Layout/PageSection\";\nimport {BlockUI} from \"ns-react-block-ui\";\nimport DocTitle from \"../../../Layout/DocTitle\";\nimport Breadcrumbs from \"../../../Layout/Breadcrumbs\";\nimport * as Yup from \"yup\";\nimport EnhancedSelect from \"../../../Components/Form/EnhancedSelect\";\nimport {SourceOptionLabel} from \"../../../Components/Form/Select/SourceOptionLabel\";\n\nconst ValidationSchema = Yup.object().shape({\n name: Yup.string()\n .trim()\n .required('Please enter a source name'),\n //originally we were allowing blank for the numbers\n //timeframe:Yup.number().transform((val, orig) => orig == \"\" ? undefined : val).min(1, 'Enter a positive number for timeframe, or leave blank').nullable(),\n // shared_sales_limit:Yup.number().transform((val, orig) => orig == \"\" ? undefined : val).min(1, 'Enter a positive number for sales limit, or leave blank').nullable(),\n\n timeframe:Yup.number().transform((val, orig) => orig == \"\" ? undefined : val).min(1, 'Enter a positive number for timeframe, or leave blank').required('Timeframe is required'),\n shared_sales_limit:Yup.number().transform((val, orig) => orig == \"\" ? undefined : val).min(1, 'Enter a positive number for sales limit, or leave blank').required('Sales Limit is required'),\n\n});\n\n\n\nexport const SaleGroupForm = () => {\n const location = useLocation();\n const navigate = useNavigate();\n const params = useParams();\n const [loading, setLoading] = useState(true);\n\n const {api} = useApi();\n const [sourceChoices, setSourceChoices] = useState([])\n const [buyerNameChoices, setBuyerNameChoices] = useState<{value:string, label:string}[]>([])\n const {\n formApi, formIsValid, formValues, formErrors,\n } = useFormState(\n {\n shared_sales_limit:0,\n timeframe:0,\n sources:[],\n exempt_buyers:[],\n },\n ValidationSchema,\n undefined,\n undefined,\n { id:params.id }, // validationContext allows conditional validation\n );\n\n useChangeTimeline({\n entityTypes: ['salegroup'],\n parentFilters: {},\n entity: params.id && formValues.name ? { id: params.id, name: formValues.name, type: 'salegroup' } : undefined,\n enabled: !!params.id,\n });\n\n //Reset form on unmount\n useEffect(() => {\n loadChoices();\n loadSaleGroup();\n return () => formApi.clearForm();\n }, [])\n\n const loadChoices = async() => {\n // effective buyer names as matching resolves them; free text is still allowed\n const buyerNames = await api.endpoints.buyerNames.list()\n if (buyerNames) {\n setBuyerNameChoices(buyerNames.map((name:string) => ({value:name, label:name})));\n }\n\n const sources = await api.endpoints.sources.list({options:true})\n if (sources) {\n //we need to know source vertical id for the seed data builder\n setSourceChoices(sources.map((source:any )=> {\n return {\n value:source.id,\n label:source.name,\n status:source.status,\n vertical:source.vertical,\n product:source.product\n }\n }));\n }\n }\n\n const loadSaleGroup = async () => {\n if (params.id) {\n const result = await api.endpoints.saleGroups.show(params.id);\n if (result) {\n\n formApi.setValues( {\n name: result.name,\n shared_sales_limit: result.shared_sales_limit ?? 0,\n timeframe:result.timeframe ?? 0,\n sources: result.sources ? result.sources.map((s:any) => s.id.toString()) : [],\n exempt_buyers: result.exempt_buyers ?? [],\n })\n } else {\n notify(`Unabled to find the sale group`, 'error');\n }\n }\n setLoading(false);\n }\n\n const handleSelectSources = (sources:any[]) => formApi.setValue('sources', sources);\n\n const handleSelectExemptBuyers = (selected:any) =>\n formApi.setValue('exempt_buyers', (selected ?? []).map((opt:any) => opt.value));\n\n const handleSave = () => {\n const isValid = formApi.validate();\n if (isValid) {\n save();\n }\n }\n\n const save = async() => {\n setLoading(true);\n const values = {...formValues};\n if (!values.shared_sales_limit) {\n values.shared_sales_limit = 0;\n }\n\n if (!values.timeframe) {\n values.timeframe = 0;\n }\n\n let result;\n if (params.id) {\n result = await api.endpoints.saleGroups.update({id:params.id, ...values});\n } else {\n result = await api.endpoints.saleGroups.create(values);\n }\n\n setLoading(false);\n if (result) {\n notify(`The sale group has been saved`, 'success');\n goBack();\n\n } else {\n notify(`Unable to save the sale group: ${api.error ? api.error.name : \"\"}`, 'error');\n }\n }\n\n const goBack = () => {\n navigate({\n pathname: '/publishing/sale-groups',\n search: location.state?.search ?? '',\n });\n };\n\n const crumbs = useMemo(() => [\n { label: \"Publishing\" },\n { label: \"Sale Groups\", to: { pathname: '/publishing/sale-groups', search: location.state?.search ?? '' } },\n ...(params.id\n ? [{ label: formValues.name || `Sale Group ${params.id}` }]\n : [{ label: \"Create\" }]\n ),\n ], [params.id, formValues.name, location.state]);\n\n return (\n <>\n \n\n \n\n \n Correct the errors indicated below\n \n )}\n\n \n \n Name\n \n {formErrors.name} \n \n\n \n Sources \n\n \n\n \n \n Shared Sales Limit\n \n {formErrors.shared_sales_limit} \n \n\n \n \n Timeframe (days)\n \n {formErrors.timeframe} \n \n\n \n Exempt Buyers \n ({value:name, label:name}))}\n onChange={handleSelectExemptBuyers}\n placeholder=\"Select or type a buyer name...\"\n formatCreateLabel={(input:string) => `Use \"${input}\"`}\n />\n \n Sales to these buyers are ignored by this group: they count toward neither the exclusive\n check nor the shared sales limit. Names must match the buyer name exactly as it appears\n on sales.\n \n \n\n \n \n Cancel\n \n \n Save\n \n
\n \n \n\n
\n\n \n \n );\n}\n","import React, { FC, useMemo } from 'react';\nimport { Link, useLocation } from 'react-router-dom';\nimport FlexTable from \"../../../Components/Table/FlexTable\";\nimport { RelativeTime } from '@thedmsgroup/mastodon-ui-components';\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport {SalesFlowListing, TableProps} from \"../../../types\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport usePermission from \"../../../Hooks/usePermission\";\nimport {Badge} from 'reactstrap';\n\ntype SalesFlowListTableProps = TableProps & {\n data:SalesFlowListing[];\n}\n\nexport const SalesFlowTable:FC = ({data, loading}) => {\n const allowEdit = usePermission('sales_flows.edit');\n const location = useLocation();\n const columns = useMemo(() => [\n {\n Header: 'ID',\n accessor: 'id',\n Cell: ({value}: {value:number}) => <>\n
\n {allowEdit\n ?
\n {row.original.description &&
{row.original.description} }\n
{value ? 'Yes' : 'No'} \n ),\n maxWidth: 80\n },\n {\n Header: 'Concurrency',\n accessor: 'concurrency',\n maxWidth: 100\n },\n {\n Header: 'Rate Limit',\n accessor: 'rate_limit',\n maxWidth: 100\n },\n {\n Header: 'Load Interval',\n accessor: 'load_interval',\n maxWidth: 110\n },\n {\n Header: 'Cooldown',\n accessor: 'cooldown',\n maxWidth: 100\n },\n {\n Header: 'Updated',\n accessor: 'updated_at',\n Cell: ({ value }:any) => {\n return \n {allowEdit && \n
\n )\n}\n","import React, { useEffect, useState} from 'react';\nimport {useNavigate, useLocation} from 'react-router-dom';\nimport { notify } from '@thedmsgroup/mastodon-ui-components/lib/common/Notify';\nimport useApi from \"../../../Hooks/useApi\";\nimport { Button} from 'reactstrap';\nimport type {SalesFlowListing} from \"../../../types\";\nimport {SalesFlowTable} from \"./Table\";\nimport usePermission from \"../../../Hooks/usePermission\";\nimport PageSection from \"../../../Layout/PageSection\";\nimport DocTitle from \"../../../Layout/DocTitle\";\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\n\nexport const SalesFlowList = () => {\n const {api} = useApi();\n const navigate = useNavigate();\n const location = useLocation();\n const [loading, setLoading] = useState(true);\n\n useChangeTimeline({ entityTypes: ['salesflow'] });\n const [salesFlows, setSalesFlows] = useState([])\n const allowEdit = usePermission('sales_flows.edit');\n\n useEffect(() => {\n load();\n }, [])\n\n const load = async() => {\n setLoading(true);\n const result = await api.endpoints.salesFlows.list();\n if (result) {\n setSalesFlows(result as SalesFlowListing[]);\n } else {\n notify(\"Unable to load Sales Flow data\", \"error\");\n }\n setLoading(false);\n }\n\n const onAdd = () => {\n navigate(\"create\", { state: { search: location.search } });\n }\n\n return (\n <>\n \n Add\n ) : null}\n >\n (null);\n const {api} = useApi();\n const allowEdit = usePermission('sales_flows.edit');\n\n useEffect(() => {\n load();\n }, []);\n\n const load = async () => {\n const result = await api.endpoints.salesFlows.show(id);\n if (result) {\n setSalesFlow(result);\n } else {\n notify(`Unable to load sales flow: ${api.error?.name || 'Unknown error'}`, 'error');\n navigate('/publishing/sales-flows');\n }\n setLoading(false);\n };\n\n return (\n <>\n \n Edit\n \n ) : null}\n >\n \n \n Name \n {salesFlow.name}
\n \n\n \n Active \n \n \n {salesFlow.is_active ? 'Yes' : 'No'}\n \n
\n \n\n \n Lead Query \n {salesFlow.lead_query || '-'}
\n \n\n \n Sales Script \n {salesFlow.sales_script || '-'}
\n \n\n \n \n Concurrency \n {salesFlow.concurrency ?? 0}
\n \n \n \n Rate Limit \n {salesFlow.rate_limit ?? 0}
\n \n \n
\n\n \n \n Load Interval \n {salesFlow.load_interval ?? 0}
\n \n \n \n Cooldown \n {salesFlow.cooldown ?? 0}
\n \n \n
\n\n {salesFlow.updated_at && (\n \n Updated \n
\n \n )}\n\n \n
\n )}\n\n \n \n );\n};\n","import React, {useEffect, useState, useMemo} from 'react';\nimport {useLocation, useNavigate, useParams} from \"react-router-dom\";\nimport useFormState from \"../../../Hooks/useFormState\";\nimport useApi from \"../../../Hooks/useApi\";\nimport {useChangeTimeline} from '../../../Hooks/useChangeTimeline';\nimport {Row, Col, Button, Input, FormGroup, Label, FormFeedback, Spinner} from 'reactstrap';\nimport {notify, StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport PageSection from \"../../../Layout/PageSection\";\nimport {BlockUI} from \"ns-react-block-ui\";\nimport DocTitle from \"../../../Layout/DocTitle\";\nimport Breadcrumbs from \"../../../Layout/Breadcrumbs\";\nimport * as Yup from \"yup\";\n\nconst ValidationSchema = Yup.object().shape({\n name: Yup.string()\n .trim()\n .required('Please enter a name'),\n lead_query: Yup.string()\n .trim()\n .required('Please enter a lead query'),\n sales_script: Yup.string()\n .trim()\n .required('Please enter a sales script URL'),\n concurrency: Yup.number()\n .transform((val, orig) => orig === \"\" ? undefined : val)\n .min(0, 'Concurrency must be 0 or greater')\n .required('Concurrency is required'),\n rate_limit: Yup.number()\n .transform((val, orig) => orig === \"\" ? undefined : val)\n .min(0, 'Rate limit must be 0 or greater')\n .required('Rate limit is required'),\n load_interval: Yup.number()\n .transform((val, orig) => orig === \"\" ? undefined : val)\n .min(0, 'Load interval must be 0 or greater')\n .nullable(),\n cooldown: Yup.number()\n .transform((val, orig) => orig === \"\" ? undefined : val)\n .min(0, 'Cooldown must be 0 or greater')\n .required('Cooldown is required'),\n});\n\nexport const SalesFlowForm = () => {\n const location = useLocation();\n const navigate = useNavigate();\n const params = useParams();\n const [loading, setLoading] = useState(true);\n\n const {api} = useApi();\n const {\n formApi, formIsValid, formValues, formErrors,\n } = useFormState(\n {\n name: '',\n description: '',\n is_active: true,\n lead_query: '',\n sales_script: '',\n concurrency: 1,\n rate_limit: 0,\n load_interval: '',\n cooldown: 0,\n },\n ValidationSchema,\n undefined,\n undefined,\n { id:params.id },\n );\n\n useChangeTimeline({\n entityTypes: ['salesflow'],\n parentFilters: {},\n entity: params.id && formValues.name ? { id: params.id, name: formValues.name, type: 'salesflow' } : undefined,\n enabled: !!params.id,\n });\n\n useEffect(() => {\n loadSalesFlow();\n return () => formApi.clearForm();\n }, [])\n\n const loadSalesFlow = async () => {\n if (params.id) {\n const result = await api.endpoints.salesFlows.show(params.id);\n if (result) {\n formApi.setValues({\n name: result.name,\n description: result.description ?? '',\n is_active: result.is_active ?? true,\n lead_query: result.lead_query ?? '',\n sales_script: result.sales_script ?? '',\n concurrency: result.concurrency ?? 1,\n rate_limit: result.rate_limit ?? 0,\n load_interval: result.load_interval ?? '',\n cooldown: result.cooldown ?? 0,\n })\n } else {\n notify(`Unable to find the sales flow`, 'error');\n }\n }\n setLoading(false);\n }\n\n const handleSave = () => {\n const isValid = formApi.validate();\n if (isValid) {\n save();\n }\n }\n\n const save = async() => {\n setLoading(true);\n const values = {...formValues};\n\n let result;\n if (params.id) {\n result = await api.endpoints.salesFlows.update({id:params.id, ...values});\n } else {\n result = await api.endpoints.salesFlows.create(values);\n }\n\n setLoading(false);\n if (result) {\n notify(`The sales flow has been saved`, 'success');\n goBack();\n } else {\n notify(`Unable to save the sales flow: ${api.error ? api.error.name : \"\"}`, 'error');\n }\n }\n\n const goBack = () => {\n navigate({\n pathname: '/publishing/sales-flows',\n search: location.state?.search ?? '',\n });\n };\n\n const crumbs = useMemo(() => [\n { label: \"Publishing\" },\n { label: \"Sales Flows\", to: { pathname: '/publishing/sales-flows', search: location.state?.search ?? '' } },\n ...(params.id\n ? [{ label: formValues.name || `Sales Flow ${params.id}` }]\n : [{ label: \"Create\" }]\n ),\n ], [params.id, formValues.name, location.state]);\n\n return (\n <>\n \n\n \n\n \n Correct the errors indicated below\n \n )}\n\n \n \n Name\n \n {formErrors.name} \n \n\n \n \n Description\n \n \n\n \n formApi.setValue('is_active', e.target.checked)}\n />\n \n Active\n \n \n\n \n \n Lead Query\n \n {formErrors.lead_query} \n \n\n \n \n Sales Script\n \n {formErrors.sales_script} \n \n\n \n \n \n Concurrency\n \n {formErrors.concurrency} \n Max number of leads processed at the same time \n \n \n \n \n Rate Limit\n \n formApi.setValue('rate_limit', parseFloat(e.target.value) || 0)}\n value={formValues.rate_limit ?? ''}\n className=\"teeny\"\n invalid={!!formErrors.rate_limit}\n />\n {formErrors.rate_limit} \n Leads per second. Use decimals for slower rates (e.g. 0.5 = 1 per 2s, 0.1 = 1 per 10s). 0 = unlimited. \n \n \n
\n\n \n \n \n Load Interval\n \n {formErrors.load_interval} \n Wait time between running the load query loop. Defaults to 10 seconds if empty \n \n \n \n \n Cooldown\n \n {formErrors.cooldown} \n Wait time in seconds between processing each lead \n \n \n
\n\n \n \n Cancel\n \n \n Save\n \n
\n \n \n\n
\n\n \n \n );\n}\n","import React, {useMemo} from 'react';\nimport FlexTable from \"../../../../Components/Table/FlexTable\";\nimport { DateFormatter } from '../../../../Components/Table/Table';\nimport type {Ueid} from \"../../../../types\";\n\ntype UeidTableProps = {\n ueids: Ueid[];\n loading?: boolean;\n}\nexport const UeidTable = ({ueids=[], loading}:UeidTableProps) => {\n\n const columns = useMemo(\n () => [\n {\n Header: 'UEID',\n accessor: 'ueid',\n defaultCanSort: true,\n minWidth: 300,\n },\n\n // TODO: last_used\n {\n Header: 'Last Matched',\n accessor: 'last_matched_at',\n defaultCanSort: true,\n width: 130,\n disableGlobalFilter: true,\n Cell: ({ value }:{value:string}) => ;\n //onChange: (ueids: string[]) => void;\n onUpdateCallback?: (vendor:any) => void;\n loading: boolean;\n}\n\nconst TokenMaskOptions: any = {\n mask: /^[a-z0-9]{0,15}$/,\n maxLength: 15,\n prepare: function (str:string) {\n return str.toLowerCase();\n },\n}\n\nexport const Ueids = ({vendor, loading, onUpdateCallback}: UeidsProps) => {\n\n const {api} = useApi()\n const navigate = useNavigate()\n const location = useLocation()\n const [saving, setSaving] = useState(false)\n const [newUeids, setNewUeids] = useState([])\n const [ueidError, setUeidError] = useState(null)\n const {\n formApi,\n formValues,\n formErrors,\n formIsValid,\n } = useFormState({\n ...DefaultUeidConfig,\n vendor_name:vendor.name\n }\n , UeidValidationSchema)\n\n const handleAdd = () => {\n if (formApi.validate()) {\n save()\n }\n }\n\n const save = async() => {\n\n setSaving(true)\n setNewUeids([])\n setUeidError(null)\n const result = await api.endpoints.vendors.addUeids(vendor.id, formValues)\n\n if (result) {\n //Result is the updated vendor. Find new UEIDs\n const currentIds = vendor.ueids.map((u:any)=>u.ueid)\n const newIds = result.ueids\n .map((ueidRecord:any) => ueidRecord.ueid)\n .filter((ueid:string) => !currentIds.includes(ueid))\n setNewUeids(newIds)\n if (newIds.length) {\n notify(`The UEIDs have been created`, 'success')\n formApi.clearForm()\n typeof onUpdateCallback === 'function' && onUpdateCallback(result)\n } else {\n setUeidError('No new UEIDs were created. If the UEIDs suggested by the service are the same as current ones, the current ones are kept.')\n }\n\n } else {\n notify(`Unable to create UEIDs: ${api.error ? api.error.name : \"\"}`, 'error')\n setUeidError(`Unable to create UEIDs due to server error: ${api.error ? api.error.name : \"error unspecified\"}`)\n }\n setSaving(false);\n }\n\n const handleSelectVerticals = (selectedOptions: string[]) => {\n formApi.setValue('verticals', selectedOptions )\n }\n\n const onDismissNewIds = () => setNewUeids([])\n\n const returnToList = () => {\n formApi.clearForm()\n\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n }\n\n const handleChangePrefix = (value:string, mask:any) => {\n formApi.setValue('prefix', value);\n }\n\n return (\n \n
\n A UEID (Universal Event Identifier) is a standardized tracking code used to uniquely identify\n {' '} and attribute traffic sources, vendors, and verticals across digital marketing platforms.\n
\n\n\n
\n Current UEIDs \n
\n\n\n
\n\n Add UEIDs \n \n UEIDs will be created for each selected vertical, using the specified prefix, name, and traffic descriptors.\n
\n\n {newUeids.length > 0 && (\n \n New UEIDs created:
\n \n {newUeids.map((ueid:string) => (\n \n {ueid} \n \n ))}\n \n \n Return to vendors\n \n \n )}\n\n {ueidError && (\n \n {ueidError}\n \n )}\n\n {!formIsValid && (\n \n Please correct the errors below before continuing\n \n )}\n\n \n Vendor Name \n \n LMS requires that the vendor name be unique with each set of UEIDs requested.\n {' '}If LMS rejects this vendor name, try altering this value. It will not change\n {' '} the vendor name in Mastodon.\n \n {formErrors.vendor_name} \n \n\n \n Verticals \n\n \n\n \n Traffic_type \n \n Select \n Affiliate \n Display \n Email \n Internal Premium \n Search \n SEO \n Social \n\n\n \n {formErrors.traffic_type} \n \n\n \n Traffic Source \n \n Select \n Affiliate \n Internal \n \n {formErrors.traffic_source} \n \n\n \n Network Name \n {formErrors.network_name} \n \n\n \n Prefix \n\n Lower case, alphanumeric only. 3 to 15 characters. \n {formErrors.prefix} \n \n\n \n
\n\n \n Add UEIDs\n \n\n
\n
\n
;\n};\n\nconst EMPTY_CONFIG: IntegrationConfig = {name: '', settings: {}};\n\nexport const ReturnIntegration = ({vendor}: ReturnIntegrationProps) => {\n const {api} = useApi();\n const allowEdit = usePermission('integrations.edit');\n\n const [loading, setLoading] = useState(true);\n const [definitions, setDefinitions] = useState([]);\n // Whether this vendor currently has a return integration attached (200 vs 404 on GET).\n const [configured, setConfigured] = useState(false);\n // This vendor's own pause switch -- independent of the attached integration's own status.\n const [status, setStatus] = useState('active');\n const [config, setConfig] = useState(EMPTY_CONFIG);\n // Toggles the attached integration between IntegrationSettingsView and IntegrationSettingsEditor.\n const [editMode, setEditMode] = useState(false);\n // True only while attaching for the first time (nothing configured yet).\n const [adding, setAdding] = useState(false);\n\n useEffect(() => {\n load();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [vendor.id]);\n\n const load = async () => {\n setLoading(true);\n setEditMode(false);\n setAdding(false);\n\n // Sequential, not parallel -- api.error is shared instance state on the CoreAPI singleton,\n // so two in-flight requests would race to overwrite each other's error.\n const definitionsResult: any = await api.endpoints.integrations.list({type: 'return', search: 'return', limit: 50});\n if (definitionsResult) {\n setDefinitions(definitionsResult.data || []);\n } else {\n notify(`Unable to load return integrations: ${api.error ? api.error.name : ''}`, 'error');\n }\n\n const integrationResult: any = await api.endpoints.vendors.getReturnIntegration(vendor.id);\n\n if (integrationResult) {\n setConfigured(true);\n setStatus(integrationResult.status);\n setConfig({\n name: integrationResult.integration.name,\n settings: integrationResult.settings || {},\n timeout: integrationResult.timeout ?? undefined,\n });\n } else if (api.error?.status === 404) {\n setConfigured(false);\n setStatus('active');\n setConfig(EMPTY_CONFIG);\n } else {\n notify(`Unable to load return integration: ${api.error ? api.error.name : ''}`, 'error');\n }\n\n setLoading(false);\n };\n\n // The vendor's pause switch saves immediately, independent of the integration box's own\n // Cancel/Apply flow -- ops should be able to pause/resume without entering edit mode.\n const handleStatusChange = async (_target: any, newStatus: StatusType) => {\n const result: any = await api.endpoints.vendors.updateReturnIntegration(vendor.id, {status: newStatus});\n\n if (result) {\n setStatus(result.status);\n return true;\n }\n\n notify(`Unable to update status: ${api.error ? api.error.name : ''}`, 'error');\n return false;\n };\n\n const handleUpdate = (newConfig: IntegrationConfig) => setConfig(newConfig);\n\n const handleCancelAdd = () => {\n if (adding) {\n setAdding(false);\n setConfig(EMPTY_CONFIG);\n }\n // Otherwise unreachable: allowDelete={false} on the View suppresses the trash button\n // that would call this once a return integration is configured (no detach endpoint yet --\n // v1 scope gap).\n };\n\n const handleApply = async () => {\n const definition = definitions.find((d) => d.name === config.name);\n if (!definition) return;\n\n const payload = {\n integration_id: definition.id,\n settings: config.settings,\n timeout: config.timeout,\n };\n\n const result: any = await api.endpoints.vendors.updateReturnIntegration(vendor.id, payload);\n\n if (result) {\n notify('The return integration has been saved', 'success');\n setConfigured(true);\n setAdding(false);\n setEditMode(false);\n setStatus(result.status);\n setConfig({\n name: result.integration.name,\n settings: result.settings || {},\n timeout: result.timeout ?? undefined,\n });\n } else {\n notify(`Unable to save return integration: ${api.error ? api.error.name : ''}`, 'error');\n }\n };\n\n if (loading) return null;\n\n return (\n \n
Return Notifications
\n
Configure return notification webhooks.
\n\n {configured && (\n
\n Status \n \n )}\n\n {!configured && !adding && !allowEdit && (\n
No return integration is configured for this vendor. \n )}\n\n {!configured && !adding && allowEdit && (\n
setAdding(true)}>\n \n )}\n\n {(configured || adding) && (\n
\n setEditMode(true)}\n />\n \n
\n )}\n
(searchParams.get('tab') || 'details')\n const [loading, setLoading] = useState(true)\n const [saving, setSaving] = useState(false)\n const [vendor, setVendor] = useState(null)\n const {api} = useApi()\n const allowEdit = usePermission('vendors.edit')\n useChangeTimeline({\n entityTypes: ['vendor'],\n parentFilters: {},\n entity: vendor ? { id: vendor.id, name: vendor.name, type: 'vendor' } : undefined,\n });\n if (!allowEdit) return null\n\n const {\n formApi,\n formValues,\n formErrors,\n formIsValid,\n } = useFormState({\n ...DefaultVendor,\n }, VendorValidationSchema)\n\n useEffect(()=>{\n if (!vendor) {\n load()\n }\n\n }, []);\n\n const load = async() => {\n\n const result: any = await api.endpoints['vendors'].show(vendor_id)\n\n if (result) {\n setVendor(result)\n formApi.setValues({\n id: result.id,\n name: result.name,\n })\n } else {\n //@ts-ignore\n notify(`Unable to load data: ${api.error ? api.error.name : \"\"}`, 'error')\n }\n\n\n setLoading(false)\n }\n\n const handleCancel = () => {\n formApi.clearForm();\n\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n }\n\n const handleSave = () => {\n if (formApi.validate()) {\n save()\n }\n }\n\n const save = async() => {\n\n if (formIsValid) {\n setSaving(true);\n const params = {...formValues};\n\n const result = await api.endpoints.vendors.update(params)\n\n if (result) {\n notify(`The vendor has been saved`, 'success')\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n } else {\n // Could get 'name already exists' error\n if (api.error.form && api.error.form['name']) {\n formApi.setError('name', api.error.form['name']);\n notify(`Unable to save vendor: duplicate vendor name`, 'error')\n } else {\n notify(`Unable to save vendor: ${api.error ? api.error.name : \"\"}`, 'error')\n }\n }\n setSaving(false);\n\n }\n }\n\n const crumbs = useMemo(() => {\n if (vendor) {\n return [\n {label: \"Publishing\"},\n {label: \"Vendors\", to: {\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n }},\n {label: vendor.name, to: `/publishing/vendors/${vendor.id}`},\n {label: \"Edit\"},\n ]\n }\n return []\n }, [vendor, location.state])\n\n\n return (\n <>\n \n 0 && vendor.name}>\n \n \n Details\n \n \n UEIDs\n \n \n Returns\n \n \n\n \n \n \n \n
\n\n \n Cancel\n \n \n Save\n \n\n
\n
\n\n\n \n\n \n\n \n
\n\n \n\n \n\n \n
\n\n \n\n \n\n \n \n\n )\n}\n\nexport default VendorEdit\n","import React, {useState} from \"react\";\nimport {useLocation, useNavigate} from \"react-router-dom\";\nimport {\n Row,\n Col,\n Button,\n} from \"reactstrap\";\nimport PageSection from \"../../../../Layout/PageSection\";\nimport DocTitle from \"../../../../Layout/DocTitle\";\nimport {StandardAlert, notify } from \"@thedmsgroup/mastodon-ui-components\";\nimport useFormState from \"../../../../Hooks/useFormState\";\nimport Breadcrumbs from \"../../../../Layout/Breadcrumbs\";\nimport LoadingBar from \"../../../../Layout/LoadingBar\";\nimport {VendorForm, VendorValidationSchema} from \"./Form\";\nimport usePermission from \"../../../../Hooks/usePermission\";\nimport useApi from \"../../../../Hooks/useApi\";\n\n/*\n * Page for creating a vendor\n *\n * We stay on this page after vendor creation (instead of returning to the list)\n * because we present some server-generated keys that can be copied.\n *\n * Creating UEIDs can be done on the edit page\n */\n\n\nconst DefaultVendor = {\n id: 0,\n name: \"\",\n crypto_key: \"\",\n}\n\n\nconst VendorCreate = () => {\n const navigate = useNavigate()\n const location = useLocation()\n const [saving, setSaving] = useState(false)\n const [vendor, setVendor] = useState()\n\n const {api} = useApi()\n const allowEdit = usePermission('vendors.create')\n if (!allowEdit) return null\n\n\n const {\n formApi,\n formValues,\n formErrors,\n formIsValid,\n } = useFormState({\n ...DefaultVendor,\n }, VendorValidationSchema)\n\n\n const handleCancel = () => {\n formApi.clearForm();\n\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n }\n\n const handleSave = () => {\n if (formApi.validate()) {\n save()\n }\n }\n\n const save = async() => {\n\n setSaving(true);\n const params = {...formValues}\n\n if (!params.parent_id) {\n params.parent_id = null\n }\n\n params.create_auth_token = true\n const result = await api.endpoints.vendors.create(params)\n\n if (result) {\n setVendor(result)\n notify(`The vendor has been created`, 'success')\n\n } else {\n // Could get 'name already exists' error\n if (api.error.form && api.error.form['name']) {\n formApi.setError('name', api.error.form['name']);\n notify(`Unable to save vendor: duplicate vendor name`, 'error')\n } else {\n notify(`Unable to save vendor: ${api.error ? api.error.name : \"\"}`, 'error')\n }\n\n }\n setSaving(false)\n }\n\n const returnToList = () => {\n formApi.clearForm()\n\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n }\n\n return (\n <>\n 0 && vendor.name}>\n \n The vendor was created with the keys below.
\n \n Return to list\n \n \n )}\n\n \n \n
\n\n \n Cancel\n \n \n Save\n \n\n
\n
\n \n \n )\n}\n\nexport default VendorCreate\n","import React, {useEffect, useState, useMemo} from \"react\";\nimport {useParams, useLocation, useNavigate, Link} from \"react-router-dom\";\nimport {\n Row,\n Col,\n FormGroup,\n Label,\n Button,\n} from \"reactstrap\";\nimport PageSection from \"../../../../Layout/PageSection\";\nimport DocTitle from \"../../../../Layout/DocTitle\";\nimport {notify, CopyButton, RelativeTime} from \"@thedmsgroup/mastodon-ui-components\";\nimport Breadcrumbs from \"../../../../Layout/Breadcrumbs\";\nimport LoaderDots from \"../../../../Layout/LoaderDots\";\nimport usePermission from \"../../../../Hooks/usePermission\";\nimport useApi from \"../../../../Hooks/useApi\";\nimport {useChangeTimeline} from '../../../../Hooks/useChangeTimeline';\nimport {UeidTable} from \"./UeidTable\";\n\n/*\n * Display of vendor details\n */\nconst VendorShow = () => {\n const navigate = useNavigate()\n const location = useLocation()\n const {vendor_id} = useParams()\n const [loading, setLoading] = useState(true)\n const [vendor, setVendor] = useState(null)\n const {api} = useApi()\n const allowView = usePermission('vendors.view')\n const allowEdit = usePermission('vendors.edit')\n useChangeTimeline({\n entityTypes: ['vendor'],\n parentFilters: {},\n entity: vendor ? { id: vendor.id, name: vendor.name, type: 'vendor' } : undefined,\n });\n if (!allowView) return null\n\n\n useEffect(()=>{\n if (!vendor) {\n load()\n }\n\n }, []);\n\n const load = async() => {\n\n const result: any = await api.endpoints['vendors'].show(vendor_id)\n\n if (result) {\n setVendor(result)\n\n } else {\n //@ts-ignore\n notify(`Unable to load data: ${api.error ? api.error.name : \"\"}`, 'error')\n }\n\n\n setLoading(false)\n }\n\n const handleCancel = () => {\n\n\n navigate({\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n },\n {replace:false}\n )\n }\n\n\n\n const crumbs = useMemo(() => {\n if (vendor) {\n return [\n {label: \"Publishing\"},\n {label: \"Vendors\", to: {\n pathname: '/publishing/vendors',\n search:location.state?.search ?? '',\n }},\n {label: vendor.name},\n ]\n }\n return []\n }, [vendor, location.state])\n\n const authToken = vendor?.auth_tokens?.[0]?.token || ''\n\n return (\n <>\n \n \n Edit\n \n ) : null}\n >\n \n \n Name \n \n {vendor.name ?? ''}\n
\n \n\n \n\n
\n Created \n
\n \n
\n Modified \n
\n \n
\n API Key \n \n\n {authToken ? (\n <>\n {authToken}{' '}\n none \n )}\n
\n \n\n \n Crypto Key \n \n {vendor?.crypto_key ? (\n <>\n {vendor.crypto_key}{' '}\n none \n )}\n
\n \n\n\n \n
\n )}\n\n\n \n \n UEIDs \n \n {vendor.ueids.length > 0 ? (\n None \n )}\n
\n \n\n \n )}\n\n \n
\n\n \n \n\n )\n}\n\nexport default VendorShow\n","import React from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport ChannelList from './Channels/List';\nimport ChannelShow from './Channels/Show';\nimport ChannelEdit from './Channels/Edit';\nimport ChannelCreate from './Channels/Create';\nimport SourceList from './Sources/List';\nimport SourceCreate from './Sources/Create';\nimport SourceEdit from './Sources/Edit';\nimport SourceShow from './Sources/Show';\nimport VendorsList from './Vendors/List';\nimport PhoneNumberList from './PhoneNumbers/List';\nimport SourceTokenList from \"./SourceToken/List\";\nimport SourceTokenEdit from \"./SourceToken/Edit\";\nimport SourceTokenCreate from \"./SourceToken/Create\";\nimport SourceTokenShow from \"./SourceToken/Show\";\nimport {SaleGroupList} from \"./SaleGroup\";\nimport {SaleGroupShow} from \"./SaleGroup/Show\";\nimport {SaleGroupForm} from \"./SaleGroup/Edit\";\nimport {SalesFlowList} from \"./SalesFlows\";\nimport {SalesFlowShow} from \"./SalesFlows/Show\";\nimport {SalesFlowForm} from \"./SalesFlows/Edit\";\nimport VendorEdit from './Vendors/Vendor/Edit';\nimport VendorCreate from './Vendors/Vendor/Create'\nimport VendorShow from './Vendors/Vendor/Show'\nimport ProtectedRoute from '../../Components/ProtectedRoute';\nimport './styles.scss';\nimport NotFoundPage from '../../Layout/NotFoundPage'\n\n/*\n * Entry point to all publishing routes\n */\nconst PublisherManager = () => (\n\n \n\n \n\n);\n\nPublisherManager.displayName = 'PublisherManager';\nexport default PublisherManager;\n","import React from 'react';\n\nconst FilterLabelMap = {\n channels: 'CHANNEL',\n verticals: 'VERTICAL',\n sources: 'SOURCE',\n states: 'STATE',\n products: 'PRODUCT',\n devices: 'DEVICE',\n accounts: 'ACCOUNT',\n vendors: 'VENDOR',\n tags: 'TAG',\n currentlyInsured: 'INSURED',\n};\n\nconst FilterSummary = ({ summaryData }) => {\n // TBD:Limit length of each filter. Limit total length.\n if (!summaryData || Object.keys(summaryData).length === 0) {\n return (No filters applied. Click to add filters. );\n }\n\n return (\n \n {Object.entries(summaryData).map(([filterName, val], i) => {\n if (Array.isArray(val) && val.length > 0) {\n return (\n \n \n {FilterLabelMap[filterName]}\n :\n \n {val.join(',')}\n \n );\n }\n }).reduce((prev, curr) => [prev, ', ', curr])}\n \n );\n};\n\nexport default FilterSummary;\n","import React, { useRef } from 'react';\nimport {\n Button, FormGroup, Input, Label,\n} from 'reactstrap';\nimport PropTypes from 'prop-types';\n\n/*\n * Warning Prompt for long query times in Aggregate Reports\n */\nconst LoadTimeWarning = ({ onDismiss }) => {\n const chkRef = useRef();\n\n const handleCancel = () => {\n onDismiss(false, chkRef.current.checked);\n };\n\n const handleLoad = () => {\n onDismiss(true, chkRef.current.checked);\n };\n\n return (\n \n\n
\n
Longer date ranges will take a while to load. Continue?
\n
\n Yes, load it \n Cancel \n
\n
\n \n \n \n
\n\n
//absolute overlay\n
\n\n
\n {showLoadWarning && \n
\n
\n
\n\n {/* Use of inNavbar={true} disables popper and allows application of '.dropDown' animation class to menu */}\n
\n {/* \"nav\" makes toggle rather than */}\n \n \n Applied Filters\n {choicesLoading && \n \n \n \n\n \n\n \n\n \n \n\n
\n \n Group Results \n \n By: \n {' '}\n {summaries.groupBySummary ? summaries.groupBySummary.join(',') : No grouping }\n \n \n \n\n \n\n
\n\n \n \n\n\n
\n \n Compare \n \n From: \n {' '}\n {summaries.compareSummary ? summaries.compareSummary.join(',') : none }\n \n \n \n\n \n
\n\n \n \n\n
\n
\n\n
\n\n
\n );\n};\n\nReportsFilters.propTypes = {\n userTimezone: PropTypes.string,\n settings: PropTypes.object.isRequired,\n defaultSettings: PropTypes.object, // need this still?\n onChange: PropTypes.func.isRequired, // Called when user commits filters (clicks View Report)\n onClear: PropTypes.func.isRequired,\n reportType: PropTypes.string.isRequired, // 'advertiser' or 'vendor'\n reportLoading: PropTypes.bool.isRequired,\n};\n\nReportsFilters.defaultProps = {\n settings: {},\n reportLoading: false,\n defaultSettings: {},\n};\n\nexport default ReportsFilters;\n","// Override column labels from API response\nexport const COLUMN_LABEL_OVERRIDES = {\n lead_accept_rate: 'Post Accept Rate',\n total_sales: 'Sales',\n};\n\nexport const HEADER_TIPS = {\n average_diff_top: 'Difference between this average bid and the top average bid',\n average_diff_next_bid_up: 'Difference between this average bid and the next average bid up',\n average_diff_next_bid_down: 'Difference between this average bid and the next average bid down',\n bid_click_through_rate: 'Click through rate based on bids',\n impression_click_through_rate: 'Impression click through rate',\n cost: 'Total advertiser cost across all products (or as filtered)',\n total_sales: 'Advertiser sale count across all products (or as filtered)',\n cost_per_call: 'Cost per qualified call',\n cost_per_call_transfer: 'Calls cost / Call count',\n lead_accept_rate: 'Sales / Sale Attempts',\n lead_posts: 'Lead sale attempts',\n accepted_leads:'Lead sale count'\n};\n","import React from 'react';\nimport {HelpPopper} from '@thedmsgroup/mastodon-ui-components';\nimport { HEADER_TIPS } from './constants';\n\n/*\n * Wrapper around column header content that will add a tooltip for some columns.\n * (Later, React-table will wrap this with Sorting functionality)\n */\nconst ReportHeader = (props) => {\n\n return (\n \n
{props.label}
\n {HEADER_TIPS[props.col] &&
{HEADER_TIPS[props.col]}
}\n
\n \n Created by potrace 1.16, written by Peter Selinger 2001-2019\n \n \n \n \n);\n\nDelta.defaultProps = {\n viewBox: '0 0 97 97',\n width: 20,\n height: 20,\n fill: '#000000',\n};\n// const Delta = (props) => {\n// return (\n// \n// 0 }])}>{dir === 0 ? '-' : value}
);\n};\n\nexport const DeltaHeader = ({ value }) => {\n if (value) value = value.replace('Delta', '').trim();\n return (\n \n \n );\n};\n\nfunction defineColumns(columns, data, totals, pivot, pivotIndex, displayResolver = {}) {\n const columnDefinitions = [];\n if (data.length > 0) {\n const keys = Object.keys(data[0]);\n let isFirstKey = true;\n\n for (const key of keys) {\n if (pivot && pivotIndex === 0 && key.indexOf('_delta') > 0) {\n // deltas for 1st pivot are all null, don't show columns\n continue;\n }\n\n const colDef = {\n dataField: key, // accessor\n accessor: pivot ? `${pivot}.${key}` : key,\n id: key,\n text: key, // header\n defaultCanSort: true,\n sortType: 'number',\n align: 'right',\n headerAlign: 'right',\n footerAlign: 'right',\n footer: '',\n minWidth: 130,\n show: true,\n className: '', // for cells\n headerClassName: '',\n };\n\n if (pivot && isFirstKey) {\n colDef.className = 'first-pivot-col'; // cell class\n colDef.headerClassName = 'first-pivot-col';\n }\n\n const cellClasses = [key];\n\n if (isFirstKey) isFirstKey = false;\n\n if (pivot) {\n // TODO: might use this for auto-scrolling to next/prev pivot\n colDef.id += `-${pivot}`;\n }\n\n const isDeltaField = key.indexOf('_delta') > 0;\n\n if (isDeltaField) {\n // columnDefinition.className = 'delta'; //cell class\n cellClasses.push('delta');\n // columnDefinition.Header = (row)=>;\n colDef.headerClassName = 'delta';\n }\n\n if (columns[key]) {\n if (columns[key].hidden) {\n colDef.show = false;\n }\n if (columns[key].label) {\n const label = COLUMN_LABEL_OVERRIDES[key] || columns[key].label;\n colDef.Header = isDeltaField ? | ;\n }\n } else if (DateColumns.includes(key)) {\n // Dates from Looker are already adjusted from UTC to account timezone, no need for timezone adjustment\n colDef.Cell = ({ value }) => \n {prefix}\n {value}\n
\n );\n};\n\n// Default metrics to show when user hasn't selected any\nconst DEFAULT_SELECTED_METRICS = ['bids', 'cost', 'calls', 'qualified_calls', 'average_position'];\n\n// Metric categories for organization\nexport const METRIC_CATEGORIES = {\n performance: { label: 'Performance', metrics: ['matches', 'bids', 'average_position'] },\n cost: { label: 'Cost', metrics: ['cost', 'lead_cost', 'calls_cost', 'clicks_cost', 'cost_per_call', 'cost_per_qualified_click', 'cost_per_call_transfer'] },\n calls: { label: 'Calls', metrics: ['calls', 'qualified_calls', 'qualified_calls_rate', 'call_transfer_rate'] },\n clicks: { label: 'Clicks', metrics: ['impressions', 'qualified_clicks', 'bid_click_through_rate'] },\n leads: { label: 'Leads', metrics: ['accepted_leads'] },\n};\n\n// Format groupBy field name to human-readable label\nexport function formatGroupByLabel(groupBy) {\n if (!groupBy) return 'Group';\n\n // If array, use first value\n const groupValue = Array.isArray(groupBy) ? groupBy[0] : groupBy;\n\n // Handle undefined or empty value\n if (!groupValue) return 'Group';\n\n // Map common field names to readable labels\n const labelMap = {\n account_name: 'Account',\n account: 'Account',\n product: 'Product',\n device: 'Device',\n vertical: 'Vertical',\n channel: 'Channel',\n channel_name: 'Channel',\n source: 'Source',\n source_name: 'Source',\n goal_name: 'Goal',\n buyer_name: 'Buyer',\n ad_name: 'Ad',\n };\n\n // Return mapped label or capitalize the field name\n if (labelMap[groupValue]) {\n return labelMap[groupValue];\n }\n\n // Fallback: capitalize and replace underscores with spaces\n return groupValue\n .replace(/_/g, ' ')\n .split(' ')\n .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ');\n}\n\n/**\n * Build nested hierarchy for multiple groupBy facets in pivot mode (time comparison)\n * Transforms pivot data with time slots into nested structure with subRows at each level\n *\n * @param {Array} pivotData - Array of data rows, each containing time slot objects\n * @param {Array} timeSlots - Array of time slot keys (e.g., [\"2025-10-20\", \"2025-10-27\"])\n * @param {Array} groupByFields - Array of field names to group by (e.g., ['product', 'account_name'])\n * @param {Array} metricsToShow - Array of metric keys to display\n * @param {Object} columns - Column definitions for labels\n * @param {boolean} reverseOrder - Whether to reverse the groupBy order\n * @returns {Array} Nested data structure with subRows\n */\nfunction buildNestedHierarchy(pivotData, timeSlots, groupByFields, metricsToShow, columns, reverseOrder = false) {\n if (!pivotData || pivotData.length === 0 || !groupByFields || groupByFields.length === 0) {\n return [];\n }\n\n // Reverse group order if requested (for view mode toggle)\n const orderedGroupByFields = reverseOrder ? [...groupByFields].reverse() : groupByFields;\n\n // Extract groupBy values from each pivot data row\n // Each pivot row has time slots, we need to get groupBy values from first time slot\n const flattenedData = pivotData.map((dataRow, originalIndex) => {\n const firstSlot = timeSlots[0];\n const groupByValues = {};\n\n // Extract all groupBy field values\n orderedGroupByFields.forEach(field => {\n groupByValues[field] = dataRow[firstSlot][field];\n });\n\n return {\n ...groupByValues,\n _originalIndex: originalIndex, // Keep reference to original pivot data row\n _pivotRow: dataRow, // Store the full pivot data for later\n };\n });\n\n /**\n * Recursive function to build hierarchy level by level\n * @param {Array} dataSubset - Subset of flattened data to process at this level\n * @param {number} levelIndex - Current depth level (0 = top level)\n * @param {string} parentId - Parent row ID for generating unique IDs\n */\n function buildLevel(dataSubset, levelIndex, parentId = '') {\n const currentField = orderedGroupByFields[levelIndex];\n const isLastGroupLevel = levelIndex === orderedGroupByFields.length - 1;\n\n // Group data by current field value\n const grouped = {};\n dataSubset.forEach(row => {\n const groupValue = row[currentField];\n if (!grouped[groupValue]) {\n grouped[groupValue] = [];\n }\n grouped[groupValue].push(row);\n });\n\n // Build rows for this level\n const rows = [];\n Object.entries(grouped).forEach(([groupValue, groupRows], groupIndex) => {\n const rowId = parentId ? `${parentId}_sub_${groupIndex}` : `group_${groupIndex}`;\n\n const groupHeaderRow = {\n row_id: rowId,\n rowType: 'group-header',\n groupValue,\n label: groupValue,\n depth: levelIndex,\n subRows: [],\n };\n\n // Add empty time slot fields so react-table renders the row\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n groupHeaderRow[`_${safeSlot}`] = '';\n groupHeaderRow[`_${safeSlot}_delta`] = '';\n });\n\n if (isLastGroupLevel) {\n // Last groupBy level - add metric rows as children\n // At this level, groupRows should contain items that all have the same groupBy combo\n // We need to get the pivot data for these rows\n metricsToShow.forEach((metricKey, metricIndex) => {\n const metricRow = {\n row_id: `${rowId}_metric_${metricIndex}`,\n rowType: 'metric-value',\n metricKey,\n groupValue,\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n depth: levelIndex + 1,\n };\n\n // Add values for each time slot from the pivot data\n // All rows in groupRows should reference the same pivot data row\n const pivotRow = groupRows[0]._pivotRow;\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n metricRow[`_${safeSlot}`] = pivotRow[slot][metricKey];\n metricRow[`_${safeSlot}_delta`] = pivotRow[slot][`${metricKey}_delta`];\n });\n\n groupHeaderRow.subRows.push(metricRow);\n });\n } else {\n // Not last level - recurse to next level\n groupHeaderRow.subRows = buildLevel(groupRows, levelIndex + 1, rowId);\n }\n\n rows.push(groupHeaderRow);\n });\n\n return rows;\n }\n\n return buildLevel(flattenedData, 0);\n}\n\n// Parse response for transposed aggregate reports (comparison view)\n// Transposes the table so metrics are rows and time periods are columns\nexport function extractColumnsAndDataTransposed(reportResponse, groupOrder = 'account-first', selectedMetrics = null, groupBy = null) {\n let {\n columns, data, totals, pivot,\n } = reportResponse;\n\n // If no pivot, fall back to standard extraction\n if (!pivot) {\n return extractColumnsAndData(reportResponse);\n }\n\n if (!data.length) {\n return { data: [], columns: [], columnChoices: [] };\n }\n\n // Get time slot keys (e.g., [\"2025-10-20\", \"2025-10-27\"])\n const timeSlots = Object.keys(data[0]);\n\n // Get the first time slot to analyze structure\n const firstSlotData = data[0][timeSlots[0]];\n\n // Identify group fields from actual data structure\n // The groupBy parameter is used as a hint for ordering/count, but we detect actual field names from data\n // This is important because the groupBy parameter might be \"account\" but the field name might be \"account_name\"\n\n // First, detect what grouping fields actually exist in the data\n const detectedGroupFields = Object.keys(firstSlotData).filter(key =>\n !key.endsWith('_delta') &&\n !columns[key]?.label?.includes('Delta') &&\n typeof firstSlotData[key] === 'string' &&\n isNaN(firstSlotData[key].replace(/[$,%]/g, ''))\n );\n\n // Determine which fields to use\n let groupFields = [];\n\n if (groupBy && Array.isArray(groupBy) && groupBy.length > 0) {\n // groupBy provided as array - map to actual field names in data\n // For each groupBy value, find matching field in detected fields\n groupFields = groupBy.map(gbField => {\n // Try exact match first\n if (detectedGroupFields.includes(gbField)) {\n return gbField;\n }\n // Try common variations (account -> account_name, etc.)\n const variations = [\n gbField,\n `${gbField}_name`,\n gbField.replace('_name', ''),\n ];\n const match = detectedGroupFields.find(df => variations.includes(df));\n return match || gbField; // Fallback to original if no match found\n }).filter(Boolean);\n } else if (groupBy && typeof groupBy === 'string') {\n // groupBy provided as string - find matching field in data\n // Try exact match first\n if (detectedGroupFields.includes(groupBy)) {\n groupFields = [groupBy];\n } else {\n // Try common variations\n const variations = [\n groupBy,\n `${groupBy}_name`,\n groupBy.replace('_name', ''),\n ];\n const match = detectedGroupFields.find(df => variations.includes(df));\n groupFields = match ? [match] : (detectedGroupFields.length > 0 ? [detectedGroupFields[0]] : []);\n }\n } else {\n // No groupBy parameter - use first detected field\n groupFields = detectedGroupFields.length > 0 ? [detectedGroupFields[0]] : [];\n }\n\n // Backward compatibility: single groupField\n const groupField = groupFields.length > 0 ? groupFields[0] : null;\n const hasMultipleGroupBy = groupFields.length > 1;\n\n // Get all metric keys (excluding ALL group fields and delta fields)\n const allMetricKeys = Object.keys(firstSlotData).filter(key =>\n !groupFields.includes(key) && !key.endsWith('_delta')\n );\n\n // Determine which metrics to show\n const metricsToShow = selectedMetrics && selectedMetrics.length > 0\n ? allMetricKeys.filter(m => selectedMetrics.includes(m))\n : allMetricKeys;\n\n // Build column choices for metric selector\n const columnChoices = allMetricKeys.map(key => ({\n value: key,\n label: COLUMN_LABEL_OVERRIDES[key] || columns[key]?.label || key,\n }));\n\n // Transform data based on view mode\n const transformedData = [];\n\n if (!groupField) {\n // No grouping - just show metrics as rows with time slots as columns\n metricsToShow.forEach((metricKey, index) => {\n const row = {\n row_id: index,\n rowType: 'metric',\n metricKey,\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n };\n\n // Add values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n row[`_${safeSlot}`] = data[0][slot][metricKey];\n row[`_${safeSlot}_delta`] = data[0][slot][`${metricKey}_delta`];\n });\n\n transformedData.push(row);\n });\n // No totals needed - totals would be the same as the single metric row\n } else if (hasMultipleGroupBy) {\n // Multiple groupBy facets - use nested hierarchy\n // ViewMode controls group order: 'account-first' = normal order, 'metric-first' = reversed order\n const reverseGroupOrder = groupOrder === 'metric-first';\n const nestedData = buildNestedHierarchy(data, timeSlots, groupFields, metricsToShow, columns, reverseGroupOrder);\n transformedData.push(...nestedData);\n\n // Add totals row with simple nested structure (TOTALS → Metrics)\n if (totals) {\n const totalsHeaderRow = {\n row_id: 'totals_group',\n rowType: 'totals-header',\n groupValue: 'Total',\n label: 'TOTALS',\n depth: 0,\n subRows: [],\n };\n\n // Add empty time slot fields\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n totalsHeaderRow[`_${safeSlot}`] = '';\n totalsHeaderRow[`_${safeSlot}_delta`] = '';\n });\n\n // Add metric rows as children\n metricsToShow.forEach((metricKey, metricIndex) => {\n const row = {\n row_id: `totals_metric_${metricIndex}`,\n rowType: 'totals-value',\n metricKey,\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n depth: 1,\n };\n\n // Add values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n row[`_${safeSlot}`] = totals[slot]?.[metricKey] || '-';\n row[`_${safeSlot}_delta`] = totals[slot]?.[`${metricKey}_delta`] || '';\n });\n\n totalsHeaderRow.subRows.push(row);\n });\n\n transformedData.push(totalsHeaderRow);\n }\n } else {\n // Single groupBy - create nested rows with existing logic\n data.forEach((groupRow, groupIndex) => {\n const groupValue = groupRow[timeSlots[0]][groupField];\n\n if (groupOrder === 'account-first') {\n // Add group header row with child rows nested\n const groupHeaderRow = {\n row_id: `group_${groupIndex}`,\n rowType: 'group-header',\n groupValue,\n label: groupValue,\n subRows: [], // Children will be added here\n };\n\n // Add empty time slot fields so react-table renders the row\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n groupHeaderRow[`_${safeSlot}`] = '';\n groupHeaderRow[`_${safeSlot}_delta`] = '';\n });\n\n // Add metric rows as children of this group\n metricsToShow.forEach((metricKey, metricIndex) => {\n const row = {\n row_id: `group_${groupIndex}_metric_${metricIndex}`,\n rowType: 'metric-value',\n metricKey,\n groupValue,\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n };\n\n // Add values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n row[`_${safeSlot}`] = groupRow[slot][metricKey];\n row[`_${safeSlot}_delta`] = groupRow[slot][`${metricKey}_delta`];\n });\n\n groupHeaderRow.subRows.push(row);\n });\n\n transformedData.push(groupHeaderRow);\n } else {\n // metric-first mode handled below\n }\n });\n\n // Add totals row for account-first mode\n if (groupOrder === 'account-first' && totals) {\n const totalsHeaderRow = {\n row_id: 'totals_group',\n rowType: 'totals-header',\n groupValue: 'Total',\n label: 'Total',\n subRows: [],\n };\n\n // Add empty time slot fields\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n totalsHeaderRow[`_${safeSlot}`] = '';\n totalsHeaderRow[`_${safeSlot}_delta`] = '';\n });\n\n // Add metric rows for totals\n metricsToShow.forEach((metricKey, metricIndex) => {\n const row = {\n row_id: `totals_metric_${metricIndex}`,\n rowType: 'totals-value',\n metricKey,\n groupValue: 'Total',\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n };\n\n // Add totals values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n row[`_${safeSlot}`] = totals[slot]?.[metricKey] || '-';\n row[`_${safeSlot}_delta`] = totals[slot]?.[`${metricKey}_delta`] || '';\n });\n\n totalsHeaderRow.subRows.push(row);\n });\n\n transformedData.push(totalsHeaderRow);\n }\n\n // Handle metric-first mode\n if (groupOrder === 'metric-first') {\n const metricGroups = {};\n\n // Group data by metric first\n metricsToShow.forEach((metricKey, metricIndex) => {\n metricGroups[metricKey] = [];\n\n data.forEach((groupRow, groupIndex) => {\n const groupValue = groupRow[timeSlots[0]][groupField];\n const row = {\n row_id: `metric_${metricIndex}_group_${groupIndex}`,\n rowType: 'group-value',\n metricKey,\n groupValue,\n label: groupValue,\n };\n\n // Add values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n row[`_${safeSlot}`] = groupRow[slot][metricKey];\n row[`_${safeSlot}_delta`] = groupRow[slot][`${metricKey}_delta`];\n });\n\n metricGroups[metricKey].push(row);\n });\n });\n\n // Add to transformedData in metric-first order (using metricsToShow to preserve order)\n metricsToShow.forEach((metricKey, metricIndex) => {\n // Add metric header row with child rows nested\n const metricHeaderRow = {\n row_id: `metric_header_${metricIndex}`,\n rowType: 'metric-header',\n metricKey,\n label: COLUMN_LABEL_OVERRIDES[metricKey] || columns[metricKey]?.label || metricKey,\n subRows: [], // Children will be added here\n };\n\n // Add empty time slot fields so react-table renders the row\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n metricHeaderRow[`_${safeSlot}`] = '';\n metricHeaderRow[`_${safeSlot}_delta`] = '';\n });\n\n // Add group rows as children of this metric\n metricHeaderRow.subRows = metricGroups[metricKey];\n\n // Add totals row at the bottom of this metric group\n if (totals) {\n const totalsRow = {\n row_id: `metric_${metricIndex}_totals`,\n rowType: 'totals-value',\n metricKey,\n groupValue: 'Total',\n label: 'Total',\n };\n\n // Add totals values for each time slot\n timeSlots.forEach(slot => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n totalsRow[`_${safeSlot}`] = totals[slot]?.[metricKey] || '-';\n totalsRow[`_${safeSlot}_delta`] = totals[slot]?.[`${metricKey}_delta`] || '';\n });\n\n metricHeaderRow.subRows.push(totalsRow);\n }\n\n transformedData.push(metricHeaderRow);\n });\n }\n }\n\n // Build column definitions\n const columnDefinitions = [];\n\n // Get human-readable group label\n const groupLabel = formatGroupByLabel(groupBy);\n\n // Custom sort function for label column in transposed view\n // Only sorts parent rows, keeps totals at bottom, preserves subRows\n const transposedLabelSort = (rowA, rowB, columnId, desc) => {\n const aRowType = rowA.original.rowType;\n const bRowType = rowB.original.rowType;\n const aDepth = rowA.depth !== undefined ? rowA.depth : 0;\n const bDepth = rowB.depth !== undefined ? rowB.depth : 0;\n\n // Handle totals rows first (they can be at any depth)\n const aIsTotals = aRowType === 'totals-header' || aRowType === 'totals-value';\n const bIsTotals = bRowType === 'totals-header' || bRowType === 'totals-value';\n\n // If both are at the same depth\n if (aDepth === bDepth) {\n // Keep totals at the bottom of their level\n // Note: React-table inverts return values when desc=true, so we must invert our logic\n // to counteract that inversion and keep totals at the bottom in both directions\n if (aIsTotals && !bIsTotals) return desc ? -1 : 1;\n if (!aIsTotals && bIsTotals) return desc ? 1 : -1;\n if (aIsTotals && bIsTotals) return 0; // Both totals, maintain order\n\n // For parent rows (depth 0), perform normal sorting\n if (aDepth === 0) {\n const aValue = rowA.values[columnId];\n const bValue = rowB.values[columnId];\n\n // Perform alphanumeric comparison\n if (typeof aValue === 'string' && typeof bValue === 'string') {\n return aValue.localeCompare(bValue);\n }\n\n // Fallback to regular comparison\n if (aValue < bValue) return -1;\n if (aValue > bValue) return 1;\n return 0;\n }\n\n // For child rows (depth > 0), maintain original order\n return 0;\n }\n\n // Different depths - shouldn't happen in normal sorting, maintain order\n return 0;\n };\n\n // First column: Group/Metric label with expand/collapse\n // Generate header label based on number of groupBy fields\n let headerLabel = 'Metric';\n if (hasMultipleGroupBy) {\n // Multiple groupBy: show hierarchy (e.g., \"Product / Account / Metric\")\n const groupLabels = groupFields.map(field => formatGroupByLabel(field));\n if (groupOrder === 'metric-first') {\n // Reversed order\n headerLabel = [...groupLabels].reverse().join(' / ') + ' / Metric';\n } else {\n // Normal order\n headerLabel = groupLabels.join(' / ') + ' / Metric';\n }\n } else if (groupField) {\n // Single groupBy: use existing logic\n headerLabel = groupOrder === 'account-first' ? `${groupLabel} / Metric` : `Metric / ${groupLabel}`;\n }\n\n columnDefinitions.push({\n Header: headerLabel,\n accessor: 'label',\n id: 'label',\n text: 'label',\n align: 'left',\n headerAlign: 'left',\n minWidth: 200,\n width: 200,\n className: 'text transposed-label-col',\n headerClassName: 'text transposed-label-col',\n sortType: transposedLabelSort,\n Cell: ({ row }) => {\n const isHeader = row.original.rowType === 'group-header' || row.original.rowType === 'metric-header' || row.original.rowType === 'totals-header';\n const isTotals = row.original.rowType === 'totals-header' || row.original.rowType === 'totals-value';\n const depth = row.original.depth !== undefined ? row.original.depth : row.depth || 0;\n\n if (isHeader && row.canExpand) {\n // Header row with expand/collapse icon\n return (\n \n \n {row.isExpanded ? '▼' : '▶'}\n \n {row.original.label}\n \n );\n }\n\n // Determine the appropriate CSS class\n let className = 'transposed-metric-label';\n if (isHeader) {\n className = 'transposed-group-label';\n }\n if (isTotals) {\n className += ' totals';\n }\n // Add depth class for styling\n className += ` depth-${depth}`;\n\n return (\n \n {row.original.label}\n
\n );\n },\n });\n\n // Time slot columns\n timeSlots.forEach((slot, index) => {\n const safeSlot = slot.replace(/[^a-zA-Z0-9]/g, '_');\n const slotColumns = [];\n\n // Value column (first column of each day group)\n slotColumns.push({\n Header: '',\n accessor: `_${safeSlot}`,\n id: `${safeSlot}`,\n align: 'right',\n headerAlign: 'right',\n minWidth: 130,\n className: 'numeric day-start',\n headerClassName: 'numeric day-start',\n // Disable sorting in account-first mode for metric value rows\n // (sorting different metrics like \"Matches: 300, Bids: 100\" doesn't make sense)\n disableSortBy: groupOrder === 'account-first',\n Cell: ({ row, value }) => {\n if (row.original.rowType === 'group-header' || row.original.rowType === 'metric-header' || row.original.rowType === 'totals-header') {\n return ;\n }\n // Style totals values with bold\n if (row.original.rowType === 'totals-value') {\n return {value || '-'} ;\n }\n return value || '-';\n },\n });\n\n // Delta column (if not first time slot)\n if (index > 0) {\n slotColumns.push({\n Header: ;\n }\n // Style totals delta values with bold\n if (row.original.rowType === 'totals-value') {\n return \n \n \n View: {groupOrderLabel}\n \n \n \n handleGroupOrderChange('account-first')}\n >\n handleGroupOrderChange('metric-first')}\n >\n \n \n );\n};\n\nexport default ViewControls;\n","import React from 'react';\nimport {\n UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\n\n// Type definitions\ntype ComparisonView = 'flat' | 'nested';\n\ntype ComparisonViewControlsProps = {\n comparisonView: ComparisonView;\n onComparisonViewChange: (view: ComparisonView) => void;\n};\n\nconst ComparisonViewControls = ({\n comparisonView,\n onComparisonViewChange,\n}: ComparisonViewControlsProps) => {\n const handleComparisonViewChange = (view: ComparisonView) => {\n onComparisonViewChange(view);\n };\n\n const viewLabel = comparisonView === 'flat' ? 'Flat' : 'Nested';\n\n return (\n \n \n \n Layout: {viewLabel}\n \n \n \n handleComparisonViewChange('flat')}\n >\n handleComparisonViewChange('nested')}\n >\n \n \n );\n};\n\nexport default ComparisonViewControls;\n","// A note about cost metrics\nexport const METRIC_CATEGORIES = {\n general: {\n label: 'General',\n metrics: ['matches', 'average_position', 'bids', 'total_sales', 'cost', 'cost_per_sale', 'lead_posts', 'accepted_leads', 'lead_accept_rate', 'lead_cost'],\n },\n calls: {\n label: 'Calls',\n metrics: ['calls', 'qualified_calls', 'cost_per_call', 'calls_cost', 'qualified_calls_rate', 'call_transfer_rate', 'cost_per_call_transfer'],\n },\n clicks: {\n label: 'Clicks',\n metrics: ['impressions', 'qualified_clicks', 'clicks_cost', 'bid_click_through_rate', 'cost_per_qualified_click', 'impression_click_through_rate'],\n },\n bidding: {\n label: 'Bidding',\n metrics: ['average_diff_next_bid_down', 'average_diff_next_bid_up', 'average_diff_top'],\n },\n goals: {\n label: 'Goals',\n // Category is hidden until the API returns at least one of these keys in its columns response\n metrics: ['conversions', 'conversion_rate', 'cost_per_conversion', 'goal_value'],\n },\n};\n\n/**\n * Get default metrics (general category)\n * @param {Array} columnChoices - Available column choices from the report\n * @returns {Array} Array of metric values that are available and in the general category\n */\nexport const getDefaultMetrics = (columnChoices = []) => {\n const generalMetrics = METRIC_CATEGORIES.general.metrics;\n return columnChoices\n .filter(choice => generalMetrics.includes(choice.value))\n .map(choice => choice.value);\n};\n\n/**\n * Get available metrics for a category from the report's available columns\n * @param {string} categoryKey - Category key (general, calls, clicks, bidding, goals)\n * @param {Array} availableColumns - Column choices from report\n * @returns {Array} Metric values available in this category\n */\nexport const getMetricsForCategory = (categoryKey, availableColumns = []) => {\n const category = METRIC_CATEGORIES[categoryKey];\n if (!category) return [];\n\n return availableColumns\n .filter(choice => category.metrics.includes(choice.value))\n .map(choice => choice.value);\n};\n","import React from 'react';\nimport {\n UncontrolledDropdown, DropdownToggle, DropdownMenu, FormGroup, Label, Input,\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\n\n// Type definitions\ntype AvailableItem = {\n value: string;\n label: string;\n};\n\ntype Category = {\n label: string;\n metrics: string[];\n};\n\ntype CategorizedMetricSelectorProps = {\n label: string;\n icon: IconProp;\n selectedItems: string[] | null | undefined;\n availableItems: AvailableItem[];\n categories: Record;\n onChange: (items: string[] | null) => void;\n className?: string;\n};\n\ntype ItemWithAvailability = {\n value: string;\n label: string;\n isAvailable: boolean;\n};\n\n/**\n * Categorized metric/column selector with checkboxes organized in a grid\n * Used for both metrics selector (pivot mode) and columns selector (non-pivot mode)\n */\nconst CategorizedMetricSelector = ({\n label,\n icon,\n selectedItems,\n availableItems,\n categories,\n onChange,\n className = '',\n}: CategorizedMetricSelectorProps) => {\n // null = show all items, [] = show none selected yet, ['item'] = specific items selected\n const showAllItems = selectedItems === null || selectedItems === undefined;\n\n const handleShowAllChange = (e: React.ChangeEvent) => {\n if (e.target.checked) {\n // Show all items\n onChange(null);\n } else {\n // Show grid with empty selection (user can then select what they want)\n onChange([]);\n }\n };\n\n const handleItemToggle = (itemValue: string, isAvailable: boolean) => {\n if (showAllItems || !isAvailable) return;\n\n const currentItems = selectedItems || [];\n const isSelected = currentItems.includes(itemValue);\n\n if (isSelected) {\n const newItems = currentItems.filter(m => m !== itemValue);\n // Keep as array even if empty (don't revert to null)\n onChange(newItems);\n } else {\n const newItems = [...currentItems, itemValue];\n\n // Check if all available items are now selected\n if (newItems.length === availableItems.length) {\n onChange(null); // Convert to \"All\" state\n } else {\n onChange(newItems);\n }\n }\n };\n\n const handleCategoryToggle = (categoryKey: string) => {\n if (showAllItems) return;\n\n const category = categories[categoryKey];\n const currentItems = selectedItems || [];\n\n // Check if all available items in this category are selected\n const availableItemsInCategory = category.metrics.filter(m =>\n availableItems.some(choice => choice.value === m)\n );\n\n // Don't toggle if no available items\n if (availableItemsInCategory.length === 0) return;\n\n const allSelected = availableItemsInCategory.every(m => currentItems.includes(m));\n\n if (allSelected) {\n // Deselect all available items in this category\n const newItems = currentItems.filter(m => !availableItemsInCategory.includes(m));\n // Keep as array even if empty (don't revert to null)\n onChange(newItems);\n } else {\n // Select all available items in this category\n const newItems = [...new Set([...currentItems, ...availableItemsInCategory])];\n\n // Check if all available items are now selected\n if (newItems.length === availableItems.length) {\n onChange(null); // Convert to \"All\" state\n } else {\n onChange(newItems);\n }\n }\n };\n\n const isItemSelected = (itemValue: string, isAvailable: boolean): boolean => {\n // When \"Show All\" is enabled, only check available items\n if (showAllItems) return isAvailable;\n return selectedItems?.includes(itemValue) || false;\n };\n\n const isCategorySelected = (categoryKey: string): boolean => {\n const category = categories[categoryKey];\n const availableItemsInCategory = category.metrics.filter(m =>\n availableItems.some(choice => choice.value === m)\n );\n\n // When \"Show All\" is enabled, only check if category has available items\n if (showAllItems) return availableItemsInCategory.length > 0;\n\n const currentItems = selectedItems || [];\n return availableItemsInCategory.length > 0 && availableItemsInCategory.every(m => currentItems.includes(m));\n };\n\n // Get only available items for a category (unavailable = not permitted or not in data)\n const getItemsByCategory = (categoryKey: string): ItemWithAvailability[] => {\n const category = categories[categoryKey];\n return category.metrics.reduce((acc, metricValue) => {\n const columnChoice = availableItems.find(choice => choice.value === metricValue);\n if (columnChoice) {\n acc.push({ value: metricValue, label: columnChoice.label, isAvailable: true });\n }\n return acc;\n }, []);\n };\n\n return (\n \n \n \n {label}\n {!showAllItems && (\n \n {' '}\n ({selectedItems!.length === 0 ? 'All' : `${selectedItems!.length} selected`})\n \n )}\n {showAllItems && (\n \n {' '}\n (All)\n \n )}\n \n \n \n \n
\n \n \n \n\n
\n {Object.entries(categories).map(([categoryKey, category]) => {\n const items = getItemsByCategory(categoryKey);\n if (items.length === 0) return null;\n\n return (\n
\n
!showAllItems && handleCategoryToggle(categoryKey)}\n >\n {}}\n />\n {category.label}\n \n
\n {items.map(item => (\n \n \n handleItemToggle(item.value, true)}\n />\n {item.label}\n \n \n ))}\n
\n
\n );\n })}\n
\n \n );\n};\n\nexport default CategorizedMetricSelector;\n","import React, {\n useEffect, useContext, useReducer, useRef, useMemo, useState,\n} from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n Alert, Button, ButtonGroup, DropdownMenu, DropdownToggle, DropdownItem, Spinner, UncontrolledDropdown,\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { faChartLine } from '@fortawesome/free-solid-svg-icons';\nimport { startOfDay, endOfDay } from 'date-fns';\nimport PropTypes from 'prop-types';\nimport { useRowSelect } from 'react-table';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport qs from 'query-string';\nimport FlexTable from '../../Components/Table/FlexTable';\nimport { filtersToQueryString } from '../../Components/Table/queryString';\nimport { AppContext } from '../../Providers/AppProvider';\nimport ReportsFilters from '../../App/Reports/ReportsFilter';\nimport {\n extractColumnsAndData,\n extractColumnsAndDataTransposed,\n convertFilterParams,\n validateViewColumns,\n} from './api';\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport PageSection from '../../Layout/PageSection';\nimport ViewControls from './ViewControls';\nimport ComparisonViewControls from './ComparisonViewControls';\nimport { METRIC_CATEGORIES, getMetricsForCategory } from './metricConstants';\nimport CategorizedMetricSelector from './CategorizedMetricSelector';\nimport useLocalStorage from '../../Hooks/useLocalStorage';\nimport usePermission from '../../Hooks/usePermission';\nimport usePagedTableState from '../../Hooks/usePagedTableState';\nimport './aggregate_report.scss';\n\n// Date format for URL serialization - must match usePagedTableState option\n// Uses ISO-like format with T separator to preserve time and avoid URL encoding issues\nconst URL_DATE_FORMAT = \"yyyy-MM-dd'T'HH:mm:ss\";\n\nconst NoData = () => No results... ;\n\nconst stateReducer = (state, action) => {\n const {\n name, report, hiddenColumns, selectedRows, groupOrder, comparisonView, initialExpanded, rawApiResponse, downloadColumnsMode, lastFilterSettings,\n } = action;\n switch (name) {\n case 'load_report':\n return {\n ...state, loading: true, loadError: false, lastFilterSettings,\n };\n case 'load_fail':\n return { ...state, loading: false, loadError: true, report: {}, rawApiResponse: null };\n case 'load_complete':\n return {\n ...state, loading: false, loadError: false, hasLoadedOnce: true, report, hiddenColumns, initialExpanded, rawApiResponse,\n };\n case 'download':\n return { ...state, downloading: true };\n case 'download_complete':\n return { ...state, downloading: false };\n case 'set_view_columns':\n return { ...state, hiddenColumns };\n case 'clear_filters':\n return {\n ...state, report: {}, rawApiResponse: null,\n };\n case 'select_rows':\n return { ...state, selectedRows };\n case 'set_group_order':\n return { ...state, groupOrder };\n case 'set_comparison_view':\n return { ...state, comparisonView };\n case 'set_download_columns_mode':\n return { ...state, downloadColumnsMode };\n\n default:\n return state;\n }\n};\n\nconst DefaultState = {\n loading: false,\n downloading: false,\n report: {},\n selectedRows: {},\n groupOrder: 'account-first',\n comparisonView: 'nested',\n rawApiResponse: null, // Stores raw API response for re-transformation without re-querying\n downloadColumnsMode: 'selected', // 'selected' or 'all' - controls which columns to include in downloads\n loadError: false, // Tracks if the last load failed\n lastFilterSettings: null, // Stores last used filter settings for retry functionality\n hasLoadedOnce: false, // Tracks if we've ever successfully loaded data (for overlay vs spinner)\n};\n\n/*\n * Aggregate report for comparing time periods.\n * Supports transposed view where metrics are rows and time periods are columns.\n */\nconst AggregateReport = ({\n reportType,\n csvDefaultName,\n title,\n\n}) => {\n const app = useContext(AppContext);\n const Reporting = React.useMemo(() => app.getApi('reporting'), []);\n const reportFunc = Reporting.resolveAggregateReportFunc(reportType);\n const userTimezone = app.user.timezone;\n const tableInstanceRef = useRef(null);\n\n // Check permission for expanded report columns\n const hasExpandedPermission = usePermission('advertiser_reports.view_expanded');\n\n // Track expand all/collapse all preference in local storage\n const [expandAllRows, setExpandAllRows] = useLocalStorage(`${reportType}_report_expand_all`, true);\n\n // For react table - disable initial sorting to preserve row order\n const getInitialTableState = (initialExpanded) => ({\n sortBy: [],\n expanded: expandAllRows ? initialExpanded || {} : {},\n });\n\n // Default filter settings including group order, comparison view, and view_cols (for column/metric selection)\n const defaultFilterSettings = useMemo(() => ({\n startDate: startOfDay(new Date()),\n endDate: endOfDay(new Date()),\n groupBy: ['account'],\n group_order: 'account-first',\n comparison_view: 'nested',\n view_cols: METRIC_CATEGORIES.general.metrics, // Used for both column and metric selection\n }), []);\n\n // Use paged table state hook for URL/filter management\n const {\n filters,\n setFilters,\n } = usePagedTableState(\n defaultFilterSettings,\n {},\n {\n useQueryString: true,\n useTableControls: false,\n updateOnFilterChange: false, // We control when to execute via button\n ignore: ['group_order', 'comparison_view', 'selected_metrics', 'view_cols'], // Don't trigger navigation or send to API\n urlDateFormat: URL_DATE_FORMAT,\n parseOptions: { parseNumbers: false }, // Keep filter values as strings to match original types and prevent double-query\n }\n );\n\n // React Router hooks for navigation and reading URL\n const navigate = useNavigate();\n const location = useLocation();\n\n // Helper to read view_cols from URL (since it's ignored by usePagedTableState)\n const getViewColsFromUrl = () => {\n const params = qs.parse(location.search, { arrayFormat: 'comma' });\n // Handle migration from old selected_metrics parameter\n const urlViewCols = params.view_cols || params.selected_metrics;\n if (urlViewCols) {\n return Array.isArray(urlViewCols) ? urlViewCols : [urlViewCols];\n }\n return defaultFilterSettings.view_cols;\n };\n\n // Local state for view_cols (managed separately since it's ignored by the hook)\n const [viewCols, setViewCols] = useState(getViewColsFromUrl);\n\n // Sync viewCols from URL on navigation (back/forward button)\n useEffect(() => {\n const urlViewCols = getViewColsFromUrl();\n if (JSON.stringify(urlViewCols) !== JSON.stringify(viewCols)) {\n setViewCols(urlViewCols);\n }\n }, [location.search]);\n\n const [state, dispatch] = useReducer(\n stateReducer,\n {\n ...DefaultState,\n groupOrder: filters.group_order || 'account-first',\n comparisonView: filters.comparison_view || 'nested',\n hiddenColumns: [],\n },\n );\n\n // Load report when filters change\n // Fires on: initial load, browser back/forward (filters change), or View Report click (filters committed)\n useEffect(() => {\n loadReport(filters);\n }, [filters]);\n\n // When group order, comparison view, or viewCols change, re-transform the report data.\n // Used when the data needs to be transformed but does not have to be re-queried from the API.\n // Skip if currently loading - the load will handle transformation when complete\n useEffect(() => {\n if (state.rawApiResponse && !state.loading) {\n // Re-transform with new view settings (no API call needed)\n retransformReport();\n }\n }, [state.groupOrder, state.comparisonView, viewCols]);\n\n // Auto-select metrics based on product filter\n useEffect(() => {\n // Only run if report is loaded with available columns\n if (!state.report.columnChoices || state.report.columnChoices.length === 0) {\n return;\n }\n\n // Normalize products to always be an array (query params can be string when single value)\n let products = filters.products || [];\n if (typeof products === 'string') {\n products = [products];\n }\n\n if (products.length === 0) return;\n\n // Map product filter values to metric categories\n const productToCategoryMap = {\n 'calls': 'calls',\n 'clicks': 'clicks',\n 'leads': 'leads',\n };\n\n let metricsToAdd = [];\n let metricsToRemove = [];\n const currentMetrics = viewCols || [];\n\n // Auto-select categories if no metrics from that category are selected\n products.forEach(product => {\n const categoryKey = productToCategoryMap[product];\n if (!categoryKey) return;\n\n const categoryMetrics = getMetricsForCategory(categoryKey, state.report.columnChoices);\n const hasAnyMetricFromCategory = categoryMetrics.some(m => currentMetrics.includes(m));\n\n if (!hasAnyMetricFromCategory) {\n metricsToAdd.push(...categoryMetrics);\n }\n });\n\n // Exclusive logic: if ONLY one product, remove metrics from other product categories\n if (products.length === 1) {\n const selectedProduct = products[0];\n\n // Remove metrics from all other product categories\n if (selectedProduct === 'calls') {\n const clicksMetrics = getMetricsForCategory('clicks', state.report.columnChoices);\n const leadsMetrics = getMetricsForCategory('leads', state.report.columnChoices);\n metricsToRemove.push(...clicksMetrics, ...leadsMetrics);\n } else if (selectedProduct === 'clicks') {\n const callsMetrics = getMetricsForCategory('calls', state.report.columnChoices);\n const leadsMetrics = getMetricsForCategory('leads', state.report.columnChoices);\n metricsToRemove.push(...callsMetrics, ...leadsMetrics);\n } else if (selectedProduct === 'leads') {\n const callsMetrics = getMetricsForCategory('calls', state.report.columnChoices);\n const clicksMetrics = getMetricsForCategory('clicks', state.report.columnChoices);\n metricsToRemove.push(...callsMetrics, ...clicksMetrics);\n }\n }\n\n // Calculate new metrics\n const newMetrics = [\n ...currentMetrics.filter(m => !metricsToRemove.includes(m)),\n ...metricsToAdd.filter(m => !currentMetrics.includes(m))\n ];\n\n // Only update if the metrics actually changed (prevents infinite loop)\n const sortedNew = [...newMetrics].sort().join(',');\n const sortedCurrent = [...currentMetrics].sort().join(',');\n if (sortedNew !== sortedCurrent) {\n // Skip URL update for auto-selection to avoid replacing history entries\n // The URL will be updated when user clicks \"View Report\"\n handleUpdateViewCols(newMetrics, { updateUrl: false });\n }\n }, [filters.products, state.report.columnChoices]);\n\n // Re-display report with new view settings (metrics, groupOrder, comparisonView)\n // These view settings do not require re-querying the API\n // Uses cached API response when available to avoid re-querying\n const retransformReport = () => {\n if (!state.rawApiResponse) {\n return;\n }\n\n // Re-transform with new settings - no API call, no loading state!\n const rpt = (state.rawApiResponse.pivot && state.comparisonView === 'nested')\n ? extractColumnsAndDataTransposed(state.rawApiResponse, state.groupOrder, viewCols, filters.groupBy)\n : extractColumnsAndData(state.rawApiResponse);\n\n const initialExpanded = rpt.initialExpanded || {};\n const hiddenColumns = getHiddenColumns(viewCols, rpt.columns, rpt.groupingFields || [rpt.groupingField]);\n\n dispatch({\n name: 'load_complete',\n report: rpt,\n hiddenColumns,\n initialExpanded,\n rawApiResponse: state.rawApiResponse,\n });\n };\n\n const handleUpdateViewCols = (newViewCols, { updateUrl = true } = {}) => {\n // Update local state\n setViewCols(newViewCols);\n\n // Update URL silently (without triggering React Router navigation detection)\n // This prevents the usePagedTableState hook from firing navigation events\n // Skip URL update for auto-selection to avoid replacing history entries\n if (updateUrl) {\n const newSettings = {\n ...filters,\n view_cols: newViewCols,\n group_order: state.groupOrder,\n };\n const search = filtersToQueryString(newSettings, URL_DATE_FORMAT);\n // Preserve hash path for hash-based routing (e.g., \"#/reports/advertiser\")\n const hashPath = window.location.hash.split('?')[0];\n window.history.replaceState(null, '', hashPath + search);\n }\n\n // Update hidden columns in component state\n dispatch({\n name: 'set_view_columns',\n hiddenColumns: getHiddenColumns(newViewCols, state.report.columns, state.report.groupingFields || [state.report.groupingField]),\n });\n };\n\n const getHiddenColumns = (visibleColIds, tableCols, groupingFields = []) => {\n // null or undefined means show all columns (no hidden columns)\n if (!visibleColIds || visibleColIds.length === 0) {\n return [];\n }\n\n // Ensure groupingFields is an array (handle legacy single field)\n const groupingFieldsArray = Array.isArray(groupingFields)\n ? groupingFields\n : (groupingFields ? [groupingFields] : []);\n\n // Return columns that are not in the visible list\n // EXCEPT grouping fields and the label column, which should always be visible\n return tableCols.reduce((acc, col) => {\n if (!visibleColIds.includes(col.id) && !groupingFieldsArray.includes(col.id) && col.id !== 'label') {\n acc.push(col.id);\n }\n return acc;\n }, []);\n };\n\n const onSelectRow = (index) => {\n const selected = { ...state.selectedRows };\n if (selected[index]) {\n selected[index] = !selected[index];\n } else {\n selected[index] = true;\n }\n dispatch({\n name: 'select_rows',\n selectedRows: selected,\n });\n };\n\n const loadReport = async (settings = {}) => {\n // Use flushSync to ensure loading state is painted before API call\n // This prevents fast cached responses from \"skipping\" the loading overlay\n flushSync(() => {\n dispatch({ name: 'load_report', lastFilterSettings: settings });\n });\n\n const params = convertFilterParams(settings, userTimezone);\n try {\n const result = await reportFunc(params);\n if (result) {\n // Use transposed extraction if pivot exists AND comparisonView is nested\n // Use flat extraction if comparisonView is flat OR no pivot\n const rpt = (result.pivot && state.comparisonView === 'nested')\n ? extractColumnsAndDataTransposed(result, state.groupOrder, viewCols, settings.groupBy)\n : extractColumnsAndData(result);\n\n // Extract initialExpanded if present (for transposed view)\n const initialExpanded = rpt.initialExpanded || {};\n\n // Validate and use viewCols for hidden columns calculation\n const validatedViewCols = validateViewColumns(viewCols, rpt.columnChoices);\n const hiddenColumns = getHiddenColumns(validatedViewCols, rpt.columns, rpt.groupingFields || [rpt.groupingField]);\n\n // Update viewCols state if validation changed it\n if (JSON.stringify(validatedViewCols) !== JSON.stringify(viewCols)) {\n setViewCols(validatedViewCols);\n }\n\n dispatch({\n name: 'load_complete',\n report: rpt,\n hiddenColumns,\n initialExpanded,\n rawApiResponse: result, // Store raw API response\n });\n } else {\n notify(\"Oops, couldn't load report...\", 'error');\n dispatch({ name: 'load_fail' });\n }\n } catch (err) {\n notify(\"Oops, couldn't load report...\", 'error');\n console.error(err);\n dispatch({ name: 'load_fail' });\n }\n };\n\n const downloadReport = async (format = 'csv') => {\n if (!csvDefaultName) return;\n dispatch({ name: 'download' });\n let settings = { ...filters };\n\n // Add fields parameter if \"selected columns\" mode is active\n if (state.downloadColumnsMode === 'selected') {\n // Use viewCols for both pivot and non-pivot modes\n const selectedColumns = viewCols;\n\n // Only add fields if there are selected columns\n if (selectedColumns && selectedColumns.length > 0) {\n settings.fields = selectedColumns;\n }\n }\n // If downloadColumnsMode is 'all', don't add fields - API will return all columns\n\n try {\n const params = convertFilterParams(settings, userTimezone);\n const response = await reportFunc(params, format);\n\n if (response && response.data) {\n const a = document.createElement('a');\n document.body.appendChild(a);\n a.style = 'display: none';\n const url = window.URL.createObjectURL(response.data);\n a.href = url;\n a.download = `${csvDefaultName}.${format}`;\n a.click();\n window.URL.revokeObjectURL(url);\n a.parentNode.removeChild(a);\n } else {\n notify(`Oops, couldn't download file (empty data)...`, 'error');\n }\n } catch (e) {\n notify(`Oops, couldn't download file...`, 'error');\n console.error(e);\n } finally {\n dispatch({ name: 'download_complete' });\n }\n };\n\n const handleClearFilters = () => {\n setFilters(defaultFilterSettings);\n dispatch({ name: 'clear_filters' });\n // Update URL after setFilters so state.filters matches when [location.search] effect runs\n const search = filtersToQueryString(defaultFilterSettings, URL_DATE_FORMAT);\n navigate(search, { replace: false });\n };\n\n const handleChangeFilters = (filterSettings) => {\n if (Object.keys(filterSettings).length === 0) {\n filterSettings = { ...defaultFilterSettings };\n }\n\n // Merge with current view settings\n const filtersWithViewSettings = {\n ...filterSettings,\n group_order: state.groupOrder,\n };\n\n setFilters(filtersWithViewSettings);\n // Update URL after setFilters so state.filters matches when [location.search] effect runs\n const search = filtersToQueryString(filtersWithViewSettings, URL_DATE_FORMAT);\n navigate(search, { replace: false });\n };\n\n\n const handleGroupOrderChange = (newOrder) => {\n // Update URL with new group order (uses replace to avoid adding history entry)\n // Don't call setFilters - that would trigger the load effect and cause an API call\n const search = filtersToQueryString({ ...filters, group_order: newOrder }, URL_DATE_FORMAT);\n navigate(search, { replace: true });\n\n // Dispatch triggers the retransform effect (no API call)\n dispatch({ name: 'set_group_order', groupOrder: newOrder });\n };\n\n const handleComparisonViewChange = (newView) => {\n // Update URL with new comparison view (uses replace to avoid adding history entry)\n // Don't call setFilters - that would trigger the load effect and cause an API call\n const search = filtersToQueryString({ ...filters, comparison_view: newView }, URL_DATE_FORMAT);\n navigate(search, { replace: true });\n\n // Dispatch triggers the retransform effect (no API call)\n dispatch({ name: 'set_comparison_view', comparisonView: newView });\n };\n\n const handleToggleExpandAll = (e) => {\n e.stopPropagation();\n const newExpandAll = !expandAllRows;\n setExpandAllRows(newExpandAll);\n\n // Toggle all rows in the table\n if (tableInstanceRef.current) {\n tableInstanceRef.current.toggleAllRowsExpanded(newExpandAll);\n }\n };\n\n const {\n loading, downloading, report: { data = [], columns = [], columnChoices = [], hasTotals = false }, loadError,\n } = state;\n\n // Filter columnChoices based on permission\n // These 4 columns require 'advertiser_reports.view_expanded' permission\n const restrictedColumns = ['impression_click_through_rate', 'average_diff_next_bid_down', 'average_diff_next_bid_up', 'average_diff_top'];\n const filteredColumnChoices = useMemo(() => {\n if (hasExpandedPermission) {\n return columnChoices;\n }\n return columnChoices.filter(choice => !restrictedColumns.includes(choice.value));\n }, [columnChoices, hasExpandedPermission]);\n\n // Determine if we're in pivot mode (comparison view) with grouping\n const isPivotMode = filters?.pivot && columns.length > 0;\n const hasGrouping = !!(filters?.groupBy && filters.groupBy.length > 0);\n\n // Modify columns to add expand/collapse all toggle in label column header when applicable\n // Only add toggle in nested mode - flat mode doesn't have expandable rows\n const columnsWithExpandToggle = React.useMemo(() => {\n if (!isPivotMode || !hasGrouping || columns.length === 0 || state.comparisonView !== 'nested') {\n return columns;\n }\n\n // Clone the columns array\n const modifiedColumns = [...columns];\n\n // Find the label column (should be the first column in pivot mode)\n if (modifiedColumns.length > 0 && modifiedColumns[0].id === 'label') {\n const labelColumn = { ...modifiedColumns[0] };\n const originalHeader = labelColumn.Header;\n\n // Create a custom header with expand/collapse toggle\n labelColumn.Header = () => (\n \n {originalHeader} \n \n
\n );\n\n modifiedColumns[0] = labelColumn;\n }\n\n return modifiedColumns;\n }, [columns, isPivotMode, hasGrouping, expandAllRows, state.comparisonView]);\n\n return (\n <>\n \n\n {!loading && columns.length > 0 && (\n \n {/* Comparison view toggle - show in pivot mode only */}\n {isPivotMode && (\n
\n )}\n\n {/* Group order toggle - show in pivot mode only when grouping exists and in nested view */}\n {isPivotMode && hasGrouping && state.comparisonView === 'nested' && (\n
\n )}\n\n {/* Unified column/metric selector - works for both pivot and non-pivot modes */}\n
\n\n {csvDefaultName\n && (\n
\n \n {downloading ? \n \n File downloads are restricted to 500 rows \n
\n\n \n Column Selection: \n \n dispatch({ name: 'set_download_columns_mode', downloadColumnsMode: 'selected' })}\n >\n {isPivotMode ? 'Selected metrics' : 'Selected columns'}\n \n dispatch({ name: 'set_download_columns_mode', downloadColumnsMode: 'all' })}\n >\n {isPivotMode ? 'All metrics' : 'All columns'}\n \n \n
\n\n downloadReport('csv')}>\n \n downloadReport('xlsx')}>\n \n \n \n )}\n
\n
\n Loading report... \n
\n
\n Failed to load report data. \n loadReport(state.lastFilterSettings || filters)}>\n Try Again\n \n \n )}\n\n {/* No data state */}\n {!loading && !loadError && columns.length === 0 && { tableInstanceRef.current = instance; }}\n />\n )}\n\n \n\n \n\n );\n};\n\nAggregateReport.propTypes = {\n reportType: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n csvDefaultName: PropTypes.string,\n};\n\nAggregateReport.defaultProps = {\n csvDefaultName: 'Report',\n};\n\nexport default AggregateReport;\n","import React from 'react';\nimport AggregateReport from './AggregateReport';\nimport DocTitle from '../../Layout/DocTitle';\n\nconst AdvertiserReportV2 = () => {\n const today = new Date();\n\n return (\n <>\n No filters applied. Click to add filters. );\n }\n\n // keys in selections are going to be 'params'\n const summary = summarizeFilterSettings(filters, choices);\n\n if (!Object.keys(summary).length) return (null);\n\n return (\n \n {Object.entries(summary).map(([filterName, val], i) => {\n if (Array.isArray(val) && val.length > 0) {\n return (\n \n {FilterLabelMap[filterName]}: {val.join(',')}\n \n );\n } else {\n return (\n \n {FilterLabelMap[filterName]}: {val}\n \n )\n }\n }).reduce((prev, curr) => [prev, ', ', curr])}\n \n );\n};\n\nconst keepKeys = (obj, keys) => {\n obj = { ... obj }\n Object.keys(obj).map(key => {\n if (!keys.includes(key)) {\n delete obj[key]\n }\n })\n return obj\n}\n\nFilterSummary.propTypes = {\n filters: PropTypes.object,\n filterKeys: PropTypes.array,\n choices: PropTypes.object,\n};\n\nexport default FilterSummary;\n\nconst summarizeFilterSettings = (filters, choices) => {\n // console.log('FilterSummary.js: summarizeFilterSettings', filters, choices);\n const filterSummary = {};\n Object.entries(filters).map(([key, val]) => {\n // console.log('FilterSummary.js: summarizeFilterSettings:', key, val);\n // Map: param could be vertical.name, but choices is 'vertical'\n key = FilterChoiceMap[key] || key;\n if (choices.hasOwnProperty(key)) {\n const labels = getLabels(choices[key], val);\n if (labels) {\n filterSummary[key] = labels;\n }\n } else {\n // todo guard against non-strings\n filterSummary[key] = val;\n }\n });\n return filterSummary;\n};\n\nconst getLabels = (options, values) => {\n //console.log('ReportsFilter.js:summarize getLabels', options, values);\n if (values && Array.isArray(options)) {\n // options.filter((opt) => values.includes(opt.value))\n const selected = Array.isArray(values)\n ? options.filter((opt) => values.some(val => val.toString() === opt.value.toString()))\n : options.filter((opt) => opt.value.toString() === values.toString());\n\n const labels = selected.length ? selected.map((opt) => opt.label) : null;\n\n // console.log('FilterSummary.js:summarize, getLabels: selected, labels:', selected, labels);\n return labels;\n }\n return null;\n};\n","import React, { useState, useEffect } from 'react';\nimport { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { endOfDay } from 'date-fns';\nimport FilterSummary from '../../Components/Table/FilterSummary';\nimport { StackedFilter, TextSearch } from '../../Components/Table/Filter';\nimport {ProductChoices} from '../../Components/Table/FilterChoices'\nimport usePermission from '../../Hooks/usePermission';\nimport RightDateAndControls from '../../Components/Table/RightDateAndControls';\n\nconst StaticChoices = {\n // note: handle true/false as string\n products: ProductChoices,\n billable: [\n { value: '', label: 'Any' },\n { value: 'true', label: 'Yes' },\n { value: 'false', label: 'No' },\n ],\n disposition: [\n { value: 'answered', label: 'Answered' },\n { value: 'completed', label: 'Completed' },\n { value: 'failed', label: 'Failed' },\n { value: 'canceled', label: 'Canceled' },\n { value: 'no-answer', label: 'No Answer' },\n { value: 'busy', label: 'Busy' },\n { value: 'ringing_inbound', label: 'Ringing Inbound' },\n { value: 'ringing_outbound', label: 'Ringing outbound' },\n ],\n};\n\nconst ProspectFilters = ({\n filters, api, userTimezone, reportLoading, onLoadFilters, onChange, onClear, onExecute, prospectType,\n}) => {\n const [filterChoices, setFilterChoices] = useState({});\n const allowViewSources = usePermission('sources.view');\n const allowViewAuctions = usePermission('auctions.view');\n // const allowViewVendors = usePermission('vendors.view');\n\n // load choices on mount\n useEffect(() => {\n const params = filters.accounts ? { account_ids: filters.accounts } : {};\n if (!Object.keys(filterChoices).length) loadChoices(params);\n }, []);\n\n const loadChoices = async (params = {}) => {\n const result = await api.getFilterOptions(params, 'calls');\n if (result) {\n const { choices, defaults } = result;\n\n setFilterChoices({ ...StaticChoices, ...choices });\n\n // set filters with any default choices\n if (defaults && !Array.isArray(defaults)) {\n const defaultFilters = {};\n Object.entries(defaults).map(([prop, val]) => {\n if (prop === 'accounts' && Array.isArray(val)) {\n defaultFilters[prop] = val.map(v=>v.toString())\n } else {\n defaultFilters[prop] = val.toString();\n }\n\n\n })\n onChange({...defaultFilters, ...filters})\n }\n onLoadFilters && onLoadFilters();\n }\n };\n\n const onFilterChange = (filterName, val) => {\n\n if (filterName === 'accounts') {\n if (val.length) {\n // fetch account order choices\n loadChoices({ account_ids: val });\n } else {\n // remove order choices and filter setting\n setFilterChoices((prev) => {\n prev.orders = [];\n return prev;\n });\n // mergeFilter({'orders': []})\n deleteFilter('orders');\n }\n }\n\n if (!val || (Array.isArray(val) && !val.length)) {\n deleteFilter(filterName);\n } else {\n mergeFilter({ [filterName]: val });\n }\n };\n\n const mergeFilter = (toMerge) => {\n onChange({ ...filters, ...toMerge });\n };\n\n const deleteFilter = (filterName) => {\n const f = { ...filters };\n delete f[filterName];\n onChange(f);\n };\n\n const onChangeDate = (selection) => {\n onChange({\n ...filters,\n startDate: selection.startDate,\n endDate: endOfDay(selection.endDate),\n });\n };\n\n const onTimezoneChange = (tz) => {\n mergeFilter({\n timezone: tz,\n });\n };\n\n const clearSearch = () => onFilterChange('origin_number', '');\n\n return (\n \n
\n
\n\n {prospectType === 'calls' && (\n
\n onFilterChange('origin_number', val)}\n onClear={clearSearch}\n delay={200}\n />\n
\n )}\n\n {/* Use of inNavbar={true} disables popper and allows application of '.dropDown' animation class to menu */}\n \n\n\n
\n
\n\n
\n\n
)[decided] || decided) : 'Outside the return window, or already requested';\n } else {\n title = 'Request Return';\n }\n\n return (\n onRequestReturn(sale)}\n >\n — ;\n }\n\n const colors = ReturnStatusColors as Record;\n const labels = ReturnStatusLabels as Record;\n\n // Falls through to the raw status rather than rendering nothing: a status\n // the UI hasn't been taught yet is still information, and silently\n // dropping it would hide a backend change instead of surfacing it.\n return (\n \n {labels[status] || status}\n \n );\n};\n\nexport default ReturnStatusBadge;\n","import React, {\n useEffect, useState, Suspense, lazy,\n} from 'react';\nimport {\n Modal, ModalBody, ModalHeader, Row, Col, Fade, Spinner, Button,\n} from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport PropTypes from 'prop-types';\nimport { DateFormatter } from '../../Components/Table/Table';\nimport { titleCase } from '../../utils/string';\nimport ReturnActionButton from './ReturnActionButton';\nimport ReturnStatusBadge from './ReturnStatusBadge';\n\nconst ReactAudioPlayer = lazy(() => import('react-audio-player'));\nconst RECORDING_URL_BASE = 'https://call-recordings.dmsengage.com/recordings?url=';\n// import {DurationFormatter} from \"../../Components/Table/Table\";\n\n/*\nLead data\n\naccount_name: \"Nationwide Health Advisors\"\naddress: \"100 Main Street\"\nauction_id: \"e87ca63b-dc20-4263-8d40-9b72ecd38d7a\"\nbid: \"$2.00\"\ncall_id: 0\nchannel_name: \"UE Health Leads\"\ncity: \"Crowley\"\ncost: \"$2.00\"\ncurrent_company: \"Other\"\ncurrently_insured: \"No\"\ndrivers: null\nemail: \"mistyride1977@gmail.com\"\nfirst_name: \"Misty\"\nfull_name: \"Misty Roberson\"\nhome_owner: \"No\"\nlast_name: \"Roberson\"\nlead_id: \"e5b53a49-e91e-4142-823a-6a4c3c7a7658\"\norder_name: \"NHA Health Leads\"\nphone: \"+12542294898\"\nproduct: \"Leads\"\npurchased_time: \"2020-12-07 22:00:27\"\nsource_name: \"ZQ Health Leads\"\nstate: \"TX\"\ntransaction_id: 1017330\nvehicles: null\nvendor_name: \"ZipQuote\"\nvertical: \"Health Insurance\"\nzipcode: \"76036\"\n\n */\n\nconst DetailHeader = ({\n loading, fullName, product, billable,\n}) => {\n const loadingText = product === 'calls' ? 'Call Detail' : 'Lead Detail';\n let displayText;\n\n if (fullName) {\n displayText = fullName;\n } else if (product === 'calls' && billable === 'No') {\n displayText = 'Unbillable Call';\n } else {\n displayText = loadingText;\n }\n\n return (\n \n {loading ? {loadingText} : {displayText} }\n \n );\n};\n\nconst FormatCall = ({ autoPlay, ...data }) => (\n \n \n Unknown} />\n */}\n
\n \n\n {data.recording_url\n && (\n Loading}>\n \n \n )}\n
\n);\n\nconst FormatContact = ({\n fullName, city, country, state, zipcode, address, address2, email, phone, date_of_birth,\n}) => (\n \n
\n
{fullName ?? Unknown name }
\n
\n {address ?? Unknown address }\n {address2 && (\n \n {' '}\n (\n {address2}\n )\n \n ) }\n
\n
\n {city ?? Unknown city }\n ,\n {' '}\n {state ?? Unknown state }\n {' '}\n {zipcode}\n {' '}\n {country && country.toLowerCase() !== 'usa' ? country : ''}\n
\n
\n
\n {email && (\n
\n
\n )}\n {phone && (\n
\n
\n )}\n {date_of_birth && (\n
\n D.o.B:\n {date_of_birth &&
\n )}\n {date_of_birth && (\n
\n D.o.B (FNS):\n {date_of_birth &&
\n )}\n
\n
\n
\n);\n\n// At the moment no health data is returned from Looker\nconst FormatHealth = ({\n gender, height_inches, weight_pounds, tobacco_user, pregnant, preexisting_conditions, social_security, income, household_size,\n}) => (\n \n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n Unknown} />\n
\n);\n\nconst FormatAuto = ({ drivers = [], vehicles = [] }) => (\n <>\n \n {drivers?.length > 0 ? (\n
\n
Drivers \n {drivers.map((drv, i) => (\n
\n \n {drv.gender === 'M' ? 'Male' : 'Female'}\n {' '}\n |\n {' '}\n {drv.marital_status}\n {' '}\n | D.o.B:\n {' '}\n {drv.date_of_birth && \n
\n\n ))}\n
\n ) :
No driver data }\n
\n {vehicles?.length > 0 ? (\n
\n
Vehicles \n {vehicles.map((v, i) => (\n
\n \n {v.year}\n {' '}\n {v.make}\n {' '}\n {v.model}\n {' '}\n | miles:\n {' '}\n {v.annual_mileage}\n m | commute:\n {' '}\n {v.commute_mileage}\n m\n \n
\n ))}\n
\n ) :
No vehicle data }\n
\n { (product !== 'Calls' || billable === 'Yes') && (\n <>\n Unknown} />\n\n {lead.tcpa_disclosure !== undefined && */}\n {lead.device &&
\n);\n\nconst DetailRow = ({ label, value, children }) => (\n \n
{label} \n
{value || children}
\n
\n \n \n
\n {data?.account_name}\n {' '}\n >\n {' '}\n {data?.order_name}\n \n
\n {/*\n * The status reads out here rather than living only in the\n * action button's tooltip. On the Leads row the button sits in\n * a Return Status column that already states the answer; opened\n * on its own, this view had no such column, so a disabled\n * button was the only signal and \"why can't I click this\" meant\n * hovering to find out.\n */}\n
\n
\n\n \n {loading &&
}\n {data && !loading && (\n\n \n\n \n\n Contact \n Insurance \n Lead \n {/* tcpa_url={lead.tcpa_url} tcpa_disclosure={lead.tcpa_disclosure} */}\n \n Driver & Car \n
\n )}\n\n {/* MST-1017 some call leads have a home ownership boolean */}\n {!hideNonbillable && typeof data.home_owner !== 'undefined'\n && (\n \n )}\n\n {(data.vertical === 'Health Insurance' || data.vertical === 'Medicare') && !hideNonbillable\n && (\n \n
\n Health
\n {showHealth ? (\n setShowHealth(false)}> \n ) : (\n setShowHealth(true)}> \n )}\n \n\n {showHealth &&
}\n\n
\n\n {props.product === 'calls'\n && (\n \n Call \n
\n )}\n\n \n )}\n\n \n \n );\n};\n\nProspectDetailModal.propTypes = {\n loadDetail: PropTypes.func, // may load calls or leads depending on parent component\n product: PropTypes.string,\n getDetail: PropTypes.func,\n isOpen: PropTypes.bool,\n loading: PropTypes.bool,\n cancel: PropTypes.func,\n autoPlayId: PropTypes.number,\n salesByAuction: PropTypes.object,\n allowRequestReturn: PropTypes.bool,\n onRequestReturn: PropTypes.func,\n};\n\nProspectDetailModal.defaultProps = {\n\n};\n\nexport default ProspectDetailModal;\n","const CallColumnChoices = [\n // {value:'call_id', label:'Call ID'},\n { value: 'received_time', label: 'Received Time' },\n { value: 'disposition', label: 'Disposition' },\n // {value:'phone', label:'Phone'}, //Same as origin_number\n { value: 'origin_number', label: 'Origin Number' },\n { value: 'transfer_number', label: 'Transfer Number' },\n { value: 'destination_number', label: 'Destination Number' },\n { value: 'billable', label: 'Billable' },\n { value: 'duration', label: 'Duration' },\n { value: 'account_billable_duration', label: 'Duration Threshold (account)' },\n { value: 'vendor_billable_duration', label: 'Duration Threshold (vendor)' },\n { value: 'cost', label: 'Cost' },\n { value: 'sales', label: 'Sales' },\n { value: 'cost_per_sale', label: 'Cost Per Sale' },\n // Currently revenue mostly the same as cost. We might need to restrict by permission\n // {value:'revenue', label:'Revenue'},\n { value: 'account_name', label: 'Account Name' },\n { value: 'order_name', label: 'Order Name' },\n { value: 'vertical', label: 'Vertical Name' },\n { value: 'source_name', label: 'Source Name' },\n { value: 'channel_name', label: 'Channel Name' },\n { value: 'vendor_name', label: 'Vendor Name' },\n { value: 'buyer_name', label: 'Buyer Name' },\n { value: 'broker_name', label: 'Broker Name' },\n { value: 'full_name', label: 'Full Name' },\n { value: 'city', label: 'City' },\n { value: 'state', label: 'State' },\n];\n\nexport const getCallColumnChoices = (allowViewSource) => (\n allowViewSource ? CallColumnChoices : CallColumnChoices.filter((c) => c.value !== 'source_name')\n);\n\n// Started life as a copy of CallColumnChoices above, which left three\n// call-routing columns on a page that has no calls. Corrected DMS-1651:\n//\n// - transfer_number / destination_number are call-leg concepts. A posted\n// lead has neither, so both were offered in the picker and then rendered\n// empty for every row -- the \"I selected it and nothing showed up\"\n// reported on this page.\n// - origin_number is kept: for a lead it IS the consumer's phone (see the\n// commented-out `phone` entry in CallColumnChoices, \"Same as\n// origin_number\"). Relabelled to say so, since \"Origin Number\" only\n// means anything if you already know it came from the calls report.\nconst LeadColumnChoices = [\n // {value:'lead_id', label:'Lead ID'},\n { value: 'purchased_time', label: 'Purchased Time' },\n { value: 'origin_number', label: 'Phone' },\n { value: 'cost', label: 'Cost' },\n { value: 'product', label: 'Product' },\n // Currently revenue mostly the same as cost. We might need to restrict by permission\n // {value:'revenue', label:'Revenue'},\n { value: 'account_name', label: 'Account Name' },\n { value: 'order_name', label: 'Order Name' },\n { value: 'vertical', label: 'Vertical Name' },\n { value: 'source_name', label: 'Source Name' },\n { value: 'channel_name', label: 'Channel Name' },\n { value: 'vendor_name', label: 'Vendor Name' },\n { value: 'buyer_name', label: 'Buyer Name' },\n { value: 'broker_name', label: 'Broker Name' },\n { value: 'full_name', label: 'Full name' },\n { value: 'city', label: 'City' },\n { value: 'state', label: 'State' },\n];\n\nexport const getLeadColumnChoices = (allowViewSource) => (\n allowViewSource ? LeadColumnChoices : LeadColumnChoices.filter((c) => c.value !== 'source_name')\n);\n","import React from 'react';\nimport {\n DropdownMenu, DropdownToggle, Button, UncontrolledDropdown,\n} from 'reactstrap';\nimport PropTypes from 'prop-types';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport Select from '../../Components/Form/SimpleSelect';\n\nconst CallColumnSelect = (props) => {\n const findColIndex = (col) => props.choices.findIndex((c) => c.value === col);\n\n const handleSelectColumn = (cols) => {\n // The updated columns will NOT necessarily be ordered correctly\n // so we have to re-order it against the choices array\n // (Because API returns columns in the order request)\n const ordered = Array(cols.length);\n cols.map((col) => {\n const idx = findColIndex(col);\n if (idx >= 0) ordered[idx] = col;\n });\n\n // filter is for re-indexing\n props.onUpdate(ordered.filter(Boolean));\n };\n\n // TODO special permission to view source\n return (\n \n \n \n Columns\n {props.selectedCols && props.selectedCols.length > 0 && (\n \n {' '}\n (\n {props.selectedCols.length}\n {' '}\n selected)\n \n )}\n \n \n \n\n \n
\n
\n\n
\n Apply \n
\n\n
\n \n\n );\n};\n\nCallColumnSelect.propTypes = {\n choices: PropTypes.array.isRequired,\n selectedCols: PropTypes.array.isRequired,\n onUpdate: PropTypes.func.isRequired,\n onApply: PropTypes.func.isRequired,\n disabled: PropTypes.bool,\n};\nCallColumnSelect.defaultProps = {\n selectedCols: [],\n};\n\nexport default CallColumnSelect;\n","import React, {\n useEffect, useState, useMemo, useContext,\n} from 'react';\nimport { AppContext } from '../../Providers/AppProvider';\nimport PageSection from '../../Layout/PageSection';\nimport DocTitle from '../../Layout/DocTitle';\nimport ProspectFilters from './ProspectFilters';\nimport PagedTable from '../../Components/Table/PagedTable';\nimport FilterBar from '../../Components/Table/FilterBar';\nimport ProspectDetailModal from './ProspectDetailModal';\nimport { getCallColumnChoices } from './ColumnSelectChoices';\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport {\n extractColumnsAndDataForLeads,\n convertFilterParams,\n} from './api';\nimport './styles.scss';\nimport usePagedTableState from '../../Hooks/usePagedTableState';\nimport { format, startOfDay, endOfDay } from 'date-fns';\nimport { Button } from 'reactstrap';\nimport CallColumnSelect from './CallColumnSelect';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport DownloadFileLink from '../../Components/DownloadFileLink';\nimport usePermission from '../../Hooks/usePermission';\nimport Modal from './../Auctions/Details/Modal';\nimport BooleanIconCell from \"../../Components/Table/BooleanIconCell\";\n\nconst DefaultFilters = {\n startDate: startOfDay(new Date()),\n endDate: endOfDay(new Date()),\n};\n\nconst DefaultControls = {\n limit: 20,\n sort_by: 'received_time',\n sort_dir: 'desc',\n page: 1,\n};\n\n/*\n * Calls List - paged table with filters\n *\n */\nconst Calls = () => {\n const app = useContext(AppContext);\n const Reporting = React.useMemo(() => app.getApi('reporting'), []);\n const userTimezone = app.user.timezone;\n const csvDefaultName = `Mastodon_Calls_${format(new Date(), 'yyyy-dd')}.csv`;\n const {\n filters, setFilters, updateQuery, reset, controls, tableEvent,\n } = usePagedTableState(\n DefaultFilters,\n DefaultControls,\n { useQueryString: true, useTableControls: true, updateOnFilterChange: false },\n );\n const [loading, setLoading] = useState(true);\n const [report, setReport] = useState({ data: [], columns: [], columnChoices: [] });\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const [detailId, setDetailId] = useState();\n const [auctionId, setAuctionId] = useState();\n const [filtersLoaded, setFiltersLoaded] = useState(false);\n const allowViewSource = usePermission('sources.view');\n const allowViewAuction = usePermission('auctions.view');\n const columnChoices = useMemo(() => getCallColumnChoices(allowViewSource && allowViewAuction), []);\n\n const initialTableState = useMemo(() => ({\n // These columns are useful for detail view but we don't show them in the table\n hiddenColumns: ['auction_id', 'call_id'],\n sortBy: [\n { id: controls.sort_by, desc: true },\n ],\n }), []);\n\n useEffect(() => {\n if (filtersLoaded && !loading && tableEvent && tableEvent !== 'filters') {\n loadCalls();\n }\n }, [tableEvent, controls.sort_by, controls.sort_dir, controls.page, controls.limit]);\n\n //filters need to load first because sometimes they can adjust\n useEffect(() => {\n if (filtersLoaded) {\n loadCalls();\n }\n }, [filtersLoaded]);\n\n const CellResolver = (colId) => {\n if (colId === 'billable') {\n return BooleanIconCell;\n }\n return null;\n };\n\n const handleClearFilters = () => reset({ fields: filters.fields || [] });\n\n const handleUpdateColumns = (fields) => setFilters({ ...filters, fields });\n\n // Accounts filter is provided in detail request.\n // Rule is: without the explicit pii.view permission, you can only see unmasked PII if you are filtering by your direct (associated with user)\n // account, not child accounts.\n const loadDetail = async (id) => await Reporting.getProspectDetail(id, 'calls', filters.accounts ? {account_ids:filters.accounts} : {});\n\n const toggleDetail = (id) => setDetailId(id);\n const toggleAuction = (id) => setAuctionId(id);\n\n const loadCalls = async () => {\n setLoading(true);\n\n window.scrollTo({ top: 0, behavior: 'smooth' });\n\n const apiFilters = convertFilterParams(filters, null);\n\n const {\n page, sort_by, sort_dir, limit,\n } = controls;\n\n const response = await Reporting.getCalls({\n ...apiFilters,\n page,\n sort_by,\n sort_dir,\n number_per_page: limit,\n // fields:'received_time,origin_number,call_id,vertical,source_name,cost,transfer_number,duration,billable,disposition,full_name,city,state'\n });\n\n if (response) {\n const { total, pages_count } = response;\n setPageCount(pages_count || 1);\n setTotalRows(total);\n const rpt = extractColumnsAndDataForLeads(response, CellResolver);\n\n // For column picker set selected fields if not already selected, based on columns in response.\n // Filter out hidden columns.\n if (!filters.fields?.length) {\n setFilters({ ...filters, fields: rpt.columns.map((c) => c.dataField).filter((c) => !initialTableState.hiddenColumns.includes(c)) });\n }\n\n // add in the actions column\n rpt.columns = [\n {\n id: 'actions',\n Cell: ({ row }) => \n setFiltersLoaded(true)}\n onChange={setFilters}\n onExecute={loadCalls}\n onClear={handleClearFilters}\n userTimezone={userTimezone}\n reportLoading={loading}\n prospectType=\"calls\"\n />\n \n\n \n\n \n\n
\n\n \n\n toggleDetail(null)}\n product=\"calls\"\n autoPlayId={0}\n />\n\n toggleAuction(null)}\n />\n\n \n );\n};\n\nconst ActionCell = React.memo(({\n row, openDetail, openDebug, allowViewAuction,\n}) => (\n \n {row.billable === 'Yes' && (\n openDetail(row.call_id)}>\n \n )}\n {allowViewAuction && (\n openDebug(row.auction_id)}>\n \n )}\n
\n\n));\n\nexport default Calls;\n","import React, {\n useEffect, useState, useMemo, useContext,\n} from 'react';\nimport PageSection from '../../Layout/PageSection';\nimport { AppContext } from '../../Providers/AppProvider';\nimport DocTitle from '../../Layout/DocTitle';\nimport ProspectFilters from './ProspectFilters';\nimport PagedTable from '../../Components/Table/PagedTable';\nimport FilterBar from '../../Components/Table/FilterBar';\nimport ProspectDetailModal from './ProspectDetailModal';\nimport { getLeadColumnChoices } from './ColumnSelectChoices';\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport {\n extractColumnsAndDataForLeads,\n convertFilterParams,\n} from './api';\nimport './styles.scss';\nimport usePagedTableState from '../../Hooks/usePagedTableState';\nimport { format, startOfDay, endOfDay } from 'date-fns';\nimport { Button } from 'reactstrap';\nimport CallColumnSelect from './CallColumnSelect';\n// eslint-disable-next-line import/order\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\n//import DownloadFileLink from '../../Components/DownloadFileLink';\nimport usePermission from '../../Hooks/usePermission';\nimport AuctionModal from '../Auctions/Details/Modal';\nimport RequestReturnModal from '../Auctions/Details/RequestReturnModal';\nimport ReturnActionButton from './ReturnActionButton';\nimport ReturnStatusBadge from './ReturnStatusBadge';\n\nconst DefaultFilters = {\n startDate: startOfDay(new Date()),\n endDate: endOfDay(new Date()),\n\n};\n\nconst DefaultControls = {\n limit: 20,\n sort_by: 'purchased_time',\n sort_dir: 'desc',\n};\n\n/*\n * Leads List - paged table with filters\n *\n */\nconst Leads = () => {\n const app = useContext(AppContext);\n const Reporting = React.useMemo(() => app.getApi('reporting'), []);\n const userTimezone = app.user.timezone;\n const _csvDefaultName = `Mastodon_Leads_${format(new Date(), 'yyyy-dd')}.csv`;\n const {\n filters, setFilters, updateQuery, controls, tableEvent, reset,\n } = usePagedTableState(\n DefaultFilters,\n DefaultControls,\n { useQueryString: true, useTableControls: true, updateOnFilterChange: false },\n );\n const [loading, setLoading] = useState(true);\n // const[data, setData] = useState([]);\n const [report, setReport] = useState({ data: [], columns: [], columnChoices: [] });\n const [pageCount, setPageCount] = useState(1);\n const [totalRows, setTotalRows] = useState(0);\n const [filtersLoaded, setFiltersLoaded] = useState(false);\n const [detailId, setDetailId] = useState();\n const [auctionId, setAuctionId] = useState();\n const [returnModalSale, setReturnModalSale] = useState(null);\n // Read on later renders only (detail modal open, re-render after load) --\n // never within the same loadLeads() call that sets it, which would read\n // the pre-update value. rpt.columns uses the local salesOverlay instead,\n // precisely to avoid that.\n const [salesByAuction, setSalesByAuction] = useState({});\n const allowViewSource = usePermission('sources.view');\n const allowViewAuction = usePermission('auctions.view');\n // sales.view/returns.create, not leads.view: separate from the page-level\n // permission so this is ready for a buyer/agent grant once that actor\n // model exists (see DMS-1651) without a UI change.\n const allowViewSales = usePermission('sales.view');\n const allowRequestReturn = usePermission('returns.create');\n const columnChoices = useMemo(() => getLeadColumnChoices(allowViewSource && allowViewAuction), []);\n\n const initialTableState = useMemo(() => ({\n // These columns are useful for detail view but we don't show them in the table\n hiddenColumns: ['auction_id', 'lead_id'],\n sortBy: [\n { id: controls.sort_by, desc: true },\n ],\n }), []);\n\n useEffect(() => {\n if (filtersLoaded && !loading && tableEvent && tableEvent !== 'filters') {\n loadLeads();\n }\n }, [tableEvent, controls.sort_by, controls.sort_dir, controls.page, controls.limit]);\n\n //filters need to load first because sometimes they can adjust\n useEffect(() => {\n if (filtersLoaded) {\n loadLeads();\n }\n }, [filtersLoaded]);\n\n const handleClearFilters = () => reset({ fields: filters.fields || [] });\n\n const handleUpdateColumns = (fields) => {\n setFilters({ ...filters, fields });\n };\n\n // Accounts filter is provided in detail request.\n // Rule is: without the explicit pii.view permission, you can only see unmasked PII if you are filtering by your direct (associated with user)\n // account, not child accounts.\n const loadDetail = async (id) => await Reporting.getProspectDetail(id, 'leads', filters.accounts ? {account_ids:filters.accounts} : {});\n\n const toggleAuction = (id) => setAuctionId(id);\n\n // Overlays return eligibility onto the existing Looker-backed leads list by\n // joining on auction_id (present on both responses) rather than replacing\n // the leads data source -- read-service's /sales carries return_status/\n // window fields but none of the reporting columns (phone, vertical,\n // city/state, names) this page already shows.\n //\n // account_id stays required (the /sales proxy's own access-scoping check,\n // DMS-1659) and auction_id narrows to exactly the leads on this page --\n // NOT a fetch of \"the account's N most recent sales\": that flat window\n // (sorted sold_at desc, capped at per_page) silently missed matches\n // outside it for high-volume accounts or an older date filter. Requires\n // an account filter selected; without one, no eligibility data loads and\n // no return icon renders.\n const loadSalesOverlay = async (auctionIds) => {\n if (!allowViewSales || !filters.accounts?.length || !auctionIds.length) {\n return {};\n }\n\n const response = await app.api.endpoints.sales.list({\n account_id: filters.accounts,\n auction_id: auctionIds,\n per_page: auctionIds.length,\n });\n\n const hits = response?.sales?.hits || [];\n const byAuction = {};\n hits.forEach((sale) => {\n // Results arrive sorted newest-first (sold_at desc) -- keep only the\n // first (newest) sale seen per auction_id. An auction can have more\n // than one sale (e.g. reversed and resold), and eligibility must be\n // evaluated against the current one, not overwritten by an older one\n // processed later in the array.\n if (sale.auction_id && !byAuction[sale.auction_id]) {\n byAuction[sale.auction_id] = sale;\n }\n });\n return byAuction;\n };\n\n const loadLeads = async () => {\n setLoading(true);\n updateQuery();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n\n const apiFilters = convertFilterParams(filters, null);\n const {\n page, sort_by, sort_dir, limit,\n } = controls;\n\n const response = await Reporting.getLeads({\n ...apiFilters,\n page,\n sort_by,\n sort_dir,\n number_per_page: limit,\n });\n\n if (response) {\n const { total, pages_count } = response;\n setPageCount(pages_count || 1);\n setTotalRows(total);\n const rpt = extractColumnsAndDataForLeads(response);\n\n // Sales overlay is fetched after leads resolve, scoped to exactly the\n // auction_ids on this page -- can't be parallelized with the leads\n // fetch above since it depends on knowing which auctions are on it.\n const auctionIds = rpt.data.map((row) => row.auction_id).filter(Boolean);\n const salesOverlay = await loadSalesOverlay(auctionIds);\n // Safe to read back later (detail modal open, re-render after load) --\n // rpt.columns below uses the local salesOverlay instead of this state,\n // since state updates aren't visible within the same call.\n setSalesByAuction(salesOverlay);\n\n // For column picker set selected fields if not already selected, based on columns in response.\n // Filter out hidden columsn.\n if (!filters?.fields?.length) {\n setFilters({ ...filters, fields: rpt.columns.map((c) => c.dataField).filter((c) => !initialTableState.hiddenColumns.includes(c)) });\n }\n\n // Add in the action column\n rpt.columns = [\n {\n id: 'actions',\n Cell: ({ row }) => (\n \n setFiltersLoaded(true)}\n onChange={setFilters}\n onExecute={loadLeads}\n onClear={handleClearFilters}\n userTimezone={userTimezone}\n reportLoading={loading}\n prospectType=\"leads\"\n />\n \n\n \n\n \n
\n\n \n\n toggleDetail(null)}\n product=\"leads\"\n autoPlayId={0}\n salesByAuction={salesByAuction}\n allowRequestReturn={allowRequestReturn}\n onRequestReturn={setReturnModalSale}\n />\n\n toggleAuction(null)}\n />\n\n setReturnModalSale(null)}\n onRequested={() => {\n setReturnModalSale(null);\n loadLeads();\n }}\n />\n\n \n );\n};\n\nconst ActionCell = React.memo(({\n row, openDetail, openDebug, allowViewAuction, sale, allowRequestReturn, onRequestReturn,\n}) => {\n return (\n \n\n openDetail(row.lead_id)}>\n \n\n {allowViewAuction && (\n openDebug(row.auction_id)}>\n \n )}\n\n
\n );\n});\nActionCell.displayName = 'ActionCell';\n\nexport default Leads;\n","import React, {useState, useEffect, useRef, useContext} from 'react';\nimport PropTypes from 'prop-types';\nimport { useParams, useNavigate, Link } from 'react-router-dom';\nimport { Input, Button } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport DocTitle from '../../../Layout/DocTitle';\nimport PageSection from '../../../Layout/PageSection';\nimport Auction from './index';\nimport './styles.scss';\nimport { AppContext } from '../../../Providers/AppProvider';\n\n/*\n * Page view of Auction detail (as opposed to modal view)\n * Wrapped in page section. Gets auction id from route.\n * Has Change Auction functionality.\n */\nconst Page = () => {\n const app = useContext(AppContext);\n const userTimezone = app.user.timezone;\n const navigate = useNavigate();\n const { auction_id } = useParams();\n const auctionIdRef = useRef();\n\n\n const keyHandler = (event) => {\n if (event.key === 'Enter') {\n handleGo();\n }\n };\n\n // Focus input on mount (if no auction_id)\n useEffect(() => {\n if (!auction_id && auctionIdRef.current) {\n auctionIdRef.current.select();\n }\n }, []);\n\n const handleGo = () => {\n if (auctionIdRef.current.value) {\n navigate(`/reports/auction/${auctionIdRef.current.value}`);\n }\n };\n\n return (\n \n
\n
}\n >\n\n {/* Show auction if auction id, else id input */}\n {auction_id ? (\n
\n ) : (\n\n
\n\n )}\n\n \n
\n \n \n \n
\n ) : (\n \n {auctionId}\n \n \n );\n};\n\nEditableAuctionId.propTypes = {\n auctionId: PropTypes.string,\n};\n\nexport default Page;\n","import React from 'react';\nimport {Navigate, Routes, Route} from \"react-router-dom\";\nimport AdvertiserReport from './AdvertiserReport';\n//import PublisherReport from './PublisherReport';\nimport Calls from './Calls';\nimport Leads from './Leads';\nimport ProtectedRoute from '../../Components/ProtectedRoute';\nimport Page from './../Auctions/Details/Page';\n\n// Routes are releative to '/reports'\nconst Landing = () => (\n \n }>\n }/>\n \n\n {/* MRK-8107 hide publisher report\n */}\n\n }>\n }/>\n \n\n }>\n }/>\n \n\n }>\n }/>\n \n\n }>\n }/>\n \n\n\n }/>\n \n );\n\nexport default Landing;\n","const payloads = [\n {\n label: 'Minimal',\n payload: {\n data: {\n zipcode: '92109',\n ip_address: '127.0.0.1',\n user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36',\n source_url: 'www.acme.com/signup',\n },\n },\n },\n // {\n // label: \"Medium\",\n // payload: {\n // source_token: sourceToken,\n // visitor: {\n // ip_address: \"127.0.0.1\",\n // user_agent: \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36\",\n // },\n // data: {\n // zip: \"92109\",\n // currently_insured: true,\n // drivers: [\n // {\n // birth_date: \"1980-02-22\",\n // },\n // ],\n // vehicles: [\n // {\n // \"annual_mileage\": 25000,\n // },\n // ],\n // },\n // \"extras\": {\n // \"url\": \"www.acme.com\",\n // },\n // },\n // },\n {\n label: 'LM - Regular',\n payload: {\n data: {\n zipcode: '71601',\n ip_address: '127.0.0.1',\n user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36',\n currently_insured: true,\n drivers: [\n {\n birth_date: '1980-02-22',\n },\n ],\n vehicles: [\n {\n annual_mileage: 25000,\n },\n ],\n source_url: 'www.acme.com/signup',\n },\n },\n },\n {\n label: 'LM - High LTV',\n payload: {\n data: {\n zipcode: '71601',\n ip_address: '127.0.0.1',\n user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36',\n currently_insured: true,\n drivers: [\n {\n birth_date: '1980-02-22',\n },\n ],\n vehicles: [\n {\n annual_mileage: 25000,\n },\n {\n annual_mileage: 25000,\n },\n ],\n home_ownership: true,\n source_url: 'www.acme.com/signup',\n },\n },\n },\n {\n label: 'Complete',\n payload: {\n data: {\n ip_address: '127.0.0.1',\n user_agent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.124 Safari/537.36',\n address: '120 Jenkins Rd',\n address_2: 'Apt 12',\n bi_per_incident: 100000,\n bi_per_person: 50000,\n contact: 'James S. Silverman',\n continuous_coverage: 121,\n coverage_type: 'Standard Protection',\n current_company: 'Progressive',\n current_customer: 48,\n current_policy_expires: 2,\n currently_insured: 1,\n drivers: [\n {\n bankruptcy: 0,\n birth_date: '1968-09-12',\n credit_rating: 'Good',\n education: 'Associate',\n first_licensed: 17,\n gender: 'M',\n license_state: 'GA',\n license_status: 'Active',\n marital_status: 'Married',\n occupation: 'Other Technical',\n primary_vehicle: 0,\n relationship: 'self',\n sr_22: 0,\n },\n ],\n email: 'silverman@mediaalpha.com',\n home_length: 121,\n home_ownership: 1,\n incidents: [\n {\n description: 'More than 10 MPH over',\n driver: 0,\n incident_date: '06/2012',\n type: 'ticket',\n },\n ],\n phone: '2299429943',\n vehicles: [\n {\n alarm: 1,\n annual_mileage: 25000,\n auto_warranty: 1,\n average_mileage: 10,\n collision: 500,\n commute_days_per_week: 1,\n comprehensive: 500,\n current_mileage: 40000,\n make: 'HONDA',\n model: 'CIVIC SI',\n ownership: 'finance',\n primary_purpose: 'Commute Work',\n submodel: 'SEDAN 4 DOOR',\n vin: 'SHHFC1E50HH000000',\n year: 2017,\n },\n ],\n zipcode: '90210',\n source_url: 'www.acme.com/signup',\n },\n },\n },\n];\n\nconst stateZips = {\n AA: '34002',\n AE: '09002',\n AK: '99501',\n AL: '35004',\n AP: '96201',\n AR: '71601',\n AS: '96799',\n AZ: '85001',\n CA: '90001',\n CO: '80001',\n CT: '06001',\n DC: '20001',\n DE: '19701',\n FL: '32003',\n FM: '96941',\n GA: '30002',\n GU: '96910',\n HI: '96701',\n IA: '50001',\n ID: '83201',\n IL: '60001',\n IN: '46001',\n KS: '66002',\n KY: '40003',\n LA: '70001',\n MA: '01001',\n MD: '20588',\n ME: '03901',\n MH: '96960',\n MI: '48001',\n MN: '55001',\n MO: '63005',\n MP: '96950',\n MS: '38601',\n MT: '59001',\n NC: '27006',\n ND: '58001',\n NE: '68001',\n NH: '03031',\n NJ: '07001',\n NM: '87001',\n NV: '88901',\n NY: '00501',\n OH: '43001',\n OK: '73001',\n OR: '97001',\n PA: '15001',\n PR: '00601',\n PW: '96939',\n RI: '02801',\n SC: '29001',\n SD: '57001',\n TN: '37010',\n TX: '73301',\n UT: '84001',\n VA: '20101',\n VI: '00801',\n VT: '05001',\n WA: '98001',\n WI: '53001',\n WV: '24701',\n WY: '82001',\n}\n\nconst userAgents = {\n mobile: 'Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)',\n desktop: 'Mozilla/5.0 (X11; Linux) AppleWebKit/538.15 (KHTML, like Gecko) Chrome/18.0.1025.133 Safari/538.15 Midori/0.5',\n}\n\nexport {payloads, stateZips, userAgents}\n","import React, {\n useState, useEffect, useContext, useRef,\n} from 'react';\nimport {\n TabContent, TabPane, Nav, FormGroup, FormText, Input, Label, Card, Button, Row, Col, Spinner, InputGroup,\n} from 'reactstrap';\nimport PageSection from '../../../Layout/PageSection';\nimport DocTitle from '../../../Layout/DocTitle';\nimport AdDisplay from '../../AdManager/AdDisplay';\nimport {JsonEditorLoadable, notify} from \"@thedmsgroup/mastodon-ui-components\";\nimport useQueryState from \"../../../Hooks/useQueryState\";\nimport Select from \"../../../Components/Form/SimpleSelect\";\nimport './MatchChecker.scss';\nimport { FormTabFlat } from '../../../Components/Form/FormCommon';\nimport AuctionModal from '../../Auctions/Details/Modal';\nimport useApi from '../../../Hooks/useApi';\nimport { ProductChoices, StateChoices } from '../../../Components/Table/FilterChoices';\nimport {payloads, stateZips, userAgents} from './samples';\nimport { AppContext } from '../../../Providers/AppProvider';\nimport {SourceOptionLabel} from \"../../../Components/Form/Select/SourceOptionLabel\";\n\nconst RequestForm = (props) => {\n const [payload, setPayload] = useState(\n typeof props.payload === 'object' ? JSON.stringify(props.payload, null, 2) : (props.payload ?? \"\")\n );\n const jsonEditorRef = useRef();\n const { api } = useApi();\n const [auctionId, setAuctionId] = useState(props.initialAuctionId ?? \"\");\n const [loadingAuction, setLoadingAuction] = useState(false);\n\n const onSubmit = () => props.onSubmit && props.onSubmit(payload);\n\n /* Load an existing auction and populate the payload with its originally\n * submitted lead data (the 'source' scope) plus its source token. */\n const loadAuction = async (id) => {\n const trimmed = String(id ?? \"\").trim();\n if (!trimmed) return;\n\n setLoadingAuction(true);\n const res = await api.endpoints.debug.auctions(trimmed);\n setLoadingAuction(false);\n\n if (!res || !res.auction || Array.isArray(res.auction)) {\n notify(`Unable to load auction ${trimmed}`, \"error\");\n return;\n }\n\n const blocks = Array.isArray(res.auction.lead) ? res.auction.lead : [];\n const sourceBlocks = blocks.filter((b) => b.scope === \"source\");\n const usedBlocks = sourceBlocks.length ? sourceBlocks : blocks;\n const data = Object.assign({}, ...usedBlocks.map((b) => b.data ?? {}));\n\n if (!sourceBlocks.length && blocks.length) {\n notify(\"No 'source' scope on this auction; loaded all available lead data.\", \"warning\");\n }\n\n // Source token may live on the auction record or inside the lead data.\n const sourceToken = res.auction.source_token?.token\n ?? (typeof res.auction.source_token === \"string\" ? res.auction.source_token : null)\n ?? res.auction.source?.token\n ?? data.source_token\n ?? null;\n delete data.source_token;\n\n const nextPayload = {\n ...(sourceToken ? { source_token: sourceToken } : {}),\n data,\n };\n\n setPayload(JSON.stringify(nextPayload, null, 2));\n notify(`Loaded auction ${trimmed}`, \"success\");\n };\n\n // Auto-load when the tool is opened with an ?auction= query param.\n useEffect(() => {\n if (props.initialAuctionId) {\n loadAuction(props.initialAuctionId);\n }\n }, []);\n\n const onSelectSample = (e) => {\n const sample = payloads.find((p) => p.label === e.target.value)?.payload;\n\n if (sample) {\n //setPayload(JSON.stringify(Object.assign({}, payload, sample), null, 2))\n const objPayload = JSON.parse(payload);\n setPayload(JSON.stringify({...objPayload, ...sample}, null, 2))\n } else {\n setPayload(\"{}\")\n }\n };\n\n const onJsonChange = (val) => {\n setPayload(val);\n };\n\n\n const handleSourceSelection = source => {\n\n setPayload(JSON.stringify(\n Object.assign({}, JSON.parse(payload), {source_token: source?.token}),\n null,\n 2\n )\n )\n }\n\n\n const handleStateSelection = e => {\n const zipcode = stateZips[e.target.value]\n setPayload(\n JSON.stringify(\n mergeData(JSON.parse(payload), {zipcode}),\n null,\n 2\n )\n );\n\n }\n\n const handleDeviceSelection = e => {\n const ua = userAgents[e.target.value]\n setPayload(\n JSON.stringify(\n mergeData(JSON.parse(payload), {user_agent: ua}),\n null,\n 2\n )\n )\n }\n\n return (\n \n\n
\n \n Load from Auction \n \n Enter an auction ID to populate the form with its originally submitted lead data.\n \n \n setAuctionId(e.target.value)}\n onKeyDown={(e) => { if (e.key === 'Enter') loadAuction(auctionId); }}\n />\n loadAuction(auctionId)}\n disabled={loadingAuction || !auctionId.trim()}\n >\n {loadingAuction && \n \n \n\n
\n\n
\n \n Lead Preset \n -- \n {payloads.map((sample) => {sample.label} )}\n \n \n \n State \n -- \n {StateChoices.map((state) => {state.label} )}\n \n \n \n Device Type \n -- \n {Object.keys(userAgents).map(deviceType => {deviceType} )}\n \n \n
\n\n
\n
\n
\n \n Submit\n \n
\n\n
\n \n \n Vendor \n\n \n \n\n \n Vertical \n\n \n \n\n\n \n Product \n \n onSelectProduct(e.target.value)}\n value={filters.product}\n >\n Select Product \n {ProductChoices.map((obj, i) => {obj.label} )}\n \n \n \n \n\n
\n\n \n \n Source \n Select a source to add a source token to the payload. \n\n \n\n \n
\n\n\n
\n}\n\nconst AdResult = ({ ad }) => {\n // todo AdDisplay standardize parameters?\n return (\n \n );\n};\n\nconst ResponseDetails = ({ data: {auction_id, bids} }) => {\n const [isOpen, setIsOpen] = useState(false)\n\n return \n\n
setIsOpen(false)}\n />\n\n \n
\n Auction setIsOpen(true)} className=\"auction-detail-link p-0\">{auction_id} \n
\n
\n {bids.map((ad) =>
)}\n
No results.
\n }\n \n\n
\n\n \n\n
\n \n \n {response\n ? Submit lead form to review response.
}\n \n \n \n \n\n \n \n \n
to auto-load an existing auction.\n const [query,] = useQueryState({source:null, auction:\"\"});\n const app = useContext(AppContext);\n const api = app.getApi('matching')\n\n const submitPayload = async (payload) => {\n // The JSON editor hands us a string; send a parsed object so axios sets\n // Content-Type: application/json instead of defaulting to form-urlencoded.\n let parsed;\n try {\n parsed = JSON.parse(payload);\n } catch (e) {\n notify('Payload is not valid JSON.', 'error');\n return;\n }\n\n setSubmitting(true);\n\n const res = await api.runPing(parsed);\n if (res) {\n console.log(res)\n setResponse(res);\n }\n\n setSubmitting(false);\n };\n\n return (\n \n
\n\n
\n
\n \n \n \n \n \n \n
\n
\n
\n {props.submitting && \n );\n};\n\nexport default MatchChecker;\n","import React, { useMemo } from 'react';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { Button } from 'reactstrap';\nimport {ChangeHistoryButton} from '../../../../Providers/ChangeProvider';\nimport PropTypes from 'prop-types';\nimport FlexTable from '../../../../Components/Table/FlexTable';\nimport { titleCaseWord } from '../../../../utils/string';\nimport useTableGlobalFuzzyFilter from '../../../../Hooks/useTableGlobalFuzzyFilter';\nimport { DateFormatter, AnyCell } from '../../../../Components/Table/Table';\n\nconst AttributesTable = ({ data, onSelect, allowEdit, loading }) => {\n const globalFilterType = useTableGlobalFuzzyFilter(['original.name', 'original.alias']);\n\n const initialTableState = useMemo(() => ({\n gridLayout: { columnWidths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'] },\n sortBy: [{ id: 'name', desc: false }],\n }), []);\n\n const columns = useMemo(\n () => [\n {\n Header: 'Name',\n accessor: 'name',\n },\n {\n Header: 'Alias',\n accessor: 'alias',\n },\n {\n Header: 'Vertical',\n //Because the filters work by vertical.id, we have to match up this column id to vertical.id,\n //instead of using accessor\n //accessor: 'vertical.display_name',\n id: 'vertical.id',\n disableGlobalFilter: true,\n Cell: ({row}) => row.original.vertical ? row.original.vertical.display_name : \n {allowEdit && (\n onEditClick(attribute)}>\n \n )}\n
\n);\n\nAttributesTable.propTypes = {\n data: PropTypes.array,\n allowEdit: PropTypes.bool,\n loading: PropTypes.bool,\n handleEditClick: PropTypes.func,\n};\n\nexport default AttributesTable;\n","import React, { useState, useContext, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { LiveFilteringContext } from '../../../../Providers/LiveFilteringProvider';\nimport { Filter, TextSearch } from '../../../../Components/Table/Filter';\nimport { ProductChoices } from '../../../../Components/Table/FilterChoices';\nimport RightDateAndControls from '../../../../Components/Table/RightDateAndControls';\nimport useApiBatch from '../../../../Hooks/useApiBatch';\n\nconst Filters = ({ loading, onRefresh }) => {\n const [choices, setChoices] = useState({});\n // const{api} = useApi();\n const {\n filters,\n updateFilter,\n globalFilter,\n updateGlobalFilter,\n resetFilter,\n resetFilters,\n } = useContext(LiveFilteringContext);\n\n const batcher = useApiBatch();\n\n // load choices\n useEffect(() => {\n const getChoices = async () => {\n const batches = await batcher.fetch([\n { endpoint: 'verticals', action: 'list' },\n { endpoint: 'attributes', action: 'groups' },\n ]);\n if (batches && batches.length) {\n const [verticals, groups] = batches;\n setChoices({\n product: ProductChoices,\n vertical: verticals.map((item) => ({ value: item.id, label: item.display_name })),\n attributeGroups: groups.map((item) => ({ value: item.id, label: item.name })),\n });\n }\n };\n\n if (Object.keys(choices).length === 0) getChoices();\n }, []);\n\n return (\n\n \n
\n\n
\n
\n\n resetFilter('global')}\n autofocus\n />\n\n
\n\n
\n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n\n
\n
\n Target\n \n An optional value that targets who or what the attribute applies to. For example, an attribute\n {' '}\n drivers.license_status \n {' '}\n might have a target "Driver"\n with choices for "Primary", "All", or "Any"\n \n
\n
Choices for refining the targeting.
\n
\n \n Target Label \n A short label to describe the target (example:"Driver") \n \n \n\n \n Target Choices \n \n Add 1 choice per line. Delimit values and labels with a colon (\n value:label \n )\n \n \n \n\n
\n
\n
Options
\n\n {/*\n If unknown_data_choice is false, the field will not be shown (assume rejected?)\n if true (or not set), the field will be shown.\n allows user to accept or reject unknown data.\n Controls the 'accept_unknown' matchable field.\n Example: call_center choices are [parrot, \"double positive\"] and you can accept or reject unknown data.\n\n */}\n
\n Unknown Data Choice\n \n If checked, the user will be able to configure targeting to allow or disallow matching against unknown data.\n If unchecked, this option will not be available when configuring targets, and unknown data will be accepted by default.\n \n \n\n \n \n Label\n \n A hint for describing the required input. For example, with an integer input for number of accidents:\n "\n in the last 3 years \n ". With zip code input: "\n A comma-separated list of zip codes \n ".\n \n \n \n\n {inputType === 'integer_range' && (\n \n )}\n\n {StaticChoiceInputTypes.includes(inputType) && (\n \n Choices \n {errors['options.choices']} \n \n Add 1 choice per line. Delimit values and labels with a colon (\n value:label \n )\n \n \n )}\n\n {DynamicChoiceInputTypes.includes(inputType) && (\n \n Dynamic Choices \n Select from dynamic source at left. Values are from database tables. \n \n )}\n\n \n Please correct the errors below before continuing\n \n )}\n\n \n
\n \n \n \n Name\n {' '}\n \n \n\n \n \n Alias\n {' '}\n \n The attribute's key used within the matchable definition. Lower case with no spaces. Dots can be used\n to indicate categories of attributes, such as\n {' '}\n properties.num_stories \n \n \n = 0}\n placeholder={formValues.input_type.indexOf('dynamic') >= 0 ? 'Select a dynamic source' : 'The matchable key'}\n />\n {!isNew && NOTE: Changing the alias will NOT update existing matchables that use it! \n {/* TODO: if dynamic, alias must be source (vertical_id, account_id, etc) */}\n\n \n \n Vertical\n \n\n {formErrors.vertical_id} \n \n\n \n\n \n Product\n \n \n \n All products \n {ProductChoices.map((p) => {p.label} )}\n \n \n {formErrors.product} \n \n\n {/* TODO disable depending on input_type ? */}\n \n \n Data Type\n {' '}\n \n \n \n Select... \n Boolean \n Integer \n String \n Array \n \n \n {formErrors.data_type} \n \n\n \n \n Input Type\n {' '}\n \n \n \n Select... \n Boolean \n Expression \n Integer Range \n Choice \n Multiple Choice \n Dynamic Choice \n Dynamic Multiple Choice \n List (Freeform Choices) \n Metro Choice \n State Choice \n County List \n Zipcode List \n\n \n \n {formErrors.input_type} \n \n\n {DynamicChoiceInputTypes.includes(formValues.input_type) && (\n \n \n Dynamic Source\n {' '}\n \n Dynamic choice inputs draw their choices from the database. The alias will be set according to chosen source.\n \n \n \n \n Select... \n {Object.entries(DynamicSourceMap).map(([val, label], i) => {label} )}\n \n \n {formErrors.dynamic_source} \n \n )}\n\n \n \n Attribute Group\n {' '}\n \n Attributes are grouped under these headers in the selection dropdown.\n \n \n\n {formErrors.group_id} \n \n\n {/* TODO: secondary list for dynamic source: vertical_id, account_id, vendor_id */}\n\n \n \n Scope\n \n Optionally limit the use of this attribute to routing rules or return rules.\n Use Return Rules for data that only exists when a return is decided (e.g. the return decision itself).\n If not set, the attribute will be available to all scopes (depending on settings for product and vertical)\n \n \n \n \n Any \n Routing Rules \n Return Rules \n \n \n {formErrors.scope} \n \n
\n\n \n\n
\n\n
\n\n \n Cancel\n \n \n Save\n \n\n\n \n
\n \n );\n};\n\nAttribute.propTypes = {\n close: PropTypes.func.isRequired,\n attribute: PropTypes.object.isRequired,\n};\n\nexport default Attribute;\n","import React, { useState, useEffect } from 'react';\nimport {\n Button, Modal, ModalHeader, ModalBody,\n} from 'reactstrap';\nimport DocTitle from '../../../../Layout/DocTitle';\nimport PageSection from '../../../../Layout/PageSection';\nimport AttributesTable from './Table';\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport FilterBar from '../../../../Components/Table/FilterBar';\nimport Filters from './Filters';\nimport { LiveFilteringProvider } from '../../../../Providers/LiveFilteringProvider';\nimport usePermission from '../../../../Hooks/usePermission';\nimport useApi from '../../../../Hooks/useApi';\nimport Attribute from '../Detail';\nimport {useChangeTimeline} from '../../../../Hooks/useChangeTimeline';\n\nconst ListHeaderTools = ({ allowCreate, buttonClick }) => {\n if (!allowCreate) return (null);\n return (\n \n New Attribute\n \n );\n};\n\n\n\nconst AttributeList = () => {\n const [loading, setLoading] = useState(true);\n const [attributes, setAttributes] = useState([]);\n const [selectedAttribute, setSelectedAttribute] = useState(null);\n const [isDetailOpen, setIsDetailOpen] = useState(false);\n const allowEdit = usePermission('attributes.edit');\n const allowCreate = usePermission('attributes.create');\n const { api } = useApi();\n useChangeTimeline({ entityTypes: ['attribute'], parentFilters: {} });\n\n if (!allowEdit) return (null);\n\n const toggleDetail = (refresh = false) => {\n setIsDetailOpen(!isDetailOpen);\n if (refresh === true) {\n load();\n }\n };\n\n const handleCreateNew = () => {\n handleSelectAttribute(\n {\n id: 0,\n name: '',\n alias: '',\n product: '',\n vertical: null,\n group_id: null,\n input_type: '',\n data_type: '',\n scope: '',\n options: {},\n },\n );\n };\n\n const handleSelectAttribute = (attr) => {\n if (attr) {\n setSelectedAttribute(attr);\n setIsDetailOpen(true);\n }\n };\n\n useEffect(() => {\n if (!attributes.length) {\n load();\n }\n }, []);\n\n const load = async (refresh = false) => {\n if (!refresh) {\n setLoading(true);\n }\n\n const attr = await api.endpoints.attributes.list();\n\n if (attr === false) {\n notify(`Unable to load attributes: ${api.error.name}`, 'error');\n } else {\n setAttributes(attr);\n }\n\n if (!refresh) {\n setLoading(false);\n }\n };\n\n // TODO: will we have status, or active flag?\n const handleStatusChange = async (id, status) => {\n const result = await api.endpoints.attributes.update({ id, status });\n return result;\n };\n\n return (\n\n <>\n \n\n \n load(true)} />\n \n\n \n\n \n {selectedAttribute && (\n <>\n \n {\n selectedAttribute.id === 0\n ? 'Create Attribute'\n : (\n <>\n Edit Attribute |\n {selectedAttribute.name} \n \n )\n }\n \n \n\n \n \n )}\n\n \n \n );\n};\n\nexport default AttributeList;\n","import React, {FC, useMemo} from \"react\";\nimport FlexTable from \"../../../Components/Table/FlexTable\";\nimport {DateFormatter} from \"../../../Components/Table/Table\";\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport {InputSchemaType} from \"../../../types\";\nimport {Button} from \"reactstrap\";\nimport {ChangeHistoryButton} from \"../../../Providers/ChangeProvider\";\nimport {Stack, RowDivider} from \"@thedmsgroup/mastodon-ui-components\";\n\n\ntype InputSchemaTableProps = {\n data:InputSchemaType[];\n isLoading:boolean;\n onViewSchema:(schema:InputSchemaType) => void;\n onEditSchema:(schema:InputSchemaType) => void;\n}\n\n/*\n * Table that lists Input Schema\n */\nconst InputSchemaTable:FC = ({\n data,\n isLoading,\n onViewSchema,\n onEditSchema,\n }) => {\n\n const columns = useMemo(() =>{\n\n return [\n {\n Header: 'ID',\n accessor: 'id',\n maxWidth: 40,\n filter: 'text',\n Cell: ({value}:{value:number}) => \n
\n\n {value}\n
\n
{row.original.description} \n
onViewSchema(row.original)}\n >\n \n {value ? (\n
\n ) : (\n
— \n )}\n
\n {parentSchema.name}\n onViewSchema(parentSchema)}\n >\n \n \n \n )\n }\n return error: not found \n}\n\ntype ExtendedByCellProps = {\n schemas:InputSchemaType[];\n onViewSchema: (schema:InputSchemaType) => void;\n}\nconst ExtendedByCell = ({ schemas, onViewSchema}:ExtendedByCellProps) => (\n \n {schemas.length > 0 ? (\n
} >\n {schemas.map((schema:InputSchemaType, i:number) => (\n
\n {schema.name}\n onViewSchema(schema)}\n >\n \n \n
\n ))}\n\n \n ) :
— \n }\n\n
\n { onEdit(schema); }}>\n \n
\n );\n\n\n\n","import React, {useEffect, useState} from \"react\";\nimport {\n Row,\n Col,\n FormGroup,\n Input,\n Label,\n Button,\n FormText,\n FormFeedback, ModalHeader,\n Modal,\n ModalBody,\n ModalFooter\n} from \"reactstrap\";\nimport {notify} from \"@thedmsgroup/mastodon-ui-components/lib/common/Notify\";\nimport {StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport useFormState from \"../../../Hooks/useFormState\";\nimport {JsonEditorLoadable} from \"@thedmsgroup/mastodon-ui-components\";\nimport EnhancedSelect from \"../../../Components/Form/EnhancedSelect\";\nimport {InputSchemaOptionLabel} from \"./InputSchemaOptionLabel\";\nimport {InputSchemaType} from \"../../../types\";\nimport InputSchemaApi from \"./InputSchemaApi\";\nimport LoadingBar from \"../../../Layout/LoadingBar\";\n\ntype InputSchemaFormProps = {\n schema:InputSchemaType;\n allSchema:InputSchemaType[];\n isOpen:boolean;\n close:(refresh?:any|boolean)=>void;\n onView:(schema:InputSchemaType)=>void;\n}\n/*\n * Form for editing or creating an input schema\n */\nconst InputSchemaForm = ({schema, allSchema, onView, isOpen, close}:InputSchemaFormProps) => {\n const api = new InputSchemaApi();\n const[parentChoices, setParentChoices] = useState([])\n const[isValidSchema, setIsValidSchema] = useState(true)\n const[saving, setSaving] = useState(false);\n const isNew = !schema.id;\n const {\n formApi,\n formValues,\n formErrors,\n formIsValid,\n } = useFormState({\n id: schema.id,\n name:schema.name,\n description:schema.description,\n parent_id:schema.parent_id,\n content:JSON.stringify(schema.content, null, 2)\n });\n\n\n const updateParentChoices = () => {\n const choices = allSchema.filter(s => s.id !== schema.id).map(s => {\n return {value:s.id, label:s.name, description:s.description}\n });\n setParentChoices([\n {\n value:\"\",\n label:\"None\",\n description: \"\",\n },\n ...choices\n ]);\n }\n\n const handleViewParent = (id:number) => {\n const parent = allSchema.find(s => s.id === id);\n if (parent) {\n onView(parent);\n }\n }\n\n\n // Parent choices after schema choices are loaded\n useEffect(()=>{\n updateParentChoices();\n }, []);\n\n\n const editorChanged = (newCode:any, isValid:boolean) => {\n setIsValidSchema(isValid);\n formApi.setValue('content', newCode);\n }\n\n\n const handleSelectParent = (id:number) => {\n formApi.setValue(\"parent_id\", id);\n }\n\n\n const handleCancel = () => {\n formApi.clearForm();\n setIsValidSchema(true);\n close();\n }\n\n const checkValid = () => {\n if (!formValues.name) {\n formApi.setError(\"name\", \"Name is required\");\n return false;\n }\n\n if (allSchema.find((s) => s.id !== formValues.id && s.name.toLowerCase() === formValues.name.toLowerCase())) {\n formApi.setError(\"name\", \"This name is already used for another schema.\");\n return false;\n }\n\n // Editor will do its own syntax and schema validating onChange\n if (!isValidSchema) {\n formApi.setError(\"content\", \"Invalid schema\");\n }\n\n return true;\n }\n\n const handleSave = async() => {\n\n if (checkValid()) {\n setSaving(true);\n const params = {...formValues};\n params.content = JSON.parse(formValues.content);\n if (!params.parent_id) {\n params.parent_id = null;\n }\n let result;\n if (isNew) {\n delete params.id;\n result = await api.create(params);\n } else {\n result = await api.update(formValues.id, params);\n }\n\n if (result) {\n notify(`The input schema has been saved`, 'success');\n\n close(true)\n } else {\n //@ts-ignore\n notify(`Unable to save schema: ${api.error ? api.error.name : \"\"}`, 'error');\n }\n setSaving(false);\n\n }\n }\n\n return (\n \n \n {schema.id ? \"Edit Schema\" : \"Create New Schema\"}\n \n {schema.id > 0 && {schema.name}
}\n \n \n\n {!formIsValid\n && (\n
\n Please correct the errors below before continuing\n \n )}\n\n\n\n
\n \n Name \n {formErrors.name} \n \n \n
\n\n
\n \n Description \n {formErrors.name} \n \n \n
\n\n
\n \n Extends \n Optionally set a base schema. The current schema will inherit the properites of the base definition.
\n \n
\n
\n\n {formValues.parent_id &&
handleViewParent(formValues.parent_id)}>View }\n
\n \n
\n\n {!isNew && (\n
\n \n Extended By \n \n {schema.input_schemas.length > 0 ? (\n <>\n {schema.input_schemas.map((child:InputSchemaType, i:number)=>(\n
\n {child.name}\n onView(child)}>View \n
\n ))}\n \n ) : (\n
none \n )}\n
\n \n
\n )}\n\n\n\n
\n
\n\n
\n \n \n\n
\n \n Cancel\n \n \n Save\n \n
\n
\n \n )\n}\n\nexport default InputSchemaForm;\n\n\nconst CONTENT_SCHEMA = {\n \"type\": \"object\",\n \"additionalProperties\": true,\n \"oneOf\":[\n {\"$ref\": \"#/definitions/property_def\"}\n ],\n \"definitions\": {\n \"property_def\": {\n \"type\":\"object\",\n \"properties\":{\n \"type\": {\n \"type\": \"string\"\n },\n \"pattern\": {\n \"type\": \"string\"\n },\n \"allow_unknown\": {\n \"type\": \"boolean\"\n },\n \"required\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n },\n \"enum\": {\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n }\n },\n \"items\": {\n \"title\": \"items\",\n \"anyOf\": [{\n \"$ref\": \"#\"\n }, {\n \"$ref\": \"#/definitions/schema_array\"\n }],\n \"default\": true\n },\n \"properties\": {\n \"title\": \"properties\",\n \"type\": \"object\",\n \"additionalProperties\": {\n \"$ref\": \"#\"\n },\n \"default\": {}\n },\n },\n \"required\": [\"type\"]\n },\n \"schema_array\": {\n \"title\": \"schemaArray\",\n \"type\": \"array\",\n \"minItems\": 1,\n \"items\": {\n \"$ref\": \"#\"\n }\n },\n\n }\n}\n","import React, { useContext } from 'react';\nimport classnames from 'classnames';\nimport { LiveFilteringContext } from '../../../Providers/LiveFilteringProvider';\nimport { TextSearch } from '../../../Components/Table/Filter';\n\nconst Filters = (props) => {\n const { filters, updateFilter, resetFilters } = useContext(LiveFilteringContext);\n\n return (\n\n \n\n
\n\n
\n\n updateFilter('name', val)}\n onClear={() => resetFilters()}\n />\n
\n\n
= () => {\n\n // const [query, setQuery] = useQueryState({}, {historyAction:\"replace\"});\n const[loading, setLoading] = useState(true)\n const[viewSchema, setViewSchema] = useState(null)\n const[editSchema, setEditSchema] = useState(null)\n const[list, setList] = useState([])\n const allowInputSchemaEdit = usePermission('input_schema.edit');\n useChangeTimeline({ entityTypes: ['inputschema'], parentFilters: {} });\n\n if (!allowInputSchemaEdit) return null;\n\n useEffect(() => {\n load();\n }, [])\n\n const load = async() => {\n const result:any = await SchemaApi.list();\n if (result) {\n setList(result);\n } else {\n //@ts-ignore\n notify(`Unable to load data: ${SchemaApi.error ? SchemaApi.error.name : \"\"}`, 'error');\n }\n setLoading(false);\n }\n\n //May get a click event, or true for refreshing\n const closeEditModal = (e?:any|boolean) => {\n setEditSchema(null);\n if (e === true) {\n load();\n }\n }\n\n const closeViewSchema = () => setViewSchema(null);\n\n const handleViewSchemaContent = (inputSchema:InputSchemaType) => {\n setViewSchema(inputSchema);\n }\n\n const handleEditSchema = (schema:InputSchemaType) => {\n setEditSchema(schema);\n }\n\n const handleCreateNew = () => {\n setEditSchema({\n id:0,\n name: \"\",\n description: \"\",\n parent_id:null,\n input_schemas:[],\n content:{\n \"type\": \"object\",\n \"properties\": {}\n }\n } as InputSchemaType);\n }\n\n return (\n \n
\n\n
\n\n \n \n\n Create}\n >\n\n\n \n\n {editSchema &&
}\n
\n }/>\n }/>\n }/>\n }/>\n \n)\n\n\nexport default Integrations;\n","import BaseAPI from \"../../../Services/BaseAPI\";\n\nclass RuleSearchApi extends BaseAPI {\n constructor() {\n super(process.env.API_URL_CORE);\n }\n\n list = (params) => this.makeRequest('get', `${this.url}/rule-search`, params);\n\n}\n\nexport default RuleSearchApi\n","import React, { useState, useEffect } from 'react';\nimport classnames from 'classnames';\nimport {\n DropdownMenu,\n DropdownToggle,\n UncontrolledDropdown\n} from \"reactstrap\";\nimport { StackedFilter } from '../../../../Components/Table/Filter';\nimport { ProductChoices, StatusChoices } from '../../../../Components/Table/FilterChoices';\nimport RightDateAndControls from '../../../../Components/Table/RightDateAndControls';\nimport useApiBatch from '../../../../Hooks/useApiBatch';\nimport TargetSelect from \"../../../../Components/TargetingManager/TargetSelect\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport FilterSummaryTags from \"../../../../Components/Table/FilterSummaryTags\";\nimport {useFilters} from \"../../../../Hooks/useFilters\";\n\nconst Filters = ({ filters, onChange, loading, onRefresh }) => {\n const {onChangeFilter, clearFilter, reset} = useFilters(filters, onChange);\n const [choices, setChoices] = useState({});\n\n\n const batcher = useApiBatch();\n\n // load choices\n useEffect(() => {\n const getChoices = async () => {\n const batches = await batcher.fetch([\n { endpoint: 'verticals', action: 'list' },\n { endpoint: 'attributes', action: 'list', params:{options:true, scope:'routing'} },\n ]);\n if (batches && batches.length) {\n const [verticals, attributes] = batches;\n setChoices({\n type: [\n {value:'order', label:'Order Targeting'},\n {value:'source', label:'Source Routing'},\n {value:'channel', label:'Channel Routing'},\n {value:'vendor', label:'Vendor Routing'},\n ],\n vertical: verticals.map((item) => ({ value: item.id.toString(), label: item.display_name })),\n attribute: attributes,\n status: StatusChoices,\n product: ProductChoices,\n });\n }\n };\n\n if (Object.keys(choices).length === 0) getChoices();\n }, []);\n\n const getLabelForTag = {\n attribute:(value, choices) => {\n let label = '';\n if (value && choices) {\n Object.entries(choices).forEach( ([groupName, group]) => {\n const attr = group.find(attr => attr.alias === value);\n if (attr) {\n label = attr.label;\n }\n })\n }\n return label;\n }\n }\n\n\n return (\n <>\n \n
\n\n
\n {/* Not sure if we are going to do text search\n
\n onChangeFilter('search', val)}\n onClear={clearSearch}\n delay={500}\n />\n
*/}\n\n
\n\n onChangeFilter('attribute', val)}\n attributeGroups={choices.attribute}\n />\n\n\n
\n\n
\n\n \n \n\n \n \n
\n \n \n\n
\n\n
\n\n
\n load()} />\n \n\n \n\n \n\n\n\n {isLoading ? (\n
\n
\n ) : (\n <>\n {filters.attribute && list.length === 0 && (\n
No rules were found \n )}\n {!filters.attribute && (\n
Choose a targeting attribute in the target type dropdown \n )}\n\n {list.length > 0 && (\n
\n
\n )}\n\n \n )}\n\n
\n\n \n
\n
\n {titleCase(type)}\n
\n
\n
\n
\n\n
\n {resource.name}\n \n {resource.status && (\n \n {' '}
\n )}\n\n \n {/* probably don't need subtitle for vendor */}\n
\n {type === 'order' && account && {account.name} | }\n {type !== 'vendor' && {resource.vertical.display_name} | }\n {type !== 'vendor' && {titleCase(resource.product)} }\n
\n
\n\n
\n
\n \n
\n\n
\n
\n {rule_matches.length} {singularOrPlural(rule_matches.length, 'Rule', 'Rules')}\n \n \n \n\n {expanded && (\n \n
} >\n {rule_matches && rule_matches.map((match,i) => (\n \n ))}\n \n\n
\n
\n )\n}\n\nconst TargetingSummary = ({conditions, expression, attributes, highlightAttribute}) => {\n const [expressionMode, setExpressionMode] = useState(false);\n return(\n \n { expressionMode === false ? (\n
\n ) : (
{expression}
)}\n\n { expression && (\n
\n setExpressionMode(!expressionMode)}>\n [\n {expressionMode === true ? 'Description' : 'Expression'}\n ]\n \n
\n )}\n
\n {rule.label}\n \n )\n}\n","import React from 'react';\nimport { Routes, Route } from 'react-router-dom';\nimport Lazify from '../../utils/Lazify';\nimport MatchChecker from './Matching';\nimport AttributeList from './Attributes/List';\nimport InputSchema from \"./InputSchema\";\nimport Integrations from \"./Integrations\";\nimport ProtectedRoute from '../../Components/ProtectedRoute';\nimport SearchByTarget from \"./Rules/SearchByTarget\";\nimport NotFoundPage from '../../Layout/NotFoundPage'\n\n\nconst LazyDnc = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Dnc'));\nconst LazyDba = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Dba'));\nconst LazyPartners = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Partners'));\nconst LazyPermissions = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Permissions'));\nconst LazyPromotions = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Promotions'));\nconst LazyReturnRules = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './ReturnRules'));\nconst LazyRoles = Lazify(() => import(/* webpackChunkName: \"Tools\" */ './Roles'));\n\n\n/*\n * Entry point to all tools routes\n */\nconst Tools = () => (\n\n \n \n\n);\n\nexport default Tools;\n","import React from 'react';\nimport { Navigate, Routes, Route } from 'react-router-dom';\nimport Lazify from '../utils/Lazify';\nimport AdvertiserManager from '../App/AdvertiserManager';\nimport PublisherManager from '../App/PublisherManager';\nimport LoadingBar from './LoadingBar';\nimport ReportsLanding from '../App/Reports/Landing';\nimport Tools from '../App/Tools';\nimport NotFoundPage from './NotFoundPage'\nimport './main_content.scss';\nimport ChangeLog from '../App/ChangeLog'\nimport {ChangeProvider} from '../Providers/ChangeProvider'\nimport ProtectedRoute from '../Components/ProtectedRoute';\nimport '../App/ChangeLog/styles.scss'\n\nconst LazyDashboard = Lazify(() => import(/* webpackChunkName: \"Dashboard\" */ '../App/Dashboard'));\nconst LazyAdManager = Lazify(() => import(/* webpackChunkName: \"AdManager\" */ '../App/AdManager'));\nconst LazyUserManager = Lazify(() => import(/* webpackChunkName: \"UserManager\" */ '../App/UserManager'));\nconst LazyMyProfileModal = Lazify(() => import(/* webpackChunkName: \"UserModals\" */ '../App/UserManager/User/MyProfileModal'));\nconst LazyMyPasswordModal = Lazify(() => import(/* webpackChunkName: \"UserModals\" */ '../App/UserManager/User/MyPasswordModal'));\nconst LazyTwoFactorModal = Lazify(() => import(/* webpackChunkName: \"UserModals\" */ '../App/UserManager/User/TwoFactorModal'));\nconst LazyChangeLog = Lazify(() => import(/* webpackChunkName: \"ChangeLog\" */ '../App/ChangeLog'));\nconst LazyAuctions = Lazify(() => import(/* webpackChunkName: \"Auctions\" */ '../App/Auctions'));\nconst LazyDeliveries = Lazify(() => import(/* webpackChunkName: \"Deliveries\" */ '../App/Deliveries'));\nconst LazyRouting = Lazify(() => import(/* webpackChunkName: \"Routing\" */ '../App/Routing'));\nconst LazyVerticals = Lazify(() => import(/* webpackChunkName: \"Routing\" */ '../App/Verticals'));\nconst LazyPreferences = Lazify(() => import(/* webpackChunkName: \"Preferences\" */ '../App/Preferences'));\nconst LazyNotifications = Lazify(() => import(/* webpackChunkName: \"Notifications\" */ '../App/Notifications'));\n\n/* Component for main content area */\nconst MainContent = () => {\n\n return (\n \n \n\n \n } />\n\n } />\n\n \n\n \n\n \n\n
\n \n \n );\n};\n\nexport default MainContent;\n","import React, { useState, useEffect, useRef, useContext, FormEvent } from 'react';\nimport {\n Row, Col, Form, FormGroup, Input, Button, Spinner,\n} from 'reactstrap';\nimport { StandardAlert } from '@thedmsgroup/mastodon-ui-components';\nimport OtpCodeInput from '../Components/Form/OtpCodeInput';\nimport { AppContext } from '../Providers/AppProvider';\n\ntype TwoFactorVerifyProps = {\n pendingToken: string;\n expiresAt?: string;\n onVerified: (result: any) => void;\n onCancel: () => void;\n};\n\nconst getSecondsRemaining = (expiresAt?: string): number => {\n if (!expiresAt) return 300;\n const diff = Math.floor((new Date(expiresAt).getTime() - Date.now()) / 1000);\n return Math.max(diff, 0);\n};\n\nconst TwoFactorVerify = ({ pendingToken, expiresAt, onVerified, onCancel }: TwoFactorVerifyProps) => {\n const app = useContext(AppContext);\n const [isPosting, setIsPosting] = useState(false);\n const [error, setError] = useState('');\n const [timeRemaining, setTimeRemaining] = useState(() => getSecondsRemaining(expiresAt));\n const [useRecoveryCode, setUseRecoveryCode] = useState(false);\n const timerRef = useRef>();\n\n const toggleMode = () => {\n setUseRecoveryCode((prev) => !prev);\n setError('');\n };\n\n useEffect(() => {\n timerRef.current = setInterval(() => {\n setTimeRemaining((prev) => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n setError('Your verification session has expired. Please log in again.');\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n\n return () => clearInterval(timerRef.current);\n }, []);\n\n const formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };\n\n const handleSubmit = async (code: string) => {\n if (isPosting || timeRemaining <= 0) return;\n\n setIsPosting(true);\n setError('');\n\n const result = await app.api.verify2fa(pendingToken, code);\n\n if (!result) {\n const apiError = app.api.error || {};\n const errorCode = apiError.error;\n\n if (errorCode === 'token_expired') {\n clearInterval(timerRef.current);\n setTimeRemaining(0);\n setError('Your verification session has expired. Please log in again.');\n } else if (errorCode === 'too_many_attempts') {\n clearInterval(timerRef.current);\n setError(apiError.message || 'Maximum attempts exceeded. Please log in again.');\n setTimeout(() => onCancel(), 3000);\n } else {\n setError(apiError.message || 'Invalid verification code. Please try again.');\n }\n\n setIsPosting(false);\n } else {\n onVerified(result);\n }\n };\n\n const handleFormSubmit = (evt: FormEvent) => {\n evt.preventDefault();\n const formEl = evt.target as HTMLFormElement;\n const code = (formEl.elements.namedItem('code') as HTMLInputElement)?.value?.trim();\n if (code) {\n handleSubmit(code);\n }\n };\n\n const expired = timeRemaining <= 0;\n\n return (\n \n Two-Factor Authentication \n \n {useRecoveryCode\n ? 'Enter one of your saved recovery codes'\n : 'Enter the 6-digit code from your authenticator app'}\n
\n\n {error && (\n {error} \n )}\n\n \n \n
\n );\n};\n\nexport default TwoFactorVerify;\n","import React, { useState, useEffect, useRef, useContext } from 'react';\nimport { Row, Col } from 'reactstrap';\nimport { StandardAlert } from '@thedmsgroup/mastodon-ui-components';\nimport TwoFactorEnrollSteps from './TwoFactorEnrollSteps';\nimport { AppContext } from '../Providers/AppProvider';\n\ntype TwoFactorEnrollProps = {\n pendingToken: string;\n expiresAt?: string;\n onEnrolled: (result: any) => void;\n onCancel: () => void;\n};\n\nconst getSecondsRemaining = (expiresAt?: string): number => {\n if (!expiresAt) return 300;\n const diff = Math.floor((new Date(expiresAt).getTime() - Date.now()) / 1000);\n return Math.max(diff, 0);\n};\n\nconst formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n};\n\nconst TwoFactorEnroll = ({ pendingToken, expiresAt, onEnrolled, onCancel }: TwoFactorEnrollProps) => {\n const app = useContext(AppContext);\n const [timeRemaining, setTimeRemaining] = useState(() => getSecondsRemaining(expiresAt));\n const timerRef = useRef>();\n\n useEffect(() => {\n timerRef.current = setInterval(() => {\n setTimeRemaining((prev) => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n return 0;\n }\n return prev - 1;\n });\n }, 1000);\n\n return () => clearInterval(timerRef.current);\n }, []);\n\n const expired = timeRemaining <= 0;\n\n return (\n \n Set Up Two-Factor Authentication \n \n Your account requires two-factor authentication. Please set it up to continue.\n
\n\n {expired && (\n \n Your session has expired. Please log in again.\n \n )}\n\n {!expired && (\n \n Time remaining: {formatTime(timeRemaining)}\n
\n )}\n\n app.api.enrollPending(pendingToken)}\n onConfirm={(code) => app.api.confirmEnrollPending(pendingToken, code)}\n onSuccess={onEnrolled}\n onBack={onCancel}\n disabled={expired}\n />\n \n
\n );\n};\n\nexport default TwoFactorEnroll;\n","import React, {\n useEffect, useRef, useContext, useReducer,\n} from 'react';\nimport { useNavigate, useLocation, useSearchParams } from 'react-router-dom';\nimport { Link } from 'react-router-dom';\nimport {\n Row, Col, Form, FormGroup, FormFeedback, Input, Button, Spinner,\n} from 'reactstrap';\n// eslint-disable-next-line import/no-extraneous-dependencies -- installed via @thedmsgroup/mastodon-ui-components\nimport { toast } from 'react-toastify';\nimport PropTypes from 'prop-types';\nimport { formatDuration } from 'date-fns';\nimport PasswordWithToggle from '../Components/Form/PasswordWithToggle';\nimport {notify, StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport DocTitle from '../Layout/DocTitle';\nimport { AppContext } from '../Providers/AppProvider';\nimport TwoFactorVerify from './TwoFactorVerify';\nimport TwoFactorEnroll from './TwoFactorEnroll';\n\nconst loginStateReducer = (state, action) => {\n switch (action.type) {\n case 'activated':\n // for showing activation message\n return { ...state, activated: true };\n case 'invalidForm':\n return {\n ...state, isPosting: false, isValid: false, formError: action.error, activated: false,\n };\n case 'success':\n return { ...state, isPosting: false, isValid: true };\n case 'fail':\n return {\n ...state, isPosting: false, isValid: false, formError: action.error,\n };\n case 'posting':\n return {\n ...state, isPosting: true, isValid: true, formError: '', activated: false,\n };\n case 'two_factor_required':\n return {\n ...state,\n isPosting: false,\n isValid: true,\n formError: '',\n twoFactorRequired: true,\n pendingToken: action.pendingToken,\n expiresAt: action.expiresAt,\n };\n case 'two_factor_reset':\n return {\n ...state,\n twoFactorRequired: false,\n pendingToken: null,\n expiresAt: null,\n };\n case 'two_factor_enrollment_required':\n return {\n ...state,\n isPosting: false,\n isValid: true,\n formError: '',\n twoFactorEnrollmentRequired: true,\n pendingToken: action.pendingToken,\n expiresAt: action.expiresAt,\n };\n case 'two_factor_enrollment_reset':\n return {\n ...state,\n twoFactorEnrollmentRequired: false,\n pendingToken: null,\n expiresAt: null,\n };\n default:\n return state;\n }\n};\n\nconst Login = () => {\n const app = useContext(AppContext);\n const navigate = useNavigate();\n const location = useLocation();\n const [searchParams] = useSearchParams();\n\n const [loginState, dispatch] = useReducer(loginStateReducer, { isPosting: false, isValid: true, formError: '' });\n\n const inputRef = useRef();\n\n // Do on mount\n useEffect(() => {\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n\n if (app.authError) {\n notify(app.authError, 'warning', { autoClose: false, delay: 500 });\n }\n\n if (location.state && location.state.activated) {\n dispatch({ type: 'activated' });\n }\n\n // unmount\n return () => {\n toast.dismiss();\n };\n }, []);\n\n // Redirect when authorized or if we come here already authorized\n useEffect(() => {\n if (app.isAuthorized) {\n //Check for redir param, location referrer, or go to accounts\n let redir;\n if (searchParams.has('redir')) {\n redir = decodeURIComponent(searchParams.get('redir'));\n if (!redir || redir === '/' || redir === '/login') {\n redir = '/accounts';\n }\n } else {\n redir = location.state?.from || '/accounts'\n }\n\n // setRedirect(redir);\n navigate(redir, { replace: true });\n } else {\n app.authReady();\n }\n }, [app.isAuthorized]);\n\n const handleChange = () => {\n toast.dismiss();\n };\n\n const handleSubmit = (evt) => {\n evt.preventDefault();\n if (loginState.isPosting) return;\n const email = evt.target.email.value.trim();\n const password = evt.target.password.value;\n\n if (!email || !password) {\n // not validating individual fields\n dispatch({ type: 'invalidForm', error: 'Email and password are required' });\n } else {\n execLogin({email, password});\n }\n };\n\n const execLogin = async (credentials) => {\n dispatch({ type: 'posting' });\n const result = await app.api.login(credentials);\n if (!result) {\n\n const error = app.api.error ?? {}\n let errorMessage = error.message ?? 'Invalid email or password. Please try again.'\n\n // Check if the error is due to account lockout\n if (error.reason === 'account_locked' && error.lockout_duration_minutes) {\n const minutes = error.lockout_duration_minutes;\n\n // Format the duration nicely\n let duration;\n if (minutes < 60) {\n duration = `${minutes} minute${minutes !== 1 ? 's' : ''}`;\n } else if (minutes === 60) {\n duration = '1 hour';\n } else {\n const hours = Math.floor(minutes / 60);\n const remainingMinutes = minutes % 60;\n\n if (remainingMinutes === 0) {\n duration = `${hours} hour${hours !== 1 ? 's' : ''}`;\n } else {\n // Use date-fns formatDuration for complex durations\n duration = formatDuration(\n { hours, minutes: remainingMinutes },\n { format: ['hours', 'minutes'] }\n );\n }\n }\n\n errorMessage = `Too many login attempts. For security reasons your account has been locked for ${duration}.`;\n }\n\n\n if (error.reason === 'password_expired') {\n errorMessage = 'Your password has expired and must be reset';\n if (error.token) {\n navigate(`/reset-password/${error.token}?expired=1`, { replace: true, state:{expired:true} });\n }\n }\n\n dispatch({ type: 'fail', error: errorMessage });\n\n } else if (result['2fa_required']) {\n dispatch({\n type: 'two_factor_required',\n pendingToken: result.auth_token,\n expiresAt: result.expires_at,\n });\n } else if (result['2fa_enrollment_required']) {\n dispatch({\n type: 'two_factor_enrollment_required',\n pendingToken: result.auth_token,\n expiresAt: result.expires_at,\n });\n } else {\n dispatch({ type: 'success' });\n app.onLogin(result);\n\n return false;\n }\n }\n\n const handleTwoFactorVerified = (result) => {\n dispatch({ type: 'success' });\n // verify-2fa returns {auth_token, expiration_date}, not the full /me response.\n // Set the token and let authorize() fetch the full user data.\n app.onTwoFactorVerified(result.auth_token);\n };\n\n const handleTwoFactorCancel = () => {\n dispatch({ type: 'two_factor_reset' });\n };\n\n const handleEnrolled = (result) => {\n dispatch({ type: 'success' });\n app.onTwoFactorVerified(result.auth_token);\n };\n\n const handleEnrollmentCancel = () => {\n dispatch({ type: 'two_factor_enrollment_reset' });\n };\n\n if (loginState.twoFactorEnrollmentRequired) {\n return (\n <>\n \n
\n\n \n\n );\n};\n\nLogin.propTypes = {\n location: PropTypes.object,\n};\n\nexport default Login;\n","import React, { useState, useContext } from 'react';\nimport {\n Row, Col, Form, FormGroup, Input, Button, Spinner,\n} from 'reactstrap';\nimport { Link, Navigate } from 'react-router-dom';\nimport * as Yup from 'yup';\nimport {StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport useFormState from '../Hooks/useFormState';\nimport { AppContext } from '../Providers/AppProvider';\nimport DocTitle from '../Layout/DocTitle';\n\nconst validationSchema = Yup.object().shape({\n email: Yup.string().trim()\n .email('The email address is not valid')\n .required('Please enter an email address'),\n});\n\n/*\n * Component with form that submits email to begin password reset process\n */\nconst ForgotPassword = () => {\n const app = useContext(AppContext);\n const [isPosting, setIsPosting] = useState(false);\n const [submitError, setSubmitError] = useState(false);\n const [submitSuccess, setSubmitSuccess] = useState(false);\n const [email, setEmail] = useState('');\n\n const {\n formApi, formIsValid, formValues, formErrors,\n } = useFormState({ email: '' }, validationSchema);\n\n const handleSubmit = (evt) => {\n evt.preventDefault();\n if (isPosting) return;\n setSubmitError(false);\n const isValid = formApi.validate();\n if (isValid) {\n setEmail(email);\n setIsPosting(true);\n submitRequest(email);\n }\n };\n\n const submitRequest = async () => {\n const result = await app.api.requestPasswordReset(formValues.email.trim());\n setIsPosting(false);\n if (result) {\n setSubmitSuccess(true);\n } else {\n // Generic response for bad or unknown email, status 400, name:\"Invalid Request\".\n // For security purposes we show \"success\" even for unknown email\n if (app.api.error.status === 400) {\n setSubmitSuccess(true);\n } else {\n // some problem with the network or api\n setSubmitError(true);\n }\n }\n };\n\n // We should not be here\n if (app.isAuthorized) {\n // or this.props.history.goBack() ?\n return \n Forgot your password? \n Enter the email address associated with your account to request a password reset.
\n \n \n
\n\n\n \n\n );\n};\n\nexport default ForgotPassword;\n","import React, { useState, useContext } from 'react';\nimport { Row, Col, Form, Button, Spinner } from 'reactstrap';\nimport { Link } from 'react-router-dom';\nimport { Navigate, useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';\nimport * as Yup from 'yup';\nimport {StandardAlert, notify} from \"@thedmsgroup/mastodon-ui-components\";\nimport PasswordEntry from '../Components/Form/PasswordEntry';\nimport PasswordRules from './UserManager/User/PasswordRules';\nimport useFormState from '../Hooks/useFormState';\nimport { AppContext } from '../Providers/AppProvider';\nimport DocTitle from '../Layout/DocTitle';\n\nconst validationSchema = Yup.object().shape({\n password: Yup.string()\n .test({\n name: 'pw-length',\n message: ({ value }) =>\n `Password must be at least 15 characters. Current length: ${value ? value.length : 0}`,\n test: (value) => {\n if (!value) return true; // Allow empty string if not required elsewhere\n return value.length >= 15;\n },\n })\n .required('Please enter a new password'),\n confirm_password: Yup.string()\n .oneOf([Yup.ref('password'), null], 'Passwords must match (please confirm)'),\n});\n\n// with length checks: https://www.reactnativeschool.com/build-and-validate-forms-with-formik-and-yup/checking-field-equality-confirm-password\n\nconst ResetPassword = () => {\n const app = useContext(AppContext);\n const navigate = useNavigate();\n const [searchParams] = useSearchParams();\n const {resetToken:token} = useParams();\n const location = useLocation();\n const isPasswordExpiration = ( searchParams.get('expired') || location.state?.expired) ;\n const initialFormValues = { password: '', confirm_password: '' };\n const { formApi, formValues, formErrors } = useFormState(initialFormValues, validationSchema);\n const [isPosting, setIsPosting] = useState(false);\n const [resetError, setResetError] = useState(false);\n const [tokenExpiredError, setTokenExpiredError] = useState(false);\n const [tokenInvalidError, setTokenInvalidError] = useState(false);\n const [passwordRuleErrors, setPasswordRuleErrors] = useState([]);\n\n if (app.isAuthorized) {\n return \n Reset Password \n\n { !token && (A reset token is required. \n Request Password Reset\n )}\n\n { resetError && (\n \n {resetError}\n \n )}\n\n { tokenExpiredError === true && (\n \n We were unable to reset your password. The reset link has expired.\n Please \n )}\n\n { tokenInvalidError === true && (\n \n We were unable to reset your password. The reset link is invalid.\n Please \n )}\n\n {isPasswordExpiration && (\n Your password has expired and must be changed. This is a security measure\n {' '} to prevent unauthorized access to your account.
\n )}\n\n \n \n
\n\n\n\n \n\n );\n};\n\nexport default ResetPassword;\n","import React, {\n useState, useEffect, useReducer, useContext,\n} from 'react';\nimport { Row, Col, Form, Button, Spinner } from 'reactstrap';\nimport { Link, useParams } from 'react-router-dom';\nimport {Navigate, useNavigate} from \"react-router-dom\";\nimport * as Yup from 'yup';\nimport {StandardAlert, notify} from \"@thedmsgroup/mastodon-ui-components\"\nimport PasswordEntry from '../Components/Form/PasswordEntry';\nimport useFormState from '../Hooks/useFormState';\nimport { AppContext } from '../Providers/AppProvider';\nimport DocTitle from '../Layout/DocTitle';\nimport PasswordRules from './UserManager/User/PasswordRules';\n\nconst validationSchema = Yup.object().shape({\n password: Yup.string()\n //disabled strength test for now\n // .test('passwordStrength', 'Please strengthen your password', function (pw) {\n // // return pw ? this.options.context.passwordScore >= 3 : true;\n // return true;\n // })\n //.min(15, 'Passwords must have 15 or more characters')\n .test({\n name: 'pw-length',\n message: ({ value }) =>\n `Password must be at least 15 characters. Current length: ${value ? value.length : 0}`,\n test: (value) => {\n if (!value) return true; // Allow empty string if not required elsewhere\n return value.length >= 15;\n },\n })\n .required('Please enter a new password'),\n confirm_password: Yup.string()\n .oneOf([Yup.ref('password'), null], 'Passwords must match (please confirm)'),\n});\n\nconst activationStateReducer = (state, action) => {\n switch (action.type) {\n // case 'invalidForm':\n // return {...state, isPosting:false, isValid:false, formError:action.error};\n case 'activationUnknown':\n return { ...state, isPosting: false, status: 'unknown' };\n case 'activationLoaded':\n let status = 'pending';\n if (action.data.user_verified) {\n status = 'verified';\n } else if (action.data.is_expired) {\n status = 'expired';\n }\n\n return { ...state, isPosting: false, status };\n case 'success':\n return {\n ...state, isPosting: false, isValid: true, result: 'success', formError: '', passwordRuleErrors: [],\n };\n case 'fail': // error from server\n return {\n ...state, isPosting: false, isValid: true, result: 'fail', formError: action.error, passwordRuleErrors: [],\n };\n case 'password_fail': // error from server about password rules\n return {\n ...state, isPosting: false, isValid: true, result: 'password_fail', formError: '', passwordRuleErrors: action.error ? action.error.split('|') : [],\n };\n case 'posting':\n return {\n ...state, isPosting: true, isValid: true, formError: '', result: '',\n };\n default:\n return state;\n }\n};\n\nconst ActivateUser = () => {\n\n const app = useContext(AppContext);\n const navigate = useNavigate();\n const {activationToken:token} = useParams();\n const initialFormValues = { password: '', confirm_password: '' };\n const [activationState, dispatch] = useReducer(activationStateReducer, {\n isPosting: false,\n isValid: true,\n formError: '',\n passwordRuleErrors: [],\n status: 'loading',\n });\n const { formApi, formValues, formErrors } = useFormState(initialFormValues, validationSchema);\n const [activationInfo, setActivationInfo] = useState(null);\n\n if (app.isAuthorized) {\n return \n Welcome \n Account Verified \n \n According to our records, your account has already been verified. Please\n
\n \n )}\n\n {activationState.status === 'expired' && (\n <>\n Welcome \n Activation Link Expired \n \n We're sorry, your activation link has expired. Please contact your Mastodon account manager or\n UE.co customer service \n .\n
\n \n Return to sign-in\n \n \n )}\n\n {activationState.status === 'unknown' && (\n <>\n Activate My Account \n Unknown Activation \n \n We're sorry, we were unable to find your activation record. Please contact your Mastodon account manager or\n {' '}UE.co customer service \n .\n
\n \n Return to sign-in\n \n \n )}\n\n {/* All good, show the form */}\n {activationState.status === 'pending' && (\n <>\n Welcome \n To activate your account, please enter and confirm a password.
\n\n { !activationState.isValid && ({activationState.formError} )}\n { activationState.result === 'fail' && (\n \n We were unable to activate your account.\n Please try again, or contact your Mastodon account manager or DMS Group customer service .\n \n )}\n { activationState.result === 'password_fail' && (\n \n The submitted password does not meet security requirements.\n \n )}\n\n \n\n \n )}\n \n
\n \n );\n};\n\nexport default ActivateUser;\n","// There are unlikely to change any time soon, so hard-coding\n// for crafting example JSONs are fine.\nconst piiFields = [\n 'first_name',\n 'last_name',\n 'address',\n 'address2',\n 'phone',\n 'email',\n];\n\nconst getPing = (token, schema) => {\n return {\n source_token: token,\n data: schema,\n }\n}\n\nconst getPingPost = (schema) => {\n let j = {\n \"data\": {},\n \"accepted_bid_ids\": [\n 1,\n ],\n \"accepted_buyers\": [\n \"Acme Enterprises\",\n ],\n }\n\n if (!schema) return j;\n\n Object.keys(schema).map(key => {\n if (piiFields.includes(key)) {\n j.data[key] = schema[key]\n }\n })\n\n // The sample payload only carries the fields the source asks for, which may not\n // include any of the PII fields above. Showing the whole payload beats showing\n // an empty one — the step is still about what to send once a bid is accepted.\n if (!Object.keys(j.data).length) {\n j.data = schema\n }\n\n return j\n};\n\nconst ResponseScenarios = {\n ping: [\n {\n label: 'Ping Success',\n description: \"\",\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 0,\n \"sold\": null,\n \"matched\": true,\n \"bid_amount\": 3.3,\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n {\n label: 'Legs Ping Success',\n description: `\"Legs\" are sales to multiple buyers. This ping returned 2 bids, one exclusive and one shared. You are free to accept either bid by including the bid_id in the accepted_bids of your POST request. If you don't specify accepted_bids, the bids in default_accepted_bid_ids will be accepted by default. In most cases this is what you want.`,\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"bids\":\n [\n {\n \"bid_id\": 1,\n \"buyer_name\": \"Acme Enterprises\",\n \"exclusive\": true,\n \"bid_amount\": 3.3,\n \"sold\": null,\n },\n {\n \"bid_id\": 2,\n \"buyer_name\": \"MegaCorp\",\n \"exclusive\": false,\n \"bid_amount\": 1.2,\n \"sold\": null,\n }\n ],\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 0,\n \"sold\": null,\n \"matched\": true,\n \"bid_amount\": 3.3,\n \"default_accepted_bid_ids\": [\n 1\n ],\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n {\n label: 'Ping – Unmatched',\n description: `This ping did not return any bids. This could mean that there are currently no buyers interested in this lead, or that there is information missing from the lead that our buyers target on. Make sure to submit as much information as possible to increase your chances of matching.`,\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"bids\": [],\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 0,\n \"sold\": null,\n \"matched\": false,\n \"bid_amount\": 0,\n \"default_accepted_bid_ids\": [],\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n {\n label: 'Ping – Data Issues',\n description: `This ping contained data that triggered validation issues.`,\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"bids\": [],\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 0,\n \"sold\": null,\n \"matched\": false,\n \"bid_amount\": 0,\n \"default_accepted_bid_ids\": [],\n \"time_ms\": 324,\n \"data_issues\": {\n \"todo\": \"todo\"\n }\n }\n }\n ],\n pingpost: [\n {\n label: 'Sale',\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 3.3,\n \"sold\": true,\n \"matched\": true,\n \"bid_amount\": 3.3,\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n {\n label: 'Legs Sale',\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"bids\":\n [\n {\n \"bid_id\": 1,\n \"buyer_name\": \"Acme Enterprises\",\n \"exclusive\": true,\n \"bid_amount\": 3.3,\n \"sold\": true,\n },\n {\n \"bid_id\": 2,\n \"buyer_name\": \"MegaCorp\",\n \"exclusive\": false,\n \"bid_amount\": 1.2,\n \"sold\": false,\n }\n ],\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 3.3,\n \"sold\": true,\n \"matched\": true,\n \"bid_amount\": 3.3,\n \"default_accepted_bid_ids\": [\n 1\n ],\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n {\n label: 'No Sale',\n data: {\n \"auction_id\": \"1b531973-36d2-44cc-9af2-dd32c1333c64\",\n \"bids\":\n [\n {\n \"bid_id\": 1,\n \"buyer_name\": \"Acme Enterprises\",\n \"exclusive\": true,\n \"bid_amount\": 3.3,\n \"sold\": false,\n },\n {\n \"bid_id\": 2,\n \"buyer_name\": \"MegaCorp\",\n \"exclusive\": false,\n \"bid_amount\": 1.2,\n \"sold\": false,\n }\n ],\n \"expires_at\": \"2024-12-19T23:30:50.95226922Z\",\n \"payout\": 0,\n \"sold\": false,\n \"matched\": true,\n \"bid_amount\": 3.3,\n \"default_accepted_bid_ids\": [\n 1\n ],\n \"time_ms\": 324,\n \"data_issues\": {}\n }\n },\n ],\n}\n\nexport const pingRequestSchema = {\n type: \"object\",\n properties: {\n source_token: {\n type: \"string\",\n description: \"The source token for this traffic type\",\n },\n data: {\n type: \"object\",\n description: \"The lead data (refer to full schema on the left)\",\n }\n }\n}\n\nexport const pingPostRequestSchema = {\n type: \"object\",\n properties: {\n data: {\n type: \"object\",\n description: \"The remaining lead data (PII)\",\n },\n accepted_bid_ids: {\n type: \"array\",\n description: \"(Optional) The ids of the bids you wish to sell to. If left empty, it will default to `default_accepted_bid_ids` from the ping response.\"\n },\n accepted_buyers: {\n type: \"array\",\n description: \"(Optional) The names of the buyers you wish to sell to, as specified by the `buyer_name` property on each bid. If left empty, sales will be executed according to `default_accepted_bid_ids` from the ping response.\"\n }\n }\n}\n\n// also doubles as pingpost/post response schema\nexport const pingResponseSchema = {\n type: \"object\",\n properties: {\n auction_id: {\n type: \"string\",\n description: \"The ID of the auction your ping created.\",\n },\n bids: {\n type: \"array\",\n items: {\n properties: {\n bid_id: {\n type: \"integer\",\n description: \"The ID of the bid. This is an increment within the auction: 1, 2, 3, etc..\",\n },\n buyer_name: {\n type: \"string\",\n description: \"The name of the entity who is buying the lead. For TPCA purposes, this is the DBA (doing business as) name.\",\n },\n exclusive: {\n type: \"boolean\",\n description: \"If true, the buyer is buying the lead exclusively and you cannot sell it to any other party. If false, it is a shared sale, and you are free to sell the lead to other parties. If your platform does not handle bid-level exclusivity, please use the exclusive: true/false flag on the PING to only obtain exclusive or shared leads in the response.\"\n },\n bid_amount: {\n type: \"float\",\n description: \"The dollar amount of the bid.\"\n },\n sold: {\n type: \"boolean\",\n description: \"Whether this bid has successfully been sold to. On the ping response this field has a null value, because no sale decision has been made yet. After the POST, it is either true or false.\"\n }\n }\n }\n },\n expires_at: {\n type: \"string\",\n description: \"The expiration time of this auction (in RFC3339 format). All posts received after this deadline are rejected.\",\n },\n payout: {\n type: \"float\",\n description: \"The total dollar payout of this auction. On ping response this is zero, because no sale decision has been made yet. On post this will be the total amount of all sold bids.\",\n },\n sold: {\n type: \"boolean\",\n description: \"Whether this auction had any sales. On the ping response this field has a null value, because no sale decision has been made yet. After the POST, it is either true or false.\",\n },\n matched: {\n type: \"boolean\",\n description: \"Whether this auction has any matches. This is a convenience property which is true when there are 1 or more bids, false otherwise.\"\n },\n bid_amount: {\n type: \"float\",\n description: \"The total dollar bid amount of this auction, corresponding to the default_accepted_bid_ids array. If you specify your own accepted_bid_ids on the POST, this amount can change accordingly.\"\n },\n default_accepted_bid_ids: {\n type: \"array\",\n description: \"The bid IDs of bids that we recommend selling to. You are free to submit a different bid selection, as long as it does not violate exclusivity constraints.\"\n },\n time_ms: {\n type: \"float\",\n description: \"The time it took to process your request, in milliseconds. This is measured server-side and excludes time on the network.\"\n },\n data_issues: {\n type: \"object\",\n description: \"Validation issues with the data you submitted.\",\n properties: {\n unexpected_fields: {\n type: \"array\",\n description: \"Fields that were submitted that are not part of our lead schema. This should help identify potential spelling mistakes in field names, or interacting with the wrong source.\"\n },\n invalid_fields: {\n type: \"array\",\n description: \"Fields that had formatting issues (invalid dates, malformed phone numbers..). These fields are removed from the data before we process it.\"\n },\n required_fields: {\n type: \"array\",\n description: \"Fields that are required but were not submitted. If they were submitted, please check invalid_fields whether they have been removed for formatting issues.\"\n }\n }\n }\n }\n}\n\n/*\n * CALL TRANSFERS (warm transfer)\n * Calls traffic posts to a different endpoint and returns a transfer_number + billable_duration.\n * The API does not return this content, so examples are hard-coded (same approach as the lead samples above).\n */\nexport const callsPingUrl = \"https://matching.platform.ue.co/ping\";\n\n// Fields that become required when posting calls traffic (highlighted in the schema table).\nexport const callsRequiredFields = ['phone_suffix', 'tcpa_disclosure'];\n\nexport const getCallsPingMin = (token) => ({\n source_token: token ?? '',\n data: {\n phone_suffix: \"1234\",\n zipcode: \"92109\",\n trusted_form_certificate_id: \"433cb911f1698abec3a8c3514fad789c2541e823\",\n tcpa_disclosure: \"By providing your phone number you agree...\",\n }\n});\n\nexport const getCallsPingRecommended = (token) => ({\n source_token: token ?? '',\n data: {\n phone_suffix: \"1234\",\n phone: \"5551234567\",\n first_name: \"Jane\",\n last_name: \"Doe\",\n address: \"123 Sunshine Ave\",\n city: \"Encinitas\",\n state: \"CA\",\n zipcode: \"92024\",\n date_of_birth: \"1985-03-12\",\n email: \"jane.doe@example.com\",\n tcpa_disclosure: \"By providing your phone number you agree...\",\n tcpa_one_to_one_consent: true,\n utm_source: \"publisher_xyz\",\n utm_medium: \"inbound_call\",\n utm_campaign: \"auto_q2_2026\",\n external_id: \"pub-call-9981273\",\n form_begin: \"2026-05-21T17:32:10.000Z\",\n form_submit: \"2026-05-21T17:34:02.000Z\",\n }\n});\n\nexport const callsPingResponse = {\n auction_id: \"f924cbe3-1556-4915-9758-558da7645233\",\n visitor_id: \"f4de448c-5f70-4f61-a85a-0f8add0a91fd\",\n matched: true,\n bids: [\n {\n bid_id: 1,\n buyer_name: \"DMS\",\n bid_amount: 12.42,\n exclusive: false,\n sold: null,\n transfer_number: \"+14344855712\",\n billable_duration: 120,\n }\n ],\n expires_at: \"2026-05-21T18:27:33.036288916Z\",\n payout: 0,\n sold: null,\n bid_amount: 12.42,\n default_accepted_bid_ids: [1],\n time_ms: 1717,\n data_issues: {}\n};\n\nexport const callsResponseSchema = {\n type: \"object\",\n properties: {\n auction_id: {type: \"string\", description: \"Mastodon ID for this auction.\"},\n matched: {type: \"boolean\", description: \"If false, do not attempt transfer. No buyer matched.\"},\n bids: {\n type: \"array\",\n items: {\n properties: {\n transfer_number: {type: \"string (E.164)\", description: \"The number to warm-transfer the consumer to for this bid.\"},\n billable_duration: {type: \"integer\", description: \"Minimum call duration in seconds for the call to be marked sold.\"},\n }\n }\n },\n default_accepted_bid_ids: {type: \"array\", description: \"The bid IDs that will be auto-accepted once the transfer occurs.\"},\n expires_at: {type: \"datetime\", description: \"Offer expiry. Transfer must be initiated before this timestamp.\"},\n sold: {type: \"boolean/null\", description: \"null on Ping — set once a transferred call passes billable_duration.\"},\n data_issues: {type: \"object\", description: \"Map of field-level data quality issues. Empty when none detected.\"},\n }\n};\n\n/*\n * CALLS PING/POST (optional second step)\n * The PII post uses the same endpoint as leads: POST /pingpost/{auction_id}.\n * For calls the post records PII and fires listeners but does not execute a sale —\n * that still happens when the transferred call arrives — so `sold` stays null here.\n * Its real value: a full `phone` supersedes the ping's `phone_suffix` as the expected\n * call origin, so the inbound call is matched on the whole number instead of 4 digits.\n */\nexport const callsPingPostUrl = \"https://matching.platform.ue.co/pingpost/{auction_id}\";\n\nexport const getCallsPingPostMin = () => ({\n data: {\n phone: \"5551234567\",\n }\n});\n\nexport const getCallsPingPostRecommended = () => ({\n data: {\n phone: \"5551234567\",\n first_name: \"Jane\",\n last_name: \"Doe\",\n email: \"jane.doe@example.com\",\n address: \"123 Sunshine Ave\",\n address2: \"Apt 4\",\n },\n accepted_bid_ids: [1],\n});\n\nexport const callsPingPostResponse = {\n auction_id: \"f924cbe3-1556-4915-9758-558da7645233\",\n visitor_id: \"f4de448c-5f70-4f61-a85a-0f8add0a91fd\",\n matched: true,\n bids: [\n {\n bid_id: 1,\n buyer_name: \"DMS\",\n bid_amount: 12.42,\n exclusive: false,\n sold: null,\n transfer_number: \"+14344855712\",\n billable_duration: 120,\n }\n ],\n expires_at: \"2026-05-21T18:27:33.036288916Z\",\n payout: 0,\n sold: null,\n bid_amount: 12.42,\n default_accepted_bid_ids: [1],\n time_ms: 214,\n data_issues: {}\n};\n\nexport const callsPingPostRequestSchema = {\n type: \"object\",\n properties: {\n data: {\n type: \"object\",\n description: \"The remaining consumer data (PII). Sending the full phone is the point of this step: it replaces the 4-digit phone_suffix as the number we expect the transfer to arrive from.\",\n },\n accepted_bid_ids: {\n type: \"array\",\n description: \"(Optional) The bid you wish to sell to. Call auctions accept at most one bid; sending more than one is rejected. If left empty, default_accepted_bid_ids from the Ping response is used.\",\n },\n }\n};\n\n// Post-specific failures. The error body is {\"Error\": \"\"}, so the message itself\n// is the code a vendor can match on.\nexport const callsPingPostErrors = [\n {http: '404', code: '(empty body)', meaning: 'No auction matched the auction_id in the URL.'},\n {http: '400', code: 'auction has already closed', meaning: 'The offer expired or the auction was already resolved. Ping again.'},\n {http: '400', code: 'pii has already been posted', meaning: 'This auction already received a PII post. Post at most once per auction.'},\n {http: '400', code: 'pii does not match the pii already on file for this auction', meaning: 'The posted consumer differs from the one already recorded on this auction.'},\n {http: '400', code: 'call auctions can only accept one bid', meaning: 'More than one id was sent in accepted_bid_ids.'},\n];\n\nexport const callsErrors = [\n {http: '400', code: 'missing_required_field', meaning: 'A required Ping field was missing or empty. phone_suffix is the most common cause.'},\n {http: '400', code: 'invalid_phone_suffix', meaning: 'phone_suffix failed format validation.'},\n {http: '401', code: 'unauthorized', meaning: 'Bearer token missing or invalid.'},\n {http: '403', code: 'source_token_invalid', meaning: 'source_token is not provisioned for calls traffic.'},\n];\n\nexport {getPing, getPingPost, ResponseScenarios};\n","import React, {useState, useEffect} from \"react\";\nimport {HelpPopper, TabNav} from \"@thedmsgroup/mastodon-ui-components\";\nimport {\n Alert,\n Row,\n Col,\n Button,\n DropdownMenu,\n DropdownItem,\n DropdownToggle,\n FormGroup,\n Label,\n Input,\n Nav,\n NavItem,\n NavLink,\n Spinner,\n Table,\n TabPane,\n TabContent,\n UncontrolledButtonDropdown,\n} from \"reactstrap\";\nimport PageSection from \"../../../../Layout/PageSection\";\n\nimport {\n getPing,\n getPingPost,\n pingRequestSchema,\n ResponseScenarios,\n pingResponseSchema,\n pingPostRequestSchema,\n callsPingUrl,\n callsRequiredFields,\n getCallsPingMin,\n getCallsPingRecommended,\n callsPingResponse,\n callsResponseSchema,\n callsErrors,\n callsPingPostUrl,\n getCallsPingPostMin,\n getCallsPingPostRecommended,\n callsPingPostResponse,\n callsPingPostRequestSchema,\n callsPingPostErrors,\n} from \"./samples\";\n\nimport \"highlight.js/styles/foundation.min.css\";\nimport hljs from 'highlight.js';\nimport {CopyButton} from \"@thedmsgroup/mastodon-ui-components\";\nimport '../../../Public/PublisherPost.scss';\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport {faLongArrowAltRight} from \"@fortawesome/free-solid-svg-icons\";\nimport InputWithIcon from '../../../../Components/Form/InputWithIcon'\nimport {useDebouncedCallback} from 'use-debounce'\n\nconst pingUrl = \"https://matching.platform.ue.co/ping\"\nconst pingPostUrl = \"https://matching.platform.ue.co/pingpost/{auction_id}\"\nconst postUrl = \"https://matching.platform.ue.co/post\"\n\nconst wrapSchema = (token, schema) => {\n return {\n type: \"object\",\n properties: {\n source_token: {\n type: \"string\",\n description: \"The source token for this traffic type\",\n example: token,\n required: true,\n },\n exclusive: {\n type: \"boolean\",\n description: \"Whether you want only exclusive bids (true) or shared bids (false). Leave out or pass null to get both types of bids.\",\n default: null,\n },\n data: { ...schema, description: \"The attributes describing the lead\" },\n }\n }\n}\n\n/*\n * PUBLISHER POSTING INSTRUCTIONS\n */\nconst PostingInstructions = ({sources, apiKey, isLoading}) => {\n const [mode, setMode] = useState('pingpost') //pingpost, direct, calls\n const [pingPostStep, setPingPostStep] = useState('ping') //ping, pingpost\n const [callsStep, setCallsStep] = useState('ping') //ping, pingpost, transfer\n const [source, setSource] = useState();\n const [schema, setSchema] = useState();\n const [fieldSearch, setFieldSearch] = useState('');\n const [sourceOptions, setSourceOptions] = useState([]);\n\n // Calls traffic posts to a different endpoint and adds call-transfer steps.\n // Primary signal is `product === 'calls'` (must be added to the instructions payload).\n // Fallback: treat any source whose name contains \"calls\" as a calls source.\n const callsCapable = source?.product === 'calls' || /calls/i.test(source?.name ?? '');\n\n\n // const opts = [];\n // if (sources) {\n // opts = [];\n // sources.map((src) => {\n // if (src.status === 'active') {\n // opts.push({value: src.id, label: src.name})\n // if (!source)\n // setSource(src)\n // }\n // })\n // }\n //\n useEffect(() => {\n if (sources) {\n const activeSources = sources.filter(src => src.status === 'active')\n\n setSourceOptions(activeSources.map(src => {\n return {value:src.id, label:src.name}\n }));\n if (activeSources.length) {\n setSource(activeSources[0]);\n setSchema(wrapSchema(activeSources[0].token, activeSources[0].schema));\n }\n\n }\n }, [sources])\n\n // Calls sources show only the Call Transfers tab; everything else shows Ping/Post + Direct Post.\n useEffect(() => {\n setMode(callsCapable ? 'calls' : 'pingpost');\n }, [callsCapable])\n\n const handleFieldSearchDebounced = useDebouncedCallback((val) => {\n setFieldSearch(val);\n }, 400);\n\n const handleSourceTokenChange = (sourceId) => {\n setSource(old => {\n const inst = sources.find(s => s.id == sourceId);\n return inst || old\n })\n }\n\n const exampleJsonPost = {\n source_token: source?.token ?? '',\n data: source?.schema_example ?? '',\n };\n\n if (!isLoading && !apiKey) {\n return \n
Uh oh \n
Something went wrong. The link may be invalid.
\n
\n\n\n \n \n \n Source\n \n \n )}*/}\n\n\n \n \n Source Token\n \n \n \n \n\n {/*{app.isAuthorized && (\n \n \n API Key\n \n \n \n \n )}*/}\n\n \n\n
\n\n \n {callsCapable ? (\n Call Transfers \n ) : (\n <>\n Ping/Post \n Direct Post \n \n )}\n \n\n \n Input Schema \n {mode === 'calls' ? (\n Send consumer attributes to request a buyer offer and a transfer number. phone_suffix and tcpa_disclosure are required for calls traffic.
\n ) : (\n See below how to send lead information to us via API, and what to expect in return.
\n )}\n\n Headers \n \n {/*todo: sticky table header */}\n
\n \n \n Name \n Value \n \n \n \n \n Authorization \n Bearer {apiKey} \n \n \n Content-Type \n application/json \n \n \n
\n
\n
Params {fieldSearch && (Filtered) } \n handleFieldSearchDebounced(e.target.value)}\n onClear={()=>setFieldSearch('')}\n className=\"mb-2\"\n />\n \n\n \n {/*todo: sticky table header */}\n
\n \n\n \n )}\n {mode === 'calls' && (\n
\n\n \n )\n};\n\n// Numbered step heading used across modes\nconst StepHeader = ({num, title, children}) => (\n \n {num &&
{num}
}\n
\n
{title}
\n {children &&
{children}
}\n
\n
\n Request URL \n \n \n
\n \n);\n\n// PING/POST mode: two steps (ping, then pingpost)\nconst PingPostMode = ({step, setStep, source, apiKey}) => (\n <>\n \n Step 1: Ping \n Step 2: PingPost \n \n \n \n \n Offer lead properties to advertisers without sending PII. Returns bids so you can decide whether, and to whom, to post.\n \n \n Ping is the first of two parts of a sale and is not a complete transaction.\n \n \n \n \n \n Send the remaining contact/PII for the consumer. This completes the sale and is delivered to the end buyer in near real-time.\n \n \n \n \n \n);\n\n// DIRECT POST mode: single full-lead post\nconst DirectMode = ({request, apiKey}) => (\n <>\n \n Send a full lead to be sold immediately — no separate ping required.\n \n \n \n Step 1: Ping (HTTP) \n Step 2: PingPost (HTTP, optional) \n Step 3: Transfer (Telephony) \n \n \n \n \n POST consumer attributes. On success you receive a transfer_number, bid_amount, and an expires_at deadline. phone_suffix is required. \n \n \n \n \n \n \n Send the remaining consumer contact data against the auction_id from Step 1. This does not complete the sale — the sale is still recorded when the transferred call arrives — so sold stays null on the response.\n \n \n This step is optional. Skip it and go straight to the transfer if you have no PII to send.\n \n \n Recommended: post the consumer's full phone. It supersedes the 4-digit phone_suffix from the Ping as the number we expect the transfer to arrive from, so the call is matched on the whole number rather than 4 digits — which matters when several of your calls share a suffix.\n \n \n \n \n \n \n Once you have a transfer_number, bridge the consumer to it. The following must hold for the sale to be recorded.\n \n \n Transfer must be initiated before expires_at on the Ping response. \n The ANI presented on transfer must contain the same phone_suffix sent on the Ping — this is what matches the inbound call to the offer. \n CallerID pass-through must be preserved end-to-end from the publisher's switch through to the destination. \n The call must remain connected for at least billable_duration seconds for the sale to be recorded. \n If multiple recent calls share the same phone_suffix under the same source_token, the most recent Ping wins. \n \n \n \n \n);\n\n// Calls request/response examples: request offers Minimum/Recommended payloads + errors; response shows the offer + schema\nconst CallsPhaseExamples = ({source, apiKey}) => {\n const [phase, setPhase] = useState('request');\n const token = source?.token;\n const requestScenarios = [\n {label: 'Minimum', data: getCallsPingMin(token)},\n {label: 'Recommended', data: getCallsPingRecommended(token)},\n ];\n\n return (\n \n
\n \n setPhase('request')}>Request \n \n \n setPhase('response')}>Response \n \n \n\n
\n \n \n\n \n When no buyer matches, the API returns 200 with matched: false and an empty bids array — not an error. Do not attempt transfer.\n \n \n\n \n Response Schema \n \n \n \n
\n
\n \n setPhase('request')}>Request \n \n \n setPhase('response')}>Response \n \n \n\n
\n \n Request Schema \n \n\n \n \n\n \n \n The response is the same shape as the Ping response. sold is still null and payout is still 0 — both are settled by the call, not by this post.\n \n\n Response Schema \n \n \n \n
Errors \n \n \n HTTP Code Meaning \n \n {errors.map((e, i) => (\n \n {e.http} \n {e.code}{e.meaning} \n \n ))}\n \n
\n \n);\n\nconst Schema = ({schema, search, requiredFields}) => {\n return \n \n \n Field Name \n Data Type \n Required \n Description \n Example \n \n \n \n {schema && <>\n {getRows(schema.properties, 0, search, requiredFields)}\n }\n \n
\n};\n\nfunction getRows(properties, indent = 0, search, requiredFields) {\n let out = []\n for (let key of Object.keys(properties)) {\n let field = properties[key]\n let example = field.example\n if (!example) {\n if (field.enum && field.enum.length > 0) {\n example = field.enum[0] // todo random?\n } else if (field.type === \"boolean\") {\n example = \"false\"\n }\n }\n\n // Search filtering:\n // If subfields have a match, show the parent field\n // else, only show parent field if it matches\n let subfields\n if (field.type === 'array' && field.items?.properties) {\n subfields = getRows(field.items?.properties, indent+1, search, requiredFields)\n } else if (field.type === 'object' && field.properties) {\n subfields = getRows(field.properties, indent+1, search, requiredFields)\n }\n\n // Calls traffic makes some otherwise-optional fields required (highlighted in orange).\n const callsRequired = requiredFields?.includes(key)\n\n if (!search || subfields?.length || (search && key.toLowerCase().includes(search.toLowerCase()))) {\n out.push(\n {/*{[...Array(indent)].map((e, i) => )}{key} */}\n {indent > 0 && }{key} \n {field.type} \n {field.required\n ? <>\n This value can be provided on the POST if it is not available at the time of the PING.\n
}\n : callsRequired\n ? \n : '-'} \n \n {field.description}\n {callsRequired && Required for Call Transfers
}\n {/* Not enforced, but expected often enough to be worth sending — and it is\n what the sample request is built from, so say so here too. */}\n {field.recommended && !field.required && (\n Recommended — included in the sample request
\n )}\n {field.enum?.length > 0 && Choices: \n
{field.enum.map((v, i) => {v} )} \n
\n {example != null && (field.type === \"string\" ? '\"' + example + '\"' : example)} \n )\n\n if (subfields) {\n out = out.concat(subfields)\n }\n }\n\n }\n\n return out\n}\n\n// Shows examples for request and response\nconst PhaseExamples = ({request, responses, requestSchema, responseSchema, url, apiKey}) => {\n const [phase, setPhase] = useState('request');\n\n return (\n \n\n \n \n setPhase('request')}>Request \n \n \n setPhase('response')}>Response \n \n \n\n \n\n \n Request Schema \n \n \n\n \n\n Response Schema \n \n\n \n
\n )\n}\n\nconst ResponseSchema = ({schema}) => {\n return \n \n \n Field Name \n Type \n Description \n \n \n \n {getResponseRows(schema.properties)}\n \n
\n}\n\nfunction getResponseRows(properties, indent = 0) {\n let out = []\n for (let key of Object.keys(properties)) {\n let field = properties[key]\n //Key: note that same 'key' may exist at different levels so we use indent value to make react keys unique\n out.push(\n {indent > 0 && \n {field.type} \n {field.description} \n )\n\n if (field.type === 'array' && field.items?.properties) {\n out = out.concat(getResponseRows(field.items?.properties, indent+1))\n }\n if (field.type === 'object' && field.properties) {\n out = out.concat(getResponseRows(field.properties, indent+1))\n }\n }\n\n return out\n}\n\n// This shows request or response, but only response has scenarios\nconst ExampleDisplay = ({defaultData, scenarios=[], apiKey, url}) => {\n const [currentScenario, setCurrentScenario] = useState(scenarios.length ? scenarios[0] : {data: defaultData})\n const [dataView, setDataView] = useState('JSON');\n\n const handleChangeScenario = (scenario) => {\n if (scenario) {\n setCurrentScenario(scenario)\n }\n }\n\n return (\n \n {scenarios?.length > 1 && (\n
\n\n {scenarios.map((sc,i) => (\n handleChangeScenario(sc)}\n outline={currentScenario?.label !== sc.label}\n className=\"me-1\"\n key={`scn-${i}`}\n >\n {sc.label}\n \n ))}\n
\n )}\n\n {currentScenario?.description &&
{currentScenario.description}
}\n\n
\n \n \n {dataView}\n \n \n setDataView('JSON')}>JSON \n setDataView('Curl')}>Curl \n \n \n
\n\n {currentScenario ? (\n <>\n {dataView === 'JSON' ? (\n
\n ) : (\n
\n )}\n \n ) : (\n
No data example found
\n )}\n\n
\n \n \n
\n \n \n );\n};\n\nconst curlExample = (json, apiKey, url) => `curl \\\\\n --header 'Authorization: Bearer ${apiKey}' \\\\\n --json '\n ${JSON.stringify(json, null, 4)}' \\\\\n ${url}`\n\nconst CurlExample = ({json, apiKey, url}) => {\n const example = curlExample(json, apiKey, url);\n return (\n \n\n );\n}\n\nexport default PostingInstructions;\n","import React, {useEffect, useState} from \"react\";\nimport {useParams} from \"react-router-dom\";\nimport DocTitle from \"../../Layout/DocTitle\";\nimport useApi from \"../../Hooks/useApi\";\nimport PostingInstructions from \"../Dashboard/Publishers/PostingInstructions\";\n\nconst PublisherPostDocs = () => {\n const {api} = useApi();\n const {sourceToken} = useParams();\n const [apiKey, setApiKey] = useState('');\n const [sources, setSources] = useState();\n const [isLoading, setIsLoading] = useState(true);\n\n const getPostingInstructions = async () => {\n try {\n const postingInstructions = await api.client.get(`/public/publishers/instructions/${sourceToken}`);\n const {api_key, sources} = postingInstructions;\n //Hack: rewriting placeholder provided by API. THere is a logged-in dashboard version of these docs,\n //but for now we are hiding it, we don't want them logged in.\n setApiKey(api_key === \"\" ? \"\" : api_key);\n setSources(sources);\n } catch (exception) {\n console.error('Error fetching Publisher Posting Instructions:', exception)\n } finally {\n setIsLoading(false);\n }\n\n }\n\n useEffect(() => {\n getPostingInstructions()\n }, [sourceToken])\n\n return (\n <>\n \n \n );\n};\n\nexport default PublisherPostDocs;\n","import React from 'react';\nimport { Routes, Route } from 'react-router';\nimport {EntryLayout, AuthLayout, PublicLayout} from \"../Layout\";\nimport MainContent from '../Layout/MainContent';\nimport './App.scss';\nimport Login from \"./Login\";\nimport ForgotPassword from \"./ForgotPassword\";\nimport ResetPassword from \"./ResetPassword\";\nimport ActivateUser from \"./ActivateUser\";\nimport PublisherPostDocs from \"./Public/PublisherPostDocs\";\n\n\nconst App = () => (\n \n }>\n } />\n } />\n {/*} />*/}\n } />\n } />\n \n } >\n } />\n \n } >\n } />\n \n \n )\n\n\nexport default App;\n","import React from 'react';\nimport {useRouteError, useLocation, useNavigate} from \"react-router-dom\";\nimport {Button} from \"reactstrap\";\nimport PageSection from \"./PageSection\";\n\n// Using with react-router errorElement\n// } errorElement={ elements, only at the top\nconst ErrorBoundary = () => {\n let error = useRouteError();\n const location = useLocation();\n const navigate = useNavigate();\n\n\n return (\n \n
\n\n Sorry about that.
\n\n {error.message && {error.message} }\n\n \n navigate(location)}>Reload the page \n navigate(\"/accounts\")}>Home \n
\n\n\n \n
} errorElement={\n \n \n);\n\nReactDOM.render(\n (optional show spinner)\n// or:\n// \n// (the webpackChunkName is optional but can be useful in dev)\n//\n// Modified with useMemo\nconst lazify = (loader) => {\n const Lazified = (props) => {\n // useMemo: lazy loaded components that rely on query string parameters\n // tend to remount when parameters change. useMemo hook prevents that.\n const Component = useMemo(() => React.lazy(loader), [loader]);\n\n const loadingFallback = (() => {\n if (React.Children.count(props.children) > 0) {\n return props.children;\n }\n return props.spinner ? (\n \n );\n };\n return Lazified;\n};\n\nexport default lazify;\n","export function roundNumber(numberToRound, numberOfDecimalPlaces) {\n if (numberToRound === 0) {\n return 0;\n }\n\n if (!numberToRound) {\n return '';\n }\n\n const scrubbedNumber = numberToRound.toString().replace('$', '').replace(',', '');\n return Math.round(scrubbedNumber * 10 ** numberOfDecimalPlaces) / 10 ** numberOfDecimalPlaces;\n}\n\n// adds array of values passed.\nexport function addArray(values) {\n const total = values.reduce(\n (previousValue, currentValue) => previousValue + parseInt(convertToPennies(currentValue), 10), // do math in pennies to assure accuracy.\n 0,\n );\n\n return total / 100; // convert back into dollars\n}\n\nexport function convertToPennies(value) {\n if (value === 0) {\n return 0;\n }\n\n let dollarValue = parseFloat(value);\n dollarValue = roundNumber(dollarValue, 2);\n const dollarValueContainsDecimal = (dollarValue.toString().indexOf('.') !== -1);\n return (dollarValueContainsDecimal) ? parseInt(dollarValue.toString().replace('.', ''), 10) : parseInt(dollarValue, 10) * 100;\n}\n\nexport function isNumeric(num) {\n return !isNaN(parseFloat(num)) && isFinite(num);\n}\n\nexport function getDelta(oldValue, newValue) {\n return oldValue > 0 ? ((newValue / oldValue) * 100) - 100 : 0;\n}\n","export function titleCaseWord(word) {\n return word ? word.charAt(0).toUpperCase() + word.slice(1) : word;\n}\n\nexport function titleCase(str) {\n return str ? str.split(' ').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ') : str;\n}\n\nexport function tokensToString(arrTokens, delim = ', ') {\n return Array.isArray(arrTokens) ? arrTokens.join(delim) : arrTokens;\n}\n\nexport function tokenToWords(token) {\n return titleCase(token.replace(/_/g, ' '));\n}\n\nconst parseNumber = (str) => str ? +str : NaN;\n\nexport function idCompare(id1, id2) {\n const num1 = parseNumber(id1);\n const num2 = parseNumber(id2);\n if (isNaN(num1) || isNaN(num2)) {\n return false;\n }\n return num1 === num2;\n}\n\nexport function singularOrPlural(amount, singular, plural) {\n return amount === 1 ? singular : plural;\n}\n","export function isObject(obj) {\n return obj != null && obj.constructor.name === 'Object';\n}\n\nexport function isGuid(guid) {\n return guid.length === 32 // hack for ALM uids\n || /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/.test(guid);\n}\n","import React from 'react';\nimport './styles.scss';\n\ntype AdDisplayProps = {\n url: string;\n url_display: React.ReactNode|string;\n image_url: string;\n headline: string;\n description: string;\n html_description: React.ReactNode|string;\n image?: {\n id:string|number;\n url:string;\n };\n logo?: {\n id:string|number;\n url:string;\n };\n}\n/*\n * For static display of ad in its current state.\n * Used in lists or editor preview\n */\nconst AdDisplay = ({\n url,\n url_display,\n image_url,\n headline,\n description,\n html_description,\n image,\n logo\n }: AdDisplayProps) => (\n \n
\n {/* TBD: determine image size, maybe as params in request for ads */}\n
\n
\n
\n
{headline} \n\n
\n
\n {logo?.id && (\n
\n {' '}\n
\n
\n )}\n
\n\n
\n
\n
(null);\n const {api} = useApi();\n\n const reset = () => {\n setReason('');\n setComment('');\n setSubmitted(false);\n setError(null);\n };\n\n const handleClose = () => {\n reset();\n onCancel();\n };\n\n const handleSubmit = async () => {\n setSubmitted(true);\n if (!reason) {\n return;\n }\n\n setLoading(true);\n setError(null);\n const result = await api.endpoints.saleReturns.request({\n account_id: accountId,\n sale_id: saleId,\n reason,\n comment: comment || undefined,\n });\n setLoading(false);\n\n if (result) {\n reset();\n onRequested();\n } else {\n setError(api.error?.message || api.error?.name || 'Failed to request return');\n }\n };\n\n return (\n \n Request Return \n \n \n The vendor will be notified and will approve or deny the return.\n
\n\n {error && {error} }\n\n \n Reason for Return * \n setReason(e.target.value)}\n invalid={submitted && !reason}\n >\n Please select... \n {reasons.map((r) => {r.label} )}\n \n Reason is required \n \n\n \n Additional Comments \n \n \n \n Cancel \n \n {loading ? <> \n \n \n );\n};\n\nexport default RequestReturnModal;\n","import React, {\n useState, useEffect,\n} from 'react';\n\nimport EnhancedSelect from \"../../../../Components/Form/EnhancedSelect\";\nimport { Table, Badge, Button } from 'reactstrap';\nimport { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';\nimport { Link } from 'react-router-dom';\nimport {\n notify,\n StandardAlert,\n //HelpPopper,\n //MaskedInputGroup,\n Utils\n} from \"@thedmsgroup/mastodon-ui-components\";\n\nimport useApi from '../../../../Hooks/useApi';\nimport {ChannelSourceRoute} from \"../../../Routing/Rules\";\nimport {SourceOptionLabel} from \"../../../../Components/Form/Select/SourceOptionLabel\";\nimport EntityId from \"../../../../Components/Table/EntityId\";\nimport {Channel, ChannelSource, ProductType} from \"../../../../types\";\n//import IconCheckbox from '../../../Components/Form/IconCheckbox';\n//import StatusToggler from \"../../../Components/Form/StatusToggler\";\n\n\n// We decided to allow distribution to be nullable\n// import * as Yup from \"yup\";\n// const ChannelSourceValidation = (\n// Yup.addMethod(Yup.mixed, 'validChannelSources', function(message) {\n// return this.test('test-channel-sources', message,\n// function(channelSources) {\n// let valid = true;\n// channelSources.map( (item) => {\n// //console.log('ChannelSourceDetail.js:testing', item, parseInt(item.distribution));\n// if( isNaN(parseInt(item.distribution))){\n// valid = false;\n// }\n// });\n//\n// return valid;\n// })\n// })\n// );\n//\n// const ChannelSourceValidationSchema = Yup.object().shape({\n// sources: Yup.mixed().validChannelSources('Please check that all dates are filled out, and from/to dates are in the right order'),\n// });\n\n// const PercentMaskOptions = {\n// mask: Number,\n// unmask: true,\n// scale:0,\n// max:100,\n// signed: false,\n// }\n\nconst DefaultChannelSource = {\n id:0,\n name:\"\",\n status: \"\",\n eligibility: {\n distribution:\"\",\n fixed_distribution:false,\n status: \"active\"\n }\n}\n\n/*\n * Channel Sources\n * Table and inputs for editing \"channel eligibilities\" (sources that distribute on a channel)\n *\n * Note: we are no longer using the distribution, fixed, or status field, though they are still in the data structure\n */\ntype ChannelSourcesProps = {\n channel:Channel,\n //product:ProductType,\n // verticalId: number,\n sources:ChannelSource[],\n onChange:(sources:ChannelSource[])=>void,\n onOpenRules:(cs:ChannelSourceRoute)=>void\n}\n\nexport const ChannelSources = ({ channel, sources, onChange, onOpenRules }:ChannelSourcesProps) => {\n\n const [sourceOptions, setSourceOptions] = useState([]);\n const [addIndex, setAddIndex] = useState(null);\n\n // We must have channel vertical and product in order to get the source options\n // (In channel creation mode, user might not have picked these yet)\n const isReady = channel && channel.product && channel.vertical;\n //const sortDistributionDesc = (items:any[]) => items.sort((a, b) => (parseInt(a.distribution) < parseInt(b.distribution) ? 1 : -1));\n\n const { api } = useApi();\n\n useEffect(() => {\n if (isReady) {\n loadSourceOptions()\n }\n }, [channel])\n\n const loadSourceOptions = async() => {\n const result = await api.endpoints.sources.list({\n options:true,\n product:channel.product,\n vertical_id:channel.vertical.id\n })\n\n if (result) {\n\n setSourceOptions(result.map((s:any )=> {\n return {\n value:s.id,\n label:s.name,\n status:s.status,\n vertical:s.vertical,\n product:s.product\n }\n }),)\n }\n }\n\n // const handleChangeDistribution = useCallback((val:string, index:number) => {\n // const sources = [...formValues.sources];\n //\n // if (sources[index]) {\n // sources[index].eligibility.distribution = val;\n // formApi.setValues({ sources });\n // }\n // }, [formValues]);\n\n // const handleChangeFixed = useCallback((fixed:boolean, index:number) => {\n // const sources = [...formValues.sources];\n // if (sources[index]) {\n // sources[index].eligibility.fixed_distribution = fixed;\n //\n // formApi.setValues({ sources });\n // }\n // }, [formValues]);\n //\n // const handleChangeEligibilityStatus = useCallback((status:string, index:number) => {\n // const sources = [...formValues.sources];\n // if (sources[index]) {\n // sources[index].eligibility.status = status;\n //\n // formApi.setValues({ sources });\n // }\n // }, [formValues]);\n\n const handleChangeSource = (source:ChannelSource, index:number) => {\n const newSources = [...sources]\n if (newSources[index]) {\n newSources[index] = source\n onChange(newSources)\n }\n }\n\n const handleAddNew = () => {\n const newSources = removeEmptySources(sources);\n newSources.push({...DefaultChannelSource})\n setAddIndex(newSources.length - 1)\n onChange(newSources)\n }\n\n //We're just removing rows without selected sources instead of bothering with validation\n const removeEmptySources = (arr:any[]) => arr.filter(src => src.id)\n\n\n const handleRemove = (index:number) => {\n let newSources = [...sources]\n newSources.splice(index, 1)\n newSources = removeEmptySources(newSources)\n onChange(newSources)\n setAddIndex(null)\n };\n\n\n const handleOpenRules = (index:number) => {\n const source = sources[index]\n\n if (source) {\n if (channel.id && source.eligibility.rule_id) {\n onOpenRules(new ChannelSourceRoute(channel, source))\n } else {\n notify('Please save before editing rules', 'info', { containerId: `channel-source-${channel.id}` });\n }\n }\n };\n\n return isReady ? (\n \n\n
\n {sources.length > 0 ? (\n
\n \n \n Source \n {/* \n Distribution{' '}\n \n Optionally specify a distribution percentage.\n The value may be automatically raised to adjust for low volume\n in other sources. When fixed, the distribution will not change.\n \n \n Status \n Activate or pause a specific channel source. This does not affect\n the status of the channel or source in general.\n */}\n \n \n\n \n \n {sources.map((source:any, i:any) => (\n handleChangeFixed(value, i)}\n //onChangeEligibilityStatus={(status:string) => handleChangeEligibilityStatus(status, i)}\n openRules={handleOpenRules}\n key={`source-${i}`}\n />\n ))}\n \n\n
\n ) : (\n
No sources are assigned. \n )}\n\n
\n\n
\n \n \n
\n\n\n\n
\n A vertical and product for the channel must be selected before configuring a channel's sources\n \n )\n};\n\n\n\ntype ChannelSourceRowProps = {\n index:number,\n isNew:boolean,\n source:any,\n onRemove:(index:number) => void,\n onChangeSource: (source:ChannelSource, index:number)=>any,\n //onChangeDistribution: (value:string, index:number)=>any,\n //onChangeFixed: (value:boolean, index:number)=>any,\n //onChangeEligibilityStatus: (value:string, index:number)=>any,\n openRules: (index:number)=>any,\n sourceOptions: any[]\n}\nconst ChannelSourceRow = ({\n index,\n isNew,\n source,\n onRemove,\n onChangeSource,\n // onChangeDistribution,\n //onChangeFixed,\n // onChangeEligibilityStatus,\n openRules,\n sourceOptions\n}:ChannelSourceRowProps) => {\n\n const handleSelectSource = (sourceId:string) => {\n const source = sourceOptions.find((s) => s.value.toString() === sourceId);\n\n if ( source ) {\n onChangeSource({\n id: source.value,\n name: source.label,\n status: source.status,\n eligibility: {\n distribution:\"\",\n fixed_distribution: false,\n status: \"active\"\n }\n } , index);\n }\n }\n\n return (\n \n\n {isNew ? (\n \n\n \n ) : (\n \n \n \n {source.name}\n \n {source.status !== \"active\" && {Utils.titleCase(source.status)} }\n \n )}\n \n\n \n \n\n \n\n{/* \n onChangeDistribution(value, index)}/>\n\n onChangeFixed(fixed, index)}/>\n \n \n \n onChangeEligibilityStatus(status, id)}\n showArchived={false}\n allowEdit={true}\n />\n
\n */}\n \n {/* Newly added, unsaved channel sources can't edit rules because they don't have IDs first */}\n openRules(index)}\n title=\"Channel-Source routing rules\"\n disabled={!source.eligibility.rule_id}\n >\n onRemove(index)} color=\"link\" size=\"sm\" className=\"inline\" title=\"Remove\">\n \n \n \n\n \n )\n};\n\n\n// type SourceDistributionInputProps = {\n// value:string|number,\n// onChange:(value:string) => void\n// }\n// const SourceDistributionInput = ({ value, onChange }:SourceDistributionInputProps) => (\n//\n// onChange(value)}\n// //invalid={!!formErrors.interval}\n// placeholder={!value && value !== '0' ? 'open' : ''}\n// suffix=\"%\"\n// />\n// );\n//\n//\n//\n// type SourceDistributionFixedCheckboxProps = {\n// value:boolean,\n// onChange:(value:boolean) => void\n// }\n// const SourceDistributionFixedCheckbox = ({ value, onChange }:SourceDistributionFixedCheckboxProps) => (\n// \n// Fixed\n//
\n//);\n\n","import React from \"react\";\nimport {CopyButton, StandardAlert} from \"@thedmsgroup/mastodon-ui-components\";\nimport {FormFeedback, FormGroup, FormText, Input, Label} from \"reactstrap\";\nimport * as Yup from \"yup\";\n\nexport const VendorValidationSchema = Yup.object().shape({\n name: Yup.string().trim().required('Vendor name is required'),\n})\n\n\ntype VendorFormProps = {\n vendor:any;\n values:Record;\n errors:Record;\n onChange: (e:React.ChangeEvent) => void;\n isNew?:boolean;\n isValid:boolean;\n}\n\nexport const VendorForm = ({\n vendor,\n values,\n errors,\n onChange,\n isNew,\n isValid,\n}:VendorFormProps) => {\n\n //vendor could have multiple auth tokens but we display only one as the 'api key'\n const authToken = vendor?.auth_tokens?.[0]?.token || '';\n\n return (\n \n {!isValid\n && (\n
\n Please correct the errors below before continuing\n \n )}\n\n\n
\n Name \n {errors.name} \n \n\n\n
\n API Key \n \n {isNew ? (\n An API key will be automatically created \n ) : (\n <>\n {authToken ? (\n <>\n {authToken}{' '}\n none \n )}\n )}\n
\n \n\n
\n Crypto Key \n \n {isNew ? (\n A crypto key will be automatically created \n ) : (\n <>\n {vendor?.crypto_key ? (\n <>\n {vendor.crypto_key}{' '}\n none \n )}\n )}\n
\n \n
= ({\n isOpen,\n toggle,\n title=\"Routing Map\",\n sourceId,\n channelId,\n orderId,\n vendorId,\n accountId\n}) => {\n const query = useMemo(()=>{\n if (sourceId) {\n return `?source=${sourceId}`;\n } else if (channelId) {\n return `?channel=${sourceId}`;\n } else if (orderId) {\n return `?account=${accountId}&order=${sourceId}`;\n }\n }, [sourceId, channelId, orderId, accountId])\n\n const copyAreaRef = useRef();\n\n const handleCopyLink = () => {\n\n if (copyAreaRef.current) {\n //@ts-ignore\n copyAreaRef.current.value = `${location.protocol}//${location.host}/#/routing${query}`;\n //@ts-ignore\n copyAreaRef.current.select();\n document.execCommand('copy');\n notify('Link copied', 'success', { autoClose: 1000 });\n }\n\n };\n\n return (\n \n {title} \n\n \n \n \n \n
\n\n {/* Hidden from view, used for copy to clipboard */}\n \n
\n\n \n \n \n )\n}\n\nexport default RoutingMapModal;\n","import BaseAPI from \"../../../Services/BaseAPI\";\n\nclass RoutingApi extends BaseAPI {\n constructor() {\n super(process.env.API_URL_CORE);\n }\n\n sourceRoutes = (id) => this.makeRequest('get', `${this.url}/routing/source/${id}`);\n channelRoutes = (id) => this.makeRequest('get', `${this.url}/routing/channel/${id}`);\n vendorRoutes = (id, params={}) => this.makeRequest('get', `${this.url}/routing/vendor/${id}`, params);\n ordersForChannel = (id) => this.makeRequest('get', `${this.url}/orders/channel/${id}`);\n channelsForOrder = (id) => this.makeRequest('get', `${this.url}/routing/order/${id}`);\n}\n\nexport default RoutingApi\n","import {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport EntityId from \"../../Table/EntityId\";\nimport {Badge} from 'reactstrap';\nimport {titleCase} from \"@thedmsgroup/mastodon-ui-components/lib/utils/string\";\nimport React from \"react\";\n\ntype ChannelOptionType = {\n value:number|string,\n label:string,\n status?:string,\n product?:string,\n vertical?: {\n id?:number;\n name:string;\n display_name:string;\n }\n}\n\n/*\n * A function that can be provided as react-select's formatOptionLabel function\n * on a channel selector, to show more channe info than just the name.\n *\n * Value is assumed to be the source id, and label == name\n * Status has to be programmatically added to the option values,\n * if you want to show it\n */\n//TODO: not sure how to get meta type from 'react-select'. Object that has a 'context' string\nexport const ChannelOptionLabel = (\n option:ChannelOptionType, meta:any, selected:boolean\n) => (\n\n \n
\n {meta.context === 'menu' &&
{selected && }
}\n
\n
\n
{option.label}
\n {option.vertical && option.product && meta.context === 'menu' &&
\n {titleCase(option.product)} | {option.vertical.display_name} \n
}\n
\n
\n\n
\n {/* Just indicating paused or archived (active assumed) */}\n {option.status && option.status !== 'active' &&\n {titleCase(option.status)} }\n
\n\n
\n
\n
\n\n\n
\n
\n\n {targetObject === \"source\" && (\n
\n item.id.toString()}\n isMulti={false}\n isClearable={false}\n formatOptionLabel={SourceOptionLabel}\n />\n
\n )}\n {targetObject === \"channel\" && (\n
\n
\n )}\n {targetObject === \"vendor\" && (\n <>\n
\n
\n
\n
\n
\n
\n \n\n\n )}\n\n {targetObject === \"order\" && (\n <>\n
\n
\n\n\n
\n\n 0 ? \"Select an order\" : \"No orders found\") : \"Select an account\"}\n param=\"order\"\n options={choices.order ?? []}\n value={filters?.order || []}\n onChange={handleChangeFilter}\n isMulti={false}\n isClearable={false}\n loading={loadingOrders}\n />\n\n
\n\n\n \n\n )}\n\n\n{/*\n
\n
\n\n
\n
*/}\n\n
\n\n
\n \n )\n}\n","import React from 'react';\nimport classnames from \"classnames\";\nimport {Button} from \"reactstrap\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport {RelativeTime, Utils} from '@thedmsgroup/mastodon-ui-components';\nimport EntityId from \"../../../Components/Table/EntityId\";\nimport { Handle } from '@xyflow/react';\nimport {DataRow, DataRows} from \"../../../Components\";\nimport {StatusBadge} from \"./StatusBadge\";\nimport type {FlowNodeProps} from \"./index\";\n\n\ntype SourceNodeProps = FlowNodeProps & {\n onEdit:(source:any) =>void,\n onExamine:(sourceId:number) =>void,\n onOpenRules:(source:any) =>void,\n}\n\n\nexport const SourceNode = (\n {\n //Passed by react-flow\n targetPosition,\n sourcePosition,\n data,\n //Additional properties\n onEdit,\n onExamine,\n onOpenRules,\n\n }:SourceNodeProps\n) => {\n const {source, dataView, flowView} = data;\n\n const handleEdit = (e: any) => {\n e.stopPropagation();\n onEdit(source);\n }\n\n const handleExamine = (e: any) => {\n e.stopPropagation();\n onExamine(source.id);\n }\n\n const handleOpenRules = (e: any) => {\n e.stopPropagation();\n onOpenRules(source);\n }\n\n const handleGotoAuction = (e: any) => {\n e.stopPropagation()\n window.open(`#/auctions?page=1&source=${source.id}`, '_blank')\n }\n\n return (\n\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n {source.name}\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n\n {/* If mapper is focused on one source, show product/vertical */}\n {flowView === 'source' && (\n
\n\n
\n \n
\n
\n {Utils.titleCase(source.product)} \n {Utils.titleCase(source.vertical.display_name)} \n \n\n
\n )}\n\n {dataView.includes(\"sales\") && (\n
\n
\n \n
\n
\n
\n Match:
\n
\n Sale:
\n
\n\n
\n )}\n\n\n
\n
\n
\n\n
\n
\n {channel.id > 0 && source.id > 0 && (\n
\n Source eligibility for channel \n
\n )}\n\n {(source.id > 0 && !channel.id )&& (\n
\n
\n
Source not used by a channel
\n
\n Add\n \n
\n )}\n\n {(channel.id > 0 && !source.id) && (\n
\n
\n
Channel has no sources
\n
\n Add\n \n
\n )}\n\n\n {channel.id > 0 && source.id > 0 && (\n
\n {/* Removed the modal in favor of editing eligibilities from the channel */}\n {/*\n \n */}\n \n \n \n
\n )}\n\n
\n
\n\n {channel.id > 0 && dataView.includes(\"sales\") && (\n
\n
\n \n
\n
\n
\n Match:
\n
\n Sale:
\n
\n\n
\n )}\n\n\n
\n\nexport const InfoNode:FC = ({data}) => {\n const {message, infoIcon} = data\n return (\n \n {infoIcon &&
}\n
{message}
\n
= ({data}) => {\n const {filters} = data\n return (\n \n\n {filters && filters.length > 0 && (\n
FILTERS: {filters.join(',')}
\n )}\n\n
\n\n
\n\n
\n
\n \n
\n
\n {vendor.id ? (\n <>\n
\n {vendor.name}\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n ) : (\n
No Vendor
\n )}\n\n
\n\n
\n\n\n\n {dataView.includes(\"sales\") && vendor.id && (\n
\n
\n \n
\n
\n
\n Match:
\n
\n Sale:
\n
\n\n
\n )}\n\n\n
\n
\n
\n {/*
*/}\n
\n\n
\n
\n \n
\n
\n\n
\n {channel.name}\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
\n\n {/* If mapper is focused on one channel, show product/vertical */}\n {flowView === 'channel' && (\n
\n\n
\n \n
\n
\n {Utils.titleCase(channel.product)} \n {Utils.titleCase(channel.vertical.display_name)} \n \n\n
\n )}\n\n {dataView.includes(\"sales\") && (\n
\n\n
\n \n
\n\n
\n \n \n \n \n \n\n
\n )}\n\n
\n \n \n
\n\n \n {/*\n Normally we'd use the Handle as the tooltip target,\n but react-flow turns Handle id into data-id, and the tooltip can't find the target\n */}\n \n View orders that use this channel\n \n \n\n)\n\n","import React, {useContext} from 'react';\nimport classnames from \"classnames\";\nimport {Button, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem} from \"reactstrap\";\nimport {RoutingFlowContext} from \"./index\";\nimport {FontAwesomeIcon as FaIcon} from \"@fortawesome/react-fontawesome\";\nimport {RelativeTime, CopyButton} from '@thedmsgroup/mastodon-ui-components';\nimport { Handle } from '@xyflow/react';\nimport {faKey} from \"@fortawesome/free-solid-svg-icons\";\nimport {StatusBadge} from \"./StatusBadge\";\nimport type {FlowNodeProps} from \"./index\";\n\n\ntype SourceTokenNodeProps = FlowNodeProps & {\n onEdit:(token:any) =>void,\n onAddForCurrentVendor:(vendor:any, newSource?:boolean) =>void,\n onAddForCurrentSource:(source:any) =>void,\n clearFilters:(vendor:any) => void\n}\n\n\nexport const SourceTokenNode = (\n {\n //passed by react-flow\n sourcePosition,\n targetPosition,\n data,\n //Additional properties\n onEdit,\n onAddForCurrentVendor,\n onAddForCurrentSource,\n\n }:SourceTokenNodeProps\n) => {\n const {token, alert, dataView} = data\n const context = useContext(RoutingFlowContext)\n\n const handleOpenToken = (e: any) => {\n e.stopPropagation()\n onEdit(token)\n }\n\n // const handleAddForCurrentVendor = (e: React.MouseEvent) => {\n // e.stopPropagation()\n // onAddForCurrentVendor(context.selectedVendor)\n // }\n // const handleAddForCurrentSource = (e: React.MouseEvent) => {\n // e.stopPropagation()\n // if (token.source) {\n // onAddForCurrentSource(token.source)\n // }\n //\n // }\n\n // Create a token related to a vendor or source\n const handleAddForTarget = (e:React.MouseEvent, forNewSource:boolean=false) => {\n e.stopPropagation()\n if (context.selectedVendor) {\n onAddForCurrentVendor(context.selectedVendor, forNewSource)\n } else if (token.source) {\n onAddForCurrentSource(token.source)\n }\n }\n\n return (\n\n \n\n
\n
\n
\n\n
\n\n {token.id > 0 && (\n
\n \n
\n )}\n\n
\n {token.id > 0 ? (\n <>\n\n
\n
\n \n \n \n
\n \n ) : (\n
\n {/* having no token will only happen during vendor view, when there is one vendor displayed and it has no source tokens */}\n
\n
No token assigned
\n {/*
\n Add\n */}\n\n
\n \n Add\n \n \n Add for existing source \n handleAddForTarget(e, true)}>Create a new source \n \n \n
\n )}\n\n
\n\n
\n\n {token.id > 0 && (token.label || token.description) && (\n
\n\n
\n \n
\n
\n {token.label &&
{token.label}
}\n {token.description &&
{token.description}
}\n
\n\n
\n )}\n\n\n { token.id > 0 && dataView.includes(\"sales\") && (\n
\n\n
\n \n
\n
\n
\n Match:
\n
\n Sale:
\n
\n\n
\n )}\n\n\n
(false);\n const resizeRef = useRef(null);\n\n const toggleExpanded = (e:any) => {\n e.stopPropagation()\n setExpanded(!expanded)\n }\n\n useEffect(() => {\n //Resize observer to trigger reflow of entire chart after expanded state updates\n if (resizeRef.current) {\n const observer = new ResizeObserver(onResize);\n observer.observe(resizeRef.current);\n\n // Cleanup function\n return () => {\n observer.disconnect();\n };\n }\n }, []);\n\n\n\n // stop Propagation so clicking buttons does not activate toggle\n const handleExamine = (e: any) => {\n e.stopPropagation();\n onExamine(order);\n }\n\n const handleGotoAuction = (e: any) => {\n e.stopPropagation()\n window.open(`#/auctions?page=1&order=${order.id}`, '_blank')\n }\n\n\n return (\n \n \n
\n
\n
\n
\n {/*
*/}\n {order.name}
\n {order.account.name}
\n \n
\n\n \n \n \n\n \n \n \n \n \n \n
\n
\n\n
\n
\n \n
\n
\n {expanded ? (\n
\n
Close \n
\n
Rules with bid modifiers on channels:
\n
\n {rules && rules.length ? (\n <>\n {rules.map((rule:any, i:number) => (\n
\n
\n \n {rule.label} \n \n
\n\n {/*{rule.channel_modifiers.length > 0 && (\n <>\n
\n {rule.channel_modifiers.map((mod:any, i:number) => (\n {mod.bid_modifier}%\n \n ))}\n \n\n \n )}\n*/}\n\n
\n {rule.bid_modifier && (\n {rule.bid_modifier}%\n \n )}\n \n \n \n \n \n\n
\n ))}\n \n ) : (\n
No rules found \n )}\n
\n
\n\n\n\n
\n ) : (\n
View rules with channel \n )}\n
\n
\n
\n \n
\n
\n\n \n \n \n \n \n \n
\n
\n\n\nexport const AlertNode:FC = ({id, data, targetPosition}) => {\n const {message, helpText} = data\n return (\n \n {targetPosition &&
}\n
\n
\n
\n
\n {message}{helpText && {helpText} }\n
\n
\n
\n\n\n\n
= ({data, onAdd, onClearFilters}) => {\n const context = useContext(RoutingFlowContext)\n const {\n title,\n helpText,\n filters,\n active,\n entity,\n flowView,\n allowAdd\n } = data\n\n const handleClearFilters = (e: any) => {\n e.stopPropagation()\n if (onClearFilters && flowView === 'vendor' && context.selectedVendor) {\n const vendor = context.selectedVendor as any;\n onClearFilters(flowView, vendor.id as number)\n }\n\n }\n\n return (\n <>\n \n
\n
{title}
\n {allowAdd && entity && onAdd && (\n
onAdd(entity)}\n >\n \n\n\n
\n
\n FILTERS: {filters.join(', ')}\n
\n\n
\n
\n
= ({\n source,\n vendors,\n onSuccess,\n cancel,\n isModal\n}) => {\n const allowCreateTokens = usePermission('source_tokens.create')\n if(!source) return null\n if(!allowCreateTokens) {\n cancel()\n return null\n }\n const {api} = useApi()\n const [vendorList, setVendorList] = useState(vendors) //state for list\n const [selectedVendor, setSelectedVendor] = useState() //state for selector\n const [isSaving, setIsSaving] = useState(false)\n\n const handleSelectVendor = (selectedId:string, selectedOption:any) => {\n setSelectedVendor(selectedOption);\n }\n\n const handleAddNew = () => {\n\n if (selectedVendor) {\n if (!vendorList.find((vendor:any) => vendor.id === selectedVendor.id)) {\n setVendorList((prev) => [...prev, selectedVendor])\n }\n }\n //clear selector dropdown\n setSelectedVendor(undefined)\n\n }\n\n const handleRemove = (index:number) => {\n const newVendors = [...vendorList]\n newVendors.splice(index, 1)\n setVendorList(newVendors)\n };\n\n const save = async() => {\n\n setIsSaving(true)\n\n //No batch save on API side\n let batchResult = true;\n for (const vendor of vendorList) {\n const tokenResult = await saveToken(source.id, vendor.id);\n if (!tokenResult) {\n batchResult =false\n }\n console.log(\"SourceTokenStep.tsx:saving for vendor and source\", source, vendor );\n }\n\n\n if (batchResult) {\n if (vendorList.length > 1) {\n notify(`The source-tokens have been saved`, 'success')\n } else {\n notify(`The source-token has been saved`, 'success')\n }\n\n setIsSaving(false)\n onSuccess && onSuccess(source)\n\n } else {\n notify(`Unable to create source token for vendor: ${api.error ? api.error.name : \"\"}`, 'error');\n }\n setIsSaving(false)\n\n }\n\n const saveToken = async(sourceId:number|string, vendorId:number|string) => {\n\n const result = await api.endpoints.sourceTokens.create({\n source_id: sourceId,\n vendor_id: vendorId,\n status: 'active'\n })\n return Boolean(result);\n }\n\n return (\n <>\n \n\n\n Optionally add tokens for one or more vendors to use this source.
\n Skip this step \n\n\n \n\n Source: \n {vendorList.length > 0 && Vendors }\n }>\n {vendorList.map((vendor:any, i:number) => (\n \n
\n
handleRemove(i)} color=\"link\" size=\"sm\" className=\"inline\" title=\"Remove\">\n \n \n
\n \n\n
\n \n \n \n \n \n
\n\n \n
\n \n
\n \n\n \n \n Cancel\n \n \n Save{isSaving && \n\n \n )\n}\n","import React, {useState} from 'react'\nimport {Modal, ModalHeader} from \"reactstrap\"\nimport {default as SourceForm} from \"./index\"\nimport {SourceTokenStep} from \"./SourceTokenStep\";\n\n\n/*\n * Modal dialog wraps the source form for editing and creating sources\n */\ntype SourceModalProps = {\n source:any,\n vendorPreselections?:any[],\n isOpen:boolean,\n toggle:()=>void,\n size?:string,\n onSuccess?:(source?:any, isNew?:boolean)=>void,\n tokenStep?:boolean,\n scrollable?:boolean\n}\n\nexport const SourceModal = ({\n source,\n vendorPreselections=[],\n isOpen,\n toggle,\n onSuccess,\n size='xlg',\n scrollable=false,\n }:SourceModalProps) => {\n\n if (!source) return null\n\n const [step, setStep] = useState('')\n const [newSource, setNewSource] = useState(null)\n const isNew = !source.id\n\n const handleSave = (source:any) => {\n\n if (isNew && source) {\n setStep('token');\n setNewSource(source);\n } else {\n\n onSuccess && onSuccess(source);\n }\n }\n\n return (\n \n\n \n\n {step === 'token' ? (\n Add Vendor Tokens for Source \n ) : (\n <>\n {source.id\n ? <>Edit Source | {source.name} \n : 'Create Source'\n }\n \n )}\n\n\n \n\n\n {(step === 'token' && newSource) ? (\n ('')\n const [channel, setChannel] = useState()\n const [channelSources, setChannelSources] = useState([])\n const [isLoading, setIsLoading] = useState(false);\n\n\n const save = async() => {\n setIsLoading(true)\n\n const payload = {\n id:channel.id,\n name:channel.name,\n account_id: channel.account.id,\n vertical_id: channel.vertical.id,\n product:channel.product,\n sources: channelSources.map((src:any) => {\n return {\n source_id: src.id,\n channel_id: channel.id,\n status: src.eligibility.status,\n distribution: src.eligibility.distribution,\n fixed_distribution: src.eligibility.fixed_distribution,\n }\n })\n }\n\n\n const result = await api.endpoints.channels.update(payload)\n\n\n if (result) {\n notify(`The channel has been saved`, 'success')\n setIsLoading(false)\n onSuccess && onSuccess()\n close()\n } else {\n notify(`Unable to save channel: ${api.error ? api.error.name : \"\"}`, 'error');\n }\n setIsLoading(false)\n }\n\n const handleSelectChannel = (channelId:string) => {\n\n setSelectedChannelId(channelId);\n if (channelId) {\n loadChannel(channelId)\n } else {\n setSelectedChannelId('')\n }\n }\n\n const unselectChannel = () => {\n setSelectedChannelId('')\n setChannel(undefined)\n setChannelSources([])\n }\n\n\n const loadChannel = async(channelId:string) => {\n const result = await api.endpoints.channels.show(channelId);\n if(result){\n setChannel(result)\n setChannelSources(() => {\n const sources = result.sources\n if (!sources.find((s:any) => s.id.toString() === source.id)) {\n\n sources.push({\n id: source.id,\n name: source.name,\n status:source.status,\n eligibility: {\n status:\"active\",\n distribution:null,\n fixed_distribution:false,\n rule_id:0,\n }\n });\n }\n return sources\n })\n }\n }\n\n\n return (\n \n\n \n Create Channel-Source Link\n \n \n Source: {source.name} }\n {!channel ? (\n \n
Select a channel that will be eligible to use this source.
\n
\n {/*