@flarehr/apollo-super-selection 4.32.31414 → 4.34.34409

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

@@ -0,0 +1,355 @@
+import { Component, h, Prop, State } from '@stencil/core';
+import customFundChoiceApi from '../funds/custom-fund/api/custom-fund-choice.api';
+import { EventTrackingService } from '../services/event-tracking.service';
+import navigationService from '../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
+import superSelectionAppService from '../services/super-selection-app.service';
+import { DisabledField, Header, isNullOrWhitespace, Style } from './prefill-common';
+import { BankAccountBsb, BankAccountName, BankAccountNumber, FundAbn, FundAddress, FundAddressCity, FundAddressLine1, FundAddressLine2, FundAddressPostcode, FundAddressState, FundEsa, MemberGivenNames, MemberLastName, SmsfFundName } from './prefill-types';
+export class PrefillSMSF {
+  constructor() {
+    this.mode = 'review';
+    this.formState = 'pristine';
+    this.isSubmitDisabled = true;
+    this.eventTrackingService = EventTrackingService.Instance;
+    this.createSuperFundPrefillDeclinedDetail = (prefill) => {
+      return {
+        fundType: 'SMSF',
+        isAbnValid: prefill.fundAbn.valid,
+        isMemberFirstNamePresent: !isNullOrWhitespace(prefill.memberFirstName),
+        isMemberLastNamePresent: !isNullOrWhitespace(prefill.memberFamilyName)
+      };
+    };
+    this.createSuperFundPrefillViewedDetail = (prefill) => {
+      return {
+        fundType: 'SMSF',
+        isAbnValid: prefill.fundAbn.valid,
+        isMemberFirstNamePresent: !isNullOrWhitespace(prefill.memberFirstName),
+        isMemberLastNamePresent: !isNullOrWhitespace(prefill.memberFamilyName)
+      };
+    };
+  }
+  componentDidLoad() {
+    const detail = this.createSuperFundPrefillViewedDetail(this.prefill);
+    return this.eventTrackingService.TrackSuperFundPrefillViewedAsync(detail);
+  }
+  async componentWillLoad() {
+    if (this.prefill && this.prefill.fundAbn.valid) {
+      this.initialiseComponent(this.prefill);
+    }
+    else {
+      // If prefill does not exist, or is invalid we should
+      // not have landed on this page, navigate to consent page
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.PrefillInvalidMyOwnFundPage);
+    }
+  }
+  render() {
+    const errorMessages = [
+      this.fundName.errorMessage,
+      this.fundEsa.errorMessage,
+      this.fundAddressLine1.errorMessage,
+      this.fundAddressLine2.errorMessage,
+      this.fundAddressCity.errorMessage,
+      this.fundAddressPostcode.errorMessage,
+      this.fundAddressState.errorMessage,
+      this.memberLastName.errorMessage,
+      this.memberGivenNames.errorMessage,
+      this.bankAccountName.errorMessage,
+      this.bankAccountBsb.errorMessage,
+      this.bankAccountNumber.errorMessage
+    ].filter((err) => err !== null);
+    return (h("div", null,
+      h(Header, null),
+      h("div", { class: "flex flex-col items-center gap-8 mt-8 sm:mt-12" },
+        h("div", { class: "flex max-w-[560px] flex-col items-start gap-6 p-6 border shadow-sm rounded-lg" },
+          h("div", { class: "flex flex-col items-start gap-3 self-stretch" },
+            h("div", { class: "self-stretch text-grey-900 text-lg not-italic font-bold leading-7" }, "Your self-managed super fund (SMSF) details"),
+            h("sss-prefill-warning-box", { class: "self-stretch", notificationList: [
+                'Make sure your Self-managed super fund (SMSF) is a registered fund before completing this step.'
+              ] }),
+            this.mode === 'review' && errorMessages.length > 0 && (h("sss-prefill-error-box", { class: "self-stretch", notificationList: errorMessages, withHeader: true })),
+            this.mode === 'review' && (h("div", { class: "flex flex-col gap-3 self-stretch mt-4" },
+              h("sss-prefill-display-field", { field: this.fundName }),
+              h("sss-prefill-display-field", { field: this.fundAbn }),
+              h("sss-prefill-display-field", { field: this.fundEsa }),
+              h("sss-prefill-display-field", { field: this.fundAddress }),
+              h("sss-prefill-display-field", { field: this.memberLastName }),
+              h("sss-prefill-display-field", { field: this.memberGivenNames }),
+              h("sss-prefill-display-field", { field: this.bankAccountName }),
+              h("sss-prefill-display-field", { field: this.bankAccountBsb }),
+              h("sss-prefill-display-field", { field: this.bankAccountNumber }))),
+            this.mode === 'review' && (h("sss-button", { class: "self-stretch", fillWidth: true, variant: "light", promiseFn: () => this.setModeToEdit() },
+              h("div", { class: "flex flex-row gap-2" },
+                h("div", { class: "text-sm not-italic font-medium leading-4" }, "Edit details"),
+                h("div", { class: "w-4 h-4 relative" },
+                  h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "17", height: "16", viewBox: "0 0 17 16", fill: "currentColor" },
+                    h("path", { d: "M11.369 2.86865C11.9939 2.24381 13.0069 2.24381 13.6318 2.86865C14.2566 3.49349 14.2566 4.50656 13.6318 5.1314L12.9974 5.76571L10.7347 3.50297L11.369 2.86865Z" }),
+                    h("path", { d: "M9.60334 4.63434L2.90039 11.3373V13.6H5.16313L11.8661 6.89708L9.60334 4.63434Z" })))))),
+            this.mode === 'edit' && (h("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: { 'was-validated': this.formState === 'validated' }, ref: (el) => (this.formElement = el), onInput: (_) => (this.isSubmitDisabled = this.formHasMissingData()) },
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.fundName.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.fundName.value, onInput: (ev) => {
+                      this.updateFundName(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.fundName.errorMessage))),
+              DisabledField(this.fundAbn.name, this.fundAbn.value),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.fundEsa.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, minlength: "2", value: this.fundEsa.value, onInput: (ev) => {
+                      this.updateFundEsa(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.fundEsa.errorMessage))),
+              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({}, Style.Input(this.formState === 'validated')), { 'rounded-none rounded-t-md shadow-none': true }), required: true, minlength: "2", name: "addressLine1", id: "addressLine1", value: this.fundAddressLine1.value, onChange: (ev) => {
+                      this.updateAddressLine1(ev.target.value);
+                    } }),
+                  h("input", { placeholder: "Address line 2 (optional)", type: "text", class: Object.assign(Object.assign({}, Style.Input(this.formState === 'validated')), { 'rounded-none shadow-none': true }), value: this.fundAddressLine2.value, onChange: (ev) => this.updateAddressLine2(ev.target.value) }),
+                  h("input", { placeholder: "City/suburb", type: "text", class: Object.assign(Object.assign({}, Style.Input(this.formState === 'validated')), { 'rounded-none shadow-none': true }), required: true, value: this.fundAddressCity.value, onChange: (ev) => {
+                      this.updateAddressCity(ev.target.value);
+                    } }),
+                  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({}, Style.Input(this.formState === 'validated')), { 'rounded-none rounded-bl-md shadow-none': true }), name: "postcode", minlength: "4", maxlength: "4", pattern: "[0-9]{4}", id: "postcode", value: this.fundAddressPostcode.value, inputmode: "numeric", onChange: (ev) => {
+                          this.updateAddressPostcode(ev.target.value);
+                        } })),
+                    h("div", { class: "flex-1 min-w-0" },
+                      h("select", { class: Object.assign(Object.assign({}, Style.Input(this.formState === 'validated')), { 'rounded-none rounded-br-md shadow-none': true, 'text-gray-500': this.formState !== 'validated' }), name: "state", required: true, id: "state", onChange: (ev) => {
+                          this.updateAddressState(ev.target.value);
+                        } },
+                        h("option", { disabled: true, selected: this.fundAddressState.value !== undefined, value: "" }, "State"),
+                        this.fundAddressState.options.map((s) => (h("option", { value: s.value, selected: this.fundAddressState.value === s.value }, s.label))))))),
+                this.formState === 'validated' && (h("div", { class: "mt-2 text-sm text-red-600" }, this.fundAddressLine1.errorMessage ||
+                  this.fundAddressLine1.errorMessage ||
+                  this.fundAddressCity.errorMessage ||
+                  this.fundAddressPostcode.errorMessage ||
+                  this.fundAddressState.errorMessage))),
+              h("div", { class: "flex gap-x-4 flex-col sm:flex-row" },
+                h("div", { class: "mt-3 w-full sm:w-1/2" },
+                  h("label", { class: "text-sm font-medium text-gray-700" }, this.memberGivenNames.name),
+                  h("div", { class: "mt-1" },
+                    h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.memberGivenNames.value, onInput: (ev) => {
+                        this.updateMemberGivenNames(ev.target.value);
+                      } }),
+                    h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.memberGivenNames.errorMessage))),
+                h("div", { class: "mt-3 w-full sm:w-1/2" },
+                  h("label", { class: "text-sm font-medium text-gray-700" }, this.memberLastName.name),
+                  h("div", { class: "mt-1" },
+                    h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.memberLastName.value, onInput: (ev) => {
+                        this.updateMemberLastName(ev.target.value);
+                      } }),
+                    h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.memberLastName.errorMessage)))),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.bankAccountName.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.bankAccountName.value, onInput: (ev) => {
+                      this.updateBankAccountName(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.bankAccountName.errorMessage))),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.bankAccountBsb.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.bankAccountBsb.value, onInput: (ev) => {
+                      this.updateBankAccountBsb(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.bankAccountBsb.errorMessage))),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.bankAccountNumber.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, value: this.bankAccountNumber.value, onInput: (ev) => {
+                      this.updateBankAccountNumber(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.bankAccountNumber.errorMessage))))))),
+        h("div", { class: "flex w-80 flex-col items-start gap-4" },
+          h("sss-button", { class: "self-stretch", fillWidth: true, variant: "primary", disabled: this.isSubmitDisabled, promiseFn: () => this.handleSubmitForm() }, "Continue"),
+          h("sss-button", { class: "self-stretch", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund")))));
+  }
+  isFormValid() {
+    return (this.fundName.isValid &&
+      this.fundAbn.isValid &&
+      this.fundEsa.isValid &&
+      this.fundAddressLine1.isValid &&
+      this.fundAddressLine2.isValid &&
+      this.fundAddressCity.isValid &&
+      this.fundAddressPostcode.isValid &&
+      this.fundAddressState.isValid &&
+      this.memberGivenNames.isValid &&
+      this.memberLastName.isValid &&
+      this.bankAccountName.isValid &&
+      this.bankAccountBsb.isValid &&
+      this.bankAccountNumber.isValid);
+  }
+  formHasMissingData() {
+    return (this.fundName.isEmpty ||
+      this.fundAbn.isEmpty ||
+      this.fundEsa.isEmpty ||
+      this.fundAddressLine1.isEmpty ||
+      this.fundAddressCity.isEmpty ||
+      this.fundAddressPostcode.isEmpty ||
+      this.fundAddressState.isEmpty ||
+      this.memberGivenNames.isEmpty ||
+      this.memberLastName.isEmpty ||
+      this.bankAccountName.isEmpty ||
+      this.bankAccountBsb.isEmpty ||
+      this.bankAccountNumber.isEmpty);
+  }
+  setModeToEdit() {
+    this.mode = 'edit';
+    return Promise.resolve();
+  }
+  updateFundName(fundName) {
+    this.fundName = new SmsfFundName(fundName.trim());
+  }
+  updateFundEsa(fundEda) {
+    this.fundEsa = new FundEsa(fundEda.trim());
+  }
+  updateAddressLine1(value) {
+    this.fundAddressLine1 = new FundAddressLine1(value.trim());
+  }
+  updateAddressLine2(value) {
+    this.fundAddressLine2 = new FundAddressLine2(value.trim());
+  }
+  updateAddressCity(value) {
+    this.fundAddressCity = new FundAddressCity(value.trim());
+  }
+  updateAddressPostcode(value) {
+    this.fundAddressPostcode = new FundAddressPostcode(value.trim());
+  }
+  updateAddressState(value) {
+    this.fundAddressState = new FundAddressState(value.trim());
+  }
+  updateBankAccountName(bankAccountName) {
+    this.bankAccountName = new BankAccountName(bankAccountName.trim());
+  }
+  updateBankAccountBsb(bankAccountBsb) {
+    this.bankAccountBsb = new BankAccountBsb(bankAccountBsb.trim());
+  }
+  updateBankAccountNumber(bankAccountNumber) {
+    this.bankAccountNumber = new BankAccountNumber(bankAccountNumber.trim());
+  }
+  updateMemberGivenNames(memberGivenNames) {
+    this.memberGivenNames = new MemberGivenNames(memberGivenNames);
+  }
+  updateMemberLastName(memberLastName) {
+    this.memberLastName = new MemberLastName(memberLastName.trim());
+  }
+  async handleSubmitForm() {
+    this.formState = 'validated';
+    if (!this.isFormValid() || !this.formElement.checkValidity()) {
+      return;
+    }
+    navigationService.navigateInternallyToStandardChoice({
+      history: this.history,
+      fundName: this.fundName.value,
+      handleSubmitFn: async (standardChoiceFormSignature) => {
+        const smsfChoiceDto = Object.assign({ smsfChoice: {
+            abn: this.fundAbn.value,
+            fundName: this.fundName.value,
+            fundAddress: {
+              addressLine1: this.fundAddressLine1.value,
+              addressLine2: this.fundAddressLine2.value.trim() === ''
+                ? null
+                : this.fundAddressLine2.value.trim(),
+              city: this.fundAddressCity.value,
+              state: this.fundAddressState.value,
+              postcode: this.fundAddressPostcode.value
+            },
+            bsb: this.bankAccountBsb.value,
+            bankAccountName: this.bankAccountName.value,
+            bankAccountNumber: this.bankAccountNumber.value,
+            electronicServiceAddress: this.fundEsa.value,
+            memberFirstName: this.memberGivenNames.value,
+            memberFamilyName: this.memberLastName.value
+          }, standardChoiceFormSignature }, superSelectionAppService.promotedFundsConfig);
+        await customFundChoiceApi.submitSelfManagedFundChoiceAsync(smsfChoiceDto);
+      }
+    });
+  }
+  initialiseComponent(prefill) {
+    this.fundName = new SmsfFundName(prefill.fundName);
+    this.fundAbn = new FundAbn(prefill.fundAbn.value, prefill.fundAbn.valid);
+    this.fundEsa = new FundEsa(prefill.electronicServiceAddress);
+    this.fundAddressLine1 = new FundAddressLine1(prefill.addressLine1);
+    this.fundAddressLine2 = new FundAddressLine2(prefill.addressLine2);
+    this.fundAddressCity = new FundAddressCity(prefill.addressCity);
+    this.fundAddressPostcode = new FundAddressPostcode(prefill.addressPostcode);
+    this.fundAddressState = new FundAddressState(prefill.addressState);
+    this.fundAddress = new FundAddress(this.fundAddressLine1, this.fundAddressLine2, this.fundAddressCity, this.fundAddressState, this.fundAddressPostcode);
+    this.memberGivenNames = new MemberGivenNames(prefill.memberFirstName);
+    this.memberLastName = new MemberLastName(prefill.memberFamilyName);
+    this.bankAccountName = new BankAccountName(prefill.bankAccountName);
+    this.bankAccountBsb = new BankAccountBsb(prefill.bankAccountBsb);
+    this.bankAccountNumber = new BankAccountNumber(prefill.bankAccountNumber);
+    this.isSubmitDisabled = this.formHasMissingData();
+  }
+  async handleFundNominationDeclined() {
+    const detail = this.createSuperFundPrefillDeclinedDetail(this.prefill);
+    await this.eventTrackingService.TrackSuperFundPrefillDeclinedAsync(detail);
+    return navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ConsentPage);
+  }
+  static get is() { return "sss-prefill-smsf"; }
+  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": ""
+      }
+    },
+    "prefill": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "PrefillSMSFChoiceDto",
+        "resolved": "{ fundAbn: { valid: boolean; value: string; }; fundName: string | null; addressLine1: string | null; addressLine2: string | null; addressCity: string | null; addressState: string | null; addressPostcode: string | null; bankAccountBsb: string | null; bankAccountName: string | null; bankAccountNumber: string | null; electronicServiceAddress: string | null; memberFirstName: string | null; memberFamilyName: string | null; }",
+        "references": {
+          "PrefillSMSFChoiceDto": {
+            "location": "import",
+            "path": "../api/super-selection.api.dto"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "mode": {},
+    "formState": {},
+    "isSubmitDisabled": {},
+    "fundName": {},
+    "fundAbn": {},
+    "fundEsa": {},
+    "fundAddressLine1": {},
+    "fundAddressLine2": {},
+    "fundAddressCity": {},
+    "fundAddressPostcode": {},
+    "fundAddressState": {},
+    "fundAddress": {},
+    "memberGivenNames": {},
+    "memberLastName": {},
+    "bankAccountName": {},
+    "bankAccountBsb": {},
+    "bankAccountNumber": {}
+  }; }
+}

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

