@flarehr/apollo-super-selection 1.2.32739 → 1.3.36

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

@@ -0,0 +1,113 @@
+import { Component, h, Host, Prop, State } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
+import * as O from 'fp-ts/lib/Option';
+import { fundTileClicked } from '../../../../super-campaign/fund-tile-clicked.handler';
+import { PromotedFundJoinedEventHandler } from '../../../../super-campaign/promoted-fund-joined.handler';
+import navigationService from '../../../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../../../services/super-selection-app.routes';
+import superSelectionAppService from '../../../services/super-selection-app.service';
+export class FeaturedFunds {
+  constructor() {
+    this.currentView = 'featured-funds';
+    this.subscribeToEvents = () => {
+      for (const eventName in this.eventHandlers) {
+        document.addEventListener(eventName, this.eventHandlers[eventName]);
+      }
+    };
+    this.unsubscribeFromEvents = () => {
+      for (const eventName in this.eventHandlers) {
+        document.removeEventListener(eventName, this.eventHandlers[eventName]);
+      }
+    };
+    this.backClicked = () => {
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
+      return Promise.resolve();
+    };
+    this.cancelClicked = () => {
+      this.currentView = 'featured-funds';
+      return Promise.resolve();
+    };
+    this.continueClicked = async (event) => {
+      this.currentView = 'fund-join';
+      await fundTileClicked({
+        sender: event.detail.sender,
+        placementId: 'byof',
+        fundId: event.detail.fundId,
+        fundUsi: event.detail.fundUsi,
+        fundName: event.detail.fundName,
+        fundType: event.detail.fundType
+      });
+    };
+    this.fundPanelShown = async (event) => {
+      if (event.detail.sender === 'featured-funds') {
+        const fundIdList = event.detail.shownFunds.map((f) => f.fundId);
+        await superSelectionAppService.viewSuperFundPanelAsync('byof', fundIdList);
+      }
+    };
+    this.eventHandlers = {
+      'back-clicked': this.backClicked.bind(this),
+      'continue-clicked': this.continueClicked.bind(this),
+      'cancel-clicked': this.cancelClicked.bind(this),
+      'featured-fund-panel-shown': this.fundPanelShown.bind(this),
+      'promoted-fund-joined': new PromotedFundJoinedEventHandler('byof', this.history).handle
+    };
+  }
+  componentWillLoad() {
+    if (superSelectionAppService.isFeaturedFundsEnabled &&
+      superSelectionAppService.isUsingSuperCampaign &&
+      O.isSome(superSelectionAppService.backendUrl) &&
+      O.isSome(superSelectionAppService.state.jwt)) {
+      this.backendUrl = superSelectionAppService.backendUrl.value;
+      this.accessToken = superSelectionAppService.state.jwt.value;
+      this.unsubscribeFromEvents();
+      this.subscribeToEvents();
+      superSelectionAppService.hideFooterSection = true;
+    }
+    else {
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.MyOwnFund);
+    }
+  }
+  disconnectedCallback() {
+    this.unsubscribeFromEvents();
+    superSelectionAppService.hideFooterSection = false;
+  }
+  render() {
+    return (h(Host, null,
+      this.currentView === 'featured-funds' && h("sss-header-section", null),
+      h("div", { class: {
+          'flex flex-col w-full justify-center items-center mt-11 mx-auto': this.currentView === 'featured-funds',
+          '-mt-20': this.currentView === 'fund-join'
+        } },
+        this.currentView === 'featured-funds' && h("sss-custom-fund", null),
+        h("apollo-super-campaign-featured-funds", { "backend-url": this.backendUrl, "access-token": this.accessToken }))));
+  }
+  static get is() { return "sss-super-campaign-featured-funds"; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "backendUrl": {},
+    "accessToken": {},
+    "currentView": {}
+  }; }
+}
+injectHistory(FeaturedFunds);

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

@@ -0,0 +1 @@
+export {};

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

