zgo/src/app/pmtservice/pmtservice.component.html

<div style="font-family: 'Spartan';
			display: flex;
			justify-content: center;
			align-items: center;">
	<div class="container">
		<div class="invoiceHeader">
				<img class="logo" src="/assets/logo-new-white.png" height="40px" />
		</div>
		<div *ngIf="reportType==1">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
				{{ vE.pmtserviceInvalidOwnerid }}
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	
		<div *ngIf="reportType==2">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
				{{ vE.pmtservicePmtsrvNot }}<br>
				{{ vE.pmtserviceEnabledFor }}<br>
				{{ owner.name}}
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==3">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceConnectoXero }}<br>
			 {{ vE.pmtserviceServerFailed }}
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==4">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceInvoiceNum }}<br>{{ pmtData.invoice }}<br>{{ vE.pmtserviceInvoiceNotfound }}	
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==5">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceInvoiceNum }}<br>{{ pmtData.invoice }}<br>{{ vE.pmtserviceInvoiceInvalid }}	
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==6">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceInvoiceNum }}<br>{{ pmtData.invoice }}<br>{{ vE.pmtserviceInvoicePaid }}	
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==7">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceInvoiceCurrency }}<br>[ {{ pmtData.currency }} ]<br>{{ vE.pmtserviceCurrencyNotsup }}	
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	

		<div *ngIf="reportType==8">
			 <div style="height: 50px;">
			</div>	
			<div style="font-weight: 700;
			 		font-size: 25px;
			 		text-align: center;">
			 {{ vE.pmtserviceAmountDoesnot }}<br>
			 {{ vE.pmtserviceMatchValue }}<br>
			 {{ vE.pmtserviceReportedByxero }}
			</div>	
			 <div style="height: 40px;">
			</div>	
			{{ vE.pmtservicePaymentNotprocessed }}
			 <div style="height: 20px;">
			</div>	
		</div>	
		<div class="invoiceDetail"
			 *ngIf="reportType==0" 
			 id="invoice">
			<div class="invoiceHdrTxt1">{{ vE.pmtserviceHdrTxt1 }}</div>
			<div class="invoiceHdrTxt2">{{ vE.pmtserviceHdrTxt2 }}{{orderId}}</div>
			<div class="invoiceHdrTxt3">{{ vE.pmtserviceHdrTxt3 }}{{order.timestamp | date}}
			</div>
				<div style="height: 10px;"></div>
				<div class="zecData">{{ vE.pmtserviceZecdataPrice }}{{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
				<div style="height: 2px;"></div>
				<div class="zecData">{{ vE.pmtserviceZecdataTotal }}<img class="zecSign" src="/assets/zec_rv.png" />{{order.totalZec | number: '1.08'}}
				</div>
			<div>
				<div style="height: 10px;"></div>
				<table style="width: 100%;" 
				       cellspacing="0">
				    <tr class="invoice-title">
						<th width="55%"
							class="detailTitle1">
							{{ vE.pmtserviceInvoiceItem }}
						</th>
						<th width="15%"
							class="detailTitle1">
							{{ vE.pmtserviceInvoiceQty }}
						</th>
						<th width="30%"
							class="detailTitle2">
							{{ vE.pmtserviceInvoicePrice }} ({{order.currency.toUpperCase()}}) 
						</th>
					</tr>
					<tr class="invoice-detail" 
					    *ngFor="let item of order.lines">
						<td width="55%" 
						    align="left">
						  {{item.name}}
						</td>
						<td width="15%"
						    align="center">
						  {{item.qty}}
						</td>
						<td width="30%" 
						    align="right">
						   {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}} 
						</td>
					</tr>
				    <tr class="invoice-title">
						<th width="55%"
						    class="detailLineRight">
							{{ vE.pmtserviceInvoiceTotal }}
						</th>
						<th width="15%"
						    class="detailLineLeft">

						</th>
						<th width="30%"
						    class="detailLineRight">
						   {{ order.total |  currency: order.currency.toUpperCase()}} 
						</th>
				    </tr>
				</table>
				<div style="height: 15px;"></div>
				<table>
					<tr>
						<td width="75%"
						    style="font-size: 20px;
								   font-weight: 700;
								   font-style: italic;
								   text-align: center;">		
							<p *ngIf="order.paid">
								<fa-icon [icon]="faCheck" 
								         color="primary"></fa-icon>&nbsp;{{ vE.pmtservicePaymentConfirmed }}</p>
							<p *ngIf="!order.paid">
								<fa-icon [style]="getIconStyle(order)"
										 [icon]="faHourglass"></fa-icon>&nbsp;{{ vE.pmtservicePaymentPending }}</p>
						</td>
						<td width="25%">		
							<div style="text-align: right;" 
								 id="payment-qr" 
								 *ngIf="!order.paid"></div>
						</td>
					</tr>
				</table>	
				<div style="height: 15px;"></div>
				<div width="100%"
						    style="font-size: 14px;
								   font-weight: 700;
								   font-style: italic;
								   text-align: center;">		
							{{ vE.pmtserviceScanQrcode }}
				</div>	
				<div style="text-align: center;
							margin-top: 10px;
							line-height: 30px;">
					<div style="font-family: 'Spartan';
							    font-size: 14px;
							    line-height: 20px;">
					{{ vE.pmtserviceCantScan }}<br>{{ vE.pmtserviceUseThis }}<a [href]="zcashUrl">{{ vE.pmtserviceWalletLink }}</a>, or
					</div>
					<div style="display: flex;
								justify-content: space-between;">
						<button style="margin-top: 20px;
									   font-weight: 700;
									   background-color: lightgray;"
								mat-raised-button 
								(click)="copyAddress()">{{ vE.pmtserviceCopyAddress }}</button> 
						<button style="margin-top: 20px;
									   font-weight: 700;
									   background-color: lightgray;"
								mat-raised-button 
								(click)="copyAmount()">{{ vE.pmtserviceCopyAmount }}</button> 
					</div>		
					<button style="margin-top: 20px;
								   font-weight: 700;
								   background-color: lightgray;"
							mat-raised-button 
							(click)="copyMemo()">{{ vE.pmtserviceCopyMemo }}</button> 

				</div>

			</div>
		</div>


	</div>
</div>