@flarehr/apollo-super-selection 1.3.54543 → 1.3.54544

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

@@ -0,0 +1,42 @@
+import { Component, h, Prop } from '@stencil/core';
+export class DisplayField {
+  render() {
+    return (h("div", { class: "flex w-full flex-col sm:flex-row sm:min-h-5 justify-center items-start gap-0.5 sm:gap-4 self-stretch" },
+      h("div", { class: {
+          'sm:w-2/5 sm:max-w-40 self-stretch text-gray-500 text-xs sm:text-sm not-italic font-medium leading-4 sm:leading-5': true,
+          'text-red-600': !this.field.isValid
+        } }, this.field.name),
+      h("div", { "data-testid": this.field.testId, class: {
+          'sm:w-3/5 max-w-[300px] self-stretch text-gray-900 text-sm not-italic font-normal leading-5 break-words': true,
+          'h-5 sm:h-auto': this.field.isEmpty,
+          'text-red-600': !this.field.isValid
+        } }, this.field.value)));
+  }
+  static get is() { return "sss-prefill-display-field"; }
+  static get properties() { return {
+    "field": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormField | StaticFormField",
+        "resolved": "FormField | StaticFormField",
+        "references": {
+          "FormField": {
+            "location": "import",
+            "path": "./prefill-types"
+          },
+          "StaticFormField": {
+            "location": "import",
+            "path": "./prefill-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,66 @@
+import { Component, h, Prop } from '@stencil/core';
+export class PrefillErrorBox {
+  constructor() {
+    this.withHeader = false;
+  }
+  render() {
+    const ErrorIcon = () => {
+      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: "M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM8.70711 7.29289C8.31658 6.90237 7.68342 6.90237 7.29289 7.29289C6.90237 7.68342 6.90237 8.31658 7.29289 8.70711L8.58579 10L7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071C7.68342 13.0976 8.31658 13.0976 8.70711 12.7071L10 11.4142L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L11.4142 10L12.7071 8.70711C13.0976 8.31658 13.0976 7.68342 12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289L10 8.58579L8.70711 7.29289Z", fill: "#F87171" }))));
+    };
+    return (h("div", { class: "flex items-start self-stretch rounded-md bg-red-50" },
+      h("div", { class: "w-1 self-stretch bg-red-400" }),
+      h("div", { class: "flex items-start gap-3 flex-[1_0_0] p-4" },
+        h(ErrorIcon, null),
+        h("div", { class: "flex-col justify-start items-start gap-2 inline-flex" },
+          this.withHeader && (h("div", { class: "self-stretch text-red-800 text-sm font-medium leading-tight" },
+            "Please correct ",
+            this.notificationList.length,
+            " issues with your fund details")),
+          this.withHeader &&
+            this.notificationList.map((text) => (h("div", { class: "self-stretch h-5 flex-col justify-start items-start gap-1 flex" },
+              h("div", { class: "self-stretch pl-1.5 justify-start items-start gap-[7px] inline-flex" },
+                h("div", { class: "pt-1.5 justify-center items-center flex" },
+                  h("div", { class: "w-1.5 h-1.5 bg-red-700 rounded-full" })),
+                h("div", { class: "grow shrink basis-0 text-red-700 text-sm font-normal leading-tight" }, text))))),
+          !this.withHeader &&
+            this.notificationList.map((text) => (h("div", { class: "text-sm font-medium leading-tight text-red-800" }, text)))))));
+  }
+  static get is() { return "sss-prefill-error-box"; }
+  static get properties() { return {
+    "withHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "with-header",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "notificationList": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/prefill-fund/prefill-invalid-my-own-fund.js

@@ -0,0 +1,121 @@
+import { Component, h, Prop, State } from '@stencil/core';
+import { EventTrackingService } from '../services/event-tracking.service';
+import navigationService from '../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
+import { Header, isNullOrWhitespace } from './prefill-common';
+import { FundName, FundUsi, MemberGivenNames, MemberLastName, MemberNumber } from './prefill-types';
+export class PrefillInvalidMyOwnFund {
+  constructor() {
+    this.eventTrackingService = EventTrackingService.Instance;
+    this.createSuperFundPrefillDeclinedDetail = (prefill) => {
+      return {
+        fundType: 'My Own Fund',
+        isUsiValid: prefill.fundDetail.type === 'Valid',
+        isMemberNumberPresent: !isNullOrWhitespace(prefill.memberNumber),
+        isMemberFirstNamePresent: !isNullOrWhitespace(prefill.memberFirstName),
+        isMemberLastNamePresent: !isNullOrWhitespace(prefill.memberFamilyName)
+      };
+    };
+    this.createSuperFundPrefillViewedDetail = (prefill) => {
+      return {
+        fundType: 'My Own Fund',
+        isUsiValid: prefill.fundDetail.type === 'Valid',
+        isMemberNumberPresent: !isNullOrWhitespace(prefill.memberNumber),
+        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.fundDetail.type === 'Invalid') {
+      this.fundUsi = new FundUsi(this.prefill.fundDetail.fundUsi, false);
+      this.fundName = new FundName('', false);
+      this.memberNumber = new MemberNumber(this.prefill.memberNumber);
+      this.memberGivenNames = new MemberGivenNames(this.prefill.memberFirstName);
+      this.memberLastName = new MemberLastName(this.prefill.memberFamilyName);
+    }
+    else {
+      // If prefill does not exist, or is valid we should
+      // not have landed on this page, navigate to choice page
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+    }
+  }
+  render() {
+    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 fund details"),
+            h("sss-prefill-error-box", { class: "self-stretch", notificationList: [
+                'The fund USI is invalid, or no longer in use. You are required to choose another fund to continue with your super nomination.'
+              ] }),
+            h("div", { class: "flex flex-col gap-3 self-stretch mt-4" },
+              h("sss-prefill-display-field", { field: this.fundUsi }),
+              h("sss-prefill-display-field", { field: this.fundName }),
+              h("sss-prefill-display-field", { field: this.memberNumber }),
+              h("sss-prefill-display-field", { field: this.memberLastName }),
+              h("sss-prefill-display-field", { field: this.memberGivenNames })))),
+        h("div", { class: "flex w-full sm:w-80 max-w-[560px] flex-col items-start gap-4" },
+          h("sss-button", { testid: "choose-another-fund-button", class: "self-stretch", fillWidth: true, variant: "primary", promiseFn: () => this.handleChooseAnotherFund() }, "Choose another fund")))));
+  }
+  async handleChooseAnotherFund() {
+    const detail = this.createSuperFundPrefillDeclinedDetail(this.prefill);
+    await this.eventTrackingService.TrackSuperFundPrefillDeclinedAsync(detail);
+    return navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+  }
+  static get is() { return "sss-prefill-invalid-my-own-fund"; }
+  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": "PrefillOwnFundChoiceDto",
+        "resolved": "{ fundDetail: { type: \"Valid\"; fundUsi: string; fundName: string; } | { type: \"Invalid\"; fundUsi: string; }; memberNumber: string | null; memberFirstName: string | null; memberFamilyName: string | null; }",
+        "references": {
+          "PrefillOwnFundChoiceDto": {
+            "location": "import",
+            "path": "../api/super-selection.api.dto"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "fundUsi": {},
+    "fundName": {},
+    "memberNumber": {},
+    "memberGivenNames": {},
+    "memberLastName": {}
+  }; }
+}

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

