b2adminui 1.0.0

package/src/app/customer-management/customer-personal-details/customer-personal-details.component.html

@@ -0,0 +1,812 @@
+<form class="form-horizontal custom-form-horizontal" name="form" role="form" #f="ngForm">
+
+    <div class="row" *ngIf="pageName == 'view'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">ID
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.Id}}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">KYC Reference ID
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.ReferenceCustomerId}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+                <label class="col-sm-6 control-label">Title
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="title" #title="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.Title"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" [data]="titleListData"
+                        [filterable]="true" [textField]="'desc'" [valueField]="'value'"
+                        (filterChange)="titleSearchFilter($event)" [defaultItem]="defaultTitleItem"
+                        [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+
+            <div class="form-group" *ngIf="walletRegistrationModel.Customer.CustomerTypeId == customerTypeBusiness">
+                <label class="col-sm-6 control-label">Business Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [disabled]="pageName == 'view'" type="text" name="businessName" #businessName="ngModel"
+                        placeholder="Business Name" [(ngModel)]="walletRegistrationModel.Customer.FirstName"
+                        class="form-control" maxlength="100" required
+                        (paste)="common.validateSpaceBetweenWords($event)" />
+                    <div *ngIf="(f.submitted || businessName.touched) && businessName.errors && businessName.errors.required"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter Business Name.
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-sm-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Customer Type
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="customerType" #customerType="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.CustomerTypeId" [disabled]="disableCustomerType"
+                        [data]="customerTypeListData" [filterable]="true" [textField]="'customerType'"
+                        [valueField]="'customerTypeId'" [defaultItem]="defaultCustomerTypeItem" [valuePrimitive]="true"
+                        required>
+                    </kendo-dropdownlist>
+                    <div *ngIf="(f.submitted || customerType.touched) && customerType.errors && customerType.errors.required"
+                        class="message-error">
+                        <span class='img-warning'></span>Please select a customer.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">First Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input type="text" [title]="walletRegistrationModel.Customer.FirstName"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" name="firstName" #firstName="ngModel"
+                        placeholder="First Name" [(ngModel)]="walletRegistrationModel.Customer.FirstName"
+                        class="form-control" maxlength="100" (change)="OnChangeEdit(true)"
+                        [required]="enableVerifyKyc && (!walletRegistrationModel.Customer.FirstName || 
+                                (walletRegistrationModel.Customer.FirstName && !walletRegistrationModel.Customer.FirstName.trim()))" />
+                    <div *ngIf="((f.submitted || firstName.touched) && enableVerifyKyc && 
+                                (!walletRegistrationModel.Customer.FirstName || 
+                                (walletRegistrationModel.Customer.FirstName && !walletRegistrationModel.Customer.FirstName.trim())))"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter First Name.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Last Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input type="text" [title]="walletRegistrationModel.Customer.LastName"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" name="lastName" #lastName="ngModel"
+                        placeholder="Last Name" [(ngModel)]="walletRegistrationModel.Customer.LastName"
+                        class="form-control" maxlength="100" (change)="OnChangeEdit(true)"
+                        [required]="enableVerifyKyc && (!walletRegistrationModel.Customer.LastName ||
+                        (walletRegistrationModel.Customer.LastName && !walletRegistrationModel.Customer.LastName.trim()))" />
+                    <div *ngIf="(f.submitted || lastName.touched) && enableVerifyKyc && 
+                                (!walletRegistrationModel.Customer.LastName ||
+                                (walletRegistrationModel.Customer.LastName && !walletRegistrationModel.Customer.LastName.trim()))"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter Last Name.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Middle Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.MiddleName"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="middleName"
+                        #middleName="ngModel" placeholder="Middle Name"
+                        [(ngModel)]="walletRegistrationModel.Customer.MiddleName" class="form-control"
+                        maxlength="150" />
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Title Local
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.TitleLocal" [disabled]="pageName == 'view'"
+                        type="text" name="titleLocal" #titleLocal="ngModel" placeholder="Title Local"
+                        [(ngModel)]="walletRegistrationModel.Customer.TitleLocal" class="form-control"
+                        maxlength="150" />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">First Name Local
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.FirstNameLocal"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="firstNameLocal"
+                        #firstNameLocal="ngModel" placeholder="First Name Local"
+                        [(ngModel)]="walletRegistrationModel.Customer.FirstNameLocal" class="form-control"
+                        maxlength="100" (change)="OnChangeEdit(true)"
+                        [required]="enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 && 
+                        (!walletRegistrationModel.Customer.FirstNameLocal || 
+                        (walletRegistrationModel.Customer.FirstNameLocal && !walletRegistrationModel.Customer.FirstNameLocal.trim()))" />
+                    <div class="message-error"
+                        *ngIf="(f.submitted || firstNameLocal.touched) && enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 && 
+                                (!walletRegistrationModel.Customer.FirstNameLocal || 
+                                (walletRegistrationModel.Customer.FirstNameLocal && !walletRegistrationModel.Customer.FirstNameLocal.trim()))">
+                        <span class='img-warning'></span>Please enter First Name Local.
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Last Name Local
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.LastNameLocal"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="lastNameLocal"
+                        #lastNameLocal="ngModel" placeholder="Last Name Local"
+                        [(ngModel)]="walletRegistrationModel.Customer.LastNameLocal" class="form-control"
+                        maxlength="100" (change)="OnChangeEdit(true)"
+                        [required]="enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 && 
+                        (!walletRegistrationModel.Customer.LastNameLocal || 
+                        (walletRegistrationModel.Customer.LastNameLocal && !walletRegistrationModel.Customer.LastNameLocal.trim()))" />
+                    <div *ngIf="(f.submitted || lastNameLocal.touched) && enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 && 
+                                (!walletRegistrationModel.Customer.LastNameLocal || 
+                                (walletRegistrationModel.Customer.LastNameLocal && !walletRegistrationModel.Customer.LastNameLocal.trim()))"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter Last Name Local.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Middle Name Local
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.MiddleNameLocal"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="middleNameLocal"
+                        #middleNameLocal="ngModel" placeholder="Middle Name Local"
+                        [(ngModel)]="walletRegistrationModel.Customer.MiddleNameLocal" class="form-control"
+                        maxlength="150" />
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Business Type
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="businessType" #businessType="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.BusinessTypeId" [disabled]="pageName === 'view'"
+                        [data]="businessTypeListData" [filterable]="true" [textField]="'nameEN'"
+                        [valueField]="'businessTypeId'" (filterChange)="businessTypeSearchFilter($event)"
+                        [defaultItem]="defaultBusinessTypeItem" [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Nationality
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="nationality" #nationality="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.NationalityId"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" [data]="nationalityListData"
+                        [filterable]="true" [textField]="'nationalityNameEN'" [valueField]="'nationalityId'"
+                        (filterChange)="countrySearchFilter($event)" [defaultItem]="defaultCountryItem"
+                        (valueChange)="OnChangeEdit(true)" [valuePrimitive]="true"
+                        [required]="!walletRegistrationModel.Customer.NationalityId && enableVerifyKyc">
+                    </kendo-dropdownlist>
+                    <div *ngIf="(f.submitted || nationality.touched) && !walletRegistrationModel.Customer.NationalityId && enableVerifyKyc"
+                        class="message-error">
+                        <span class='img-warning'></span>Please select Nationality.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Type of ID
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="identityId" #identityId="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.IdentityId"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" [data]="typeOfIdentityFilterListData"
+                        [filterable]="true" [textField]="'identityName'" [valueField]="'identityId'"
+                        (filterChange)="idTypeSearchFilter($event)" (valueChange)="onIdNumberChange()"
+                        [defaultItem]="defaultIdTypeItem" [valuePrimitive]="true" [required]="!walletRegistrationModel.Customer.IdentityId && 
+                        (walletRegistrationModel.Customer.CustomerTypeId === customerTypeBusiness || enableVerifyKyc)">
+                        >
+                    </kendo-dropdownlist>
+                    <div class="message-error"
+                        *ngIf="(f.submitted || identityId.touched) && !walletRegistrationModel.Customer.IdentityId && 
+                            (walletRegistrationModel.Customer.CustomerTypeId === customerTypeBusiness || enableVerifyKyc)">
+                        <span class='img-warning'></span>Please select a Type of ID.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">ID Number
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div class="input-group">
+                        <input [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="idNumber"
+                            #idNumber="ngModel" placeholder="ID Number"
+                            [(ngModel)]="walletRegistrationModel.Customer.IdNumber" class="form-control inline-controls"
+                            (change)="OnChangeEdit(true)" required />
+                        <span class="input-group-addon p-r-none no-borders"
+                            *ngIf="pageName == 'edit' || pageName == 'view'">
+                            <a (click)="getIdNumber()">
+                                <i class="fa fa-eye eye-icon-style"></i>
+                            </a>
+                        </span>
+                    </div>
+                    <div *ngIf="((f.submitted || idNumber.touched) && (idNumber.errors && idNumber.errors.required)) || 
+                    (walletRegistrationModel.Customer.IdNumber && !walletRegistrationModel.Customer.IdNumber.trim())"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter ID Number.
+                    </div>
+                    <div *ngIf="((f.submitted || idNumber.touched) && (idNumber.errors && idNumber.errors.pattern))"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter valid ID.
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Date of Birth Type
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="dateOfBirthType" #dateOfBirthType="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.DateOfBirthType"
+                        [disabled]="pageName == 'view' || disableAfterVerifyKYC" [data]="dateOfBirthListData"
+                        [filterable]="true" [textField]="'desc'" [valueField]="'value'"
+                        (valueChange)="dateOfBirthTypeChange($event)" [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group" *ngIf="walletRegistrationModel.Customer.NationalityId == 178">
+                <label class="col-sm-6 control-label">Laser ID
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div class="input-group">
+                        <input [title]="walletRegistrationModel.Customer.LaserId"
+                            [disabled]="pageName == 'view' || disableAfterVerifyKYC" type="text" name="laserID"
+                            class="form-control inline-controls" #laserID="ngModel" placeholder="Laser ID"
+                            [(ngModel)]="walletRegistrationModel.Customer.LaserId" class="form-control" maxlength="100"
+                            (change)="OnChangeEdit(true)" (keypress)="common.onlyAlphanumeric($event,true)"
+                            (paste)="common.validateAlphanumeric($event,true)"
+                            [required]="enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 &&
+                            (!walletRegistrationModel.Customer.LaserId || 
+                            (walletRegistrationModel.Customer.LaserId && !walletRegistrationModel.Customer.LaserId.trim()))" />
+                        <span class="input-group-addon p-r-none no-borders"
+                            *ngIf="pageName == 'edit' || pageName == 'view'">
+                            <a (click)="getLaserIdNumber()">
+                                <i class="fa fa-eye eye-icon-style"></i>
+                            </a>
+                        </span>
+                    </div>
+                    <div class="message-error"
+                        *ngIf="(f.submitted || laserID.touched) && enableVerifyKyc && walletRegistrationModel.Customer.NationalityId == 178 &&
+                                (!walletRegistrationModel.Customer.LaserId || 
+                                (walletRegistrationModel.Customer.LaserId && !walletRegistrationModel.Customer.LaserId.trim()))">
+                        <span class='img-warning'></span>Please enter LaserID.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="pageName === 'view'">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Date of Birth
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div class="disable" [ngClass]="{'disableDiv': disableAfterVerifyKYC}">
+                        <datetime class="dateOfBirth" [readonly]="true"
+                            [(ngModel)]="walletRegistrationModel.Customer.CustomerDateOfBirth" name="dateOfBirth"
+                            #dateOfBirth="ngModel" [timepicker]="false" [datepicker]="datepickerFromOpts">
+                        </datetime>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="pageName !== 'view'">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Date of Birth
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div [ngClass]="{'disableDiv': disableAfterVerifyKYC}">
+                        <datetime class=" dateOfBirth" name="dateOfBirth" #dateOfBirth="ngModel"
+                            [(ngModel)]="walletRegistrationModel.Customer.CustomerDateOfBirth" [timepicker]="false"
+                            [datepicker]="datepickerFromOpts" (ngModelChange)="OnChangeEdit(true)" [required]="enableVerifyKyc && 
+                            !walletRegistrationModel.Customer.CustomerDateOfBirth">
+                        </datetime>
+                        <div class="message-error" *ngIf="(f.submitted || dateOfBirth.touched) && enableVerifyKyc && 
+                                !walletRegistrationModel.Customer.CustomerDateOfBirth">
+                            <span class='img-warning'></span>Please enter Date of Birth.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">ID Issue Country
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="Issue Country" #IDIssuerCountry="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.IdIssueCountryCode"
+                        [disabled]="pageName == 'view'" [data]="countryListData" [filterable]="true"
+                        [textField]="'countryName'" [valueField]="'countryCode'"
+                        (filterChange)="issuecountrySearchFilter($event)" [defaultItem]="defaultIssueCountryItem"
+                        [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="pageName === 'view'">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">ID Issue Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div class="disable">
+                        <datetime class="IdIssueDate" [readonly]="true"
+                            [(ngModel)]="walletRegistrationModel.Customer.IdIssuedDate" name="IdIssueDate"
+                            #IdIssueDate="ngModel" [timepicker]="false" [datepicker]="datepickerExpiryDate">
+                        </datetime>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="pageName !== 'view'">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">ID Issue Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div>
+                        <datetime class="IdIssueDate" [(ngModel)]="walletRegistrationModel.Customer.IdIssuedDate"
+                            name="IdIssueDate" #IdIssueDate="ngModel" [timepicker]="false"
+                            (ngModelChange)="handleIdIssueExpiryDateChange($event)" [datepicker]="datepickerExpiryDate">
+                        </datetime>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row"
+        *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness && pageName === 'view'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Id Expiry Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div class="disable">
+                        <datetime [(ngModel)]="walletRegistrationModel.Customer.IdExpiredDate" [readonly]="true"
+                            #idExpiryDate="ngModel" name="idExpiryDate" [timepicker]="false"
+                            [datepicker]="common.datepickerFromOpts"></datetime>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="control-label col-sm-6">NRC Front Image
+                    <span>:</span>
+                </label>
+                <div class="col-sm-6" *ngIf="pageName =='new' || pageName=='edit'">
+                    <input type="text" name="fileIdImage" #fileIdImage="ngModel" class="form-control"
+                        [(ngModel)]="walletRegistrationModel.Customer.NrcFrontImage"
+                        [required]="enableVerifyKyc && !walletRegistrationModel.Customer.NrcFrontImage" readonly />
+                    <div class="message-error"
+                        *ngIf="(f.submitted || fileIdImage.touched) && fileIdImage.errors && fileIdImage.errors.required">
+                        <span class='img-warning'></span>Please select an NRC Front Image.
+                    </div>
+                </div>
+                <div class="col-sm-6" *ngIf="pageName =='view'">
+                    <div style="height: 120px;width: 130px;border-radius: 10px;border: 1px black solid;">
+                        <img class="image" *ngIf="walletRegistrationModel.Customer.NrcFrontImage"
+                            style="width: 128px; height: 117px;" [src]="walletRegistrationModel.Customer.NrcFrontImage" 
+                            (click)="displayImage(walletRegistrationModel.Customer.NrcFrontImage)">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2" *ngIf="pageName =='new' || pageName=='edit'">
+            <input id="fileIdImage" type="file" class="hide" (change)="uploadFile($event)" accept="image/*">
+            <!-- <label class="col-sm-6 btn btn-primary" for="fileIdImage" aria-disabled="">Browse</label> -->
+            <!-- <span class="message-error col-sm-6">* .JPG, .JPEG</span> -->
+        </div>
+        <div class="col-md-4" *ngIf="pageName !== 'view'">
+            <div class="form-group">
+                <label class="col-sm-3 control-label text-left">Id Expiry Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-9">
+                    <div>
+                        <datetime class="IdExpiryDate" [(ngModel)]="walletRegistrationModel.Customer.IdExpiredDate"
+                            name="IdExpiryDate" #IDExpiryDate="ngModel" [timepicker]="false"
+                            (ngModelChange)="handleIdIssueExpiryDateChange($event)" [datepicker]="datepickerExpiryDate">
+                        </datetime>
+                    </div>
+                    <div class="message-error" *ngIf="invalidIdIssueExpiryDate">
+                        <span class='img-warning'></span>ID Expiry Date cannot be earlier than ID Issue Date.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="pageName === 'view'">
+            <div class="form-group">
+                <label class="control-label col-sm-6">Face Image
+                    <span>:</span>
+                </label>
+                <div class="col-sm-6">
+                    <div style="height: 120px;width: 130px;border-radius: 10px;border: 1px black solid;">
+                        <img class="image" *ngIf="walletRegistrationModel.Customer.FaceImage"
+                            style="width: 128px; height: 117px;" [src]="walletRegistrationModel.Customer.FaceImage" 
+                            (click)="displayImage(walletRegistrationModel.Customer.FaceImage)">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="control-label col-sm-6">NRC Back Image
+                    <span>:</span>
+                </label>
+                <div class="col-sm-6" *ngIf="pageName =='new' || pageName=='edit'">
+                    <input type="text" name="fileIdImage" #fileIdImage="ngModel" class="form-control"
+                        [(ngModel)]="walletRegistrationModel.Customer.NrcBackImage"
+                        [required]="enableVerifyKyc && !walletRegistrationModel.Customer.NrcBackImage" readonly />
+                    <div class="message-error"
+                        *ngIf="(f.submitted || fileIdImage.touched) && fileIdImage.errors && fileIdImage.errors.required">
+                        <span class='img-warning'></span>Please select an NRC Back Image.
+                    </div>
+                </div>
+                <div class="col-sm-6" *ngIf="pageName =='view'">
+                    <div style="height: 120px;width: 130px;border-radius: 10px;border: 1px black solid;">
+                        <img class="image" *ngIf="walletRegistrationModel.Customer.NrcBackImage"
+                            style="width: 128px; height: 117px;" [src]="walletRegistrationModel.Customer.NrcBackImage" 
+                            (click)="displayImage(walletRegistrationModel.Customer.NrcBackImage)">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6" *ngIf="pageName =='new' || pageName=='edit'">
+            <div class="form-group">
+                <label class="control-label col-sm-6">Face Image
+                    <span>:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input type="text" name="fileCustomerImage" class="form-control" #fileCustomerImage="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.CustomerImageName"
+                        [required]="enableVerifyKyc && !walletRegistrationModel.Customer.CustomerImageName" readonly />
+                    <div class="message-error"
+                        *ngIf="(f.submitted || fileCustomerImage.touched) && fileCustomerImage.errors && fileCustomerImage.errors.required">
+                        <span class='img-warning'></span>Please select Face Image.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-2" *ngIf="pageName =='new' || pageName=='edit'">
+            <input id="fileCustomerImage" type="file" class="hide" (change)="uploadFile($event)" accept="image/*">
+            <!-- <label class="col-sm-6 btn btn-primary" for="fileCustomerImage">Browse</label> -->
+            <!-- <span class="message-error col-sm-6">* .JPG, .JPEG</span> -->
+        </div>
+    </div>
+
+    <div class="row" *ngIf="walletRegistrationModel.Customer.CustomerTypeId != customerTypeBusiness">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Customer Company Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input [title]="walletRegistrationModel.Customer.CustomerCompany" [disabled]="pageName == 'view'"
+                        type="text" name="customerCompany" placeholder="Customer Company Name"
+                        #customerCompany="ngModel" [(ngModel)]="walletRegistrationModel.Customer.CustomerCompany"
+                        class="form-control" maxlength="100" (keypress)="common.onlyAlphanumericAndThai($event,true)"
+                        (paste)="common.validateAlphanumericAndThai($event,true)" />
+                    <div *ngIf="(f.submitted || customerCompany.touched) && customerCompany.errors"
+                        class="message-error">
+                        <span class='img-warning'></span>Customer company can't be greater than 100 characters.
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Occupation
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="occupationId" #occupationId="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.OccupationId" [disabled]="pageName == 'view'"
+                        [data]="occupationListData" [filterable]="true" [textField]="'occupationName'"
+                        [valueField]="'occupationId'" (filterChange)="occupationSearchFilter($event)"
+                        [defaultItem]="defaultOccupationItem" [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">User Define 1
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input type="text" [title]="walletRegistrationModel.Customer.UserDefine1"
+                        [disabled]="pageName == 'view'" name="userDefineOne" #userDefineOne="ngModel"
+                        placeholder="User Define 1" [(ngModel)]="walletRegistrationModel.Customer.UserDefine1"
+                        class="form-control" />
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Company Name
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="companyUniqueId" #companyUniqueId="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.CompanyUniqueId"
+                        [disabled]="(pageName != 'new' || userCompanyUniqueId != '000') || disableAfterVerifyKYC"
+                        [filterable]="true" [data]="companyListData" [textField]="'companyName'"
+                        [valueField]="'companyUniqueId'" [defaultItem]="defaultCompanyItem"
+                        (filterChange)="companySearchFilter($event)" (valueChange)="getCompanyRiskSetting($event)"
+                        [valuePrimitive]="true" required>
+                    </kendo-dropdownlist>
+                    <div *ngIf="(f.submitted || companyUniqueId.touched) && companyUniqueId.errors && companyUniqueId.errors.required"
+                        class="message-error">
+                        <span class='img-warning'></span>Please select Company Name.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">User Define 2
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <input type="text" [title]="walletRegistrationModel.Customer.UserDefine2"
+                        [disabled]="pageName == 'view'" name="userDefineTwo" #userDefineTwo="ngModel"
+                        placeholder="User Define 2" [(ngModel)]="walletRegistrationModel.Customer.UserDefine2"
+                        class="form-control" />
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Customer Status
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="userStatus" #userStatus="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.UserStatusId"
+                        [disabled]="pageName == 'view' || this.customerStatusDisabled" [filterable]="true"
+                        [data]="userStatusListData" [textField]="'userStatus'" [valueField]="'userStatusId'"
+                        (filterChange)="userStatusSearchFilter($event)" [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Wallet Purpose
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6">
+                    <kendo-dropdownlist class="form-control" name="walletPurpose" #walletPurpose="ngModel"
+                        [(ngModel)]="walletRegistrationModel.Customer.WalletPurposeId" [disabled]="pageName == 'view'"
+                        [defaultItem]="defaultWalletPurposeItem" [filterable]="true" [data]="walletPurposeListData"
+                        [textField]="'descriptionEN'" [valueField]="'walletPurposeId'"
+                        (filterChange)="walletPurposeSearchFilter($event)" [valuePrimitive]="true">
+                    </kendo-dropdownlist>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6" *ngIf="walletRegistrationModel.Customer.WalletPurposeId == 999">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Wallet Purpose's Description
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6" *ngIf="pageName == 'edit' || pageName == 'new'">
+                    <input type="text" name="walletPurposeDescription" #walletPurposeDescription="ngModel"
+                        placeholder="Wallet Purpose's Description"
+                        [(ngModel)]="walletRegistrationModel.Customer.WalletPurposeDescription" class="form-control"
+                        required [maxlength]="maxWalletPurposeDescription" />
+                    <div *ngIf="((f.submitted || walletPurposeDescription.touched) && (walletPurposeDescription.errors && walletPurposeDescription.errors.required)) || 
+                    (walletRegistrationModel.Customer.WalletPurposeDescription && !walletRegistrationModel.Customer.WalletPurposeDescription.trim())"
+                        class="message-error">
+                        <span class='img-warning'></span>Please enter Wallet Purpose's description.
+                    </div>
+                </div>
+
+                <div class="col-sm-6 control-label text-left" *ngIf="pageName == 'view'">
+                    {{walletRegistrationModel.Customer.WalletPurposeDescription}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="pageName == 'view'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Verify KYC
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.VerifyKYC2c2p}}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Verify KYC Non
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.VerifyKYCNon2c2p}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="pageName == 'view' || pageName == 'edit'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Risk Level
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{ (walletRegistrationModel.Customer.RiskLevel ?
+                    walletRegistrationModel.Customer.RiskLevel : "N/A" )}}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Dip Chip Status
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{ (walletRegistrationModel.Customer.DipChipStatus ?
+                    "Verified" : "Not Verify") }}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="pageName == 'view' || pageName == 'edit'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Register Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.RegisterDate}}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Register By
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.RegisterBy}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" *ngIf="pageName == 'view' || pageName == 'edit'">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Modified Date
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.ModifiedDate}}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="col-sm-6 control-label">Modified By
+                    <span class="pull-right m-l-sm">:</span>
+                </label>
+                <div class="col-sm-6 control-label text-left"> {{walletRegistrationModel.Customer.ModifiedBy}}
+                </div>
+            </div>
+        </div>
+    </div>
+    <input type="submit" class="hide" #btnSubmit>
+</form>