Showroom Mobile Banking

<div class="std-main-content-container">

  <div class="std-content-title">

    {{ 'e_fixed_deposit' | translate }}

    <nz-breadcrumb>

      <nz-breadcrumb-item>{{

        'e_fixed_deposit' | translate

      }}</nz-breadcrumb-item>

      <nz-breadcrumb-item>

        <a [routerLink]="['/side/EfdPlacementPage']">{{

          'place_fixed_deposit' | translate

        }}</a>

      </nz-breadcrumb-item>

    </nz-breadcrumb>

  </div>

  <nz-content class="std-content-container">

    <div class="top-desc">{{ 'fill_in_the_details' | translate }}</div>

    <div class="input-div" *ngIf="!chooseBankInterface">

      <form nz-form>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'fixed_deposit_promotion' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <input

              id="fixedDepositPromotion"

              disabled

              placeholder="{{ 'fixed_deposit_promotion' | translate }}"

              [(ngModel)]="isFixedDepositPromotionStr"

              type="text"

              class="busconst-input"

              nz-input

              name="fixedDepositPromotion"

              [ngModelOptions]="{ standalone: true }"

            />

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]" class="transfer-from-bank-form-item">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'transfer_from_bank' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [(ngModel)]="chosenFromBankData"

              nzShowSearch

              nzAllowClear

              [nzLoading]="selectionDropdownDataLoading"

              nzPlaceHolder="{{ 'transfer_from_bank' | translate }}"

              (ngModelChange)="choseFromBankDropDown($event)"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option-group nzLabel="{{ 'own_bank' | translate }}">

                <nz-option

                  [nzValue]="{ bank: defaultBank, ownBank: true, index: 0 }"

                  [nzLabel]="defaultBank.bankName"

                >

                </nz-option>

              </nz-option-group>

              <nz-option-group nzLabel="{{ 'others' | translate }}">

                <nz-option

                  *ngFor="

                    let bank of (efdPlacementList$ | async)[0]?.body?.fpxBankList;

                    let i = index

                  "

                  [nzValue]="{ bank: bank, ownBank: false, index: 0 }"

                  [nzLabel]="bank.bankName"

                ></nz-option>

              </nz-option-group>

            </nz-select>

            <!-- <label (click)="chooseBank()" *ngIf="isObjectEmpty(chosenFromBank)" nz-row

              class="item-vertical-center pointer-cursor label-box">

              <div class="please-select-txt">{{'please_select' | translate}}</div>

              <i nz-icon nzType="caret-down" nzTheme="outline"></i>

            </label>

            <label class="pointer-cursor label-box" (click)="chooseBank()" *ngIf="!isObjectEmpty(chosenFromBank)">

              {{chosenFromBank.bankName}}

            </label> -->

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]" *ngIf="isSelectedOwnBank">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'transfer_from_hlbb_hlisb_account' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              [(ngModel)]="fromAccountValue"

              nzPlaceHolder="{{

                'transfer_from_hlbb_hlisb_account' | translate

              }}"

              (ngModelChange)="selectFromAccount()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                nzCustomContent

                *ngFor="

                  let item of (efdPlacementList$ | async)[0]?.body?.obFromAccBean

                "

                [nzValue]="item"

                [nzLabel]="item.accountDescription"

              >

                {{ item.accountDescription }}

                ( {{ item.accountNumber }} )

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'account_type' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              [nzDisabled]="accountTypeDisabled"

              [(ngModel)]="chosenAccountType"

              nzPlaceHolder="{{ 'account_type' | translate }}"

              (ngModelChange)="selectAccountType()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                *ngFor="

                  let item of arrayListEFDAccountTypeMultipleRecord

                "

                [nzValue]="item"

                [nzLabel]="item.efdAccountTypeLabel"

              >

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]" *ngIf="showToFDAccount">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'select_your_fd_account' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              [nzDisabled]="toFDAccountDisabled"

              *ngIf="isIslamicSelected"

              [(ngModel)]="toFDAccountValue"

              nzPlaceHolder="{{ 'select_your_fd_account' | translate }}"

              (ngModelChange)="selectFDAccount()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                nzCustomContent

                *ngFor="let item of listETDiToAccount"

                [nzValue]="item"

                [nzLabel]="item.accountDescription"

              >

                {{ item.accountDescription }}

                ({{ item.accountNumber }})

              </nz-option>

            </nz-select>

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              [nzDisabled]="toFDAccountDisabled"

              *ngIf="!isIslamicSelected"

              [(ngModel)]="toFDAccountValue"

              nzPlaceHolder="{{ 'please_select' | translate }}"

              (ngModelChange)="selectFDAccount()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                nzCustomContent

                *ngFor="let item of listEFDToAccount; let i = index"

                [nzValue]="item"

                [nzLabel]="item.accountDescription"

              >

                {{ item.accountDescription }}

                ({{ item.accountNumber }})

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]" *ngIf="chosenAccountType">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'tenure' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              *ngIf="isIslamicSelected"

              [(ngModel)]="chosenTenure"

              [nzDisabled]="tenureDisabled"

              nzPlaceHolder="{{ 'tenure' | translate }}"

              (ngModelChange)="selectTenure()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                *ngFor="let item of arrayListETDiTenure"

                [nzValue]="item"

                [nzLabel]="item.monthLabel"

              >

              </nz-option>

            </nz-select>

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              *ngIf="!isIslamicSelected"

              [(ngModel)]="chosenTenure"

              [nzDisabled]="tenureDisabled"

              nzPlaceHolder="{{ 'please_select' | translate }}"

              (ngModelChange)="selectTenure()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                *ngFor="let item of arrayListEFDTenure"

                [nzValue]="item"

                [nzLabel]="item.monthLabel"

              >

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired

            >{{ 'rate' | translate }} (%)

            <div *ngIf="interestRateIsPromo" class="interest-rate-promo-tag">

              {{ 'promo' | translate }}!

            </div>

          </nz-form-label>

          <nz-form-control [nzSpan]="10">

            <input

              [disabled]="rateDisabled"

              id="interestRate"

              [(ngModel)]="interestRate"

              placeholder="{{ 'rate' | translate }} (%)"

              type="text"

              class="busconst-input"

              nz-input

              name="interestRate"

              [ngModelOptions]="{ standalone: true }"

            />

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'principal_amount' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <input

              id="principalAmt"

              placeholder="{{ 'principal_amount' | translate }}"

              [(ngModel)]="principalAmt"

              type="number"

              class="busconst-input"

              nz-input

              name="principalAmt"

              [ngModelOptions]="{ standalone: true }"

            />

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <div

            nz-col

            [nzSpan]="24"

            class="principal-amt-reminder item-horizontal-center"

          >

            {{

              'principal_amount_reminder'

                | translate

                  : { minPlacement: minPlacement, maxPlacement: maxPlacement }

            }}

          </div>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'auto_dash_renewal' | translate

          }}</nz-form-label>

          <!-- <nz-form-control [nzSpan]="10" > -->

          <!-- <label nz-col>

            <img [class.disabled]="disabledAutoRenewal" class="green-checkbox" (click)="changeAutoRenewal()"

              src="assets/img/checkedbox.png" *ngIf="autoRenewValue.toUpperCase() == 'Y'">

            <div [class.disabled]="disabledAutoRenewal" nz-col (click)="changeAutoRenewal()"

              *ngIf="autoRenewValue.toUpperCase() == 'N'" class="empty-checkbox">

            </div>

          </label> -->

          <nz-form-control [nzSpan]="10">

            <input

              id="autoRenewal"

              [disabled]="disabledAutoRenewal"

              placeholder="{{ 'auto_dash_renewal' | translate }}"

              [(ngModel)]="autoRenewValue"

              type="text"

              class="busconst-input"

              nz-input

              name="autoRenewal"

              [ngModelOptions]="{ standalone: true }"

            />

          </nz-form-control>

          <!-- </nz-form-control> -->

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'interest_crediting_option' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              [nzDisabled]="disabledCreditToAccount"

              [(ngModel)]="interestCreditOption"

              nzPlaceHolder="{{ 'interest_crediting_option' | translate }}"

              (ngModelChange)="selectInterestCreditOption()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                *ngFor="

                  let item of (efdPlacementList$ | async)[0]?.body?.maturityInstrList;

                  let i = index

                "

                [nzValue]="item"

                [nzLabel]="item.maturityLabel"

              >

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]" *ngIf="!isSelectedOwnBank">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'transfer_to_account' | translate

          }}</nz-form-label>

          <nz-form-control [nzSpan]="10">

            <nz-select

              [nzLoading]="selectionDropdownDataLoading"

              nzCustomContent

              [(ngModel)]="toAccountValue"

              nzPlaceHolder="{{ 'transfer_to_account' | translate }}"

              (ngModelChange)="selectToAccount()"

              [ngModelOptions]="{ standalone: true }"

            >

              <nz-option

                nzCustomContent

                *ngFor="

                  let item of (efdPlacementList$ | async)[0]?.body?.obFromAccBean;

                  let i = index

                "

                [nzValue]="item"

                [nzLabel]="item.accountDescription"

              >

                {{ item.accountDescription }}

                ( {{ item.accountNumber }} )

              </nz-option>

            </nz-select>

          </nz-form-control>

        </nz-form-item>

        <nz-form-item [nzGutter]="[8, 8]">

          <nz-form-label [nzSpan]="6" nzRequired>{{

            'email_address' | translate

          }}</nz-form-label>

          <nz-form-control

            [nzSpan]="10"

            [nzExtra]="'email_notification_reminder' | translate"

          >

            <input

              id="emailId"

              type="email"

              class="busconst-input"

              nz-input

              name="emailId"

              placeholder="{{ 'email_address' | translate }}"

              [ngModelOptions]="{ standalone: true }"

              [(ngModel)]="emailId"

            />

          </nz-form-control>

        </nz-form-item>

        <!-- <nz-form-item [nzGutter]="[8,8]">

          <label nz-col [nzSpan]="16" class="text-center email-reminder">

            * {{'email_notification_reminder' | translate}}

          </label>

        </nz-form-item> -->

      </form>

      <div class="footer-container">

        <button

          (click)="next()"

          nz-button

          [nzLoading]="submitBtnLoading"

          class="next-button"

          *ngIf="!chooseBankInterface"

        >

          {{ 'next' | translate }}

        </button>

      </div>

    </div>

    <!-- Bank List (After click From Account) -->

    <div

      class="search-bank-container"

      *ngIf="chooseBankInterface"

      nz-col

      [nzSpan]="20"

    >

      <div class="instruction">

        {{ 'select_bank_you_like_to_transfer_from' | translate }}

      </div>

      <div class="search-bank-div">

        <nz-input-group [nzSuffix]="suffixIconSearch">

          <input

            type="text"

            nz-input

            placeholder="{{ 'search' | translate }}"

            [(ngModel)]="searchedBankValue"

            (ngModelChange)="searchedBankValueChange()"

          />

        </nz-input-group>

        <ng-template #suffixIconSearch>

          <i nz-icon nzType="search"></i>

        </ng-template>

      </div>

      <div class="default-bank">

        <div nz-row (click)="selectOwnBank(defaultBank)">

          <div class="char-div pointer-cursor">

            {{ defaultBank.bankLetter }}

          </div>

          <div class="bank-name pointer-cursor">{{ defaultBank.bankName }}</div>

        </div>

      </div>

      <div class="bank-content-list">

        <nz-list nzGrid>

          <div nz-row [nzGutter]="16">

            <div

              nz-col

              [nzSpan]="24"

              *ngFor="

                let group of (efdPlacementList$ | async)?.fpxBankList

                  | filter: searchedBankValue;

                let bankIndex = index

              "

            >

              <nz-list-item>

                <nz-card [nzTitle]="group.bankName[0]">

                  <div nz-row (click)="choseBank(group, bankIndex)">

                    <div class="char-div pointer-cursor">

                      {{ group.bankName[0] }}

                    </div>

                    <div class="bank-name pointer-cursor">

                      {{ group.bankName }}

                    </div>

                  </div>

                </nz-card>

              </nz-list-item>

            </div>

          </div>

        </nz-list>

      </div>

    </div>

  </nz-content>

</div>