@flarehr/apollo-super-selection 3.52.60060 → 3.55.61713

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, getAssetPath, h, Host, Prop, State } from '@stencil/core';
 import { injectHistory } from '@stencil/router';
 import { pipe } from 'fp-ts/lib/function';
 import * as O from 'fp-ts/Option';
@@ -11,6 +11,7 @@ import customFundState from '../custom-fund.store';
 export class MyOwnFund {
   constructor() {
     this.isNotAllInformationProvidedMessageVisible = false;
+    this.isSubmitDisabled = true;
     this.eventTrackingService = EventTrackingService.Instance;
   }
   componentDidLoad() {
@@ -19,33 +20,34 @@ export class MyOwnFund {
     });
   }
   render() {
-    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) },
-          h("div", { class: "card p-4" },
-            h("p", { class: "font-weight-bold" }, "Fund details"),
-            h("p", { class: "text-warning mb-4 small" }, "Make sure you are already a member of the fund before completing this step."),
-            h("sss-my-own-fund-inputs", { myOwnFundForm: customFundState.myOwnFundForm, onFormChanged: (event) => {
-                customFundState.myOwnFundForm = Object.assign(Object.assign({}, customFundState.myOwnFundForm), event.detail);
-                this.isNotAllInformationProvidedMessageVisible = false;
-              } })),
-          h("sss-standard-choice-form", { onStandardChoiceFormSignatureUpdated: (event) => {
-              customFundState.myOwnFundForm = Object.assign(Object.assign({}, customFundState.myOwnFundForm), { standardChoiceFormSignature: O.fromNullable(event.detail.standardChoiceFormSignature) });
-            } })),
-        h("div", { class: "mt-4" },
-          h("sss-notifications-section", null)),
-        this.isNotAllInformationProvidedMessageVisible && (h("div", { class: "mt-4 alert alert-danger", role: "alert" }, "All fields are required to complete submission. Make sure you have selected a fund.")),
-        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" },
-            h("div", { class: "ml-2" },
-              h("fl-promise-button", { isBlockElement: true, 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("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
+              'was-validated': this.formState === 'validated'
+            }, ref: (el) => (this.formElement = el), onInput: (_) => (this.isSubmitDisabled = !this.formElement.checkValidity()) },
+            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 mb-3 sm:mb-4" },
+                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-2" },
+                    h("ul", { class: "list-disc list-outside ml-6 space-y-2 text-sm text-yellow-700 leading-5" },
+                      h("li", null, "Make sure you are a current member of the fund before completing this step."),
+                      h("li", null, "Please check that the fund USI is correct as some funds have similar names."))))),
+              h("sss-my-own-fund-inputs", { myOwnFundForm: customFundState.myOwnFundForm, showValidationErrors: this.formState === 'validated', onFormChanged: (event) => {
+                  customFundState.myOwnFundForm = Object.assign(Object.assign({}, customFundState.myOwnFundForm), event.detail);
+                  this.isNotAllInformationProvidedMessageVisible = false;
+                } }),
+              this.isNotAllInformationProvidedMessageVisible && (h("div", { class: "mt-4 rounded-md bg-red-50 p-4 text-sm text-red-700" }, "All fields are required to complete submission. Make sure you have selected a fund."))),
+            h("div", { class: "flex justify-center mt-8" },
+              h("div", { class: "sm:max-w-320 w-full" },
+                h("div", { class: "mb-4" },
+                  h("sss-button", { fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Continue")),
+                h("stencil-route-link", { url: SuperSelectionAppRoutes.ChoicePage },
+                  h("sss-button", { fillWidth: true, variant: "secondary" }, "Back")))))))));
   }
   async handleSubmitForm() {
     this.formState = 'validated';
@@ -53,20 +55,23 @@ export class MyOwnFund {
       return;
     }
     const isAllInformationProvided = O.isSome(customFundState.myOwnFundForm.fundUsi) &&
-      O.isSome(customFundState.myOwnFundForm.memberNumber) &&
-      O.isSome(customFundState.myOwnFundForm.standardChoiceFormSignature);
+      O.isSome(customFundState.myOwnFundForm.memberNumber);
     if (!isAllInformationProvided) {
       this.isNotAllInformationProvidedMessageVisible = true;
       return;
     }
-    const customFundChoiceDto = {
-      fundUsi: this.getOrError(customFundState.myOwnFundForm.fundUsi),
-      memberNumber: this.getOrError(customFundState.myOwnFundForm.memberNumber),
-      standardChoiceFormSignature: this.getOrError(customFundState.myOwnFundForm.standardChoiceFormSignature)
-    };
-    await customFundChoiceApi.submitCustomFundChoiceAsync(customFundChoiceDto);
-    superSelectionAppService.markSuperSelectionAsSubmitted();
-    navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.Success);
+    navigationService.navigateInternallyToStandardChoice({
+      history: this.history,
+      fundName: this.getOrError(customFundState.myOwnFundForm.fundName),
+      handleSubmitFn: async (standardChoiceFormSignature) => {
+        const customFundChoiceDto = {
+          fundUsi: this.getOrError(customFundState.myOwnFundForm.fundUsi),
+          memberNumber: this.getOrError(customFundState.myOwnFundForm.memberNumber),
+          standardChoiceFormSignature
+        };
+        await customFundChoiceApi.submitCustomFundChoiceAsync(customFundChoiceDto);
+      }
+    });
   }
   getOrError(option) {
     return pipe(option, O.getOrElse(() => {
@@ -74,7 +79,6 @@ export class MyOwnFund {
     }));
   }
   static get is() { return "sss-my-own-fund"; }
-  static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
     "history": {
       "type": "unknown",
@@ -99,7 +103,8 @@ export class MyOwnFund {
   }; }
   static get states() { return {
     "formState": {},
-    "isNotAllInformationProvidedMessageVisible": {}
+    "isNotAllInformationProvidedMessageVisible": {},
+    "isSubmitDisabled": {}
   }; }
 }
 injectHistory(MyOwnFund);

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

