Add openOst method to MasStudio and update quick action card to open …

…Offer Selector Tool; enhance style with transition effect

studio/src/studio.js

@@ -9,6 +9,10 @@ import './mas-surface-picker.js';
 import { contentIcon } from './img/content-icon.js';
 import { promosIcon } from './img/promos-icon.js';
 import { ostIcon } from './img/ost-icon.js';
+import {
+    openOfferSelectorTool,
+    closeOfferSelectorTool,
+} from './rte/ost.js';
 
 const EVENT_LOAD_START = 'load-start';
 const EVENT_LOAD_END = 'load-end';
@@ -345,6 +349,10 @@ class MasStudio extends LitElement {
         this.requestUpdate();
     }
 
+    openOst() {
+        openOfferSelectorTool();
+    }
+
     renderSplashScreen() {
         return html`
             <div id="splash-container">
@@ -369,7 +377,7 @@ class MasStudio extends LitElement {
                         </div>
                         <div
                             class="quick-action-card"
-                            @click=${this.viewPromotions}
+                            @click=${this.openOst}
                         >
                             <div slot="cover-photo">${ostIcon}</div>
                             <div slot="heading">Open Offer Selector Tool</div>

studio/style.css

@@ -155,6 +155,7 @@ sp-underlay + sp-dialog {
     overflow-y: auto;
     box-sizing: border-box;
     box-shadow: 0px 1px 4px 4px rgb(0 0 0 / 10%);
+    transition: right 0.3s ease-in-out;
 }
 
 #actions {