@flarehr/apollo-super-selection 3.52.60060 → 3.55.61713

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

@@ -0,0 +1,136 @@
+import { Component, h, Prop, State } from '@stencil/core';
+import { isSome } from 'fp-ts/Option';
+import { getFundNameById, getLogoSrc } from '../funds/constants';
+import { EventTrackingService } from '../services/event-tracking.service';
+import existingFundService from '../services/existing-super-choice-info.service';
+import { FeatureFlagService } from '../services/feature-flag.service';
+import navigationService from '../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
+import superSelectionAppService from '../services/super-selection-app.service';
+export class ExistingChoice {
+  constructor() {
+    this.eventTrackingService = EventTrackingService.Instance;
+    this.createSuperFundNominationDetail = (fund) => {
+      function toUndefined(opt) {
+        return isSome(opt) ? opt.value : undefined;
+      }
+      function getUsi(fund) {
+        return 'usi' in fund ? toUndefined(fund.usi) : undefined;
+      }
+      function getMemberNumber(fund) {
+        return 'memberNumber' in fund ? toUndefined(fund.memberNumber) : undefined;
+      }
+      return {
+        fundType: fund.type.toString(),
+        fundName: fund.name,
+        fundUsi: getUsi(fund),
+        memberNumber: getMemberNumber(fund),
+        fundStatus: fund.valid.toString(),
+        lastNominatedAt: isSome(fund.lastNominatedAt) ? fund.lastNominatedAt.value.toISOString() : ''
+      };
+    };
+  }
+  componentDidLoad() {
+    const detail = this.createSuperFundNominationDetail(this.existingFund);
+    return this.eventTrackingService.TrackSuperFundNominationViewedAsync(detail);
+  }
+  async componentWillLoad() {
+    const chosenFundOption = await existingFundService.GetExistingFundAsync();
+    if (isSome(chosenFundOption) && chosenFundOption.value.valid !== 'Inactive') {
+      this.existingFund = chosenFundOption.value;
+    }
+    else {
+      navigationService.navigateInternally(this.history, FeatureFlagService.isNewComplianceEnabled()
+        ? SuperSelectionAppRoutes.ConsentPage
+        : SuperSelectionAppRoutes.ChoicePage);
+    }
+  }
+  render() {
+    const PromotedFundView = (props) => {
+      return (h("div", { class: "flex justify-center mt-6" },
+        h("img", { class: "h-16 w-auto", alt: getFundNameById(props.id), src: getLogoSrc(props.id) })));
+    };
+    const MyOwnFundView = () => {
+      return (h("div", { class: "flex h-20 justify-center items-center relative" },
+        h("div", { class: "h-20 w-20 rounded-full bg-primary-base opacity-10" }),
+        h("div", { class: "h-8 w-8 absolute " },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", class: "fill-primary-base" },
+            h("path", { d: "M196.6 97.83C184.1 93.41 177.6 79.7 182 67.2C195.8 28.08 233.1 0 277.1 0C320.1 0 358.3 28.08 372.1 67.2C376.5 79.7 369.1 93.41 357.5 97.83C344.1 102.2 331.3 95.7 326.9 83.2C319.6 62.66 300 48 277.1 48C254.1 48 234.5 62.66 227.3 83.2C222.8 95.7 209.1 102.2 196.6 97.83H196.6zM400 264C400 250.7 410.7 240 424 240C437.3 240 448 250.7 448 264C448 277.3 437.3 288 424 288C410.7 288 400 277.3 400 264zM224 128H376.4C394 108.4 419.6 96 448 96H465.3C480.9 96 492.3 110.7 488.5 125.8L480 159.1C501.1 176.5 519.6 198.5 530.7 224H544C561.7 224 576 238.3 576 256V352C576 369.7 561.7 384 544 384H512C499.1 401.2 482.7 415.8 464 426.6V464C464 490.5 442.5 512 416 512H368C341.5 512 320 490.5 320 464V448H272V464C272 490.5 250.5 512 224 512H176C149.5 512 128 490.5 128 464V416C90.98 388.2 66.42 344.7 64.17 295.4C27.99 290.9 0 259.1 0 222.6C0 194.7 15.72 169.3 40.6 156.9L45.27 154.5C57.12 148.6 71.54 153.4 77.47 165.3C83.39 177.1 78.59 191.5 66.73 197.5L62.06 199.8C53.44 204.1 48 212.9 48 222.6C48 235.1 57.13 245.6 69.13 247.6C87.02 178.8 149.6 128 224 128V128zM224 176C162.1 176 112 226.1 112 288C112 324.6 129.5 357.1 156.8 377.6C168.9 386.7 176 400.9 176 416V464H224V448C224 421.5 245.5 400 272 400H320C346.5 400 368 421.5 368 448V464H416V426.6C416 409.5 425.1 393.6 439.1 385C453.1 377.5 464.6 367.3 473.6 355.2C482.7 343.1 496.9 336 512 336H528V271.9C510 270.9 493.1 259.9 486.7 243.2C478.9 225.4 466.6 209.1 451.2 198.4C435.7 186.8 428.8 167.1 433.4 148.3L434 146.1C425.5 148.6 418 153.5 412.2 160C403.1 170.2 390.1 176 376.4 176H224z" })))));
+    };
+    const SelfManagedFundView = () => {
+      return (h("div", { class: "flex h-20 justify-center items-center relative" },
+        h("div", { class: "h-20 w-20 rounded-full bg-primary-base opacity-10" }),
+        h("div", { class: "h-8 w-8 absolute " },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", class: "fill-primary-base" },
+            h("path", { d: "M250.8 192h13.25v40C264 245.2 274.8 256 288 256s24.02-10.8 24.02-23.1V192h13.25c85.39 0 154.8-75.38 154.8-168c0-13.25-10.75-24-24-24H418.8c-55.26 0-103.4 31.75-130.8 79C260.7 31.75 212.5 0 157.3 0H120C106.8 0 96.01 10.75 96.01 23.1C96.01 116.6 165.4 192 250.8 192zM418.8 48h11.13c-9.876 54.75-53.01 96-104.5 96h-11.13C324.2 89.25 367.3 48 418.8 48zM157.3 48c51.51 0 94.64 41.25 104.5 96H250.7c-51.51 0-94.64-41.25-104.5-96H157.3zM551.1 312c-31.13-26.38-69.26-16.12-88.39-1.75l-60.38 45.5h-3.375c-.1251-38-30.5-67.88-69.13-67.88H186.7c-28.38 0-56.38 9.375-78.51 26.37L79.76 336H24C10.8 336 0 346.8 0 359.1S10.8 384 24 384l72-.0244l41.26-31.48C151.3 341.8 168.8 336 186.8 336h144c27.88 0 29 40.25-1.125 40.25h-59.88c-7.501 0-13.75 6.125-13.75 13.75c0 7.625 6.251 13.87 13.75 13.87h134.6c9.711 0 19.16-3.159 26.92-9l61.26-46.12c8.251-6.125 20.5-6.625 28.38 0c10.13 8.5 9.376 23.12-.8751 30.75l-100.6 75.5C411.7 460.8 402.3 464 392.6 464H24C10.8 464 0 474.8 0 487.1S10.8 512 24 512h368.8c20 0 39.38-6.5 55.26-18.5l100.8-75.88c16.63-12.5 26.5-31.5 27.13-52C576.7 345.1 567.8 325.5 551.1 312z" })))));
+    };
+    const DefaultFundView = () => {
+      return (h("div", { class: "flex h-20 justify-center items-center relative" },
+        h("div", { class: "h-20 w-20 rounded-full bg-primary-base opacity-10" }),
+        h("div", { class: "h-8 w-8 absolute " },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "fill-primary-base" },
+            h("path", { d: "M448 96h-64V64c0-35.35-28.65-64-64-64H192C156.7 0 128 28.65 128 64v32H64C28.65 96 0 124.7 0 160v256c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C512 124.7 483.3 96 448 96zM192 48h128c8.837 0 16 7.163 16 16v32h-160V64C176 55.16 183.2 48 192 48zM64 144h384c8.8 0 16 7.2 16 16v96h-416V160C48 151.2 55.2 144 64 144zM448 432H64c-8.8 0-16-7.2-16-16V304H192V320c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V304h144V416C464 424.8 456.8 432 448 432z" })))));
+    };
+    return (h("div", null,
+      h("div", { class: "text-2xl sm:text-3xl font-bold text-center" }, "Your super choice"),
+      h("div", { class: "sm:text-lg text-gray-600 mt-3 sm:mt-4 max-w-800 text-center leading-7" }, "Continue with your chosen fund or choose another fund below."),
+      h("div", { class: "flex justify-center mt-8 sm:mt-12" },
+        h("div", { class: "max-w-400 w-full" },
+          h("div", { class: "flex-col border shadow-sm p-6 rounded-lg text-center space-y-4" },
+            (() => {
+              switch (this.existingFund.type) {
+                case 'Promoted Fund':
+                  return h(PromotedFundView, { id: this.existingFund.id });
+                case 'Self Managed Fund':
+                  return h(SelfManagedFundView, null);
+                case 'My Own Fund':
+                  return h(MyOwnFundView, null);
+                case 'Default Fund':
+                  return h(DefaultFundView, null);
+              }
+            })(),
+            h("div", { class: "sm:text-lg font-bold leading-6" }, this.existingFund.name),
+            h("div", { class: "mt-8" },
+              h("sss-button", { fillWidth: true, promiseFn: () => this.handleFundNominationAccepted() }, "Continue with this fund"))),
+          h("div", { class: "mt-4" },
+            h("sss-button", { fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund"))))));
+  }
+  async handleFundNominationAccepted() {
+    const detail = this.createSuperFundNominationDetail(this.existingFund);
+    await existingFundService.submitRetainSuperFundAsync(detail);
+    superSelectionAppService.markSuperSelectionAsSubmitted();
+  }
+  async handleFundNominationDeclined() {
+    const detail = this.createSuperFundNominationDetail(this.existingFund);
+    await this.eventTrackingService.TrackSuperFundNominationDeclinedAsync(detail);
+    navigationService.navigateInternally(this.history, FeatureFlagService.isNewComplianceEnabled()
+      ? SuperSelectionAppRoutes.ConsentPage
+      : SuperSelectionAppRoutes.ChoicePage);
+  }
+  static get is() { return "sss-existing-choice-page"; }
+  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 {
+    "existingFund": {}
+  }; }
+}

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

@@ -2,24 +2,12 @@ import { Component, h } from '@stencil/core';
 import { AppVersion } from '../../../utils';
 export class FooterSection {
   render() {
-    return (h("div", { class: "container mb-sm-0" },
-      h("div", { class: "row justify-content-center pt-3 mt-3 mb-3 border-top" },
-        h("div", { class: "text-decoration-none" },
-          h("p", { class: "mt-3 small text-center mb-1 text-muted" }, "Powered by Flare"))),
-      h("div", { class: "row justify-content-center pb-sm-0 px-3 px-sm-0 text-center" },
-        h("p", { class: "text-muted small" }, "This page contains factual information only and does not take into account your particular objectives, financial circumstances or needs. If you have questions or need help making a decision about your super fund, you should speak to a licensed financial advice provider. You should consider the relevant super fund's PDS and TMD (if applicable) in deciding whether to apply to join the super fund. Each of the advertised fund's PDS and TMD (if applicable) can be found in their advertisements above. If you are considering joining another fund you can find the PDS and TMD on the fund's website. Your employer and Flare do not endorse or accept responsibility for any financial product advice or services provided by the promoters or trustees of the advertised superannuation funds. Flare do not endorse or accept responsibility for any of their content shown about any of the advertised superannuation funds as they are merely passing on the content as provided without any changes. Flare do not express any opinion or make any recommendation about any of the advertised funds.")),
-      h("div", { class: "row justify-content-end my-1 px-3 px-sm-0" }, this.appVersionBadge())));
-  }
-  appVersionBadge() {
-    return (h("small", { style: { opacity: '0.5' }, class: "text-muted" },
-      "Powered by Flare, v",
-      AppVersion));
+    return (h("div", { class: "text-center text-gray-500 text-xs mt-8 sm:mt-20 w-full max-w-960 mx-auto" },
+      h("span", null, "Powered by Flare"),
+      h("p", { class: "block text-white hover:text-inherit" },
+        "v",
+        AppVersion),
+      h("p", { class: "mt-4" }, "This page contains factual information only and does not take into account your particular objectives, financial circumstances or needs. If you have questions or need help making a decision about your super fund, you should speak to a licensed financial advice provider. You should consider the relevant super fund's PDS and TMD (if applicable) in deciding whether to apply to join the super fund. Each of the advertised fund's PDS and TMD (if applicable) can be found in their advertisements above. If you are considering joining another fund you can find the PDS and TMD on the fund's website. Your employer and Flare do not endorse or accept responsibility for any financial product advice or services provided by the promoters or trustees of the advertised superannuation funds. Flare do not endorse or accept responsibility for any of their content shown about any of the advertised superannuation funds as they are merely passing on the content as provided without any changes. Flare do not express any opinion or make any recommendation about any of the advertised funds.")));
   }
   static get is() { return "sss-footer-section"; }
-  static get originalStyleUrls() { return {
-    "$": ["footer-section.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["footer-section.css"]
-  }; }
 }

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

@@ -1,3 +1,4 @@
+import { getAssetPath } from '@stencil/core';
 export const Slate = {
   Id: 'slate',
   Name: 'Slate Super',
@@ -31,3 +32,52 @@ export const PromotedFundIdList = [
   { dtoPropName: 'aware', id: Aware.Id },
   { dtoPropName: 'active', id: Active.Id }
 ];
+export const getFundNameById = (id) => {
+  switch (id) {
+    case Slate.Id:
+      return Slate.Name;
+    case AustralianRetirementTrust.Id:
+      return AustralianRetirementTrust.Name;
+    case Aware.Id:
+      return Aware.Name;
+    case Active.Id:
+      return Active.Name;
+    default:
+      return;
+  }
+};
+export const getFundUsiById = (id) => {
+  switch (id) {
+    case Slate.Id:
+      return Slate.Usi;
+    case AustralianRetirementTrust.Id:
+      return;
+    case Aware.Id:
+      return;
+    case Active.Id:
+      return;
+    default:
+      return;
+  }
+};
+export const getLogoSrc = (id) => {
+  let logo = '';
+  switch (id) {
+    case Slate.Id:
+      logo = 'logo-slate.png';
+      break;
+    case AustralianRetirementTrust.Id:
+      logo = 'logo-art.svg';
+      break;
+    case Aware.Id:
+      logo = 'logo-aware.svg';
+      break;
+    case Active.Id:
+      logo = 'logo-active.svg';
+      break;
+    default:
+      return;
+  }
+  if (logo !== '')
+    return getAssetPath(`assets/${logo}`);
+};

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

@@ -8,6 +8,7 @@ export class CustomFund {
   constructor() {
     this.currentCustomFund = customFundOptions[0];
     this.fundOptionsList = customFundOptions;
+    this.showFundOptionsSelection = false;
   }
   componentWillLoad() {
     let currentRoute = '';
@@ -22,24 +23,38 @@ export class CustomFund {
     navigationService.navigateInternally(this.history, currentRoute);
   }
   render() {
-    return (h("div", { class: "container" },
-      h("div", { class: "row justify-content-center" },
-        h("div", { class: "col col-sm-10 col-md-7" },
-          h("p", { class: "font-weight-bold text-center" }, "Choose your Super"),
-          h("div", { class: "mb-4" },
-            h("select", { class: "form-control", required: true, onChange: (ev) => {
-                this.handleChange(ev.target.value.trim());
-              } }, this.fundOptionsList.map((f) => (h("option", { value: f.value, selected: this.currentCustomFund.value === f.value }, f.label))))),
-          h("slot", null)))));
-  }
-  handleChange(value) {
-    const newFund = customFundOptions.find((item) => item.value === value) || {
-      value: SuperSelectionAppRoutes.MyOwnFund
+    const ChevronDownIcon = () => {
+      return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-500", viewBox: "0 0 20 20" },
+        h("path", { "fill-rule": "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", "clip-rule": "evenodd" })));
+    };
+    const CheckIcon = () => {
+      return (h("svg", { class: "h-5 w-5 fill-primary-base", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20" },
+        h("path", { "fill-rule": "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule": "evenodd" })));
     };
-    navigationService.navigateInternally(this.history, newFund.value);
+    return (h("div", { class: "max-w-560 relative" },
+      h("label", { class: "font-medium text-gray-700 text-sm" }, "Which fund would you like to nominate?"),
+      h("div", { class: "mt-1 mb-4" },
+        h("button", { type: "button", class: "bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-primary-focus focus:border-primary-base text-sm", onClick: () => (this.showFundOptionsSelection = !this.showFundOptionsSelection) },
+          h("span", { class: {
+              'block truncate': true,
+              'text-gray-500': this.showFundOptionsSelection
+            } }, this.showFundOptionsSelection ? 'Select' : this.currentCustomFund.label),
+          h("span", { class: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none" },
+            h(ChevronDownIcon, null))),
+        this.showFundOptionsSelection && (h("ul", { class: "absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" }, this.fundOptionsList.map((f) => (h("li", { class: "text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 hover:bg-primary-hover", onClick: () => {
+            this.showFundOptionsSelection = !this.showFundOptionsSelection;
+            navigationService.navigateInternally(this.history, f.value);
+          } },
+          h("span", { class: {
+              'block truncate': true,
+              'font-semibold': this.currentCustomFund === f
+            } }, f.label),
+          this.currentCustomFund === f && (h("span", { class: "absolute inset-y-0 right-0 flex items-center pr-4" },
+            h(CheckIcon, null))))))))),
+      h("div", { onClick: () => (this.showFundOptionsSelection = false) },
+        h("slot", null))));
   }
   static get is() { return "sss-custom-fund"; }
-  static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
     "history": {
       "type": "unknown",
@@ -64,7 +79,8 @@ export class CustomFund {
   }; }
   static get states() { return {
     "currentCustomFund": {},
-    "fundOptionsList": {}
+    "fundOptionsList": {},
+    "showFundOptionsSelection": {}
   }; }
 }
 injectHistory(CustomFund);

package/dist/lib/collection/components/super-selection-app/funds/custom-fund/custom-fund.store.js

@@ -3,20 +3,17 @@ import * as O from 'fp-ts/Option';
 import { SuperSelectionAppRoutes } from '../../services/super-selection-app.routes';
 var CustomFundTypes;
 (function (CustomFundTypes) {
-  CustomFundTypes["MyOwnFund"] = "My Own Fund";
-  CustomFundTypes["DefaultFund"] = "Default Fund";
-  CustomFundTypes["SelfManagedFund"] = "Self Managed Fund";
+  CustomFundTypes["MyOwnFund"] = "Your current super fund";
+  CustomFundTypes["DefaultFund"] = "Your employer's default fund";
+  CustomFundTypes["SelfManagedFund"] = "Your self-managed super fund";
 })(CustomFundTypes || (CustomFundTypes = {}));
 export const initialStateCustomFund = {
   continueAllowed: false,
   nextRoute: '/',
   myOwnFundForm: {
     fundUsi: O.none,
-    memberNumber: O.none,
-    standardChoiceFormSignature: O.none
-  },
-  defaultFundForm: {
-    standardChoiceFormSignature: ''
+    fundName: O.none,
+    memberNumber: O.none
   },
   selfManagedFundForm: {
     fundName: '',
@@ -29,8 +26,7 @@ export const initialStateCustomFund = {
     city: '',
     bankAccountName: '',
     bsb: '',
-    bankAccountNumber: '',
-    standardChoiceFormSignature: ''
+    bankAccountNumber: ''
   },
   currentCustomFundType: CustomFundTypes.MyOwnFund,
   customFunds: [
@@ -38,13 +34,13 @@ export const initialStateCustomFund = {
       label: CustomFundTypes.MyOwnFund,
       value: SuperSelectionAppRoutes.MyOwnFund
     },
-    {
-      label: CustomFundTypes.DefaultFund,
-      value: SuperSelectionAppRoutes.DefaultFund
-    },
     {
       label: CustomFundTypes.SelfManagedFund,
       value: SuperSelectionAppRoutes.SelfManagedFund
+    },
+    {
+      label: CustomFundTypes.DefaultFund,
+      value: SuperSelectionAppRoutes.DefaultFund
     }
   ]
 };

package/dist/lib/collection/components/super-selection-app/funds/custom-fund/default-fund/default-fund.js

@@ -1,13 +1,11 @@
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, getAssetPath, h, Host, Prop, State } from '@stencil/core';
 import * as O from 'fp-ts/lib/Option';
 import australianFundLookupService from '../../../services/australian-fund-lookup.service';
 import { EventTrackingService } from '../../../services/event-tracking.service';
 import navigationService from '../../../services/navigation.service';
-import notificationsService from '../../../services/notifications.service';
 import { SuperSelectionAppRoutes } from '../../../services/super-selection-app.routes';
 import superSelectionAppService from '../../../services/super-selection-app.service';
 import customFundChoiceApi from '../api/custom-fund-choice.api';
-import customFundState from '../custom-fund.store';
 export class DefaultFund {
   constructor() {
     this.defaultFundProductName = 'Loading fund...';
@@ -19,65 +17,59 @@ export class DefaultFund {
       return;
     }
     this.isDefaultFundExists = true;
-    const defaultFundSearchResult = await australianFundLookupService.getFundByUsiAsync(defaultFundUsi.value);
+    const defaultFundSearchResult = await australianFundLookupService.getActiveFundByUsiAsync(defaultFundUsi.value);
     if (O.isNone(defaultFundSearchResult)) {
       this.isInvalidDefaultFund = true;
-      notificationsService.showErrorNotification({
-        title: 'Something is not right',
-        description: `Couldn't find information about the configured default fund (USI ${defaultFundUsi.value})`
-      });
       return;
     }
     this.defaultFund = defaultFundSearchResult.value;
     this.defaultFundProductName = defaultFundSearchResult.value.productName;
   }
   componentDidLoad() {
+    var _a, _b, _c, _d;
     return this.eventTrackingService.TrackDefaultSuperFundDetailViewedAsync({
-      fundUsi: this.defaultFund.usi,
-      fundName: this.defaultFund.productName,
+      fundUsi: (_b = (_a = this.defaultFund) === null || _a === void 0 ? void 0 : _a.usi) !== null && _b !== void 0 ? _b : '',
+      fundName: (_d = (_c = this.defaultFund) === null || _c === void 0 ? void 0 : _c.productName) !== null && _d !== void 0 ? _d : '',
       promotedFundsShown: superSelectionAppService.promotedFunds
     });
   }
   render() {
-    const NoDefaultFundBlock = () => (h("div", { class: "card p-4" },
-      h("p", { class: "font-weight-bold" }, "No Default Fund"),
-      h("p", { class: "mb-4 small" }, "It looks like your employer has not yet defined a default fund. Please contact them if you wish to choose your company's default fund.")));
-    const DefaultFundBlock = (props) => [
-      h("div", { class: "card p-4" },
-        h("p", { class: "font-weight-bold" }, "Default Fund"),
-        h("p", { class: "mb-4 small" }, "Almost there... all you have to do now is review the fund below, complete and sign the super choice form and save. Your application to join the fund is subject to Trustee approval."),
-        h("p", { class: "font-weight-bold mt-3" }, "Default Fund Name"),
-        h("p", null, props.defaultFundName)),
-      h("sss-standard-choice-form", { onStandardChoiceFormSignatureUpdated: (event) => {
-          customFundState.defaultFundForm = Object.assign(Object.assign({}, customFundState.defaultFundForm), event.detail);
-        } })
-    ];
-    return (h(Host, { class: "d-flex flex-fill" },
-      h("sss-custom-fund", { class: "flex-fill" },
-        h("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
-            'was-validated': this.formState === 'validated'
-          }, ref: (el) => (this.formElement = el) }, this.isDefaultFundExists ? (h(DefaultFundBlock, { defaultFundName: this.defaultFundProductName })) : (h(NoDefaultFundBlock, null))),
-        h("div", { class: "mt-4" },
-          h("sss-notifications-section", null)),
-        h("div", { class: "d-flex mt-4" },
-          h("div", { class: "flex-grow-1 w-50" },
-            h("div", { class: "mr-2" },
-              h("fl-button", { onClick: () => navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage), isBlockElement: true, variant: "secondary" },
-                h("span", null, "Back")))),
-          h("div", { class: "flex-grow-1 w-50" }, this.isDefaultFundExists && (h("div", { class: "ml-2" },
-            h("fl-promise-button", { isBlockElement: true, disabled: this.isInvalidDefaultFund, promiseFn: () => this.handleSubmitForm() },
-              h("span", null, "Save and continue")))))))));
+    return (h(Host, null,
+      h("sss-header-section", { currentPage: "own-fund" }),
+      h("div", { class: "flex justify-center mt-11" },
+        h("sss-custom-fund", null,
+          h("div", { class: "p-4 sm:p-6 border shadow-sm rounded-lg" },
+            h("p", { class: "sm:text-lg font-bold mb-3" }, "Fund details"),
+            h("div", { class: "bg-yellow-50 border-l-4 border-yellow-400 p-4 my-3" },
+              h("div", { class: "flex" },
+                h("div", { class: "flex-shrink-0" },
+                  h("img", { class: "h-5 w-5", src: getAssetPath('assets/icon-exclamation.svg') })),
+                h("div", { class: "ml-3 text-sm text-yellow-700 leading-5" }, this.isDefaultFundExists && !this.isInvalidDefaultFund ? (h("span", null, "By choosing to join your employer\u2019s default super fund, you acknowledge that your application to join is subject to Trustee approval.")) : (h("span", null, "It looks like your employer has not specified a default fund, please contact them if you\u2019d like to use your company\u2019s defaut fund."))))),
+            this.isDefaultFundExists && !this.isInvalidDefaultFund && (h("div", null,
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, "Fund Name"),
+                h("div", { class: "mt-1 shadow-sm px-3 py-2 rounded-md border border-gray-300 bg-gray-50 text-gray-500 text-sm" }, this.defaultFundProductName)),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, "Fund USI"),
+                h("div", { class: "mt-1 shadow-sm px-3 py-2 rounded-md border border-gray-300 bg-gray-50 text-gray-500 text-sm" }, this.defaultFund.usi))))),
+          h("div", { class: "flex justify-center mt-8" },
+            h("div", { class: "sm:max-w-320 w-full" },
+              this.isDefaultFundExists && !this.isInvalidDefaultFund && (h("div", { class: "mb-4" },
+                h("sss-button", { fillWidth: true, promiseFn: () => this.handleSubmitForm() }, "Continue"))),
+              h("stencil-route-link", { url: SuperSelectionAppRoutes.ChoicePage },
+                h("sss-button", { fillWidth: true, variant: "secondary" }, "Back"))))))));
   }
   async handleSubmitForm() {
     if (this.isInvalidDefaultFund) {
       return;
     }
-    this.formState = 'validated';
-    if (this.formElement.checkValidity()) {
-      await customFundChoiceApi.submitDefaultFundChoiceAsync(customFundState.defaultFundForm);
-      superSelectionAppService.markSuperSelectionAsSubmitted();
-      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.Success);
-    }
+    navigationService.navigateInternallyToStandardChoice({
+      history: this.history,
+      fundName: `Employer’s default fund`,
+      handleSubmitFn: async (standardChoiceFormSignature) => {
+        await customFundChoiceApi.submitDefaultFundChoiceAsync({ standardChoiceFormSignature });
+      }
+    });
   }
   static get is() { return "sss-default-fund"; }
   static get properties() { return {
@@ -103,7 +95,6 @@ export class DefaultFund {
     }
   }; }
   static get states() { return {
-    "formState": {},
     "defaultFundProductName": {}
   }; }
 }

