258 lines
16 KiB
HTML
258 lines
16 KiB
HTML
<!-- <mat-card>
|
||
<mat-card-title><h5 class="mt-0">Review and Pay</h5></mat-card-title>
|
||
<hr><br/>
|
||
<mat-card-content>
|
||
<div fxLayout="row wrap" fxLayoutAlign="center">
|
||
<div fxLayoutAlign="end center" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33" class="m-gap p-gap">
|
||
<label class="post-profile-head">Contribution Amount</label>
|
||
</div>
|
||
<div class="pl-2"s fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33" class="m-gap p-gap">
|
||
<mat-form-field appearance="outline" style="width: 40%;text-align: center;">
|
||
<input matInput type="number" placeholder="Amount" value="Rs. 72000">
|
||
</mat-form-field>
|
||
</div>
|
||
</div>
|
||
<div fxLayout="row wrap" fxLayoutAlign="center">
|
||
<div fxLayoutAlign="end center" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33">
|
||
<label class="post-profile-head">Contribution Towards :</label>
|
||
</div>
|
||
<div class="pl-2" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33">
|
||
<p>Building fund for Govt Girls Hr Sec School,<br> Nellikuppam, Cuddalore</p>
|
||
</div>
|
||
</div>
|
||
|
||
</mat-card-content>
|
||
</mat-card> -->
|
||
<div id="top"></div>
|
||
<div *ngIf="isCardShow">
|
||
<mat-card>
|
||
<mat-card-header>
|
||
<mat-card-title>
|
||
Review
|
||
</mat-card-title>
|
||
</mat-card-header>
|
||
<mat-card-content>
|
||
<app-req-list></app-req-list>
|
||
</mat-card-content>
|
||
</mat-card>
|
||
</div>
|
||
|
||
<mat-card>
|
||
<mat-card-title><h5 class="mt-0" *ngIf="contribute_type != '2'">Choose a Payment Option</h5>
|
||
<h5 class="mt-0" *ngIf="contribute_type == '2'">Delivery Details</h5></mat-card-title>
|
||
<hr>
|
||
|
||
<div class="mt-2" fxLayout="row wrap" fxLayoutAlign="center" *ngIf="contribute_type != '2'">
|
||
<div fxLayoutAlign="center" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33" class="m-gap p-gap">
|
||
<mat-card class="p-1" style="border-radius: 10px;">
|
||
<mat-card-content style="text-align: center;">
|
||
<h3><strong><span class="amount"><span class="currency-symbol">₹ </span>{{grand_tot_value}}</span></strong></h3><br/>
|
||
|
||
<mat-radio-group aria-label="Payment Mode" [(ngModel)]="payment_mode" (click)="changeType($event)">
|
||
<mat-radio-button value="1" >Online</mat-radio-button>
|
||
<mat-radio-button value="2">Offline</mat-radio-button>
|
||
</mat-radio-group>
|
||
</mat-card-content>
|
||
|
||
</mat-card>
|
||
</div>
|
||
</div>
|
||
|
||
<div *ngIf="contribute_type == '2'">
|
||
<mat-card>
|
||
<mat-card-header>
|
||
<mat-card-title></mat-card-title>
|
||
</mat-card-header>
|
||
<form [formGroup]="contributeKind">
|
||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap.lg="0" >
|
||
<div fxFlex="80" fxFlex.xs="100" fxFlex.sm="100" >
|
||
<!-- <mat-form-field appearance="outline" >
|
||
<input matInput placeholder = "Delivery Point" type="text" formControlName="delivery_point">
|
||
</mat-form-field> -->
|
||
<label>Please tell us when you would like to deliver the selected items :</label><br>
|
||
<mat-form-field appearance="outline">
|
||
<input matInput [matDatepicker]="picker" [min]="maxDate" placeholder="Delivery date" formControlName="do_delivery">
|
||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||
<mat-datepicker #picker></mat-datepicker>
|
||
</mat-form-field> <br/>
|
||
<label>Please deliver the items to the following address :</label><br>
|
||
<mat-form-field appearance="outline" >
|
||
<input matInput placeholder = "Delivery Point" type="text" formControlName="delivery_point">
|
||
</mat-form-field> <br/>
|
||
<label>Please leave your comments and any other inputs here :</label><br>
|
||
<mat-form-field appearance="outline">
|
||
<textarea matInput placeholder="Remarks" type="text" formControlName="remarks"></textarea>
|
||
</mat-form-field>
|
||
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</mat-card>
|
||
</div>
|
||
<div *ngIf="payment_mode == '2' && contribute_type != '2'" class="ac_det">
|
||
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.lg="0" class="p-2">
|
||
<div fxFlex="50" fxFlex.xs="100" fxFlex.sm="100" >
|
||
<mat-card class="p-2">
|
||
<p>A/C Name : Tamil Nadu State Parent Teacher Association - CSR Funds <br>
|
||
<!-- <p>Association : CSR Funds</p> -->
|
||
A/C Number : 142301000022944 <br>
|
||
MICR : 600020076<br>
|
||
IFSC : IOBA0001423<br>
|
||
Bank : Indian Overseas Bank<br>
|
||
Branch : College Road, Chennai
|
||
</mat-card>
|
||
</div>
|
||
<div fxFlex="50" fxFlex.xs="100" fxFlex.sm="100" >
|
||
<mat-card class="p-2">
|
||
<mat-card-title>Payment Details</mat-card-title>
|
||
<form [formGroup]="offlineDetForm">
|
||
<mat-form-field style="width: 100%;">
|
||
<mat-select placeholder="Payment Mode" formControlName="payment_type">
|
||
<mat-option *ngFor="let value of payment_mode_data" [value]="value.id">{{value.name}}</mat-option>
|
||
</mat-select>
|
||
</mat-form-field>
|
||
<div *ngIf="offlineDetForm.value.payment_type == '1' && offlineDetForm.controls['check_branch_bank']">
|
||
|
||
<div fxLayout="row">
|
||
<mat-form-field style="width: 50%;" class="mr-1">
|
||
<input matInput type="text" formControlName="payment_ref" placeholder="Cheque / DD Number">
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 50%;">
|
||
<input matInput [matDatepicker]="picker" placeholder="Date" formControlName="check_date">
|
||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||
<mat-datepicker #picker></mat-datepicker>
|
||
</mat-form-field>
|
||
</div>
|
||
<div fxLayout="row">
|
||
<mat-form-field style="width: 50%;" class="mr-1">
|
||
<input matInput type="text" formControlName="check_branch_bank" placeholder="Drawn on Bank and Branch">
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 50%;">
|
||
|
||
<mat-select placeholder="Mode of deposit" formControlName="check_deposit_mode">
|
||
<mat-option *ngFor="let value of deposit_mode_data" [value]="value.id">{{value.name}}</mat-option>
|
||
</mat-select>
|
||
</mat-form-field>
|
||
|
||
</div>
|
||
<div fxLayout="row">
|
||
<div fxFlex="100" fxFlex.xs="100" fxFlex.sm="100" >
|
||
<div *ngIf="offlineDetForm.value.check_deposit_mode == '1' && offlineDetForm.controls['check_deposit_mode']">
|
||
<p>Please despatch your Cheque / DD to the below address :<br>
|
||
|
||
The Secretary,<br>
|
||
Tamil Nadu State Parent Teachers Association<br>
|
||
6, College Rd, Subba Road Avenue, <br>
|
||
Nungambakkam, Chennai 600006<br>
|
||
Tamil Nadu</p>
|
||
</div>
|
||
<div *ngIf="offlineDetForm.value.check_deposit_mode == '2' && offlineDetForm.controls['check_deposit_mode']">
|
||
<mat-form-field style="width: 100%;">
|
||
<input matInput type="text" formControlName="cheque_drop_address" placeholder="Cheque Drop Details">
|
||
</mat-form-field>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div *ngIf="offlineDetForm.value.payment_type == '2' && offlineDetForm.controls['check_branch_bank']">
|
||
|
||
<div fxLayout="row">
|
||
<mat-form-field style="width: 50%;" class="mr-1">
|
||
<input matInput type="text" formControlName="payment_ref" placeholder="Transaction Reference">
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 50%;">
|
||
<input matInput [matDatepicker]="picker" placeholder="Date" formControlName="check_date">
|
||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||
<mat-datepicker #picker></mat-datepicker>
|
||
</mat-form-field>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</mat-card>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<ul>
|
||
<li *ngIf="payment_mode == '1'"><span>Tamil Nadu State Parent Teacher Association (TNPTA) accepts online voluntary contributions using Net Banking or VISA-Debit/Credit Cards in Indian Rupees (INR) from Individuals, Organizations, Trusts,Companies and Institutions etc.</span></li>
|
||
<li><span>All contributions towards Tamil Nadu State Parent Teacher Association (TNPTA) are exempt from Income Tax under section 80 (G).</span></li>
|
||
<li><span>The PAN Number of Tamil Nadu State Parent Teacher Association (TNPTA) is AACAT2920R.</span></li>
|
||
</ul>
|
||
|
||
|
||
<!-- <mat-tab-group class="p-2">
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Credit/Debit Cards</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Card Holder Name" type="text" name="name" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="CVV" type="text" name="name" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Card Number" type="text" name="cname" required>
|
||
</mat-form-field>
|
||
<mat-form-field style="width: 100%">
|
||
<input matInput placeholder="Expiration Date: 01/16" type="text" name="ctry" required>
|
||
</mat-form-field>
|
||
</div>
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Bank Transfer</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Wallets</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>UPI</ng-template>
|
||
<mat-card-content>
|
||
<form #form="ngForm">
|
||
|
||
</form>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
<mat-tab>
|
||
<ng-template mat-tab-label>Paypal</ng-template>
|
||
<h6><strong>Paypal</strong></h6>
|
||
<mat-card-content>
|
||
<p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
|
||
<button class="mat-green" mat-raised-button>Proceed To Paypal</button>
|
||
</mat-card-content>
|
||
</mat-tab>
|
||
</mat-tab-group> -->
|
||
|
||
<div class="pt-1" style="text-align: right;" *ngIf="!loader_control">
|
||
<button mat-raised-button color="primary" class="mr-1 mb-1" (click)="proceed_for_payment()"> {{payment_mode === '1' ? 'Proceed for Payment' : 'Confirm'}}</button>
|
||
</div>
|
||
<div *ngIf="loader_control">
|
||
<div fxLayoutAlign="center">
|
||
<mat-progress-spinner mode="indeterminate" class="primary"></mat-progress-spinner>
|
||
</div>
|
||
<p class="nocontent">Processing Payment Please Wait....</p>
|
||
</div>
|
||
<form #form ngNoForm
|
||
id="nonseamless"
|
||
method="post"
|
||
name="redirect"
|
||
[action]="action_url">
|
||
<input type="hidden" id="reqjson" name="reqjson" [value]="reqjson">
|
||
|
||
</form>
|
||
</mat-card> |