Feature/wf 2024 florian

.github/actions/node-step/action.yml

@@ -16,25 +16,6 @@ inputs:
 runs:
   using: "composite"
   steps:
-    ##
-    # Creates a cache of project's node_module and Angular's cache.
-    # This cache will always be fetched while nothing changes in the lock file.
-    ##
-    - name: Cache node modules
-      id: cache
-      uses: actions/cache@v4
-      env:
-        cache-name: cache-node-modules
-      with:
-        path: |
-          ${{ inputs.working-directory }}/node_modules
-          ${{ inputs.working-directory }}/node_modules/.cache
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles(format('{0}/**/package-lock.json', inputs.working-directory)) }}
-        restore-keys: |
-          ${{ runner.os }}-build-${{ env.cache-name }}-
-          ${{ runner.os }}-build-
-          ${{ runner.os }}-
-
     - name: Setup Node.js
       uses: actions/setup-node@v4
       with:

.github/workflows/pull-request_test.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Pull Request Prerequisite Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://repo.backbase.com/api/npm/npm-backbase/"
+          scope: "@backbase"
+
+      - name: Install deps
+        run: npm install --force
+        shell: bash
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Build app
+        run: npm run build

.gitignore

@@ -55,3 +55,4 @@ playwright-report/
 allure-results/
 test-output/
 .nx
+/.local/

apps/golden-sample-app/src/app/app.component.html

@@ -13,17 +13,22 @@
   <nav class="bb-layout__topbar">
     <!-- Skip to content -->
     <button
-      i18n-aria-label="
-        Move focus to beginning of content|Value for aria-label saying that this
-        button will move the focus to the beginning of the content
-      "
       aria-label="skip to content"
+      i18n-aria-label="
+        Move focus to beginning of content - 'skip to content'|This string is
+        used as the aria-label for a button that moves the focus to the
+        beginning of the content. It is presented to the user as an
+        accessibility feature to quickly navigate to the main content section.
+        This aria-label is located in the topbar area of the
+        layout.@@move-focus-to-beginning-of-content"
       class="bb-layout__skip-to-content"
       (click)="focusMainContainer($event)"
       i18n="
-        Skip to content|Text to enforce the user to click to put focus on the
-        main content section
-      "
+        Skip to content - 'Skip to content'|This string is used as the text for
+        a button that moves the focus to the beginning of the content. It is
+        presented to the user as an accessibility feature to quickly navigate to
+        the main content section. This text is located in the topbar area of the
+        layout.@@skip-to-content"
     >
       Skip to Content
     </button>
@@ -33,8 +38,11 @@
       class="bb-layout__nav-expand-marker"
       aria-label="Toggle sidebar"
       i18n-aria-label="
-        Sidebar Toggler|Button for toggling sidebar
-        state@@bb-layout.sidebar_toggler"
+        Sidebar Toggler - 'Toggle sidebar'|This string is used as the aria-label
+        for a button that toggles the sidebar state. It is presented to the user
+        as an accessibility feature to indicate the button's function. This
+        aria-label is located in the topbar area of the
+        layout.@@bb-layout.sidebar_toggler"
       [attr.aria-expanded]="layoutService.navigationExpanded$ | async"
       (click)="layoutService.toggleNav()"
     >
@@ -64,7 +72,12 @@
           ></bb-icon-ui>
           <span
             class="bb-layout__horizontal-nav-item-description"
-            i18n="make transfer link@@main.transfer.link.text"
+            i18n="
+              Make transfer link - 'Make transfer'|This string is used as the
+              text for a link that navigates to the transfer page. It is
+              presented to the user as a navigation item in the horizontal
+              navigation bar. This text is located in the navigation items
+              section of the layout.@@main.transfer.link.text"
           >
             Make transfer
           </span>
@@ -90,7 +103,12 @@
           ></bb-icon-ui>
           <span
             class="bb-layout__horizontal-nav-item-description"
-            i18n="transactions list link@@main.transactions.link.text"
+            i18n="
+              Transactions list link - 'Transactions List'|This string is used
+              as the text for a link that navigates to the transactions list
+              page. It is presented to the user as a navigation item in the
+              horizontal navigation bar. This text is located in the navigation
+              items section of the layout.@@main.transactions.link.text"
           >
             Transactions List
           </span>
@@ -115,7 +133,12 @@
           ></bb-icon-ui>
           <span
             class="bb-layout__horizontal-nav-item-description"
-            i18n="Positive pay link@@main.positive-pay.link.text"
+            i18n="
+              Positive pay link - 'Positive Pay'|This string is used as the text
+              for a link that navigates to the Positive Pay page. It is
+              presented to the user as a navigation item in the horizontal
+              navigation bar. This text is located in the navigation items
+              section of the layout.@@main.positive-pay.link.text"
           >
             Positive Pay
           </span>