@@ -1,10 +1,11 @@
 import { Component, Event, h, Prop, State } from '@stencil/core';
-import { isSome, none, some } from 'fp-ts/Option';
+import { isNone, isSome, none, some } from 'fp-ts/Option';
 import customFundState from '../custom-fund.store';
 import bsbNumbers from './bankBsbNumbers';
 export class SelfManagedFundInputs {
   constructor() {
     this.currentBank = none;
+    this.addressErrorMessage = none;
     this.stateOptions = [
       { value: 'NSW', label: 'NSW' },
       { value: 'QLD', label: 'QLD' },
@@ -19,61 +20,72 @@ export class SelfManagedFundInputs {
     this.bankAccountNumberRegex = new RegExp(/^[0-9]{2,10}$/);
   }
   render() {
+    const inputClass = {
+      'relative shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-sm border-gray-300 rounded-md focus:z-10': true,
+      'invalid:border-red-300 invalid:text-red-900 invalid:placeholder-red-300 invalid:focus:ring-red-500 invalid:focus:border-red-500': this
+        .showValidationErrors
+    };
     return (h("div", null,
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Fund name *"),
-        h("input", { placeholder: "Enter your fund name", type: "text", class: "form-control", required: true, minlength: "2", name: "fundName", id: "fundName", value: customFundState.selfManagedFundForm.fundName, onChange: (ev) => this.updateFormField('fundName', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid fund name")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Fund ABN *"),
-        h("input", { placeholder: "Enter your fund ABN", type: "text", class: "form-control", required: true, minlength: "2", name: "fundAbn", id: "fundAbn", value: customFundState.selfManagedFundForm.fundAbn, onChange: (ev) => this.updateFormField('fundAbn', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid fund ABN")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Electronic service address alias (ESA) *"),
-        h("input", { placeholder: "Enter your ESA", type: "text", class: "form-control", required: true, minlength: "2", name: "fundEsa", id: "fundEsa", value: customFundState.selfManagedFundForm.fundEsa, onChange: (ev) => this.updateFormField('fundEsa', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid fund ESA")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Address line 1 *"),
-        h("input", { placeholder: "Enter your address", type: "text", class: "form-control", required: true, minlength: "2", name: "addressLine1", id: "addressLine1", value: customFundState.selfManagedFundForm.addressLine1, onChange: (ev) => this.updateFormField('addressLine1', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid address")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Address line 2 (optional)"),
-        h("input", { placeholder: "Enter your address", type: "text", class: "form-control", name: "addressLine2", id: "addressLine2", value: customFundState.selfManagedFundForm.addressLine2, onChange: (ev) => this.updateFormField('addressLine2', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid address")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "City/suburb *"),
-        h("input", { placeholder: "Enter your city", type: "text", class: "form-control", name: "city", required: true, id: "city", value: customFundState.selfManagedFundForm.city, onChange: (ev) => this.updateFormField('city', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid city/suburb *")),
-      h("div", { class: "mt-3" },
-        h("label", { class: "mb-2 font-weight-bold" }, "State *"),
-        h("select", { class: "form-control", name: "state", required: true, id: "state", onChange: (ev) => {
-            this.updateFormField('state', ev.target.value.trim());
-          } },
-          h("option", { disabled: true, selected: !this.fundForm.state, value: "" }, "Select a state"),
-          this.stateOptions.map((s) => (h("option", { value: s.value, selected: this.fundForm.state === s.value }, s.label)))),
-        h("div", { class: "invalid-feedback" }, "Select a state")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Post code *"),
-        h("input", { placeholder: "Enter your post code", type: "text", required: true, class: "form-control", name: "postcode", minlength: "4", maxlength: "4", pattern: "[0-9]{4}", id: "postcode", value: customFundState.selfManagedFundForm.postcode, onChange: (ev) => this.updateFormField('postcode', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid post code")),
       h("div", null,
-        h("i", { class: "fas fa-check-circle" })),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "BSB *"),
-        h("input", { placeholder: "Enter your BSB", type: "text", required: true, class: "form-control", name: "bsb", id: "bsb", minlength: "6", maxlength: "7", onKeyUp: (ev) => this.updateCurrentBank(ev), pattern: this.bsbRegex.source, value: customFundState.selfManagedFundForm.bsb }),
-        isSome(this.currentBank) && (h("p", { class: "mt-3" },
-          h("strong", null, "Bank name"),
-          h("br", null),
-          h("span", { class: "ml-2" }, this.currentBank.value))),
-        h("div", { class: "invalid-feedback" }, "Enter a valid BSB")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Bank account name *"),
-        h("input", { placeholder: "Enter your bank account name", type: "text", required: true, class: "form-control", name: "bankAccountName", minlength: "2", id: "bankAccountName", value: customFundState.selfManagedFundForm.bankAccountName, onChange: (ev) => this.updateFormField('bankAccountName', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid bank account name")),
-      h("div", { class: "mt-4" },
-        h("label", { class: "mb-2 font-weight-bold" }, "Bank account number *"),
-        h("input", { placeholder: "Enter your bank account number", type: "text", required: true, class: "form-control", name: "bankAccountNumber", id: "bankAccountNumber", minlength: "2", maxlength: "11", pattern: this.bankAccountNumberRegex.source, value: customFundState.selfManagedFundForm.bankAccountNumber, onKeyUp: (ev) => this.updateCurrentBankAccountNumber(ev), onChange: (ev) => this.updateFormField('bankAccountNumber', ev.target.value.trim()) }),
-        h("div", { class: "invalid-feedback" }, "Enter a valid bank account number"))));
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Fund name"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", class: inputClass, required: true, minlength: "2", name: "fundName", id: "fundName", value: customFundState.selfManagedFundForm.fundName, onChange: (ev) => this.updateFormField('fundName', ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid fund name"))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Fund ABN"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", class: inputClass, required: true, minlength: "2", name: "fundAbn", id: "fundAbn", value: customFundState.selfManagedFundForm.fundAbn, onChange: (ev) => this.updateFormField('fundAbn', ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid fund ABN"))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Electronic service address alias (ESA)"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", class: inputClass, required: true, minlength: "2", name: "fundEsa", id: "fundEsa", value: customFundState.selfManagedFundForm.fundEsa, onChange: (ev) => this.updateFormField('fundEsa', ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid fund ESA"))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Fund address"),
+        h("div", { class: "mt-1 rounded-md shadow-sm -space-y-px" },
+          h("input", { placeholder: "Address line 1", type: "text", class: Object.assign(Object.assign({}, inputClass), { 'rounded-none rounded-t-md shadow-none': true }), required: true, minlength: "2", name: "addressLine1", id: "addressLine1", value: customFundState.selfManagedFundForm.addressLine1, onChange: (ev) => {
+              this.updateFormField('addressLine1', ev.target.value.trim());
+              this.updateAddressErrorMessage();
+            }, ref: (el) => (this.addressLine1Element = el) }),
+          h("input", { placeholder: "Address line 2 (optional)", type: "text", class: Object.assign(Object.assign({}, inputClass), { 'rounded-none shadow-none': true }), name: "addressLine2", id: "addressLine2", value: customFundState.selfManagedFundForm.addressLine2, onChange: (ev) => this.updateFormField('addressLine2', ev.target.value.trim()) }),
+          h("input", { placeholder: "City/suburb", type: "text", class: Object.assign(Object.assign({}, inputClass), { 'rounded-none shadow-none': true }), name: "city", required: true, id: "city", value: customFundState.selfManagedFundForm.city, onChange: (ev) => {
+              this.updateFormField('city', ev.target.value.trim());
+              this.updateAddressErrorMessage();
+            }, ref: (el) => (this.cityElement = el) }),
+          h("div", { class: "flex -space-x-px" },
+            h("div", { class: "w-1/2 flex-1 min-w-0" },
+              h("input", { placeholder: "Postcode", type: "text", required: true, class: Object.assign(Object.assign({}, inputClass), { 'rounded-none rounded-bl-md shadow-none': true }), name: "postcode", minlength: "4", maxlength: "4", pattern: "[0-9]{4}", id: "postcode", value: customFundState.selfManagedFundForm.postcode, onChange: (ev) => {
+                  this.updateFormField('postcode', ev.target.value.trim());
+                  this.updateAddressErrorMessage();
+                }, ref: (el) => (this.postcodeElement = el) })),
+            h("div", { class: "flex-1 min-w-0" },
+              h("select", { class: Object.assign(Object.assign({}, inputClass), { 'rounded-none rounded-br-md shadow-none': true, 'text-gray-500': !this.fundForm.state }), name: "state", required: true, id: "state", onChange: (ev) => {
+                  this.updateFormField('state', ev.target.value.trim());
+                  this.updateAddressErrorMessage();
+                }, ref: (el) => (this.stateElement = el) },
+                h("option", { disabled: true, selected: !this.fundForm.state, value: "" }, "State"),
+                this.stateOptions.map((s) => (h("option", { value: s.value, selected: this.fundForm.state === s.value }, s.label))))))),
+        isSome(this.addressErrorMessage) && this.showValidationErrors && (h("div", { class: "mt-2 text-sm text-red-600" }, this.addressErrorMessage.value))),
+      h("h3", { class: "text-lg font-bold mt-6" }, "Fund bank details"),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Account name"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", required: true, class: inputClass, name: "bankAccountName", minlength: "2", id: "bankAccountName", value: customFundState.selfManagedFundForm.bankAccountName, onChange: (ev) => this.updateFormField('bankAccountName', ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid bank account name"))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "BSB"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", required: true, class: inputClass, name: "bsb", id: "bsb", minlength: "6", maxlength: "7", onKeyUp: (ev) => this.updateCurrentBank(ev), pattern: this.bsbRegex.source, value: customFundState.selfManagedFundForm.bsb }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid BSB"))),
+      isSome(this.currentBank) && (h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Bank 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.currentBank.value))),
+      h("div", { class: "mt-3" },
+        h("label", { class: "text-sm font-medium text-gray-700" }, "Account number"),
+        h("div", { class: "mt-1" },
+          h("input", { type: "text", required: true, class: inputClass, name: "bankAccountNumber", id: "bankAccountNumber", minlength: "2", maxlength: "11", pattern: this.bankAccountNumberRegex.source, value: customFundState.selfManagedFundForm.bankAccountNumber, onKeyUp: (ev) => this.updateCurrentBankAccountNumber(ev), onChange: (ev) => this.updateFormField('bankAccountNumber', ev.target.value.trim()) }),
+          h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Enter a valid bank account number")))));
   }
   updateFormField(key, value) {
     this.formChanged.emit({ [key]: value });
@@ -91,7 +103,7 @@ export class SelfManagedFundInputs {
       this.currentBank = some(firstTwoNumberBankName);
     if (firstThreeNumberBankName)
       this.currentBank = some(firstThreeNumberBankName);
-    if (value === '')
+    if (value === '' || value.length > 6)
       this.currentBank = none;
     this.updateFormField('bsb', value);
   }
@@ -99,6 +111,22 @@ export class SelfManagedFundInputs {
     const value = this.filterDigits(ev.target.value);
     this.updateFormField('bankAccountNumber', value);
   }
+  updateAddressErrorMessage() {
+    let message = none;
+    if (isNone(message) && !this.addressLine1Element.checkValidity()) {
+      message = some('Enter a valid address line 1');
+    }
+    if (isNone(message) && !this.cityElement.checkValidity()) {
+      message = some('Enter a valid city/suburb');
+    }
+    if (isNone(message) && !this.postcodeElement.checkValidity()) {
+      message = some('Enter a valid post code');
+    }
+    if (isNone(message) && !this.stateElement.checkValidity()) {
+      message = some('Select a state');
+    }
+    this.addressErrorMessage = message;
+  }
   static get is() { return "sss-self-managed-fund-inputs"; }
   static get properties() { return {
     "fundForm": {
@@ -106,7 +134,7 @@ export class SelfManagedFundInputs {
       "mutable": false,
       "complexType": {
         "original": "Partial<SelfManagedFundForm>",
-        "resolved": "{ fundName?: string | undefined; fundAbn?: string | undefined; fundEsa?: string | undefined; addressLine1?: string | undefined; addressLine2?: string | undefined; state?: string | undefined; postcode?: string | undefined; city?: string | undefined; bankAccountName?: string | undefined; bsb?: string | undefined; bankAccountNumber?: string | undefined; standardChoiceFormSignature?: string | undefined; }",
+        "resolved": "{ fundName?: string | undefined; fundAbn?: string | undefined; fundEsa?: string | undefined; addressLine1?: string | undefined; addressLine2?: string | undefined; state?: string | undefined; postcode?: string | undefined; city?: string | undefined; bankAccountName?: string | undefined; bsb?: string | undefined; bankAccountNumber?: string | undefined; }",
         "references": {
           "Partial": {
             "location": "global"
@@ -123,10 +151,28 @@ export class SelfManagedFundInputs {
         "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 {
-    "currentBank": {}
+    "currentBank": {},
+    "addressErrorMessage": {}
   }; }
   static get events() { return [{
       "method": "formChanged",
@@ -140,7 +186,7 @@ export class SelfManagedFundInputs {
       },
       "complexType": {
         "original": "Partial<SelfManagedFundForm>",
-        "resolved": "{ fundName?: string | undefined; fundAbn?: string | undefined; fundEsa?: string | undefined; addressLine1?: string | undefined; addressLine2?: string | undefined; state?: string | undefined; postcode?: string | undefined; city?: string | undefined; bankAccountName?: string | undefined; bsb?: string | undefined; bankAccountNumber?: string | undefined; standardChoiceFormSignature?: string | undefined; }",
+        "resolved": "{ fundName?: string | undefined; fundAbn?: string | undefined; fundEsa?: string | undefined; addressLine1?: string | undefined; addressLine2?: string | undefined; state?: string | undefined; postcode?: string | undefined; city?: string | undefined; bankAccountName?: string | undefined; bsb?: string | undefined; bankAccountNumber?: string | undefined; }",
         "references": {
           "Partial": {
             "location": "global"

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

@@ -1,4 +1,4 @@
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { Component, getAssetPath, h, Host, Prop, State } from '@stencil/core';
 import { injectHistory } from '@stencil/router';
 import { EventTrackingService } from '../../../services/event-tracking.service';
 import navigationService from '../../../services/navigation.service';
@@ -9,10 +9,34 @@ import customFundState from '../custom-fund.store';
 export class SelfManagedFund {
   constructor() {
     this.showSmsfNotSupported = false;
+    this.isSubmitDisabled = true;
     this.eventTrackingService = EventTrackingService.Instance;
     this.success = () => {
-      superSelectionAppService.markSuperSelectionAsSubmitted();
-      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.Success);
+      navigationService.navigateInternallyToStandardChoice({
+        history: this.history,
+        fundName: 'Self-managed super fund',
+        handleSubmitFn: async (standardChoiceFormSignature) => {
+          const requestDto = {
+            smsfChoice: {
+              abn: customFundState.selfManagedFundForm.fundAbn,
+              fundName: customFundState.selfManagedFundForm.fundName,
+              fundAddress: {
+                addressLine1: customFundState.selfManagedFundForm.addressLine1,
+                addressLine2: customFundState.selfManagedFundForm.addressLine2,
+                city: customFundState.selfManagedFundForm.city,
+                state: customFundState.selfManagedFundForm.state,
+                postcode: customFundState.selfManagedFundForm.postcode
+              },
+              bsb: customFundState.selfManagedFundForm.bsb,
+              bankAccountName: customFundState.selfManagedFundForm.bankAccountName,
+              bankAccountNumber: customFundState.selfManagedFundForm.bankAccountNumber,
+              electronicServiceAddress: customFundState.selfManagedFundForm.fundEsa
+            },
+            standardChoiceFormSignature
+          };
+          await customFundChoiceApi.submitSelfManagedFundChoiceAsync(requestDto);
+        }
+      });
     };
   }
   componentDidLoad() {
@@ -21,32 +45,30 @@ export class SelfManagedFund {
     });
   }
   render() {
-    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) },
-          h("div", { class: "card p-4" },
-            h("p", { class: "font-weight-bold" }, "Fund details"),
-            h("p", { class: "text-warning mb-4 small" }, "Make sure you are already a member of the fund before completing this step."),
-            h("sss-self-managed-fund-inputs", { fundForm: customFundState.selfManagedFundForm, onFormChanged: (event) => {
-                customFundState.selfManagedFundForm = Object.assign(Object.assign({}, customFundState.selfManagedFundForm), event.detail);
-              } })),
-          h("sss-standard-choice-form", { onStandardChoiceFormSignatureUpdated: (event) => {
-              customFundState.selfManagedFundForm = Object.assign(Object.assign({}, customFundState.selfManagedFundForm), event.detail);
-            } }),
-          this.showSmsfNotSupported && (h("sss-smsf-not-supported-dialog", { ref: (el) => (this.notSupportedDialog = el), onContinue: this.success }))),
-        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" },
-            h("div", { class: "ml-2" },
-              h("fl-promise-button", { isBlockElement: true, 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("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
+              'was-validated': this.formState === 'validated'
+            }, ref: (el) => (this.formElement = el), onInput: (_) => (this.isSubmitDisabled = !this.formElement.checkValidity()) },
+            h("div", { class: "p-4 sm:p-6 border shadow-sm rounded-lg max-w-560" },
+              h("p", { class: "sm:text-lg font-bold" }, "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" }, "Make sure your Self-managed super fund (SMSF) is a registered fund before completing this step."))),
+              h("sss-self-managed-fund-inputs", { fundForm: customFundState.selfManagedFundForm, showValidationErrors: this.formState === 'validated', onFormChanged: (event) => {
+                  customFundState.selfManagedFundForm = Object.assign(Object.assign({}, customFundState.selfManagedFundForm), event.detail);
+                } })),
+            h("div", { class: "flex justify-center mt-8" },
+              h("div", { class: "sm:max-w-320 w-full" },
+                h("div", { class: "mb-4" },
+                  h("sss-button", { fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Continue")),
+                h("stencil-route-link", { url: SuperSelectionAppRoutes.ChoicePage },
+                  h("sss-button", { fillWidth: true, variant: "secondary" }, "Back")))),
+            this.showSmsfNotSupported && (h("sss-smsf-not-supported-dialog", { ref: (el) => (this.notSupportedDialog = el), onContinue: this.success })))))));
   }
   componentDidRender() {
     var _a;
@@ -55,25 +77,6 @@ export class SelfManagedFund {
   async handleSubmitForm() {
     this.formState = 'validated';
     if (this.formElement.checkValidity()) {
-      const requestDto = {
-        smsfChoice: {
-          abn: customFundState.selfManagedFundForm.fundAbn,
-          fundName: customFundState.selfManagedFundForm.fundName,
-          fundAddress: {
-            addressLine1: customFundState.selfManagedFundForm.addressLine1,
-            addressLine2: customFundState.selfManagedFundForm.addressLine2,
-            city: customFundState.selfManagedFundForm.city,
-            state: customFundState.selfManagedFundForm.state,
-            postcode: customFundState.selfManagedFundForm.postcode
-          },
-          bsb: customFundState.selfManagedFundForm.bsb,
-          bankAccountName: customFundState.selfManagedFundForm.bankAccountName,
-          bankAccountNumber: customFundState.selfManagedFundForm.bankAccountNumber,
-          electronicServiceAddress: customFundState.selfManagedFundForm.fundEsa
-        },
-        standardChoiceFormSignature: customFundState.selfManagedFundForm.standardChoiceFormSignature
-      };
-      await customFundChoiceApi.submitSelfManagedFundChoiceAsync(requestDto);
       if (superSelectionAppService.showSmsfNotSupported) {
         this.showSmsfNotSupported = true;
       }
@@ -107,7 +110,8 @@ export class SelfManagedFund {
   }; }
   static get states() { return {
     "formState": {},
-    "showSmsfNotSupported": {}
+    "showSmsfNotSupported": {},
+    "isSubmitDisabled": {}
   }; }
 }
 injectHistory(SelfManagedFund);

package/dist/lib/collection/components/super-selection-app/funds/custom-fund/self-managed-fund/self-managed-not-supported.js

@@ -8,31 +8,21 @@ export class SmsfNotSupportedDialog {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "overlay" }),
-      h("div", { class: "dialog" },
-        h("div", { class: "card p-4 mt-4 bg-light text-center" },
-          h("div", { style: { 'text-align': 'center' } },
+      h("div", { class: "fixed z-40 top-0 left-0 bg-white opacity-70 w-full h-full" }),
+      h("div", { class: "fixed z-50 top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" },
+        h("div", { class: "p-6 shadow-sm border rounded-lg bg-white text-center max-w-560" },
+          h("div", { class: "flex justify-center" },
             h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "orange", viewBox: "0 0 16 16" },
               h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" }))),
-          h("p", { class: "small mt-4 mb-0" },
+          h("p", { class: "my-4" },
             "You\u2019ve selected a self-managed super fund (SMSF). Currently, SMSF information can\u2019t be sent via this form. You\u2019ll need to provide your employer with a",
             ' ',
             h("a", { target: "_blank", href: this.standardChoiceFormUrl }, "standard choice form"),
             ' ',
             "for your SMSF details."),
-          h("div", { class: "d-flex mt-4" },
-            h("div", { class: "w-25" }),
-            h("div", { class: "w-50" },
-              h("fl-button", { onClick: this.handleContinue, isBlockElement: true, variant: "primary" },
-                h("span", null, "Continue"))))))));
+          h("sss-button", { onClick: this.handleContinue, fillWidth: true }, "Continue")))));
   }
   static get is() { return "sss-smsf-not-supported-dialog"; }
-  static get originalStyleUrls() { return {
-    "$": ["self-managed-not-supported.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["self-managed-not-supported.css"]
-  }; }
   static get events() { return [{
       "method": "continue",
       "name": "continue",

package/dist/lib/collection/components/super-selection-app/funds/promoted-fund/promoted-fund-join-page.js

@@ -5,7 +5,7 @@ export class PromotedFundJoinPage {
     PromotedFundJoinIFrameBuilder.build(this.iframeElement, this.history);
   }
   render() {
-    return (h(Host, { class: "d-flex flex-fill" },
+    return (h(Host, { class: "w-screen" },
       h("iframe", { width: "100%", height: window.innerHeight, style: { border: 'none' }, ref: (el) => (this.iframeElement = el) })));
   }
   static get is() { return "sss-promoted-fund-join-page"; }

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

@@ -1,9 +1,6 @@
 import { createStore } from '@stencil/store';
 export const initial = {
-  fundId: '',
-  memberNumber: '',
-  usi: '',
-  standardChoiceFormSignature: ''
+  fundId: ''
 };
 const { state } = createStore(initial);
 export default state;

package/dist/lib/collection/components/super-selection-app/funds/promoted-fund/services/promoted-fund-join-iframe-builder.js

@@ -2,10 +2,12 @@ import iframeUtil from '../../../../../utils/iframe';
 import navigationService from '../../../services/navigation.service';
 import { SuperSelectionAppRoutes } from '../../../services/super-selection-app.routes';
 import superSelectionAppService from '../../../services/super-selection-app.service';
+import { getFundNameById } from '../../constants';
+import promotedFundChoiceApi from '../api/promoted-fund-choice.api';
 import promotedFundState from '../promoted-fund.store';
 class PromotedFundJoinIFrameBuilder {
   constructor() {
-    this.hostIsLocalSuperSelection = () => window.location.origin == 'http://localhost:7100';
+    this.hostIsLocalSuperSelection = () => window.location.origin === 'http://localhost:7100';
     this.environmentDiscriminator = () => {
       return this.hostIsLocalSuperSelection()
         ? 'autodev-partner'
@@ -20,6 +22,7 @@ class PromotedFundJoinIFrameBuilder {
       return;
     const postData = Object.assign(Object.assign({}, this.getMemberData()), { partnerId: superSelectionAppService.partnerIdOrDefault, accountId: superSelectionAppService.accountIdOrDefault, fundId: promotedFundState.fundId, authToken: superSelectionAppService.jwt });
     const handleMessage = (event) => {
+      var _a;
       const { data } = event;
       if (!data) {
         return;
@@ -32,9 +35,12 @@ class PromotedFundJoinIFrameBuilder {
             break;
           case 'success':
             if (data.memberNumber) {
-              promotedFundState.memberNumber = data.memberNumber;
-              promotedFundState.usi = data.usi.replace(/ /g, '');
-              navigationService.navigateInternally(history, SuperSelectionAppRoutes.PromotedFundStandardChoice);
+              navigationService.navigateInternallyToStandardChoice({
+                history,
+                fundName: (_a = getFundNameById(promotedFundState.fundId)) !== null && _a !== void 0 ? _a : '',
+                handleSubmitFn: (standardChoiceFormSignature) => promotedFundChoiceApi.submitChoiceAsync(Object.assign(Object.assign({}, promotedFundState), { memberNumber: data.memberNumber, usi: data.usi.replace(/ /g, ''), standardChoiceFormSignature, shownFunds: superSelectionAppService.promotedFunds })),
+                promotedFundId: promotedFundState.fundId
+              });
               break;
             }
           /* falls through */