@flarehr/apollo-super-selection 5.12.47777 → 5.14.48686

package/dist/lib/collection/collection-manifest.json

@@ -8,6 +8,7 @@
     "./components/app-host/super-selection-app-host.js",
     "./components/super-campaign/super-campaign.js",
     "./components/super-selection-app/app-state-pages/success.js",
+    "./components/super-selection-app/consent/consent-wrapper.js",
     "./components/super-selection-app/consent/consent.js",
     "./components/super-selection-app/existing-choice/existing-choice.js",
     "./components/super-selection-app/footer-section/footer-section.js",
@@ -34,6 +35,7 @@
     "./components/super-selection-app/prefill-fund/prefill-warning-box.js",
     "./components/super-selection-app/prefill-fund/prefill.js",
     "./components/super-selection-app/standard-choice/standard-choice-form.js",
+    "./components/super-selection-app/super-choice-page/super-choice-page-wrapper.js",
     "./components/super-selection-app/super-choice-page/super-choice-page.js",
     "./components/super-selection-app/super-choice-page/super-choice-item/super-choice-item-bottom.js",
     "./components/super-selection-app/super-choice-page/super-choice-item/super-choice-item-top.js"
@@ -69,6 +71,7 @@
       "components": [
         "sss-button",
         "sss-consent-page",
+        "sss-consent-page-wrapper",
         "sss-custom-fund",
         "sss-default-fund",
         "sss-dropdown-async",
@@ -102,6 +105,7 @@
         "sss-super-choice-item-bottom",
         "sss-super-choice-item-top",
         "sss-super-choice-page",
+        "sss-super-choice-page-wrapper",
         "stencil-route",
         "stencil-route-link",
         "stencil-route-switch",

package/dist/lib/collection/components/super-campaign/super-campaign.js

@@ -156,7 +156,6 @@ export class SuperCampaignHost {
     this.handlePromotedFundJoined = (data) => {
       if (this.stringIsNullOrEmtpty(data.memberNumber) || this.stringIsNullOrEmtpty(data.usi)) {
         appInsightsService.trackErrorTrace('Super Campaign did not return (Promoted) memberNumber and/or usi');
-        navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.ChoicePage);
         return;
       }
       const usi = Usi.clean(data.usi);
@@ -267,6 +266,7 @@ export class SuperCampaignHost {
       //TODO: Handle error
       // eslint-disable-next-line no-console
       console.error('Error loading component:', error);
+      appInsightsService.trackErrorTrace(`Error in loading Super Campaign: ${error}`);
     }
   }
   disconnectedCallback() {

package/dist/lib/collection/components/super-selection-app/app-state-pages/success.js

@@ -26,7 +26,7 @@ export class Success {
       h("p", { class: "mt-4 text-center text-gray-600 leading-7 max-w-560 mx-auto" }, "Your superannuation details have been updated successfully and will be submitted to your employer."),
       h("div", { class: "flex justify-center mt-8" },
         h("div", { class: "max-w-[200px] w-full" },
-          h("sss-button", { size: "xl", fillWidth: true, onClick: this.handleContinueButtonClick },
+          h("sss-button", { testid: "continue-button", size: "xl", fillWidth: true, onClick: this.handleContinueButtonClick },
             h("span", null, "Continue"))))));
   }
   handleContinueButtonClick(_event) {

package/dist/lib/collection/components/super-selection-app/consent/consent-wrapper.js

@@ -0,0 +1,32 @@
+import { Component, h, Prop } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
+import superSelectionService from '../services/super-selection-app.service';
+export class ConsentWrapper {
+  render() {
+    return superSelectionService.state.superCampaignEnabled ? (h("sss-super-campaign-host", null)) : (h("sss-consent-page", null));
+  }
+  static get is() { return "sss-consent-page-wrapper"; }
+  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": ""
+      }
+    }
+  }; }
+}
+injectHistory(ConsentWrapper);

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

@@ -1,4 +1,5 @@
 import { Component, h, Prop, State } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
 import { isSome } from 'fp-ts/lib/Option';
 import { SuperFundDisclaimerViewedDetail } from '../api/super-selection-events.model';
 import promotedFundState from '../funds/promoted-fund/promoted-fund.store';
