microsoft · laurent-mic · Jan 27, 2019 · Jan 27, 2019 · Jan 27, 2019 · Jan 27, 2019
diff --git a/demo/package.json b/demo/package.json
@@ -35,7 +35,7 @@
     "fetch": "^1.0.0",
     "http-server": "^0.10.0",
     "jquery": "^3.1.0",
-    "powerbi-client": "^2.6.6",
+    "powerbi-client": "^2.6.9",
     "syntaxhighlighter": "4.0.1"
   },
   "devDependencies": {}

diff --git a/demo/v2-demo/images/closeWhite.png b/demo/v2-demo/images/closeWhite.png
diff --git a/demo/v2-demo/images/insightToActionIcon.svg b/demo/v2-demo/images/insightToActionIcon.svg
diff --git a/demo/v2-demo/images/themesIcon.svg b/demo/v2-demo/images/themesIcon.svg
diff --git a/demo/v2-demo/index.html b/demo/v2-demo/index.html
@@ -70,6 +70,8 @@
 
     <script src="live_showcases/custom_layout/showcase_custom_layout.js"></script>
     <script src="live_showcases/bookmarks/showcase_bookmarks.js"></script>
+    <script src="live_showcases/themes/showcase_themes.js"></script>
+    <script src="live_showcases/insight_to_action/showcase_insight_to_action.js"></script>
 
 </body>
 </html>
diff --git a/demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.html b/demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.html
@@ -25,7 +25,7 @@ <h3>Capture & share bookmarks</h3>
 </div>
 
 <div id="showcaseContent">
-    <div id="bookmarksArea">
+    <div id="leftShowcaseWindow">
         <div class="editorTitle">Bookmarks</div>
         <div id="bookmarksWrapper">
             <div id="bookmarksList">