@@ -7,11 +7,11 @@ export class MemberNameInput {
     this.showValidationErrors = false;
     this.errorMessage = '';
     // Pattern for name validation
-    this.NAME_PATTERN = "[A-Za-z][A-Za-z']+(( |-)[A-Za-z][A-Za-z']+)*\\s*$";
+    this.NAME_PATTERN = "^[A-Za-z](?:[A-Za-z]||'[A-Za-z]||-[A-Za-z]|| [A-Za-z])*\\s*$";
   }
   render() {
     return (h(Host, null,
-      h("input", { type: "text", class: {
+      h("input", { "data-testid": this.testId, type: "text", class: {
           'shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-base sm: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
@@ -29,9 +29,6 @@ export class MemberNameInput {
       if (target.validity.valueMissing) {
         this.errorMessage = `${this.readableName} is required.`;
       }
-      else if (target.value.length < 2) {
-        this.errorMessage = 'A minimum of 2 characters is required.';
-      }
       else if (target.validity.patternMismatch) {
         if (target.value.startsWith('-') || target.value.startsWith("'")) {
           this.errorMessage = `${this.readableName} must start with a letter.`;
@@ -53,6 +50,23 @@ export class MemberNameInput {
   }
   static get is() { return "sss-name-input"; }
   static get properties() { return {
+    "testId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "test-id",
+      "reflect": false
+    },
     "value": {
       "type": "string",
       "mutable": false,

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,115 @@
+import { Component, h, Host, Prop, State } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
+import { isSome } from 'fp-ts/lib/Option';
+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 customFundChoiceApi from '../api/custom-fund-choice.api';
+import customFundState from '../custom-fund.store';
+export class MyOwnFundEngagementStep {
+  constructor() {
+    this.stepContinued = async (event) => {
+      if (event.detail.sender == 'byof-engagement') {
+        await EventTrackingService.Instance.TrackSuperMyOwnFundEngagementStepContinued(this.fundUsi, event.detail.reason);
+        this.navigateToStandardChoice();
+      }
+    };
+    this.subscribeToStepEvents = () => {
+      for (const eventName in this.stepEventHandlers) {
+        document.addEventListener(eventName, this.stepEventHandlers[eventName]);
+      }
+    };
+    this.unSubscribeFromStepEvents = () => {
+      for (const eventName in this.stepEventHandlers) {
+        document.removeEventListener(eventName, this.stepEventHandlers[eventName]);
+      }
+    };
+    this.stepEventHandlers = {
+      continue: this.stepContinued.bind(this)
+    };
+  }
+  async componentWillLoad() {
+    if (superSelectionAppService.isBringYourOwnFundCustomStepEnabled &&
+      superSelectionAppService.isUsingSuperCampaign &&
+      isSome(customFundState.myOwnFundForm.fundUsi) &&
+      isSome(customFundState.myOwnFundForm.fundName) &&
+      isSome(customFundState.myOwnFundForm.memberNumber) &&
+      isSome(customFundState.myOwnFundForm.memberFirstName) &&
+      isSome(customFundState.myOwnFundForm.memberFamilyName) &&
+      isSome(superSelectionAppService.backendUrl) &&
+      isSome(superSelectionAppService.state.jwt)) {
+      this.backendUrl = superSelectionAppService.backendUrl.value;
+      this.accessToken = superSelectionAppService.state.jwt.value;
+      this.fundUsi = customFundState.myOwnFundForm.fundUsi.value;
+      this.fundName = customFundState.myOwnFundForm.fundName.value;
+      this.memberNumber = customFundState.myOwnFundForm.memberNumber.value;
+      this.memberFirstName = customFundState.myOwnFundForm.memberFirstName.value;
+      this.memberFamilyName = customFundState.myOwnFundForm.memberFamilyName.value;
+      this.unSubscribeFromStepEvents();
+      this.subscribeToStepEvents();
+      superSelectionAppService.hideFooterSection = true;
+      await EventTrackingService.Instance.TrackSuperMyOwnFundEngagementStepActivationSucceeded(this.fundUsi);
+    }
+    else {
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.MyOwnFund);
+    }
+  }
+  disconnectedCallback() {
+    this.unSubscribeFromStepEvents();
+    superSelectionAppService.hideFooterSection = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("apollo-super-byof-engagement", { "backend-url": this.backendUrl, "access-token": this.accessToken, "fund-usi": this.fundUsi })));
+  }
+  navigateToStandardChoice() {
+    navigationService.navigateInternallyToStandardChoice({
+      history: this.history,
+      fundName: this.fundName,
+      fundDetails: {
+        type: 'myOwnFund',
+        fundName: this.fundName,
+        fundUsi: this.fundUsi,
+        memberNumber: this.memberNumber
+      },
+      handleSubmitFn: async (standardChoiceFormSignature) => {
+        const customFundChoiceDto = Object.assign({ fundUsi: this.fundUsi, memberNumber: this.memberNumber, memberFirstName: this.memberFirstName, memberFamilyName: this.memberFamilyName, standardChoiceFormSignature }, superSelectionAppService.promotedFundsConfig);
+        await customFundChoiceApi.submitCustomFundChoiceAsync(customFundChoiceDto);
+      }
+    });
+  }
+  static get is() { return "sss-my-own-fund-engagement-step-host"; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "backendUrl": {},
+    "accessToken": {},
+    "fundUsi": {},
+    "fundName": {},
+    "memberNumber": {},
+    "memberFirstName": {},
+    "memberFamilyName": {}
+  }; }
+}
+injectHistory(MyOwnFundEngagementStep);

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

@@ -35,7 +35,7 @@ export class MyOwnFundInputs {
       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) => {
+          h("sss-dropdown-async", { testId: "fund-search-input", 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 })),
@@ -45,7 +45,7 @@ export class MyOwnFundInputs {
       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: {
+          h("input", { "data-testid": "member-number-input", type: "text", class: {
               'shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-base sm: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
@@ -55,11 +55,11 @@ export class MyOwnFundInputs {
         h("div", { class: "mt-3 w-1/2" },
           h("label", { class: "text-sm font-medium text-gray-700" }, "Given name(s)"),
           h("div", { class: "mt-1" },
-            h("sss-name-input", { name: "memberFirstName", readableName: "Member given name(s)", showValidationErrors: this.showValidationErrors, value: O.toUndefined(customFundState.myOwnFundForm.memberFirstName), onChange: (ev) => this.updateMemberFirstName(ev.target.value.trim()) }))),
+            h("sss-name-input", { testId: "member-given-names-input", name: "memberFirstName", readableName: "Member given name(s)", showValidationErrors: this.showValidationErrors, value: O.toUndefined(customFundState.myOwnFundForm.memberFirstName), onChange: (ev) => this.updateMemberFirstName(ev.target.value.trim()) }))),
         h("div", { class: "mt-3 w-1/2" },
           h("label", { class: "text-sm font-medium text-gray-700" }, "Last name"),
           h("div", { class: "mt-1" },
-            h("sss-name-input", { name: "memberFamilyName", readableName: "Member last name", showValidationErrors: this.showValidationErrors, value: O.toUndefined(customFundState.myOwnFundForm.memberFamilyName), onChange: (ev) => this.updateMemberFamilyName(ev.target.value.trim()) }))))));
+            h("sss-name-input", { testId: "member-last-name-input", name: "memberFamilyName", readableName: "Member last name", showValidationErrors: this.showValidationErrors, value: O.toUndefined(customFundState.myOwnFundForm.memberFamilyName), onChange: (ev) => this.updateMemberFamilyName(ev.target.value.trim()) }))))));
   }
   updateFund(fund) {
     this.formChanged.emit({ fundUsi: O.some(fund.value), fundName: O.some(fund.label) });

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

@@ -21,8 +21,9 @@ export class MyOwnFund {
     });
   }
   render() {
+    const superCampaignCanNotBeActivated = superSelectionAppService.superCampaignCanNotBeActivated;
     return (h(Host, null,
-      h("sss-header-section", { currentPage: "own-fund" }),
+      h("sss-header-section", null),
       h("div", { class: "flex justify-center mt-11" },
         h("sss-custom-fund", null,
           h("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
@@ -48,9 +49,9 @@ export class MyOwnFund {
                 h("div", { class: "mb-4", onClick: 
                   // user clicks on disabled button (div wrapper) then validation errors will show
                   () => (this.formState = 'validated') },
-                  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")))))))));
+                  h("sss-button", { testid: "continue-button", fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Continue")),
+                !superCampaignCanNotBeActivated && (h("stencil-route-link", { url: SuperSelectionAppRoutes.ChoicePage },
+                  h("sss-button", { testid: "back-button", fillWidth: true, variant: "secondary" }, "Back"))))))))));
   }
   async handleSubmitForm() {
     this.formState = 'validated';
@@ -65,9 +66,20 @@ export class MyOwnFund {
       this.isNotAllInformationProvidedMessageVisible = true;
       return;
     }
+    if (superSelectionAppService.isBringYourOwnFundCustomStepEnabled &&
+      superSelectionAppService.isUsingSuperCampaign) {
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.MyOwnFundEngagementStep);
+      return;
+    }
     navigationService.navigateInternallyToStandardChoice({
       history: this.history,
       fundName: this.getOrError(customFundState.myOwnFundForm.fundName),
+      fundDetails: {
+        type: 'myOwnFund',
+        fundName: this.getOrError(customFundState.myOwnFundForm.fundName),
+        fundUsi: this.getOrError(customFundState.myOwnFundForm.fundUsi),
+        memberNumber: this.getOrError(customFundState.myOwnFundForm.memberNumber)
+      },
       handleSubmitFn: async (standardChoiceFormSignature) => {
         const customFundChoiceDto = Object.assign({ fundUsi: this.getOrError(customFundState.myOwnFundForm.fundUsi), memberNumber: this.getOrError(customFundState.myOwnFundForm.memberNumber), memberFirstName: this.getOrError(customFundState.myOwnFundForm.memberFirstName), memberFamilyName: this.getOrError(customFundState.myOwnFundForm.memberFamilyName), standardChoiceFormSignature }, superSelectionAppService.promotedFundsConfig);
         await customFundChoiceApi.submitCustomFundChoiceAsync(customFundChoiceDto);

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

@@ -4,11 +4,16 @@ import customFundChoiceApi from '../api/custom-fund-choice.api';
 import customFundState from '../custom-fund.store';
 import { validateAbn } from './abn-validation';
 import bsbNumbers from './bankBsbNumbers';
+var AbnValidationStatus;
+(function (AbnValidationStatus) {
+  AbnValidationStatus[AbnValidationStatus["Invalid"] = 1] = "Invalid";
+  AbnValidationStatus[AbnValidationStatus["AbnIsUsedForRegulatedFund"] = 2] = "AbnIsUsedForRegulatedFund";
+  AbnValidationStatus[AbnValidationStatus["Valid"] = 3] = "Valid";
+})(AbnValidationStatus || (AbnValidationStatus = {}));
 export class SelfManagedFundInputs {
   constructor() {
-    this.isAbnValid = false;
+    this.abnValidationStatus = AbnValidationStatus.Invalid;
     this.isAbnTouched = false;
-    this.isAbnUsedForRegulated = false;
     this.currentBank = none;
     this.addressErrorMessage = none;
     this.stateOptions = [
@@ -40,12 +45,21 @@ export class SelfManagedFundInputs {
         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, inputmode: "numeric", pattern: "[0-9]*", onKeyUp: async (ev) => {
-              const inputAbnValue = ev.target.value;
-              this.updateFormField('fundAbn', inputAbnValue.trim());
-              this.isAbnValid = validateAbn(inputAbnValue);
-              if (this.isAbnValid)
-                this.isAbnUsedForRegulated = await this.isAbnUsedForRegulatedAsync(inputAbnValue);
-              this.updateFormField('isAbnValid', this.isAbnValid);
+              const abnInput = ev.target;
+              this.updateFormField('fundAbn', abnInput.value.trim());
+              this.abnValidationStatus = AbnValidationStatus.Invalid;
+              if (validateAbn(abnInput.value)) {
+                const isAbnUsedForRegulatedFund = await this.isAbnUsedForRegulatedAsync(abnInput.value);
+                this.abnValidationStatus = isAbnUsedForRegulatedFund
+                  ? AbnValidationStatus.AbnIsUsedForRegulatedFund
+                  : AbnValidationStatus.Valid;
+              }
+              // We need to set a custom validity message to trigger css invalid styles for non valid cases
+              const validityMessage = this.abnValidationStatus === AbnValidationStatus.Valid
+                ? ''
+                : 'Enter a valid fund ABN (digits only)';
+              abnInput.setCustomValidity(validityMessage);
+              this.updateFormField('isAbnValid', this.abnValidationStatus === AbnValidationStatus.Valid);
             }, onBlur: () => (this.isAbnTouched = true) }),
           this.renderAbnValidationError())),
       h("div", { class: "mt-3" },
@@ -83,11 +97,11 @@ export class SelfManagedFundInputs {
         h("div", { class: "mt-3 w-1/2" },
           h("label", { class: "text-sm font-medium text-gray-700" }, "Given name(s)"),
           h("div", { class: "mt-1" },
-            h("sss-name-input", { name: "memberFirstName", readableName: "Member given name(s)", showValidationErrors: this.showValidationErrors, value: customFundState.selfManagedFundForm.memberFirstName, onChange: (ev) => this.updateFormField('memberFirstName', ev.target.value.trim()) }))),
+            h("sss-name-input", { testId: "member-given-names-input", name: "memberFirstName", readableName: "Member given name(s)", showValidationErrors: this.showValidationErrors, value: customFundState.selfManagedFundForm.memberFirstName, onChange: (ev) => this.updateFormField('memberFirstName', ev.target.value.trim()) }))),
         h("div", { class: "mt-3 w-1/2" },
           h("label", { class: "text-sm font-medium text-gray-700" }, "Last name"),
           h("div", { class: "mt-1" },
-            h("sss-name-input", { name: "memberFamilyName", readableName: "Member last name", showValidationErrors: this.showValidationErrors, value: customFundState.selfManagedFundForm.memberFamilyName, onChange: (ev) => this.updateFormField('memberFamilyName', ev.target.value.trim()) })))),
+            h("sss-name-input", { testId: "member-last-name-input", name: "memberFamilyName", readableName: "Member last name", showValidationErrors: this.showValidationErrors, value: customFundState.selfManagedFundForm.memberFamilyName, onChange: (ev) => this.updateFormField('memberFamilyName', ev.target.value.trim()) })))),
       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"),
@@ -116,11 +130,13 @@ export class SelfManagedFundInputs {
   }
   renderAbnValidationError() {
     if (this.isAbnTouched || this.showValidationErrors) {
-      if (!this.isAbnValid) {
-        return h("div", { class: "mt-2 text-sm text-red-600" }, "Enter a valid fund ABN (digits only)");
-      }
-      else if (this.isAbnUsedForRegulated) {
-        return (h("div", { class: "mt-2 text-sm text-red-600" }, "The supplied ABN is for a regulated fund"));
+      switch (this.abnValidationStatus) {
+        case AbnValidationStatus.Invalid:
+          return h("div", { class: "mt-2 text-sm text-red-600" }, "Enter a valid fund ABN (digits only)");
+        case AbnValidationStatus.AbnIsUsedForRegulatedFund:
+          return (h("div", { class: "mt-2 text-sm text-red-600" }, "The supplied ABN is for a regulated fund"));
+        case AbnValidationStatus.Valid:
+          return [];
       }
     }
     return [];
@@ -206,9 +222,8 @@ export class SelfManagedFundInputs {
     }
   }; }
   static get states() { return {
-    "isAbnValid": {},
+    "abnValidationStatus": {},
     "isAbnTouched": {},
-    "isAbnUsedForRegulated": {},
     "currentBank": {},
     "addressErrorMessage": {}
   }; }

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

@@ -17,6 +17,11 @@ export class SelfManagedFund {
       navigationService.navigateInternallyToStandardChoice({
         history: this.history,
         fundName: 'Self-managed super fund',
+        fundDetails: {
+          type: 'smsf',
+          fundName: customFundState.selfManagedFundForm.fundName,
+          fundEsa: customFundState.selfManagedFundForm.fundEsa
+        },
         handleSubmitFn: async (standardChoiceFormSignature) => {
           const requestDto = Object.assign({ smsfChoice: {
               abn: customFundState.selfManagedFundForm.fundAbn,
@@ -49,7 +54,7 @@ export class SelfManagedFund {
   }
   render() {
     return (h(Host, null,
-      h("sss-header-section", { currentPage: "own-fund" }),
+      h("sss-header-section", null),
       h("div", { class: "flex justify-center mt-11" },
         h("sss-custom-fund", null,
           h("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
@@ -73,9 +78,9 @@ export class SelfManagedFund {
                 h("div", { class: "mb-4", onClick: 
                   // user clicks on disabled button (div wrapper) then validation errors will show
                   () => (this.formState = 'validated') },
-                  h("sss-button", { fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Continue")),
+                  h("sss-button", { testid: "continue-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")))))))));
+                  h("sss-button", { testid: "back-button", fillWidth: true, variant: "secondary" }, "Back")))))))));
   }
   updateIsSubmitDisabled() {
     this.isSubmitDisabled = !this.formElement.checkValidity() || !this.isAbnValid;

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

@@ -18,5 +18,14 @@ export class PromotedFundChoiceApi {
     })
       .text();
   }
+  async submitDefaultChoiceWithJoinAsync(dto) {
+    return buildBackendApiClient()
+      .url('super-choice/promoted-fund/default-with-join')
+      .post(dto)
+      .badRequest(() => {
+      throw new Error('Failed to process Promoted Default Fund With Join choice request');
+    })
+      .text();
+  }
 }
 export default new PromotedFundChoiceApi();

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

@@ -0,0 +1,4 @@
+export const slate = {
+  fundId: 'slate',
+  usi: '32367272075001'
+};

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

@@ -1,48 +1,18 @@
-import { Component, Fragment, h, Prop } from '@stencil/core';
+import { Component, Fragment, h } from '@stencil/core';
 import { SuperSelectionAppRoutes } from '../services/super-selection-app.routes';
-function renderChooseAnotherFundLink() {
-  function buildRouteLink(route) {
-    return (h("stencil-route-link", { exact: true, url: route, anchorClass: "hover:bg-primary-hover block focus:outline-none focus:ring-2 ring-offset-1 focus:ring-primary-focus focus:z-10 border border-transparent text-gray-700 text-white rounded-md py-2 text-sm font-medium w-auto px-3 sm:px-8 h-full", activeClass: "hover:bg-white block focus:outline-none focus:ring-2 ring-offset-1 focus:ring-primary-focus focus:z-10 rounded-md py-2 text-sm font-medium w-auto px-3 sm:px-8 h-full bg-white border-gray-200 text-gray-900 shadow-sm text-primary-base" }, "Choose another fund"));
-  }
-  if (window.location.href.includes(SuperSelectionAppRoutes.SelfManagedFund)) {
-    return buildRouteLink(SuperSelectionAppRoutes.SelfManagedFund);
-  }
-  if (window.location.href.includes(SuperSelectionAppRoutes.DefaultFund)) {
-    return buildRouteLink(SuperSelectionAppRoutes.DefaultFund);
-  }
-  else {
-    return buildRouteLink(SuperSelectionAppRoutes.MyOwnFund);
-  }
-}
+import superSelectionAppService from '../services/super-selection-app.service';
 export class HeaderSection {
   render() {
     return (h("div", { class: "flex justify-center" },
       h("div", { class: "text-center max-w-800" },
         h("h3", { class: "font-bold mb-3 sm:mb-4 text-2xl sm:text-3xl" }, "Nominate a super fund"),
         h(Fragment, null,
-          h("div", { class: "text-gray-600 sm:text-lg leading-7 sm:leading-8" }, "You can choose any super fund, including your current fund/SMSF, your employer\u2019s default fund, or alternatively, you can select from one of the featured\u00A0funds."),
-          h("div", { class: "inline-flex mt-8 sm:mt-12 bg-primary-base rounded-lg p-0.5 whitespace-normal" },
-            h("stencil-route-link", { exact: true, url: SuperSelectionAppRoutes.ChoicePage, anchorClass: "hover:bg-primary-hover block focus:outline-none focus:ring-2 ring-offset-1 focus:ring-primary-focus relative focus:z-10 border border-transparent text-gray-700 text-white rounded-md py-2 text-sm font-medium w-auto px-3 sm:px-8 h-full", activeClass: "hover:bg-white block focus:outline-none focus:ring-2 ring-offset-1 focus:ring-primary-focus focus:z-10 rounded-md py-2 text-sm font-medium w-auto px-3 sm:px-8 h-full bg-white border-gray-200 text-gray-900 shadow-sm text-primary-base" }, "Featured super funds"),
-            renderChooseAnotherFundLink())))));
+          h("div", { class: "text-gray-600 sm:text-lg leading-7 sm:leading-8" }, superSelectionAppService.superCampaignCanNotBeActivated ? (h(Fragment, null, "You can choose any super fund, including your current fund/SMSF or your employer\u2019s default fund.")) : (h(Fragment, null, "You can choose any super fund, including your current fund/SMSF, your employer\u2019s default fund, or alternatively, you can select from one of the featured\u00A0funds."))),
+          !superSelectionAppService.superCampaignCanNotBeActivated && (h("stencil-route-link", { url: SuperSelectionAppRoutes.ChoicePage },
+            h("a", { class: "inline-flex items-center mt-3 font-semibold text-primary-base" },
+              h("svg", { width: "16", height: "10", viewBox: "0 0 16 10", fill: "none", class: "mr-1", xmlns: "http://www.w3.org/2000/svg" },
+                h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.7071 9.70711C5.31657 10.0976 4.68341 10.0976 4.29288 9.70711L0.29288 5.70711C-0.0976448 5.31658 -0.0976448 4.68342 0.29288 4.29289L4.29288 0.292893C4.68341 -0.0976315 5.31657 -0.0976315 5.7071 0.292893C6.09762 0.683417 6.09762 1.31658 5.7071 1.70711L3.4142 4L15 4C15.5523 4 16 4.44772 16 5C16 5.55228 15.5523 6 15 6L3.4142 6L5.7071 8.29289C6.09762 8.68342 6.09762 9.31658 5.7071 9.70711Z", fill: "currentColor" })),
+              h("span", { class: "leading-5 text-sm" }, "Back to featured funds"))))))));
   }
   static get is() { return "sss-header-section"; }
-  static get properties() { return {
-    "currentPage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'choice' | 'own-fund'",
-        "resolved": "\"choice\" | \"own-fund\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "current-page",
-      "reflect": false
-    }
-  }; }
 }

