{"version":3,"file":"connection-steps.81ae9ad1.js","sources":["../../src/components/connection-steps.ts"],"sourcesContent":["import { defineComponent } from \"vue\";\r\nimport common from \"../core/core\";\r\n\r\nimport anime from \"animejs\";\r\nimport ScrollMagic from \"scrollmagic\";\r\nimport * as Sentry from \"@sentry/vue\";\r\n\r\nexport default defineComponent({\r\n  components: {},\r\n  data() {\r\n    return {\r\n      addressService: this.$store.direct.getters.addressService,\r\n      ready: false,\r\n      connectStepCitySelectOpened: false,\r\n      connectionStepsTimeline: null,\r\n      tariffsService: this.$store.direct.getters.tariffsService,\r\n      scene: null,\r\n    };\r\n  },\r\n  mounted() {\r\n    this.onReady();\r\n    const w: any = window as any;\r\n    w[\"page\"] = this;\r\n    this.$store.direct.getters.holidaysService.getHolidays();\r\n\r\n    this.AppService.phoneBlockSubject.subscribe(async (data) => {\r\n      // Connection steps - click on submit phone block form\r\n      const containerConnectionPhone = document.querySelector(\".connection-steps #phone-block-\" + data.id);\r\n      if (containerConnectionPhone) {\r\n        const tariff = this.$store.direct.getters.tariffsService.getTariff();\r\n        const address = this.$store.direct.getters.addressService.address; // TODO access via getter\r\n        const hasCoverage = await this.$store.direct.getters.coverageService.getHasCoverage();\r\n        const hasPlannedCoverage = await this.$store.direct.getters.coverageService.getHasPlannedCoverage();\r\n        const clientCenterOpen = await this.$store.direct.getters.holidaysService.isClientCenterOpen();\r\n        const token = await this.$store.direct.getters.recaptchaService.getToken(\"order\");\r\n        const phoneNumber = data.code + data.number;\r\n        // Prepare the request\r\n        const reqBuilder = this.$store.direct.getters.createWebOrderRequestBuilderFactory.create();\r\n        reqBuilder.setAddress(address);\r\n        reqBuilder.setPhone(phoneNumber);\r\n        reqBuilder.setTariff(tariff);\r\n        reqBuilder.setHasCoverage(hasCoverage);\r\n        reqBuilder.setHasPlannedCoverage(hasPlannedCoverage);\r\n        reqBuilder.setRecaptcha(token);\r\n        // Fire\r\n        let webApiResponse = null;\r\n        try {\r\n          webApiResponse = await this.$store.direct.getters.webApiService.createWebOrder(await reqBuilder.getRequest());\r\n          this.phoneBlockLoading = false;\r\n          this.AppService.openPopup(\"form_success\", {\r\n            hasPlannedCoverage: hasPlannedCoverage,\r\n            clientCenterOpen: clientCenterOpen,\r\n          });\r\n        } catch (error) {\r\n          this.phoneBlockLoading = false;\r\n          this.AppService.openPopup(\"form_error\", {\r\n            hasPlannedCoverage: hasPlannedCoverage,\r\n          });\r\n          Sentry.captureException(error);\r\n        }\r\n        // Track\r\n\r\n        const trackingPayload = {\r\n          web_order_uuid: webApiResponse?.uuid ?? null,\r\n          url: window.location.pathname,\r\n          city: address?.mesto,\r\n          technology: tariff?.param_pvr, // 5e / wifi / gpon / bytovky / sim\r\n          has_coverage: hasCoverage,\r\n          phone_number: phoneNumber,\r\n        };\r\n\r\n        await Promise.all([\r\n          this.$store.direct.getters.gtmService.trackOncePerSession(\"phone_submit_connection_steps\", trackingPayload),\r\n          this.$store.direct.getters.exponeaService.trackOncePerSession(\r\n            \"phone_submit_connection_steps\",\r\n            trackingPayload\r\n          ),\r\n        ]);\r\n      }\r\n    });\r\n  },\r\n  computed: {},\r\n  methods: {\r\n    animateConnectionStep() {\r\n      if (this.connectionStepsTimeline) {\r\n        this.connectionStepsTimeline.pause();\r\n      }\r\n      const timeline = anime.timeline({\r\n        easing: \"easeOutQuad\",\r\n      });\r\n      const svgContainer = (this.$refs[\"svg-container\"] as HTMLElement)?.classList?.contains(\"type-gpon\")\r\n        ? \"gpon\"\r\n        : \"5e\";\r\n      switch (svgContainer) {\r\n        case \"gpon\":\r\n          timeline.add(\r\n            {\r\n              targets: \"#connection-step-gpon #main_line_1, #connection-step-gpon #main_line_2\",\r\n              strokeDashoffset: [anime.setDashoffset, 0],\r\n              duration: 500,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            0\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connection-step-gpon #main_spark\",\r\n              r: [0, 60],\r\n              duration: 250,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            500\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connection-step-gpon #line_1, #connection-step-gpon #line_2\",\r\n              strokeDashoffset: [anime.setDashoffset, 0],\r\n              duration: 500,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            500\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connection-step-gpon #light\",\r\n              opacity: [0, 1],\r\n              duration: 250,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            1000\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connection-step-gpon #spark\",\r\n              r: [0, 29],\r\n              duration: 250,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            1000\r\n          );\r\n          break;\r\n        case \"5e\":\r\n          timeline.add(\r\n            {\r\n              targets: \"#connectionStep_mainSpark\",\r\n              r: [25, 50],\r\n              duration: 500,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            0\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connectionStep_line\",\r\n              strokeDashoffset: [anime.setDashoffset, 0],\r\n              duration: 500,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            0\r\n          );\r\n          timeline.add(\r\n            {\r\n              targets: \"#connectionStep_routerSpark\",\r\n              r: [0, 12],\r\n              duration: 250,\r\n              easing: \"easeInOutQuad\",\r\n            },\r\n            500\r\n          );\r\n          break;\r\n      }\r\n\r\n      this.connectionStepsTimeline = timeline;\r\n    },\r\n    onReady() {\r\n      // Запускаем анимацию главного баннера\r\n      this.initInteractionScroll();\r\n    },\r\n    initInteractionScroll() {\r\n      const controller = new ScrollMagic.Controller();\r\n      new ScrollMagic.Scene({ triggerElement: \".connection-step-svg\", duration: \"100%\" })\r\n        .on(\"enter\", () => {\r\n          this.animateConnectionStep();\r\n        })\r\n        .addTo(controller);\r\n\r\n      this.scene = new ScrollMagic.Scene({\r\n        triggerHook: \"onLeave\",\r\n        offset: -150,\r\n        triggerElement: \".connection-step__image-container\",\r\n        duration: 0,\r\n      })\r\n        .setPin(\".connection-steps .right-side\")\r\n        .addTo(controller);\r\n      this.render();\r\n    },\r\n    render() {\r\n      const imageHeight = (document.querySelector(\".connection-steps .right-side\") as HTMLElement).offsetHeight;\r\n      let height = (document.querySelector(\".connection-steps .left-side\") as HTMLElement).offsetHeight - imageHeight;\r\n      if (height < 0) {\r\n        height = 0;\r\n      }\r\n      if (this.scene) {\r\n        this.scene.duration(height);\r\n      }\r\n      window.requestAnimationFrame(this.render);\r\n    },\r\n  },\r\n  mixins: [common],\r\n});\r\n"],"names":["connectionSteps","defineComponent","w","data","tariff","address","hasCoverage","hasPlannedCoverage","clientCenterOpen","token","phoneNumber","reqBuilder","webApiResponse","error","Sentry.captureException","trackingPayload","_a","timeline","anime","_b","controller","ScrollMagic","imageHeight","height","common"],"mappings":"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"}