@@ -0,0 +1,145 @@
+import { Component, h, Prop, State } from '@stencil/core';
+import { EventTrackingService } from '../services/event-tracking.service';
+import navigationService from '../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
+import { Header, isNullOrWhitespace } from './prefill-common';
+import { BankAccountBsb, BankAccountName, BankAccountNumber, FundAbn, FundAddress, FundAddressCity, FundAddressLine1, FundAddressLine2, FundAddressPostcode, FundAddressState, FundEsa, MemberGivenNames, MemberLastName, SmsfFundName } from './prefill-types';
+export class PrefillInvalidSMSF {
+  constructor() {
+    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 valid we should
+      // not have landed on this page, navigate to PrefillInvalidMyOwnFundPage page
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.PrefillInvalidMyOwnFundPage);
+    }
+  }
+  render() {
+    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-error-box", { class: "self-stretch", notificationList: [
+                'The fund ABN is invalid. You are required to choose another fund to continue with your super nomination.'
+              ] }),
+            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("div", { class: "mt-4 mb-2 text-gray-900 text-lg font-bold leading-7" }, "Fund bank details"),
+              h("sss-prefill-display-field", { field: this.bankAccountName }),
+              h("sss-prefill-display-field", { field: this.bankAccountBsb }),
+              h("sss-prefill-display-field", { field: this.bankAccountNumber })))),
+        h("div", { class: "flex w-full sm:w-80 max-w-[560px] flex-col items-start gap-4" },
+          h("sss-button", { testid: "make-another-nomination-button", class: "self-stretch", fillWidth: true, variant: "primary", promiseFn: () => this.handleFundNominationDeclined() }, "Make another nomination")))));
+  }
+  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);
+  }
+  async handleFundNominationDeclined() {
+    const detail = this.createSuperFundPrefillDeclinedDetail(this.prefill);
+    await this.eventTrackingService.TrackSuperFundPrefillDeclinedAsync(detail);
+    return navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+  }
+  static get is() { return "sss-prefill-invalid-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 {
+    "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-my-own-fund.js

@@ -0,0 +1,223 @@
+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 { FundName, FundUsi, MemberGivenNames, MemberLastName, MemberNumber, NAME_PATTERN } from './prefill-types';
+export class PrefillMyOwnFund {
+  constructor() {
+    this.mode = 'review';
+    this.formState = 'pristine';
+    this.isSubmitDisabled = true;
+    this.eventTrackingService = EventTrackingService.Instance;
+    this.createSuperFundPrefillDeclinedDetail = (prefill) => {
+      return {
+        fundType: 'My Own Fund',
+        isUsiValid: prefill.fundDetail.type === 'Valid',
+        isMemberNumberPresent: !isNullOrWhitespace(prefill.memberNumber),
+        isMemberFirstNamePresent: !isNullOrWhitespace(prefill.memberFirstName),
+        isMemberLastNamePresent: !isNullOrWhitespace(prefill.memberFamilyName)
+      };
+    };
+    this.createSuperFundPrefillViewedDetail = (prefill) => {
+      return {
+        fundType: 'My Own Fund',
+        isUsiValid: prefill.fundDetail.type === 'Valid',
+        isMemberNumberPresent: !isNullOrWhitespace(prefill.memberNumber),
+        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.fundDetail.type === 'Valid') {
+      this.initialiseComponent(this.prefill.fundDetail.fundName, this.prefill);
+    }
+    else {
+      // If prefill does not exist, or is invalid we should
+      // not have landed on this page, navigate to choice page
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+    }
+  }
+  render() {
+    const errorMessages = [
+      this.memberNumber.errorMessage,
+      this.memberLastName.errorMessage,
+      this.memberGivenNames.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.5 self-stretch" },
+            h("div", { class: "self-stretch text-grey-900 text-lg not-italic font-bold leading-7" }, "Your fund details"),
+            h("sss-prefill-warning-box", { class: "self-stretch", notificationList: [
+                'Make sure you are a current member of the fund before completing this step.',
+                'Please check that the fund USI is correct as some funds have similar names.'
+              ] }),
+            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.fundUsi }),
+              h("sss-prefill-display-field", { field: this.fundName }),
+              h("sss-prefill-display-field", { field: this.memberNumber }),
+              h("sss-prefill-display-field", { field: this.memberLastName }),
+              h("sss-prefill-display-field", { field: this.memberGivenNames }))),
+            this.mode === 'review' && (h("sss-button", { testid: "edit-details-button", class: "self-stretch mt-3", fillWidth: true, variant: "secondary", 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()) },
+              DisabledField(this.fundName.name, this.fundName.testId, this.fundName.value),
+              DisabledField(this.fundUsi.name, this.fundUsi.testId, this.fundUsi.value),
+              h("div", { class: "mt-3" },
+                h("label", { class: "text-sm font-medium text-gray-700" }, this.memberNumber.name),
+                h("div", { class: "mt-1" },
+                  h("input", { type: "text", class: Style.Input(this.formState === 'validated'), required: true, pattern: "[A-Za-z0-9]{4,16}", "data-testid": this.memberNumber.testId, value: this.memberNumber.value, onInput: (ev) => {
+                      this.updateMemberNumber(ev.target.value);
+                    } }),
+                  h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.memberNumber.errorMessage))),
+              h("div", { class: "flex mt-3 gap-x-4 flex-col sm:flex-row" },
+                h("div", { class: "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, pattern: NAME_PATTERN, "data-testid": this.memberGivenNames.testId, 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: "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, pattern: NAME_PATTERN, "data-testid": this.memberLastName.testId, 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: "flex w-full sm:w-80 max-w-[560px] flex-col items-start gap-4" },
+          h("sss-button", { testid: "continue-button", class: "self-stretch", fillWidth: true, variant: "primary", disabled: this.isSubmitDisabled, promiseFn: () => this.handleSubmitForm() }, "Continue"),
+          h("sss-button", { testid: "choose-another-fund-button", class: "self-stretch", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund")))));
+  }
+  initialiseComponent(fundName, prefill) {
+    this.fundUsi = new FundUsi(prefill.fundDetail.fundUsi, true);
+    this.fundName = new FundName(fundName, true);
+    this.memberNumber = new MemberNumber(prefill.memberNumber);
+    this.memberGivenNames = new MemberGivenNames(prefill.memberFirstName);
+    this.memberLastName = new MemberLastName(prefill.memberFamilyName);
+    this.isSubmitDisabled = this.formHasMissingData();
+  }
+  isFormValid() {
+    return (this.fundUsi.isValid &&
+      this.fundName.isValid &&
+      this.memberNumber.isValid &&
+      this.memberGivenNames.isValid &&
+      this.memberLastName.isValid);
+  }
+  formHasMissingData() {
+    return (this.fundUsi.isEmpty ||
+      this.fundName.isEmpty ||
+      this.memberNumber.isEmpty ||
+      this.memberGivenNames.isEmpty ||
+      this.memberLastName.isEmpty);
+  }
+  setModeToEdit() {
+    this.mode = 'edit';
+    return Promise.resolve();
+  }
+  updateMemberNumber(memberNumber) {
+    this.memberNumber = new MemberNumber(memberNumber.trim());
+  }
+  updateMemberGivenNames(memberGivenNames) {
+    this.memberGivenNames = new MemberGivenNames(memberGivenNames.trimStart());
+  }
+  updateMemberLastName(memberLastName) {
+    this.memberLastName = new MemberLastName(memberLastName.trim());
+  }
+  async handleSubmitForm() {
+    this.formState = 'validated';
+    if (!this.isFormValid()) {
+      return;
+    }
+    if (this.mode === 'edit' && !this.formElement.checkValidity()) {
+      return;
+    }
+    navigationService.navigateInternallyToStandardChoice({
+      history: this.history,
+      fundName: this.fundName.value,
+      fundDetails: {
+        type: 'myOwnFund',
+        fundName: this.fundName.value,
+        fundUsi: this.fundUsi.value,
+        memberNumber: this.memberNumber.value
+      },
+      handleSubmitFn: async (standardChoiceFormSignature) => {
+        const customFundChoiceDto = Object.assign({ fundUsi: this.fundUsi.value, memberNumber: this.memberNumber.value, memberFirstName: this.memberGivenNames.value, memberFamilyName: this.memberLastName.value, standardChoiceFormSignature }, superSelectionAppService.promotedFundsConfig);
+        await customFundChoiceApi.submitCustomFundChoiceAsync(customFundChoiceDto);
+      }
+    });
+  }
+  async handleFundNominationDeclined() {
+    const detail = this.createSuperFundPrefillDeclinedDetail(this.prefill);
+    await this.eventTrackingService.TrackSuperFundPrefillDeclinedAsync(detail);
+    return navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+  }
+  static get is() { return "sss-prefill-my-own-fund"; }
+  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": "PrefillOwnFundChoiceDto",
+        "resolved": "{ fundDetail: { type: \"Valid\"; fundUsi: string; fundName: string; } | { type: \"Invalid\"; fundUsi: string; }; memberNumber: string | null; memberFirstName: string | null; memberFamilyName: string | null; }",
+        "references": {
+          "PrefillOwnFundChoiceDto": {
+            "location": "import",
+            "path": "../api/super-selection.api.dto"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "mode": {},
+    "formState": {},
+    "isSubmitDisabled": {},
+    "fundUsi": {},
+    "fundName": {},
+    "memberNumber": {},
+    "memberGivenNames": {},
+    "memberLastName": {}
+  }; }
+}