npm - @bikdotai/bik-component-library - Versions diffs - 0.0.838 → 0.0.839-1 - Mend

@bikdotai/bik-component-library 0.0.838 → 0.0.839-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/esm/components/add-variableV2/AddVariableV2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\n\n/ eslint-disable react/prop-types /\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' \| 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended \|\|\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) \|\|\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey \|\| firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize \|\| 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","value","handleRecommendedToggle","updatePayloadvar","prev","newList","removeUnavailableVariables","shouldShowNoResult","key","hasVariablesInSubheader","stack","variable","temp","level","isAvailable","keys","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","jsx","VariableBox","Fragment","Tooltip","BodyCaption","COLORS","varProps","Button","PlusIcon","RightFilled","renderPayloadvars","newStack","matchVariable","variableClick","checkIfArray","path","evalVariableValue","index","matches","arrayName","variableCustomClick","variableListInterfaceV2","getStyle","jsxs","AddVariableStyled","CloseButtonContainer","CrossIcon","IconButton","CloseIcon","SearchBar","searchText","BodySecondary","Switch","BackIcon","TitleSmall","UndoIcon","searchList","_","next"],"mappings":"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"}
1	+ {"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\n\n/ eslint-disable react/prop-types /\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' \| 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended \|\|\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) \|\|\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey \|\| firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize \|\| 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tdata-test=\"add-variable-close\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tdata-test=\"add-variable-recommended-toggle\"\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","value","handleRecommendedToggle","updatePayloadvar","prev","newList","removeUnavailableVariables","shouldShowNoResult","key","hasVariablesInSubheader","stack","variable","temp","level","isAvailable","keys","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","jsx","VariableBox","Fragment","Tooltip","BodyCaption","COLORS","varProps","Button","PlusIcon","RightFilled","renderPayloadvars","newStack","matchVariable","variableClick","checkIfArray","path","evalVariableValue","index","matches","arrayName","variableCustomClick","variableListInterfaceV2","getStyle","jsxs","AddVariableStyled","CloseButtonContainer","CrossIcon","IconButton","CloseIcon","SearchBar","searchText","BodySecondary","Switch","BackIcon","TitleSmall","UndoIcon","searchList","_","next"],"mappings":"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"}

package/dist/esm/components/alerts/Alert.js CHANGED Viewed

