@flarehr/apollo-super-selection 3.17.52781 → 3.21.53721

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-item.js

@@ -0,0 +1,216 @@
+import { Component, Event, getAssetPath, h, Host, Prop } from '@stencil/core';
+import { EventTrackingService } from '../services/event-tracking.service';
+export class SuperChoiceItem {
+  constructor() {
+    this.eventTrackingService = EventTrackingService.Instance;
+  }
+  render() {
+    return (h(Host, { class: {
+        'd-flex p-3': true,
+        'ss-picked-fund': this.isSelected
+      } },
+      h("div", { class: "card-body pb-0 px-0 px-xl-3" },
+        this.isSelected && (h("div", { class: "px-3 py-2 text-white picked-block position-absolute" }, "You picked")),
+        h("div", { class: "d-flex flex-fill flex-column align-items-center" },
+          h("img", { class: "ss-choice-logo", alt: "Simple Financial Choices Pty Ltd", src: getAssetPath(`assets/${this.logo}`) }),
+          h("p", { class: "font-weight-bold text-center mt-3 mb-0" }, this.heading),
+          h("div", { class: "mt-3" }, JSON.parse(this.features).map((feature) => (h("p", { class: "text-center" }, feature.value)))))),
+      h("div", { class: "text-center" },
+        h("div", { class: "p-3" },
+          h("fl-button", { class: "uuid-button-continue", isBlockElement: true, onClick: () => this.handleFundClick() }, this.callToAction)),
+        h("a", { target: "_blank", href: this.pdsLink, onClick: () => this.pdsViewedAsync() }, "View PDS"))));
+  }
+  handleFundClick() {
+    return this.joinFundClicked.emit();
+  }
+  pdsViewedAsync() {
+    return this.eventTrackingService.TrackSuperFundPdsViewedAsync({
+      fundUsi: this.usi,
+      fundName: this.name,
+      fundNameAlt: this.heading,
+      pageName: 'Panel Fund Page'
+    });
+  }
+  static get is() { return "sss-super-choice-item"; }
+  static get originalStyleUrls() { return {
+    "$": ["super-choice-page.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["super-choice-page.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "isSelected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-selected",
+      "reflect": false
+    },
+    "usi": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "usi",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "logo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "logo",
+      "reflect": false
+    },
+    "pdsLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pds-link",
+      "reflect": false
+    },
+    "callToAction": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "call-to-action",
+      "reflect": false
+    },
+    "features": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "features",
+      "reflect": false
+    },
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "joinFundClicked",
+      "name": "joinFundClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-page.css