@@ -141,7 +164,12 @@
 
           <span
             class="bb-layout__horizontal-nav-item-description"
-            i18n="Ach Positive pay link@@main.ach-positive-pay.link.text"
+            i18n="
+              Ach Positive pay link - 'ACH Positive Pay'|This string is used as
+              the text for a link that navigates to the ACH Positive Pay page.
+              It is presented to the user as a navigation item in the horizontal
+              navigation bar. This text is located in the navigation items
+              section of the layout.@@main.ach-positive-pay.link.text"
           >
             ACH Positive Pay
           </span>
@@ -164,7 +192,12 @@
 
           <span
             class="bb-layout__horizontal-nav-item-description"
-            i18n="Make a Payment Link@@main.make-a-payment.link.text"
+            i18n="
+              Make a Payment Link - 'Make internal payment'|This string is used
+              as the text for a link that navigates to the internal payment
+              page. It is presented to the user as a navigation item in the
+              horizontal navigation bar. This text is located in the navigation
+              items section of the layout.@@main.make-a-payment.link.text"
           >
             Make internal payment
           </span>

apps/golden-sample-app/src/app/custom-payment/custom-payment.config.ts

@@ -34,14 +34,14 @@ const initiator: PaymentFormGroup = {
       type: 'customInitiator',
       name: InitiatorFields.initiatorAccountGroup,
       options: {
-        label: $localize`:@@internal-config.initiator-label:From`,
-        placeholder: $localize`:@@internal-config.initiator-placeholder:Select an account`,
+        label: $localize`:Initiator Label - 'From'|This string is used as a label for the initiator account selection field in the custom payment form. It is presented to the user when they need to select an account to transfer from. This label is located in the custom payment form layout.@@internal-config.initiator-label:From`,
+        placeholder: $localize`:Initiator Placeholder - 'Select an account'|This string is used as a placeholder for the initiator account selection field in the custom payment form. It is presented to the user when they need to select an account to transfer from. This placeholder is located in the custom payment form layout.@@internal-config.initiator-placeholder:Select an account`,
         cssClasses: ['col-12', 'bb-block', 'bb-block--lg'],
         validators: [Validators.required],
         validationMessages: [
           {
             name: 'required',
-            message: 'Please select an account from the list to transfer from',
+            message: $localize`:Initiator Required Field Validation Message - 'Please select an account from the list to transfer from'|This string is used as a validation message for the initiator account selection field in the custom payment form. It is presented to the user when they attempt to submit the form without selecting an account to transfer from. This message is located in the custom payment form layout.@@mediator:Please select an account from the list to transfer from`,
           },
         ],
       },
@@ -62,13 +62,13 @@ const counterParty: PaymentFormGroup = {
       type: PaymentComponents.internalAccountSelector,
       name: CounterPartyFields.counterPartyAccountGroup,
       options: {
-        label: $localize`:@@internal-config.beneficiary-label:To`,
-        placeholder: $localize`:@@internal-config.beneficiary-placeholder:Select an account`,
+        label: $localize`:Beneficiary Label - 'To'|This string is used as a label for the beneficiary account selection field in the custom payment form and in the internal transfer form. It is presented to the user when they need to select an account to transfer to. This label is located in the custom payment form layout and in the internal transfer form layout.@@internal-config.beneficiary-label:To`,
+        placeholder: $localize`:Beneficiary Placeholder - 'Select an account'|This string is used as a placeholder for the beneficiary account selection field in the custom payment form and in the internal transfer form. It is presented to the user when they need to select an account to transfer to. This placeholder is located in the custom payment form layout and in the internal transfer form layout.@@internal-config.beneficiary-placeholder:Select an account`,
         cssClasses: ['col-12', 'bb-block', 'bb-block--lg'],
         validationMessages: [
           {
             name: 'required',
-            message: 'Please select an account from the list to transfer to',
+            message: $localize`:Beneficiary Required Field Validation Message - 'Please select an account from the list to transfer to'|This string is used as a validation message for the beneficiary account selection field in the custom payment form. It is presented to the user when they attempt to submit the form without selecting an account to transfer to. This message is located in the custom payment form layout.@@internal-config.beneficiary-required-messag:Please select an account from the list to transfer to`,
           },
         ],
       },
@@ -92,7 +92,7 @@ const remittanceInfo: PaymentFormGroup = {
       name: PaymentComponents.header,
       options: {
         cssClasses: ['col-12', 'pb-0', 'pt-2', 'bb-fieldset__heading'],
-        heading: $localize`:@@internal-config.remittance-info-heading:Payment details`,
+        heading: $localize`:Payment details heading - 'Payment details'|This string is used as a heading for the remittance info as a header in the custom payment journey.It is presented to the user when they need to check the remittent of payment details@@internal-config.remittance-info-heading:Payment details`,
         headingType: 'h2',
         headingClasses: ['mb-0'],
         separatorLine: true,
@@ -102,7 +102,7 @@ const remittanceInfo: PaymentFormGroup = {
       type: PaymentComponents.amount,
       name: RemittanceInfoFields.amountCurrencyGroup,
       options: {
-        label: 'Amount',
+        label: $localize`:Amount Label - 'Amount'|This string is used as a label for the amount input field in the custom payment form. It is presented to the user when they need to enter the amount for the transfer. This label is located in the custom payment form layout.@@internal-config.amount-label:Amount`,
         cssClasses: ['d-block', 'align-top'],
         currencies: ['USD'],
         defaultValue: {
@@ -112,11 +112,11 @@ const remittanceInfo: PaymentFormGroup = {
         validationMessages: [
           {
             name: 'invalidAmount',
-            message: 'Please enter an amount of this transfer',
+            message: $localize`:Invalid Amount Validation Message - 'Please enter an amount of this transfer'|This string is used as a validation message for the amount input field in the custom payment form. It is presented to the user when they enter an invalid amount for the transfer. This message is located in the custom payment form layout.@@internal-config.invalid-amount-message:Please enter an amount of this transfer`,
           },
           {
             name: 'fundingBalence',
-            message: 'Funding account balance is less than payment amount.',
+            message: $localize`:Funding Balance Validation Message - 'Funding account balance is less than payment amount.|This string is used as a validation message for the amount input field in the custom payment form. It is presented to the user when the funding account balance is less than the payment amount. This message is located in the custom payment form layout.@@internal-config.funding-balance-message:Funding account balance is less than payment amount.`,
           },
         ],
       },
@@ -126,13 +126,13 @@ const remittanceInfo: PaymentFormGroup = {
       type: PaymentComponents.textarea,
       name: RemittanceInfoFields.description,
       options: {
-        label: 'Add Note',
-        placeholder: $localize`:@@internal-config.add-Enter transfer description-placeholder:Enter transfer description`,
+        label: $localize`:Add Note Label - 'Add Note'|This string is used as a label for the note input field in the custom payment form. It is presented to the user when they need to add a note or description for the transfer. This label is located in the custom payment form layout.@@internal-config.add-note-label:Add Note`,
+        placeholder: $localize`:Add Note Placeholder - 'Enter transfer description'|This string is used as a placeholder for the note input field in the custom payment form. It is presented to the user when they need to add a note or description for the transfer. This placeholder is located in the custom payment form layout.@@internal-config.add-Enter transfer description-placeholder:Enter transfer description`,
         showCharCounter: true,
         minLength: 0,
         rows: 2,
         maxLength: 140,
-        helperText: $localize`:@@internal-config.add-memo-helper-text: (Optional)`,
+        helperText: $localize`:Add Note Helper Text - ' (Optional)'|This string is used as helper text for the note input field in the custom payment form. It is presented to the user to indicate that adding a note or description for the transfer is optional. This helper text is located in the custom payment form layout.@@internal-config.add-memo-helper-text: (Optional)`,
         cssClasses: ['bb-block', 'bb-block--lg'],
       },
     },
@@ -169,10 +169,10 @@ const schedule: PaymentFormGroup = {
 
 export const INTERNAL_TRANSFERS: PaymentTypeConfig = {
   fields: [initiator, counterParty, remittanceInfo, schedule],
-  name: $localize`:@@internal-config.name:Internal Transfer`,
+  name: $localize`:Internal Transfer Name - 'Internal Transfer'|This string is used as the name for the internal transfer payment type configuration. It is presented to the user when they are selecting or viewing the internal transfer payment type. This name is located in the internal transfer payment type configuration.@@internal-config.name:Internal Transfer`,
   // dummy payment type and business function for the sake of this example
   paymentType: 'INTERNAL_TRANSFER',
-  businessFunction: 'A2A Transfer',
+  businessFunction: $localize`:Business Function for Internal Transfer - 'A2A Transfer'|This string is used as the business function identifier for the internal transfer payment type configuration. It is used internally to specify the type of business function associated with the internal transfer. This identifier is located in the internal transfer payment type configuration.@@internal-config.business-function:A2A Transfer`,
   // customFields property needs to be set here too due to a known bug
   customFields: {
     customInitiator: InitiatorComponent,
@@ -188,7 +188,7 @@ export const customPaymentConfig: InitiatePaymentConfig = {
     reviewScreenType: ReviewScreens.ADAPTED,
     isModalView: false,
     header: () =>
-      $localize`:Make a Payment Link@@main.make-a-payment.link.text:Make internal payment (custom)`,
+      $localize`:Make a Payment Link - 'Make internal payment (custom)'|This string is used as the header text for the custom payment form. It is presented to the user when they are making an internal payment using the custom payment form. This header is located at the top of the custom payment form layout.@@main.make-a-payment.link.text:Make internal payment (custom)`,
   },
   /**
    * Use hooks to perform additional logic at different stages of Payments journey. For eg,