diff --git a/src/index.ts b/src/index.ts index 9ab6085..a4333c0 100644 --- a/src/index.ts +++ b/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' }, diff --git a/src/samples/Embedded/EmbeddedResolutionScreen/embedded-resolution-sceen-styles.ts b/src/samples/Embedded/EmbeddedResolutionScreen/embedded-resolution-sceen-styles.ts new file mode 100644 index 0000000..51fba18 --- /dev/null +++ b/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; + } +`; diff --git a/src/samples/Embedded/EmbeddedResolutionScreen/index.ts b/src/samples/Embedded/EmbeddedResolutionScreen/index.ts new file mode 100644 index 0000000..0bd3a1f --- /dev/null +++ b/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` +
+
+
Welcome!
+
+ Thanks for selecting a package with us.

+ A technician will contact you with in the next couple of days to schedule an installation.

+ If you have any questions, you can contact us directly at 1-800-555-1234 or you can chat with us. +
+
+
+ + +
+
+ `; + } + + render() { + const sContent = this.getResolutionScreenHtml(); + + return [bootstrapCSSLink, sContent]; + } +} + +export default EmbeddedResolutionScreen; diff --git a/src/samples/Embedded/Header/header-styles.ts b/src/samples/Embedded/Header/header-styles.ts new file mode 100644 index 0000000..1912eb1 --- /dev/null +++ b/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); + } +`; diff --git a/src/samples/Embedded/Header/index.ts b/src/samples/Embedded/Header/index.ts new file mode 100644 index 0000000..fdab429 --- /dev/null +++ b/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`
+

${PCore.getEnvironmentInfo().getApplicationLabel()} 

+ +
`; + } + + protected render(): unknown { + const sContent = this.getHeaderHTML(); + + return [bootstrapCSSLink, sContent]; + } +} + +export default Header; diff --git a/src/samples/Embedded/MainScreen/index.ts b/src/samples/Embedded/MainScreen/index.ts new file mode 100644 index 0000000..eecda3c --- /dev/null +++ b/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`` + ); + } + + protected render() { + return html`
+ ${this.showTriplePlayOptions + ? html` +
+
Combine TV, Internet, and Voice for the best deal
+ +
${this.getShoppingOptionCardsHTML()}
+
+ ` + : html``} + ${this.showPega + ? html` +
+
+
+ +
+
* - required fields
+
+
+
We need to gather a little information about you.
+
+ +
+
+
+
+ ` + : html``} + ${this.showResolution + ? html` +
+ +
+ ` + : html``} +
`; + } +} + +export default MainScreen; diff --git a/src/samples/Embedded/MainScreen/main-screen-styles.ts b/src/samples/Embedded/MainScreen/main-screen-styles.ts new file mode 100644 index 0000000..6ed1098 --- /dev/null +++ b/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; + } +`; diff --git a/src/samples/Embedded/ShoppingOptionsCard/index.ts b/src/samples/Embedded/ShoppingOptionsCard/index.ts new file mode 100644 index 0000000..b5ac45b --- /dev/null +++ b/src/samples/Embedded/ShoppingOptionsCard/index.ts @@ -0,0 +1,101 @@ +import { CSSResultGroup, html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { SdkConfigAccess } from '@pega/auth/lib/sdk-auth-manager'; + +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 as HTML with -`; diff --git a/src/samples/Mashup/MashupMain/index.ts b/src/samples/Mashup/MashupMain/index.ts deleted file mode 100644 index 8d86767..0000000 --- a/src/samples/Mashup/MashupMain/index.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { SdkConfigAccess } from '@pega/auth/lib/sdk-auth-manager'; - -import '@lion/ui/define/lion-button.js'; -import '@lion/ui/define/lion-textarea.js'; - -import '../MashupMainScreen'; -import { compareSdkPCoreVersions } from '../../../helpers/versionHelpers'; - -// NOTE: you need to import ANY component you may render. - -// import the component's styles as HTML with -`; diff --git a/src/samples/Mashup/MashupMainScreen/index.ts b/src/samples/Mashup/MashupMainScreen/index.ts deleted file mode 100644 index 5b952eb..0000000 --- a/src/samples/Mashup/MashupMainScreen/index.ts +++ /dev/null @@ -1,216 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import { getSdkConfig, SdkConfigAccess } from '@pega/auth/lib/sdk-auth-manager'; - -import '@lion/ui/define/lion-button.js'; -import '@lion/ui/define/lion-textarea.js'; - -import '../MashupBundleSwatch'; -import '../MashupResolutionScreen'; - -// NOTE: you need to import ANY component you may render. - -// import the component's styles as HTML with -`; diff --git a/src/samples/Mashup/MashupPortal/index.ts b/src/samples/Mashup/MashupPortal/index.ts deleted file mode 100644 index 8c645e4..0000000 --- a/src/samples/Mashup/MashupPortal/index.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { getSdkConfig, SdkConfigAccess, loginIfNecessary, sdkSetAuthHeader, sdkSetCustomTokenParamsCB } from '@pega/auth/lib/sdk-auth-manager'; -import { sampleMainInit } from '../../sampleCommon'; - -import '@lion/ui/define/lion-button.js'; -import '@lion/ui/define/lion-textarea.js'; - -import '../MashupMain'; - -// NOTE: you need to import ANY component you may render. - -// import the component's styles as HTML with -`; diff --git a/src/samples/Mashup/MashupResolutionScreen/index.ts b/src/samples/Mashup/MashupResolutionScreen/index.ts deleted file mode 100644 index 4a9fe1d..0000000 --- a/src/samples/Mashup/MashupResolutionScreen/index.ts +++ /dev/null @@ -1,64 +0,0 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { SdkConfigAccess } from '@pega/auth/lib/sdk-auth-manager'; - -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 as HTML with -`;