166 lines
14 KiB
HTML
166 lines
14 KiB
HTML
<mat-toolbar>
|
|
<div fxLayout="row wrap" style="padding:15px 0px;">
|
|
<div fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="start center">
|
|
<button (click)="backClicked()" mat-icon-button class="backStyle" aria-label="Example icon button with a home icon">
|
|
<mat-icon>keyboard_backspace</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80" fxLayoutAlign="center center" class="p-gap">
|
|
<h3 style="margin-top: 0px !important;"><img class="imgLogo" [src]="image_view(logo)" /> {{busName}}</h3>
|
|
</div>
|
|
<div fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="10" fxFlex.xl="10" fxLayoutAlign="center center" class="p-gap">
|
|
</div>
|
|
</div>
|
|
</mat-toolbar>
|
|
<ng-scrollbar class="scrollHV">
|
|
<div class="container mt-1">
|
|
<mat-card class="card-mat">
|
|
<h2 class="base-border">Customer Information</h2>
|
|
<form [formGroup]="form" (ngSubmit)="submit()">
|
|
<div fxLayout="row wrap">
|
|
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="64" fxFlex.lg="64" fxFlex.xl="64" class="p-gap" fxLayoutAlign="center center">
|
|
|
|
|
|
<div fxLayout="row wrap">
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%">
|
|
<input matInput placeholder="Name" type="text" name="cusName" formControlName="cusName" required>
|
|
<mat-error *ngIf="myError('cusName', 'required')">Name is required</mat-error>
|
|
<mat-error *ngIf="myError('cusName', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%">
|
|
<input matInput placeholder="E Mail" type="email" name="email" formControlName="email" required>
|
|
<mat-error *ngIf="!form.get('email')?.errors?.required && (form.get('email')?.errors?.pattern)">
|
|
Please enter a valid email address
|
|
</mat-error>
|
|
<!-- <mat-error *ngIf="myError('email', 'required')">email is required</mat-error> -->
|
|
<mat-error *ngIf="form.get('email')?.invalid && (form.get('email')?.dirty || form.get('email')?.touched) && form.get('email')?.errors?.required">
|
|
Email is required
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap">
|
|
<div [ngSwitch]="otpData">
|
|
<div fxLayout="row">
|
|
<div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 70%">
|
|
<input matInput type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No" name="phone" formControlName="phoneNo" [readonly]="noChangeNo == '1'" required>
|
|
<mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
|
|
<mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="center center">
|
|
<div *ngIf="verifyOTP != '1'">
|
|
<button mat-raised-button type="button" (click)="getOTP(1)" [disabled]="myError('phoneNo', 'minlength') || myError('phoneNo', 'required')" color="primary" class="mr-1 mb-1">Get OTP</button>
|
|
</div>
|
|
<span *ngIf="verifyOTP == '1'"><mat-icon style="color: #4CAF50;">verified</mat-icon></span>
|
|
</div>
|
|
<div id="sign-in-button"></div>
|
|
|
|
</div>
|
|
<!-- <div *ngSwitchCase="1">
|
|
<div fxLayout="row" *ngIf="verifyOTP != '1'">
|
|
<div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
|
|
<mat-form-field style="width: 80%">
|
|
<input matInput placeholder="Enter OTP" formControlName="otp" type="text" maxlength="6">
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="20" fxFlex.sm="20" fxFlex.md="20" fxFlex.lg="20" fxFlex.xl="20">
|
|
<button type="button" (click)="verify(1)" mat-raised-button class="mr-1 mb-1" matTooltip="VERIFY" matTooltipPosition="below" style="background-color: #4CAF50;color:#fff;">VERIFY</button>
|
|
</div>
|
|
</div>
|
|
<div fxLayout="row" *ngIf="verifyOTP != '1'">
|
|
<button type="button" *ngIf="timeLeft != 0" mat-raised-button color="primary">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
|
<button type="button" *ngIf="timeLeft == 0" mat-raised-button color="primary" (click)="resendOTP(1)">{{timeLeft == 0 ? 'Resend OTP' : timeLeft+' Seconds Left....' }} </button>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%">
|
|
<input matInput placeholder="Address" type="text" name="address" formControlName="address_1">
|
|
<mat-error *ngIf="myError('address_1', 'required')">Address is required</mat-error>
|
|
<mat-error *ngIf="myError('address_1', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%" class="mb-1">
|
|
<input matInput placeholder="State" type="text" name="state" formControlName="state">
|
|
<mat-error *ngIf="myError('state', 'required')">State is required</mat-error>
|
|
<mat-error *ngIf="myError('state', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%" class="mb-1">
|
|
<input matInput placeholder="City" type="text" name="city" formControlName="city">
|
|
<mat-error *ngIf="myError('city', 'required')">City is required</mat-error>
|
|
<mat-error *ngIf="myError('city', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" class="p-gap" fxLayoutAlign="center center">
|
|
<mat-form-field style="width: 80%" class="mb-1">
|
|
<input matInput placeholder="Pincode" type="text" name="pincode" formControlName="pincode">
|
|
<mat-error *ngIf="myError('pincode', 'required')">City is required</mat-error>
|
|
<mat-error *ngIf="myError('pincode', 'maxlength')">Limit exceed</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="border: 1px solid #ccc;" fxFlex.md="1"></div>
|
|
<div fxFlex.xs="50" fxFlex.sm="50" fxFlex.md="35" fxFlex.lg="35" fxFlex.xl="35" class="p-gap">
|
|
<div class="card-mat">
|
|
<!-- <p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Business </p>
|
|
<span class="span-text">{{busName}}</span> -->
|
|
<p class="param"><img src="assets/images/person.svg" alt="Avatar" class="img">Practitioner </p>
|
|
<span class="span-text">{{bookedDetails.doctor}}</span>
|
|
<p class="param"><img src="assets/images/information.svg" alt="Avatar" class="img"> Service </p>
|
|
<span class="span-text"> {{bookedDetails.service}} ({{bookedDetails.duration}}Mins)</span>
|
|
<p class="param"><img src="assets/images/Languages.svg" alt="Avatar" class="img">Date </p>
|
|
<span class="span-text"> {{bookedDetails.date | date:'longDate'}}</span>
|
|
<p class="param"><img src="assets/images/Time-Icon.svg" alt="Avatar" class="img">Time </p>
|
|
<span class="span-text">{{bookedDetails.time | date:'shortTime'}}</span>
|
|
<p class="param"><img src="assets/images/Location.svg" alt="Avatar" class="img">Amount </p>
|
|
<span class="span-text"><span class="ex" style="font-size: 17px;padding-bottom: 10px;line-height: 17px;">₹</span> {{bookedDetails.amount}}</span>
|
|
<!-- <div>
|
|
<hr>
|
|
<button mat-raised-button mat-button-sm class="mr-1 mb-1 mt-1 btn-red" [ngStyle]="{'background':slot_array.length ==0 ? '#ccc':'#4caf50' }" [disabled]="slot_array.length ==0" (click)="submit()">PROCEED</button>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: end;" >
|
|
<button class="mat-green" type="submit" mat-raised-button>Submit</button>
|
|
</div>
|
|
</form>
|
|
</mat-card>
|
|
</div>
|
|
</ng-scrollbar>
|
|
<footer>
|
|
<p>
|
|
© 2023 Venba Information Technology Pvt Ltd. All Rights Reserved
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- <div class="contain">
|
|
<div class="row d-flex align-items-center justify-content-center">
|
|
<form class="col-md-6">
|
|
<div class="card px-5 py-5">
|
|
<div class="form-input">
|
|
<input type="text" name="phoneNumber" placeholder="Phone Number" class="form-control"
|
|
placeholder="Enter Phone Number" [(ngModel)]="phoneNumber" min="10" max="15">
|
|
</div>
|
|
<button class="btn btn-success mt-4 signup" (click)="getOTP()">Get OTP</button> -->
|
|
|
|
<!-- </div>
|
|
</form>
|
|
</div>
|
|
-->
|
|
|
|
|
|
|
|
|