package/dist/lib/collection/components/super-selection-app/misc/button.js

@@ -22,7 +22,7 @@ export class Button {
       base: 'px-4 py-2 text-base',
       xl: 'px-6 py-3 text-base'
     };
-    return (h("button", { class: {
+    return (h("button", { "data-testid": this.testid, class: {
         [sizeCss[this.size]]: true,
         'inline-flex items-center justify-center border font-medium': true,
         'rounded-md shadow-sm focus:outline-none focus:ring-2': true,
@@ -30,6 +30,7 @@ export class Button {
         'disabled:pointer-events-none disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-400': true,
         'border-transparent text-white bg-primary-base hover:bg-primary-hover': this.variant === 'primary',
         'border-gray-300 text-gray-700 bg-white hover:bg-gray-50': this.variant === 'secondary',
+        'border-transparent bg-primary-light hover:bg-primary-base text-primary-dark hover:text-white': this.variant === 'light',
         'w-full': this.fillWidth || this.fillWidthOnMobile,
         'sm:w-auto': this.fillWidthOnMobile
       }, disabled: this.disabled, onClick: () => this.clicked() },
@@ -52,6 +53,23 @@ export class Button {
   }
   static get is() { return "sss-button"; }
   static get properties() { return {
+    "testid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "testid",
+      "reflect": false
+    },
     "fillWidth": {
       "type": "boolean",
       "mutable": false,
@@ -111,7 +129,7 @@ export class Button {
       "mutable": false,
       "complexType": {
         "original": "ButtonVariant",
-        "resolved": "\"primary\" | \"secondary\"",
+        "resolved": "\"light\" | \"primary\" | \"secondary\"",
         "references": {
           "ButtonVariant": {
             "location": "local"