@@ -0,0 +1,281 @@
+import { isNullOrWhitespace } from './prefill-common';
+export const NAME_PATTERN = "[A-Za-z][A-Za-z']+(( |-)[A-Za-z][A-Za-z']+)*\\s*$";
+export class FormField {
+  constructor(name, value) {
+    this.name = name;
+    this._value = value !== null && value !== void 0 ? value : '';
+    this._errorMessage = this.validateAndReturnErrorMessage(this._value);
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    this._errorMessage = this.validateAndReturnErrorMessage(newValue);
+    this._value = newValue;
+  }
+  get isValid() {
+    return this._errorMessage === null;
+  }
+  get isEmpty() {
+    return isNullOrWhitespace(this._value);
+  }
+  get errorMessage() {
+    return this._errorMessage;
+  }
+}
+export class StaticFormField {
+  constructor(name, value, isValid) {
+    this.name = name;
+    this._value = value !== null && value !== void 0 ? value : '';
+    this._isValid = isValid;
+  }
+  get value() {
+    return this._value;
+  }
+  get isValid() {
+    return this._isValid;
+  }
+  get isEmpty() {
+    return isNullOrWhitespace(this._value);
+  }
+}
+export class FundUsi extends StaticFormField {
+  constructor(value, isValid) {
+    super('Fund USI', value, isValid);
+  }
+}
+export class FundName extends StaticFormField {
+  constructor(value, isValid) {
+    super('Fund name', value, isValid);
+  }
+}
+export class SmsfFundName extends FormField {
+  constructor(value) {
+    super('Fund name', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'Fund name is required.';
+    }
+    else if (newValue.length < 2) {
+      return 'Enter a valid Fund name.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class MemberNumber extends FormField {
+  constructor(value) {
+    super('Member number', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = /^[A-Za-z0-9]{4,16}$/;
+    if (isNullOrWhitespace(newValue)) {
+      return 'Member number is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Enter a valid member number (only numbers and / or letters)';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class MemberLastName extends FormField {
+  constructor(value) {
+    super('Member last name', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = new RegExp(NAME_PATTERN);
+    if (isNullOrWhitespace(newValue)) {
+      return 'Member last name is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Member last name contains unsupported characters.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class MemberGivenNames extends FormField {
+  constructor(value) {
+    super('Member given name(s)', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = new RegExp(NAME_PATTERN);
+    if (isNullOrWhitespace(newValue)) {
+      return 'Member given name(s) is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Member given name(s) contains unsupported characters.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAbn extends StaticFormField {
+  constructor(value, isValid) {
+    super('Fund ABN', value, isValid);
+  }
+}
+export class FundEsa extends FormField {
+  constructor(value) {
+    super('Fund ESA', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'Fund ESA is required.';
+    }
+    else if (newValue.length < 2) {
+      return 'Enter a valid Fund ESA.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAddressLine1 extends FormField {
+  constructor(value) {
+    super('Address line 1', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'Address line 1 is required.';
+    }
+    else if (newValue.length < 2) {
+      return 'Enter a valid Address line 1.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAddressLine2 extends FormField {
+  constructor(value) {
+    super('Address line 2', value);
+  }
+  validateAndReturnErrorMessage(_newValue) {
+    return null;
+  }
+}
+export class FundAddressCity extends FormField {
+  constructor(value) {
+    super('City/suburb', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'City/suburb is required.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAddressPostcode extends FormField {
+  constructor(value) {
+    super('Postcode', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = /^[0-9]{4}$/;
+    if (isNullOrWhitespace(newValue)) {
+      return 'Postcode is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Enter a valid postcode.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAddressState extends FormField {
+  constructor(value) {
+    super('State', value);
+  }
+  get options() {
+    return [
+      { value: 'NSW', label: 'NSW' },
+      { value: 'QLD', label: 'QLD' },
+      { value: 'ACT', label: 'ACT' },
+      { value: 'VIC', label: 'VIC' },
+      { value: 'TAS', label: 'TAS' },
+      { value: 'WA', label: 'WA' },
+      { value: 'SA', label: 'SA' },
+      { value: 'NT', label: 'NT' }
+    ];
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'State is required.';
+    }
+    else if (this.options.find((option) => (option.value = newValue)) === undefined) {
+      return 'Enter a valid state.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class FundAddress extends StaticFormField {
+  constructor(addrLine1, addrLine2, city, state, postcode) {
+    const value = [addrLine1, addrLine2, city, state, postcode]
+      .map((x) => x.value)
+      .filter((v) => v)
+      .join(', ');
+    const isValid = addrLine1.isValid && addrLine2.isValid && city.isValid && state.isValid && postcode.isValid;
+    super('Fund address', value, isValid);
+  }
+}
+export class BankAccountName extends FormField {
+  constructor(value) {
+    super('Account name', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    if (isNullOrWhitespace(newValue)) {
+      return 'Account name is required.';
+    }
+    else if (newValue.length < 2) {
+      return 'Enter a valid Account name.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class BankAccountBsb extends FormField {
+  constructor(value) {
+    super('BSB', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = /^[0-9]{6,7}$/;
+    if (isNullOrWhitespace(newValue)) {
+      return 'BSB is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Enter a valid BSB.';
+    }
+    else {
+      return null;
+    }
+  }
+}
+export class BankAccountNumber extends FormField {
+  constructor(value) {
+    super('Account number', value);
+  }
+  validateAndReturnErrorMessage(newValue) {
+    const regex = /^[0-9]{2,11}$/;
+    if (isNullOrWhitespace(newValue)) {
+      return 'Account number is required.';
+    }
+    else if (!regex.test(newValue)) {
+      return 'Enter a valid Account number.';
+    }
+    else {
+      return null;
+    }
+  }
+}

package/dist/lib/collection/components/super-selection-app/prefill-fund/prefill-warning-box.js

@@ -0,0 +1,46 @@
+import { Component, h, Prop } from '@stencil/core';
+export class PrefillWarningBox {
+  render() {
+    const bgColour = 'bg-yellow-50';
+    const accentColour = 'bg-yellow-400';
+    const textColour = 'text-yellow-700';
+    const bulletColour = '#B45309';
+    const BulletIcon = () => {
+      return (h("div", { class: "flex justify-center items-center pt-2" },
+        h("div", { class: "w-1.5 h-1.5 fill-yellow-700" },
+          h("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("circle", { id: "Bullet", cx: "3", cy: "3", r: "3", fill: bulletColour })))));
+    };
+    const WarningIcon = () => {
+      return (h("div", { class: "w-5 h-5" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+          h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.25706 3.09882C9.02167 1.73952 10.9788 1.73952 11.7434 3.09882L17.3237 13.0194C18.0736 14.3526 17.1102 15.9999 15.5805 15.9999H4.4199C2.89025 15.9999 1.92682 14.3526 2.67675 13.0194L8.25706 3.09882ZM11.0001 13C11.0001 13.5523 10.5524 14 10.0001 14C9.44784 14 9.00012 13.5523 9.00012 13C9.00012 12.4477 9.44784 12 10.0001 12C10.5524 12 11.0001 12.4477 11.0001 13ZM10.0001 5C9.44784 5 9.00012 5.44772 9.00012 6V9C9.00012 9.55228 9.44784 10 10.0001 10C10.5524 10 11.0001 9.55228 11.0001 9V6C11.0001 5.44772 10.5524 5 10.0001 5Z", fill: "#FBBF24" }))));
+    };
+    return (h("div", { class: 'flex items-start self-stretch rounded-md ' + bgColour },
+      h("div", { class: 'w-1 self-stretch ' + accentColour }),
+      h("div", { class: "flex items-start gap-3 flex-[1_0_0] p-4" },
+        h(WarningIcon, null),
+        h("div", { class: "flex flex-col items-start gap-2 flex-[1_0_0]" },
+          h("div", { class: "flex flex-col items-start gap-1 self-stretch" }, this.notificationList.map((text) => (h("div", { class: "flex items-start gap-[7px] self-stretch pl-0" },
+            h(BulletIcon, null),
+            h("div", { class: 'flex-[1_0_0] text-sm not-italic font-normal leading-5 ' + textColour }, text)))))))));
+  }
+  static get is() { return "sss-prefill-warning-box"; }
+  static get properties() { return {
+    "notificationList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}