https://support.rowriter.com/App/Components/Onboarding/onboardingC…?dd1297947f3e89f09e8aaf8e6fbeb008

1/// <reference path="luzmoTypes.js" />
2
3app.controller("onboardingController", [
4  "$scope",
5  "$rootScope",
6  "$http",
7  "$timeout",
8  "$state",
9  "onboardingService",
10  function ($scope, $rootScope, $http, $timeout, $state, onboardingService) {
11    $scope.isAuthenticated = $rootScope.UserInfo.isAuthenticated;
12    $scope.hasAssignedTasks = $rootScope.UserInfo.hasAssignedTasks || false;
13    $scope.useUnifiedApp = false;
14    $scope.showTaskCompleteModal = false;
15    $scope.pendingTaskData = null;
16    $scope.taskCompleting = false;
17    $scope.taskCompleteError = null;
18
19    if (!$scope.isAuthenticated) {
20      $state.go("basic.login.user"); // Redirect to login
21    }
22
23    // Load onboarding data if user is authenticated and user has assigned tasks
24    if ($scope.isAuthenticated && $scope.hasAssignedTasks) {
25      onboardingService.getUnifiedAppFlag().then(function (useUnifiedApp) {
26        $scope.useUnifiedApp = useUnifiedApp;
27
28        onboardingService.getAPIv2AuthToken(function (tokenResponse) {
29          $scope.APIv2AuthToken = tokenResponse;
30
31          if (useUnifiedApp) {
32            window.TSOnboarding = {
33              apiToken: tokenResponse.access_token,
34              refreshToken: tokenResponse.refresh_token,
35            };
36            var hubHost = $rootScope.settings.Pod === "dev"
37              ? "https://hub.dev.teamsupport.com"
38              : "https://hub.teamsupport.com";
39            var script = document.createElement("script");
40            script.src = hubHost + "/onboarding/loader.js";
41            document.body.appendChild(script);
42          } else {
43            onboardingService.getEmbedToken(
44              tokenResponse.access_token,
45              function (embedToken) {
46                $scope.EmbedToken = embedToken;
47
48                // Need to render the web component first, then attach event listener
49                $timeout(function () {
50                  const dashboard = getDashboardElement();
51                  if (dashboard && !dashboard._listenerAttached) {
52                    dashboard._listenerAttached = true; // Prevent duplicate listeners
53
54                    dashboard.addEventListener(
55                      "customEvent",
56                      /**
57                       * @param {CustomEvent<LuzmoCustomEventDetail>} event - The custom event from the Luzmo dashboard
58                       */
59                      function HandleCustomEvent(event) {
60                        $scope.$apply(function () {
61                          if (
62                            event.detail.data.data.event === "mark_task_complete"
63                          ) {
64                            // Store the task data and show confirmation modal
65                            $scope.pendingTaskData =
66                              event.detail.data.data.extraData;
67                            $scope.showTaskCompleteModal = true;
68                          }
69                        });
70                      }
71                    );
72                  }
73                }, 100);
74              }
75            );
76          }
77        });
78      });
79    }
80
81    $scope.confirmTaskComplete = function () {
82      if ($scope.pendingTaskData) {
83        $scope.taskCompleting = true;
84        $scope.taskCompleteError = null;
85
86        // Ensure token is valid before marking task complete
87        onboardingService
88          .ensureValidToken()
89          .then(function (token) {
90            $scope.APIv2AuthToken = token;
91            onboardingService.markTaskComplete(
92              $scope.pendingTaskData,
93              token.access_token,
94              function (response) {
95                $scope.taskCompleting = false;
96                $scope.showTaskCompleteModal = false;
97                $scope.pendingTaskData = null;
98
99                const dashboardEl = getDashboardElement();
100                if (
101                  dashboardEl &&
102                  typeof dashboardEl.refreshData === "function"
103                ) {
104                  dashboardEl.refreshData();
105                }
106              },
107              function (error) {
108                console.error("Failed to mark task complete:", error);
109                $scope.taskCompleting = false;

110                $scope.taskCompleteError =
111                  "Failed to mark task as complete. Please try again.";
112              }
113            );
114          })
115          .catch(function (error) {
116            console.error("Failed to refresh token:", error);
117            $scope.taskCompleting = false;
118            $scope.taskCompleteError =
119              "Authentication failed. Please refresh the page and try again.";
120          });
121      }
122    };
123
124    $scope.cancelTaskComplete = function () {
125      $scope.showTaskCompleteModal = false;
126      $scope.pendingTaskData = null;
127      $scope.taskCompleteError = null;
128      $scope.taskCompleting = false;
129    };
130  },
131]);
132
133function getDashboardElement() {
134  return document.querySelector("luzmo-embed-dashboard");
135}