refactor: Mashup sample code (#211)

src/index.ts

@@ -1,9 +1,9 @@
-import './components/hello-world/hello-world';
 import '@lion/ui/define/lion-button.js';
 import '@lion/ui/define/lion-textarea.js';
+
 import './samples/FullPortal/FullPortal';
 import './samples/SimplePortal/SimplePortal';
-import './samples/Mashup/MashupPortal';
+import './samples/Embedded';
 
 import { Router } from '@vaadin/router';
 
@@ -18,10 +18,10 @@ router.setRoutes([
       window.location.pathname = ctx.pathname;
     }
   },
-  { path: '/', component: 'mashup-portal-component' },
-  { path: '/index.html', component: 'mashup-portal-component' },
-  { path: '/embedded', component: 'mashup-portal-component' },
-  { path: '/embedded.html', component: 'mashup-portal-component' },
+  { path: '/', component: 'embedded-component' },
+  { path: '/index.html', component: 'embedded-component' },
+  { path: '/embedded', component: 'embedded-component' },
+  { path: '/embedded.html', component: 'embedded-component' },
   { path: '/portal', component: 'full-portal-component' },
   { path: '/portal.html', component: 'full-portal-component' },
   { path: '/fullportal', component: 'full-portal-component' },

src/samples/Embedded/EmbeddedResolutionScreen/embedded-resolution-sceen-styles.ts

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+
+export const embeddedResolutionScreenStyles = css`
+  .cc-resolution {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .cc-card {
+    display: flex;
+    flex-direction: column;
+    margin: 30px;
+    width: 50%;
+  }
+  .cc-header {
+    background-color: var(--app-primary-color);
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    padding: 30px;
+    color: white;
+    font-weight: bold;
+    font-size: 60px;
+  }
+
+  .cc-body {
+    font-size: 24px;
+    border: 1px solid var(--app-primary-color);
+    padding: 30px;
+  }
+
+  .cc-chat-image {
+    width: 700px;
+    border-radius: 10px;
+    margin: 30px;
+  }
+
+  .cc-chat-button {
+    color: white;
+    background-color: var(--app-secondary-color);
+    font-size: 25px;
+    font-weight: bold;
+    border-radius: 25px;
+    border: 0px;
+    margin: 20px;
+    padding: 10px 30px;
+  }
+`;

src/samples/Embedded/EmbeddedResolutionScreen/index.ts

@@ -0,0 +1,43 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { bootstrapCSSLink } from '../utils';
+
+import '@lion/ui/define/lion-button.js';
+import '@lion/ui/define/lion-textarea.js';
+
+// NOTE: you need to import ANY component you may render.
+
+// import the component's styles
+import { embeddedResolutionScreenStyles } from './embedded-resolution-sceen-styles';
+
+@customElement('embedded-resolution-screen-component')
+class EmbeddedResolutionScreen extends LitElement {
+  static styles?: CSSResultGroup = embeddedResolutionScreenStyles;
+
+  getResolutionScreenHtml(): any {
+    return html`
+      <div class="cc-resolution">
+        <div class="cc-card">
+          <div class="cc-header">Welcome!</div>
+          <div class="cc-body">
+            Thanks for selecting a package with us. <br /><br />
+            A technician will contact you with in the next couple of days to schedule an installation.<br /><br />
+            If you have any questions, you can contact us directly at <b>1-800-555-1234</b> or you can chat with us.
+          </div>
+        </div>
+        <div>
+          <img src="assets/img/cablechat.png" class="cc-chat-image" />
+          <button class="cc-chat-button">Chat Now</button>
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    const sContent = this.getResolutionScreenHtml();
+
+    return [bootstrapCSSLink, sContent];
+  }
+}
+
+export default EmbeddedResolutionScreen;

src/samples/Embedded/Header/header-styles.ts

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export const headerStyles = css`
+  .cc-toolbar {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 0px 20px;
+    width: 100%;
+    z-index: 5;
+    color: white;
+    background-color: var(--app-primary-color);
+
+    h1 {
+      font-size: 30px;
+    }
+  }
+
+  .cc-icon {
+    width: 40px;
+    margin-bottom: 10px;
+    filter: var(--app-white-color-filter);
+  }
+`;

src/samples/Embedded/Header/index.ts

@@ -0,0 +1,30 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { bootstrapCSSLink } from '../utils';
+
+// import the component's styles
+import { headerStyles } from './header-styles';
+
+@customElement('embedded-header-component')
+class Header extends LitElement {
+  static styles?: CSSResultGroup = headerStyles;
+
+  constructor() {
+    super();
+  }
+
+  getHeaderHTML() {
+    return html`<div class="cc-toolbar">
+      <h1>${PCore.getEnvironmentInfo().getApplicationLabel()}&nbsp;</h1>
+      <img src="./assets/img/antenna.svg" class="cc-icon" />
+    </div>`;
+  }
+
+  protected render(): unknown {
+    const sContent = this.getHeaderHTML();
+
+    return [bootstrapCSSLink, sContent];
+  }
+}
+
+export default Header;

src/samples/Embedded/MainScreen/index.ts

@@ -0,0 +1,155 @@
+import { CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { getSdkConfig } from '@pega/auth/lib/sdk-auth-manager';
+
+// NOTE: you need to import ANY component you may render.
+import '../ShoppingOptionsCard';
+import '../EmbeddedResolutionScreen';
+
+// import the component's styles
+import { mainScreenStyles } from './main-screen-styles';
+import { shoppingOptions } from '../utils';
+
+@customElement('embedded-main-screen-component')
+class MainScreen extends LitElement {
+  @property({ attribute: true, type: Object }) pConn;
+
+  static styles?: CSSResultGroup = mainScreenStyles;
+
+  @state()
+  showTriplePlayOptions = true;
+
+  @state()
+  showPega = false;
+
+  @state()
+  showResolution = false;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Called when the component is connected to the DOM.
+   */
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Subscribe to the EVENT_CANCEL event to handle the assignment cancellation
+    PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => this.cancelAssignment(), 'cancelAssignment');
+
+    // Subscribe to the 'assignmentFinished' event to handle assignment completion
+    PCore.getPubSubUtils().subscribe('assignmentFinished', () => this.assignmentFinished(), 'assignmentFinished');
+  }
+
+  /**
+   * Called when the component is disconnected from the DOM.
+   */
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    // unsubscribe to the events
+    PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, 'cancelAssignment');
+    PCore.getPubSubUtils().unsubscribe('assignmentFinished', 'assignmentFinished');
+  }
+
+  cancelAssignment() {
+    this.showTriplePlayOptions = true;
+    this.showPega = false;
+  }
+
+  assignmentFinished() {
+    this.showResolution = true;
+    this.showPega = false;
+  }
+
+  /**
+   * Handles the 'Shop Now' event by creating a new case using the mashup API.
+   *
+   * @param {Event} event - The event object triggered by the 'Shop Now' action.
+   */
+  async _onShopNow(event: CustomEvent) {
+    const sLevel = event.detail?.value;
+
+    // Update the UI state to show pega container
+    this.showTriplePlayOptions = false;
+    this.showPega = true;
+
+    // Get the SDK configuration
+    const sdkConfig = await getSdkConfig();
+    let mashupCaseType = sdkConfig.serverConfig.appMashupCaseType;
+
+    // If mashupCaseType is null or undefined, get the first case type from the environment info
+    if (!mashupCaseType) {
+      // @ts-ignore - Object is possibly 'null'
+      const caseTypes: any = PCore.getEnvironmentInfo().environmentInfoObject.pyCaseTypeList;
+      mashupCaseType = caseTypes[0].pyWorkTypeImplementationClassName;
+    }
+
+    // Create options object with default values
+    const options: any = {
+      pageName: 'pyEmbedAssignment',
+      startingFields: {}
+    };
+
+    // If mashupCaseType is 'DIXL-MediaCo-Work-NewService', add Package field to startingFields
+    if (mashupCaseType === 'DIXL-MediaCo-Work-NewService') {
+      options.startingFields.Package = sLevel;
+    }
+
+    // Create a new case using the mashup API
+    PCore.getMashupApi()
+      .createCase(mashupCaseType, PCore.getConstants().APP.ROOT, options)
+      .then(() => {
+        console.log('createCase rendering is complete');
+      });
+  }
+
+  getShoppingOptionCardsHTML() {
+    return shoppingOptions.map(
+      option => html`<shopping-options-card-component .option="${option}" @ShopNowButtonClick="${this._onShopNow}"></shopping-options-card-component>`
+    );
+  }
+
+  protected render() {
+    return html` <div class="cc-main-div">
+      ${this.showTriplePlayOptions
+        ? html`
+            <div class="cc-main-screen">
+              <div class="cc-banner">Combine TV, Internet, and Voice for the best deal</div>
+
+              <div style="display: flex; justify-content: space-evenly;">${this.getShoppingOptionCardsHTML()}</div>
+            </div>
+          `
+        : html``}
+      ${this.showPega
+        ? html`
+            <div>
+              <div class="cc-info">
+                <div class="cc-info-pega">
+                  <root-container .pConn="${this.pConn}" ?displayOnlyFA="${true}"></root-container>
+                  <br />
+                  <div style="padding-left: 50px;">* - required fields</div>
+                </div>
+                <div class="cc-info-banner">
+                  <div class="cc-info-banner-text">We need to gather a little information about you.</div>
+                  <div>
+                    <img src="assets/img/cableinfo.png" class="cc-info-image" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          `
+        : html``}
+      ${this.showResolution
+        ? html`
+            <div>
+              <embedded-resolution-screen-component></embedded-resolution-screen-component>
+            </div>
+          `
+        : html``}
+    </div>`;
+  }
+}
+
+export default MainScreen;

src/samples/Embedded/MainScreen/main-screen-styles.ts

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+
+export const mainScreenStyles = css`
+  .cc-banner {
+    font-size: 24px;
+    text-align: center;
+    width: 100%;
+    padding: 20px;
+  }
+
+  .cc-main-screen {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 100px);
+    position: relative;
+    width: 100%;
+  }
+
+  .cc-main-div {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .cc-work-button {
+    font-size: 22px;
+    color: var(--app-primary-color);
+    text-decoration: underline;
+    padding-top: 10px;
+  }
+
+  .cc-work-ready {
+    font-size: 22px;
+    padding: 20px 20px 0px 40px;
+  }
+
+  .cc-info {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .cc-info-pega {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cc-info-banner {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+  }
+
+  .cc-info-banner-text {
+    font-size: 30px;
+    line-height: 40px;
+    padding: 20px 20px;
+    color: darkslategray;
+  }
+
+  .cc-info-image {
+    width: 100%;
+    border-radius: 10px;
+  }
+`;