diff --git a/demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.js b/demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.js
@@ -28,7 +28,7 @@ function embedBookmarksReport() {
         // Get report Id from session
         var embedReportId = GetSession(SessionKeys.EmbedId);
 
-        // We give the user View permissions
+        // Use View permissions
         var permissions = models.Permissions.View;
 
         // Embed configuration used to describe the what and how to embed
@@ -85,7 +85,7 @@ function embedSharedBookmark(enableFilterPane, bookmarkState) {
         // Get report Id from session
         var embedReportId = GetSession(SessionKeys.EmbedId);
 
-        // We give the user View permissions
+        // Use View permissions
         var permissions = models.Permissions.View;
 
         // Get the bookmark name from url param
@@ -261,7 +261,7 @@ function getBookmarkByID(bookmarkId) {
 // Build bookmark radio button HTML element
 function buildBookmarkElement(bookmark) {
     var labelElement = document.createElement("label");
-    labelElement.setAttribute("class", "bookmarkContainer");
+    labelElement.setAttribute("class", "showcaseRadioContainer");
 
     var inputElement = document.createElement("input");
     inputElement.setAttribute("type", "radio");
@@ -271,7 +271,7 @@ function buildBookmarkElement(bookmark) {
     labelElement.appendChild(inputElement);
 
     var spanElement = document.createElement("span");
-    spanElement.setAttribute("class", "bookmarkCheckmark");
+    spanElement.setAttribute("class", "showcaseRadioCheckmark");
     labelElement.appendChild(spanElement);
 
     var secondSpanElement = document.createElement("span");

diff --git a/demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.html b/demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.html
@@ -20,9 +20,9 @@ <h3>Dynamic report layout</h3>
 </div>
 
 <div id="showcaseContent">
-    <div id="visualsArea">
+    <div id="leftShowcaseWindow">
         <div class="editorTitle">Report visuals (Hide/Show)</div>
-        <div id="visualsWrapper">
+        <div id="showcaseItemsWrapper">
             <div id="visualsList">
             </div>
         </div>

diff --git a/demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.js b/demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.js
@@ -37,7 +37,7 @@ function embedCustomLayoutReport() {
         // Get report Id from session
         var embedReportId = GetSession(SessionKeys.EmbedId);
 
-        // We give the user View permissions
+        // Use View permissions
         var permissions = models.Permissions.View;
 
         // Embed configuration used to describe the what and how to embed

diff --git a/demo/v2-demo/live_showcases/insight_to_action/showcase_insight_to_action.html b/demo/v2-demo/live_showcases/insight_to_action/showcase_insight_to_action.html
@@ -0,0 +1,115 @@
+<div id="startTooltip">
+    <div class="btnCloseTooltip" onclick="onTootipClicked('startTooltip');">
+        <img src="images\closeWhite.png"/>
+    </div>
+    <div class="showcaseTooltipText">Start a campaign with these customers</div>
+    <div class="showcaseTooltipSubText">Hover over the table, and click on the three dots icon '...' at the upper right corner.</div>
+    <div class="tooltipFooter">
+        <div class="btnShowcaseTooltip yellowBtn" onclick="onTootipClicked('startTooltip');">
+            Next
+        </div>
+        <div class="tooltipNumber">
+            1 of 2
+        </div>
+    </div>
+</div>
+
+<div id="showcases-text">
+    <h3>Insight to action</h3>
+    <br>
+    <div id="showcases-description">
+            This showcase demonstrates one example of how to leverage the <a href="https://go.microsoft.com/fwlink/?linkid=2063102">‘menu extensions’</a> and <a href="https://go.microsoft.com/fwlink/?linkid=2062683">‘export data’</a> APIs to give users the ability to take meaningful actions within seconds from analytics. The sample contains a basic customer relationship management module. The main table shows a list of customers who have not engaged with your service lately, and might not return. You can send these customers an offer to try and retain them.<br><br>
+        &nbsp;<b>1. Choose a list of customers</b><br>
+        <div class="text-tab">
+            The sales report shows a list of possible churning customers. Use the slicers to define the list of customers you want to engage with.<br><br>
+        </div>
+        &nbsp;<b>2. Take actions to get them engaged</b><br>
+        <div class="text-tab">
+            Follow the instructions on the tooltips to take actions straight from within the report.<br>
+        </div>
+    </div>
+    <div class="showcases-buttons">
+        <a class="selectButton floatButton" href="https://go.microsoft.com/fwlink/?linkid=2063102" target="_blank">Documentation</a>
+        <a class="selectButton floatButton" href="https://go.microsoft.com/fwlink/?linkid=2062950" target="_blank">Get Code</a>
+    </div>
+</div>
+
+<div id="showcaseContent">
+    <div id="insightToActionShowcaseEmbedArea">
+        <div class="editorTitle">Embedded view</div>
+        <div id="showcase-embedded-view">
+            <div id="embedContainer" class="iframeContainer active"></div>
+            <div id="dialogMask"></div>
+            <div id="distributionDialog" class="insightToActionDialog">
+                <div class="dialogHeader">
+                    <span class="dialogHeaderText">Campaign distribution list</span>
+                    <span id="btnCloseDistributionDialog" onclick="onCloseDialog('distributionDialog');">
+                        <img src="images\close.png"/>
+                    </span>
+                </div>
+                <div class="dialogBody">
+                    <div id="dialogTable"></div>
+                </div>
+                <div class="dialogFooter">
+                    <div class="insightToActionDialogBtn whiteBtn" onclick="onSendClicked('coupon');">
+                        Send coupon
+                    </div>
+                    <div class="insightToActionDialogBtn whiteBtn" onclick="onSendClicked('discount');">
+                        Send discount
+                    </div>
+                    <div class="insightToActionDialogBtn cancelBtn whiteBtn" onclick="onCloseDialog('distributionDialog');">
+                        Cancel
+                    </div>
+                </div>
+                <div id="dialogTooltip">
+                    <div class="btnCloseTooltip" onclick="onTootipClicked('dialogTooltip');">
+                        <img src="images\closeWhite.png"/>
+                    </div>
+                    <div class="showcaseTooltipText">Send offer</div>
+                    <div class="showcaseTooltipSubText">Choose the customers and send them an offering</div>
+                    <div class="tooltipFooter">
+                        <div class="btnShowcaseTooltip yellowBtn" onclick="onTootipClicked('dialogTooltip');">
+                            Got it
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="sendDialog" class="insightToActionDialog">
+                <div class="dialogHeader">
+                    <span class="dialogHeaderText"></span>
+                    <span id="btnCloseDistributionDialog" onclick="onCloseDialog('sendDialog');">
+                        <img src="images\close.png"/>
+                    </span>
+                </div>
+                <div class="dialogBody">
+                    <div class="sendDialogRow">
+                        <div class="sendDialogField">Title</div>
+                        <input type="text" id="title" name="title" value="Special offer just for you" />
+                    </div>
+                    <div class="sendDialogRow">
+                        <div class="sendDialogField">Body</div>
+                        <textarea name="messageBody"></textarea>
+                    </div>
+                </div>
+                <div class="dialogFooter">
+                    <div class="insightToActionDialogBtn cancelBtn whiteBtn" onclick="onCloseDialog('sendDialog');">
+                        Cancel
+                    </div>
+                    <div class="insightToActionDialogBtn sendBtn yellowBtn" onclick="onSendDialogSendClicked();">
+                        Send
+                    </div>
+                </div>
+            </div>
+            <div id="messageSent">Sent</div>
+        </div>
+    </div>
+</div>
+
+
+
+<script>
+    $(document).ready(function() {
+        embedInsightsToActionReport();
+        window.addEventListener("resize", setTooltipPosition);
+    });
+</script>