@@ -0,0 +1,53 @@
+html {
+  scroll-behavior: smooth;
+}
+
+img.fluid-fit {
+  object-fit: cover;
+}
+
+.checkbox-container {
+  border-radius: 4px;
+  background-color: #f5f4f2;
+}
+
+.confirm-checkbox-item {
+  transform: scale(1.7);
+}
+
+.simple-choices-text {
+  color: #489882;
+}
+
+.choice-card {
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+.choice-card.ss-picked-fund {
+  border: 2px solid var(--fl-color-primary);
+}
+
+.card.ss-picked-fund {
+  border: 2px solid var(--fl-color-primary);
+}
+
+.ss-choice-logo {
+  height: 70px;
+  width: 70px;
+  object-fit: contain;
+}
+
+img {
+  width: 100%;
+  display: block;
+}
+
+.choice-component {
+  width: 100%;
+  position: relative;
+}
+
+.flexible {
+  flex-grow: 1;
+}

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-page.js

@@ -0,0 +1,180 @@
+import { Component, h, Host, Prop, State } from '@stencil/core';
+import { isSome, none } from 'fp-ts/Option';
+import iframe from '../../../utils/iframe';
+import * as constants from '../funds/constants';
+import promotedFundState from '../funds/promoted-fund/promoted-fund.store';
+import { resetQSuperState } from '../funds/qsuper/helpers/resetState';
+import { EventTrackingService } from '../services/event-tracking.service';
+import navigationService from '../services/navigation.service';
+import chosenFundService from '../services/selected-super-choice-info.service';
+import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
+import SuperSelectionAppService from '../services/super-selection-app.service';
+export class SuperChoicePage {
+  constructor() {
+    this.promotedFunds = this.getPromotedFunds();
+    this.chosenFund = none;
+    this.eventTrackingService = EventTrackingService.Instance;
+    this.isPromotedFundSelected = (fundId) => {
+      return (isSome(this.chosenFund) &&
+        this.chosenFund.value.isPromoted &&
+        this.chosenFund.value.promotedId === fundId);
+    };
+  }
+  componentDidLoad() {
+    iframe.appReady();
+    const enabledFundIds = this.promotedFunds.map((item) => item.usi);
+    this.eventTrackingService.TrackSuperFundPanelViewedAsync({
+      enabledFundIds
+    });
+  }
+  async componentWillLoad() {
+    resetQSuperState();
+    this.chosenFund = await chosenFundService.GetChosenFundAsync();
+  }
+  render() {
+    const superChoiceParagraphOne = `Selecting the right super fund is very important. Simple Financial Choices have provided you with easy access to the below funds to make your choice an easy one, if you think that one of them might suit your needs.`;
+    const superChoiceParagraphTwo = `The content on this page and on the following pages relating to superannuation is provided by Simple Financial Choices (SFC), except for any content in relation to QSuper which is prepared, and provided to SFC, by QSuper Board ABN 32 125 059 006. The superannuation funds presented below are neither selected nor recommended by your employer nor by Flare HR.`;
+    const superChoiceParagraphThree = `Simple Financial Choices is not recommending these funds as being suitable for you because there are many super funds out there and you will need to choose what is best for you. If you are unsure, obtain your own advice. You should be aware that, if you do choose one of these funds, Flare and its associated entities will normally receive a fee for you doing so.`;
+    return (h(Host, null,
+      h("div", { class: "container mt-0 mb-0" },
+        h("div", { class: "row justify-content-center" },
+          h("div", { class: "col" },
+            h("p", { class: "mt-3 small text-center mb-1 text-dark" }, "Powered by"),
+            h("h5", { class: "font-weight-bold text-center mb-4" },
+              h("span", { class: "text-dark mr-1" }, "Simple Financial"),
+              h("span", { class: "simple-choices-text" }, "Choices")))),
+        h("div", { class: "row justify-content-center" },
+          h("div", { class: "col" },
+            h("p", { class: "text-center" }, superChoiceParagraphOne),
+            h("p", { class: "text-center small" }, superChoiceParagraphTwo),
+            h("p", { class: "text-center small" }, superChoiceParagraphThree))),
+        h("div", { class: "row" },
+          h("div", { class: "col" },
+            h("sss-notifications-section", null))),
+        h("div", { class: "row justify-content-center mt-4" },
+          h("div", { class: "col col-sm-10 col-md-8 col-xl-7" },
+            h("div", { class: "row" },
+              h("div", { class: "col" },
+                h("div", { class: "d-flex flex-fill" }, isSome(this.chosenFund) && !this.chosenFund.value.isPromoted && (h("sss-selected-super-choice-section", { fundType: this.chosenFund.value.type, fundName: this.chosenFund.value.name, class: "flex-fill position-relative" }))))),
+            h("div", { class: "row mt-3" }, this.promotedFunds.map((fund) => (h("div", { class: "col-12 col-lg-6 d-flex" },
+              h("sss-super-choice-item", { class: "card mb-3 mb-lg-0 mx-0 flex-grow-1", logo: fund.logo, isSelected: this.isPromotedFundSelected(fund.fundId), usi: fund.usi, name: fund.name, heading: fund.heading, pdsLink: navigationService.toExternalUrl(fund.pdsLink), features: JSON.stringify(fund.features), callToAction: fund.callToAction, onJoinFundClicked: async () => this.handleJoinSuperClickAsync(fund) }))))),
+            h("div", { class: "row mt-3" },
+              h("div", { class: "col" },
+                h("stencil-route-link", { url: SuperSelectionAppRoutes.MyOwnFund },
+                  h("fl-button", { isBlockElement: true, variant: "secondary" }, "I prefer to select another fund")))))))));
+  }
+  allFunds() {
+    return [
+      {
+        fundId: constants.SlateFundId,
+        usi: constants.SlateFundUsi,
+        name: constants.SlateFundName,
+        heading: constants.SlateAltFundName,
+        logo: 'logo-slate.png',
+        route: SuperSelectionAppRoutes.SlateJoin,
+        callToAction: 'Join Slate Super',
+        pdsLink: 'https://slatesuper.com.au/pds/?utm_source=flare&utm_medium=superselection',
+        features: [
+          { order: 1, value: 'Personalised lifestages investment strategy that evolves with you' },
+          { order: 2, value: 'Advanced mobile app with retirement forecast and smart features' },
+          { order: 3, value: 'Your own personal concierge at Slate to assist with your account' }
+        ]
+      },
+      {
+        fundId: constants.QSuperFundId,
+        usi: constants.QSuperFundUsi,
+        name: constants.QSuperFundName,
+        heading: constants.QSuperAltFundName,
+        logo: 'logo-qsuper-square.png',
+        route: SuperSelectionAppRoutes.QSuperOptIn,
+        callToAction: 'Join QSuper',
+        pdsLink: 'https://qsuper.qld.gov.au/calculators-and-forms/publications/product-disclosure-statements',
+        features: [
+          { order: 1, value: '100 years strong' },
+          { order: 2, value: `One of Australia's largest funds` },
+          { order: 3, value: 'Awarded SuperRatings highest performance rating' }
+        ]
+      },
+      {
+        fundId: constants.AustralianRetirementTrustFundId,
+        usi: constants.AustralianRetirementTrustFundUsi,
+        name: constants.AustralianRetirementTrustFundName,
+        heading: constants.AustralianRetirementTrustAltFundName,
+        logo: 'logo-qsuper-square.png',
+        route: SuperSelectionAppRoutes.PromotedFundJoin,
+        callToAction: 'Join AustralianRetirementTrust',
+        pdsLink: 'https://google.com',
+        features: []
+      }
+    ];
+  }
+  getPromotedFunds() {
+    const fundTiles = [];
+    SuperSelectionAppService.promotedFunds.forEach((fundId) => {
+      const fund = this.allFunds().find((fund) => fundId == fund.fundId);
+      if (fund !== undefined) {
+        fundTiles.push(fund);
+      }
+    });
+    return fundTiles;
+  }
+  async handleJoinSuperClickAsync(fund) {
+    if (fund.fundId === constants.SlateFundId) {
+      await this.eventTrackingService.TrackPromotedSuperFundDetailViewedAsync({
+        fundUsi: constants.SlateFundUsi,
+        fundName: constants.SlateFundName,
+        fundNameAlt: constants.SlateAltFundName
+      });
+    }
+    else if (fund.fundId === constants.QSuperFundId) {
+      await this.eventTrackingService.TrackPromotedSuperFundDetailViewedAsync({
+        fundUsi: constants.QSuperFundUsi,
+        fundName: constants.QSuperFundName,
+        fundNameAlt: constants.QSuperAltFundName
+      });
+    }
+    else if (fund.fundId === constants.AustralianRetirementTrustFundId) {
+      await this.eventTrackingService.TrackPromotedSuperFundDetailViewedAsync({
+        fundUsi: constants.AustralianRetirementTrustFundUsi,
+        fundName: constants.AustralianRetirementTrustFundName,
+        fundNameAlt: constants.AustralianRetirementTrustAltFundName
+      });
+      promotedFundState.fundId = fund.fundId;
+    }
+    return navigationService.navigateInternally(this.history, fund.route);
+  }
+  static get is() { return "sss-super-choice-page"; }
+  static get originalStyleUrls() { return {
+    "$": ["super-choice-page.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["super-choice-page.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "promotedFunds": {},
+    "chosenFund": {}
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/super-selection-app.css

@@ -0,0 +1,15 @@
+html {
+  scroll-behavior: smooth;
+}
+
+img.fluid-fit {
+  object-fit: cover;
+}
+
+stencil-route {
+  display: flex;
+  flex: 1 1 auto;
+}
+stencil-route:empty {
+  display: none;
+}

package/dist/lib/collection/components/super-selection-app/super-selection-app.js

@@ -0,0 +1,229 @@
+import '@flarehr/beacon';
+import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
+import * as O from 'fp-ts/lib/Option';
+import { resetQSuperState } from './funds/qsuper/helpers/resetState';
+import { superSelectionAppStencilRoutes } from './services/super-selection-app.routes';
+import superSelectionAppService from './services/super-selection-app.service';
+export class SuperSelectionApp {
+  constructor() {
+    this.isAppInitialised = false;
+  }
+  async componentWillLoad() {
+    const jwt = O.fromNullable(this.accessToken);
+    if (O.isNone(jwt)) {
+      throw Error(`jwt property is missing.`);
+    }
+    superSelectionAppService.state.jwt = jwt;
+    const apiBaseUrl = O.fromNullable(this.backendUrl);
+    if (O.isNone(apiBaseUrl)) {
+      throw Error(`apiBaseUrl property is missing.`);
+    }
+    superSelectionAppService.state.apiBaseUrl = O.some(apiBaseUrl.value.replace(/\/$/, '') + '/');
+    const appBaseUrl = O.fromNullable(this.appBaseUrl);
+    if (O.isNone(appBaseUrl)) {
+      throw Error(`appBaseUrl property is missing.`);
+    }
+    superSelectionAppService.state.appBaseUrl = O.some(appBaseUrl.value.replace(/\/$/, ''));
+    superSelectionAppService.onChange('hasSuccessPageBeenAcknowledged', (_) => this.successPageAcknowledged.emit());
+    superSelectionAppService.onChange('hasSuperSelectionBeenSubmitted', (submitted) => {
+      if (!submitted)
+        return;
+      this.stepSubmitSuccess.emit();
+      superSelectionAppService.state.hasSuperSelectionBeenSubmitted = false;
+    });
+  }
+  async componentDidLoad() {
+    resetQSuperState();
+    await superSelectionAppService.loadAppStateAsync();
+    this.isAppInitialised = true;
+    this.initialised.emit({
+      accountIdOrDefault: superSelectionAppService.accountIdOrDefault,
+      partnerIdOrDefault: superSelectionAppService.partnerIdOrDefault,
+      profileId: superSelectionAppService.profileId
+    });
+  }
+  authTokenChanged(newValue) {
+    superSelectionAppService.state.jwt = O.fromNullable(newValue);
+  }
+  onRouteChange() {
+    window === null || window === void 0 ? void 0 : window.scroll(0, 0);
+  }
+  render() {
+    return (h(Host, { class: "d-flex justify-content-center flex-grow-1" },
+      h("div", { class: "d-flex flex-column justify-content-between" }, this.renderAppContent())));
+  }
+  routerBaseUrl() {
+    var _a;
+    return ((_a = this.appBaseUrl) === null || _a === void 0 ? void 0 : _a.replace(/\/$/, '')) + '/';
+  }
+  renderAppContent() {
+    return (h("stencil-router", { root: this.routerBaseUrl() },
+      h("stencil-route-switch", { scrollTopOffset: 0 },
+        h("div", { class: "d-flex flex-column" },
+          h("div", { class: "d-flex justify-content-center" }, this.isAppInitialised ? (superSelectionAppStencilRoutes) : (h("fl-loading-indicator", { class: "mt-5" }))),
+          h("div", { class: "d-flex justify-content-center" },
+            h("sss-footer-section", null))))));
+  }
+  static get is() { return "super-selection-app"; }
+  static get originalStyleUrls() { return {
+    "$": ["super-selection-app.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["super-selection-app.css"]
+  }; }
+  static get properties() { return {
+    "accessToken": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "access-token",
+      "reflect": false
+    },
+    "backendUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "backend-url",
+      "reflect": false
+    },
+    "appBaseUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "app-base-url",
+      "reflect": false
+    },
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "location": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "LocationSegments",
+        "resolved": "LocationSegments | undefined",
+        "references": {
+          "LocationSegments": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "isAppInitialised": {}
+  }; }
+  static get events() { return [{
+      "method": "stepSubmitSuccess",
+      "name": "step-completion",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "successPageAcknowledged",
+      "name": "successPageAcknowledged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "initialised",
+      "name": "initialised",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "InitialisedWith",
+        "resolved": "{ accountIdOrDefault: string; partnerIdOrDefault: string; profileId: string; }",
+        "references": {
+          "InitialisedWith": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "accessToken",
+      "methodName": "authTokenChanged"
+    }, {
+      "propName": "location",
+      "methodName": "onRouteChange"
+    }]; }
+}
+injectHistory(SuperSelectionApp);