@flarehr/apollo-super-selection 3.51.59881 → 3.54.61365

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

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

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

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

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

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

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

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

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

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

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);