@@ -63,6 +63,7 @@ const T = (t) => {
         t.showCrossButton && /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
           r,
           {
+            "data-test": "alert-close-button",
             width: 20,
             height: 20,
             color: l.content.secondary,

package/dist/esm/components/alerts/Alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string \| React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display \|\| 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf \|\| 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor \|\| COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":";;;;;;AA8BO,MAAMA,IAA8B,CAACC,MAAU;AACrD,QAAMC,IAAoB,MAAM;AAC/B,IAAID,EAAM,cACT,OAAO,KAAKA,EAAM,YAAY,QAAQ;AAAA,EAExC;AAEA,SACC,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMH,EAAM;AAAA,MACZ,iBAAiBA,EAAM;AAAA,MACvB,OAAOA,EAAM;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAAoB,iBAAiBJ,EAAM,iBAC1C,UAAA;AAAA,UAAAA,EAAM,QACN,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,GAAGL,GAAO;AAAA,gBACV,SAASA,GAAO,WAAW,WAAW;AAAA,gBACtC,WAAWA,GAAO,WAAW,aAAa;AAAA,cAAA;AAAA,cAG3C,UAAA,gBAAAK;AAAA,gBAACL,EAAM;AAAA,gBAAN;AAAA,kBACA,OAAOM,EAAiBN,EAAM,IAAI,EAAE;AAAA,kBACpC,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,UAGF,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOP,EAAM,aAAaM,EAAiBN,EAAM,IAAI,EAAE;AAAA,gBACvD,YAAY;AAAA,gBACZ,aAAa;AAAA,cAAA;AAAA,cAGb,UAAAA,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPA,EAAM,kBAAkBA,EAAM,cAC9B,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,cAAA;AAAA,cAEjB,SAAS,MAAM;AACd,gBACCR,EAAM,eAAe,cACrBA,EAAM,4BAENA,EAAM,0BAAA,IAENC,EAAA;AAAA,cAEF;AAAA,cAEC,UAAAD,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR,GAEF;AAAA,QACCA,EAAM,mBACN,gBAAAK,EAACI,GAAA,EACA,UAAA,gBAAAJ;AAAA,UAACK;AAAAA,UAAA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAOF,EAAO,QAAQ;AAAA,YACtB,SAAS,MAAM;AACd,cAAIR,GAAO,wBACVA,EAAM,qBAAA;AAAA,YAER;AAAA,UAAA;AAAA,QAAA,EACD,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;"}
1	+ {"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string \| React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display \|\| 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf \|\| 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor \|\| COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\tdata-test=\"alert-close-button\"\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":";;;;;;AA8BO,MAAMA,IAA8B,CAACC,MAAU;AACrD,QAAMC,IAAoB,MAAM;AAC/B,IAAID,EAAM,cACT,OAAO,KAAKA,EAAM,YAAY,QAAQ;AAAA,EAExC;AAEA,SACC,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAMH,EAAM;AAAA,MACZ,iBAAiBA,EAAM;AAAA,MACvB,OAAOA,EAAM;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAE,EAACE,GAAA,EAAoB,iBAAiBJ,EAAM,iBAC1C,UAAA;AAAA,UAAAA,EAAM,QACN,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,GAAGL,GAAO;AAAA,gBACV,SAASA,GAAO,WAAW,WAAW;AAAA,gBACtC,WAAWA,GAAO,WAAW,aAAa;AAAA,cAAA;AAAA,cAG3C,UAAA,gBAAAK;AAAA,gBAACL,EAAM;AAAA,gBAAN;AAAA,kBACA,OAAOM,EAAiBN,EAAM,IAAI,EAAE;AAAA,kBACpC,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACR;AAAA,UAAA;AAAA,UAGF,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOP,EAAM,aAAaM,EAAiBN,EAAM,IAAI,EAAE;AAAA,gBACvD,YAAY;AAAA,gBACZ,aAAa;AAAA,cAAA;AAAA,cAGb,UAAAA,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPA,EAAM,kBAAkBA,EAAM,cAC9B,gBAAAK;AAAA,YAACE;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,QAAQ;AAAA,gBACR,gBAAgB;AAAA,cAAA;AAAA,cAEjB,SAAS,MAAM;AACd,gBACCR,EAAM,eAAe,cACrBA,EAAM,4BAENA,EAAM,0BAAA,IAENC,EAAA;AAAA,cAEF;AAAA,cAEC,UAAAD,EAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACR,GAEF;AAAA,QACCA,EAAM,mBACN,gBAAAK,EAACI,GAAA,EACA,UAAA,gBAAAJ;AAAA,UAACK;AAAAA,UAAA;AAAA,YACA,aAAU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAOF,EAAO,QAAQ;AAAA,YACtB,SAAS,MAAM;AACd,cAAIR,GAAO,wBACVA,EAAM,qBAAA;AAAA,YAER;AAAA,UAAA;AAAA,QAAA,EACD,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIJ;"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js CHANGED Viewed

@@ -6,23 +6,23 @@ import { COLORS as l } from "../../constants/Theme.js";
 import tt from "../../assets/icons/arrow_down.svg.js";
 import et from "../../assets/icons/arrow_up.svg.js";
 import rt from "../../assets/icons/info.svg.js";
-import { BodyCaption as ot, TitleLarge as nt, TitleMedium as it, Caption as u } from "../TypographyStyle.js";
+import { BodyCaption as nt, TitleLarge as ot, TitleMedium as it, Caption as u } from "../TypographyStyle.js";
 import { truncateValueForInternationalStore as q, truncateValueForIndianStore as B } from "./chart/utils/calcPercentage.js";
 import { AnalyticsTrendContainer as lt, IconContainer as at } from "./CommonStyles.js";
 import { Tooltip as V } from "../tooltips/Tooltip.js";
 import { Tag as C } from "../tag/Tag.js";
 const wt = ({
-  title: c,
+  title: h,
   value: r,
   trendPercent: e,
   type: a = "horizontal",
-  timeline: o,
+  timeline: n,
   customRange: f,
   tooltip: b,
   card: y = !0,
   rightSeparator: D = !1,
   size: $ = "big",
-  share: n = !1,
+  share: o = !1,
   formatVal: A,
   prefixSymbol: d,
   trailingIcon: v,
@@ -31,7 +31,7 @@ const wt = ({
   funnelPercent: w,
   isLoading: i,
   trendRaw: g,
-  trendRawString: h,
+  trendRawString: c,
   suffixText: m,
   trendStyle: G,
   trendContainerStyle: H,
@@ -45,7 +45,7 @@ const wt = ({
   tooltipTimelineText: S,
   customTimelineText: W
 }) => {
-  const L = $ === "big" ? nt : it, E = typeof e < "u" ? e < 0 ? "negative" : e === 0 ? "neutral" : "positive" : void 0, T = typeof e < "u" ? n ? Math.round(e) : Math.abs(Math.round(e)) : void 0, Q = () => typeof r > "u" ? "--" : typeof r == "number" && A ? r > 999 ? I ? `${d ?? ""}${q(
+  const L = $ === "big" ? ot : it, E = typeof e < "u" ? e < 0 ? "negative" : e === 0 ? "neutral" : "positive" : void 0, T = typeof e < "u" ? o ? Math.round(e) : Math.abs(Math.round(e)) : void 0, Q = () => typeof r > "u" ? "--" : typeof r == "number" && A ? r > 999 ? I ? `${d ?? ""}${q(
     r
   )} ${m ?? ""}` : `${d ?? ""}${B(
     r
@@ -103,12 +103,12 @@ const wt = ({
                       },
                       children: [
                         /* @__PURE__ */ t(
-                          ot,
+                          nt,
                           {
                             style: {
                               color: l.content.secondary
                             },
-                            children: c
+                            children: h
                           }
                         ),
                         b && /* @__PURE__ */ t(V, { body: b, placement: "right", width: 300, children: /* @__PURE__ */ t(
@@ -140,7 +140,7 @@ const wt = ({
                         flexDirection: "row",
                         gap: 12,
                         alignItems: "center",
-                        ...n ? { justifyContent: "space-between" } : {}
+                        ...o ? { justifyContent: "space-between" } : {}
                       },
                       children: [
                         i && /* @__PURE__ */ t(k, { width: 108, height: 26 }),
@@ -161,15 +161,15 @@ const wt = ({
                             type: "neutral"
                           }
                         ),
-                        a === "horizontal" && !i && !n && /* @__PURE__ */ t(
+                        a === "horizontal" && !i && !o && /* @__PURE__ */ t(
                           _,
                           {
-                            timeline: o,
+                            timeline: n,
                             customRange: f,
                             percent: T,
                             direction: E,
                             trendRaw: g,
-                            trendRawString: h,
+                            trendRawString: c,
                             prefixSymbol: d,
                             trendIconStyle: z,
                             isInternationalStore: I,
@@ -177,7 +177,7 @@ const wt = ({
                             customTimelineText: W
                           }
                         ),
-                        i && !n && a === "horizontal" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 }),
+                        i && !o && a === "horizontal" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 }),
                         a === "vertical" && !i && typeof w < "u" && /* @__PURE__ */ t(
                           C,
                           {
@@ -186,8 +186,8 @@ const wt = ({
                             type: "neutral"
                           }
                         ),
-                        n && !i && typeof T < "u" && /* @__PURE__ */ t(C, { tagText: `${T} %`, theme: "light", type: "neutral" }),
-                        !n && !i && F && F != 0 ? /* @__PURE__ */ t(
+                        o && !i && typeof T < "u" && /* @__PURE__ */ t(C, { tagText: `${T} %`, theme: "light", type: "neutral" }),
+                        !o && !i && F && F != 0 ? /* @__PURE__ */ t(
                           C,
                           {
                             tagText: R(F),
@@ -198,15 +198,15 @@ const wt = ({
                       ]
                     }
                   ),
-                  a === "vertical" && !i && !n && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
+                  a === "vertical" && !i && !o && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
                     _,
                     {
-                      timeline: o,
+                      timeline: n,
                       customRange: f,
                       percent: T,
                       direction: E,
                       trendRaw: g,
-                      trendRawString: h,
+                      trendRawString: c,
                       prefixSymbol: d,
                       trendIconStyle: z,
                       isInternationalStore: I,
@@ -218,50 +218,58 @@ const wt = ({
                 ]
               }
             ),
-            p && !i && /* @__PURE__ */ t(V, { body: p, placement: "right", children: v && /* @__PURE__ */ t("div", { className: "icon--holder", onClick: M, children: Z.createElement(v, {
-              height: 20,
-              width: 20,
-              color: l.content.secondary
-            }) }) })
+            p && !i && /* @__PURE__ */ t(V, { body: p, placement: "right", children: v && /* @__PURE__ */ t(
+              "div",
+              {
+                "data-test": "analytics-trend-trailing-icon",
+                className: "icon--holder",
+                onClick: M,
+                children: Z.createElement(v, {
+                  height: 20,
+                  width: 20,
+                  color: l.content.secondary
+                })
+              }
+            ) })
           ]
         }
       )
     }
   );
 }, _ = ({
-  percent: c,
+  percent: h,
   direction: r,
   timeline: e,
   customRange: a,
-  trendRaw: o,
+  trendRaw: n,
   trendRawString: f,
   prefixSymbol: b,
   trendIconStyle: y,
   isInternationalStore: D,
   tooltipTimelineText: $,
-  customTimelineText: n
+  customTimelineText: o
 }) => {
   const A = () => {
-    let h = "--";
-    if (o)
-      return D ? h = String(
-        q(Math.abs(o))
-      ) : h = String(B(Math.abs(o))), o < 0 ? "-" + h : h;
+    let c = "--";
+    if (n)
+      return D ? c = String(
+        q(Math.abs(n))
+      ) : c = String(B(Math.abs(n))), n < 0 ? "-" + c : c;
   }, d = () => {
-    const h = ((o ?? 0) > 0 ? "+" : "") + (b ?? "");
-    return typeof o > "u" ? "--" : `${h ?? ""}${A()}`;
+    const c = ((n ?? 0) > 0 ? "+" : "") + (b ?? "");
+    return typeof n > "u" ? "--" : `${c ?? ""}${A()}`;
   }, [v, M] = O(
     d()
   ), [p, w] = O(
-    n || ""
+    o || ""
   );
   U(() => {
-    n || w(
+    o || w(
       e === "today" ? "vs yesterday" : e === "yesterday" ? "vs 1 day before" : e === "7 days" ? "vs last 7 days" : e === "30 days" ? "vs last 30 days" : e === "custom" && a ? P.getAnalyticsCustomDateTimelineText(a) : ""
     );
   }, [e, a]), U(() => {
     M(d());
-  }, [o]);
+  }, [n]);
   const i = r === "negative" ? tt : et, g = r === "negative" ? l.background.negative.vibrant : r === "positive" ? l.background.positive.vibrant : l.content.placeholder;
   return /* @__PURE__ */ s(
     "div",
@@ -273,7 +281,7 @@ const wt = ({
         flexWrap: "wrap"
       },
       children: [
-        typeof c == "number" && /* @__PURE__ */ t(
+        typeof h == "number" && /* @__PURE__ */ t(
           i,
           {
             color: g,
@@ -282,19 +290,19 @@ const wt = ({
             style: { marginRight: 2, ...y ?? {} }
           }
         ),
-        typeof c == "number" && r && /* @__PURE__ */ s(u, { style: { color: g }, children: [
-          r === "neutral" ? 0 : c < 1e3 ? c : ">999",
+        typeof h == "number" && r && /* @__PURE__ */ s(u, { style: { color: g }, children: [
+          r === "neutral" ? 0 : h < 1e3 ? h : ">999",
           "%"
         ] }),
-        !!o && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `(${v})` }),
-        !o && (f?.length || 0) > 0 && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `${f}` }),
+        !!n && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `(${v})` }),
+        !n && (f?.length || 0) > 0 && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `${f}` }),
         e && ($ ? /* @__PURE__ */ t(V, { body: $, placement: "bottom", children: /* @__PURE__ */ t(
           u,
           {
             style: { marginLeft: 4, color: l.content.placeholder },
-            children: n || p
+            children: o || p
           }
-        ) }) : /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: n || p }))
+        ) }) : /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: o || p }))
       ]
     }
   );

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div className={'icon--holder'} onClick={onTrailIconClick}>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}