diff --git a/src/connectors/numeric-menu/connectNumericMenu.ts b/src/connectors/numeric-menu/connectNumericMenu.ts index bf55543acd..f31ce528f6 100644 --- a/src/connectors/numeric-menu/connectNumericMenu.ts +++ b/src/connectors/numeric-menu/connectNumericMenu.ts @@ -100,6 +100,42 @@ export type NumericMenuConnector = Connector< NumericMenuConnectorParams >; +const $$type = 'ais.numericMenu'; + +const createSendEvent = ({ instantSearchInstance, helper, attribute }) => ( + ...args +) => { + if (args.length === 1) { + instantSearchInstance.sendEventToInsights(args[0]); + return; + } + + const [eventType, facetValue, eventName = 'Filter Applied'] = args; + if (eventType !== 'click') { + return; + } + // facetValue === "%7B%22start%22:5,%22end%22:10%7D" + const filters = convertNumericRefinementsToFilters( + getRefinedState(helper.state, attribute, facetValue), + attribute + ); + if (filters && filters.length > 0) { + /* + filters === ["price<=10", "price>=5"] + */ + instantSearchInstance.sendEventToInsights({ + insightsMethod: 'clickedFilters', + widgetType: $$type, + eventType, + payload: { + eventName, + index: helper.getIndex(), + filters, + }, + }); + } +}; + const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( renderFn, unmountFn = noop @@ -123,6 +159,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( type ConnectorState = { refine?: (facetValue: string) => void; createURL?: (state: SearchParameters) => (facetValue: string) => string; + sendEvent?: SendEventForFacet; }; const prepareItems = (state: SearchParameters) => @@ -133,43 +170,16 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( })); const connectorState: ConnectorState = {}; - let sendEvent; return { - $$type: 'ais.numericMenu', + $$type, init({ helper, createURL, instantSearchInstance }) { - sendEvent = (...args) => { - if (args.length === 1) { - instantSearchInstance.sendEventToInsights(args[0]); - return; - } - - const [eventType, facetValue, eventName = 'Filter Applied'] = args; - if (eventType !== 'click') { - return; - } - // facetValue === "%7B%22start%22:5,%22end%22:10%7D" - const filters = convertNumericRefinementsToFilters( - getRefinedState(helper.state, attribute, facetValue), - attribute - ); - if (filters && filters.length > 0) { - /* - filters === ["price<=10", "price>=5"] - */ - instantSearchInstance.sendEventToInsights({ - insightsMethod: 'clickedFilters', - widgetType: this.$$type!, - eventType, - payload: { - eventName, - index: helper.getIndex(), - filters, - }, - }); - } - }; + connectorState.sendEvent = createSendEvent({ + instantSearchInstance, + helper, + attribute, + }); connectorState.refine = facetValue => { const refinedState = getRefinedState( @@ -177,7 +187,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( attribute, facetValue ); - sendEvent('click', facetValue); + connectorState.sendEvent!('click', facetValue); helper.setState(refinedState).search(); }; @@ -190,7 +200,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( items: transformItems(prepareItems(helper.state)), hasNoResults: true, refine: connectorState.refine, - sendEvent, + sendEvent: connectorState.sendEvent!, instantSearchInstance, widgetParams, }, @@ -205,7 +215,7 @@ const connectNumericMenu: NumericMenuConnector = function connectNumericMenu( items: transformItems(prepareItems(state)), hasNoResults: results.nbHits === 0, refine: connectorState.refine!, - sendEvent, + sendEvent: connectorState.sendEvent!, instantSearchInstance, widgetParams, }, diff --git a/src/connectors/rating-menu/connectRatingMenu.js b/src/connectors/rating-menu/connectRatingMenu.js index 3b749bc68b..fc753720bc 100644 --- a/src/connectors/rating-menu/connectRatingMenu.js +++ b/src/connectors/rating-menu/connectRatingMenu.js @@ -10,6 +10,37 @@ const withUsage = createDocumentationMessageGenerator({ connector: true, }); +const $$type = 'ais.ratingMenu'; + +const createSendEvent = ({ + instantSearchInstance, + helper, + refinedStar, + attribute, +}) => (...args) => { + if (args.length === 1) { + instantSearchInstance.sendEventToInsights(args[0]); + return; + } + const [eventType, facetValue, eventName = 'Filter Applied'] = args; + if (eventType !== 'click') { + return; + } + const isRefined = refinedStar === Number(facetValue); + if (!isRefined) { + instantSearchInstance.sendEventToInsights({ + insightsMethod: 'clickedFilters', + widgetType: $$type, + eventType, + payload: { + eventName, + index: helper.getIndex(), + filters: [`${attribute}>=${facetValue}`], + }, + }); + } +}; + /** * @typedef {Object} StarRatingItems * @property {string} name Name corresponding to the number of stars. @@ -107,37 +138,19 @@ export default function connectRatingMenu(renderFn, unmountFn = noop) { let sendEvent; return { - $$type: 'ais.ratingMenu', + $$type, init({ helper, createURL, instantSearchInstance }) { this._toggleRefinement = this._toggleRefinement.bind(this, helper); this._createURL = state => facetValue => createURL(state.toggleRefinement(attribute, facetValue)); - sendEvent = (...args) => { - if (args.length === 1) { - instantSearchInstance.sendEventToInsights(args[0]); - return; - } - const [eventType, facetValue, eventName = 'Filter Applied'] = args; - if (eventType !== 'click') { - return; - } - const isRefined = - this._getRefinedStar(helper.state) === Number(facetValue); - if (!isRefined) { - instantSearchInstance.sendEventToInsights({ - insightsMethod: 'clickedFilters', - widgetType: this.$$type, - eventType, - payload: { - eventName, - index: helper.getIndex(), - filters: [`${attribute}>=${facetValue}`], - }, - }); - } - }; + sendEvent = createSendEvent({ + instantSearchInstance, + helper, + refinedStar: this._getRefinedStar(helper.state), + attribute, + }); renderFn( { diff --git a/src/connectors/toggle-refinement/connectToggleRefinement.js b/src/connectors/toggle-refinement/connectToggleRefinement.js index c445126f17..6bafdc3e5b 100644 --- a/src/connectors/toggle-refinement/connectToggleRefinement.js +++ b/src/connectors/toggle-refinement/connectToggleRefinement.js @@ -13,6 +13,34 @@ const withUsage = createDocumentationMessageGenerator({ connector: true, }); +const $$type = 'ais.toggleRefinement'; + +const createSendEvent = ({ instantSearchInstance, attribute, on, helper }) => ( + ...args +) => { + if (args.length === 1) { + instantSearchInstance.sendEventToInsights(args[0]); + return; + } + const [eventType, isRefined, eventName = 'Filter Applied'] = args; + if (eventType !== 'click' || on === undefined) { + return; + } + // Checking + if (!isRefined) { + instantSearchInstance.sendEventToInsights({ + insightsMethod: 'clickedFilters', + widgetType: $$type, + eventType, + payload: { + eventName, + index: helper.getIndex(), + filters: on.map(value => `${attribute}:${JSON.stringify(value)}`), + }, + }); + } +}; + /** * @typedef {Object} ToggleValue * @property {boolean} isRefined `true` if the toggle is on. @@ -108,7 +136,7 @@ export default function connectToggleRefinement(renderFn, unmountFn = noop) { let sendEvent; return { - $$type: 'ais.toggleRefinement', + $$type, _toggleRefinement(helper, { isRefined } = {}) { // Checking @@ -138,31 +166,12 @@ export default function connectToggleRefinement(renderFn, unmountFn = noop) { }, init({ state, helper, createURL, instantSearchInstance }) { - sendEvent = (...args) => { - if (args.length === 1) { - instantSearchInstance.sendEventToInsights(args[0]); - return; - } - const [eventType, isRefined, eventName = 'Filter Applied'] = args; - if (eventType !== 'click' || on === undefined) { - return; - } - // Checking - if (!isRefined) { - instantSearchInstance.sendEventToInsights({ - insightsMethod: 'clickedFilters', - widgetType: this.$$type, - eventType, - payload: { - eventName, - index: helper.getIndex(), - filters: on.map( - value => `${attribute}:${JSON.stringify(value)}` - ), - }, - }); - } - }; + sendEvent = createSendEvent({ + instantSearchInstance, + attribute, + on, + helper, + }); this._createURL = isCurrentlyRefined => () => { const valuesToRemove = isCurrentlyRefined ? on : off;