zgo/src/app/invoice/invoice.component.html

<div style="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" />
			{{name}}
	</div>
	<div class="invoiceDetail"
		 *ngIf="!error" 
		 id="invoice">
		<div class="invoiceHdrTxt1">{{ vE.invoiceInvoiceLbl }}</div>
		<div class="invoiceHdrTxt2">{{ vE.invoiceOrderId }} {{orderId}}</div>
		<div class="invoiceHdrTxt3"> {{ vE.invoiceOrderDate }} {{order.timestamp | date}}
		</div>
			<div style="height: 10px;"></div>
			<div class="zecData">{{ vE.invoiceZcashPrice }} {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
			<div style="height: 2px;"></div>
			<div class="zecData">Total: <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">
						Item
					</th>
					<th width="15%"
						class="detailTitle1">
						{{ vE.invoiceQtyLbl }}
					</th>
					<th width="30%"
						class="detailTitle2">
						{{ vE.invoiceOrderPrice }}({{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.invoiceInvoiceTotal }} 
					</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.invoicePaymentConfirmed }}</p>
						<p *ngIf="!order.paid">
							<fa-icon [style]="getIconStyle(order)"
									 [icon]="faHourglass"></fa-icon>&nbsp;{{ vE.invoicePaymentPending }}</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.invoiceScanQrcode }}
			</div>	
			<div style="text-align: center;
						margin-top: 10px;
						line-height: 30px;">
				<div style="font-family: 'Spartan';
						    font-size: 14px;
						    line-height: 20px;">
				{{ vE.invoiceCantScan }}<br>
				{{ vE.invoiceUseThis }} <a [href]="zcashUrl">{{ vE.invoiceWalletLink }}</a>{{ vE.invoiceDotOr }}
				<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.invoiceCopyAddress }}</button> 
					<button style="margin-top: 20px;
								   font-weight: 700;
								   background-color: lightgray;"
							mat-raised-button 
							(click)="copyAmount()">{{ vE.invoiceCopyAmount }}</button> 
				</div>	
				<button style="margin-top: 20px;
							   font-weight: 700;
							   background-color: lightgray;"
							mat-raised-button 
							(click)="copyMemo()" *ngIf="!isWCOrder">{{ vE.invoiceCopyMemo }}</button> 
	
				<div style="display: flex;
							justify-content: space-between;"
							 *ngIf="isWCOrder">
					<button style="margin-top: 20px;
								   font-weight: 700;
								   background-color: lightgray;"
							mat-raised-button 
							(click)="copyMemo()">{{ vE.invoiceCopyMemo }}</button> 

					<button style="margin-top: 20px;
								   font-weight: 700;
								   background-color: lightcyan;"
							mat-raised-button 
							(click)="backToShop()" >
							<fa-icon style="color: #FB4F14; 
							                margin-bottom: -2px;
							                margin-right: 5px;
							                font-size: 20px; 
							                cursor: pointer;"
							[icon]="faArrowUpRightFromSquare"> </fa-icon>
						{{ vE.invoiceReturnToshop }}</button> 
				</div>		
			</div>


		</div>
	</div>

	<div align="center" *ngIf="error">
		<div style="height: 10px;"></div>
		<div style="font-family: Spartan !important;
					font-size: 20px;
					padding: 4px;
		            height: 24px;">
			{{ vE.invoiceInvalidId }}
		</div>	
		<div style="font-family: Spartan !important;
					font-size: 16px;
					padding: 4px;">
			{{ vE.invoiceInfoNotavail }}
		</div>
		<div style="height: 10px;"></div>
		<mat-card-actions>
			<div align="center">
			<button mat-raised-button [routerLink]="['/']" color="primary">OK</button>
			</div>
		</mat-card-actions>
	</div>
</div>
</div>