Open-ILS/src/eg2/src/app/staff/share/billing/credit-card-dialog.component.html

   1 <ng-template #dialogContent>
   2   <div class="modal-header bg-info">
   3     <h4 class="modal-title" i18n>Credit Card Information</h4>
   4     <button type="button" class="btn-close btn-close-white"
   5       i18n-aria-label aria-label="Close" (click)="close()"></button>
   6   </div>
   7   <div class="modal-body" *ngIf="args">
   8
   9     <div class="card">
  10       <div class="card-header" i18n>Credit Card Info</div>
  11       <div class="card-body form-validated">
  12         <div class="row">
  13           <div class="col-lg-4"><label class="form-label" i18n>Process Where</label></div>
  14           <div class="col-lg-8">
  15             <select class="form-select" [(ngModel)]="args.where_process">
  16               <option [value]='1' [disabled]="!supportsExternal" i18n>
  17                 Process payment through Evergreen
  18               </option>
  19               <option [value]='0' i18n>
  20                 Record externally processed payment
  21               </option>
  22             </select>
  23           </div>
  24         </div>
  25         <ng-container *ngIf="args.where_process === 1">
  26           <div class="row mt-2">
  27             <div class="col-lg-4"><label class="form-label" i18n>Credit Card Number</label></div>
  28             <div class="col-lg-8">
  29               <input type="text" class="form-control"
  30                 required [(ngModel)]="args.number"/>
  31             </div>
  32           </div>
  33         </ng-container>
  34         <ng-container *ngIf="args.where_process === 0">
  35           <div class="row mt-2">
  36             <div class="col-lg-4"><label class="form-label" i18n>Expire Month</label></div>
  37             <div class="col-lg-8">
  38               <input type="number" class="form-control" [min]="1"
  39                 required [(ngModel)]="args.expire_month"/>
  40             </div>
  41           </div>
  42           <div class="row mt-2">
  43             <div class="col-lg-4"><label class="form-label" i18n>Expire Year</label></div>
  44             <div class="col-lg-8">
  45               <input type="number" class="form-control" [min]="thisYear"
  46                 required [(ngModel)]="args.expire_year"/>
  47             </div>
  48           </div>
  49           <div class="row mt-2">
  50             <div class="col-lg-4"><label class="form-label" i18n>Approval Code</label></div>
  51             <div class="col-lg-8">
  52               <input type="text" class="form-control"
  53                 required [(ngModel)]="args.approval_code"/>
  54             </div>
  55           </div>
  56         </ng-container>
  57       </div>
  58     </div>
  59
  60     <div class="card mt-2">
  61       <div class="card-header" i18n>Optional Fields</div>
  62       <div class="card-body form-validated">
  63         <div class="row">
  64           <div class="col-lg-4"><label class="form-label" i18n>Billing Name (first)</label></div>
  65           <div class="col-lg-8">
  66             <input type='text' class="form-control" [(ngModel)]="args.billing_first"/>
  67           </div>
  68         </div>
  69         <div class="row mt-2">
  70           <div class="col-lg-4"><label class="form-label" i18n>Billing Name (last)</label></div>
  71           <div class="col-lg-8">
  72             <input type='text' class="form-control" [(ngModel)]="args.billing_last"/>
  73           </div>
  74         </div>
  75
  76         <ng-container *ngIf="args.where_process === 0">
  77           <div class="row mt-2">
  78             <div class="col-lg-4"><label class="form-label" i18n>Address</label></div>
  79             <div class="col-lg-8">
  80               <input type='text' class="form-control" [(ngModel)]="args.billing_address"/>
  81             </div>
  82           </div>
  83           <div class="row mt-2">
  84             <div class="col-lg-4"><label class="form-label" i18n>City, town or village</label></div>
  85             <div class="col-lg-8">
  86               <input type='text' class="form-control" [(ngModel)]="args.billing_city"/>
  87             </div>
  88           </div>
  89           <div class="row mt-2">
  90             <div class="col-lg-4"><label class="form-label" i18n>State or province</label></div>
  91             <div class="col-lg-8">
  92               <input type='text' class="form-control" [(ngModel)]="args.billing_state"/>
  93             </div>
  94           </div>
  95           <div class="row mt-2">
  96             <div class="col-lg-4"><label class="form-label" i18n>ZIP or postal code</label></div>
  97             <div class="col-lg-8">
  98               <input type='text' class="form-control" [(ngModel)]="args.billing_zip"/>
  99             </div>
 100           </div>
 101         </ng-container>
 102
 103         <div class="row mt-2">
 104           <div class="col-lg-4"><label class="form-label" i18n>Note</label></div>
 105           <div class="col-lg-8">
 106             <input type='text' class="form-control" [(ngModel)]="args.note"/>
 107           </div>
 108         </div>
 109
 110       </div>
 111     </div>
 112
 113   </div>
 114   <div class="modal-footer">
 115     <button type="button" class="btn btn-success" [disabled]="!saveable()"
 116       (click)="close(args)" i18n>Submit</button>
 117     <button type="button" class="btn btn-warning"
 118       (click)="close()" i18n>Cancel</button>
 119   </div>
 120 </ng-template>