\n
\n
\n \n \n \n \n \n \n \n \n\n \n \n {{item.title}}\n \n \n \n \n {{item.title}}\n \n \n \n \n {{item.title}}\n \n \n \n \n\n \n \n \n \n Log out\n \n \n \n \n\n \n\n \n \n {{cartLength}}\n \n \n\n \n \n \n \n \n\n
\n
\n\n\n\n","\n\n
\n \n","!function(t,s){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=s():\"function\"==typeof define&&define.amd?define(s):(t=\"undefined\"!=typeof globalThis?globalThis:t||self).dayjs_plugin_duration=s()}(this,(function(){\"use strict\";var t,s,n=1e3,i=6e4,e=36e5,r=864e5,o=/\\[([^\\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,u=31536e6,d=2628e6,a=/^(-|\\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/,h={years:u,months:d,days:r,hours:e,minutes:i,seconds:n,milliseconds:1,weeks:6048e5},c=function(t){return t instanceof g},f=function(t,s,n){return new g(t,n,s.$l)},m=function(t){return s.p(t)+\"s\"},l=function(t){return t<0},$=function(t){return l(t)?Math.ceil(t):Math.floor(t)},y=function(t){return Math.abs(t)},v=function(t,s){return t?l(t)?{negative:!0,format:\"\"+y(t)+s}:{negative:!1,format:\"\"+t+s}:{negative:!1,format:\"\"}},g=function(){function l(t,s,n){var i=this;if(this.$d={},this.$l=n,void 0===t&&(this.$ms=0,this.parseFromMilliseconds()),s)return f(t*h[m(s)],this);if(\"number\"==typeof t)return this.$ms=t,this.parseFromMilliseconds(),this;if(\"object\"==typeof t)return Object.keys(t).forEach((function(s){i.$d[m(s)]=t[s]})),this.calMilliseconds(),this;if(\"string\"==typeof t){var e=t.match(a);if(e){var r=e.slice(2).map((function(t){return null!=t?Number(t):0}));return this.$d.years=r[0],this.$d.months=r[1],this.$d.weeks=r[2],this.$d.days=r[3],this.$d.hours=r[4],this.$d.minutes=r[5],this.$d.seconds=r[6],this.calMilliseconds(),this}}return this}var y=l.prototype;return y.calMilliseconds=function(){var t=this;this.$ms=Object.keys(this.$d).reduce((function(s,n){return s+(t.$d[n]||0)*h[n]}),0)},y.parseFromMilliseconds=function(){var t=this.$ms;this.$d.years=$(t/u),t%=u,this.$d.months=$(t/d),t%=d,this.$d.days=$(t/r),t%=r,this.$d.hours=$(t/e),t%=e,this.$d.minutes=$(t/i),t%=i,this.$d.seconds=$(t/n),t%=n,this.$d.milliseconds=t},y.toISOString=function(){var t=v(this.$d.years,\"Y\"),s=v(this.$d.months,\"M\"),n=+this.$d.days||0;this.$d.weeks&&(n+=7*this.$d.weeks);var i=v(n,\"D\"),e=v(this.$d.hours,\"H\"),r=v(this.$d.minutes,\"M\"),o=this.$d.seconds||0;this.$d.milliseconds&&(o+=this.$d.milliseconds/1e3,o=Math.round(1e3*o)/1e3);var u=v(o,\"S\"),d=t.negative||s.negative||i.negative||e.negative||r.negative||u.negative,a=e.format||r.format||u.format?\"T\":\"\",h=(d?\"-\":\"\")+\"P\"+t.format+s.format+i.format+a+e.format+r.format+u.format;return\"P\"===h||\"-P\"===h?\"P0D\":h},y.toJSON=function(){return this.toISOString()},y.format=function(t){var n=t||\"YYYY-MM-DDTHH:mm:ss\",i={Y:this.$d.years,YY:s.s(this.$d.years,2,\"0\"),YYYY:s.s(this.$d.years,4,\"0\"),M:this.$d.months,MM:s.s(this.$d.months,2,\"0\"),D:this.$d.days,DD:s.s(this.$d.days,2,\"0\"),H:this.$d.hours,HH:s.s(this.$d.hours,2,\"0\"),m:this.$d.minutes,mm:s.s(this.$d.minutes,2,\"0\"),s:this.$d.seconds,ss:s.s(this.$d.seconds,2,\"0\"),SSS:s.s(this.$d.milliseconds,3,\"0\")};return n.replace(o,(function(t,s){return s||String(i[t])}))},y.as=function(t){return this.$ms/h[m(t)]},y.get=function(t){var s=this.$ms,n=m(t);return\"milliseconds\"===n?s%=1e3:s=\"weeks\"===n?$(s/h[n]):this.$d[n],s||0},y.add=function(t,s,n){var i;return i=s?t*h[m(s)]:c(t)?t.$ms:f(t,this).$ms,f(this.$ms+i*(n?-1:1),this)},y.subtract=function(t,s){return this.add(t,s,!0)},y.locale=function(t){var s=this.clone();return s.$l=t,s},y.clone=function(){return f(this.$ms,this)},y.humanize=function(s){return t().add(this.$ms,\"ms\").locale(this.$l).fromNow(!s)},y.valueOf=function(){return this.asMilliseconds()},y.milliseconds=function(){return this.get(\"milliseconds\")},y.asMilliseconds=function(){return this.as(\"milliseconds\")},y.seconds=function(){return this.get(\"seconds\")},y.asSeconds=function(){return this.as(\"seconds\")},y.minutes=function(){return this.get(\"minutes\")},y.asMinutes=function(){return this.as(\"minutes\")},y.hours=function(){return this.get(\"hours\")},y.asHours=function(){return this.as(\"hours\")},y.days=function(){return this.get(\"days\")},y.asDays=function(){return this.as(\"days\")},y.weeks=function(){return this.get(\"weeks\")},y.asWeeks=function(){return this.as(\"weeks\")},y.months=function(){return this.get(\"months\")},y.asMonths=function(){return this.as(\"months\")},y.years=function(){return this.get(\"years\")},y.asYears=function(){return this.as(\"years\")},l}(),p=function(t,s,n){return t.add(s.years()*n,\"y\").add(s.months()*n,\"M\").add(s.days()*n,\"d\").add(s.hours()*n,\"h\").add(s.minutes()*n,\"m\").add(s.seconds()*n,\"s\").add(s.milliseconds()*n,\"ms\")};return function(n,i,e){t=e,s=e().$utils(),e.duration=function(t,s){var n=e.locale();return f(t,{$l:n},s)},e.isDuration=c;var r=i.prototype.add,o=i.prototype.subtract;i.prototype.add=function(t,s){return c(t)?p(this,t,1):r.bind(this)(t,s)},i.prototype.subtract=function(t,s){return c(t)?p(this,t,-1):o.bind(this)(t,s)}}}));","
\n \n {{formatTime}}\n \n\n\n\n\n\n","!function(e,i){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=i():\"function\"==typeof define&&define.amd?define(i):(e=\"undefined\"!=typeof globalThis?globalThis:e||self).dayjs_plugin_isBetween=i()}(this,(function(){\"use strict\";return function(e,i,t){i.prototype.isBetween=function(e,i,s,f){var n=t(e),o=t(i),r=\"(\"===(f=f||\"()\")[0],u=\")\"===f[1];return(r?this.isAfter(n,s):!this.isBefore(n,s))&&(u?this.isBefore(o,s):!this.isAfter(o,s))||(r?this.isBefore(n,s):!this.isAfter(n,s))&&(u?this.isAfter(o,s):!this.isBefore(o,s))}}}));","import app from \"@songfinch/customer/app\";\n\nexport default function onPageLoaded
(callback: T) {\n if (callback) {\n app.config.globalProperties.$bus.on(\"pageLoaded\", callback);\n }\n}\n","\n\n\n \n\n\n\n","/*!\n * pinia v3.0.1\n * (c) 2025 Eduardo San Martin Morote\n * @license MIT\n */\nimport { hasInjectionContext, inject, toRaw, watch, unref, markRaw, effectScope, ref, isRef, isReactive, getCurrentScope, onScopeDispose, getCurrentInstance, reactive, toRef, nextTick, computed, toRefs } from 'vue';\nimport { setupDevtoolsPlugin } from '@vue/devtools-api';\n\n/**\n * setActivePinia must be called to handle SSR at the top of functions like\n * `fetch`, `setup`, `serverPrefetch` and others\n */\nlet activePinia;\n/**\n * Sets or unsets the active pinia. Used in SSR and internally when calling\n * actions and getters\n *\n * @param pinia - Pinia instance\n */\n// @ts-expect-error: cannot constrain the type of the return\nconst setActivePinia = (pinia) => (activePinia = pinia);\n/**\n * Get the currently active pinia if there is any.\n */\nconst getActivePinia = () => (hasInjectionContext() && inject(piniaSymbol)) || activePinia;\nconst piniaSymbol = ((process.env.NODE_ENV !== 'production') ? Symbol('pinia') : /* istanbul ignore next */ Symbol());\n\nfunction isPlainObject(\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\no) {\n return (o &&\n typeof o === 'object' &&\n Object.prototype.toString.call(o) === '[object Object]' &&\n typeof o.toJSON !== 'function');\n}\n// type DeepReadonly = { readonly [P in keyof T]: DeepReadonly }\n// TODO: can we change these to numbers?\n/**\n * Possible types for SubscriptionCallback\n */\nvar MutationType;\n(function (MutationType) {\n /**\n * Direct mutation of the state:\n *\n * - `store.name = 'new name'`\n * - `store.$state.name = 'new name'`\n * - `store.list.push('new item')`\n */\n MutationType[\"direct\"] = \"direct\";\n /**\n * Mutated the state with `$patch` and an object\n *\n * - `store.$patch({ name: 'newName' })`\n */\n MutationType[\"patchObject\"] = \"patch object\";\n /**\n * Mutated the state with `$patch` and a function\n *\n * - `store.$patch(state => state.name = 'newName')`\n */\n MutationType[\"patchFunction\"] = \"patch function\";\n // maybe reset? for $state = {} and $reset\n})(MutationType || (MutationType = {}));\n\nconst IS_CLIENT = typeof window !== 'undefined';\n\n/*\n * FileSaver.js A saveAs() FileSaver implementation.\n *\n * Originally by Eli Grey, adapted as an ESM module by Eduardo San Martin\n * Morote.\n *\n * License : MIT\n */\n// The one and only way of getting global scope in all environments\n// https://stackoverflow.com/q/3277182/1008999\nconst _global = /*#__PURE__*/ (() => typeof window === 'object' && window.window === window\n ? window\n : typeof self === 'object' && self.self === self\n ? self\n : typeof global === 'object' && global.global === global\n ? global\n : typeof globalThis === 'object'\n ? globalThis\n : { HTMLElement: null })();\nfunction bom(blob, { autoBom = false } = {}) {\n // prepend BOM for UTF-8 XML and text/* types (including HTML)\n // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF\n if (autoBom &&\n /^\\s*(?:text\\/\\S*|application\\/xml|\\S*\\/\\S*\\+xml)\\s*;.*charset\\s*=\\s*utf-8/i.test(blob.type)) {\n return new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });\n }\n return blob;\n}\nfunction download(url, name, opts) {\n const xhr = new XMLHttpRequest();\n xhr.open('GET', url);\n xhr.responseType = 'blob';\n xhr.onload = function () {\n saveAs(xhr.response, name, opts);\n };\n xhr.onerror = function () {\n console.error('could not download file');\n };\n xhr.send();\n}\nfunction corsEnabled(url) {\n const xhr = new XMLHttpRequest();\n // use sync to avoid popup blocker\n xhr.open('HEAD', url, false);\n try {\n xhr.send();\n }\n catch (e) { }\n return xhr.status >= 200 && xhr.status <= 299;\n}\n// `a.click()` doesn't work for all browsers (#465)\nfunction click(node) {\n try {\n node.dispatchEvent(new MouseEvent('click'));\n }\n catch (e) {\n const evt = document.createEvent('MouseEvents');\n evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);\n node.dispatchEvent(evt);\n }\n}\nconst _navigator = typeof navigator === 'object' ? navigator : { userAgent: '' };\n// Detect WebView inside a native macOS app by ruling out all browsers\n// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too\n// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos\nconst isMacOSWebView = /*#__PURE__*/ (() => /Macintosh/.test(_navigator.userAgent) &&\n /AppleWebKit/.test(_navigator.userAgent) &&\n !/Safari/.test(_navigator.userAgent))();\nconst saveAs = !IS_CLIENT\n ? () => { } // noop\n : // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView or mini program\n typeof HTMLAnchorElement !== 'undefined' &&\n 'download' in HTMLAnchorElement.prototype &&\n !isMacOSWebView\n ? downloadSaveAs\n : // Use msSaveOrOpenBlob as a second approach\n 'msSaveOrOpenBlob' in _navigator\n ? msSaveAs\n : // Fallback to using FileReader and a popup\n fileSaverSaveAs;\nfunction downloadSaveAs(blob, name = 'download', opts) {\n const a = document.createElement('a');\n a.download = name;\n a.rel = 'noopener'; // tabnabbing\n // TODO: detect chrome extensions & packaged apps\n // a.target = '_blank'\n if (typeof blob === 'string') {\n // Support regular links\n a.href = blob;\n if (a.origin !== location.origin) {\n if (corsEnabled(a.href)) {\n download(blob, name, opts);\n }\n else {\n a.target = '_blank';\n click(a);\n }\n }\n else {\n click(a);\n }\n }\n else {\n // Support blobs\n a.href = URL.createObjectURL(blob);\n setTimeout(function () {\n URL.revokeObjectURL(a.href);\n }, 4e4); // 40s\n setTimeout(function () {\n click(a);\n }, 0);\n }\n}\nfunction msSaveAs(blob, name = 'download', opts) {\n if (typeof blob === 'string') {\n if (corsEnabled(blob)) {\n download(blob, name, opts);\n }\n else {\n const a = document.createElement('a');\n a.href = blob;\n a.target = '_blank';\n setTimeout(function () {\n click(a);\n });\n }\n }\n else {\n // @ts-ignore: works on windows\n navigator.msSaveOrOpenBlob(bom(blob, opts), name);\n }\n}\nfunction fileSaverSaveAs(blob, name, opts, popup) {\n // Open a popup immediately do go around popup blocker\n // Mostly only available on user interaction and the fileReader is async so...\n popup = popup || open('', '_blank');\n if (popup) {\n popup.document.title = popup.document.body.innerText = 'downloading...';\n }\n if (typeof blob === 'string')\n return download(blob, name, opts);\n const force = blob.type === 'application/octet-stream';\n const isSafari = /constructor/i.test(String(_global.HTMLElement)) || 'safari' in _global;\n const isChromeIOS = /CriOS\\/[\\d]+/.test(navigator.userAgent);\n if ((isChromeIOS || (force && isSafari) || isMacOSWebView) &&\n typeof FileReader !== 'undefined') {\n // Safari doesn't allow downloading of blob URLs\n const reader = new FileReader();\n reader.onloadend = function () {\n let url = reader.result;\n if (typeof url !== 'string') {\n popup = null;\n throw new Error('Wrong reader.result type');\n }\n url = isChromeIOS\n ? url\n : url.replace(/^data:[^;]*;/, 'data:attachment/file;');\n if (popup) {\n popup.location.href = url;\n }\n else {\n location.assign(url);\n }\n popup = null; // reverse-tabnabbing #460\n };\n reader.readAsDataURL(blob);\n }\n else {\n const url = URL.createObjectURL(blob);\n if (popup)\n popup.location.assign(url);\n else\n location.href = url;\n popup = null; // reverse-tabnabbing #460\n setTimeout(function () {\n URL.revokeObjectURL(url);\n }, 4e4); // 40s\n }\n}\n\n/**\n * Shows a toast or console.log\n *\n * @param message - message to log\n * @param type - different color of the tooltip\n */\nfunction toastMessage(message, type) {\n const piniaMessage = '🍍 ' + message;\n if (typeof __VUE_DEVTOOLS_TOAST__ === 'function') {\n // No longer available :(\n __VUE_DEVTOOLS_TOAST__(piniaMessage, type);\n }\n else if (type === 'error') {\n console.error(piniaMessage);\n }\n else if (type === 'warn') {\n console.warn(piniaMessage);\n }\n else {\n console.log(piniaMessage);\n }\n}\nfunction isPinia(o) {\n return '_a' in o && 'install' in o;\n}\n\n/**\n * This file contain devtools actions, they are not Pinia actions.\n */\n// ---\nfunction checkClipboardAccess() {\n if (!('clipboard' in navigator)) {\n toastMessage(`Your browser doesn't support the Clipboard API`, 'error');\n return true;\n }\n}\nfunction checkNotFocusedError(error) {\n if (error instanceof Error &&\n error.message.toLowerCase().includes('document is not focused')) {\n toastMessage('You need to activate the \"Emulate a focused page\" setting in the \"Rendering\" panel of devtools.', 'warn');\n return true;\n }\n return false;\n}\nasync function actionGlobalCopyState(pinia) {\n if (checkClipboardAccess())\n return;\n try {\n await navigator.clipboard.writeText(JSON.stringify(pinia.state.value));\n toastMessage('Global state copied to clipboard.');\n }\n catch (error) {\n if (checkNotFocusedError(error))\n return;\n toastMessage(`Failed to serialize the state. Check the console for more details.`, 'error');\n console.error(error);\n }\n}\nasync function actionGlobalPasteState(pinia) {\n if (checkClipboardAccess())\n return;\n try {\n loadStoresState(pinia, JSON.parse(await navigator.clipboard.readText()));\n toastMessage('Global state pasted from clipboard.');\n }\n catch (error) {\n if (checkNotFocusedError(error))\n return;\n toastMessage(`Failed to deserialize the state from clipboard. Check the console for more details.`, 'error');\n console.error(error);\n }\n}\nasync function actionGlobalSaveState(pinia) {\n try {\n saveAs(new Blob([JSON.stringify(pinia.state.value)], {\n type: 'text/plain;charset=utf-8',\n }), 'pinia-state.json');\n }\n catch (error) {\n toastMessage(`Failed to export the state as JSON. Check the console for more details.`, 'error');\n console.error(error);\n }\n}\nlet fileInput;\nfunction getFileOpener() {\n if (!fileInput) {\n fileInput = document.createElement('input');\n fileInput.type = 'file';\n fileInput.accept = '.json';\n }\n function openFile() {\n return new Promise((resolve, reject) => {\n fileInput.onchange = async () => {\n const files = fileInput.files;\n if (!files)\n return resolve(null);\n const file = files.item(0);\n if (!file)\n return resolve(null);\n return resolve({ text: await file.text(), file });\n };\n // @ts-ignore: TODO: changed from 4.3 to 4.4\n fileInput.oncancel = () => resolve(null);\n fileInput.onerror = reject;\n fileInput.click();\n });\n }\n return openFile;\n}\nasync function actionGlobalOpenStateFile(pinia) {\n try {\n const open = getFileOpener();\n const result = await open();\n if (!result)\n return;\n const { text, file } = result;\n loadStoresState(pinia, JSON.parse(text));\n toastMessage(`Global state imported from \"${file.name}\".`);\n }\n catch (error) {\n toastMessage(`Failed to import the state from JSON. Check the console for more details.`, 'error');\n console.error(error);\n }\n}\nfunction loadStoresState(pinia, state) {\n for (const key in state) {\n const storeState = pinia.state.value[key];\n // store is already instantiated, patch it\n if (storeState) {\n Object.assign(storeState, state[key]);\n }\n else {\n // store is not instantiated, set the initial state\n pinia.state.value[key] = state[key];\n }\n }\n}\n\nfunction formatDisplay(display) {\n return {\n _custom: {\n display,\n },\n };\n}\nconst PINIA_ROOT_LABEL = '🍍 Pinia (root)';\nconst PINIA_ROOT_ID = '_root';\nfunction formatStoreForInspectorTree(store) {\n return isPinia(store)\n ? {\n id: PINIA_ROOT_ID,\n label: PINIA_ROOT_LABEL,\n }\n : {\n id: store.$id,\n label: store.$id,\n };\n}\nfunction formatStoreForInspectorState(store) {\n if (isPinia(store)) {\n const storeNames = Array.from(store._s.keys());\n const storeMap = store._s;\n const state = {\n state: storeNames.map((storeId) => ({\n editable: true,\n key: storeId,\n value: store.state.value[storeId],\n })),\n getters: storeNames\n .filter((id) => storeMap.get(id)._getters)\n .map((id) => {\n const store = storeMap.get(id);\n return {\n editable: false,\n key: id,\n value: store._getters.reduce((getters, key) => {\n getters[key] = store[key];\n return getters;\n }, {}),\n };\n }),\n };\n return state;\n }\n const state = {\n state: Object.keys(store.$state).map((key) => ({\n editable: true,\n key,\n value: store.$state[key],\n })),\n };\n // avoid adding empty getters\n if (store._getters && store._getters.length) {\n state.getters = store._getters.map((getterName) => ({\n editable: false,\n key: getterName,\n value: store[getterName],\n }));\n }\n if (store._customProperties.size) {\n state.customProperties = Array.from(store._customProperties).map((key) => ({\n editable: true,\n key,\n value: store[key],\n }));\n }\n return state;\n}\nfunction formatEventData(events) {\n if (!events)\n return {};\n if (Array.isArray(events)) {\n // TODO: handle add and delete for arrays and objects\n return events.reduce((data, event) => {\n data.keys.push(event.key);\n data.operations.push(event.type);\n data.oldValue[event.key] = event.oldValue;\n data.newValue[event.key] = event.newValue;\n return data;\n }, {\n oldValue: {},\n keys: [],\n operations: [],\n newValue: {},\n });\n }\n else {\n return {\n operation: formatDisplay(events.type),\n key: formatDisplay(events.key),\n oldValue: events.oldValue,\n newValue: events.newValue,\n };\n }\n}\nfunction formatMutationType(type) {\n switch (type) {\n case MutationType.direct:\n return 'mutation';\n case MutationType.patchFunction:\n return '$patch';\n case MutationType.patchObject:\n return '$patch';\n default:\n return 'unknown';\n }\n}\n\n// timeline can be paused when directly changing the state\nlet isTimelineActive = true;\nconst componentStateTypes = [];\nconst MUTATIONS_LAYER_ID = 'pinia:mutations';\nconst INSPECTOR_ID = 'pinia';\nconst { assign: assign$1 } = Object;\n/**\n * Gets the displayed name of a store in devtools\n *\n * @param id - id of the store\n * @returns a formatted string\n */\nconst getStoreType = (id) => '🍍 ' + id;\n/**\n * Add the pinia plugin without any store. Allows displaying a Pinia plugin tab\n * as soon as it is added to the application.\n *\n * @param app - Vue application\n * @param pinia - pinia instance\n */\nfunction registerPiniaDevtools(app, pinia) {\n setupDevtoolsPlugin({\n id: 'dev.esm.pinia',\n label: 'Pinia 🍍',\n logo: 'https://pinia.vuejs.org/logo.svg',\n packageName: 'pinia',\n homepage: 'https://pinia.vuejs.org',\n componentStateTypes,\n app,\n }, (api) => {\n if (typeof api.now !== 'function') {\n toastMessage('You seem to be using an outdated version of Vue Devtools. Are you still using the Beta release instead of the stable one? You can find the links at https://devtools.vuejs.org/guide/installation.html.');\n }\n api.addTimelineLayer({\n id: MUTATIONS_LAYER_ID,\n label: `Pinia 🍍`,\n color: 0xe5df88,\n });\n api.addInspector({\n id: INSPECTOR_ID,\n label: 'Pinia 🍍',\n icon: 'storage',\n treeFilterPlaceholder: 'Search stores',\n actions: [\n {\n icon: 'content_copy',\n action: () => {\n actionGlobalCopyState(pinia);\n },\n tooltip: 'Serialize and copy the state',\n },\n {\n icon: 'content_paste',\n action: async () => {\n await actionGlobalPasteState(pinia);\n api.sendInspectorTree(INSPECTOR_ID);\n api.sendInspectorState(INSPECTOR_ID);\n },\n tooltip: 'Replace the state with the content of your clipboard',\n },\n {\n icon: 'save',\n action: () => {\n actionGlobalSaveState(pinia);\n },\n tooltip: 'Save the state as a JSON file',\n },\n {\n icon: 'folder_open',\n action: async () => {\n await actionGlobalOpenStateFile(pinia);\n api.sendInspectorTree(INSPECTOR_ID);\n api.sendInspectorState(INSPECTOR_ID);\n },\n tooltip: 'Import the state from a JSON file',\n },\n ],\n nodeActions: [\n {\n icon: 'restore',\n tooltip: 'Reset the state (with \"$reset\")',\n action: (nodeId) => {\n const store = pinia._s.get(nodeId);\n if (!store) {\n toastMessage(`Cannot reset \"${nodeId}\" store because it wasn't found.`, 'warn');\n }\n else if (typeof store.$reset !== 'function') {\n toastMessage(`Cannot reset \"${nodeId}\" store because it doesn't have a \"$reset\" method implemented.`, 'warn');\n }\n else {\n store.$reset();\n toastMessage(`Store \"${nodeId}\" reset.`);\n }\n },\n },\n ],\n });\n api.on.inspectComponent((payload) => {\n const proxy = (payload.componentInstance &&\n payload.componentInstance.proxy);\n if (proxy && proxy._pStores) {\n const piniaStores = payload.componentInstance.proxy._pStores;\n Object.values(piniaStores).forEach((store) => {\n payload.instanceData.state.push({\n type: getStoreType(store.$id),\n key: 'state',\n editable: true,\n value: store._isOptionsAPI\n ? {\n _custom: {\n value: toRaw(store.$state),\n actions: [\n {\n icon: 'restore',\n tooltip: 'Reset the state of this store',\n action: () => store.$reset(),\n },\n ],\n },\n }\n : // NOTE: workaround to unwrap transferred refs\n Object.keys(store.$state).reduce((state, key) => {\n state[key] = store.$state[key];\n return state;\n }, {}),\n });\n if (store._getters && store._getters.length) {\n payload.instanceData.state.push({\n type: getStoreType(store.$id),\n key: 'getters',\n editable: false,\n value: store._getters.reduce((getters, key) => {\n try {\n getters[key] = store[key];\n }\n catch (error) {\n // @ts-expect-error: we just want to show it in devtools\n getters[key] = error;\n }\n return getters;\n }, {}),\n });\n }\n });\n }\n });\n api.on.getInspectorTree((payload) => {\n if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {\n let stores = [pinia];\n stores = stores.concat(Array.from(pinia._s.values()));\n payload.rootNodes = (payload.filter\n ? stores.filter((store) => '$id' in store\n ? store.$id\n .toLowerCase()\n .includes(payload.filter.toLowerCase())\n : PINIA_ROOT_LABEL.toLowerCase().includes(payload.filter.toLowerCase()))\n : stores).map(formatStoreForInspectorTree);\n }\n });\n // Expose pinia instance as $pinia to window\n globalThis.$pinia = pinia;\n api.on.getInspectorState((payload) => {\n if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {\n const inspectedStore = payload.nodeId === PINIA_ROOT_ID\n ? pinia\n : pinia._s.get(payload.nodeId);\n if (!inspectedStore) {\n // this could be the selected store restored for a different project\n // so it's better not to say anything here\n return;\n }\n if (inspectedStore) {\n // Expose selected store as $store to window\n if (payload.nodeId !== PINIA_ROOT_ID)\n globalThis.$store = toRaw(inspectedStore);\n payload.state = formatStoreForInspectorState(inspectedStore);\n }\n }\n });\n api.on.editInspectorState((payload) => {\n if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {\n const inspectedStore = payload.nodeId === PINIA_ROOT_ID\n ? pinia\n : pinia._s.get(payload.nodeId);\n if (!inspectedStore) {\n return toastMessage(`store \"${payload.nodeId}\" not found`, 'error');\n }\n const { path } = payload;\n if (!isPinia(inspectedStore)) {\n // access only the state\n if (path.length !== 1 ||\n !inspectedStore._customProperties.has(path[0]) ||\n path[0] in inspectedStore.$state) {\n path.unshift('$state');\n }\n }\n else {\n // Root access, we can omit the `.value` because the devtools API does it for us\n path.unshift('state');\n }\n isTimelineActive = false;\n payload.set(inspectedStore, path, payload.state.value);\n isTimelineActive = true;\n }\n });\n api.on.editComponentState((payload) => {\n if (payload.type.startsWith('🍍')) {\n const storeId = payload.type.replace(/^🍍\\s*/, '');\n const store = pinia._s.get(storeId);\n if (!store) {\n return toastMessage(`store \"${storeId}\" not found`, 'error');\n }\n const { path } = payload;\n if (path[0] !== 'state') {\n return toastMessage(`Invalid path for store \"${storeId}\":\\n${path}\\nOnly state can be modified.`);\n }\n // rewrite the first entry to be able to directly set the state as\n // well as any other path\n path[0] = '$state';\n isTimelineActive = false;\n payload.set(store, path, payload.state.value);\n isTimelineActive = true;\n }\n });\n });\n}\nfunction addStoreToDevtools(app, store) {\n if (!componentStateTypes.includes(getStoreType(store.$id))) {\n componentStateTypes.push(getStoreType(store.$id));\n }\n setupDevtoolsPlugin({\n id: 'dev.esm.pinia',\n label: 'Pinia 🍍',\n logo: 'https://pinia.vuejs.org/logo.svg',\n packageName: 'pinia',\n homepage: 'https://pinia.vuejs.org',\n componentStateTypes,\n app,\n settings: {\n logStoreChanges: {\n label: 'Notify about new/deleted stores',\n type: 'boolean',\n defaultValue: true,\n },\n // useEmojis: {\n // label: 'Use emojis in messages ⚡️',\n // type: 'boolean',\n // defaultValue: true,\n // },\n },\n }, (api) => {\n // gracefully handle errors\n const now = typeof api.now === 'function' ? api.now.bind(api) : Date.now;\n store.$onAction(({ after, onError, name, args }) => {\n const groupId = runningActionId++;\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: {\n time: now(),\n title: '🛫 ' + name,\n subtitle: 'start',\n data: {\n store: formatDisplay(store.$id),\n action: formatDisplay(name),\n args,\n },\n groupId,\n },\n });\n after((result) => {\n activeAction = undefined;\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: {\n time: now(),\n title: '🛬 ' + name,\n subtitle: 'end',\n data: {\n store: formatDisplay(store.$id),\n action: formatDisplay(name),\n args,\n result,\n },\n groupId,\n },\n });\n });\n onError((error) => {\n activeAction = undefined;\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: {\n time: now(),\n logType: 'error',\n title: '💥 ' + name,\n subtitle: 'end',\n data: {\n store: formatDisplay(store.$id),\n action: formatDisplay(name),\n args,\n error,\n },\n groupId,\n },\n });\n });\n }, true);\n store._customProperties.forEach((name) => {\n watch(() => unref(store[name]), (newValue, oldValue) => {\n api.notifyComponentUpdate();\n api.sendInspectorState(INSPECTOR_ID);\n if (isTimelineActive) {\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: {\n time: now(),\n title: 'Change',\n subtitle: name,\n data: {\n newValue,\n oldValue,\n },\n groupId: activeAction,\n },\n });\n }\n }, { deep: true });\n });\n store.$subscribe(({ events, type }, state) => {\n api.notifyComponentUpdate();\n api.sendInspectorState(INSPECTOR_ID);\n if (!isTimelineActive)\n return;\n // rootStore.state[store.id] = state\n const eventData = {\n time: now(),\n title: formatMutationType(type),\n data: assign$1({ store: formatDisplay(store.$id) }, formatEventData(events)),\n groupId: activeAction,\n };\n if (type === MutationType.patchFunction) {\n eventData.subtitle = '⤵️';\n }\n else if (type === MutationType.patchObject) {\n eventData.subtitle = '🧩';\n }\n else if (events && !Array.isArray(events)) {\n eventData.subtitle = events.type;\n }\n if (events) {\n eventData.data['rawEvent(s)'] = {\n _custom: {\n display: 'DebuggerEvent',\n type: 'object',\n tooltip: 'raw DebuggerEvent[]',\n value: events,\n },\n };\n }\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: eventData,\n });\n }, { detached: true, flush: 'sync' });\n const hotUpdate = store._hotUpdate;\n store._hotUpdate = markRaw((newStore) => {\n hotUpdate(newStore);\n api.addTimelineEvent({\n layerId: MUTATIONS_LAYER_ID,\n event: {\n time: now(),\n title: '🔥 ' + store.$id,\n subtitle: 'HMR update',\n data: {\n store: formatDisplay(store.$id),\n info: formatDisplay(`HMR update`),\n },\n },\n });\n // update the devtools too\n api.notifyComponentUpdate();\n api.sendInspectorTree(INSPECTOR_ID);\n api.sendInspectorState(INSPECTOR_ID);\n });\n const { $dispose } = store;\n store.$dispose = () => {\n $dispose();\n api.notifyComponentUpdate();\n api.sendInspectorTree(INSPECTOR_ID);\n api.sendInspectorState(INSPECTOR_ID);\n api.getSettings().logStoreChanges &&\n toastMessage(`Disposed \"${store.$id}\" store 🗑`);\n };\n // trigger an update so it can display new registered stores\n api.notifyComponentUpdate();\n api.sendInspectorTree(INSPECTOR_ID);\n api.sendInspectorState(INSPECTOR_ID);\n api.getSettings().logStoreChanges &&\n toastMessage(`\"${store.$id}\" store installed 🆕`);\n });\n}\nlet runningActionId = 0;\nlet activeAction;\n/**\n * Patches a store to enable action grouping in devtools by wrapping the store with a Proxy that is passed as the\n * context of all actions, allowing us to set `runningAction` on each access and effectively associating any state\n * mutation to the action.\n *\n * @param store - store to patch\n * @param actionNames - list of actionst to patch\n */\nfunction patchActionForGrouping(store, actionNames, wrapWithProxy) {\n // original actions of the store as they are given by pinia. We are going to override them\n const actions = actionNames.reduce((storeActions, actionName) => {\n // use toRaw to avoid tracking #541\n storeActions[actionName] = toRaw(store)[actionName];\n return storeActions;\n }, {});\n for (const actionName in actions) {\n store[actionName] = function () {\n // the running action id is incremented in a before action hook\n const _actionId = runningActionId;\n const trackedStore = wrapWithProxy\n ? new Proxy(store, {\n get(...args) {\n activeAction = _actionId;\n return Reflect.get(...args);\n },\n set(...args) {\n activeAction = _actionId;\n return Reflect.set(...args);\n },\n })\n : store;\n // For Setup Stores we need https://github.com/tc39/proposal-async-context\n activeAction = _actionId;\n const retValue = actions[actionName].apply(trackedStore, arguments);\n // this is safer as async actions in Setup Stores would associate mutations done outside of the action\n activeAction = undefined;\n return retValue;\n };\n }\n}\n/**\n * pinia.use(devtoolsPlugin)\n */\nfunction devtoolsPlugin({ app, store, options }) {\n // HMR module\n if (store.$id.startsWith('__hot:')) {\n return;\n }\n // detect option api vs setup api\n store._isOptionsAPI = !!options.state;\n // Do not overwrite actions mocked by @pinia/testing (#2298)\n if (!store._p._testing) {\n patchActionForGrouping(store, Object.keys(options.actions), store._isOptionsAPI);\n // Upgrade the HMR to also update the new actions\n const originalHotUpdate = store._hotUpdate;\n toRaw(store)._hotUpdate = function (newStore) {\n originalHotUpdate.apply(this, arguments);\n patchActionForGrouping(store, Object.keys(newStore._hmrPayload.actions), !!store._isOptionsAPI);\n };\n }\n addStoreToDevtools(app, \n // FIXME: is there a way to allow the assignment from Store to StoreGeneric?\n store);\n}\n\n/**\n * Creates a Pinia instance to be used by the application\n */\nfunction createPinia() {\n const scope = effectScope(true);\n // NOTE: here we could check the window object for a state and directly set it\n // if there is anything like it with Vue 3 SSR\n const state = scope.run(() => ref({}));\n let _p = [];\n // plugins added before calling app.use(pinia)\n let toBeInstalled = [];\n const pinia = markRaw({\n install(app) {\n // this allows calling useStore() outside of a component setup after\n // installing pinia's plugin\n setActivePinia(pinia);\n pinia._a = app;\n app.provide(piniaSymbol, pinia);\n app.config.globalProperties.$pinia = pinia;\n /* istanbul ignore else */\n if ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && IS_CLIENT) {\n registerPiniaDevtools(app, pinia);\n }\n toBeInstalled.forEach((plugin) => _p.push(plugin));\n toBeInstalled = [];\n },\n use(plugin) {\n if (!this._a) {\n toBeInstalled.push(plugin);\n }\n else {\n _p.push(plugin);\n }\n return this;\n },\n _p,\n // it's actually undefined here\n // @ts-expect-error\n _a: null,\n _e: scope,\n _s: new Map(),\n state,\n });\n // pinia devtools rely on dev only features so they cannot be forced unless\n // the dev build of Vue is used. Avoid old browsers like IE11.\n if ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && IS_CLIENT && typeof Proxy !== 'undefined') {\n pinia.use(devtoolsPlugin);\n }\n return pinia;\n}\n/**\n * Dispose a Pinia instance by stopping its effectScope and removing the state, plugins and stores. This is mostly\n * useful in tests, with both a testing pinia or a regular pinia and in applications that use multiple pinia instances.\n * Once disposed, the pinia instance cannot be used anymore.\n *\n * @param pinia - pinia instance\n */\nfunction disposePinia(pinia) {\n pinia._e.stop();\n pinia._s.clear();\n pinia._p.splice(0);\n pinia.state.value = {};\n // @ts-expect-error: non valid\n pinia._a = null;\n}\n\n/**\n * Checks if a function is a `StoreDefinition`.\n *\n * @param fn - object to test\n * @returns true if `fn` is a StoreDefinition\n */\nconst isUseStore = (fn) => {\n return typeof fn === 'function' && typeof fn.$id === 'string';\n};\n/**\n * Mutates in place `newState` with `oldState` to _hot update_ it. It will\n * remove any key not existing in `newState` and recursively merge plain\n * objects.\n *\n * @param newState - new state object to be patched\n * @param oldState - old state that should be used to patch newState\n * @returns - newState\n */\nfunction patchObject(newState, oldState) {\n // no need to go through symbols because they cannot be serialized anyway\n for (const key in oldState) {\n const subPatch = oldState[key];\n // skip the whole sub tree\n if (!(key in newState)) {\n continue;\n }\n const targetValue = newState[key];\n if (isPlainObject(targetValue) &&\n isPlainObject(subPatch) &&\n !isRef(subPatch) &&\n !isReactive(subPatch)) {\n newState[key] = patchObject(targetValue, subPatch);\n }\n else {\n // objects are either a bit more complex (e.g. refs) or primitives, so we\n // just set the whole thing\n newState[key] = subPatch;\n }\n }\n return newState;\n}\n/**\n * Creates an _accept_ function to pass to `import.meta.hot` in Vite applications.\n *\n * @example\n * ```js\n * const useUser = defineStore(...)\n * if (import.meta.hot) {\n * import.meta.hot.accept(acceptHMRUpdate(useUser, import.meta.hot))\n * }\n * ```\n *\n * @param initialUseStore - return of the defineStore to hot update\n * @param hot - `import.meta.hot`\n */\nfunction acceptHMRUpdate(initialUseStore, hot) {\n // strip as much as possible from iife.prod\n if (!(process.env.NODE_ENV !== 'production')) {\n return () => { };\n }\n return (newModule) => {\n const pinia = hot.data.pinia || initialUseStore._pinia;\n if (!pinia) {\n // this store is still not used\n return;\n }\n // preserve the pinia instance across loads\n hot.data.pinia = pinia;\n // console.log('got data', newStore)\n for (const exportName in newModule) {\n const useStore = newModule[exportName];\n // console.log('checking for', exportName)\n if (isUseStore(useStore) && pinia._s.has(useStore.$id)) {\n // console.log('Accepting update for', useStore.$id)\n const id = useStore.$id;\n if (id !== initialUseStore.$id) {\n console.warn(`The id of the store changed from \"${initialUseStore.$id}\" to \"${id}\". Reloading.`);\n // return import.meta.hot.invalidate()\n return hot.invalidate();\n }\n const existingStore = pinia._s.get(id);\n if (!existingStore) {\n console.log(`[Pinia]: skipping hmr because store doesn't exist yet`);\n return;\n }\n useStore(pinia, existingStore);\n }\n }\n };\n}\n\nconst noop = () => { };\nfunction addSubscription(subscriptions, callback, detached, onCleanup = noop) {\n subscriptions.push(callback);\n const removeSubscription = () => {\n const idx = subscriptions.indexOf(callback);\n if (idx > -1) {\n subscriptions.splice(idx, 1);\n onCleanup();\n }\n };\n if (!detached && getCurrentScope()) {\n onScopeDispose(removeSubscription);\n }\n return removeSubscription;\n}\nfunction triggerSubscriptions(subscriptions, ...args) {\n subscriptions.slice().forEach((callback) => {\n callback(...args);\n });\n}\n\nconst fallbackRunWithContext = (fn) => fn();\n/**\n * Marks a function as an action for `$onAction`\n * @internal\n */\nconst ACTION_MARKER = Symbol();\n/**\n * Action name symbol. Allows to add a name to an action after defining it\n * @internal\n */\nconst ACTION_NAME = Symbol();\nfunction mergeReactiveObjects(target, patchToApply) {\n // Handle Map instances\n if (target instanceof Map && patchToApply instanceof Map) {\n patchToApply.forEach((value, key) => target.set(key, value));\n }\n else if (target instanceof Set && patchToApply instanceof Set) {\n // Handle Set instances\n patchToApply.forEach(target.add, target);\n }\n // no need to go through symbols because they cannot be serialized anyway\n for (const key in patchToApply) {\n if (!patchToApply.hasOwnProperty(key))\n continue;\n const subPatch = patchToApply[key];\n const targetValue = target[key];\n if (isPlainObject(targetValue) &&\n isPlainObject(subPatch) &&\n target.hasOwnProperty(key) &&\n !isRef(subPatch) &&\n !isReactive(subPatch)) {\n // NOTE: here I wanted to warn about inconsistent types but it's not possible because in setup stores one might\n // start the value of a property as a certain type e.g. a Map, and then for some reason, during SSR, change that\n // to `undefined`. When trying to hydrate, we want to override the Map with `undefined`.\n target[key] = mergeReactiveObjects(targetValue, subPatch);\n }\n else {\n // @ts-expect-error: subPatch is a valid value\n target[key] = subPatch;\n }\n }\n return target;\n}\nconst skipHydrateSymbol = (process.env.NODE_ENV !== 'production')\n ? Symbol('pinia:skipHydration')\n : /* istanbul ignore next */ Symbol();\n/**\n * Tells Pinia to skip the hydration process of a given object. This is useful in setup stores (only) when you return a\n * stateful object in the store but it isn't really state. e.g. returning a router instance in a setup store.\n *\n * @param obj - target object\n * @returns obj\n */\nfunction skipHydrate(obj) {\n return Object.defineProperty(obj, skipHydrateSymbol, {});\n}\n/**\n * Returns whether a value should be hydrated\n *\n * @param obj - target variable\n * @returns true if `obj` should be hydrated\n */\nfunction shouldHydrate(obj) {\n return !isPlainObject(obj) || !obj.hasOwnProperty(skipHydrateSymbol);\n}\nconst { assign } = Object;\nfunction isComputed(o) {\n return !!(isRef(o) && o.effect);\n}\nfunction createOptionsStore(id, options, pinia, hot) {\n const { state, actions, getters } = options;\n const initialState = pinia.state.value[id];\n let store;\n function setup() {\n if (!initialState && (!(process.env.NODE_ENV !== 'production') || !hot)) {\n /* istanbul ignore if */\n pinia.state.value[id] = state ? state() : {};\n }\n // avoid creating a state in pinia.state.value\n const localState = (process.env.NODE_ENV !== 'production') && hot\n ? // use ref() to unwrap refs inside state TODO: check if this is still necessary\n toRefs(ref(state ? state() : {}).value)\n : toRefs(pinia.state.value[id]);\n return assign(localState, actions, Object.keys(getters || {}).reduce((computedGetters, name) => {\n if ((process.env.NODE_ENV !== 'production') && name in localState) {\n console.warn(`[🍍]: A getter cannot have the same name as another state property. Rename one of them. Found with \"${name}\" in store \"${id}\".`);\n }\n computedGetters[name] = markRaw(computed(() => {\n setActivePinia(pinia);\n // it was created just before\n const store = pinia._s.get(id);\n // allow cross using stores\n // @ts-expect-error\n // return getters![name].call(context, context)\n // TODO: avoid reading the getter while assigning with a global variable\n return getters[name].call(store, store);\n }));\n return computedGetters;\n }, {}));\n }\n store = createSetupStore(id, setup, options, pinia, hot, true);\n return store;\n}\nfunction createSetupStore($id, setup, options = {}, pinia, hot, isOptionsStore) {\n let scope;\n const optionsForPlugin = assign({ actions: {} }, options);\n /* istanbul ignore if */\n if ((process.env.NODE_ENV !== 'production') && !pinia._e.active) {\n throw new Error('Pinia destroyed');\n }\n // watcher options for $subscribe\n const $subscribeOptions = { deep: true };\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n $subscribeOptions.onTrigger = (event) => {\n /* istanbul ignore else */\n if (isListening) {\n debuggerEvents = event;\n // avoid triggering this while the store is being built and the state is being set in pinia\n }\n else if (isListening == false && !store._hotUpdating) {\n // let patch send all the events together later\n /* istanbul ignore else */\n if (Array.isArray(debuggerEvents)) {\n debuggerEvents.push(event);\n }\n else {\n console.error('🍍 debuggerEvents should be an array. This is most likely an internal Pinia bug.');\n }\n }\n };\n }\n // internal state\n let isListening; // set to true at the end\n let isSyncListening; // set to true at the end\n let subscriptions = [];\n let actionSubscriptions = [];\n let debuggerEvents;\n const initialState = pinia.state.value[$id];\n // avoid setting the state for option stores if it is set\n // by the setup\n if (!isOptionsStore && !initialState && (!(process.env.NODE_ENV !== 'production') || !hot)) {\n /* istanbul ignore if */\n pinia.state.value[$id] = {};\n }\n const hotState = ref({});\n // avoid triggering too many listeners\n // https://github.com/vuejs/pinia/issues/1129\n let activeListener;\n function $patch(partialStateOrMutator) {\n let subscriptionMutation;\n isListening = isSyncListening = false;\n // reset the debugger events since patches are sync\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n debuggerEvents = [];\n }\n if (typeof partialStateOrMutator === 'function') {\n partialStateOrMutator(pinia.state.value[$id]);\n subscriptionMutation = {\n type: MutationType.patchFunction,\n storeId: $id,\n events: debuggerEvents,\n };\n }\n else {\n mergeReactiveObjects(pinia.state.value[$id], partialStateOrMutator);\n subscriptionMutation = {\n type: MutationType.patchObject,\n payload: partialStateOrMutator,\n storeId: $id,\n events: debuggerEvents,\n };\n }\n const myListenerId = (activeListener = Symbol());\n nextTick().then(() => {\n if (activeListener === myListenerId) {\n isListening = true;\n }\n });\n isSyncListening = true;\n // because we paused the watcher, we need to manually call the subscriptions\n triggerSubscriptions(subscriptions, subscriptionMutation, pinia.state.value[$id]);\n }\n const $reset = isOptionsStore\n ? function $reset() {\n const { state } = options;\n const newState = state ? state() : {};\n // we use a patch to group all changes into one single subscription\n this.$patch(($state) => {\n // @ts-expect-error: FIXME: shouldn't error?\n assign($state, newState);\n });\n }\n : /* istanbul ignore next */\n (process.env.NODE_ENV !== 'production')\n ? () => {\n throw new Error(`🍍: Store \"${$id}\" is built using the setup syntax and does not implement $reset().`);\n }\n : noop;\n function $dispose() {\n scope.stop();\n subscriptions = [];\n actionSubscriptions = [];\n pinia._s.delete($id);\n }\n /**\n * Helper that wraps function so it can be tracked with $onAction\n * @param fn - action to wrap\n * @param name - name of the action\n */\n const action = (fn, name = '') => {\n if (ACTION_MARKER in fn) {\n fn[ACTION_NAME] = name;\n return fn;\n }\n const wrappedAction = function () {\n setActivePinia(pinia);\n const args = Array.from(arguments);\n const afterCallbackList = [];\n const onErrorCallbackList = [];\n function after(callback) {\n afterCallbackList.push(callback);\n }\n function onError(callback) {\n onErrorCallbackList.push(callback);\n }\n // @ts-expect-error\n triggerSubscriptions(actionSubscriptions, {\n args,\n name: wrappedAction[ACTION_NAME],\n store,\n after,\n onError,\n });\n let ret;\n try {\n ret = fn.apply(this && this.$id === $id ? this : store, args);\n // handle sync errors\n }\n catch (error) {\n triggerSubscriptions(onErrorCallbackList, error);\n throw error;\n }\n if (ret instanceof Promise) {\n return ret\n .then((value) => {\n triggerSubscriptions(afterCallbackList, value);\n return value;\n })\n .catch((error) => {\n triggerSubscriptions(onErrorCallbackList, error);\n return Promise.reject(error);\n });\n }\n // trigger after callbacks\n triggerSubscriptions(afterCallbackList, ret);\n return ret;\n };\n wrappedAction[ACTION_MARKER] = true;\n wrappedAction[ACTION_NAME] = name; // will be set later\n // @ts-expect-error: we are intentionally limiting the returned type to just Fn\n // because all the added properties are internals that are exposed through `$onAction()` only\n return wrappedAction;\n };\n const _hmrPayload = /*#__PURE__*/ markRaw({\n actions: {},\n getters: {},\n state: [],\n hotState,\n });\n const partialStore = {\n _p: pinia,\n // _s: scope,\n $id,\n $onAction: addSubscription.bind(null, actionSubscriptions),\n $patch,\n $reset,\n $subscribe(callback, options = {}) {\n const removeSubscription = addSubscription(subscriptions, callback, options.detached, () => stopWatcher());\n const stopWatcher = scope.run(() => watch(() => pinia.state.value[$id], (state) => {\n if (options.flush === 'sync' ? isSyncListening : isListening) {\n callback({\n storeId: $id,\n type: MutationType.direct,\n events: debuggerEvents,\n }, state);\n }\n }, assign({}, $subscribeOptions, options)));\n return removeSubscription;\n },\n $dispose,\n };\n const store = reactive((process.env.NODE_ENV !== 'production') || ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && IS_CLIENT)\n ? assign({\n _hmrPayload,\n _customProperties: markRaw(new Set()), // devtools custom properties\n }, partialStore\n // must be added later\n // setupStore\n )\n : partialStore);\n // store the partial store now so the setup of stores can instantiate each other before they are finished without\n // creating infinite loops.\n pinia._s.set($id, store);\n const runWithContext = (pinia._a && pinia._a.runWithContext) || fallbackRunWithContext;\n // TODO: idea create skipSerialize that marks properties as non serializable and they are skipped\n const setupStore = runWithContext(() => pinia._e.run(() => (scope = effectScope()).run(() => setup({ action }))));\n // overwrite existing actions to support $onAction\n for (const key in setupStore) {\n const prop = setupStore[key];\n if ((isRef(prop) && !isComputed(prop)) || isReactive(prop)) {\n // mark it as a piece of state to be serialized\n if ((process.env.NODE_ENV !== 'production') && hot) {\n hotState.value[key] = toRef(setupStore, key);\n // createOptionStore directly sets the state in pinia.state.value so we\n // can just skip that\n }\n else if (!isOptionsStore) {\n // in setup stores we must hydrate the state and sync pinia state tree with the refs the user just created\n if (initialState && shouldHydrate(prop)) {\n if (isRef(prop)) {\n prop.value = initialState[key];\n }\n else {\n // probably a reactive object, lets recursively assign\n // @ts-expect-error: prop is unknown\n mergeReactiveObjects(prop, initialState[key]);\n }\n }\n // transfer the ref to the pinia state to keep everything in sync\n pinia.state.value[$id][key] = prop;\n }\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n _hmrPayload.state.push(key);\n }\n // action\n }\n else if (typeof prop === 'function') {\n const actionValue = (process.env.NODE_ENV !== 'production') && hot ? prop : action(prop, key);\n // this a hot module replacement store because the hotUpdate method needs\n // to do it with the right context\n // @ts-expect-error\n setupStore[key] = actionValue;\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n _hmrPayload.actions[key] = prop;\n }\n // list actions so they can be used in plugins\n // @ts-expect-error\n optionsForPlugin.actions[key] = prop;\n }\n else if ((process.env.NODE_ENV !== 'production')) {\n // add getters for devtools\n if (isComputed(prop)) {\n _hmrPayload.getters[key] = isOptionsStore\n ? // @ts-expect-error\n options.getters[key]\n : prop;\n if (IS_CLIENT) {\n const getters = setupStore._getters ||\n // @ts-expect-error: same\n (setupStore._getters = markRaw([]));\n getters.push(key);\n }\n }\n }\n }\n // add the state, getters, and action properties\n /* istanbul ignore if */\n assign(store, setupStore);\n // allows retrieving reactive objects with `storeToRefs()`. Must be called after assigning to the reactive object.\n // Make `storeToRefs()` work with `reactive()` #799\n assign(toRaw(store), setupStore);\n // use this instead of a computed with setter to be able to create it anywhere\n // without linking the computed lifespan to wherever the store is first\n // created.\n Object.defineProperty(store, '$state', {\n get: () => ((process.env.NODE_ENV !== 'production') && hot ? hotState.value : pinia.state.value[$id]),\n set: (state) => {\n /* istanbul ignore if */\n if ((process.env.NODE_ENV !== 'production') && hot) {\n throw new Error('cannot set hotState');\n }\n $patch(($state) => {\n // @ts-expect-error: FIXME: shouldn't error?\n assign($state, state);\n });\n },\n });\n // add the hotUpdate before plugins to allow them to override it\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n store._hotUpdate = markRaw((newStore) => {\n store._hotUpdating = true;\n newStore._hmrPayload.state.forEach((stateKey) => {\n if (stateKey in store.$state) {\n const newStateTarget = newStore.$state[stateKey];\n const oldStateSource = store.$state[stateKey];\n if (typeof newStateTarget === 'object' &&\n isPlainObject(newStateTarget) &&\n isPlainObject(oldStateSource)) {\n patchObject(newStateTarget, oldStateSource);\n }\n else {\n // transfer the ref\n newStore.$state[stateKey] = oldStateSource;\n }\n }\n // patch direct access properties to allow store.stateProperty to work as\n // store.$state.stateProperty\n // @ts-expect-error: any type\n store[stateKey] = toRef(newStore.$state, stateKey);\n });\n // remove deleted state properties\n Object.keys(store.$state).forEach((stateKey) => {\n if (!(stateKey in newStore.$state)) {\n // @ts-expect-error: noop if doesn't exist\n delete store[stateKey];\n }\n });\n // avoid devtools logging this as a mutation\n isListening = false;\n isSyncListening = false;\n pinia.state.value[$id] = toRef(newStore._hmrPayload, 'hotState');\n isSyncListening = true;\n nextTick().then(() => {\n isListening = true;\n });\n for (const actionName in newStore._hmrPayload.actions) {\n const actionFn = newStore[actionName];\n // @ts-expect-error: actionName is a string\n store[actionName] =\n //\n action(actionFn, actionName);\n }\n // TODO: does this work in both setup and option store?\n for (const getterName in newStore._hmrPayload.getters) {\n const getter = newStore._hmrPayload.getters[getterName];\n const getterValue = isOptionsStore\n ? // special handling of options api\n computed(() => {\n setActivePinia(pinia);\n return getter.call(store, store);\n })\n : getter;\n // @ts-expect-error: getterName is a string\n store[getterName] =\n //\n getterValue;\n }\n // remove deleted getters\n Object.keys(store._hmrPayload.getters).forEach((key) => {\n if (!(key in newStore._hmrPayload.getters)) {\n // @ts-expect-error: noop if doesn't exist\n delete store[key];\n }\n });\n // remove old actions\n Object.keys(store._hmrPayload.actions).forEach((key) => {\n if (!(key in newStore._hmrPayload.actions)) {\n // @ts-expect-error: noop if doesn't exist\n delete store[key];\n }\n });\n // update the values used in devtools and to allow deleting new properties later on\n store._hmrPayload = newStore._hmrPayload;\n store._getters = newStore._getters;\n store._hotUpdating = false;\n });\n }\n if ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && IS_CLIENT) {\n const nonEnumerable = {\n writable: true,\n configurable: true,\n // avoid warning on devtools trying to display this property\n enumerable: false,\n };\n ['_p', '_hmrPayload', '_getters', '_customProperties'].forEach((p) => {\n Object.defineProperty(store, p, assign({ value: store[p] }, nonEnumerable));\n });\n }\n // apply all plugins\n pinia._p.forEach((extender) => {\n /* istanbul ignore else */\n if ((((process.env.NODE_ENV !== 'production') || (typeof __VUE_PROD_DEVTOOLS__ !== 'undefined' && __VUE_PROD_DEVTOOLS__)) && !(process.env.NODE_ENV === 'test')) && IS_CLIENT) {\n const extensions = scope.run(() => extender({\n store: store,\n app: pinia._a,\n pinia,\n options: optionsForPlugin,\n }));\n Object.keys(extensions || {}).forEach((key) => store._customProperties.add(key));\n assign(store, extensions);\n }\n else {\n assign(store, scope.run(() => extender({\n store: store,\n app: pinia._a,\n pinia,\n options: optionsForPlugin,\n })));\n }\n });\n if ((process.env.NODE_ENV !== 'production') &&\n store.$state &&\n typeof store.$state === 'object' &&\n typeof store.$state.constructor === 'function' &&\n !store.$state.constructor.toString().includes('[native code]')) {\n console.warn(`[🍍]: The \"state\" must be a plain object. It cannot be\\n` +\n `\\tstate: () => new MyClass()\\n` +\n `Found in store \"${store.$id}\".`);\n }\n // only apply hydrate to option stores with an initial state in pinia\n if (initialState &&\n isOptionsStore &&\n options.hydrate) {\n options.hydrate(store.$state, initialState);\n }\n isListening = true;\n isSyncListening = true;\n return store;\n}\n// allows unused stores to be tree shaken\n/*! #__NO_SIDE_EFFECTS__ */\nfunction defineStore(\n// TODO: add proper types from above\nid, setup, setupOptions) {\n let options;\n const isSetupStore = typeof setup === 'function';\n // the option store setup will contain the actual options in this case\n options = isSetupStore ? setupOptions : setup;\n function useStore(pinia, hot) {\n const hasContext = hasInjectionContext();\n pinia =\n // in test mode, ignore the argument provided as we can always retrieve a\n // pinia instance with getActivePinia()\n ((process.env.NODE_ENV === 'test') && activePinia && activePinia._testing ? null : pinia) ||\n (hasContext ? inject(piniaSymbol, null) : null);\n if (pinia)\n setActivePinia(pinia);\n if ((process.env.NODE_ENV !== 'production') && !activePinia) {\n throw new Error(`[🍍]: \"getActivePinia()\" was called but there was no active Pinia. Are you trying to use a store before calling \"app.use(pinia)\"?\\n` +\n `See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.\\n` +\n `This will fail in production.`);\n }\n pinia = activePinia;\n if (!pinia._s.has(id)) {\n // creating the store registers it in `pinia._s`\n if (isSetupStore) {\n createSetupStore(id, setup, options, pinia);\n }\n else {\n createOptionsStore(id, options, pinia);\n }\n /* istanbul ignore else */\n if ((process.env.NODE_ENV !== 'production')) {\n // @ts-expect-error: not the right inferred type\n useStore._pinia = pinia;\n }\n }\n const store = pinia._s.get(id);\n if ((process.env.NODE_ENV !== 'production') && hot) {\n const hotId = '__hot:' + id;\n const newStore = isSetupStore\n ? createSetupStore(hotId, setup, options, pinia, true)\n : createOptionsStore(hotId, assign({}, options), pinia, true);\n hot._hotUpdate(newStore);\n // cleanup the state properties and the store from the cache\n delete pinia.state.value[hotId];\n pinia._s.delete(hotId);\n }\n if ((process.env.NODE_ENV !== 'production') && IS_CLIENT) {\n const currentInstance = getCurrentInstance();\n // save stores in instances to access them devtools\n if (currentInstance &&\n currentInstance.proxy &&\n // avoid adding stores that are just built for hot module replacement\n !hot) {\n const vm = currentInstance.proxy;\n const cache = '_pStores' in vm ? vm._pStores : (vm._pStores = {});\n cache[id] = store;\n }\n }\n // StoreGeneric cannot be casted towards Store\n return store;\n }\n useStore.$id = id;\n return useStore;\n}\n\nlet mapStoreSuffix = 'Store';\n/**\n * Changes the suffix added by `mapStores()`. Can be set to an empty string.\n * Defaults to `\"Store\"`. Make sure to extend the MapStoresCustomization\n * interface if you are using TypeScript.\n *\n * @param suffix - new suffix\n */\nfunction setMapStoreSuffix(suffix // could be 'Store' but that would be annoying for JS\n) {\n mapStoreSuffix = suffix;\n}\n/**\n * Allows using stores without the composition API (`setup()`) by generating an\n * object to be spread in the `computed` field of a component. It accepts a list\n * of store definitions.\n *\n * @example\n * ```js\n * export default {\n * computed: {\n * // other computed properties\n * ...mapStores(useUserStore, useCartStore)\n * },\n *\n * created() {\n * this.userStore // store with id \"user\"\n * this.cartStore // store with id \"cart\"\n * }\n * }\n * ```\n *\n * @param stores - list of stores to map to an object\n */\nfunction mapStores(...stores) {\n if ((process.env.NODE_ENV !== 'production') && Array.isArray(stores[0])) {\n console.warn(`[🍍]: Directly pass all stores to \"mapStores()\" without putting them in an array:\\n` +\n `Replace\\n` +\n `\\tmapStores([useAuthStore, useCartStore])\\n` +\n `with\\n` +\n `\\tmapStores(useAuthStore, useCartStore)\\n` +\n `This will fail in production if not fixed.`);\n stores = stores[0];\n }\n return stores.reduce((reduced, useStore) => {\n // @ts-expect-error: $id is added by defineStore\n reduced[useStore.$id + mapStoreSuffix] = function () {\n return useStore(this.$pinia);\n };\n return reduced;\n }, {});\n}\n/**\n * Allows using state and getters from one store without using the composition\n * API (`setup()`) by generating an object to be spread in the `computed` field\n * of a component.\n *\n * @param useStore - store to map from\n * @param keysOrMapper - array or object\n */\nfunction mapState(useStore, keysOrMapper) {\n return Array.isArray(keysOrMapper)\n ? keysOrMapper.reduce((reduced, key) => {\n reduced[key] = function () {\n // @ts-expect-error: FIXME: should work?\n return useStore(this.$pinia)[key];\n };\n return reduced;\n }, {})\n : Object.keys(keysOrMapper).reduce((reduced, key) => {\n // @ts-expect-error\n reduced[key] = function () {\n const store = useStore(this.$pinia);\n const storeKey = keysOrMapper[key];\n // for some reason TS is unable to infer the type of storeKey to be a\n // function\n return typeof storeKey === 'function'\n ? storeKey.call(this, store)\n : // @ts-expect-error: FIXME: should work?\n store[storeKey];\n };\n return reduced;\n }, {});\n}\n/**\n * Alias for `mapState()`. You should use `mapState()` instead.\n * @deprecated use `mapState()` instead.\n */\nconst mapGetters = mapState;\n/**\n * Allows directly using actions from your store without using the composition\n * API (`setup()`) by generating an object to be spread in the `methods` field\n * of a component.\n *\n * @param useStore - store to map from\n * @param keysOrMapper - array or object\n */\nfunction mapActions(useStore, keysOrMapper) {\n return Array.isArray(keysOrMapper)\n ? keysOrMapper.reduce((reduced, key) => {\n // @ts-expect-error\n reduced[key] = function (...args) {\n // @ts-expect-error: FIXME: should work?\n return useStore(this.$pinia)[key](...args);\n };\n return reduced;\n }, {})\n : Object.keys(keysOrMapper).reduce((reduced, key) => {\n // @ts-expect-error\n reduced[key] = function (...args) {\n // @ts-expect-error: FIXME: should work?\n return useStore(this.$pinia)[keysOrMapper[key]](...args);\n };\n return reduced;\n }, {});\n}\n/**\n * Allows using state and getters from one store without using the composition\n * API (`setup()`) by generating an object to be spread in the `computed` field\n * of a component.\n *\n * @param useStore - store to map from\n * @param keysOrMapper - array or object\n */\nfunction mapWritableState(useStore, keysOrMapper) {\n return Array.isArray(keysOrMapper)\n ? keysOrMapper.reduce((reduced, key) => {\n reduced[key] = {\n get() {\n return useStore(this.$pinia)[key];\n },\n set(value) {\n return (useStore(this.$pinia)[key] = value);\n },\n };\n return reduced;\n }, {})\n : Object.keys(keysOrMapper).reduce((reduced, key) => {\n reduced[key] = {\n get() {\n return useStore(this.$pinia)[keysOrMapper[key]];\n },\n set(value) {\n return (useStore(this.$pinia)[keysOrMapper[key]] = value);\n },\n };\n return reduced;\n }, {});\n}\n\n/**\n * Creates an object of references with all the state, getters, and plugin-added\n * state properties of the store. Similar to `toRefs()` but specifically\n * designed for Pinia stores so methods and non reactive properties are\n * completely ignored.\n *\n * @param store - store to extract the refs from\n */\nfunction storeToRefs(store) {\n const rawStore = toRaw(store);\n const refs = {};\n for (const key in rawStore) {\n const value = rawStore[key];\n // There is no native method to check for a computed\n // https://github.com/vuejs/core/pull/4165\n if (value.effect) {\n // @ts-expect-error: too hard to type correctly\n refs[key] =\n // ...\n computed({\n get: () => store[key],\n set(value) {\n store[key] = value;\n },\n });\n }\n else if (isRef(value) || isReactive(value)) {\n // @ts-expect-error: the key is state or getter\n refs[key] =\n // ---\n toRef(store, key);\n }\n }\n return refs;\n}\n\nexport { MutationType, acceptHMRUpdate, createPinia, defineStore, disposePinia, getActivePinia, mapActions, mapGetters, mapState, mapStores, mapWritableState, setActivePinia, setMapStoreSuffix, shouldHydrate, skipHydrate, storeToRefs };\n","import axios from \"axios\";\nimport {SongBuilderPayloadType} from \"@songfinch/types\";\n\nexport async function createSongBuilder(payload: SongBuilderPayloadType): SongBuilderResponseType {\n const res = await axios.post(\"songbuilders\", payload);\n return res.data;\n}\n\nexport async function fetchSongBuilder(slug: string): SongBuilderResponseType {\n const res = await axios.get(\"songbuilders/\" + slug);\n return res.data;\n}\n\nexport async function fetchSongBuilderByEmail(email: string): SongBuilderResponseType {\n const res = await axios.get(\"songbuilders/by_email/\", {params: {email}});\n return res.data;\n}\n\nexport async function fetchSongBuilderByExternalId(external_user_id: string): SongBuilderResponseType {\n const res = await axios.get(\"songbuilders/by_external_user_id\", {params: {external_user_id}});\n return res.data;\n}\n\nexport async function updateSongBuilder(slug, payload: SongBuilderPayloadType): SongBuilderResponseType {\n const res = await axios.patch(\"songbuilders/\" + slug, payload);\n return res.data;\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {\n computed,\n reactive,\n readonly,\n type DeepReadonly,\n type Reactive,\n type ComputedRef\n} from \"vue\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\n\n//##################################\nexport interface ProgressNavItem {\n id: ComputedRef | string;\n allIds?: string[];\n stepIndex: number;\n isCompleted: ComputedRef | boolean;\n isOptional?: ComputedRef | boolean;\n isSkipped?: ComputedRef | boolean;\n}\n\nexport type ComputedProgressStats = ComputedRef<{\n total: number,\n valid: boolean\n}>\n\nexport interface SongBuilderProgress {\n sections: DeepReadonly>;\n progressStats: DeepReadonly;\n}\n\n//##################################\nconst storeSongBuilder = computed(() => useSongBuilderStore());\n\nconst sections = reactive([\n {\n id: \"BsOccasionRecipient\",\n isCompleted: computed(() => !!(storeSongBuilder.value.recipient && storeSongBuilder.value.relationship)),\n stepIndex: 1,\n },\n {\n id: \"BsSongArtist\",\n isCompleted: computed(() => storeSongBuilder.value.preferred_artist_switch !== undefined),\n stepIndex: 2,\n },\n {\n id: \"BsSongCharacteristics\",\n isSkipped: computed(() => storeSongBuilder.value.preferred_artist_switch === undefined),\n isCompleted: computed(() => !!(storeSongBuilder.value.genre && storeSongBuilder.value.gender && storeSongBuilder.value.moods?.length && storeSongBuilder.value.tempo)),\n stepIndex: 2,\n },\n {\n id: computed(() => {\n if (storeSongBuilder.value.selected_recommended_artist || storeSongBuilder.value.selected_artists?.length){\n return \"BsArtistConfirmation\";\n }\n return storeSongBuilder.value.preferred_artist_switch ? \"BsSongArtistSelection\" : \"BsSongArtistsList\";\n }),\n allIds: [\"BsArtistConfirmation\", \"BsSongArtistSelection\", \"BsSongArtistsList\"],\n isCompleted: computed(() => !!(\n storeSongBuilder.value.selected_recommended_artist ||\n storeSongBuilder.value.selected_artists?.length\n )),\n isSkipped: computed(() => {\n if (storeSongBuilder.value.preferred_artist_switch === undefined) {\n return true;\n }\n return !storeSongBuilder.value.preferred_artist_switch && !(storeSongBuilder.value.genre && storeSongBuilder.value.gender);\n }),\n stepIndex: 2,\n },\n {\n id: \"BsStoryDetailsCombined\",\n isCompleted: computed(() => storeSongBuilder.value.questions?.length === 2 && storeSongBuilder.value.questions.every((q: any) => q && q.answer && q.question)),\n stepIndex: 3,\n }\n]);\n\n\n//Progress Stats\nconst progressStats: ComputedProgressStats = computed(() => {\n let valid = true;\n const steps = new Set();\n sections.forEach(item => {\n steps.add(item.stepIndex);\n if (!item.isCompleted && !item.isOptional && !item.isSkipped) valid = false;\n });\n return {total: steps.size, valid};\n});\n\nexport const useSongBuilderProgress = (): SongBuilderProgress => {\n return {\n sections: readonly(sections),\n progressStats: readonly(progressStats)\n };\n};\n","// const Home = () => import(\"@songfinch/customer/views/pages/Home.vue\");\nconst Home2024 = () => import(\"@songfinch/customer/views/home/Home2024.vue\");\nconst ArtistCommunity = () => import(\"@songfinch/customer/views/pages/ArtistCommunity.vue\");\nconst SongRevisions = () => import(\"@songfinch/customer/views/pages/SongRevisions.vue\");\nconst PrivacyPolicy = () => import(\"@songfinch/customer/views/pages/PrivacyPolicy.vue\");\nconst Terms = () => import(\"@songfinch/customer/views/templates/Terms.vue\");\nconst EventReminder = () => import(\"@songfinch/customer/views/pages/EventReminder.vue\");\nconst Careers = () => import(\"@songfinch/customer/views/pages/Careers.vue\");\nconst ContactUs = () => import(\"@songfinch/customer/views/pages/ContactUs.vue\");\n// const WorryFree = () => import(\"@songfinch/customer/views/pages/WorryFree.vue\");\nconst HowItWorks = () => import(\"@songfinch/customer/views/pages/HowItWorks.vue\");\n\nexport default [\n {\n path: \"/\",\n name: \"Home\",\n component: Home2024,\n meta: {\n CMSData: \"homepage2024\",\n removeClearfix: true,\n baseTheme: \"dark\",\n },\n },\n {\n path: \"/artist-community\",\n name: \"ArtistCommunity\",\n component: ArtistCommunity,\n },\n {\n path: \"/song-revisions\",\n name: \"SongRevisions\",\n component: SongRevisions,\n },\n {\n path: \"/privacy\",\n name: \"PrivacyPolicy\",\n component: PrivacyPolicy,\n },\n {\n path: \"/terms\",\n name: \"Terms\",\n component: Terms,\n },\n {\n path: \"/event-reminder\",\n name: \"EventReminder\",\n component: EventReminder,\n },\n {\n path: \"/careers\",\n name: \"Careers\",\n component: Careers,\n },\n {\n path: \"/contact-us\",\n name: \"ContactUs\",\n component: ContactUs,\n },\n {\n path: \"/how-it-works\",\n name: \"HowItWorks\",\n component: HowItWorks,\n },\n];\n","//Meta for all and beforeEnter only for chidless routes\nconst setMetaToAllChildren = (route, meta, beforeEnter = null, index = 0) => {\n if (!index) window.sfLastChild = null;\n route.children.forEach((child, i) => {\n child.meta = {...meta, ...child.meta, index: index++};\n if (child.children?.length) {\n index = setMetaToAllChildren(child, meta, beforeEnter, index);\n } else {\n if (beforeEnter) {\n if (!Array.isArray(child.beforeEnter)) {\n child.beforeEnter = child.beforeEnter ? [child.beforeEnter] : [];\n }\n if (Array.isArray(beforeEnter)) {\n child.beforeEnter = child.beforeEnter.concat(beforeEnter);\n } else {\n child.beforeEnter.push(beforeEnter);\n }\n }\n child.meta.total_children = route.children.length;\n child.meta.child_index = i;\n if (window.sfLastChild) {\n child.meta.prevPage ??= window.sfLastChild.name;\n window.sfLastChild.meta.nextPage ??= child.name;\n }\n window.sfLastChild = child;\n }\n });\n if (!index) delete window.sfLastChild;\n return index;\n};\n\nfunction skipRouteToNext(to, from, skip) {\n if (skip) {\n const isPrevPage = (from.meta.index === undefined && to.index) || from.meta.index > to.meta.index;\n const nextPage = {name: isPrevPage ? to.meta.prevPage : to.meta.nextPage, params: to.params, query: to.query};\n return nextPage;\n }\n}\n\nexport {setMetaToAllChildren, skipRouteToNext};\n","import axios from \"axios\";\nimport {sortBy, map} from \"lodash-es\";\nimport modal from \"@songfinch/shared/plugins/modal/index\";\n\nexport default {\n namespaced: true,\n state: {\n geoData: null,\n isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),\n isIOS: (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream),\n isMobileResolution: false,\n cloudanoryWidgetSettings: {\n sources: [\n \"local\",\n \"url\",\n \"camera\"\n ],\n styles: {\n palette: {\n window: \"#FFFFFF\",\n windowBorder: \"#54524C\",\n tabIcon: \"#83817B\",\n menuIcons: \"#83817B\",\n textDark: \"#83817B\",\n textLight: \"#FFFFFF\",\n link: \"#F64D1C\",\n action: \"#F64D1C\",\n inactiveTabIcon: \"#A7A5A3\",\n error: \"#F64D1C\",\n inProgress: \"#F64D1C\",\n complete: \"#F64D1C\",\n sourceBg: \"#F3F1EB\",\n },\n fonts: {\n default: null,\n \"National-Book, sans-serif\": {\n url: \"https://content.songfinch.com/res/songfinch/raw/upload/fonts/National-Book.otf/1630661869\",\n active: true,\n },\n }\n }\n }\n },\n getters: {\n countriesOptions(state) {\n const temp = map(state.geoData?.countries, (v, k) => ({id: k, text: v}));\n return sortBy(temp, o => o.id === \"US\" ? \"A\" : o.text);\n },\n statesOptions: state => map(state.geoData?.states, (v, k) => ({id: k, text: v})),\n },\n mutations: {\n setResolutionsFlags(state) {\n state.isMobileResolution = window.innerWidth < 768;\n },\n clearLocalStorage() {\n localStorage.removeItem(\"sf_song_data\");\n localStorage.removeItem(\"sf_cart\");\n localStorage.removeItem(\"sf_fe_data_version\");\n localStorage.removeItem(\"sf_addresses\");\n },\n showModal(state, payload) {\n modal.sfModal(payload);\n },\n showSlideModal(state, payload) { //slide center-end for desktop and bottom for tablet and mobile\n payload.swalSettings = {\n ...payload.swalSettings,\n width: payload.swalSettings?.width ?? 775\n };\n payload.slide = \"center-end\";\n payload.responsive = {\n 1199: {\n swalSettings: {width: \"100%\"},\n slide: \"bottom\"\n },\n };\n this.commit(\"shared/showModal\", payload);\n },\n warningMsg(state, msg) {\n let settings = {\n icon: \"warning\",\n };\n if (typeof msg === \"object\") {\n settings = {...settings, ...msg};\n } else {\n settings.html = msg ? `${msg}
` : \"Error!\";\n }\n modal.swal(settings);\n },\n setHasInteractedWithSongfinch() {\n localStorage.setItem(\"hasInteractedWithSongfinch\", \"true\");\n },\n },\n actions: {\n async confirmationModal(state, payload) {\n let settings = {\n width: 375,\n showCloseButton: false,\n showCancelButton: true,\n customClass: {\n container: \"small confirmation\",\n confirmButton: \"mkButton short noLoading\",\n cancelButton: \"mkButton short beige noLoading\",\n actions: \"@mb-8 @mt-0 @px-2 @flex @w-full @gap-4 @max-w-300 @flex-row-reverse\"\n },\n confirmButtonText: \"Yes, I'm sure!\",\n cancelButtonText: \"cancel\",\n };\n if (typeof payload === \"object\") {\n settings = {...settings, ...payload};\n } else {\n settings.html = \"\" + payload + \"
\";\n }\n const res = await modal.swal(settings);\n return res.isConfirmed;\n },\n async loadGeoData({state}) {\n const res = await axios.get(\"/settings/geo_data\");\n delete (res.data.countries.COUNTRY_ISO_CODE);\n state.geoData = res.data;\n },\n\n }\n};\n","import axios from \"axios\";\nimport {logError} from \"@songfinch/utils/src/error\";\n\nconst CancelToken = axios.CancelToken;\nlet source;\n\nexport default {\n namespaced: true,\n state: {\n allCMSValues: null,\n pageData: null,\n navigation: null,\n footer: null,\n pagePrevGroup: null,\n },\n mutations: {\n initNavs(state) {\n const navs = window.appSettings.navs ?? [];\n Object.keys(navs).map(k => {\n const arrKeys = k.split(\".\");\n if ([\"footer\", \"navigation\"].includes(arrKeys[0])) {\n state[arrKeys[0]] ??= {};\n state[arrKeys[0]][arrKeys[1]] = navs[k];\n }\n });\n },\n setCMSData (state, {data, group}) {\n data = Object.keys(data).reduce((val, k) => {\n const arrKeys = k.split(\".\");\n if (group === arrKeys[0]) {\n state.pageData ??= {};\n state.pageData[arrKeys[1]] = data[k];\n switch (arrKeys[1]) {\n case \"seo_title\":\n document.title = data[k];\n break;\n }\n } else {\n val[arrKeys[0]] = {};\n val[arrKeys[0]][arrKeys[1]] = data[k];\n }\n return val;\n }, {});\n state.allCMSValues = data;\n }\n },\n actions: {\n async loadData({state, commit}, payload) {\n const currentPath = location.pathname;\n const group = payload?.group ? payload.group : currentPath;\n if (source) {\n source.cancel();\n }\n source = CancelToken.source();\n\n //Don't reset data for the same pages so we don't have blink on children or custom pages\n\n if (state.pagePrevGroup && state.pagePrevGroup !== group) {\n state.pageData = null;\n }\n state.pagePrevGroup = group;\n\n let data;\n try {\n data = await this.dispatch(\"core_cms/loadCMSData\", {\n queryParams: {group, current_path: currentPath},\n axiosParams: {\n cancelToken: source.token,\n cmsCall: true,\n ...payload?.axiosParams\n }\n });\n } catch (e) {\n if (!axios.isCancel(error)) {\n logError(e.message || \"failed to load CMS Data\");\n }\n return;\n }\n commit(\"setCMSData\", {data, group});\n return state.pageData;\n },\n async getFields({dispatch}, payload) {\n try {\n return await dispatch(\"core_cms/loadCMSData\", {\n queryParams: payload.queryParams,\n onlySlug: true,\n axiosParams: {\n cache: {\n ignoreCache: false\n },\n ...payload?.axiosParams\n }\n }, {root: true});\n } catch (error) {\n logError(error);\n }\n },\n async getField({dispatch}, query) {\n try {\n const fields = await dispatch(\"getFields\", {queryParams: query});\n return fields?.[query?.slug];\n } catch (error) {\n logError(error);\n }\n }\n }\n};\n","import store from \"@songfinch/customer/store\";\nimport router from \"@songfinch/customer/router\";\nimport type {BundledProduct, Product} from \"@songfinch/customer/types/product\";\nimport axios from \"axios\";\nimport modal from \"@songfinch/shared/plugins/modal\";\n\nexport function setProductForAdditionalInfo(mainProduct: Product, dontShowDetailModal = false) {\n // eslint no-async-promise-executor: off\n return new Promise(async (resolve) => {\n if (!mainProduct) return resolve(false);\n\n let component;\n let swalSettings;\n let submitted = false;\n\n const productsWithBunles: Array = [mainProduct];\n\n mainProduct.bundled_products?.forEach(bp => productsWithBunles.push(bp));\n\n for (const product: Product | BundledProduct of productsWithBunles) {\n const submittedProduct = await new Promise(resolve2 => {\n if (product.name === \"small-business-rights-upgrade\") {\n component = () => import(\"@songfinch/customer/components/store/SongRightsPopup.vue\");\n } else if (product.name === \"extra-verse\" && mainProduct.parent_story_id) {\n component = () => import(\"@songfinch/customer/components/store/ExtraVersePopup.vue\");\n } else if (product.name === \"customer-greeting\") {\n component = () => import(\"@songfinch/customer/components/store/CustomerGreetingPopup.vue\");\n swalSettings = {width: 573};\n } else if (product.extra_info?.has_image_uploader) {\n component = () => import(\"@songfinch/customer/components/store/ImageUploaderPopup2.vue\");\n swalSettings = {width: 1250};\n } else {\n return resolve2(product);\n }\n\n store.commit(\"shared/showSlideModal\", {\n component,\n props: {\n product\n },\n events: {\n submit: submittedModalProduct => {\n submitted = true;\n resolve2(submittedModalProduct);\n modal.swal.close();\n }\n },\n swalSettings: {\n afterClose: () => {\n if (product && !dontShowDetailModal && !submitted && router.currentRoute.value.name !== \"ProductSingle\") {\n store.commit(\"store/showProductDetailModal\", mainProduct.name);\n }\n if (!submitted) resolve2(false);\n },\n ...swalSettings\n }\n });\n });\n\n if (!submittedProduct) {\n resolve(false);\n break;\n }\n Object.assign(product, submittedProduct);\n }\n\n resolve(mainProduct);\n });\n}\n\ntype SingleProductPayload = {productSlug:string, getWithParent?: boolean};\n\nexport async function loadSingleProduct({productSlug, getWithParent}: SingleProductPayload) {\n const res = await axios.get(\"store/single_product/\" + productSlug, {params: {get_with_parent: getWithParent}});\n return res.data;\n}\n\nexport async function loadProductOrDefault(payload: SingleProductPayload, defaultSlug: string) {\n try {\n return await loadSingleProduct(payload);\n } catch (e) {\n if (e.response?.data?.error === \"Not Found\") {\n payload.productSlug = defaultSlug;\n return await loadSingleProduct(payload);\n } else {\n throw e;\n }\n }\n}\n\nexport function isInstantProduct(product: Product) {\n return product.extra_info?.instant_product || product.bundled_products?.find(bp => bp.extra_info?.instant_product);\n}\n\nexport function isOriginalSongProduct(product: Product) {\n return product.name === \"personalized-song\" || product.bundled_products?.find(bp => bp?.name === \"personalized-song\");\n}\n\n// TODO: Temp const, need to replace and make all dynamics\nexport const excludedInstantAddons = [\n \"free-song-streaming\",\n \"extra-verse\",\n \"song-streaming\",\n \"bundle-slideshow-video-card\",\n \"artist-gratuity\" // Temp\n];\n","import {captureException} from \"@sentry/vue\";\n\ntype ErrorHandler = (e: unknown) => void | null\n\ntype Params = {\n errorHandler?: ErrorHandler ;\n};\n\nlet defaultParams: Params = {\n errorHandler: (e) => {\n if (typeof e !== \"object\" || e === null) {\n e = new Error(e);\n }\n captureException(e);\n }\n};\n\nexport function setDefaultParams(params: Params) {\n defaultParams = params;\n}\n\nexport default async function catchError(\n callback: Promise | T,\n params?: Params\n): Promise<[T, undefined] | [undefined, E]> {\n try {\n let res;\n if (callback instanceof Promise) {\n res = await callback;\n } else if (typeof callback === \"function\") {\n res = await callback();\n }\n return [res, undefined];\n } catch (error) {\n return handleError(error, params);\n }\n}\n\nfunction handleError(error: unknown, params: Params) {\n params = {\n ...defaultParams,\n ...params\n };\n params.errorHandler(error);\n\n return [undefined, error];\n}\n","import {useStorage} from \"@vueuse/core\";\nimport router from \"@songfinch/customer/router\";\nimport {pick} from \"lodash-es\";\n\ntype LastReferralPageRoute = {\n name: string,\n query?: {[key: string]: string},\n params?: {[key: string]: string},\n}\n\ntype LastReferralPageOrigin = {\n sfRedirectTo: string,\n}\n\nconst lastReferralPage: LastReferralPageRoute | LastReferralPageOrigin = useStorage(\"sf_last_referral_page\", {});\n\nexport function setLastReferralPage(to, from) {\n if (from.matched[0] && from.matched[0]?.name !== to.matched[0].name) {\n lastReferralPage.value = pick(from, [\"name\", \"params\", \"query\"]);\n } else if (to.query.sfRedirectTo) {\n lastReferralPage.value = {sfRedirectTo: to.query.sfRedirectTo};\n }\n}\n\nexport function goToReferalPage () {\n if (lastReferralPage.value?.sfRedirectTo) {\n location.href = lastReferralPage.value.sfRedirectTo;\n } else {\n let page: LastReferralPageRoute;\n try {\n if (lastReferralPage.value?.name) {\n router.resolve(lastReferralPage.value);\n page = lastReferralPage.value;\n }\n } catch (e) {\n page = undefined;\n }\n if (!page) {\n const defaultRoutePage = router.currentRoute.value.matched[0].meta.defaultReferralPage;\n page = defaultRoutePage ? {name: defaultRoutePage} : {name: \"Home\"};\n }\n router.push(page);\n }\n}\n","import router from \"@songfinch/customer/router\";\nimport store from \"@songfinch/customer/store\";\nimport {goToReferalPage} from \"@songfinch/customer/composables/useReferralPage\";\n\nexport function getCmsData(name?: string): T {\n const key = name || router.currentRoute.value.name as string;\n return store.state.cms.pageData?.[key] || {};\n}\n\nexport function goToNextPage() {\n return router.push({name: router.currentRoute.value.meta.nextPage as string});\n}\n\nexport function goToPrevPage() {\n if (router.currentRoute.value.meta.prevPage) {\n let prevName = router.currentRoute.value.meta.prevPage as string;\n if (prevName === \"IpLoadingPreview\") {\n prevName = router.resolve({name: prevName}).meta.prevPage as string;\n }\n return router.push({name: prevName});\n }\n return goToReferalPage();\n}\n","import {computed} from \"vue\";\nimport {StorageSerializers, useStorage} from \"@vueuse/core\";\nimport {find} from \"lodash-es\";\n\ninterface NameElement {\n name_key: string;\n spelling: string;\n audio_path: string;\n active?: boolean;\n customSpelling?: string;\n}\n\nconst selectedName = useStorage(\"sf_selected_name\", null, undefined, {serializer: StorageSerializers.object});\n\nexport function setCurentName(val: NameElement[]) {\n selectedName.value = val;\n}\n\nexport function resetNamesData() {\n selectedName.value = null;\n}\n\n\n//##########################################\nexport default function useInstantNames() {\n return {\n selectedName: computed(() => selectedName.value),\n selectedNameKey: computed(() => find(selectedName.value, {active: true})?.name_key),\n };\n}\n","import axios, {type AxiosError} from \"axios\";\nimport {computed, readonly, ref} from \"vue\";\nimport {useSessionStorage, StorageSerializers} from \"@vueuse/core\";\nimport store from \"@songfinch/customer/store\";\nimport router from \"@songfinch/customer/router\";\nimport get_error from \"@songfinch/shared/helpers/get_error\";\nimport {nth, pick} from \"lodash-es\";\nimport {loadProductOrDefault} from \"@songfinch/customer/composables/useProduct\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nimport catchError from \"@songfinch/utils/src/catchError\";\n\nimport {getCmsData} from \"@songfinch/customer/helpers/instantStepsHelpers\";\n\nimport useInstantNames, {resetNamesData} from \"@songfinch/customer/composables/useInstantNames\";\n\nimport type {\n IpCollectionCmsData,\n IpCollectionCmsDataCategory,\n IpCollectionCmsDataSubCategory\n} from \"@songfinch/customer/types/instant/IpCmsData\";\n\nimport {\n InstantProductAnswersObject,\n InstantSubmissionData,\n ProductInstantData,\n PreviewTaskID,\n PreviewListItem,\n CustomAxiosRequestConfig, PreviewSubmitResponse\n} from \"@songfinch/customer/types/instant/InstantBuilder\";\n\nimport type {InstantProductCollectionData} from \"@songfinch/customer/types/instant/IpCollectionsData\";\n\n//\n// Composables\n//\nconst {selectedName, selectedNameKey} = useInstantNames();\n\n//\n// CONFIG\n//\nconst DEFAULT_INSTANT_PRODUCT = \"instant-product\";\n\n//\n// STORAGE\n//\nconst selectedInstantProduct = useSessionStorage(\n \"sf_selected_instant_product\",\n DEFAULT_INSTANT_PRODUCT,\n {writeDefaults: false}\n);\n\n// Collection\nconst vitamixCollectionId = useSessionStorage(\n \"sf_instant_vitamix_collection_id\",\n null,\n {serializer: StorageSerializers.number}\n);\n\nconst vitamixCollectionTitle = useSessionStorage(\n \"sf_instant_vitamix_collection_title\",\n null\n);\n\n// Answers\nconst answersStorage = useSessionStorage(\n \"sf_instant_answers\",\n {}\n);\n\n// Previews\nconst currentPreviewIndexStorage = useSessionStorage(\"sf_current_selected_preview\", -1);\nconst previewsListStorage = useSessionStorage(\"sf_instant_previews_list\", []);\nconst previewTaskID = useSessionStorage(\"sf_instant_preview_task_id\", undefined);\nlet songRemaningTemp: number;\nconst songRemaning = useSessionStorage(\"sf_instant_song_remaning\", -1);\n\n\n//\n// Refs\n//\nconst collectionData = ref();\n\n//\n// Methods\n//\n\nexport function setSelectedInstantProduct(slug: string) {\n selectedInstantProduct.value = slug;\n}\n\nexport async function setVitamixCollection(val: string | number) {\n val = parseInt(val as string);\n if (!val || (vitamixCollectionId.value && vitamixCollectionId.value !== val)) {\n resetInstantData();\n }\n vitamixCollectionId.value = val || null;\n await Promise.all([\n setVitamixCollectionData(val),\n loadInstantCollection()\n ]);\n selectedInstantProduct.value = collectionData.value?.product_slug || DEFAULT_INSTANT_PRODUCT;\n}\n\n\n\n//Title used from CMS that why we saving int separately\nconst isIpCollectionCmsDataSubCategory = (value: unknown): value is IpCollectionCmsDataCategory => {\n return !!value && value.hasOwnProperty(\"subcategories\");\n};\n\nasync function setVitamixCollectionData(\n val: number,\n categories: IpCollectionCmsDataCategory[] | IpCollectionCmsDataSubCategory[] | undefined = undefined,\n prefix = \"\"\n) {\n if (!val) {\n vitamixCollectionTitle.value = null;\n return;\n }\n\n if (!categories) {\n let data = getCmsData(\"IpCollections\");\n if (!data.categories) {\n data = await store.dispatch(\"cms/getField\", {group: \"instantBuilder\", slug: \"IpCollections\"});\n }\n categories = data.categories;\n }\n\n categories?.find(async(item) => {\n if (+item.cat_id === val) {\n vitamixCollectionTitle.value = prefix + item.title;\n return true;\n }\n if (\n isIpCollectionCmsDataSubCategory(item) &&\n await setVitamixCollectionData(val, item.subcategories, `${item.title}: `)\n ){\n return true;\n }\n });\n}\n\n\nexport async function loadInstantCollection() {\n const res = await vitamixApiClient.get(`/collections/${vitamixCollectionId.value}`);\n const collectionDataRes = {id: vitamixCollectionId.value, ...res.data} as InstantProductCollectionData;\n collectionData.value = collectionDataRes;\n return collectionDataRes;\n}\n\n//########################\n//Vitamix Api\nexport const vitamixApiClient = axios.create({\n baseURL: window.location.origin + \"/vitamix/api/v2/\",\n headers: {\n \"Accept\": \"application/json\",\n \"X-CSRF-Token\": (document.querySelector('meta[name=\"csrf-token\"]') as HTMLMetaElement)?.content\n }\n});\n\nvitamixApiClient.interceptors.response.use(\n response => response,\n (error: AxiosError) => {\n const config = error.config as CustomAxiosRequestConfig;\n if (!config?.skipToast) $toastMsg(get_error(error));\n if (error?.response?.data?.reset_data) {\n resetInstantData();\n router.push({name: \"IpCollections\"}).then();\n }\n return Promise.reject(error);\n }\n);\n//########################\n\n//########################\n// Answers\nexport function setAnswer(key: number, value: string) {\n if (answersStorage.value[key]) {\n const index = answersStorage.value[key].indexOf(value);\n\n if (index === -1) {\n answersStorage.value[key].push(value);\n } else {\n answersStorage.value[key].splice(index, 1);\n }\n } else {\n answersStorage.value[key] = [value];\n }\n}\n\nconst answersUpdated = ref(false);\n\nexport function setAnswersUpdated(val: boolean) {\n answersUpdated.value = val;\n}\n\n//########################\n// Preview\n\nexport function setCurrentSelectedPreview(val: number) {\n currentPreviewIndexStorage.value = val;\n}\n\nfunction throwAndRedirectToStep(message: string, index: number) {\n throw ({error: message, redirectObj: {name: \"IpBuilderStep\", params: {step: +index + 1}}});\n}\n\nasync function getAllAnswers(data: InstantProductAnswersObject) {\n const answers = {...data};\n let questions = collectionData.value?.questions;\n\n if (!questions?.length) {\n const collectionDataRes = await loadInstantCollection();\n if (collectionDataRes.questions) {\n throw new Error(\"No questions found\");\n }\n questions = collectionDataRes.questions;\n }\n\n //Remove answer that not in collection\n const allCollectionQuestionsIds: number[] = questions.map(step => step.id);\n Object.keys(answers).forEach(k => {\n if (!allCollectionQuestionsIds.includes(+k)) delete answers[k];\n });\n\n questions.forEach((step, index) => {\n // If answer key without value exist, check if we have GENERAL key in asnwers list and max answer allowed ansers 2 or more\n // Then set unasnwered key with GENERAL\n const hasGeneral = step.max_answer_count > 1 && step.answers.find(answer => answer.answer_key === \"GENERAL\");\n if (answers[step.id].length !== step.max_answer_count) {\n if (!hasGeneral) throwAndRedirectToStep(\"Missing selection\", index);\n answers[step.id].push(\"GENERAL\");\n } else {\n answers[step.id].forEach((answerPicked) => {\n const answerExistInList = step.answers.some((answer) => answer.answer_key === answerPicked);\n\n if (!answerExistInList) {\n setAnswer(step.id, answerPicked); // remove not existing answer\n setAnswersUpdated(true);\n throwAndRedirectToStep(\"Unable to find answer\", index);\n }\n });\n }\n });\n\n return answers;\n}\n\ntype RedirectErrorObjectType = {\n name: string,\n params: {step: number}\n}\n\ntype RedirectErrorType = {\n error: string\n redirectObj: RedirectErrorObjectType\n}\n\nconst isRedirectError = (error: unknown): error is RedirectErrorType => {\n return !!error && !!(error as RedirectErrorType)?.redirectObj;\n};\n\nexport async function submitPreview(previewIndex?: number) {\n previewIndex ??= currentPreviewIndexStorage.value;\n let answersForSubmission;\n try {\n answersForSubmission = await getAllAnswers(answersStorage.value);\n } catch (e) {\n $toastMsg(get_error(e));\n if (isRedirectError(e)) return router.push(e.redirectObj);\n return router.push({name: \"InstantProductBuilder\"});\n }\n const data: InstantSubmissionData = {\n answers: answersForSubmission,\n name_key: selectedNameKey.value,\n spelling: selectedName.value?.[0].customSpelling,\n count: 1,\n };\n\n if (previewIndex === -1) {\n data.exclude_artists = previewsListStorage.value.map(p => p.artist_id);\n } else {\n data.artist_id = previewsListStorage.value[previewIndex].artist_id;\n }\n const [res, error] = await catchError(vitamixApiClient.post(\n `/collections/${vitamixCollectionId.value}/previews`,\n data\n ));\n\n if (error) {\n $toastMsg(get_error(error));\n } else {\n previewTaskID.value = res.data.task_ids[0];\n songRemaningTemp = res.data.songs_remaining;\n }\n\n return router.push({name: \"IpLoadingPreview\"});\n}\n\ntype GetTaskDataParams = {\n taskId?: string,\n skipToast?: boolean\n}\n\nexport async function getTaskData({taskId}: GetTaskDataParams = {}) {\n taskId ||= previewTaskID.value;\n if (!taskId) return;\n const res = await vitamixApiClient.get(\n `/collections/${vitamixCollectionId.value}/previews?task_ids[]=${taskId}`);\n const data = res.data.previews[`${taskId}`];\n\n if (data.status === \"completed\") {\n const answers_data = parseAnswersForKeyVal(answersStorage.value);\n data.data.ip_builder_data = {\n answers: {...answers_data},\n name_key: selectedNameKey.value,\n spelling: selectedName.value?.[0].customSpelling\n };\n data.data.preview_count = 0;\n if (currentPreviewIndexStorage.value === -1) {\n const nextPreview = previewsListStorage.value.length;\n previewsListStorage.value.push(data.data);\n setCurrentSelectedPreview(nextPreview);\n } else {\n previewsListStorage.value[currentPreviewIndexStorage.value] = data.data;\n }\n\n songRemaning.value = songRemaningTemp;\n\n data.progress = 100;\n previewTaskID.value = undefined;\n }\n return data;\n}\n\nexport async function lockSong(previewSong: PreviewListItem) {\n const name = selectedInstantProduct.value;\n const product = await loadProductOrDefault({productSlug: name}, DEFAULT_INSTANT_PRODUCT);\n if (selectedInstantProduct.value !== product.name) selectedInstantProduct.value = product.name;\n\n let answers;\n let task_id;\n try {\n answers = await getAllAnswers(answersStorage.value);\n task_id = await submitFullSong(previewSong, answers);\n } catch (e) {\n store.commit(\"shared/warningMsg\", get_error(e));\n return router.push({name: \"InstantProductBuilder\"});\n }\n\n // Not sure which collection do we need\n product.instant_data = {\n collection_id: vitamixCollectionId.value,\n artist_id: previewSong.artist_id,\n artist_display_name: previewSong.artist,\n task_id: task_id,\n title: previewSong.title,\n lyrics: previewSong.lyrics,\n template_song_id: previewSong.template_song_id,\n answers,\n previews_generated: previewsListStorage.value.map(preview => pick(preview, [\"title\", \"artist\"])),\n selected_name: selectedName.value ? pick(selectedName.value[0], [\"name_key\", \"spelling\"]) : undefined,\n } as ProductInstantData;\n\n const cartIndex = store.state.cart.cart.findProductIndexByName(name);\n if (cartIndex !== -1) store.commit(\"cart/resetCart\");\n\n if (!await store.dispatch(\"cart/addProduct\", {product, skipToast: true, dontShowDetailModal: true})) return false;\n await router.push({name: \"IpConfirm\"});\n}\n\nasync function submitFullSong(previewSong: PreviewListItem, answers: InstantProductAnswersObject) {\n const data: InstantSubmissionData = {\n answers,\n template_song_id: previewSong.template_song_id,\n name_key: selectedNameKey.value,\n spelling: selectedName.value?.[0].customSpelling\n };\n const res = await vitamixApiClient.post(`/collections/${vitamixCollectionId.value}/full_songs`, data);\n return res.data.task_id;\n}\n\nexport function resetInstantData() {\n previewsListStorage.value = [];\n answersStorage.value = {};\n currentPreviewIndexStorage.value = -1;\n lastStepVisited.value = \"\";\n previewTaskID.value = undefined;\n vitamixCollectionId.value = null;\n vitamixCollectionTitle.value = \"\";\n selectedInstantProduct.value = DEFAULT_INSTANT_PRODUCT;\n songRemaning.value = -1;\n resetNamesData();\n}\n\ntype NormalizedAnswer = {[k: string]: string}\ntype NormalizedAnswers = {[k: string]: NormalizedAnswer}\n\nexport function parseAnswersForKeyVal(questionsAnswers: InstantProductAnswersObject) {\n // KeyVal store does not allow array data inside a key. Converting answers per question to {index: value} for each question\n // { questionId: { index0: first_answer, index1: second_answer } }\n const result = Object.entries(questionsAnswers).reduce((questionHash: NormalizedAnswers, [key, answers]) => {\n questionHash[key] = (answers as string[]).reduce((answerHash: NormalizedAnswer, answer: string, index: number) => {\n answerHash[index] = answer;\n return answerHash;\n }, {});\n return questionHash;\n }, {});\n\n return result;\n}\n//##########################################\n// Instant bundler page\n\nconst lastStepVisited = useSessionStorage(\"sf_instant_last_step_v2\", \"\");\nexport function setLastPageVisited(fullPath: string) {\n lastStepVisited.value = fullPath;\n}\n\n//##########################################\nconst exportData = {\n collectionData: readonly(collectionData),\n answers: readonly(answersStorage),\n vitamixCollectionId: readonly(vitamixCollectionId),\n vitamixCollectionTitle: readonly(vitamixCollectionTitle),\n previewsList: readonly(previewsListStorage),\n currentPreviewIndex: readonly(currentPreviewIndexStorage),\n currentPreview: readonly(computed(() => nth(previewsListStorage.value, currentPreviewIndexStorage.value) as PreviewListItem)),\n answersUpdated: readonly(answersUpdated),\n selectedInstantProduct: readonly(selectedInstantProduct),\n lastStepVisited: readonly(lastStepVisited),\n songRemaning: readonly(songRemaning)\n};\n\nexport default function useInstantProductBuilder() {\n return exportData;\n}\n","import axios from \"axios\";\nimport {omit, pick, cloneDeep, isEqual} from \"lodash-es\";\nimport dayjs from \"dayjs\";\nimport utc from \"dayjs/plugin/utc\";\nimport timezone from \"dayjs/plugin/timezone\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport {resetInstantData} from \"../composables/useInstantProductBuilder\";\n\nimport store from \"@songfinch/customer/store\";\nimport router from \"@songfinch/customer/router\";\nimport {computed} from \"vue\";\nimport {setProductForAdditionalInfo, loadSingleProduct, isInstantProduct, isOriginalSongProduct} from \"@songfinch/customer/composables/useProduct\";\nimport uuid from \"@songfinch/utils/src/uuid\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nimport get_error from \"@songfinch/shared/helpers/get_error\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\nimport modal from \"@songfinch/shared/plugins/modal/index\";\nimport {cdnUrl} from \"@songfinch/shared/plugins/cdn/index\";\n\ndayjs.extend(utc);\ndayjs.extend(timezone);\ndayjs.extend(isBetween);\nimport {useSongBuilderStore, songBuilderSlug} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nexport default {\n namespaced: true,\n state: {\n cart: {},\n },\n mutations: {\n setStandardDeliveryDays(state, val) {\n if (!isEqual(state.cart.standardDeliveryDays, val)) {\n state.cart.standardDeliveryDays = val;\n this.commit(\"cart/saveCart\");\n }\n },\n setTaxes(state, val) {\n state.cart.taxes = val;\n this.commit(\"cart/saveCart\");\n },\n setReservedCoupon(state, val) {\n if (val) {\n state.cart.reservedCoupon = {\n code: val.code,\n products: val.only_with,\n products_any: val.only_with_any\n };\n } else {\n state.cart.reservedCoupon = null;\n }\n\n this.commit(\"cart/saveCart\");\n },\n setCoupon(state, val) {\n state.cart.coupon = val;\n this.commit(\"cart/saveCart\");\n },\n setStripeClientSecret(state, val) {\n state.cart.stripe_client_secret = val?.stripe_client_secret;\n state.cart.stripe_intent_id = val?.stripe_intent_id;\n this.commit(\"cart/saveCart\");\n },\n setAddress(state, val) {\n const key = val.shipping ? \"shipping\" : \"billing\";\n if (!isEqual(state.cart.addresses[key], val.address)) {\n state.cart.addresses[key] = val.address;\n this.commit(\"cart/saveCart\");\n }\n },\n resetAddresses(state) {\n state.cart.addresses = {shipping: null, billing: null};\n this.commit(\"cart/saveCart\");\n },\n saveCart(state) {\n state.cart.calcTotals();\n localStorage.setItem(\"sf_cart\", JSON.stringify(\n omit(state.cart, [\"cartProductsArray\"])\n ));\n },\n resetCart(state, saveCart) {\n state.cart.products = [];\n state.cart.standardDeliveryDays = null;\n state.cart.coupon = null;\n state.cart.payment_type = null;\n state.cart.addresses = {shipping: null, billing: null};\n state.cart.taxes = 0;\n state.cart.subtotal = 0;\n state.cart.discount = 0;\n state.cart.credit_applied = 0;\n state.cart.total = 0;\n state.cart.reservedCoupon = null; //Coupon from URL query\n state.cart.affiliate = null;\n state.cart.stripe_client_secret = \"\";\n state.cart.payment_type = \"card\";\n saveCart && this.commit(\"cart/saveCart\");\n },\n initCart(state) {\n const savedCart = localStorage.getItem(\"sf_cart\");\n this.commit(\"cart/resetCart\");\n if (savedCart) {\n state.cart = {...state.cart, ...JSON.parse(savedCart)};\n }\n state.cart.findDiscountableProductByName = findDiscountableProductByName.bind(state.cart);\n state.cart.hasAllProductsForCoupon = hasAllProductsForCoupon.bind(state.cart);\n state.cart.hasAnyProductsForCoupon = hasAnyProductsForCoupon.bind(state.cart);\n state.cart.calcTotals = calcTotals.bind(state.cart);\n state.cart.length = length.bind(state.cart);\n state.cart.hasType = hasType.bind(state.cart);\n state.cart.requireShippingAddress = requireShippingAddress.bind(state.cart);\n state.cart.isInternationalShippingAllowed = isInternationalShippingAllowed.bind(state.cart);\n state.cart.generateData = generateData.bind(state.cart);\n state.cart.frontendValidation = frontendValidation.bind(state.cart);\n state.cart.findProductByName = findProductByName.bind(state.cart);\n state.cart.findProductIndexByName = findProductIndexByName.bind(state.cart);\n state.cart.isDiscountable = isDiscountable.bind(state.cart);\n\n state.cart.rushFeeProduct = computed(() => state.cart.findProductByName(\"personalized-song-rush-fee-v2\"));\n state.cart.deliveryDayInfo = computed(() => {\n const rushFee = state.cart.rushFeeProduct?.rushFeeInfo || state.cart.standardDeliveryDays;\n if (rushFee) return {\n ...rushFee,\n date: dayjs().add(+rushFee.add_days, \"days\").format(\"MM/DD/YYYY\")\n };\n return undefined;\n });\n state.cart.hasOriginalSongRevision = computed(() => state.cart.findProductByName(\"revision-request\"));\n state.cart.hasOriginalSong = computed(() => state.cart.products.find(isOriginalSongProduct));\n state.cart.hasInstantSong = computed(() => state.cart.products.find(isInstantProduct));\n state.cart.cartProductsArray = computed(() => state.cart.products.filter(p => p.name !== \"service-fee\"));\n },\n setPaymentType(state, val) {\n state.cart.payment_type = val;\n this.commit(\"cart/saveCart\");\n },\n updateCart(state, {product, index}) {\n state.cart.products[index] = product;\n this.commit(\"cart/saveCart\");\n },\n setTemporaryCoupon(state, val) {\n state.cart.temporaryCoupon = val;\n this.commit(\"cart/saveCart\");\n }\n },\n actions: {\n async addProduct({state, commit}, {product, skipToast, dontShowDetailModal, ignoreSegmenetEvent, applyTemporaryCoupon, skipAdditionalInfo} = {}) {\n\n if (!product) {\n $toastMsg(\"Error product is missing. Please contact us at support@songfinch.com\");\n return false;\n }\n\n if (!skipAdditionalInfo) {\n product = await setProductForAdditionalInfo(product, dontShowDetailModal);\n if (!product) return;\n }\n product.added_at = dayjs();\n\n product.quantity ||= 1;\n const isOriginalSong = isOriginalSongProduct(product);\n const isInstantSong = isInstantProduct(product);\n const isSong = isOriginalSong || isInstantSong;\n\n product.cart_uuid = uuid();\n\n if (isSong) {\n if (state.cart.hasOriginalSong || state.cart.hasInstantSong) {\n const res = await this.dispatch(\"shared/confirmationModal\", \"You already have a song in your cart. Adding a new one will reset your current cart. Are you sure you want to proceed?\");\n if (!res) return false;\n // Remove instant data if replacing cart with original song\n if (isOriginalSong) {\n resetInstantData();\n } else {\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.resetData();\n }\n commit(\"resetCart\");\n }\n //If it song it goes first\n state.cart.products.unshift(product);\n } else {\n //if it's addon insert right after song else next availabe\n const insertIndex = product.underSong ? 1 : state.cart.products.length;\n state.cart.products.splice(insertIndex, 0, product);\n }\n\n this.commit(\"cart/saveCart\");\n if (!ignoreSegmenetEvent) {\n analyticsEvent(\"_sf_add_to_cart\", {\n product: pick(product, [\"id\", \"name\", \"title\", \"sku\", \"price\", \"quantity\", \"product_type\", \"cta_clicked\"])\n });\n }\n\n this.dispatch(\"cart/checkReservedCoupon\");\n\n if (applyTemporaryCoupon && state.cart.temporaryCoupon) {\n await this.dispatch(\"cart/loadCoupon\", state.cart.temporaryCoupon).catch(() => null);\n }\n\n if (!skipToast) {\n const toast = `${product.title} added to cart go to cart
`;\n $toastMsg(toast);\n }\n\n await this.dispatch(\"cart/checkForAutoPromoAddons\", product);\n return true;\n },\n async checkForAutoPromoAddons(_, product) {\n if (!product.extra_info?.promo_addons?.length) return;\n for (const promoAddon of product.extra_info.promo_addons) {\n if (promoAddon.auto_add_to_cart === \"1\" && isPromoAddonValid(promoAddon)) {\n const loadedProduct = await loadSingleProduct({productSlug: promoAddon.product_name});\n loadedProduct.parent_story_id = product.parent_story_id;\n loadedProduct.owner_id = product.owner_id;\n if (!loadedProduct) continue;\n await this.dispatch(\"cart/addProduct\", {product: loadedProduct, dontShowDetailModal: true, skipToast: true});\n }\n }\n },\n async checkReservedCoupon({dispatch, state}) {\n const cart = state.cart;\n const reservedCoupon = cart.reservedCoupon;\n if (!reservedCoupon || cart.coupon || !cart.products.length) return;\n if (!cart.hasAllProductsForCoupon(reservedCoupon.products)) return;\n if (!cart.hasAnyProductsForCoupon(reservedCoupon.products_any)) return;\n dispatch(\"loadCoupon\", reservedCoupon.code).catch(() => null);\n },\n async loadCoupon({commit, state}, coupon) {\n const products = state.cart.products.map(p => {\n return {name: p.name, price: p.cartPrice};\n });\n const res = await axios.get(\"store/apply_coupon\", {params: {coupon, products}});\n const cpn = res.data.coupon;\n if (!state.cart.hasAllProductsForCoupon(cpn.only_with) || !state.cart.hasAnyProductsForCoupon(cpn.only_with_any) || !state.cart.isDiscountable()) {\n commit(\"setReservedCoupon\", cpn);\n throw new Error(\"Sorry, this coupon is not applicable to the products.\");\n }\n commit(\"setCoupon\", cpn);\n return cpn;\n },\n async validateProducts({state, commit}) {\n if (!state.cart.length()) return;\n const ids = [...new Set(state.cart.products.map(p => p.id))]; //unique\n const res = await axios.get(\"store/products\", {params: {ids}});\n let hasUpdated = false;\n state.cart.products = state.cart.products.filter(p => {\n const dbProduct = res.data.find(sp => sp.id === p.id);\n if (!dbProduct) {\n hasUpdated = true;\n return false;\n }\n\n // All bundled has the same products bundled_products\n if (p.product_type === \"bundle\"\n && (dbProduct.bundled_products.length !== p.bundled_products?.length\n || !p.bundled_products?.every(i => dbProduct.bundled_products.find(dp => dp.name === i.name)))\n ) {\n hasUpdated = true;\n return false;\n }\n\n const valuesToCompare = [\"price\", \"extra_info\"];\n const a = pick(p, valuesToCompare);\n const b = pick(dbProduct, valuesToCompare);\n\n const productsToSkipValidation = [\"artist-gratuity\", \"personalized-song-rush-fee-v2\", \"revision-request\"];\n\n if (!productsToSkipValidation.includes(p.name) && !isEqual(a, b)) {\n hasUpdated = true;\n valuesToCompare.forEach(k => p[k] = dbProduct[k]);\n }\n return true;\n });\n if (hasUpdated) commit(\"saveCart\");\n },\n async validateAndGetPaymentSettings({state, commit}) {\n try {\n commit(\"setTaxes\", 0);\n const data = await state.cart.generateData();\n commit(\"setStripeClientSecret\", null);\n const res = await axios.post(\"checkout/payment_settings\", data);\n commit(\"setTaxes\", res.data.taxes);\n commit(\"setStripeClientSecret\", {\n stripe_intent_id: res.data.stripe_intent_id,\n stripe_client_secret: res.data.stripe_client_secret\n });\n return res.data;\n } catch (e) {\n return checkoutErrorHandler(e, true);\n }\n },\n async validateCoupon({state}) {\n try {\n const data = await state.cart.generateData();\n await axios.post(\"checkout/coupon_validation\", data);\n } catch (e) {\n return checkoutErrorHandler(e, true);\n }\n },\n async submit({state}, {paypal_info} = {}) {\n if (!store.state.auth.user) {\n return router.push({name: \"Login\"});\n }\n\n if (!await state.cart.frontendValidation()) return; //If validation failed redirect to cart\n\n try {\n const data = await state.cart.generateData();\n data.submission_id = localStorage.getItem(\"sf_submission_id\") || null;\n data.paypal_info = paypal_info;\n if (data.submission_id === \"undefined\") data.submission_id = null;\n const res = await axios.post(\"checkout/submit\", data);\n localStorage.setItem(\"sf_submission_id\", res.data.submission_id);\n return res.data;\n } catch (e) {\n return checkoutErrorHandler(e);\n }\n },\n async initAffiliate({state}) {\n await router.isReady();\n if (router.currentRoute.value.query.affiliate) {\n state.cart.affiliate = router.currentRoute.value.query.affiliate;\n this.commit(\"cart/saveCart\");\n }\n },\n removeRushFee({state, dispatch}) {\n const index = state.cart.products.findIndex(p => p.name.startsWith(\"personalized-song-rush-fee-v2\"));\n if (index !== -1) {\n return dispatch(\"removeProduct\", index);\n }\n },\n removeProduct({state, commit}, i) {\n const cart = state.cart;\n const [removed_product] = cart.products.splice(i, 1);\n if (removed_product.name === \"american-greetings-e-card\") {\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.deliveryType = \"standard\";\n } else if (isOriginalSongProduct(removed_product)) {\n commit(\"resetCart\", true);\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.resetData();\n } else if (isInstantProduct(removed_product)) {\n commit(\"resetCart\", true);\n resetInstantData();\n }\n\n analyticsEvent(\"_sf_remove_from_cart\", {\n product: pick(removed_product, [\"id\", \"price\", \"title\", \"quantity\", \"sku\"])\n });\n\n if (cart.coupon && (!cart.hasAllProductsForCoupon(cart.coupon?.only_with) || !cart.hasAnyProductsForCoupon(cart.coupon?.only_with_any) || !state.cart.isDiscountable())) {\n commit(\"setReservedCoupon\", cart.coupon);\n commit(\"setCoupon\", null);\n }\n commit(\"saveCart\");\n }\n }\n};\n\n\nconst findProductByName = function (name) {\n if (name.startsWith(\"personalized-song-rush-fee-v2\")) {\n return this.products.find(p => p.name.startsWith(name));\n } else {\n return this.products.find(p => p.name === name);\n }\n};\n\nconst findProductIndexByName = function (name) {\n return this.products.findIndex(p => p.name === name);\n};\n\nconst findDiscountableProductByName = function (name) {\n return this.products.find(p => p.name === name && !p.exclude_from_discounts);\n};\n\nconst hasAllProductsForCoupon = function (products) {\n if (!products?.length) return true;\n return products.every(this.findDiscountableProductByName);\n};\n\nconst hasAnyProductsForCoupon = function (products) {\n if (!products?.length) return true;\n return products.some(this.findDiscountableProductByName);\n};\n\nconst hasType = function (type) {\n return this.products.some(p => p.product_type === type);\n};\n\nconst requireShippingAddress = function () {\n return this.products.some(p => p.requires_shipping_address);\n};\n\nconst isInternationalShippingAllowed = function () {\n return !this.products.some(p => p.product_type === \"physical\" && !p.extra_info?.international_shipping);\n};\n\nconst isDiscountable = function () {\n return !this.products.every(p => p.extra_info?.exclude_from_discounts);\n};\n\nconst calcTotals = function () {\n const user = store.state.auth.user;\n let discountLeft = this.coupon?.discount_fixed || 0;\n let subtotal = 0;\n let discount = 0;\n let totalWithExclusions = 0;\n\n if (this.coupon?.only_for_products?.length) {\n this.coupon.only_for_products = this.coupon.only_for_products.filter(v => v);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let promoAddonsDiscount = 0;\n let creditApplied = 0;\n let total = 0;\n const productsWithDiscountApplied = [];\n const userCredit = {\n nonTaxable: +user?.credit_amount || 0, // Non taxable should be first, but we have array below\n taxable: (+user?.credit_amount_taxable || 0)\n };\n\n const promoAddons = this.products.reduce((allProductPromos, p) => {\n if (p.extra_info?.promo_addons?.length) {\n p.extra_info.promo_addons.forEach(promoAddon => {\n if (isPromoAddonValid(promoAddon)) {\n allProductPromos.push(promoAddon);\n }\n });\n }\n return allProductPromos;\n }, []);\n\n // Calculate Total exluding products from Coupon to compare with Coupon MinimumCartSize\n this.products?.filter(p => !this.coupon?.excluded_for?.includes(p.name))?.forEach(p => totalWithExclusions += +p.cartPrice);\n const isMinimumCartExceeded = totalWithExclusions >= this?.coupon?.minimum_cart_size;\n\n this.products.forEach(p => {\n let totalProductPrice = +p.price;\n\n if (promoAddons.length) {\n const promoAddonIndex = promoAddons.findIndex(b => b.product_name === p.name);\n if (promoAddonIndex !== -1) {\n let productDiscount = 0;\n const promoAddon = promoAddons[promoAddonIndex];\n if (+promoAddon.discount_percent) {\n productDiscount = Math.ceil(totalProductPrice * +promoAddon.discount_percent / 100);\n } else {\n productDiscount = Math.min(totalProductPrice, +promoAddon.discount_fixed);\n }\n productDiscount = Math.min(productDiscount, totalProductPrice);\n totalProductPrice -= productDiscount;\n promoAddonsDiscount += productDiscount;\n promoAddons.splice(promoAddonIndex, 1);\n }\n }\n\n p.cartPrice = totalProductPrice;\n\n // substract discount(coupon) from product price\n const isServiceFeeDiscountable = p.name === \"service-fee\" && this.coupon?.include_service_fee;\n\n const isCouponApplicableToProduct = !this.coupon?.only_for_products?.length || this.coupon?.only_for_products?.includes(p.name);\n const discountAlreadyAppliedToProduct = isCouponApplicableToProduct && productsWithDiscountApplied?.includes(p.name);\n const isProductDiscountable = !p.extra_info?.exclude_from_discounts && isCouponApplicableToProduct && !discountAlreadyAppliedToProduct;\n const isProductExcludedFromCoupon = this.coupon?.excluded_for ? this.coupon?.excluded_for?.includes(p.name) : false;\n\n if (this.coupon && isMinimumCartExceeded && !isProductExcludedFromCoupon && (isProductDiscountable || isServiceFeeDiscountable)) {\n let productDiscount = 0;\n if (this.coupon?.discount_percent) {\n productDiscount = Math.ceil(totalProductPrice * this.coupon?.discount_percent / 100);\n } else {\n productDiscount = Math.min(totalProductPrice, discountLeft);\n discountLeft -= productDiscount;\n }\n if (productDiscount && this.coupon?.only_for_products?.length && isCouponApplicableToProduct) productsWithDiscountApplied.push(p.name);\n totalProductPrice -= productDiscount;\n discount += productDiscount;\n }\n\n\n // substract credit from price credit if not exclude_from_account_credits and the same owner\n if (!p.extra_info?.exclude_from_account_credits && (!p.owner_id || p.owner_id === user?.id)) {\n [\"nonTaxable\", \"taxable\"].forEach(k => {\n if (!userCredit[k] && !totalProductPrice) return;\n const productCredits = Math.min(totalProductPrice, userCredit[k]);\n userCredit[k] -= productCredits;\n totalProductPrice -= productCredits;\n creditApplied += productCredits;\n });\n }\n\n total += totalProductPrice;\n });\n\n this.cartProductsArray?.forEach(p => subtotal += +p.cartPrice);\n\n // Adding taxes\n total += this.taxes;\n\n // apply taxable credits to tax if any left\n if (this.taxes && userCredit.taxable) {\n const taxCredits = Math.min(total, userCredit.taxable);\n userCredit.taxable -= taxCredits;\n total -= taxCredits;\n creditApplied += taxCredits;\n }\n\n this.credit_applied = creditApplied;\n this.discount = discount;\n this.subtotal = subtotal;\n this.totalWithExclusions = totalWithExclusions;\n this.total = total < 50 ? 0 : total;\n};\n\n\nconst length = function () {\n return this.cartProductsArray.length;\n};\n\nconst generateData = async function () {\n const storeSongBuilder = useSongBuilderStore();\n const songData = cloneDeep(storeSongBuilder.$state);\n songData.slug = songBuilderSlug.value;\n songData.questions = songData.questions?.map(q => pick(q, [\"answer\", \"key\", \"question\"]));\n songData.must_have_questions = songData.must_have_questions?.map(q => {\n q.answer += \"\\r\\n\" + q.description;\n return q;\n });\n songData.gifter_email ||= store.state.auth.user?.email;\n songData.selected_artists = songData.selected_artists?.filter(a => a).map(q => omit(q, [\"genresOptions\"]));\n const rushFeeInfo = this.deliveryDayInfo;\n return {\n sf_song_data: songData,\n sf_cart: {\n addresses: cloneDeep(this.addresses),\n cart_total: this.total,\n rush_fee: pick(rushFeeInfo, [\"add_days\", \"cost\", \"holiday_skip\"]),\n coupon_code: this.coupon?.code,\n affiliate: this.affiliate,\n products: this.products.map(p => {\n const allowedAttributes = [\"id\", \"price\", \"name\", \"parent_story_id\", \"product_type\", \"additional_info\", \"cover_public_id\",\n \"checkout_id\", \"instant_data\", \"bundled_products\", \"customer_greeting_data\", \"customer_greeting_placement\",\n \"pod_inputs\", \"added_at\", \"expire\"];\n if (p.name === \"revision-request\" || p.extra_info.instant_product) {\n allowedAttributes.push(\"extra_info\");\n } else if (p.name.startsWith(\"personalized-song-rush-fee-v2\")) {\n allowedAttributes.push(\"extra_info\");\n p = {...p, extra_info: pick(p.rushFeeInfo, [\"add_days\", \"cost\", \"holiday_skip\"])};\n }\n const productData = pick(p, allowedAttributes);\n productData.price = p.cartPrice;\n return productData;\n }),\n user_agent: navigator?.userAgent,\n user_id: store.state.auth.user?.id,\n payment_type: this.payment_type,\n stripe_intent_id: this.stripe_intent_id,\n },\n };\n};\n\nconst frontendValidation = async function() {\n const storeSongBuilder = useSongBuilderStore();\n if (this.hasOriginalSong && !await storeSongBuilder.validateSongData()) {\n return false;\n }\n\n const productsOriginalLength = this.products.length;\n let callsResult = [];\n\n const calls = this.products.map(p => {\n if (p.cover_public_id) {\n try {\n return axios.head(cdnUrl(p.cover_public_id.metadata.url)); // if it's not null Promise.allSettled return fulfilled\n } catch (e) {\n return null;\n }\n }\n return null;\n });\n callsResult = await Promise.allSettled(calls);\n\n this.products = this.products.filter((p, i) => {\n if (callsResult[i]?.status === \"rejected\") return false; // remove product if async check return rejected\n\n // remove product if expired or it's bundle\n if (p.bundled_products?.find(bp => bp.expire && dayjs().isAfter(bp.expire))) return false;\n return !(p.expire && dayjs().isAfter(p.expire));\n });\n\n if (productsOriginalLength !== this.products.length) {\n store.commit(\"cart/saveCart\");\n checkoutErrorHandler({error: \"Some items have expired and have been removed from the cart.\"}, true);\n return false;\n }\n return true;\n};\n\nfunction isPromoAddonValid(promoAddon) {\n if (!promoAddon.end_datetime && !promoAddon.start_datetime) return true;\n const startDate = promoAddon.start_datetime ? dayjs.tz(promoAddon.start_datetime, \"America/Chicago\") : dayjs.tz(new Date(), \"America/Chicago\").subtract(1, \"day\");\n const endDate = promoAddon.end_datetime ? dayjs.tz(promoAddon.end_datetime, \"America/Chicago\") : dayjs.tz(new Date(), \"America/Chicago\").add(1, \"day\");\n return dayjs.tz(new Date(), \"America/Chicago\").isBetween(startDate, endDate);\n}\n\nexport async function checkoutErrorHandler(error, pushToCart = false) {\n const errorMessage = get_error(error);\n const resData = error?.response?.data || {};\n\n if (resData.reset_stripe_key) {\n store.commit(\"cart/setStripeClientSecret\", null);\n pushToCart = true;\n }\n\n if (resData.reset_addresses) {\n store.commit(\"cart/resetAddresses\");\n pushToCart = true;\n }\n\n if (resData.reset_submittion_id) {\n localStorage.removeItem(\"sf_submission_id\");\n }\n\n if (resData.reset_selected_artists) {\n router.push({name: \"BsSongArtist\", query: {artist_unavailabe: 1}});\n if (!pushToCart) throw new Error(errorMessage);\n return;\n }\n\n if (resData.reset_coupon) {\n store.commit(\"cart/setCoupon\", null);\n store.commit(\"cart/setReservedCoupon\", null);\n }\n\n if (resData.reset_rush_fee) {\n store.dispatch(\"cart/removeRushFee\");\n }\n\n if (pushToCart) {\n const inCart = router.currentRoute.value.name === \"Cart\";\n modal.swal({\n icon: \"warning\",\n html: `${errorMessage}
`,\n }).then(() => inCart && location.reload());\n return router.push({name: \"Cart\"});\n } else {\n throw new Error(errorMessage);\n }\n}\n\n\n\n","import Cookies from \"js-cookie\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\n\nexport function setTemporaryEmail(email: string) {\n Cookies.set(\"sf_temporary_email\", email, {expires: 360});\n if (email) {\n analyticsEvent(\"_sf_identify_user\", {email});\n }\n}\n\nexport function getTemporaryEmail() {\n return Cookies.get(\"sf_temporary_email\");\n}\n","import router from \"@songfinch/customer/router\";\nimport axios from \"axios\";\nimport error_handler from \"@songfinch/shared/helpers/axios_error_handler\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nimport {setTemporaryEmail} from \"@songfinch/customer/helpers/temporaryEmail\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\nimport modal from \"@songfinch/shared/plugins/modal/index\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nexport default {\n namespaced: true,\n state: {\n user: null,\n redirectQuery: {},\n referralCode: null,\n },\n mutations: {\n setUser(state, val) {\n state.user = val || null;\n if (state.user) {\n this.commit(\"auth/calcCreditsTotal\");\n }\n },\n redirectToUserPage(state) {\n if (!state.user) return;\n if (\n router.currentRoute.value.meta.skipAuthRedirect ||\n state.redirectQuery.skipRedirect\n ) {\n return false;\n }\n if (state.redirectQuery?.forward_to) {\n return (window.location.href = state.redirectQuery.forward_to);\n }\n if (state.redirectQuery?.push_to) {\n return router.push({\n name: state.redirectQuery.push_to,\n ...JSON.parse(state.redirectQuery.settings || \"{}\"),\n });\n }\n if (state.redirectQuery?.push_to_path) {\n return router.push(state.redirectQuery?.push_to_path);\n }\n switch (state.user.role) {\n case \"admin\":\n window.location.href = \"/admin\";\n break;\n case \"artist\":\n window.location.href = \"/artist-admin\";\n break;\n default:\n return router.push({name: \"Dashboard\"});\n }\n },\n setRedirectQuery(state, val) {\n state.redirectQuery = val;\n },\n storeAddresses(state, val) {\n const savedData = localStorage.getItem(\"sf_addresses\");\n const data = savedData ? JSON.parse(savedData) : {};\n const type = val.shipping ? \"shipping\" : \"billing\";\n data[`${type}_id`] = val?.address?.id;\n localStorage.setItem(\"sf_addresses\", JSON.stringify(data));\n },\n setReferralCode(state, val) {\n state.referralCode = val;\n if (val) {\n localStorage.setItem(\"sf_customer_referral_code\", val);\n } else {\n localStorage.removeItem(\"sf_customer_referral_code\");\n }\n },\n checkForReferralCode(state) {\n state.referralCode =\n localStorage.getItem(\"sf_customer_referral_code\") || null;\n },\n calcCreditsTotal(state, val) {\n if (!state.user) return;\n if (val) {\n state.user.credit_amount = val.credit_amount;\n state.user.credit_amount_taxable = val.credit_amount_taxable;\n }\n const totalCredits = +state.user.credit_amount + +state.user.credit_amount_taxable;\n\n state.user.total_credits ??= 0;\n if (totalCredits !== state.user?.total_credits) {\n state.user.total_credits = totalCredits;\n this.commit(\"cart/saveCart\");\n }\n },\n },\n actions: {\n async afterLogin({state}, {user, registration = false}) {\n this.commit(\"auth/setUser\", user);\n const storeSongBuilder = useSongBuilderStore();\n await storeSongBuilder.loadUserData(user.email);\n if (storeSongBuilder.isInProgress()) {\n storeSongBuilder.gifter_email = user.email;\n }\n analyticsEvent(\"_sf_user_login\", {\n registration,\n user: user\n });\n this.commit(\"auth/redirectToUserPage\");\n setTemporaryEmail(\"\");\n if (typeof state.redirectQuery?.afterLoginCallback === \"function\") {\n state.redirectQuery.afterLoginCallback();\n } else if (router.currentRoute.value.name !== \"Checkout\") {\n modal.swal({\n html: `Success
`,\n showConfirmButton: false,\n timer: 1500,\n icon: \"success\",\n });\n } else {\n modal.swal.close();\n }\n },\n async register({state, dispatch}, payload) {\n if (payload.email_confirmation !== payload.email) {\n throw new Error(\"Email and confirmation do not match\");\n }\n const res = await axios.post(\"/user\", {\n user: payload,\n referral_code: state.referralCode,\n }, {meta: {updateCSRFToken: true}});\n await dispatch(\"afterLogin\", {user: res.data.user, registration: true});\n return res;\n },\n\n async login({dispatch}, payload) {\n const res = await axios.post(\"/users/sign_in\", {user: payload}, {meta: {updateCSRFToken: true}});\n await dispatch(\"afterLogin\", {user: res.data.user, registration: false});\n return res.data;\n },\n\n async getUserData({commit}) {\n try {\n const params = {user_id: router.currentRoute.value.query?.id};\n const res = await axios.get(\"/user\", {params});\n commit(\"setUser\", res.data.user);\n return res.data.user;\n } catch (e) {\n $toastMsg(error_handler(e).error);\n return router.push({name: \"Home\"});\n }\n },\n\n async logout({commit}, params) {\n analyticsEvent(\"_sf_user_logout\");\n await axios.get(\"/users/sign_out\", {meta: {updateCSRFToken: true}});\n commit(\"setUser\", null);\n setTemporaryEmail(\"\");\n if (!params?.checkout) {\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.resetData();\n this.commit(\"cart/resetCart\", true);\n localStorage.removeItem(\"sf_addresses\");\n if (\n router.currentRoute.value.matched.find(\n (r) => r.meta?.requireAuth\n )\n ) {\n return router.push({name: \"Home\"});\n }\n }\n return true;\n },\n\n async updateAccountInformation({commit}, payload) {\n const res = await axios.put(\"/user\", {user: payload});\n commit(\"setUser\", res.data.user);\n if (!payload.skipToastMsg) $toastMsg(\"Updated!\");\n return res.data;\n },\n\n async updatePassword(store, payload) {\n if (payload.new_password !== payload.new_password_confirm) {\n return {error: \"Passwords Don't Match.\"};\n }\n const res = await axios.put(\"/users/password\", {user: payload});\n $toastMsg(\"Password Updated!\");\n return res.data;\n },\n\n async loadAddresses(store, payload) {\n let savedAddresses = localStorage.getItem(\"sf_addresses\");\n savedAddresses &&= JSON.parse(savedAddresses);\n const res = await axios.get(\"/addresses\", {\n params: {...savedAddresses, ...payload},\n });\n return res.data;\n },\n\n async saveAddress(store, payload) {\n const res = await axios.post(\"/addresses\", payload);\n return res.data;\n },\n\n async validateReferralCode({commit, state}) {\n const code =\n router.currentRoute.value.params.code || state.referralCode;\n if (!code) return;\n try {\n const res = await axios.get(\"/user/referral_user\", {\n params: {referral_code: code},\n });\n commit(\"setReferralCode\", code);\n return res.data;\n } catch (e) {\n const error = error_handler(e).error;\n modal.swal({\n icon: \"warning\",\n html: error,\n });\n commit(\"setReferralCode\", null);\n return router.push({name: \"Home\"});\n }\n },\n\n async loadCreditBalance({commit}, params) {\n try {\n const res = await axios.get(\"/dashboard/credit_balance\", {\n params,\n });\n commit(\"calcCreditsTotal\", res.data);\n return res.data;\n } catch (e) {\n const res = error_handler(e);\n $toastMsg(res.error);\n return error_handler(e);\n }\n },\n\n async addGiftCard({commit}, params) {\n const res = await axios.post(\"/dashboard/apply_gift_card\", params);\n commit(\"calcCreditsTotal\", res.data);\n return res.data;\n },\n }\n};\n","import {omit, pickBy, isEmpty, size} from \"lodash-es\";\nimport router from \"../router\";\n\nexport const apply_query_filters = (filters) => {\n const params = {...router.currentRoute.value.query};\n\n let filtersParams = omit(filters, [\"per_page\", \"show_at_capacity\"]);\n filtersParams = pickBy(filtersParams, p => !isEmpty(p));\n if (size(filtersParams)) {\n params.filters = encodeURIComponent(JSON.stringify(filtersParams));\n } else {\n delete params.filters;\n }\n\n let queryString = \"\";\n if (size(params)) {\n queryString += \"?\" + Object.keys(params).map(key => key + \"=\" + params[key]).join(\"&\");\n }\n\n history.replaceState(history.state, null, router.currentRoute.value.path + queryString);\n};\n\nexport const get_query_filters = () => {\n const queryFilters = router.currentRoute.value.query.filters;\n try {\n return queryFilters ? JSON.parse(queryFilters) : null;\n } catch (e) {\n return null;\n }\n};\n","import axios from \"axios\";\nimport {apply_query_filters, get_query_filters} from \"../helpers/apply_query_filters\";\nimport router from \"../router\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nimport {isAxiosError} from \"@songfinch/utils/src/validators\";\nimport {logError} from \"@songfinch/utils/src/error\";\nimport {useNotification} from \"@songfinch/design-system/src/composables/useNotification\";\n\nconst CancelToken = axios.CancelToken;\nlet source;\n\nexport default {\n namespaced: true,\n state: {\n artistsList: null,\n filters: null,\n page: 1,\n endOfPages: false,\n total: false,\n },\n mutations: {\n nextPage(state) {\n state.page++;\n },\n setEndOfPages(state, val) {\n state.endOfPages = val;\n },\n setArtistsList(state, val) {\n if (val?.artists) {\n const list = val.artists.map( a => ({\n image: a.photo,\n name: a.artist_name,\n available_delivery_days: a.available_delivery_days,\n exclusivity: a.exclusivity,\n audio: a.songs[0]?.audio_url,\n link: router.resolve({name: \"ArtistSingle\", params: {id: a.id}}).href,\n status: a.status,\n genres: a.songs[0]?.genres,\n occasions: a.songs[0]?.occasions,\n song_subtitle: a.songs[0]?.genres.concat(a.songs[0]?.occasions, a.songs[0]?.moods).join(\", \"),\n song_title: a.songs[0]?.title\n }));\n state.artistsList = state.artistsList.concat(list);\n setTimeout(() => { //Prevent to trigger it right away\n state.total = val?.total;\n state.endOfPages = state.artistsList.length === state.total;\n }, 100);\n }\n },\n resetList(state) {\n state.artistsList = [];\n state.page = 1;\n },\n clearLabels(state) {\n state.filters.genres = [];\n state.filters.genders = [];\n state.filters.artist_exclusivity_only = [];\n state.filters.artist_one_day_delivery = [];\n },\n initFilters(state) {\n this.commit(\"artist/resetList\");\n state.filters = {\n genders: [],\n genres: [],\n artist_exclusivity_only: [],\n artist_one_day_delivery: [],\n keyword: \"\",\n show_at_capacity: true,\n per_page: 12,\n ...get_query_filters()\n };\n }\n },\n actions: {\n async loadArtists({commit, state}, payload) {\n this.commit(\"artist/setEndOfPages\", true);\n if (source) {\n source.cancel(\"Operation canceled by the user.\");\n }\n source = CancelToken.source();\n\n apply_query_filters(state.filters);\n let res;\n try {\n res = await axios.get(\"/artists\", {\n params: (payload || {page: state.page, ...state.filters}),\n cancelToken: source.token,\n cache: {ignoreCache: false},\n });\n } catch (e) {\n // Don't do anything with canceled error because it is due to user action \n // And not really a error or bug.\n if (axios.isCancel(e)) return undefined;\n if (!isAxiosError(e)) {\n logError(e);\n }\n return useNotification({type: \"error\", message: \"Something went wrong. Please try again.\"});\n }\n if (!payload) {\n commit(\"setArtistsList\", res.data);\n }\n return res.data;\n },\n startSongWithArtist(store, artist){\n artist.fromSinglePage = true;\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.selectArtist({artist, index: 0});\n storeSongBuilder.selectRecommendedArtist(null);\n const lastPage = storeSongBuilder.lastSongBuildPage;\n let destination;\n if (lastPage) {\n const lastPageRoute = router.resolve(lastPage);\n destination = lastPageRoute.path;\n const artistSelectionPageRoute = router.resolve({name: \"BsSongArtistSelection\"});\n if (lastPageRoute.meta?.index > artistSelectionPageRoute.meta?.index) {\n storeSongBuilder.setLastSongBuildPage({name: artistSelectionPageRoute.name, params: lastPage.params});\n destination = artistSelectionPageRoute.path;\n }\n } else {\n destination = \"/song-builder\";\n }\n return destination;\n }\n }\n};\n","import {ref} from \"vue\";\n\nconst showProductPaperActive = ref(false);\nconst showProductPaperId = ref(undefined);\n\nexport default function useShowProductPaper() {\n const showProductPaper = (id: string) => { \n\n showProductPaperActive.value = true;\n showProductPaperId.value = id;\n };\n\n const removeProductPaper = () => { \n showProductPaperActive.value = false;\n showProductPaperId.value = undefined;\n };\n\n\n return {\n showProductPaperActive,\n showProductPaperId,\n showProductPaper,\n removeProductPaper\n };\n}\n","import axios from \"axios\";\nimport {indexOf, sortBy} from \"lodash-es\";\nimport router from \"../router\";\nimport useShowProductPaper from \"../composables/product/useShowProductPaper\";\n\n\nexport default {\n namespaced: true,\n state: {\n products: null,\n selectedStory: null\n },\n getters: {\n getAvailableProducts(state, val, rootState) {\n return state.products?.filter(p => {\n if (p.extra_info?.one_per_story) {\n return !rootState.cart.cart.findProductByName(p.name);\n }\n return true;\n });\n },\n },\n mutations: {\n selectStory(state, val) {\n state.selectedStory = val;\n },\n setProducts(state, val) {\n state.products = val;\n },\n showProductDetailModal(state, payload) {\n const {showProductPaper} = useShowProductPaper();\n showProductPaper(payload);\n }\n },\n actions: {\n async loadProducts({commit}, {productsNames, sortByName, storyId, productsProps, includes, excludes} = {}) {\n commit(\"setProducts\", null);\n let res;\n try {\n res = await axios.get(\"store/products\", {\n params: {\n name: productsNames,\n story_id: storyId,\n includes,\n excludes\n }\n });\n } catch (e) {\n return router.push({name: \"404\"});\n }\n let result = res.data;\n if (sortByName?.length) {\n result = sortBy(res.data, (p) => {\n const index = indexOf(sortByName, p.name);\n return index === -1 ? sortByName.length : index;\n });\n }\n\n if (productsProps) {\n result = result.map(p => ({...p, ...productsProps}));\n }\n\n commit(\"setProducts\", result);\n return result;\n },\n }\n};\n","import axios from \"axios\";\nimport {apply_query_filters, get_query_filters} from \"../helpers/apply_query_filters\";\n\nconst CancelToken = axios.CancelToken;\nlet source;\n\nexport default {\n namespaced: true,\n state: {\n playlists: null,\n filters: null,\n page: 1,\n endOfPages: false,\n total: 0,\n },\n mutations: {\n nextPage(state) {\n state.page++;\n },\n setEndOfPages(state, val) {\n state.endOfPages = val;\n },\n setPlaylists(state, val) {\n if (val?.playlists) {\n state.playlists = state.playlists.concat(val.playlists);\n setTimeout(() => { //Prevent to trigger it right away\n state.total = val?.total;\n state.endOfPages = state.playlists.length === state.total;\n }, 100);\n }\n },\n resetList(state) {\n state.playlists = [];\n state.page = 1;\n },\n initFilters(state) {\n this.commit(\"playlist/resetList\");\n state.filters = {\n kinds: [],\n keyword: \"\",\n per_page: 9,\n ...get_query_filters()\n };\n }\n },\n actions: {\n async loadPlaylists({commit, state}, payload) {\n this.commit(\"playlist/setEndOfPages\", true);\n if (source) {\n source.cancel();\n }\n source = CancelToken.source();\n\n apply_query_filters(state.filters);\n\n let res;\n try {\n res = await axios.get(\"/playlists\", {\n params: (payload || {page: state.page, ...state.filters}),\n cancelToken: source.token,\n cache: {ignoreCache: false},\n });\n } catch (e) {\n if (!axios.isCancel(e)) throw new Error(e.message || \"failed to load Playlist\");\n return;\n }\n\n if (!payload) {\n commit(\"setPlaylists\", res.data);\n }\n return res.data;\n }\n }\n};\n","import {createStore} from \"vuex\";\n\nimport shared from \"./shared\";\nimport cms from \"./cms\";\nimport core_cms from \"@songfinch/shared/store/cms_core\";\nimport cart from \"./cart\";\nimport auth from \"./auth\";\nimport artist from \"./artist\";\nimport store from \"./store\";\nimport playlist from \"./playlist\";\n\nexport default createStore({\n modules: {\n shared,\n core_cms,\n cms,\n cart,\n auth,\n artist,\n store,\n playlist\n }\n});\n","import {setMetaToAllChildren} from \"../helpers/routes_helper\";\nimport router from \"./index\";\nimport store from \"../store\";\nimport {goToReferalPage, setLastReferralPage} from \"@songfinch/customer/composables/useReferralPage\";\n\nconst SongBuilder = () => import(\"@songfinch/customer/views/build_song/SongBuilder\");\nconst BsOccasionRecipient = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsOccasionRecipient\");\nconst BsGifterEmail2 = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsGifterEmail2\");\nconst BsSongArtist = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsSongArtist\");\nconst BsSongOptions = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsSongOptions\");\nconst BsSongArtistSelection = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsSongArtistSelection\");\nconst BsStoryDetailsCombined = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsStoryDetailsCombined\");\nconst BsArtistsRecommendation = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsArtistsRecommendation\");\nconst BsArtistConfirmation = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsArtistConfirmation\");\nconst BsReview = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsReview\");\nconst BsPreCart = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsPreCart\");\nconst BsChangeArtist = () => import(\"@songfinch/customer/views/build_song/chapters/pre_purchase/BsChangeArtist.vue\");\nimport {useSongBuilderStore, songBuilderSlug} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nasync function songbuilderGuard(to) {\n if (to.query.slug) songBuilderSlug.value = to.query.slug;\n const storeSongBuilder = useSongBuilderStore();\n await storeSongBuilder.init();\n}\n\nasync function skipSongBuilderRoute(to, from, next, skip) {\n if (skip) {\n const storeSongBuilder = useSongBuilderStore();\n const isPrevPage = (from.meta.index === undefined && to.meta.index > 0) || from.meta.index > to.meta.index;\n if (isPrevPage && !to.meta.prevPage) {\n goToReferalPage();\n return next(false);\n }\n const nextPage = {name: isPrevPage ? to.meta.prevPage : to.meta.nextPage, params: to.params, query: to.query};\n storeSongBuilder.setLastSongBuildPage(nextPage);\n await storeSongBuilder.saveData();\n return next(nextPage);\n }\n next();\n}\n\nfunction bsPageRedirectionGuard(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n const isLastBuilderPage = from.matched[0]?.name === \"SongBuilder\";\n const lastPage = storeSongBuilder.lastSongBuildPage;\n if (!isLastBuilderPage && lastPage?.name && lastPage.name !== to.name) {\n try {\n lastPage.query = {...lastPage.query, ...to.query};\n router.resolve(lastPage);\n return next(lastPage);\n } catch (e) {\n storeSongBuilder.setLastSongBuildPage(undefined);\n return next({name: \"SongBuilder\"});\n }\n }\n return next();\n}\n\nfunction checkForOriginalSongBundler(to) {\n if (to.query.original_song_product) {\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.song_product_name = to.query.original_song_product;\n }\n}\n\nfunction checkOriginalInCartGuard() {\n return store.state.cart.cart.hasOriginalSong ? true : {name: \"BsReview\"};\n}\n\nasync function gifterEmailGuard(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n if (store.state.auth.user || storeSongBuilder.gifter_email) {\n if (store.state.auth.user?.email) {\n storeSongBuilder.gifter_email = store.state.auth.user.email;\n }\n return await skipSongBuilderRoute(to, from, next, true);\n }\n return next();\n}\n\nconst songBuilderRoutes = {\n path: \"/song-builder\",\n alias: \"/build-your-song\",\n name: \"SongBuilder\",\n component: SongBuilder,\n redirect: to => ({name: to.matched[0].children[0].name}), // Redirect always to first child\n meta: {\n CMSData: \"songBuilderPrePurchase\",\n animation: \"pageSlide\",\n hideTopBar: true,\n hideNavgiation: true,\n hideFooter: true,\n hideStartButton: true,\n defaultReferralPage: \"Home\"\n },\n beforeEnter: [songbuilderGuard, setLastReferralPage, checkForOriginalSongBundler],\n children: [\n {\n path: \"recipient\",\n name: \"BsOccasionRecipient\",\n component: BsOccasionRecipient,\n beforeEnter: [bsPageRedirectionGuard]\n },\n {\n path: \"gifter-email\",\n name: \"BsGifterEmail2\",\n component: BsGifterEmail2,\n meta: {hideSongbuilderHeader: true},\n beforeEnter: [gifterEmailGuard]\n },\n {\n path: \"artist\",\n name: \"BsSongArtist\",\n component: BsSongArtist,\n async beforeEnter(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n const skip = storeSongBuilder.selected_artists?.find(a => a.fromSinglePage);\n await skipSongBuilderRoute(to, from, next, skip);\n }\n },\n {\n path: \"artist-selection\",\n name: \"BsSongArtistSelection\",\n component: BsSongArtistSelection,\n async beforeEnter(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n await skipSongBuilderRoute(to, from, next, !storeSongBuilder.preferred_artist_switch);\n }\n },\n {\n path: \"song-options\",\n name: \"BsSongCharacteristics\",\n component: BsSongOptions,\n async beforeEnter(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n const userSelectedAnArtistSwitch = storeSongBuilder.preferred_artist_switch === undefined;\n await skipSongBuilderRoute(to, from, next, userSelectedAnArtistSwitch);\n }\n },\n {\n path: \"recommended-artists\",\n name: \"BsSongArtistsList\",\n component: BsArtistsRecommendation,\n async beforeEnter(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.genre || !storeSongBuilder.gender) {\n return await skipSongBuilderRoute(to, from, next, true);\n }\n await skipSongBuilderRoute(to, from, next, storeSongBuilder.preferred_artist_switch);\n }\n },\n {\n path: \"artist-confirmation\",\n name: \"BsArtistConfirmation\",\n component: BsArtistConfirmation,\n async beforeEnter(to, from, next) {\n const storeSongBuilder = useSongBuilderStore();\n if (!(storeSongBuilder.selected_artists?.length || storeSongBuilder.selected_recommended_artist)) {\n return await skipSongBuilderRoute(to, from, next, true);\n }\n return next();\n }\n },\n {\n path: \"details\",\n name: \"BsStoryDetailsCombined\",\n component: BsStoryDetailsCombined\n },\n {\n path: \"review\",\n name: \"BsReview\",\n component: BsReview,\n meta: {hideProgressNav: true},\n beforeEnter: async () => {\n const storeSongBuilder = useSongBuilderStore();\n return await storeSongBuilder.validateSongData({toPage: \"BsReview\"});\n }\n },\n {\n path: \"pre-cart\",\n name: \"BsPreCart\",\n component: BsPreCart,\n meta: {hideProgressNav: true, customPageViewedAnalyticsTrigger: true, nextPage: \"Cart\"},\n beforeEnter: [checkOriginalInCartGuard]\n },\n {\n path: \"change-artist\",\n name: \"BsChangeArtist\",\n component: BsChangeArtist,\n meta: {hideProgressNav: true},\n beforeEnter: [checkOriginalInCartGuard]\n },\n {\n path: \"artist-confirmation-changed\",\n name: \"BsArtistConfirmationChanged\",\n component: BsArtistConfirmation,\n meta: {hideProgressNav: true, nextPage: \"BsPreCart\"},\n beforeEnter: [checkOriginalInCartGuard]\n }\n ]\n};\n\n\nsetMetaToAllChildren(\n songBuilderRoutes,\n {CMSData: \"songBuilderPrePurchase\"}\n);\n\nexport default [songBuilderRoutes];\n","import {useScriptTag} from \"@vueuse/core\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\n\nconst loadedScripts: Record = {};\n\nexport default async function useLoadScript(url: string) {\n if (loadedScripts[url]) return;\n try {\n const {load} = useScriptTag(url, () => {}, {manual: true});\n await load();\n loadedScripts[url] = true;\n } catch (e) {\n $toastMsg(\"Failed to load: \" + url);\n }\n return;\n}\n","import {readonly, ref} from \"vue\";\nimport useLoadScript from \"@songfinch/customer/composables/useLoadScript\";\nimport store from \"@songfinch/customer/store\";\nimport {StripeAddressInfo} from \"@songfinch/data-source/checkout/express/express\";\n\nconst stripe = ref();\n\nexport async function loadStripe() {\n if (stripe.value) return;\n await useLoadScript(\"https://js.stripe.com/v3\");\n if (!window.Stripe) return;\n stripe.value = window.Stripe(window.appSettings.stripe);\n}\n\ntype ProcessStripePaymentParams = {\n stripeElements: unknown,\n shipping?: StripeAddressInfo,\n returnUrl: string,\n stripeClientSecret?: string\n}\n\nexport async function processStripePayment({stripeElements, returnUrl, shipping, stripeClientSecret}: ProcessStripePaymentParams) {\n stripeClientSecret ||= store.state.cart.cart.stripe_client_secret;\n if (!stripeClientSecret) throw Error(\"missing stripe stripe client secret\");\n if (!stripeElements) throw Error(\"missing stripe elements\");\n if (!returnUrl) throw Error(\"missing returnUrl\");\n const {error: submitError} = await stripeElements.submit();\n\n if (submitError) {\n throw submitError;\n }\n\n const payment = await stripe.value.confirmPayment({\n elements: stripeElements,\n clientSecret: stripeClientSecret,\n confirmParams: {\n shipping,\n return_url: returnUrl,\n },\n });\n\n return payment;\n}\n\nconst data = {\n stripe: readonly(stripe),\n};\n\nexport default function useStripe() {\n return data;\n}\n","import store from \"@songfinch/customer/store\";\nimport useStripe, {loadStripe} from \"@songfinch/customer/composables/useStripe\";\nimport modal from \"@songfinch/shared/plugins/modal/index\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nconst Cart = () => import(\"@songfinch/customer/views/checkout/Cart\");\nconst Checkout = () => import(\"@songfinch/customer/views/checkout/Checkout\");\nconst CompleteCheckout = () => import(\"@songfinch/customer/views/checkout/CompleteCheckout\");\nconst NonStoryConfirmation = () => import(\"@songfinch/customer/views/checkout/NonStoryConfirmation\");\n\nconst checkoutGuard = async () => {\n await loadStripe();\n const {stripe} = useStripe();\n if (!stripe) {\n modal.swal({\n icon: \"warning\",\n html: `Unable to load the payment system. If the error persists, please try a different browser or \n contact us.`,\n });\n return {name: \"Cart\"};\n }\n if (!store.state.cart.cart.length()) {\n return {name: \"Cart\"};\n }\n if (!await store.state.cart.cart.frontendValidation()) {\n return false;\n }\n};\n\nasync function songbuilderGuard() {\n const storeSongBuilder = useSongBuilderStore();\n await storeSongBuilder.init();\n}\n\nasync function stripePreloadGuard() {\n loadStripe().then();\n}\n\nexport default [\n {\n path: \"/cart\",\n name: \"Cart\",\n component: Cart,\n beforeEnter: [songbuilderGuard, stripePreloadGuard],\n meta: {\n skipAuthRedirect: true,\n hideTopBar: true,\n hideFooter: true,\n hideStartButton: true\n },\n },\n {\n path: \"/checkout\",\n name: \"Checkout\",\n meta: {\n skipAuthRedirect: true,\n hideTopBar: true,\n CMSData: \"/cart\",\n },\n component: Checkout,\n beforeEnter: [songbuilderGuard, checkoutGuard],\n },\n {\n path: \"/complete-checkout\",\n name: \"CompleteCheckout\",\n meta: {hideTopBar: true},\n component: CompleteCheckout,\n beforeEnter: [songbuilderGuard]\n },\n {\n path: \"/thank-you\",\n name: \"NonStoryConfirmation\",\n meta: {hideTopBar: true},\n component: NonStoryConfirmation,\n },\n];\n","const Dashboard = () => import(\"@songfinch/customer/views/dashboard/Dashboard\");\nconst Profile = () => import(\"@songfinch/customer/views/dashboard/subpages/Profile\");\nconst OrderHistory = () => import(\"@songfinch/customer/views/dashboard/subpages/OrderHistory\");\nconst CreditBalance = () => import(\"@songfinch/customer/views/dashboard/subpages/CreditBalance\");\nconst ReferralProgram = () => import(\"@songfinch/customer/views/dashboard/subpages/ReferralProgram\");\n\nexport default [\n {\n path: \"/dashboard\",\n name: \"Dashboard\",\n component: Dashboard,\n meta: {requireAuth: true},\n redirect: to => ({name: \"Profile\", query: to.query}),\n children: [\n {\n path: \"profile\",\n name: \"Profile\",\n component: Profile,\n },\n {\n path: \"order-history\",\n name: \"OrderHistory\",\n component: OrderHistory,\n },\n {\n path: \"credit-balance\",\n name: \"CreditBalance\",\n component: CreditBalance,\n },\n {\n path: \"referral-program\",\n name: \"ReferralProgram\",\n component: ReferralProgram,\n },\n ]\n }\n];\n","import router from \"./index\";\n\nconst Story = () => import(\"@songfinch/customer/views/stories/StoryV2\");\nconst AgECard = () => import(\"@songfinch/customer/views/pages/AgECard\");\nconst EditOriginalSongBuilder = () => import(\"@songfinch/customer/views/edit_original_song/EditOriginalSongBuilder\");\n\nexport default [\n {\n path: \"/stories/:slug\",\n name: \"Story\",\n component: Story,\n meta: {\n skipAuthRedirect: true,\n disableZenDesk: true,\n CMSData: \"storyPage\",\n hideTopBar: true,\n },\n beforeEnter: async (to) => {\n const useStoryImport = await import(\"@songfinch/customer/composables/story/useStory\");\n const {loadCurrentStory} = useStoryImport.default();\n if (!await loadCurrentStory(to.params.slug)) {\n return router.push({name: \"404\"});\n }\n },\n },\n {\n path: \"/stories/:slug/ag-ecard\",\n name: \"AgECard\",\n component: AgECard,\n meta: {\n disableZenDesk: true,\n requireAuth: true,\n CMSData: \"agECard\",\n animation: \"pageSlide\",\n hideTopBar: true,\n }\n },\n {\n path: \"/stories/:slug/edit-your-song\",\n name: \"OriginalSongBuilderEdit\",\n component: EditOriginalSongBuilder,\n meta: {\n CMSData: \"songBuilderPrePurchase\",\n animation: \"pageSlide\",\n hideTopBar: true,\n hideNavgiation: true,\n hideFooter: true,\n hideStartButton: true,\n requireAuth: true,\n }\n }\n];\n","const Products = () => import(\"@songfinch/customer/views/products/Products.vue\");\nconst ProductSingle = () => import(\"@songfinch/customer/views/products/ProductSingle.vue\");\n\nexport default [\n {\n path: \"/products/:product_id\",\n name: \"ProductSingle\",\n component: ProductSingle,\n meta: {CMSData: \"productSingle\", skipAuthRedirect: true},\n },\n {\n path: \"/store\",\n name: \"Store\",\n component: Products,\n }\n];\n","const LandingSingle = () => import(\"@songfinch/customer/views/templates/LandingSingle\");\n\nexport default [\n {\n path: \"/custom-gift/:slug\",\n name: \"LandingSingle\",\n component: LandingSingle\n },\n];\n","const Error = () => import(\"@songfinch/customer/views/pages/Error\");\n\nexport default [\n {\n path: \"/500\",\n name: \"500\",\n component: Error,\n },\n {\n path: \"/404\",\n name: \"404\",\n component: Error,\n },\n {\n path: \"/:pathMatch(.*)*\",\n redirect: {name: \"404\"},\n }\n];\n","const ArtistSingle = () => import(\"@songfinch/customer/views/artists/ArtistSingle\");\nconst Artists = () => import(\"@songfinch/customer/views/artists/Artists\");\nconst OpportunityConfirmation = () => import(\"@songfinch/customer/views/artists/OpportunityConfirmation\");\n\n\nexport default [\n {\n path: \"/artists\",\n name: \"ArtistsList\",\n component: Artists,\n },\n {\n path: \"/artists/:id\",\n name: \"ArtistSingle\",\n meta: {CMSData: \"artistSingle\", customPageViewedAnalyticsTrigger: true},\n component: ArtistSingle\n },\n {\n path: \"/opportunity-confirmation\",\n name: \"OpportunityConfirmation\",\n component: OpportunityConfirmation,\n }\n];\n","import store from \"../store\";\nconst EmailMePassword = () => import(\"@songfinch/customer/components/auth/EmailMePassword\");\nconst StudioFaqPopup = () => import(\"@songfinch/customer/components/song_builder/StudioFaqPopup\");\nconst OTPSinginPopup = () => import(\"@songfinch/customer/components/auth/otp/OTPSinginPopup.vue\");\nconst SignupPopup = () => import(\"@songfinch/customer/components/auth/SignupPopup\");\nconst EventReminderPopup = () => import(\"@songfinch/customer/components/event_reminder/EventReminderPopup\");\n\nasync function authPopupHelper(direction, component, swalSettings) {\n if (store.state.auth.user) {\n store.commit(\"auth/redirectToUserPage\");\n return false;\n } else {\n const loadedComponent = (await component()).default;\n setTimeout(() =>\n store.commit(\"shared/showModal\", {\n component: loadedComponent,\n swalSettings: swalSettings,\n responsive: {\n 767: {\n slide: \"bottom\"\n },\n }\n })\n );\n return direction.from.name ? false : {name: \"Home\"};\n }\n}\n\nexport default [\n {\n path: \"/set-reminder\",\n alias: \"/occasion-reminder\",\n name: \"SetRemider\",\n beforeEnter: async (to, from) => {\n const component = (await EventReminderPopup()).default;\n setTimeout(() =>\n store.commit(\"shared/showModal\", {\n component,\n swalSettings: {width: 770},\n })\n );\n return from.name ? false : {name: \"Home\"};\n },\n },\n {\n path: \"/songwriting-101\",\n name: \"Songwriting101\",\n beforeEnter: async (to, from) => {\n const component = (await StudioFaqPopup()).default;\n setTimeout(() =>\n store.commit(\"shared/showModal\", {\n component,\n props: {activeFAQ: to.query.question_id},\n swalSettings: {width: 850},\n })\n );\n return from.name ? false : {name: \"Home\"};\n },\n },\n {\n path: \"/reset-password\",\n name: \"EmailMePassword\",\n beforeEnter: (to, from) => {\n return authPopupHelper({to, from}, EmailMePassword);\n },\n },\n {\n path: \"/login\",\n name: \"Login\",\n alias: \"/users/sign_in\",\n beforeEnter: (to, from) => {\n store.commit(\"auth/setRedirectQuery\", to.query);\n return authPopupHelper({to, from}, OTPSinginPopup);\n },\n },\n {\n path: \"/signup\",\n name: \"Signup\",\n alias: \"/users/sign_up\",\n beforeEnter: (to, from) => {\n store.commit(\"auth/setRedirectQuery\", to.query);\n return authPopupHelper({to, from}, SignupPopup, {width: 770});\n },\n }\n];\n","const Songs = () => import(\"@songfinch/customer/views/songs/Songs.vue\");\nconst PlaylistSingle = () => import(\"@songfinch/customer/views/songs/PlaylistSingle\");\n\nexport default [\n {\n path: \"/playlists\",\n name: \"Playlists\",\n component: Songs,\n },\n {\n path: \"/playlists/:id\",\n name: \"PlaylistSingle\",\n meta: {customPageViewedAnalyticsTrigger: true},\n component: PlaylistSingle,\n }\n];\n","const redirects = [\n {path: \"/testimonials\", redirect: \"/\"},\n {\n path: \"/examples/inspiring-stories\",\n redirect: \"/playlists\",\n },\n {\n path: \"/songwriter-community\",\n redirect: {name: \"ArtistCommunity\"},\n alias: \"/songwriter\",\n },\n {\n path: \"/personalized-song-revisions\",\n redirect: {name: \"SongRevisions\"},\n },\n {\n path: \"/song-builder/song/:path?\",\n redirect: (to) => `/song-builder/${to.params.path}`,\n },\n {\n path: \"/song-builder/occasion/:path?\",\n redirect: (to) => `/song-builder/${to.params.path}`,\n },\n {\n path: \"/song-builder/story/:path?\",\n redirect: \"/song-builder\",\n },\n {\n path: \"/worry-free\",\n redirect: \"/song-revisions\",\n },\n {\n path: \"/worry-free-guarantee\",\n redirect: \"/song-revisions\",\n },\n {\n path: \"/instant\",\n alias: \"/jukebox\",\n name: \"InstantProductBundle\",\n beforeEnter: (to) => {\n const url = new URL(window.appSettings.instantLandingURL);\n url.search = new URLSearchParams(to.query);\n location.href = url;\n return false;\n },\n },\n {\n path: \"/instant-builder/intro\",\n redirect: {name: \"IpCollections\"},\n },\n {\n path: \"/song-builder/intro\",\n name: \"IpIntroPage\",\n redirect: {name: \"BsOccasionRecipient\"},\n },\n {\n path: \"/song-builder/genre\",\n name: \"BsSongGenre\",\n redirect: {name: \"BsSongCharacteristics\"},\n },\n {\n path: \"/song-builder/vocals\",\n name: \"BsSongVocals\",\n redirect: {name: \"BsSongCharacteristics\"},\n },\n {\n path: \"/song-builder/mood\",\n name: \"BsSongMood\",\n redirect: {name: \"BsSongCharacteristics\"},\n },\n {\n path: \"/song-builder/tempo\",\n name: \"BsSongTempo\",\n redirect: {name: \"BsSongCharacteristics\"},\n },\n {\n path: \"/song-builder/gifter\",\n name: \"BsOccasionGifter\",\n redirect: {name: \"BsOccasionRecipient\"},\n },\n {\n path: \"/song-builder/subject\",\n name: \"BsStorySubject\",\n redirect: {name: \"BsStoryDetailsCombined\"},\n },\n];\n\nexport default redirects;\n","import store from \"@songfinch/customer/store\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nconst ReferralsSignup = () => import(\"@songfinch/customer/views/referrals/ReferralsSignup\");\n\nexport default [\n {\n path: \"/r/:code\",\n name: \"ReferralsSignup\",\n component: ReferralsSignup,\n meta: {CMSData: \"/r/:code\"},\n beforeEnter: (to, from, next) => {\n if (store.state.auth.user) {\n $toastMsg(\"You already have an existing account.\");\n return next({name: \"Dashboard\"});\n }\n return next();\n }\n }\n];\n","import useInstantProductBuilder, {\n loadInstantCollection,\n setLastPageVisited,\n setVitamixCollection,\n setSelectedInstantProduct\n} from \"@songfinch/customer/composables/useInstantProductBuilder\";\nimport {setMetaToAllChildren, skipRouteToNext} from \"@songfinch/customer/helpers/routes_helper\";\nimport store from \"@songfinch/customer/store\";\nimport router from \"@songfinch/customer/router\";\nimport {setLastReferralPage} from \"@songfinch/customer/composables/useReferralPage\";\n\nconst InstantProductBuilder = () => import(\"@songfinch/customer/views/instant/builder/InstantProductBuilder.vue\");\nconst IpBuilderSteps = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpBuilderSteps.vue\");\nconst IpBuilderStep = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpBuilderStep.vue\");\nconst IpLoadingPreview = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpLoadingPreview.vue\");\nconst IpRecipientNames = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpRecipientNames.vue\");\nconst IpPreview = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpPreview.vue\");\nconst IpConfirm = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpConfirm.vue\");\nconst IpAddons = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpAddons.vue\");\nconst IpCustomerGreeting = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpCustomerGreeting.vue\");\nconst IpCollections = () => import(\"@songfinch/customer/views/instant/builder/subpages/IpCollections.vue\");\n\nfunction collectionGuard(to) {\n const {vitamixCollectionId} = useInstantProductBuilder();\n if (!vitamixCollectionId.value) return {name: \"IpCollections\", query: to.query};\n}\n\nfunction stepsGuard(to, from) {\n const {collectionData} = useInstantProductBuilder();\n if (!to.params.step) {\n const step = from.meta.index > to.meta.index ? -1 : 1;\n return {name: \"IpBuilderStep\", params: {step}, query: to.query};\n }\n if (to.params?.step === \"-1\") {\n return {name: \"IpBuilderStep\", params: {step: collectionData.value.questions.length}, query: to.query};\n }\n if (!collectionData.value.questions[to.params.step - 1]) return {name: \"IpBuilderStep\", params: {step: 1}, query: to.query};\n}\n\nasync function namesGuard (to, from) {\n const {collectionData} = useInstantProductBuilder();\n return skipRouteToNext(to, from, !collectionData.value.choices[\"name\"]);\n}\n\nasync function addonsGuard (to, from) {\n const {collectionData} = useInstantProductBuilder();\n const skipAddons = collectionData.value?.skip_addon_page ?? false;\n return skipRouteToNext(to, from, skipAddons);\n}\n\nasync function previewGuard () {\n const {previewsList} = useInstantProductBuilder();\n if (!previewsList.value.length) return {name: \"IpBuilderStep\", params: {step: 1}};\n}\n\nfunction productInCartGuard () {\n const {selectedInstantProduct} = useInstantProductBuilder();\n if (!store.state.cart.cart.findProductByName(selectedInstantProduct.value)) return {name: \"IpPreview\"};\n}\n\nasync function customerGreetingGuard(to, from) {\n try {\n const {collectionData} = useInstantProductBuilder();\n const {loadSingleProduct} = await import(\"@songfinch/customer/composables/useProduct\");\n const product = await loadSingleProduct({productSlug: \"customer-greeting-for-instant-product\"});\n to.meta.product = product;\n return skipRouteToNext(to, from, !collectionData.value.pam_enabled || !product);\n } catch (error) {\n return skipRouteToNext(to, from, true);\n }\n}\n\nconst routes = [\n {\n path: \"/instant-builder\",\n name: \"InstantProductBuilder\",\n component: InstantProductBuilder,\n meta: {\n animation: \"pageSlide\",\n hideTopBar: true,\n hideNavgiation: true,\n hideFooter: true,\n hideStartButton: true,\n defaultReferralPage: \"InstantProductBundle\"\n },\n redirect: {name: \"IpCollections\"},\n async beforeEnter(to, from) {\n setLastReferralPage(to, from);\n\n const {vitamixCollectionId} = useInstantProductBuilder();\n const queryCollectionId = +to.query.collection_id;\n if (queryCollectionId) {\n const isDifferentCollection = queryCollectionId !== vitamixCollectionId.value;\n await setVitamixCollection(to.query.collection_id);\n // set Vitamix Collection will set selectedInstantProduct but if query exist we overwriting it\n if (to.query.instant_product) setSelectedInstantProduct(to.query.instant_product);\n if (isDifferentCollection) return true;\n } else if (vitamixCollectionId.value) {\n await loadInstantCollection();\n }\n\n const {lastStepVisited} = useInstantProductBuilder();\n if (lastStepVisited.value) {\n try {\n const lastPageRoute = router.resolve({path: lastStepVisited.value});\n lastPageRoute.query = {...lastPageRoute.query, ...to.query};\n if (to.path !== lastPageRoute.path) return lastPageRoute;\n } catch (e) {\n return console.error(e);\n }\n }\n },\n children: [\n {\n path: \"collections\",\n name: \"IpCollections\",\n component: IpCollections,\n },\n {\n path: \"step\",\n component: IpBuilderSteps,\n meta: {skipLastPage: true},\n beforeEnter: [collectionGuard, stepsGuard],\n children: [\n {\n path: \":step?\",\n name: \"IpBuilderStep\",\n component: IpBuilderStep\n }\n ]\n },\n {\n path: \"recipient\",\n name: \"IpRecipientNames\",\n component: IpRecipientNames,\n beforeEnter: [collectionGuard, namesGuard]\n },\n {\n path: \"loading\",\n name: \"IpLoadingPreview\",\n component: IpLoadingPreview,\n },\n {\n path: \"preview\",\n name: \"IpPreview\",\n component: IpPreview,\n beforeEnter: [collectionGuard, previewGuard]\n },\n {\n path: \"confirm\",\n name: \"IpConfirm\",\n component: IpConfirm,\n beforeEnter: [collectionGuard, previewGuard, productInCartGuard]\n },\n {\n path: \"customer-greeting\",\n name: \"IpCustomerGreeting\",\n component: IpCustomerGreeting,\n beforeEnter: [collectionGuard, customerGreetingGuard, addonsGuard, previewGuard, productInCartGuard]\n },\n {\n path: \"addons\",\n name: \"IpAddons\",\n component: IpAddons,\n meta: {\n nextPage: \"Cart\"\n },\n beforeEnter: [collectionGuard, addonsGuard, previewGuard, productInCartGuard]\n }\n ],\n }\n];\n\nsetMetaToAllChildren(\n routes.find(r => r.name === \"InstantProductBuilder\"),\n {CMSData: \"instantBuilder\"},\n to => {\n if (to.meta.skipLastPage) return;\n setLastPageVisited(to.fullPath);\n }\n);\n\nexport default routes;\n","export default (hash, delay = 100) => {\n if (hash) {\n const element = document.getElementById(hash.substring(1));\n if (element) {\n setTimeout(() => {\n element?.scrollIntoView({\n block: \"start\",\n behavior: \"smooth\"\n });\n }, delay);\n return true;\n }\n }\n return false;\n};\n","import {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nimport {useStorage} from \"@vueuse/core\";\nimport {captureException} from \"@sentry/vue\";\n\ntype SfReloadStorageData = {\n timestamp: number,\n count: number\n}\nlet reloadCalled = false;\n\nexport default function tryReload(error: unknown, from: string, path?: string): boolean {\n if (reloadCalled) return true;\n if (!error?.message?.match(/(Failed to fetch dynamically imported module|Importing a module script failed)/)?.length) return false;\n const storage = useStorage(\"sf_reload\", {count: 0, timestamp: 0}, null, {writeDefaults: false});\n const fiveMinutes = 5 * 60 * 1000;\n const timestampDiff = Date.now() - storage.value.timestamp;\n if (timestampDiff > fiveMinutes) storage.value.count = 0;\n if (storage.value.count <= 3 ) {\n reloadCalled = true;\n storage.value.count++;\n storage.value.timestamp = Date.now();\n window.appSettings.sentry_dns = null; // Clearing to stop any sentry errors\n path ? (location.href = path) : window.location.reload();\n return true;\n }\n error._sfErrorIgnore = false;\n captureException(error, {\n extra: {fromReload: from}\n });\n $toastMsg(\"Unable to refresh the page automatically. Please refresh the page to apply the latest changes.\");\n return false;\n}\n","import app from \"@songfinch/customer/app.js\";\nimport {createRouter, createWebHistory} from \"vue-router\";\nimport static_pages from \"./pages\";\nimport song_builder_pages from \"./song_builder_pages\";\nimport checkout_pages from \"./checkout_pages\";\nimport dashboard_pages from \"./dashboard_pages\";\nimport story_pages from \"./story_pages\";\nimport productPages from \"./ProductPages\";\nimport templates from \"./templates\";\nimport errors from \"./errors\";\nimport artists_pages from \"./artists_pages\";\nimport popups from \"./popups\";\nimport songPages from \"./SongPages\";\nimport redirects from \"./redirects\";\nimport referrals from \"./referrals\";\nimport instant from \"./instant\";\n\nimport store from \"../store\";\nimport hash_scroll from \"../helpers/hash_scroll\";\nimport {nth} from \"lodash-es\";\nimport {$toastMsg} from \"@songfinch/shared/plugins/toast_msg\";\nimport {setLastPageVisited} from \"@songfinch/customer/composables/useInstantProductBuilder\";\nimport tryReload from \"@songfinch/customer/helpers/tryReload\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nconst MAX_REDIRECTS = 10;\nconst redirectsList = [];\nclass RedirectsError extends Error {\n constructor(message, redirectsList) {\n super(message);\n this.name = this.constructor.name;\n this.redirectsList = redirectsList;\n Error.captureStackTrace(this, this.constructor);\n }\n}\n\nconst routes = [\n ...redirects,\n ...static_pages,\n ...song_builder_pages,\n ...checkout_pages,\n ...dashboard_pages,\n ...story_pages,\n ...templates,\n ...productPages,\n ...artists_pages,\n ...popups,\n ...songPages,\n ...referrals,\n ...instant,\n ...errors, //should be last in list\n];\n\nfunction findDuplicateRouteNames(routesList, uniqueNames) {\n routesList.forEach(route => {\n if (route.name){\n if (uniqueNames[route.name]) {\n console.error(\"Duplicated routes:\", uniqueNames[route.name], route);\n throw new Error(`Error! Route name '${route.name}' is already exist.`);\n }\n uniqueNames[route.name] = route;\n if (route.children) {\n findDuplicateRouteNames(route.children, uniqueNames);\n }\n }\n });\n}\n\nif (window.appSettings.node_env === \"development\") {\n findDuplicateRouteNames(routes, {});\n}\n\nconst router = createRouter({\n history: createWebHistory(),\n routes,\n scrollBehavior(to, from) {\n // Scroll to top when navigating to a new page, but not when changing query params\n if (to.path === from.path && to.query !== from.query) {\n return false;\n }\n if (to.hash) return;\n return {top: 0};\n }\n});\n\nrouter.isReady().then(() => {\n app.config.globalProperties.$bus.on(\n \"pageLoaded\",\n () => {\n if (!router.currentRoute.value.meta?.customPageViewedAnalyticsTrigger) {\n analyticsEvent(\"_sf_pageview\");\n }\n hash_scroll(location.hash);\n },\n false\n );\n});\n\n\n\n\nrouter.onError((error, to) => {\n if (tryReload(error, \"router.onError\", to?.fullPath)) return true;\n return {name: \"Home\"};\n});\n\nrouter.afterEach(async (to, from, failure) => {\n if (failure) return;\n //Always remove slash from the end\n history.replaceState(history.state, document.title, location.href.replace(/\\/?(\\?|#|$)/, \"$1\"));\n\n const cmsGroup = to.meta?.CMSData;\n await store.dispatch(\"cms/loadData\", cmsGroup ? {group: cmsGroup} : null);\n\n app.config.globalProperties.$flushGTMScripts();\n setTimeout(() => app.config.globalProperties.$bus.trigger(\"pageLoaded\"), 2); // Min transaction 1 second\n});\n\nrouter.beforeEach(async (to, from, next) => {\n if (from.name) {\n app.config.globalProperties.$bus.clearRouteEvents();\n }\n\n //URL Coupon on init\n if (to.query.coupon) {\n const code = Array.isArray(to.query.coupon) ? nth(to.query.coupon, -1) : to.query.coupon;\n store.commit(\"cart/setReservedCoupon\", {code});\n }\n\n //Auth\n const isRequireAuth = to.matched.find(r => r.meta.requireAuth);\n if (isRequireAuth && !store.state.auth.user) {\n const redirecTo = to.name === \"Checkout\" ? \"Signup\" : \"Login\";\n const settings = {params: to.params, query: to.query};\n return next({name: redirecTo, query: {push_to: to.name, settings: JSON.stringify(settings)}});\n }\n if (to.redirectedFrom) {\n redirectsList.push({to, from});\n if (redirectsList.length > MAX_REDIRECTS) {\n const redirects = [...redirectsList];\n redirectsList.splice(0, redirectsList.length);\n let nextPage = \"Home\";\n if (to.matched[0]?.name === \"SongBuilder\") {\n const storeSongBuilder = useSongBuilderStore();\n storeSongBuilder.setLastSongBuildPage(undefined);\n await storeSongBuilder.saveData();\n nextPage = \"SongBuilder\";\n } else if (to.matched[0]?.name === \"InstantProductBuilder\") {\n setLastPageVisited(\"\");\n nextPage = \"InstantProductBuilder\";\n }\n $toastMsg(\"Sorry, something went wrong. Please try again or contact us at support@songfinch.com.\");\n setTimeout(() => {\n throw new RedirectsError(`The maximum number of redirects has been exceeded (${MAX_REDIRECTS}).`, redirects);\n });\n next({name: nextPage});\n }\n } else {\n redirectsList.splice(0, redirectsList.length);\n }\n next();\n});\n\nwindow.sfPushToPage = (url) => {\n return router.push(url);\n};\n\nexport default router;\n","import Cookies from \"js-cookie\";\n\nexport default function storeGetUserIdentifier(): string {\n return Cookies.get(\"ajs_user_id\") ||\n Cookies.get(\"ajs_anonymous_id\") ||\n Cookies.get(\"_cioanonid\");\n}\n","import {defineStore} from \"pinia\";\nimport {createSongBuilder, fetchSongBuilder, fetchSongBuilderByEmail, updateSongBuilder} from \"@songfinch/data-source/songbuilder\";\nimport type {ArtistListType, ArtistType, SongBuilderState} from \"@songfinch/types/types\";\nimport {map, pick, size} from \"lodash-es\";\nimport {RouteParamsRaw} from \"vue-router\";\nimport {useSongBuilderProgress} from \"@songfinch/customer/composables/useSongBuilderProgress\";\nimport dayjs from \"dayjs\";\nimport modal from \"@songfinch/shared/plugins/modal\";\nimport router from \"@songfinch/customer/router\";\nimport {useStorage} from \"@vueuse/core\";\nimport storeGetUserIdentifier from \"@songfinch/customer/store_v2/storeGetUserIdentifier\";\n\nconst SONGBUILDER_STORAGE_SLUG = \"sf_songbuilder_slug\";\nexport const songBuilderSlug = useStorage(SONGBUILDER_STORAGE_SLUG, null);\n\nexport const FIELDS_LIMITS = Object.freeze({\n question: {maxlength: 10000},\n mustIncTitle: {maxlength: 100},\n mustIncDesc: {maxlength: 200},\n});\n\nexport const useSongBuilderStore = defineStore(\"songBuilder\", {\n state: (): SongBuilderState => ({\n recipient: undefined,\n mention_recipient: undefined,\n relationship: undefined,\n occasion: undefined,\n mention_occasion: undefined,\n preferred_artist_switch: undefined,\n preferred_artist: undefined,\n require_update_artist: undefined,\n gifter_email: undefined,\n selected_artists: undefined,\n genre: undefined,\n gender: undefined,\n tempo: undefined,\n moods: undefined,\n selected_recommended_artist: undefined,\n recommended_artists: undefined,\n lastSongBuildPage: undefined,\n song_product_name: undefined,\n pronunciations: undefined,\n questions: undefined,\n must_have_questions: undefined,\n deliveryType: undefined,\n selectedDeliveryMethod: undefined,\n }),\n\n getters: {\n getSongProduct: (state): string => state.song_product_name || \"personalized-song\",\n getArtistData: (state): ArtistType | ArtistListType | undefined => {\n if (state.selected_artists?.[0]) {\n return state.selected_artists[0];\n }\n return state.selected_recommended_artist;\n },\n },\n actions: {\n async migrateLocalStorageData() { // Can be removed later\n let data = localStorage.getItem(\"sf_song_data\");\n data &&= JSON.parse(data);\n if (data?.lastSongBuildPage) {\n this.setData(data);\n await this.saveData();\n localStorage.removeItem(\"sf_song_data\");\n }\n },\n async init() {\n await this.migrateLocalStorageData();\n\n if (songBuilderSlug.value) {\n try {\n const remoteData = await fetchSongBuilder(songBuilderSlug.value);\n this.setData(remoteData.song_data);\n } catch (e) {\n songBuilderSlug.value = null;\n }\n }\n },\n setData(data: SongBuilderState) {\n this.$reset();\n this.$patch(data);\n },\n async saveData() {\n const data = {\n song_data: this.$state,\n email: this.gifter_email,\n external_user_id: storeGetUserIdentifier()\n };\n\n if (songBuilderSlug.value) {\n await updateSongBuilder(songBuilderSlug.value, data);\n } else {\n const resData = await createSongBuilder(data);\n songBuilderSlug.value = resData.slug;\n }\n },\n updateSelectedArtistsData() {\n this.selected_artists ||= [];\n const selected = this.selected_artists.filter((a) => a);\n if (!selected.length) {\n this.preferred_artist = \"\";\n return;\n }\n this.preferred_artist = selected.map((a) => a.artist_name).join(\", \");\n\n const artist = selected[0];\n this.gender = \"3\";\n this.genre = artist.selected_genre; // Object.keys can be removed later\n },\n selectArtist(data: {artist: ArtistListType, index?: number }) {\n const artist = data.artist;\n if (!artist) return;\n this.selected_artists ||= [];\n\n this.preferred_artist_switch = true;\n\n if (!this.selected_artists?.find((a) => a?.id === artist.id)) {\n const artistData = pick(artist, [\n \"id\",\n \"artist_name\",\n \"photo\",\n \"genres\",\n \"gender\",\n \"fromSinglePage\",\n \"available_delivery_days\",\n \"artist_power_user\",\n \"artist_verified\",\n \"exclusivity\",\n \"videos\",\n ]);\n artistData.genresOptions = map(artistData.genres, (g, i) => ({id: i, text: g}));\n artistData.videos = artistData.videos ? artistData.videos.find((video) => video?.video_type === \"Artist Intro\") || null : null;\n if (size(artistData.genres) === 1) artistData.selected_genre = artistData.genresOptions[0].id;\n this.selected_artists[0] = artistData;\n this.updateSelectedArtistsData();\n }\n },\n removeSelectedArtist(index: number) {\n this.selected_artists?.splice(index, 1);\n this.updateSelectedArtistsData();\n },\n clearSelectedArtists() {\n this.selected_artists = undefined;\n this.preferred_artist = \"\";\n },\n\n setRecommendedArtists(val?: ArtistType[]) {\n this.recommended_artists = val;\n },\n selectRecommendedArtist(val?: ArtistType) {\n this.selected_recommended_artist = val;\n },\n setLastSongBuildPage(route?: RouteParamsRaw) {\n this.lastSongBuildPage = route;\n },\n addPronunciation() {\n this.pronunciations.push({subject: \"\", pronounce: \"\", audio: null, saved: false});\n },\n removePronunciation(index) {\n this.pronunciations.splice(index, 1);\n },\n async validateSongData({redirect, toPage}?: {redirect?: boolean, toPage?: string} = {}) {\n redirect ??= true;\n const error = \"\";\n const query = {};\n let showWarning = true;\n let invalidPage = \"\";\n\n const {progressStats, sections} = useSongBuilderProgress();\n\n if (!progressStats.value.valid) {\n sections.find(item => {\n if (item.isCompleted) return false;\n invalidPage = item.id;\n return true;\n });\n }\n\n if (!invalidPage && this.pronunciations?.length) {\n const startLength = this.pronunciations.length;\n this.pronunciations = this.pronunciations.filter(p => !(p.expire && dayjs().isAfter(p.expire)));\n if (startLength !== this.pronunciations.length) {\n invalidPage ||= \"BsReview\";\n showWarning = false;\n redirect = toPage !== \"BsReview\";\n modal.swal({\n icon: \"warning\",\n html: error || \"Your pronunciation audio file has expired. Please add a new one.\"\n });\n }\n }\n\n if (!invalidPage && this.require_update_artist) {\n invalidPage = \"BsSongArtist\";\n showWarning = false;\n }\n\n if (this.selected_artists?.some(a => !a.selected_genre)) {\n invalidPage = \"BsSongArtistSelection\";\n }\n\n if (invalidPage) {\n if (showWarning) {\n modal.swal({\n icon: \"warning\",\n html: error || \"Please fill out all required fields before proceeding.\"\n });\n }\n this.setLastSongBuildPage({name: invalidPage, query});\n if (redirect && router.currentRoute.value.name !== invalidPage) {\n await router.push({name: invalidPage, query});\n }\n return false;\n }\n return true;\n },\n isArtistAvailableForDayRush(add_days) {\n if (+add_days > 3) return true;\n const artistData = this.getArtistData;\n if (!artistData || !(artistData?.artist_verified || artistData?.artist_power_user || artistData?.exclusivity)) return false;\n return artistData.available_delivery_days?.includes(String(add_days));\n },\n resetData() {\n this.$reset();\n songBuilderSlug.value = null;\n // TODO: Do we need to reset in DB?\n },\n isInProgress() {\n return !!songBuilderSlug.value;\n },\n async loadUserData(email) {\n if (!songBuilderSlug.value) {\n try {\n const data = await fetchSongBuilderByEmail(email);\n if (data) {\n this.setData(data[0]?.song_data);\n songBuilderSlug.value = data[0]?.slug;\n }\n } catch (e) {}\n }\n }\n },\n});\n","\n \n {{text || $t(isStoryIncomplete ? \"shared.continue_your_song\" : \"shared.start_your_song\")}}\n \n\n\n\n","var Limit;\n(function (Limit) {\n Limit[Limit[\"All\"] = 0] = \"All\";\n Limit[Limit[\"Two\"] = 1] = \"Two\";\n Limit[Limit[\"One\"] = 2] = \"One\";\n})(Limit || (Limit = {}));\nlet config;\nlet rootDocument;\nexport function finder(input, options) {\n if (input.nodeType !== Node.ELEMENT_NODE) {\n throw new Error(`Can't generate CSS selector for non-element node type.`);\n }\n if (\"html\" === input.tagName.toLowerCase()) {\n return \"html\";\n }\n const defaults = {\n root: document.body,\n idName: (name) => true,\n className: (name) => true,\n tagName: (name) => true,\n attr: (name, value) => false,\n seedMinLength: 1,\n optimizedMinLength: 2,\n threshold: 1000,\n maxNumberOfTries: 10000,\n };\n config = Object.assign(Object.assign({}, defaults), options);\n rootDocument = findRootDocument(config.root, defaults);\n let path = bottomUpSearch(input, Limit.All, () => bottomUpSearch(input, Limit.Two, () => bottomUpSearch(input, Limit.One)));\n if (path) {\n const optimized = sort(optimize(path, input));\n if (optimized.length > 0) {\n path = optimized[0];\n }\n return selector(path);\n }\n else {\n throw new Error(`Selector was not found.`);\n }\n}\nfunction findRootDocument(rootNode, defaults) {\n if (rootNode.nodeType === Node.DOCUMENT_NODE) {\n return rootNode;\n }\n if (rootNode === defaults.root) {\n return rootNode.ownerDocument;\n }\n return rootNode;\n}\nfunction bottomUpSearch(input, limit, fallback) {\n let path = null;\n let stack = [];\n let current = input;\n let i = 0;\n while (current && current !== config.root.parentElement) {\n let level = maybe(id(current)) ||\n maybe(...attr(current)) ||\n maybe(...classNames(current)) ||\n maybe(tagName(current)) || [any()];\n const nth = index(current);\n if (limit === Limit.All) {\n if (nth) {\n level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));\n }\n }\n else if (limit === Limit.Two) {\n level = level.slice(0, 1);\n if (nth) {\n level = level.concat(level.filter(dispensableNth).map((node) => nthChild(node, nth)));\n }\n }\n else if (limit === Limit.One) {\n const [node] = (level = level.slice(0, 1));\n if (nth && dispensableNth(node)) {\n level = [nthChild(node, nth)];\n }\n }\n for (let node of level) {\n node.level = i;\n }\n stack.push(level);\n if (stack.length >= config.seedMinLength) {\n path = findUniquePath(stack, fallback);\n if (path) {\n break;\n }\n }\n current = current.parentElement;\n i++;\n }\n if (!path) {\n path = findUniquePath(stack, fallback);\n }\n return path;\n}\nfunction findUniquePath(stack, fallback) {\n const paths = sort(combinations(stack));\n if (paths.length > config.threshold) {\n return fallback ? fallback() : null;\n }\n for (let candidate of paths) {\n if (unique(candidate)) {\n return candidate;\n }\n }\n return null;\n}\nfunction selector(path) {\n let node = path[0];\n let query = node.name;\n for (let i = 1; i < path.length; i++) {\n const level = path[i].level || 0;\n if (node.level === level - 1) {\n query = `${path[i].name} > ${query}`;\n }\n else {\n query = `${path[i].name} ${query}`;\n }\n node = path[i];\n }\n return query;\n}\nfunction penalty(path) {\n return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);\n}\nfunction unique(path) {\n switch (rootDocument.querySelectorAll(selector(path)).length) {\n case 0:\n throw new Error(`Can't select any node with this selector: ${selector(path)}`);\n case 1:\n return true;\n default:\n return false;\n }\n}\nfunction id(input) {\n const elementId = input.getAttribute(\"id\");\n if (elementId && config.idName(elementId)) {\n return {\n name: \"#\" + cssesc(elementId, { isIdentifier: true }),\n penalty: 0,\n };\n }\n return null;\n}\nfunction attr(input) {\n const attrs = Array.from(input.attributes).filter((attr) => config.attr(attr.name, attr.value));\n return attrs.map((attr) => ({\n name: \"[\" +\n cssesc(attr.name, { isIdentifier: true }) +\n '=\"' +\n cssesc(attr.value) +\n '\"]',\n penalty: 0.5,\n }));\n}\nfunction classNames(input) {\n const names = Array.from(input.classList).filter(config.className);\n return names.map((name) => ({\n name: \".\" + cssesc(name, { isIdentifier: true }),\n penalty: 1,\n }));\n}\nfunction tagName(input) {\n const name = input.tagName.toLowerCase();\n if (config.tagName(name)) {\n return {\n name,\n penalty: 2,\n };\n }\n return null;\n}\nfunction any() {\n return {\n name: \"*\",\n penalty: 3,\n };\n}\nfunction index(input) {\n const parent = input.parentNode;\n if (!parent) {\n return null;\n }\n let child = parent.firstChild;\n if (!child) {\n return null;\n }\n let i = 0;\n while (child) {\n if (child.nodeType === Node.ELEMENT_NODE) {\n i++;\n }\n if (child === input) {\n break;\n }\n child = child.nextSibling;\n }\n return i;\n}\nfunction nthChild(node, i) {\n return {\n name: node.name + `:nth-child(${i})`,\n penalty: node.penalty + 1,\n };\n}\nfunction dispensableNth(node) {\n return node.name !== \"html\" && !node.name.startsWith(\"#\");\n}\nfunction maybe(...level) {\n const list = level.filter(notEmpty);\n if (list.length > 0) {\n return list;\n }\n return null;\n}\nfunction notEmpty(value) {\n return value !== null && value !== undefined;\n}\nfunction* combinations(stack, path = []) {\n if (stack.length > 0) {\n for (let node of stack[0]) {\n yield* combinations(stack.slice(1, stack.length), path.concat(node));\n }\n }\n else {\n yield path;\n }\n}\nfunction sort(paths) {\n return Array.from(paths).sort((a, b) => penalty(a) - penalty(b));\n}\nfunction* optimize(path, input, scope = {\n counter: 0,\n visited: new Map(),\n}) {\n if (path.length > 2 && path.length > config.optimizedMinLength) {\n for (let i = 1; i < path.length - 1; i++) {\n if (scope.counter > config.maxNumberOfTries) {\n return; // Okay At least I tried!\n }\n scope.counter += 1;\n const newPath = [...path];\n newPath.splice(i, 1);\n const newPathKey = selector(newPath);\n if (scope.visited.has(newPathKey)) {\n return;\n }\n if (unique(newPath) && same(newPath, input)) {\n yield newPath;\n scope.visited.set(newPathKey, true);\n yield* optimize(newPath, input, scope);\n }\n }\n }\n}\nfunction same(path, input) {\n return rootDocument.querySelector(selector(path)) === input;\n}\nconst regexAnySingleEscape = /[ -,\\.\\/:-@\\[-\\^`\\{-~]/;\nconst regexSingleEscape = /[ -,\\.\\/:-@\\[\\]\\^`\\{-~]/;\nconst regexExcessiveSpaces = /(^|\\\\+)?(\\\\[A-F0-9]{1,6})\\x20(?![a-fA-F0-9\\x20])/g;\nconst defaultOptions = {\n escapeEverything: false,\n isIdentifier: false,\n quotes: \"single\",\n wrap: false,\n};\nfunction cssesc(string, opt = {}) {\n const options = Object.assign(Object.assign({}, defaultOptions), opt);\n if (options.quotes != \"single\" && options.quotes != \"double\") {\n options.quotes = \"single\";\n }\n const quote = options.quotes == \"double\" ? '\"' : \"'\";\n const isIdentifier = options.isIdentifier;\n const firstChar = string.charAt(0);\n let output = \"\";\n let counter = 0;\n const length = string.length;\n while (counter < length) {\n const character = string.charAt(counter++);\n let codePoint = character.charCodeAt(0);\n let value = void 0;\n // If it’s not a printable ASCII character…\n if (codePoint < 0x20 || codePoint > 0x7e) {\n if (codePoint >= 0xd800 && codePoint <= 0xdbff && counter < length) {\n // It’s a high surrogate, and there is a next character.\n const extra = string.charCodeAt(counter++);\n if ((extra & 0xfc00) == 0xdc00) {\n // next character is low surrogate\n codePoint = ((codePoint & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000;\n }\n else {\n // It’s an unmatched surrogate; only append this code unit, in case\n // the next code unit is the high surrogate of a surrogate pair.\n counter--;\n }\n }\n value = \"\\\\\" + codePoint.toString(16).toUpperCase() + \" \";\n }\n else {\n if (options.escapeEverything) {\n if (regexAnySingleEscape.test(character)) {\n value = \"\\\\\" + character;\n }\n else {\n value = \"\\\\\" + codePoint.toString(16).toUpperCase() + \" \";\n }\n }\n else if (/[\\t\\n\\f\\r\\x0B]/.test(character)) {\n value = \"\\\\\" + codePoint.toString(16).toUpperCase() + \" \";\n }\n else if (character == \"\\\\\" ||\n (!isIdentifier &&\n ((character == '\"' && quote == character) ||\n (character == \"'\" && quote == character))) ||\n (isIdentifier && regexSingleEscape.test(character))) {\n value = \"\\\\\" + character;\n }\n else {\n value = character;\n }\n }\n output += value;\n }\n if (isIdentifier) {\n if (/^-[-\\d]/.test(output)) {\n output = \"\\\\-\" + output.slice(1);\n }\n else if (/\\d/.test(firstChar)) {\n output = \"\\\\3\" + firstChar + \" \" + output.slice(1);\n }\n }\n // Remove spaces after `\\HEX` escapes that are not followed by a hex digit,\n // since they’re redundant. Note that this is only possible if the escape\n // sequence isn’t preceded by an odd number of backslashes.\n output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {\n if ($1 && $1.length % 2) {\n // It’s not safe to remove the space, so don’t.\n return $0;\n }\n // Strip the space.\n return ($1 || \"\") + $2;\n });\n if (!isIdentifier && options.wrap) {\n return quote + output + quote;\n }\n return output;\n}\n","import {finder} from \"@medv/finder\";\n\n\nexport function generateElementSelector(el) {\n return finder(el, {\n seedMinLength: 5,\n optimizedMinLength: 3,\n });\n}\n","import app from \"@songfinch/customer/app.js\";\nimport hash_scroll from \"@songfinch/customer/helpers/hash_scroll\";\nimport {generateElementSelector} from \"@songfinch/customer/helpers/html_helpers\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\nimport modal from \"@songfinch/shared/plugins/modal/index\";\n\n//This directive can be assigned to root or any element that has stopPropagation in case we want to track links\nconst ctaHandler = {\n mounted(el, binding) {\n el.addEventListener(\"click\", (e) => clickEventHandler(e, {onlyEvents: false, ...binding.value}));\n }\n};\n\n// 2 main logic here:\n// 1) Send CTA event\n// 2) handle regular links that managed through CMS. if link start with http(s) then do regular redirect with reload\n// Otherwise it will be handler by vue router\n\nexport function clickEventHandler (event, {onlyEvents} = {onlyEvents: false}) {\n // ensure we use the link, in case the click has been received by a subelement\n let {target} = event;\n\n while (target && ![\"A\", \"BUTTON\"].includes(target.tagName)) target = target.parentNode;\n\n if (!target) return;\n\n // Fire tracking event\n let eventElement;\n try {\n eventElement = generateElementSelector(target);\n } catch (e) {\n eventElement = `unknown`;\n }\n\n const sfCtaAtributes = {};\n //Array.from(target.attributes).forEach((attribute) => {\n for (const attribute of target.attributes) {\n if (attribute.name.indexOf(\"sfcta-\") === 0) {\n sfCtaAtributes[attribute.name.replace(\"sfcta-\", \"\")] = attribute.value;\n }\n }\n setTimeout(() => {\n analyticsEvent(\"_sf_cta_clicked\", {\n location: eventElement,\n destination: target.href,\n text: target.textContent?.trim(),\n type: target.tagName === \"A\" ? \"link\" : \"button\",\n timestamp: dateTimeInSeconds(),\n ...sfCtaAtributes\n });\n }, 10);\n\n // handle only links that do not reference external song_page_access\n if (!onlyEvents && target.href && !target.classList.contains(\"skipVueRouting\")) {\n if (!isExternalReplace(target.href) && !target.href.startsWith(\"mailto:\")) {\n\n if (target?.getAttribute(\"close-swal\") !== null) {\n modal.swal.close();\n }\n // some sanity checks taken from vue-router:\n // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106\n const {altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented} = event;\n // don't handle with control keys\n if (metaKey || altKey || ctrlKey || shiftKey) return;\n // don't handle right clicks\n if (button !== undefined && button !== 0) return;\n // don't handle when preventDefault called\n if (defaultPrevented) return;\n // don't handle if `target=\"_blank\"`\n if (target && target.getAttribute) {\n const linkTarget = target.getAttribute(\"target\");\n if (/\\b_blank\\b/i.test(linkTarget)) return;\n }\n event.preventDefault();\n const url = new URL(target.href);\n if (hash_scroll(url.hash)) return;\n const to = url.pathname + url.search + url.hash;\n if (window.location.pathname !== to && event.preventDefault) {\n return app.config.globalProperties.$router.push(to);\n }\n } else {\n target.setAttribute(\"target\", \"_blank\");\n }\n }\n}\n\nfunction isExternalReplace(url) {\n const domain = (url) => url.replace(\"http://\", \"\").replace(\"https://\", \"\").split(\"/\")[0];\n return domain(location.href) !== domain(url);\n}\n\nfunction dateTimeInSeconds() {\n return Math.round(Date.now() / 1000);\n}\n\n\nexport default ctaHandler;\n","import Cookies from \"js-cookie\";\n\nexport const removeExistingAdCookies = (cookieName) => {\n Cookies.remove(cookieName, {path: \"/\", secure: false});\n};\n\nexport const checkUrlQueryForAdIds = async (query) => {\n if (!Cookies) return;\n const {gclid} = query;\n const cookieExpirationDays = 7;\n if (gclid) {\n const cookieName = \"gclid\";\n removeExistingAdCookies(cookieName);\n Cookies.set(cookieName, gclid, {expires: cookieExpirationDays});\n }\n};","class Event {\n constructor() {\n this.events = {};\n }\n\n on(eventName, fn, clearOnRoute = true) {\n this.events[eventName] = this.events[eventName] || [];\n fn.clearOnRoute = clearOnRoute;\n this.events[eventName].push(fn);\n }\n\n off(eventName, fn) {\n if (this.events[eventName]) {\n for (let i = 0; i < this.events[eventName].length; i++) {\n if (this.events[eventName][i] === fn) {\n this.events[eventName].splice(i, 1);\n break;\n }\n }\n }\n }\n\n trigger(eventName, data) {\n if (this.events[eventName]) {\n this.events[eventName].forEach(function (fn) {\n fn(data);\n });\n }\n }\n\n clearRouteEvents() {\n Object.values(this.events).forEach(event => {\n for (let i = event.length - 1; i > -1; i--) {\n if (event[i].clearOnRoute) event.splice(i, 1);\n }\n });\n }\n}\n\nexport const eventBus = new Event();\n\nexport default {\n install(app) {\n app.config.globalProperties.$bus = eventBus;\n }\n};\n","import {ref, Ref, shallowRef, readonly} from \"vue\";\nimport {TopBannerParams} from \"@songfinch/customer/types/top_banner\";\n\nexport const globalTopBannerPayload: Ref = ref();\n\nexport const setTopBanner = (payload?: TopBannerParams) => {\n if (payload?.component) {\n payload.component = shallowRef(payload.component);\n }\n globalTopBannerPayload.value = payload;\n};\n\nexport default function useTopBanner() {\n return {\n setTopBanner,\n globalTopBannerPayload: readonly(globalTopBannerPayload)\n };\n}\n","import axios, {type AxiosRequestConfig} from \"axios\";\nimport type {\n SignInOrigin, \n CheckForPasswordResponse, \n FetchAccessPasscodeOptions, \n AccessPasscodeResponse,\n SubmitAccessPasscodeResponse,\n FetchCheckUserForOTPResponseType\n} from \"@songfinch/types\";\n\n\nexport async function fetchCheckUserForOTP(email: string): Promise {\n const res = await axios.post(\"/access_passcodes/check_user_password/\", {email});\n return res.data;\n}\n\nexport async function fetchAccessPasscode(payload: FetchAccessPasscodeOptions): Promise {\n const res = await axios.post(\"/access_passcodes/\", payload);\n return res.data;\n\n}\n\nexport async function submitAccessPasscode(passcode: string, sign_in_origin?: SignInOrigin): Promise {\n const res = await axios.post(\"/access_passcodes/create_session\", {passcode, sign_in_origin}, {meta: {updateCSRFToken: true}} as AxiosRequestConfig);\n return res.data;\n}\n","import axios from \"axios\";\nimport type {User, PostToExpressSignupResponseType} from \"@songfinch/types/types\";\n\nexport const fetchUser = async (user_id: number): Promise => {\n try {\n const res = await axios.get(\"/user\", {\n params: {\n user_id\n }\n });\n return res.data.user;\n } catch (error) {\n return undefined;\n }\n};\n\nexport const postToExpressSignup = async (email: string, name?: string): Promise => {\n try {\n await axios.post(\"/user/express_signup\", {\n email,\n name\n });\n return {success: true};\n } catch (error) {\n if (axios.isAxiosError(error)) {\n if (error.response?.data.error === \"Name is required\") {\n return {success: false, nameRequired: true};\n }\n }\n throw error;\n }\n};","import {ref, computed} from \"vue\";\nimport {useStore} from \"vuex\";\n\nimport {StorySong} from \"@songfinch/types/types\";\nimport {isValidEmail} from \"@songfinch/utils/src/validators\";\n\ntype AuthModalTypes = \"default\" | \"story\"\n\nconst authExpressModalOpen = ref(false);\nconst authModalSecondaryText = ref(\"Access your Songfinch account\");\n\nimport {submitAccessPasscode, fetchAccessPasscode} from \"@songfinch/data-source/auth\";\nimport {postToExpressSignup} from \"@songfinch/data-source/users\";\nimport {useNotification} from \"@songfinch/design-system/src/composables/useNotification\";\nimport {normalizeError} from \"@songfinch/utils/src/error\";\n\nimport type {TrackEventHandler} from \"@songfinch/types\";\n\nexport default function useAuthExpress(trackEvent?: TrackEventHandler) {\n const store = useStore();\n const {setNotification} = useNotification();\n const userName = ref(\"\");\n const userEmail = ref(\"\");\n const otpCode = ref(\"\");\n const authShowNameField = ref(false);\n const useOtpCodeFlow = ref(false);\n\n const authFormIsValid = computed(() => {\n const isEmailValid = isValidEmail(userEmail.value);\n\n if (authShowNameField.value === false) {\n return isEmailValid;\n }\n return isEmailValid && userName.value.length > 0;\n });\n\n const otpCodeIsValid = computed(() => {\n return !!(otpCode.value && otpCode.value.length === 6);\n });\n\n const setAuthModalSecondaryText = (type: AuthModalTypes, data?: StorySong) => {\n if (type === \"story\" && data) {\n const songTitle = data.title;\n authModalSecondaryText.value = `For privacy, participation on ${songTitle} is only allowed if you’re a verified user. Please verify your email and join the conversation!`;\n } else {\n authModalSecondaryText.value = \"Access your Songfinch account\";\n }\n };\n\n const openExpressAuthModal = (type: AuthModalTypes = \"default\", data?: StorySong) => {\n cleanAuthExpressModal();\n setAuthModalSecondaryText(type, data);\n authExpressModalOpen.value = true;\n };\n\n const closeAuthExpressModal = () => {\n cleanAuthExpressModal();\n authExpressModalOpen.value = false;\n };\n\n const cleanAuthExpressModal = () => {\n userName.value = \"\";\n userEmail.value = \"\"; \n useOtpCodeFlow.value = false;\n authShowNameField.value = false;\n };\n\n const handleOTPInitiatition = async () => {\n if (!authFormIsValid.value) {\n // todo throw error maybe?\n return;\n }\n try {\n const res = await postToExpressSignup(userEmail.value, userName.value);\n if (res.success) {\n useOtpCodeFlow.value = true;\n if (authShowNameField.value) {\n handleTrackEvent(\"Express Auth Modal New User Signup Submitted\");\n } else {\n handleTrackEvent(\"Express Auth Modal Sign-in Pressed\");\n }\n handleTrackEvent(\"Express Auth OTP Form Shown\");\n return;\n }\n userName.value = \"\";\n authShowNameField.value = true;\n handleTrackEvent(\"Express Auth Modal Sign-in Pressed\");\n handleTrackEvent(\"Express Auth Modal New User Signup Shown\");\n } catch (error: unknown) {\n setNotification({\n error\n });\n }\n };\n\n const handleOTPAuthentication = async () => {\n handleTrackEvent(\"Express Auth OTP Submitted\");\n\n if (!otpCodeIsValid.value) {\n setNotification({\n error: \"Please enter the 5-digit code sent to your email.\"\n });\n }\n try {\n const res = await submitAccessPasscode(otpCode.value, \"story_page\");\n if (res.user) {\n cleanAuthExpressModal();\n authExpressModalOpen.value = false;\n store.dispatch(\"auth/afterLogin\", {user: res.user});\n handleTrackEvent(\"Express Auth OTP Success\");\n }\n } catch (error) {\n const normalizedError = normalizeError(error);\n\n if (normalizedError === \"Passcode expired\") {\n handleTrackEvent(\"Express Auth OTP Expired\");\n }\n\n setNotification({\n heading: \"Error\",\n error: normalizedError,\n });\n }\n };\n\n const resendOTPCode = async () => {\n try {\n await fetchAccessPasscode({\n email: userEmail.value,\n method: \"email\",\n sign_in_origin: \"story_page\",\n resent: true\n });\n setNotification({\n text: \"New code sent!\"\n });\n handleTrackEvent(\"Express Auth OTP Code Resend Pressed\");\n } catch (error) {\n setNotification({\n heading: \"Error\",\n error: normalizeError(error)\n });\n }\n };\n\n const handleTrackEvent = (eventName: string) => {\n if (trackEvent) {\n trackEvent(eventName);\n }\n };\n\n\n return {\n userName,\n userEmail,\n otpCode,\n authExpressModalOpen,\n authShowNameField,\n authFormIsValid,\n authModalSecondaryText,\n useOtpCodeFlow,\n otpCodeIsValid,\n openExpressAuthModal,\n closeAuthExpressModal,\n handleOTPInitiatition,\n handleOTPAuthentication,\n resendOTPCode\n };\n}\n","import {forEach, filter} from \"lodash-es\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\nconst dbVals = window.appSettings.events_value;\nconst gtmSongData = {};\n\nconst gtm_song_data_helper = {\n BsOccasionRecipient: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.recipient || !storeSongBuilder.relationship) return;\n gtmSongData.recipient = storeSongBuilder.recipient;\n gtmSongData.relationship = storeSongBuilder.relationship;\n gtmSongData.mention_recipient = storeSongBuilder.mention_recipient;\n\n gtmSongData.occasion = storeSongBuilder.occasion;\n gtmSongData.mention_occasion = storeSongBuilder.mention_occasion;\n gtmSongData.step_name = \"BsOccasionRecipient\";\n gtmSongData.step_number = 1;\n },\n BsGifterEmail2: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.gifter_email ) return;\n gtmSongData.gifter_email = storeSongBuilder.gifter_email;\n gtmSongData.step_name = \"BsGifterEmail2\";\n gtmSongData.step_number = 2;\n },\n BsSongArtist: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (storeSongBuilder.preferred_artist_switch === undefined) return;\n gtmSongData.preferred_artist_switch = storeSongBuilder.preferred_artist_switch;\n gtmSongData.step_name = \"BsSongArtist\";\n gtmSongData.step_number = 5;\n },\n BsSongCharacteristics: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.gender || !storeSongBuilder.genre || !storeSongBuilder.moods?.length || !storeSongBuilder.tempo) return;\n gtmSongData.gender = dbVals.genders[storeSongBuilder.gender];\n gtmSongData.genre = dbVals.genres[storeSongBuilder.genre];\n gtmSongData.moods = storeSongBuilder?.moods.map(m => dbVals.moods[m]).join(\", \") ;\n gtmSongData.tempo = dbVals.tempos[storeSongBuilder.tempo];\n gtmSongData.step_name = \"BsSongCharacteristics\";\n gtmSongData.step_number = 6;\n },\n BsSongArtistsList: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.selected_recommended_artist) return;\n gtmSongData.recommended_artist_name = storeSongBuilder.selected_recommended_artist.artist_name;\n gtmSongData.recommended_artist_id = storeSongBuilder.selected_recommended_artist.id;\n gtmSongData.recommended_artists = storeSongBuilder.recommended_artists;\n\n gtmSongData.step_name = \"BsSongArtistsList\";\n // This step is skipped in the selected artist flow\n gtmSongData.step_number = 7;\n\n // TODO: Note this is for backwards compatibility, we are updating the field name for a misspelling and need to update GTM after this\n gtmSongData.submited_artists = null;\n gtmSongData.submitted_artists = null;\n },\n BsSongArtistSelection: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.selected_artists?.length) return;\n // TODO: Note this is for backwards compatibility, we are updating the field name for a misspelling and need to update GTM after this\n gtmSongData.submited_artists = storeSongBuilder.selected_artists;\n gtmSongData.submitted_artists = gtmSongData.submited_artists;\n gtmSongData.step_name = \"BsSongArtistSelection\";\n gtmSongData.step_number = 5.1;\n\n gtmSongData.recommended_artist_name = null;\n gtmSongData.recommended_artist_id = null;\n gtmSongData.recommended_artists = null;\n },\n BsStoryDetailsCombined: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.questions?.[0] || !storeSongBuilder.questions?.[1]) return;\n gtmSongData.story_details = `**${storeSongBuilder.questions[0].question}**\\r\\n${storeSongBuilder.questions[0].answer}`;\n gtmSongData.story_additional_details = `**${storeSongBuilder.questions[1].question}**\\r\\n\\r\\n${storeSongBuilder.questions[1].answer}`;\n\n if (storeSongBuilder.must_have_questions) {\n const new_array = {};\n forEach(storeSongBuilder.must_have_questions, (el, index) => {\n if (el.answer) {\n new_array[`musthave_${index + 1}`] = `**${el.answer}** - ${el.description}`;\n }\n });\n gtmSongData.gtm_m_h_questions = JSON.stringify(new_array);\n }\n gtmSongData.step_name = \"BsStoryDetails\";\n gtmSongData.step_number = 10;\n },\n BsStoryPronunciation: () => {\n const storeSongBuilder = useSongBuilderStore();\n if (!storeSongBuilder.pronunciations?.length) return;\n const filtered_pronunciations = filter(storeSongBuilder.pronunciations, (p) => {\n return p.pronounce || p.subject;\n });\n gtmSongData.pronunciations = filtered_pronunciations;\n gtmSongData.step_name = \"BsStoryPronunciation\";\n gtmSongData.step_number = 14;\n },\n BsReview: () => {\n gtmSongData.step_name = \"BsReview\";\n gtmSongData.step_number = 12;\n }\n};\n\nconst initGtmData = () => {\n Object.values(gtm_song_data_helper).forEach(v => v());\n};\n\nexport default gtm_song_data_helper;\n\nexport {initGtmData, gtmSongData};\n","export function setSessionUser(userData: unknown) {\n if (userData) {\n sessionStorage.setItem(\"sf_temp_user\", JSON.stringify({sessioned: true, ...userData}));\n }\n}\n\nexport function getSessionUser() {\n const saved = sessionStorage.getItem(\"sf_temp_user\");\n if (saved) return JSON.parse(saved);\n}\n","import axios from \"axios\";\nimport Cookies from \"js-cookie\";\nimport {map, omit, reduce, cloneDeep} from \"lodash-es\";\nimport uuid from \"@songfinch/utils/src/uuid\";\nimport sha256 from \"@songfinch/shared/helpers/sha256\";\nimport analyticsEvent from \"@songfinch/shared/helpers/analyticsEvent\";\n\nimport app from \"@songfinch/customer/app.js\";\nimport router from \"@songfinch/customer/router\";\nimport store from \"@songfinch/customer/store\";\n\n\nimport gtm_song_data_helper, {\n initGtmData, gtmSongData\n} from \"../helpers/gtm_song_data_helper\";\nimport useInstantProductBuilder from \"@songfinch/customer/composables/useInstantProductBuilder\";\nimport {getSessionUser} from \"@songfinch/customer/store_v2/storeTempUser\";\nimport {flipperValues} from \"@songfinch/shared/plugins/flipper\";\nimport storeGetUserIdentifier from \"@songfinch/customer/store_v2/storeGetUserIdentifier\";\nimport {useSongBuilderStore} from \"@songfinch/customer/store_v2/useSongBuilderStore\";\n\nimport {TrackEventHandler} from \"@songfinch/types\";\n\nconst {vitamixCollectionTitle} = useInstantProductBuilder();\n\nconst SONG_BUILDER_QUIZ_NAME = \"purchase_last\";\nconst SONG_BUILDER_QUIZ_NUMBER = \"3\";\n\nconst NON_ADDON_PRODUCTS = [\"song\", \"gift-card\"];\n\nfunction mapBackendProductToEventProductModel(p) {\n // Note we are remapping Product.title => TrackedProduct.name for using the \"human readable name when forwarding\n // Product.name => TrackedProduct.code\n return {\n id: p.sku,\n product_id: p.sku,\n content_id: p.sku,\n content_type: \"product\",\n name: p.title,\n code: p.name,\n quantity: p.quantity,\n cta_clicked: p.cta_clicked,\n brand: \"songfinch\",\n category: p.product_type,\n price: (p.cartPrice ?? p.price) / 100,\n currency: \"USD\",\n product_type: p.product_type,\n add_on: !NON_ADDON_PRODUCTS.includes(p.product_type),\n image_url: app.config.globalProperties.$cld.url(p.photo) || \"\",\n variant_name: p.extra_info?.variant_name,\n instant_product: p.extra_info?.instant_product\n };\n}\n\nfunction getProducts() {\n const cart = store.state.cart.cart;\n\n //Filter products that has price\n //Submitted song will be free product we need to exclude it\n const products = cart.products\n .filter((p) => +p.price)\n .map(mapBackendProductToEventProductModel);\n\n return products;\n}\n\nfunction dateTimeInSeconds() {\n return Math.round(Date.now() / 1000);\n}\n\nfunction mapAndEnrichSongbuilderDataForSegment() {\n const storeSongBuilder = useSongBuilderStore();\n const gtmSongDataCloned = cloneDeep(gtmSongData);\n const segmentData = {};\n const keysToRemap = [\n \"gender\", // song_artist_gender\n \"genre\", // song_genre\n \"gifter_email\", // song_customer_email\n \"gtm_m_h_questions\", // map to dict and rename to song_must_have_questions\n \"pronunciations\", // boolean map and rename to song_pronunciations\n \"for_someone_else\", // boolean map and rename to song_for_someone_else\n \"for_occasion\", // boolean map and rename to song_for_occasion\n \"mention_occasion\", // boolean map and rename to song_mention_occasion\n \"mention_recipient\", // boolean map and rename to song_mention_recipient\n \"moods\", // song_moods\n \"occasion\", // song_occasion\n \"recipient\", // rename to song_recipient_name\n \"recommended_artist_id\", // prefix w/ song\n \"recommended_artist_name\", // prefix w/ song\n \"recommended_artists\", // prefix w/ song\n \"relationship\", // prefix w/ song\n \"submitted_artists\", // prefix w/ song\n \"story_details\", // map to dict and then rename to song_story_details\n \"story_additional_details\", // map to dict and then rename to song_story_additional_details\n \"tempo\", // song_tempo\n \"delivery_type\", // with or without purchasing an ecard\n \"ag_ecard\" // e-card product object\n ];\n //Remap Known Keys Fields\n keysToRemap.forEach((fm) => {\n // Skipp remapping if we dont have the field in GTM data\n if (gtmSongDataCloned[fm] === undefined) return;\n // Business logic to map fields to updated values\n switch (fm) {\n case \"gender\":\n segmentData.song_vocals = gtmSongDataCloned.gender;\n break;\n case \"genre\":\n segmentData.song_genre = gtmSongDataCloned.genre;\n break;\n case \"gifter_email\":\n segmentData.song_customer_email = gtmSongDataCloned.gifter_email;\n break;\n case \"gtm_m_h_questions\":\n segmentData.song_must_have_questions = reduce(\n storeSongBuilder.must_have_questions,\n (acc, el, idx) => {\n if (el.answer) {\n acc[`must_have_${idx}`] = {\n title: el.answer,\n answer: el.description,\n };\n }\n return acc;\n },\n {}\n );\n break;\n case \"mention_occasion\":\n segmentData.song_mention_occasion =\n gtmSongDataCloned.mention_occasion.toLowerCase() === \"yes\";\n break;\n case \"mention_recipient\":\n segmentData.song_mention_recipient =\n gtmSongDataCloned.mention_recipient.toLowerCase() === \"yes\";\n break;\n case \"for_someone_else\":\n segmentData.song_for_someone_else =\n gtmSongDataCloned.for_someone_else.toLowerCase() === \"yes\";\n break;\n case \"for_occasion\":\n segmentData.song_for_occasion =\n gtmSongDataCloned.for_occasion.toLowerCase() === \"yes\";\n break;\n case \"moods\":\n segmentData.song_moods = gtmSongDataCloned.moods;\n break;\n case \"occasion\":\n segmentData.song_occasion = gtmSongDataCloned.occasion;\n break;\n case \"recipient\":\n segmentData.song_recipient = gtmSongDataCloned.recipient;\n break;\n case \"recommended_artist_id\":\n segmentData.song_recommended_artist_id =\n gtmSongDataCloned.recommended_artist_id;\n break;\n case \"recommended_artist_name\":\n segmentData.song_recommended_artist_name =\n gtmSongDataCloned.recommended_artist_name;\n break;\n case \"recommended_artists\":\n segmentData.song_recommended_artists =\n gtmSongDataCloned.recommended_artists;\n break;\n case \"relationship\":\n segmentData.song_relationship = gtmSongDataCloned.relationship;\n break;\n case \"submitted_artists\":\n segmentData.song_submitted_artists =\n gtmSongDataCloned.submitted_artists;\n break;\n case \"story_details\":\n //Ensure we have the response before remapping\n if (!storeSongBuilder.questions?.[0]) break;\n segmentData.song_story_details = {\n question: storeSongBuilder.questions[0].question,\n answer: storeSongBuilder.questions[0].answer,\n };\n break;\n case \"story_additional_details\":\n //Ensure we have the response before remapping\n if (!storeSongBuilder.questions?.[1]) break;\n segmentData.song_story_additional_details = {\n question: storeSongBuilder.questions[1].question,\n answer: storeSongBuilder.questions[1].answer,\n };\n break;\n case \"tempo\":\n segmentData.song_tempo = gtmSongDataCloned.tempo;\n break;\n case \"pronunciations\":\n segmentData.song_pronunciations = gtmSongDataCloned.pronunciations;\n break;\n case \"delivery_type\":\n segmentData.deliveryType = gtmSongDataCloned.deliveryType;\n break;\n case \"ag_ecard\":\n segmentData.ag_ecard = gtmSongDataCloned.ag_ecard;\n break;\n default:\n console.warn(`Missing case for field mapping: ${fm}`);\n break;\n }\n });\n //Copy remaining keys into segmentData\n Object.keys(gtmSongDataCloned).forEach((k) => {\n // Ignore keys we've already mapped\n if (keysToRemap.indexOf(k) >= 0) return;\n segmentData[k] = gtmSongDataCloned[k];\n });\n return segmentData;\n}\n\nasync function getCartStage() {\n const cart = store.state.cart.cart;\n const song = cart.hasOriginalSong;\n\n //If we have song in cart\n if (song) {\n //If song for submission\n if (song.parent_story_id) {\n return \"Story Submission\";\n } else {\n //else New Song Purchase\n return \"Song Purchase\";\n }\n }\n\n //If no song in cart find first addon that we buying song for\n const firstAddonParentStoryId = cart.products.find(\n (p) => p.parent_story_id\n )?.parent_story_id;\n if (firstAddonParentStoryId) {\n try {\n //Geting song status of first addon\n const res = await axios.get(\n \"/stories/get_status_by_id/\" + firstAddonParentStoryId,\n {\n cache: {\n ignoreCache: false,\n maxAge: 60000, // 1 min cache\n },\n }\n );\n const status = res.data.status;\n if ([\"shipped\", \"canceled\"].includes(status)) {\n return \"Song Delivered\";\n } else if ([\"created\"].includes(status)) {\n return \"Story Submission\";\n } else {\n return \"Song Production\";\n }\n } catch (e) {\n //Not sure if we need to handle error\n }\n }\n\n return \"Merchandise Purchase\";\n}\n\nfunction getUserTraitsForSegmentRequest() {\n const user = store.state?.auth?.user;\n const storeSongBuilder = useSongBuilderStore();\n let email = user?.email;\n if (!email) {\n //Attempt to get the email from the songbuilder state store captured from the gifter step\n email = storeSongBuilder.gifter_email;\n }\n const first_name = user?.first_name;\n const last_name = user?.last_name;\n const em = sha256(email);\n const fn = sha256(first_name);\n const ln = sha256(last_name);\n const timezone = Intl?.DateTimeFormat().resolvedOptions().timeZone;\n const features = flipperValues;\n\n let traits = {\n features,\n timezone\n };\n\n if (email) {\n //Only return account data if we have information about the user's email\n traits = {\n email,\n em,\n first_name,\n fn,\n last_name,\n ln,\n ...traits,\n };\n }\n\n\n return traits;\n}\n\nfunction getSessionDataForSegmentRequest() {\n return {\n gclid: Cookies.get(\"gclid\"),\n fbc: Cookies.get(\"_fbc\"),\n fbp: Cookies.get(\"_fbp\"),\n user_id: storeGetUserIdentifier(),\n };\n}\n\nfunction getSegmentTrackingContextData(eventId = null, eventName = null) {\n // If we don't have an eventId passed in, generate one with UUID\n const event_id_nonce = eventId ? eventId : uuid().replace(\"-\", \"\");\n //Construct a tracking event_id based on if we passed on an eventName\n const tracking_event_id = eventName\n ? `${eventName}-${event_id_nonce}`\n : event_id_nonce;\n return {\n traits: getUserTraitsForSegmentRequest(),\n session: getSessionDataForSegmentRequest(),\n event_id: tracking_event_id\n };\n}\n\n/*PAGEVIEW*/\ndocument.addEventListener(\"_sf_pageview\", () => {\n const requestId = store.state.core_cms?.__headers?.[\"x-request-id\"] || uuid();\n const eventId = \"PageView-\" + requestId;\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push({\n event: \"pageview\",\n page: {\n name: router.currentRoute.value.name,\n path: location.pathname,\n pageTitle: document.title,\n },\n fbEventID: eventId,\n });\n\n window.analytics?.page(router.currentRoute.value.name, {\n affiliate: store.state.cart.cart.affiliate,\n fbEventID: eventId,\n event_id: eventId,\n requestId: requestId,\n timestamp: dateTimeInSeconds(),\n ...getSegmentTrackingContextData(requestId, \"PageView\"),\n });\n});\n\n/* Product Page View - only on build your song page when you start */\n/* Trigger: product page load */\ndocument.addEventListener(\"_sf_viewcontent\", async (e) => {\n const gtmData = {\n event: \"viewcontent\",\n page: {\n path: \"/song-builder\",\n pageTitle: \"Song Builder\",\n },\n ecommerce: e.detail.ecommerce,\n };\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push(gtmData);\n window.analytics?.track(\n \"Songbuilder Viewed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n quiz_name: SONG_BUILDER_QUIZ_NAME,\n quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n timestamp: dateTimeInSeconds()\n },\n getSegmentTrackingContextData()\n );\n});\n\n/* Add to cart - all products */\n/* Trigger: Add to cart button */\ndocument.addEventListener(\"_sf_add_to_cart\", async (e) => {\n const product = {...e.detail?.product};\n //excluding products that doesn't have a price\n if (!product.price) return;\n const eventProductModel = mapBackendProductToEventProductModel(product);\n product.price /= 100;\n const page = {\n path: location.pathname,\n pageTitle: document.title,\n name: router.currentRoute.value.name,\n };\n const gtmData = {\n event: \"addtocart\",\n page,\n ecommerce: {\n content_id: product.sku,\n content_type: \"product\",\n content_name: product.title,\n quantity: product.quantity,\n price: product.price,\n currency: \"USD\",\n add: {\n products: [\n {\n name: product.title, // Name or ID is required.\n id: product.sku,\n price: product.price,\n brand: product.brand,\n category: product.category,\n variant: \"\",\n quantity: product.quantity,\n },\n ],\n },\n },\n };\n const calls = [];\n calls.push(\n axios.get(\"store/fb_add_to_cart\", {\n params: {...product, current_path: page.path},\n })\n );\n calls.push(getCartStage());\n const [res, cart_stage] = await Promise.all(calls);\n const eventId = \"AddToCart-\" + res.headers[\"x-request-id\"];\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push({\n ...gtmData,\n fbEventID: eventId,\n cart_stage,\n });\n\n window.analytics?.track(\n \"Product Added\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n value: product.price, // ENG-1112 - Adding tracking for segment pixel usage\n timestamp: dateTimeInSeconds(),\n ...eventProductModel,\n },\n getSegmentTrackingContextData(eventId)\n );\n});\n\ndocument.addEventListener(\"_sf_remove_from_cart\", () => {\n //TODO: Add Event Handler\n});\n\n/* Select Payment Method Event */\ndocument.addEventListener(\"_sf_payment_type\", async () => {\n const cart = store.state.cart.cart;\n const products = getProducts();\n\n const gtmData = {\n event: \"selected_payment_type\",\n ecommerce: {\n currency: \"USD\",\n coupon: cart.coupon?.code || null,\n value: cart.total / 100,\n checkout: {\n actionField: {step: 2, option: cart.payment_type},\n products,\n },\n },\n };\n\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push(gtmData);\n const cart_stage = await getCartStage();\n\n window.analytics?.track(\n \"Checkout Step Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n checkout_step_name: \"payment\",\n checkout_step_number: 3,\n value: cart.total / 100,\n timestamp: dateTimeInSeconds()\n },\n getSegmentTrackingContextData(null, \"Checkout Step Completed\")\n );\n});\n\n/* Add to cart - all products */\n/* Trigger: Complete purchase, payment successful + order created in db, order confirmation */\ndocument.addEventListener(\"_sf_purchase\", async (e) => {\n const cart = store.state.cart.cart;\n const products = getProducts();\n const purchased_song_revision_product = cart.hasOriginalSongRevision;\n\n const song_purchase_event_id = \"SongPurchased-\" + e.detail.order_id;\n const order_fb_event_id = \"Purchase-\" + e.detail.order_id;\n const order_event_id = \"OrderCompleted-\" + e.detail.order_id;\n\n if (purchased_song_revision_product) {\n window.analytics?.track(\n \"Song Revision Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n story_id: purchased_song_revision_product.parent_story_id,\n song_revisions:\n purchased_song_revision_product.extra_info.revision_requests.map(\n (rev) => {\n const lineRef =\n rev.type === \"update\"\n ? rev.edits?.[0].line\n : rev.line;\n return {\n revision_type: rev.type,\n revision_lyric_reference: \"Line \" + lineRef,\n };\n }\n ),\n quiz_name: \"revisions\",\n },\n getSegmentTrackingContextData(\n purchased_song_revision_product.parent_story_id,\n \"SongRevisionCompleted\"\n )\n );\n }\n\n const discountTotal = cart.discount;\n\n // Can only purchase one song at the moment\n const purchased_song_product = cart.hasOriginalSong || cart.hasInstantSong;\n\n // Segment\n const segmentOrderData = {\n song_included: !!purchased_song_product,\n checkout_id: \"T\" + e.detail.order_id,\n coupon: cart.coupon?.code || null,\n currency: \"USD\",\n credit_applied: cart.credit_applied,\n discount: discountTotal ? discountTotal / 100 : 0,\n order_id: e.detail.order_id,\n payment_method: e.detail.payment_type,\n shipping: cart.shipping / 100,\n subtotal: cart.subtotal / 100,\n tax: cart.taxes / 100,\n total: cart.total / 100,\n value: cart.total / 100, // ENG-1112 - Adding tracking for segment pixel usage\n fbEventID: order_fb_event_id,\n products,\n };\n\n if (!products.length) return;\n //Map products in response object from API to product event product model\n const nonSongReportedProducts = e.detail.non_song_product_data?.map(\n mapBackendProductToEventProductModel\n ) || [];\n const user = store.state.auth.user || getSessionUser();\n\n const gtmData = {\n event: \"purchase\",\n page: {\n path: \"/checkout\",\n pageTitle: \"Checkout\",\n },\n ecommerce: {\n contents: products,\n value: cart.total / 100,\n coupon: cart.coupon?.code || null,\n coupon_total: discountTotal ? discountTotal / 100 : null,\n currency: \"USD\",\n subtotal: cart.subtotal / 100,\n credit_applied: cart.credit_applied,\n user_id: storeGetUserIdentifier(),\n user: {\n email: user.email,\n first_name: user.first_name,\n last_name: user.last_name,\n },\n transactionID: e.detail.order_id,\n chargeID: e.detail.charge_id,\n purchase: {\n actionField: {\n id: \"T\" + e.detail.order_id, // Transaction ID. Required for purchases and refunds.\n affiliation: \"Songfinch Store\",\n revenue: cart.total / 100, // Total transaction value (incl. tax and shipping)\n tax: cart.taxes / 100,\n shipping: cart.shipping / 100,\n coupon: cart.coupon?.code || null,\n currency: \"USD\",\n },\n products,\n },\n },\n fbEventID: order_fb_event_id,\n };\n\n if (cart.addresses.shipping) {\n gtmData.home_address = {\n street:\n cart.addresses.shipping.line1 +\n \" \" +\n (cart.addresses.shipping.line2 || \"\"),\n city: cart.addresses.shipping.city,\n region: cart.addresses.shipping.state,\n postal_code: cart.addresses.shipping.postal_code,\n country: cart.addresses.shipping.country,\n };\n }\n\n const songProducts = products.filter(p => p.instant_product || p.code === \"personalized-song\");\n\n const segmentSongsData = songProducts.map((songProduct) => {\n const song_type = songProduct.instant_product ? \"InstantProduct\": \"Song\";\n const baseSegmentSongData = {\n // Order Ecomm Attributes\n billing_address_city: cart.addresses.billing?.city,\n billing_address_country_code: cart.addresses.billing?.country_code,\n billing_address_postal_code: cart.addresses.billing?.postal_code,\n billing_address_state_code: cart.addresses.billing?.state_code,\n checkout_id: \"T\" + e.detail.order_id,\n coupon: cart.coupon?.code || null,\n currency: \"USD\",\n credit_applied: cart.credit_applied,\n discount: discountTotal ? discountTotal / 100 : 0,\n order_id: e.detail.order_id,\n payment_method: e.detail.payment_type,\n shipping: cart.shipping / 100,\n subtotal: cart.subtotal / 100,\n tax: cart.taxes / 100,\n total: cart.total / 100,\n value: cart.total / 100, // ENG-1112 - Adding tracking for segment pixel usage\n products,\n // Song Ecomm Attributes\n story_id: e.detail.slug,\n price: songProduct.price,\n core_product_type: song_type,\n add_on: false,\n };\n\n //Refresh GTM songbuilder data from each step\n initGtmData();\n\n if (songProduct.instant_product) {\n return baseSegmentSongData;\n }\n\n return {\n ...baseSegmentSongData,\n // SongBuilder Attributes\n ...omit(\n mapAndEnrichSongbuilderDataForSegment(),\n [\"step_number\", \"step_name\"]\n ),\n };\n });\n\n //Enrich the product event model w/ order info to associate w/ the order/story\n const segmentItemData = nonSongReportedProducts.map((p) => {\n return {\n order_id: e.detail.order_id,\n checkout_id: \"T\" + e.detail.order_id,\n story_id: e.detail.slug,\n coupon: cart.coupon?.code || null,\n ...p,\n };\n });\n\n const cart_stage = await getCartStage();\n\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push({\n ...gtmData,\n cart_stage,\n });\n\n window.analytics?.track(\n \"Order Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n timestamp: dateTimeInSeconds(),\n ...segmentOrderData,\n },\n getSegmentTrackingContextData(order_event_id)\n );\n\n segmentSongsData.forEach((segmentSongData) => {\n window.dataLayer?.push({ecommerce: null});\n window.dataLayer?.push({\n event: \"song_purchase\",\n page: gtmData.page,\n ecommerce: gtmData.ecommerce,\n segment: {\n ...segmentSongData,\n cart_stage,\n },\n fbEventID: song_purchase_event_id,\n });\n window.analytics?.track(\n \"Song Purchased\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n ...segmentSongData,\n },\n getSegmentTrackingContextData(song_purchase_event_id)\n );\n });\n\n //Only report purchased products\n segmentItemData.forEach((p) => {\n const item_purchase_event_id = `ItemPurchased-${e.detail.order_id}-${p.id}`;\n window.analytics?.track(\n \"Item Purchased\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n value: p.price, // ENG-1112 - Adding tracking for segment pixel usage\n timestamp: dateTimeInSeconds(),\n ...p,\n },\n getSegmentTrackingContextData(item_purchase_event_id)\n );\n });\n});\n\n//View Event Reminder Or Artist Application Form\ndocument.addEventListener(\"_sf_viewform\", () => {\n window.dataLayer?.push({\n event: \"viewform\",\n page: {\n path: location.pathname,\n pageTitle: document.title,\n },\n });\n // window.analytics?.track(\"viewform\", {\n // page: {\n // path: location.pathname,\n // pageTitle: document.title,\n // }\n // });\n});\n\n//Cart page view\ndocument.addEventListener(\"_sf_cart_viewed\", async () => {\n const products = getProducts();\n const cart = store.state.cart.cart;\n const gtmData = {\n event: \"cart_viewed\",\n page: {\n path: location.pathname,\n pageTitle: \"Cart\",\n },\n ecommerce: {\n currency: \"USD\",\n subtotal: cart.subtotal / 100,\n value: cart.total / 100,\n credit_applied: cart.credit_applied / 100,\n products,\n },\n };\n const cart_stage = await getCartStage();\n window.dataLayer?.push({\n ...gtmData,\n cart_stage,\n });\n});\n\n//Start Checkout\ndocument.addEventListener(\"_sf_startcheckout\", async () => {\n const products = getProducts();\n const cart = store.state.cart.cart;\n const gtmData = {\n event: \"startcheckout\",\n page: {\n path: location.pathname,\n pageTitle: \"Checkout\",\n },\n ecommerce: {\n subtotal: cart.subtotal / 100,\n value: cart.total / 100,\n credit_applied: cart.credit_applied / 100,\n products,\n },\n };\n const segmentData = {\n subtotal: cart.subtotal / 100,\n total: cart.total / 100,\n value: cart.total / 100, // ENG-1112 - Adding tracking for segment pixel usage\n credit_applied: cart.credit_applied / 100,\n currency: \"USD\",\n products,\n };\n const cart_stage = await getCartStage();\n window.dataLayer?.push({\n ...gtmData,\n cart_stage,\n });\n window.analytics?.track(\n \"Checkout Started\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n timestamp: dateTimeInSeconds(),\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Checkout Started\")\n );\n});\n\n//Forms Submission\ndocument.addEventListener(\"_sf_submitform\", (e) => {\n const lead_form_event_id = `LeadFormCompleted-${e.detail.request_id}`;\n window.dataLayer?.push({\n event: \"submitform\",\n page: {\n path: location.pathname,\n pageTitle: document.title,\n },\n form: {\n ...e.detail.form,\n },\n formName: e.detail.formName,\n request_id: e.detail.request_id,\n });\n const user_email = e.detail.form.email;\n window.analytics?.track(\n \"Lead Form Completed\",\n {\n email: user_email,\n form_type: e.detail.formName,\n request_id: e.detail.request_id,\n // quiz_name: SONG_BUILDER_QUIZ_NAME,\n // quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n },\n getSegmentTrackingContextData(lead_form_event_id)\n );\n});\n\ndocument.addEventListener(\"_sf_identify_user\", (e) => {\n if (document.cookie.indexOf(\"ajs_user_id=\") === -1) {\n window.analytics?.identify({\n email: e.detail.email,\n timezone: Intl?.DateTimeFormat().resolvedOptions().timeZone,\n features: flipperValues\n }, getSegmentTrackingContextData(null, null));\n }\n});\n\n//Song Builder Forms Submissions\ndocument.addEventListener(\"_sf_songbuildersubmit\", (e) => {\n const step = e.detail?.step || router.currentRoute.value.name;\n\n gtm_song_data_helper[step]?.();\n window.dataLayer?.push({\n event: e.detail?.event || \"songbuildersubmit\",\n page: router.currentRoute.value.name,\n ...gtmSongData,\n });\n const segmentData = mapAndEnrichSongbuilderDataForSegment();\n //Filter out erroneous SB complete events we are publishing at the wrong time. I think this is due to not having\n // Handlers for certain events. We still want to filter these out but if this doesn't work we can add specific\n // empty handlers for each step\n // This occurs w/ BsStoryMustIncludesIntro\n\n if (gtm_song_data_helper[step]) {\n window.analytics?.track(\n \"Songbuilder Step Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n song_customer_category: \"lead\",\n quiz_name: SONG_BUILDER_QUIZ_NAME,\n quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n timestamp: dateTimeInSeconds(),\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Songbuilder Step Completed\")\n );\n }\n});\n\n//Song Builder Review Submission\ndocument.addEventListener(\"_sf_songbuildersumit_review\", (e) => {\n gtm_song_data_helper[router.currentRoute.value.name]?.();\n //Legacy behavior for GTM\n window.dataLayer?.push({\n event: e.detail?.event || \"songbuildersubmit\",\n page: router.currentRoute.value.name,\n ...gtmSongData,\n });\n const segmentData = mapAndEnrichSongbuilderDataForSegment();\n window.analytics?.track(\n \"Songbuilder Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n song_customer_category: \"lead\",\n quiz_name: SONG_BUILDER_QUIZ_NAME,\n quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Songbuilder Completed\")\n );\n});\n\n//Artist view list page after song builder\ndocument.addEventListener(\"_sf_songbuilder_recommended_artist_list\", (e) => {\n const recommended_list = map(e.detail, (el) => el.artist_name).join(\", \");\n //Turn into list, letting marketing determine which style they want\n const artist_list = map(e.detail, (el) => el);\n const gtmData = {\n event: \"bs_recommended_artist_list\",\n recommended_list,\n };\n window.dataLayer?.push(gtmData);\n window.analytics?.track(\n \"Songbuilder Artist Selection Received\",\n {\n affiliate: store.state.cart.cart.affiliate,\n artist_list,\n recommended_list,\n quiz_name: SONG_BUILDER_QUIZ_NAME,\n quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n timestamp: dateTimeInSeconds()\n },\n getSegmentTrackingContextData(\n null,\n \"Songbuilder Artist Selection Received\"\n )\n );\n});\n\n//Artist view list page after song builder\n// document.addEventListener('_sf_search_artist_from_bs', (e) => {\n// window.dataLayer?.push({\n// event: 'search_artist_from_bs',\n// });\n// // if(window.analytics) {\n// // analytics.track('search_artist_from_bs');\n// // }\n// })\n\n//Apply Coupon\ndocument.addEventListener(\"_sf_apply_coupon\", () => {\n if (!store.state.cart.cart.coupon) return;\n window.dataLayer?.push({\n event: \"apply_coupon\",\n ecommerce: {\n coupon: store.state.cart.cart.coupon.code,\n },\n });\n const discountTotal = store.state.cart.cart.discount;\n window.analytics?.track(\n \"Checkout Apply Coupon\",\n {\n affiliate: store.state.cart.cart.affiliate,\n coupon: store.state.cart.cart.coupon?.code,\n coupon_total: discountTotal ? discountTotal / 100 : null,\n },\n getSegmentTrackingContextData(\n store.state.cart.cart.coupon.code,\n \"Checkout Apply Coupon\"\n )\n );\n});\n\n//Start song with artist\ndocument.addEventListener(\"_sf_start_song_with_artist\", (e) => {\n const artist = e.detail.artist;\n window.dataLayer?.push({\n event: \"start_song_with_artist\",\n artist_id: artist.id,\n artist_name: artist.artist_name,\n });\n window.analytics?.track(\n \"CTA Clicked\",\n {\n destination: e.detail.destination,\n location: e.detail.location,\n text: e.detail.text,\n type: e.detail.type,\n artist_id: artist.id,\n artist_name: artist.artist_name,\n },\n getSegmentTrackingContextData(null, \"CTA Clicked\")\n );\n});\n\n//Link Clicked\ndocument.addEventListener(\"_sf_cta_clicked\", (e) => {\n window.analytics?.track(\n \"CTA Clicked\",\n {timestamp: dateTimeInSeconds(), ...e?.detail},\n getSegmentTrackingContextData(null, \"CTA Clicked\")\n );\n});\n\n//Share Clip Generator Clicked\ndocument.addEventListener(\"_sf_clip_generator_clicked\", (e) => {\n window.analytics?.track(\n \"Share Clip Generator Button Clicked\",\n {timestamp: dateTimeInSeconds(), ...e?.detail},\n getSegmentTrackingContextData(null, \"Share Clip Generator Button Clicked\")\n );\n});\n\n\n//Share Clip Generator Clicked\ndocument.addEventListener(\"_sf_clip_generator_shared_clicked\", (e) => {\n window.analytics?.track(\n \"Share Generated Clip Button Clicked\",\n {timestamp: dateTimeInSeconds(), ...e?.detail},\n getSegmentTrackingContextData(null, \"Share Generated Clip Button Clicked\")\n );\n});\n\n\n//user login event\ndocument.addEventListener(\"_sf_user_login\", (e) => {\n const user = store.state.auth.user;\n const user_id = storeGetUserIdentifier();\n window.dataLayer?.push({\n event: \"UserInit\",\n user_id: user_id,\n user_email: user.email,\n user_first_name: user.first_name,\n user_last_name: user.last_name,\n user_role: user.role,\n });\n\n if (store.state.auth.redirectQuery?.push_to === \"Checkout\") {\n const data = e.detail.registration\n ? {\n ga_action: \"User created an account from /checkout\",\n ga_tag: \"CreateAccountCheckout\",\n }\n : {\n ga_action: \"User logged in from /checkout\",\n ga_tag: \"LoginCheckout\",\n };\n analyticsEvent(\"_sf_custom_ga_event\", data);\n }\n\n if (e.detail.registration) {\n window.dataLayer?.push({\n event: \"signup\",\n page: {\n path: location.pathname,\n pageTitle: document.title,\n },\n user,\n });\n\n window.analytics?.track(\n \"Account Created\",\n {\n email: user.email,\n firstName: user.first_name,\n lastName: user.last_name,\n referral_source: user.heard_about_from + (user.heard_about_from_other ? ` - ${user.heard_about_from_other}` : \"\"),\n referral_code: store.state.auth.referralCode || \"\",\n },\n getSegmentTrackingContextData(user_id, \"Account Created\")\n );\n } else {\n window.analytics?.track(\n \"Signed In\",\n {\n email: user.email,\n },\n getSegmentTrackingContextData(null, \"Signed In\")\n );\n }\n\n if (store.state.auth.referralCode && e.detail.registration) {\n analyticsEvent(\"_sf_custom_ga_event\", {\n ga_action:\n \"Referred user creates an account from the unique referral landing page\",\n ga_tag: \"ReferralSignup\",\n });\n }\n\n window.analytics?.identify(user?.external_user_id, {\n email: user.email,\n firstName: user.first_name,\n lastName: user.last_name,\n guest: user.guest,\n role: user.role || null,\n timezone: Intl?.DateTimeFormat().resolvedOptions().timeZone,\n features: flipperValues\n }, getSegmentTrackingContextData(null, null));\n});\n\n//user logout event\ndocument.addEventListener(\"_sf_user_logout\", () => {\n const user = store.state.auth.user;\n window.dataLayer?.push({\n event: \"user_logout\",\n });\n window.analytics?.track(\n \"Signed Out\",\n {\n email: user.email,\n },\n getSegmentTrackingContextData(null, \"Signed Out\")\n );\n});\n\n//TODO: redo events above\n//Custom Event\n//e.detail should contain {ga_category: \"\", ga_action: \"\", ga_tag: \"\", ga_label:\"\"} label - optional\ndocument.addEventListener(\"_sf_custom_ga_event\", async (e) => {\n window.dataLayer?.push({\n event: \"custom_ga_event\",\n ...e.detail,\n });\n\n let segmentData = {};\n let trackingContext = {};\n let baseSegmentData = {};\n let cart_stage;\n const cart = store.state?.cart?.cart;\n const story = e.detail?.story;\n\n switch (e.detail.ga_tag) {\n case \"SubmitAccount\":\n segmentData = {\n checkout_step_name: \"account\",\n checkout_step_number: 0,\n value: (cart?.total || 0) / 100, // ENG-1112 - Adding tracking for segment pixel usage\n };\n cart_stage = await getCartStage();\n window.analytics?.track(\n \"Checkout Step Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n timestamp: dateTimeInSeconds(),\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Checkout Step Completed\")\n );\n break;\n case \"SubmitBilling\":\n segmentData = {\n checkout_step_name: \"billing_address\",\n checkout_step_number: 1,\n value: (cart?.total || 0) / 100, // ENG-1112 - Adding tracking for segment pixel usage\n };\n cart_stage = await getCartStage();\n window.analytics?.track(\n \"Checkout Step Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n timestamp: dateTimeInSeconds(),\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Checkout Step Completed\")\n );\n break;\n case \"SubmitShipping\":\n segmentData = {\n checkout_step_name: \"shipping_address\",\n checkout_step_number: 2,\n value: (cart?.total || 0) / 100, // ENG-1112 - Adding tracking for segment pixel usage\n };\n cart_stage = await getCartStage();\n window.analytics?.track(\n \"Checkout Step Completed\",\n {\n affiliate: store.state.cart.cart.affiliate,\n cart_stage,\n timestamp: dateTimeInSeconds(),\n ...segmentData,\n },\n getSegmentTrackingContextData(null, \"Checkout Step Completed\")\n );\n break;\n case \"DownloadSong\":\n baseSegmentData = {\n email: e.detail.email,\n story_id: story.slug,\n song_genre: story.genre,\n core_product_type: story.song ? \"Song\" : \"instantProduct\"\n };\n\n if (story.song) {\n const song = story.song;\n const songData = {\n song_title: song.title,\n song_artist: song.artist?.fullName || \"\",\n song_artist_id: song.artist?.id || \"\",\n };\n segmentData = {...baseSegmentData, ...songData};\n } else {\n const instant_product = story.instant_product;\n const instantProductData = {\n song_title: instant_product?.title || \"\",\n song_artist: instant_product?.artist_display_name || \"\",\n song_artist_id: instant_product?.artist?.id || \"\",\n };\n segmentData = {...baseSegmentData, ...instantProductData};\n }\n\n window.analytics?.track(\n \"Song Downloaded\",\n segmentData,\n getSegmentTrackingContextData(null, \"Song Downloaded\")\n );\n break;\n case \"SongPageListened\":\n segmentData = {\n email: e.detail.email,\n story_id: e.detail.story.story_id,\n story_slug: e.detail.story.slug,\n song_genre: e.detail.story.song.genre,\n song_title: e.detail.story.song.title,\n song_artist: e.detail.story.song.artist.fullName,\n song_artist_id: e.detail.story.song.artist.id\n };\n trackingContext = getSegmentTrackingContextData(null, \"Song Page Listened\");\n trackingContext.traits.email = e.detail.email; // using email from event to identify user\n window.analytics?.track(\n \"Song Page Listened\",\n segmentData,\n trackingContext\n );\n break;\n case \"SongPageVIPGiveaway\":\n segmentData = {\n email: e.detail.email,\n story_id: e.detail.story.story_id,\n story_slug: e.detail.story.slug,\n song_genre: e.detail.story.song.genre,\n song_title: e.detail.story.song.title,\n song_artist: e.detail.story.song.artist.fullName,\n song_artist_id: e.detail.story.song.artist.id\n };\n trackingContext = getSegmentTrackingContextData(null, \"Song Page VIP giveaway\");\n trackingContext.traits.email = e.detail.email;\n window.analytics?.track(\n \"Song Page VIP giveaway\",\n segmentData,\n trackingContext\n );\n break;\n case \"InstantSongPreviewLead\":\n segmentData = {\n email: e.detail.email,\n };\n trackingContext = getSegmentTrackingContextData(null, \"Instant Song Preview Lead\");\n trackingContext.traits.email = e.detail.email;\n window.analytics?.track(\n \"Instant Song Preview Lead\",\n segmentData,\n trackingContext\n );\n break;\n }\n});\n\ndocument.addEventListener(\"_sf_song_page_viewed\", (e) => {\n const story = e.detail.story;\n const baseSegmentData = {\n story_id: story.slug,\n song_genre: story.genre,\n core_product_type: story.song ? \"Song\" : \"InstantProduct\"\n };\n let segmentData;\n\n if (story.song) {\n const song = story.song;\n const songData = {\n song_title: song.title,\n song_artist: song.artist?.fullName || \"\",\n song_artist_id: song.artist?.id || \"\",\n song_link: song.audioUrl,\n is_gifter: story.is_owner\n };\n segmentData = {...baseSegmentData, ...songData};\n } else {\n const instant_product = story.instant_product;\n const instantProductData = {\n song_title: instant_product?.title || \"\",\n song_artist: instant_product?.artist_display_name || \"\",\n song_artist_id: instant_product?.artist?.id || \"\",\n song_link: instant_product?.audioUrl || \"\",\n is_gifter: story.is_owner\n };\n segmentData = {...baseSegmentData, ...instantProductData};\n }\n\n window.analytics?.track(\n \"Song Page Viewed\",\n segmentData,\n getSegmentTrackingContextData(null, \"Song Page Viewed\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_started\", (e) => {\n const song = e.detail.song;\n const player = e.detail.player;\n const segmentData = {\n story_id: song.slug,\n song_title: song.song_title,\n song_artist: song.name,\n song_artist_id: song.song_artist_id,\n song_genres: song.genres,\n song_occasions: song.occasions,\n song_duration: player.duration,\n song_duration_sec: player.maxRange,\n media_type: song.media_type,\n player_type: song.player_type,\n };\n window.analytics?.track(\n \"Song Started\",\n segmentData,\n getSegmentTrackingContextData(null, \"Song Started\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_listened\", (e) => {\n const song = e.detail.song;\n const player = e.detail.player;\n const segmentData = {\n story_id: song.slug,\n song_title: song.song_title,\n song_artist: song.name,\n song_artist_id: song.song_artist_id,\n song_genres: song.genres,\n song_occasions: song.occasions,\n song_duration: player.duration,\n song_duration_sec: player.maxRange,\n elapsed_time: player.currentTime,\n elapsed_time_sec: player.currentRange,\n elapsed_percentage: Math.min(\n Math.floor((player.currentRange / player.maxRange) * 100),\n 100\n ),\n media_type: song.media_type,\n player_type: song.player_type,\n };\n window.analytics?.track(\n \"Song Listened\",\n segmentData,\n getSegmentTrackingContextData(null, \"Song Listened\")\n );\n});\n\ndocument.addEventListener(\"_sf_checkout_sign_in_viewed\", () => {\n window.analytics?.track(\n \"Checkout Sign In Viewed\",\n {},\n getSegmentTrackingContextData(null, \"Checkout Sign In Viewed\")\n );\n});\n\ndocument.addEventListener(\"_sf_account_email_viewed\", () => {\n window.analytics?.track(\n \"Account Email Viewed\",\n {},\n getSegmentTrackingContextData(null, \"Account Email Viewed\")\n );\n});\n\n\ndocument.addEventListener(\"_sf_get_started_slide_viewed\", e => {\n window.analytics?.track(\n \"Get Started Mobile Slide Viewed\",\n e.detail,\n getSegmentTrackingContextData(null, \"Get Started Mobile Slide Viewed\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_info_viewed\", e => {\n window.analytics?.track(\n \"Song Information Viewed\",\n e.detail,\n getSegmentTrackingContextData(null, \"Song Info Viewed\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_shared\", e => {\n window.analytics?.track(\n \"Song Shared\",\n e.detail,\n getSegmentTrackingContextData(null, \"Song Shared\")\n );\n});\n\ndocument.addEventListener(\"_sf_email_triggered\", e => {\n window.analytics?.track(\n \"Email Triggered\",\n e.detail,\n getSegmentTrackingContextData(null, \"Email Triggered\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_conversion\", e => {\n window.analytics?.track(\n \"Song Conversion\",\n e.detail,\n getSegmentTrackingContextData(null, \"Song Conversion\")\n );\n});\n\ndocument.addEventListener(\"_sf_song_engage\", e => {\n window.analytics?.track(\n \"Song Engage\",\n e.detail,\n getSegmentTrackingContextData(null, \"Song Engage\")\n );\n});\n\ndocument.addEventListener(\"_sf_footer_conversion\", () => {\n window.analytics?.track(\n \"Footer Conversion\",\n {},\n getSegmentTrackingContextData(null, \"Footer Conversion\")\n );\n});\n\ndocument.addEventListener(\"_sf_segment_event\", e => {\n let baseProps = {};\n const generalProps = {timestamp: dateTimeInSeconds()};\n const quizProps = {\n quiz_name: SONG_BUILDER_QUIZ_NAME,\n quiz_version: SONG_BUILDER_QUIZ_NUMBER,\n };\n\n if (e?.detail?.props?.includeQuizInfo) {\n baseProps = {...generalProps, ...quizProps};\n delete e.detail.props.includeQuizInfo;\n }\n\n window.analytics?.track(\n e.detail.name,\n {...baseProps, ...e?.detail?.props},\n getSegmentTrackingContextData(null, e.detail.name)\n );\n});\n\n//Instant EVENTS\ndocument.addEventListener(\"_sf_ISBStepLoad\", e => {\n window.analytics?.track(\n \"ISBQuizQuestion\",\n {\n ...e.detail,\n template: vitamixCollectionTitle.value,\n affiliate: store.state.cart.cart.affiliate,\n timestamp: dateTimeInSeconds(),\n },\n getSegmentTrackingContextData(null, \"ISBQuizQuestion\")\n );\n});\n\ndocument.addEventListener(\"_sf_ISBPreviewLoad\", e => {\n window.analytics?.track(\n \"ISBSongPreview\",\n {\n ...e.detail,\n template: vitamixCollectionTitle.value,\n affiliate: store.state.cart.cart.affiliate,\n timestamp: dateTimeInSeconds(),\n },\n getSegmentTrackingContextData(null, \"ISBSongPreview\")\n );\n});\n\ndocument.addEventListener(\"_sf_ISBPreviousSongsLoad\", () => {\n window.analytics?.track(\n \"ISBPreviousSongs\",\n {\n template: vitamixCollectionTitle.value,\n affiliate: store.state.cart.cart.affiliate,\n timestamp: dateTimeInSeconds(),\n },\n getSegmentTrackingContextData(null, \"ISBPreviousSongs\")\n );\n});\n\ndocument.addEventListener(\"_sf_ISBQuizAnswerSelected\", e => {\n const data = e.detail;\n const isMultiple = data.isMultiple;\n const eventData = {\n question: e.detail.currentQuestion.question,\n type: isMultiple ? \"multi-select\" : \"select\",\n step: e.detail.step,\n template: vitamixCollectionTitle.value\n };\n if (isMultiple) eventData.answers = [];\n data.answers[data.questionId].forEach((answer, i) => {\n const indexKey = i ? (i + 1) : \"\";\n const selectedAnswer = answer || null;\n\n eventData[`answer${indexKey}`] = e.detail.currentQuestion.answers.find(el => el.answer_key === selectedAnswer)?.answer;\n eventData[`previous_answer${indexKey}`] = e.detail.currentQuestion.answers.find(el => el.answer_key === data.previousAnswers[i])?.answer || null;\n\n if (isMultiple) eventData.answers.push(answer);\n });\n\n window.analytics?.track(\n \"ISBQuizAnswerSelected\",\n eventData,\n getSegmentTrackingContextData(null, \"ISBQuizAnswerSelected\")\n );\n});\n\ndocument.addEventListener(\"_sf_ISBPreviewEvents\", e => {\n const eventData = {\n is_playing_preview: app.config.globalProperties.$sfPlayer.isPlaying,\n template: vitamixCollectionTitle.value,\n ...e.detail,\n timestamp: dateTimeInSeconds(),\n };\n const eventName = eventData.event;\n delete eventData.event;\n window.analytics?.track(\n eventName,\n eventData,\n getSegmentTrackingContextData(null, \"eventData\")\n );\n});\n\ndocument.addEventListener(\"_sf_ISBPreviousSongsClose\", () => {\n window.analytics?.track(\n \"ISBPreviousSongsBack\",\n {\n template: vitamixCollectionTitle.value,\n timestamp: dateTimeInSeconds(),\n is_playing_preview: app.config.globalProperties.$sfPlayer.isPlaying,\n },\n getSegmentTrackingContextData(null, \"ISBPreviousSongsBack\")\n );\n});\n\n\nexport const trackEvent: TrackEventHandler = (eventName, meta) => {\n window.analytics?.track(\n eventName,\n {\n ...meta,\n },\n getSegmentTrackingContextData(null)\n );\n};","\n\n\n \n \n\n \n \n \n\n \n \n \n\n \n\n \n \n \n \n \n \n
\n\n \n \n \n\n \n\n \n