package/dist/lib/collection/components/super-selection-app/funds/custom-fund/my-own-fund/my-own-fund-inputs.js

@@ -18,24 +18,28 @@ export class MyOwnFundInputs {
   }
   render() {
     return (h("div", null,
-      h("div", { class: "" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Superannuation Fund Name"),
-        h("fl-dropdown-async", { searchFunction: this.searchFundsAsync, minSearchStringLength: this.MIN_SEARCH_STRING_LENGTH, required: true, requiredValidationMessage: "Select a fund", placeholder: `Search by name or USI (type at least ${this.MIN_SEARCH_STRING_LENGTH} characters)`, value: this.selectedOption, onValueChanged: (ev) => {
-            this.selectedOption = ev.detail;
-            this.updateFundUsi(ev.detail.value.toString());
-          } }),
-        h("div", { class: "invalid-feedback" }, "Select a fund"),
-        O.isSome(this.myOwnFundForm.fundUsi) && (h("div", null,
-          h("label", { class: "mb-2 mt-3 font-weight-bold" }, "Superannuation Fund USI"),
-          h("p", { class: "mb-0" }, this.myOwnFundForm.fundUsi.value),
-          h("p", { class: "small mt-1" }, "Please ensure this is the correct fund USI as some funds have similar names")))),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Member Number"),
-        h("input", { placeholder: "Enter your member number", type: "text", class: "form-control", required: true, pattern: "[A-Za-z0-9]{4,16}", name: "memberNumber", id: "memberNumber", value: O.toUndefined(customFundState.myOwnFundForm.memberNumber), onChange: (ev) => this.updateMemberNumber(ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid member number (only numbers and / or letters)"))));
+      h("div", null,
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Fund name"),
+        h("div", { class: "mt-1" },
+          h("sss-dropdown-async", { searchFunction: this.searchFundsAsync, minSearchStringLength: this.MIN_SEARCH_STRING_LENGTH, required: true, requiredValidationMessage: "Select a fund", placeholder: `Type to search by name or USI...`, value: this.selectedOption, onValueChanged: (ev) => {
+              this.selectedOption = ev.detail;
+              this.updateFund(ev.detail);
+            }, showValidationErrors: this.showValidationErrors })),
+        O.isSome(this.myOwnFundForm.fundUsi) && (h("div", { class: "mt-3" },
+          h("label", { class: "text-sm font-medium text-gray-700" }, "Fund USI"),
+          h("div", { class: "mt-1 shadow-sm px-3 py-2 rounded-md border border-gray-300 bg-gray-50 text-gray-500 text-sm" }, this.myOwnFundForm.fundUsi.value)))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Member number"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", class: {
+              'shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-sm border-gray-300 rounded-md': true,
+              'invalid:border-red-300 invalid:text-red-900 invalid:focus:ring-red-500 invalid:focus:border-red-500': this
+                .showValidationErrors
+            }, required: true, pattern: "[A-Za-z0-9]{4,16}", name: "memberNumber", id: "memberNumber", value: O.toUndefined(customFundState.myOwnFundForm.memberNumber), onChange: (ev) => this.updateMemberNumber(ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid member number (only numbers and / or letters)")))));
   }
-  updateFundUsi(usi) {
-    this.formChanged.emit({ fundUsi: O.some(usi) });
+  updateFund(fund) {
+    this.formChanged.emit({ fundUsi: O.some(fund.value), fundName: O.some(fund.label) });
   }
   updateMemberNumber(memberNumber) {
     this.formChanged.emit({ memberNumber: O.some(memberNumber) });
@@ -47,7 +51,7 @@ export class MyOwnFundInputs {
       "mutable": false,
       "complexType": {
         "original": "MyOwnFundFormState",
-        "resolved": "{ fundUsi: Option<string>; memberNumber: Option<string>; standardChoiceFormSignature: Option<string>; }",
+        "resolved": "{ fundUsi: Option<string>; fundName: Option<string>; memberNumber: Option<string>; }",
         "references": {
           "MyOwnFundFormState": {
             "location": "import",
@@ -61,6 +65,23 @@ export class MyOwnFundInputs {
         "tags": [],
         "text": ""
       }
+    },
+    "showValidationErrors": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-validation-errors",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -78,7 +99,7 @@ export class MyOwnFundInputs {
       },
       "complexType": {
         "original": "Partial<MyOwnFundFormState>",
-        "resolved": "{ fundUsi?: None | Some<string> | undefined; memberNumber?: None | Some<string> | undefined; standardChoiceFormSignature?: None | Some<string> | undefined; }",
+        "resolved": "{ fundUsi?: None | Some<string> | undefined; fundName?: None | Some<string> | undefined; memberNumber?: None | Some<string> | undefined; }",
         "references": {
           "Partial": {
             "location": "global"