Settings component updated to show payment link

src/app/settings/settings.component.css

@@ -28,3 +28,21 @@
   width: 100%;
 }
 
+.urlLabel {
+	font-family: "Spartan";
+	font-size: 13px;
+	color: dimgray;
+}
+
+.urlDetail {
+	font-family: "Spartan";
+	font-size: 10px;
+	color: black;
+}
+
+.urlCopyBtn {
+	cursor:  pointer;
+	color: dodgerblue;
+}
+
+

src/app/settings/settings.component.html

@@ -86,9 +86,51 @@
 					<a mat-raised-button   	 
 					   color="primary" 
 					   href="{{this.xeroLink}}">
-						Link to Xero
+						{{ linkMsg }}
 					</a>
 				</p>
+
+				<table *ngIf="linked2Xero"
+				       style="width:100%;
+							  margin-top: 10px;">
+					<thead style="width: 100%;">
+						<tr>
+							<th class="urlLabel"
+							    style="text-align: left;" 
+							    width="94%">Payment Service URL:
+							</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						<td class="urlDetail" 
+						    style="text-align: left;" 
+						    width="94%">
+						    <div>
+								<textarea disabled
+								    style="font-size: 10px !important;
+								           border: none;
+								    	   outline: none;
+								    	   min-height: 150px;
+								    	   width: 95%;"
+							        cdkTextareaAutosize
+							        cdkAutosizeMinRows="6"
+							        cdkAutosizeMaxRows="10">{{ pmtServiceURL }}
+								</textarea>
+							</div>
+
+						</td>
+						<td class="urlCopyBtn">
+					        <a (click)='copyUrl()' >	
+							   <fa-icon [icon]="faCopy" 
+							            class="copy-button">
+							   </fa-icon>
+						   </a>
+						</td>
+						
+					</tbody>
+				</table>
+
 			</div>	
 		</mat-tab>
 	</mat-tab-group>

src/app/settings/settings.component.ts

@@ -6,6 +6,10 @@ import { Observable } from 'rxjs';
 import { Owner } from '../owner.model';
 import { XeroService } from '../xero.service';
 
+import { NotifierService } from '../notifier.service';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+
+
 @Component({
 	selector: 'app-settings',
 	templateUrl: './settings.component.html',
@@ -14,11 +18,17 @@ import { XeroService } from '../xero.service';
 
 export class SettingsComponent implements OnInit {
 
+ 	// ------------------------------------
+	//
+	faCopy = faCopy;
+ 	// ------------------------------------
 	settingsForm: UntypedFormGroup;
 	owner: Owner;
 	useZats: boolean;
 	proVersion: boolean = false;
 	useVKey: boolean = false;
+	linkMsg: String = 'Link to Xero';
+	
 	coins = [
 		{
 			label: 'US Dollar',
@@ -41,8 +51,11 @@ export class SettingsComponent implements OnInit {
 	localToken: string = '';
 	clientId: string = '';
 	clientIdUpdate: Observable<string>;
+	linked2Xero : boolean = false;
+	pmtServiceURL : string = '';
 
 	constructor(
+		private notifierService : NotifierService,
 		private fb: UntypedFormBuilder,
 		public xeroService: XeroService,
 		private dialogRef: MatDialogRef<SettingsComponent>,
@@ -62,6 +75,9 @@ export class SettingsComponent implements OnInit {
 			}
 			this.owner = data;
 			this.proVersion = this.owner.invoices;
+			if ( this.owner.crmToken !== '' ) {
+			  this.linked2Xero = true;	
+			}
 			this.clientIdUpdate = xeroService.clientIdUpdate;
 			xeroService.getXeroConfig();
 			this.clientIdUpdate.subscribe(clientId => {
@@ -72,6 +88,14 @@ export class SettingsComponent implements OnInit {
 
 	ngOnInit() {
 	      this.settingsForm.get('vKey')!.disable();
+	      this.linkMsg = 'Link to Xero';
+	      this.pmtServiceURL + '';
+	      if ( this.linked2Xero ) {
+	      	this.linkMsg = 'Relink to Xero';
+	      	this.pmtServiceURL = 'https://zgo.cash/pmtservice?owner=' + 
+	      	                     this.owner._id + 
+	      	                     '&invoiceNo=[INVOICENUMBER]&currency=[CURRENCY]&amount=[AMOUNTDUE]&shortCode=[SHORTCODE]';
+	      }
 	}
 
 	safeURL(s: string){
@@ -112,4 +136,22 @@ export class SettingsComponent implements OnInit {
 	      this.settingsForm.get('vKey')!.disable();
 
 	}
+
+	copyUrl() {
+//		console.log("Inside copyUrl()");
+		if (navigator.clipboard) {
+		};
+		try {
+			navigator.clipboard.writeText(this.pmtServiceURL);
+			this.notifierService
+			    .showNotification("ZGo URL copied to Clipboard!!","Close",'success');
+
+		} catch (err) {
+//			console.error("Error", err);  
+			this.notifierService
+			    .showNotification("Functionality not available for your browser. Use send button instead.","Close",'error');
+		}
+	}
 }
+
+