@@ -36,7 +37,7 @@ export class Consent {
               ' ',
               h(Link, { className: "font-medium text-blue-600 hover:text-blue-800", href: "https://www.flarehr.com/privacy-policy" }, "Privacy Policy"),
               ".")),
-          h("sss-button", { fillWidth: true, promiseFn: () => this.handleSuperFundDisclaimerAccepted() }, "Continue")))));
+          h("sss-button", { testid: "continue-button", fillWidth: true, promiseFn: () => this.handleSuperFundDisclaimerAccepted() }, "Continue")))));
   }
   async handleSuperFundDisclaimerAccepted() {
     await this.eventTrackingService.TrackSuperFundDisclaimerAcceptedAsync({
@@ -84,3 +85,4 @@ export class Consent {
     "campaignConnectRequestInProgress": {}
   }; }
 }
+injectHistory(Consent);

package/dist/lib/collection/components/super-selection-app/existing-choice/existing-choice.js

@@ -80,7 +80,7 @@ export class ExistingChoice {
     };
     const ChooseAnotherFundView = () => {
       return this.existingFund.type == 'Defined Benefits Fund' ? null : (h("div", { class: "mt-4" },
-        h("sss-button", { fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund")));
+        h("sss-button", { testid: "choose-another-fund-button", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund")));
     };
     return (h("div", null,
       h("div", { class: "text-2xl sm:text-3xl font-bold text-center" }, "Your super nomination"),
@@ -125,7 +125,7 @@ export class ExistingChoice {
                 }
               })())),
             h("div", { class: "mt-6" },
-              h("sss-button", { fillWidth: true, promiseFn: () => this.handleFundNominationAccepted() }, "Continue with this fund"))),
+              h("sss-button", { testid: "continue-with-this-fund-button", fillWidth: true, promiseFn: () => this.handleFundNominationAccepted() }, "Continue with this fund"))),
           h(ChooseAnotherFundView, null)))));
   }
   async handleFundNominationAccepted() {

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

@@ -64,9 +64,9 @@ export class DefaultFund {
           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("sss-button", { testid: "continue-button", fillWidth: true, promiseFn: () => this.handleSubmitForm() }, "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"))))))));
   }
   async handleSubmitForm() {
     if (this.isInvalidDefaultFund) {

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

@@ -11,7 +11,7 @@ export class MemberNameInput {
   }
   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
@@ -50,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-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

@@ -48,9 +48,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("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")))))))));
   }
   async handleSubmitForm() {
     this.formState = 'validated';

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

@@ -78,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/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,
@@ -53,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,

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

@@ -148,7 +148,7 @@ export class SelectInputAsync {
     var _a;
     return (h(Host, null,
       h("div", { class: "relative" },
-        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:placeholder-red-300 invalid:focus:ring-red-500 invalid:focus:border-red-500': this
               .showValidationErrors
@@ -176,6 +176,23 @@ export class SelectInputAsync {
     "$": ["dropdown-async.css"]
   }; }
   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
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,

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

@@ -61,7 +61,7 @@ export class PrefillInvalidMyOwnFund {
               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", { class: "self-stretch", fillWidth: true, variant: "primary", promiseFn: () => this.handleChooseAnotherFund() }, "Choose another fund")))));
+          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);

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

@@ -60,7 +60,7 @@ export class PrefillInvalidSMSF {
               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", { class: "self-stretch", fillWidth: true, variant: "primary", promiseFn: () => this.handleFundNominationDeclined() }, "Make another nomination")))));
+          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);

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

@@ -68,7 +68,7 @@ export class PrefillMyOwnFund {
               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", { class: "self-stretch mt-3", fillWidth: true, variant: "secondary", promiseFn: () => this.setModeToEdit() },
+            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" },
@@ -101,8 +101,8 @@ export class PrefillMyOwnFund {
                       } }),
                     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", { class: "self-stretch", fillWidth: true, variant: "primary", disabled: this.isSubmitDisabled, promiseFn: () => this.handleSubmitForm() }, "Continue"),
-          h("sss-button", { class: "self-stretch", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Choose another fund")))));
+          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);

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

@@ -81,7 +81,7 @@ export class PrefillSMSF {
               h("sss-prefill-display-field", { field: this.bankAccountBsb }),
               this.bankName.isValid && (h("sss-prefill-display-field", { field: this.bankName })),
               h("sss-prefill-display-field", { field: this.bankAccountNumber }))),
-            this.mode === 'review' && (h("sss-button", { class: "self-stretch mt-3", fillWidth: true, variant: "secondary", promiseFn: () => this.setModeToEdit() },
+            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" },
@@ -175,8 +175,8 @@ export class PrefillSMSF {
                     } }),
                   h("div", { class: "mt-2 text-sm text-red-600" }, this.formState === 'validated' && this.bankAccountNumber.errorMessage))))))),
         h("div", { class: "flex w-full sm:w-80 max-w-[560px] flex-col items-start gap-4" },
-          h("sss-button", { class: "self-stretch", fillWidth: true, variant: "primary", disabled: this.isSubmitDisabled, promiseFn: () => this.handleSubmitForm() }, "Continue"),
-          h("sss-button", { class: "self-stretch", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Make another nomination")))));
+          h("sss-button", { testid: "continue-button", class: "self-stretch", fillWidth: true, variant: "primary", disabled: this.isSubmitDisabled, promiseFn: () => this.handleSubmitForm() }, "Continue"),
+          h("sss-button", { testid: "make-another-nomination-button", class: "self-stretch", fillWidth: true, variant: "secondary", promiseFn: () => this.handleFundNominationDeclined() }, "Make another nomination")))));
   }
   isFormValid() {
     return (this.fundName.isValid &&

package/dist/lib/collection/components/super-selection-app/services/super-selection-app.routes.js

@@ -20,10 +20,10 @@ export var SuperSelectionAppRoutes;
   SuperSelectionAppRoutes["Success"] = "/success/";
 })(SuperSelectionAppRoutes || (SuperSelectionAppRoutes = {}));
 export const superSelectionAppStencilRoutes = [
-  h("stencil-route", { url: SuperSelectionAppRoutes.ConsentPage, component: "sss-consent-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.ConsentPage, component: "sss-consent-page-wrapper" }),
   h("stencil-route", { url: SuperSelectionAppRoutes.ExistingChoicePage, component: "sss-existing-choice-page" }),
   h("stencil-route", { url: SuperSelectionAppRoutes.SuperCampaign, component: "sss-super-campaign-host" }),
-  h("stencil-route", { exact: true, url: SuperSelectionAppRoutes.ChoicePage, component: "sss-super-choice-page" }),
+  h("stencil-route", { exact: true, url: SuperSelectionAppRoutes.ChoicePage, component: "sss-super-choice-page-wrapper" }),
   h("stencil-route", { url: SuperSelectionAppRoutes.SlateJoin, component: "sss-slate-join-page" }),
   h("stencil-route", { url: SuperSelectionAppRoutes.PromotedFundJoinV1, component: "sss-promoted-fund-join-v1-page" }),
   h("stencil-route", { url: SuperSelectionAppRoutes.PromotedFundJoinV2, component: "sss-promoted-fund-join-v2-page" }),

package/dist/lib/collection/components/super-selection-app/standard-choice/standard-choice-form.js

@@ -35,7 +35,7 @@ export class StandardChoiceFormInputDefaultFund {
                 h("div", { class: "text-xs font-semibold text-gray-500 uppercase" }, "Nominated fund"),
                 h("div", { class: "text-sm mt-2" }, standardChoiceFormState.fundName)),
               h("div", { class: "grid content-center ml-4" },
-                h("sss-button", { size: "xs", variant: "secondary", promiseFn: async () => {
+                h("sss-button", { testid: "change-fund-button", size: "xs", variant: "secondary", promiseFn: async () => {
                     await this.trackChangeRequestedAsync();
                     const changeFundRoute = isSome(superSelectionAppService.state.superChoicePrefill)
                       ? SuperSelectionAppRoutes.ConsentPage
@@ -55,13 +55,13 @@ export class StandardChoiceFormInputDefaultFund {
                 'was-validated': this.formState === 'validated'
               }, ref: (el) => (this.formElement = el), onInput: (_) => (this.isSubmitDisabled = !this.formElement.checkValidity()) },
               h("label", { class: "text-sm font-medium text-gray-700" }, "Type your full name"),
-              h("input", { type: "text", autocomplete: "off", class: {
+              h("input", { "data-testid": "standard-choice-form-signature-input", type: "text", autocomplete: "off", class: {
                   'shadow-sm focus:ring-primary-focus focus:border-primary-focus w-full text-base sm:text-sm border-gray-300 rounded-md mt-1': true,
                   'invalid:border-red-300 invalid:text-red-900 invalid:focus:ring-red-500 invalid:focus:border-red-500': this.formState === 'validated'
                 }, required: true, minlength: "2", name: "standardChoiceFormSignature", id: "standardChoiceFormSignature", value: this.standardChoiceFormSignature, onInput: (event) => (this.standardChoiceFormSignature = event.target.value) }),
               h("div", { class: "invalid-feedback mt-2 text-sm text-red-600" }, "Type your full name"),
               h("div", { class: "mt-6" },
-                h("sss-button", { fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Confirm and continue"))))))));
+                h("sss-button", { testid: "confirm-and-continue-button", fillWidth: true, promiseFn: () => this.handleSubmitForm(), disabled: this.isSubmitDisabled }, "Confirm and continue"))))))));
   }
   renderLogo() {
     if (standardChoiceFormState.promotedFundId == undefined)

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-item/super-choice-item-bottom.js

@@ -5,7 +5,7 @@ export class SuperChoiceItemBottom {
       h("div", { class: "py-6 px-4 flex flex-col justify-between h-full" },
         h("div", null,
           h("div", { class: { 'md:max-w-[240px]': true, 'lg:max-w-full': this.isMultiFund } },
-            h("sss-button", { class: "uuid-button-continue", fillWidth: true, onClick: () => this.handleFundClick() }, "Choose this fund")),
+            h("sss-button", { testid: "choose-this-fund-button", class: "uuid-button-continue", fillWidth: true, onClick: () => this.handleFundClick() }, "Choose this fund")),
           h("div", { class: "text-xs text-gray-500 mt-6 leading-4" }, this.disclaimer)),
         this.abnInfo && this.abn && (h("div", { class: "text-xs text-gray-500 mt-2" },
           h("p", null,

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-page-wrapper.js

@@ -0,0 +1,32 @@
+import { Component, h, Prop } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
+import superSelectionService from '../services/super-selection-app.service';
+export class SuperChoicePageWrapper {
+  render() {
+    return superSelectionService.state.superCampaignEnabled ? (h("sss-super-campaign-host", null)) : (h("sss-super-choice-page", null));
+  }
+  static get is() { return "sss-super-choice-page-wrapper"; }
+  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": ""
+      }
+    }
+  }; }
+}
+injectHistory(SuperChoicePageWrapper);

package/dist/lib/collection/components/super-selection-app/super-choice-page/super-choice-page.js

@@ -1,4 +1,5 @@
 import { Component, getAssetPath, h, Host, Prop, State } from '@stencil/core';
+import { injectHistory } from '@stencil/router';
 import * as O from 'fp-ts/lib/Option';
 import * as constants from '../funds/constants';
 import promotedFundState from '../funds/promoted-fund/promoted-fund.store';
@@ -82,7 +83,7 @@ export class SuperChoicePage {
                 ' ',
                 h("a", { class: "text-primary-base font-medium hover:text-primary-hover", target: "_blank", href: navigationService.toExternalUrl(superfundsLink) }, superfundsLinkDisplay))),
             h("stencil-route-link", { url: SuperSelectionAppRoutes.MyOwnFund },
-              h("sss-button", { fillWidthOnMobile: true }, "Choose another super fund")))),
+              h("sss-button", { testid: "choose-another-super-fund-button", fillWidthOnMobile: true }, "Choose another super fund")))),
         h("div", { class: "flex justify-center" },
           h("div", { class: "pt-8 sm:pt-12 max-w-720" },
             h("h5", { class: "font-semibold" }, "IMPORTANT INFORMATION:"),
@@ -171,3 +172,4 @@ export class SuperChoicePage {
     "promotedFunds": {}
   }; }
 }
+injectHistory(SuperChoicePage);